video::-webkit-media-controls-start-playback-button {
    display: none !important;
}
video::-webkit-media-controls {
    display: none !important;
  }
.livestream .class-name{
    margin-bottom: 20px;
}
.livestream .video-container{
    position: relative;
    height: 100%;
    background: black;
}
.livestream .video-container video{
    width: 100%;
    height: 100%;
    border: 3px solid #333;
}
.livestream .video-container .control-bar{
    background-color: #333;
    color: white;
}
.livestream .video-container .control-bar{
    background-color: rgba(1, 220, 130, 1);
    color: black;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.5em;
    font-weight: 600;
    padding: .2em .5em;
}

.livestream .video-container .control-bar .right{
    display: flex;
    align-items: center;
    gap: .3em;
}
.livestream .video-container .control-bar .guest-online{
    background-color: rgba(14, 14, 14, 0.9);
    border-radius: 1em;
    color: white;
    font-size: .8em;
    min-width: 3em;
    height: 1.75em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5em;
}
.livestream .video-container .control-bar .guest-online .fa-eye{
    color: rgba(1, 220, 130, 1);
}
.livestream .video-container .control-bar a{
    background-color: rgba(14, 14, 14, 0.9);
    padding: .1em .3em;
    border-radius: 1em;
    font-size: 1em;
    margin-right: 0;
    color: rgba(1, 220, 130, 1);
    font-size: .7em;
    height: 2em;
    width: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
}
.livestream a:hover,
.livestream a:focus{
    text-decoration: unset;
}
.livestream .btn-offer{
    text-align: center;
    margin-top: 30px;
    margin-bottom: 50px;
}
.livestream .btn-offer a{
    font-size: 24px;
    font-weight: 500;
}
.livestream .offer-image{
    margin-bottom: 20px;
    display: block;
}
.livestream .text-red{
    color: red;
}
.livestream .btn-start-broadcast{
    font-size: 22px;
}

.livestream.fullscreen .control-bar{
    position: absolute;
    top: 5px;
    right: 0;
    z-index: 2147483647;
    background-color: unset;
}
.livestream.fullscreen .video-container .control-bar .left{
    display: none;
}
.livestream.fullscreen .video-container .control-bar a{
    color: gray;
}

.livestream{
    height: 100%;
    font-size: 16px;
    display: flex;
    flex-direction: column;
}
.livestream .container{
    margin-top: 0;
}
.livestream .btn-sp-phone{
    background: rgba(1, 220, 130, 1);
    padding: .8em;
    border-radius: 80px;
    font-size: .8em;
    font-weight: 600;
    color: black;
    border: unset;
    display: flex;
    align-items: center;
    gap: .5em;
}
.livestream .header{
    background: url('/assets/img/bg-livestream.png');
    padding-bottom: 20em;
}
.livestream .header .container > div{
    display: flex;
    justify-content: space-between;
    margin: 2em 0 2.5em;
}
.livestream .body{
    flex: 1;
    background-color: white;
}
.livestream .body .video-live{
    margin-top: -20em;
    color: white;
    min-height: 20em;
}
.livestream .body .video-live .video-container{
    max-width: 900px;
    margin: 0 auto;
    border: .8em solid;
    border-image-source: radial-gradient(94.82% 426.01% at 6.81% 11.21%, #08E9FC 0%, #0464D5 28.65%, #01DC82 55.73%, #6B7ADB 78.12%, #315458 100%, #564CDD 100%);
    border-image-slice: 1;
    box-shadow: 20px 4px 80px 0px rgba(38, 39, 40, 0.2);
    border-radius: 1em;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
}
.livestream .body .video-live .img-live{
    display: flex;
    justify-content: center;
}
.livestream .body .video-live .live-day{
    font-size: 2.2em;
    text-align: center;
    color: white;
    font-weight: 600;
    margin-bottom: .5em;
}
.livestream .body .video-live .class-name{
    font-size: 2em;
    text-align: center;
    background: linear-gradient(90deg, #0FDD83 0%, #C6D88B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    margin-bottom: 1.2em;
}
.livestream .intro .cap{
    font-size: 2em;
    font-weight: 600;
}
.livestream .intro .des{
    display: flex;
    flex-direction: column;
    gap: .5em;
}
.livestream .intro .des ul li{
    list-style: disc;
    font-weight: 600;
    font-style: italic;
}
.livestream:not(.fullscreen) .body .video-live .img-live img{
    border: .8em solid;
    border-image-source: radial-gradient(94.82% 426.01% at 6.81% 11.21%, #08E9FC 0%, #0464D5 28.65%, #01DC82 55.73%, #6B7ADB 78.12%, #315458 100%, #564CDD 100%);
    border-image-slice: 1;
    box-shadow: 20px 4px 80px 0px rgba(38, 39, 40, 0.2);
    border-radius: 1em;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
}
.livestream .body .intro {
    margin-top: 2em;
    font-size: 1.1em;
    padding-bottom: 3em;
}
.livestream .body .intro .cap{
    font-size: 2em;
}

.livestream .body .contact-info{
    background: url('/assets/img/bg-livestream.png');
    display: none;
}
.livestream .body .contact-info .container{
    max-width: 600px;
    padding-top: 3em;
    padding-bottom: 3em;
}
.livestream .body .contact-info .cap{
    font-size: 2em;
    color: white;
    text-align: center;
}
.livestream .body .contact-info .form{
    display: flex;
    flex-direction: column;
    gap: .6em;
}
.livestream .body .contact-info .form .btn {
    background: rgba(1, 220, 130, 1);
    padding: .8em;
    border-radius: 80px;
    font-size: 1em;
    font-weight: 600;
    color: black;
    border: unset;
    display: flex;
    align-items: center;
    gap: .5em;
    width: 100%;
    justify-content: center;
}
.livestream .body .contact-info .form .border-radius{
    border-radius: .7em;
    padding: .5em .8em;
}
.livestream .body .contact-info .form input, .livestream .body .contact-info .form textarea{
    border: 0;
    border-radius: 0;
    box-shadow: unset;
    padding: 0;
}
.livestream .footer{
    background-color: white;
    padding: 1.5em 0 1em;
}
.livestream .footer .container > div{
    display: flex;
    justify-content: space-between;
}
.livestream .footer .icon-group{
    display: flex;
    gap: 1em;
}
.livestream .footer .icon-group a{
    color: black;
}
.livestream .footer .icon-group a .fa-brands{
    font-size: 1.2em;
}
@media only screen and (max-width: 600px) {
    .livestream{
        font-size: 14px;
    }
    .livestream .video-container .control-bar .left{
        font-size: 15px;
    }
    #ladichat-widget-frame{
        height: 40% !important;
    }
}