finishingheader{background: #4D00BD; height: 90px;}
header #logo{height:50px; margin:20px auto;display: block}
body,
main{overflow: hidden; }
body {font-family: 'Nunito', sans-serif;}

/* .template_1 #box{display: flex; flex-wrap: wrap; height: inherit;}
.template_1 #box1{height: calc(100% - 100px); width: 15%;}
.template_1 #box2{height: calc(100% - 100px); width: 70%; display: flex;}
.template_1 #box3{height: calc(100% - 100px); width: 15%;}
.template_1 #box4{height: 100px; width: 100%}
.template_1 #box2 iframe{margin: auto}
.template_1 .title{font-size: 20px; text-transform: uppercase; font-weight: bold}
.template_1 #clinic_logo{width: 100%;background: #FFF;}
.template_1 #progressContainer {width: 100%;height: 10px;background-color: #f1f1f1;position: relative;overflow: hidden;}
.template_1 #playerController {height: 100%;background-color: #4285f4;width: 0%;position: absolute;top: 0;left: 0;transition: width 0.2s ease; /* Smooth transition */}

/* .template_2 #box{display: flex; flex-wrap: wrap;}
.template_2 #box1{height: calc(100% - 150px); margin:75px 0px; width: 50px;}
.template_2 #box2{height: 100%; width: 450px; padding: 0px; -webkit-box-shadow: 0px 0px 33px 7px rgba(0,0,0,0.75);-moz-box-shadow: 0px 0px 33px 7px rgba(0,0,0,0.75);box-shadow: 0px 0px 33px 7px rgba(0,0,0,0.75);}
.template_2 #box3{height: calc(100% - 150px); margin:75px 0px; width: calc(100% - 500px);}
.template_2 #box_vetcheck_logo{left: 20px;right: 20px;bottom: 75px;}
.template_2 #clinic_logo{width: 200px; padding: 2px}
.template_2 #logo{background: #4D00BD; border-radius: 5px; width: 100%; padding: 10px 50px}
.template_2 #videoPlayer{border: 20px solid #000; border-radius: 20px; margin: auto; width: }
.template_2 #progressContainer {width: 100%;height: 10px;background-color: #f1f1f1;position: relative;overflow: hidden;}
.template_2 #playerController {height: 100%;background-color: #4285f4;width: 0%;position: absolute;top: 0;left: 0;transition: width 0.2s ease; /* Smooth transition */}
/* .template_2 #dateTime{font-weight: bold; font-size: 20px}
.template_2 #video_detail{background-color: #777}
.template_2 #video_description{background: #FFF; border-radius: 10px; padding: 10px 20px; width: calc(100% - 40px); margin: 20px auto;}
.template_2 #video_title{background: #FFF; border-radius: 10px; padding: 10px 20px; width: calc(100% - 40px); margin:20px auto; font-size: 30px; font-weight: bold} */ */ */

/* .template_3 #box{display: flex; flex-wrap: wrap;}
.template_3 #box1{height: calc(100% - 150px); margin:75px 0px; width: 50px;}
.template_3 #box2{height: calc(100% - 75px); width: 350px; margin: 0px 0px 75px 0px;padding: 0px;}
.template_3 #box3{height: calc(100% - 150px); margin:75px 0px; width: calc(100% - 700px);}
.template_3 #box4{height: calc(100% - 150px); margin:75px 0px; width: 300px;}
.template_3 #box_vetcheck_logo{left: 20px;right: 20px;bottom: 20px;}

.template_3 #videoPlayer{margin: auto;}

.template_3 #dateTime{font-weight: bold; font-size: 20px}
.template_3 #clinic_detail{
}
.template_3 #video_detail{background: #FFF; border-radius: 10px; padding: 10px 20px; }
.template_3 #video_description{width: 100%;margin: 20px auto;}
.template_3 #video_title{line-height: 30px; background: #FFF; border-radius: 10px; padding: 10px 20px; width: 100%; margin:20px auto; font-size: 20px; font-weight: bold}
.template_3 #video_timer{font-weight: bold}
.template_3 #playListLi li{text-transform: uppercase; list-style: none;width: 100%;padding: 5px 20px;background: #FFF;border-radius: 5px;margin: 0px auto 5px auto;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; position: relative; z-index: 1}
.template_3 #playListLi li.selected{  animation: pulse-animation 2s infinite;font-weight: bold; position: relative; z-index: 999999}
@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.8);
    background: #000;
    color: #FFF;
  }
  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
    background: #000;
    color: #FFF;
  }
} */

.clock {width: 200px;height: 200px;border-radius: 20px;position: relative;}
.outer-clock-face {position: relative;width: 100%;height: 100%;border-radius: 100%;overflow: hidden;}
.outer-clock-face::after {-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);transform: rotate(90deg)}
.outer-clock-face::before,
.outer-clock-face::after,
.outer-clock-face .marking{content: '';position: absolute;width: 3px;height: 100%;background: #bdbdcb;z-index: 0;left: 49%;}
.outer-clock-face .marking.marking-one {-webkit-transform: rotate(30deg);-moz-transform: rotate(30deg);transform: rotate(30deg)}
.outer-clock-face .marking.marking-two {-webkit-transform: rotate(60deg);-moz-transform: rotate(60deg);transform: rotate(60deg)}
.outer-clock-face .marking.marking-three {-webkit-transform: rotate(120deg);-moz-transform: rotate(120deg);transform: rotate(120deg)}
.outer-clock-face .marking.marking-four {-webkit-transform: rotate(150deg);-moz-transform: rotate(150deg);transform: rotate(150deg)}
.inner-clock-face {position: absolute;top: 10%;left: 10%;width: 80%;height: 80%;background: #FFF;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;z-index: 1;}
.inner-clock-face::before {content: '';position: absolute;top: 50%;left: 50%;width: 16px;height: 16px;border-radius: 18px;margin-left: -9px;margin-top: -6px;background: #4d4b63;z-index: 11;}
.hand {width: 50%;right: 50%;height: 6px;background: #61afff;position: absolute;top: 50%;border-radius: 6px;transform-origin: 100%;transform: rotate(90deg);transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);}
.hand.hour-hand {width: 30%;z-index: 3;}
.hand.min-hand {height: 3px;z-index: 10;width: 40%;}
.hand.second-hand {background: #ee791a;width: 45%;height: 2px;}
.clock_company{}



.template_4 #clinic_name {font-size: 1.75rem; font-weight:800;color:#fff;}
.template_4 #clinic_logo {width: 20%;padding:2px;background-color:#fff;border-radius:26px;}
.template_4 .font_time {font-size:1rem; font-weight:800;color:#fff; white-space: nowrap;}
.template_4 .font_date {font-size:1rem;font-weight:200;color:#fff; white-space: nowrap;}
.template_4 #progressContainer {width: 100%;height: 10px;background-color: transparent;position: absolute; left:0; bottom: 0px;}
.template_4 #playerController {height: 100%;width: 0%;position: absolute;top: 0;left: 0;transition: width 0.2s ease;}

.template_4 #box1 {background-color:#000;}
.template_4 #box2{height: 100%; background-color:#cecece; padding: 0px 20px}
.template_4 #box2 > div {flex: 1; text-align: center;}
.template_4 #box2 #box_clinic{align-items: baseline; padding: 40px 0px 0px 0px }
.template_4 #box3 {position:absolute;bottom:0px;left:0;height:120px;background-color:#fff;}
.template_4 #box3 #box3_top{height: 70px}
.template_4 #box3 #box3_top #video_qr canvas{height: 100%; width: auto}
.template_4 #box3 #box3_top .font_upcoming {font-size:1rem; font-weight:800;color:#000;}
.template_4 #box3 #box3_top .font_upcoming_title {font-size:0.75rem;font-weight:200;color:#000; text-transform: uppercase;}
.template_4 #box3 #box3_bottom{height: 50px}
.template_4 #box3 #box3_bottom .ticker {background-color:#e0e0e0;}
.template_4 #box3 #box3_bottom .video-footer-upcoming {}
.template_4 #box3 #box3_bottom #news_feed{font-size: 20px; margin: 0 auto;white-space: nowrap;justify-content: center;}
.template_4 #box3 #box3_bottom #news_feed:before,
.template_4 #box3 #box3_bottom #news_feed:after{content: "";display: inline-block;height: 100%;width: 200px;position: absolute;top: 0px; z-index: 9999;}
.template_4 #box3 #box3_bottom #news_feed:before{left: 0px;background: linear-gradient(90deg, rgba(224, 224, 224, 1) 0%, rgba(255, 0, 0, 0) 100%);}
.template_4 #box3 #box3_bottom #news_feed:after{right: 0px;background: linear-gradient(-90deg, rgba(224, 224, 224, 1) 0%, rgba(255, 0, 0, 0) 100%);}
.template_4 #box3 #box3_bottom #rss_icon{text-align: center; padding:0px; font-size: 0.75rem; flex-direction: column;    justify-content: center;}
.template_4 #box3 #box3_bottom #rss_icon svg{width: 15px; margin: 0px auto}
.template_4 #box3 #box3_bottom #rss_last_update{text-align: center; padding:0px; font-size: 0.75rem; flex-direction: column; justify-content: center;}
.template_4 #box3 #box3_bottom marquee {margin: auto}
.template_4 #box3 #box3_bottom .news-item.ticker-item {  display: inline-block; padding-right: 50px;}
.template_4 #box3 #box3_bottom .news-item.marquee-item {display: inline-block;padding-right: 20px;}
.template_4 #box3 #box3_bottom .news-item.marquee-item:before {content: ""; background:#000; margin: 0px 10px 0px 20px;border: 1px solid #000;border-radius: 100%;width: 10px;height: 10px;display: inline-block;}
.template_4 #box3 #box3_bottom .news-item.typewriter {display: block;margin-bottom: 10px; overflow: hidden;white-space: nowrap;}
.template_4 #box_weather{}
.template_4 #learn_more{font-size: 0.75rem;}
.template_4 #learn_more svg{width: 15px}

.template_main {}
.template_main header #logo{height: 100%; width: auto; margin: 0px}
.record_body .body_description{white-space: pre-wrap;font-size: 20px;line-height: 1;}
.remaining_time{font-size: 25px; font-weight: bold; }
.finishing .record_body{color: #F00; animation: finishingAnimationText 2s infinite alternate; border:1px solid #FFF;}
.queue_number{width: 100%; font-weight: bold; font-size: 30px}
.queue{width: 100%}
.room{width: 100%}
.completed{display: none}
    @keyframes finishingAnimationText {
        0% {
            scale: 1;
            opacity: 1;
            border:1px solid #FFF;
        }
        100% {
            scale: 1;
            opacity: 0.8;
            border:1px solid #F00;
        }
    }

@media (max-width: 575.98px) 
{
    .template_4 #clinic_logo {width: 50px;margin-bottom:12px;padding:4px; border-radius: 4px}
}
@media (min-width: 576px)
{

}
@media (min-width: 768px)
{
    .template_4 #clinic_name {font-size: 0.75rem;}
    .template_4 #clinic_logo {width: 50px;margin-bottom:12px;padding:4px; border-radius: 4px}
    .template_4 .font_time {font-size:0.5rem;}
    .template_4 .font_date {font-size:0.5rem;}
    .template_4 #box3 {height:70;}
    .template_4 #box3 #box3_top{height: 40px}
    .template_4 #box3 #box3_top .font_upcoming {font-size:10px }
    .template_4 #box3 #box3_top .font_upcoming_title {font-size:0.75rem;}
    .template_4 #box3 #box3_bottom{height: 30px}
    .template_4 #box3 #box3_bottom #news_feed{font-size: 10px; }
    .template_4 #box3 #box3_bottom #rss_last_update{font-size: 7px;}
    .template_4 #box3 #box3_bottom #rss_icon,
    .template_4 #learn_more{font-size: 7px;}
    .template_4 #box3 #box3_bottom #rss_icon svg,
    .template_4 #learn_more svg{width: 5px}
}
@media (min-width: 992px) 
{

}
@media (min-width: 1200px)
{
    .template_4 #clinic_name {font-size: 30px;}
    .template_4 #clinic_logo {width: 100px;margin-bottom:12px;padding:4px; border-radius: 10%}
    .template_4 .font_time {font-size:25px;}
    .template_4 .font_date {font-size:20px;}
    .template_4 #box3 {height:120;}
    .template_4 #box3 #box3_top{height: 70px}
    .template_4 #box3 #box3_top .font_upcoming {font-size:15px }
    .template_4 #box3 #box3_top .font_upcoming_title {font-size:12px;}
    .template_4 #box3 #box3_bottom{height: 50px}
    .template_4 #box3 #box3_bottom #news_feed{font-size: 12px; }
    .template_4 #box3 #box3_bottom #rss_last_update{font-size: 11px;}
    .template_4 #box3 #box3_bottom #rss_icon,
    .template_4 #learn_more{font-size: 11px;}
    .template_4 #box3 #box3_bottom #rss_icon svg,
    .template_4 #learn_more svg{width: 15px}
}
@media (min-width: 1400px)
{
    .template_4 #clinic_name {font-size: 1.5rem;}
    .template_4 #clinic_logo {width: 100px;margin-bottom:12px;padding:4px;border-radius:26px;}
    .template_4 .font_time {font-size:1rem;}
    .template_4 .font_date {font-size:1rem;}
    .template_4 #box3 {height:150px;}
    .template_4 #box3 #box3_top{height: 90px}
    .template_4 #box3 #box3_top .font_upcoming {font-size:2rem; }
    .template_4 #box3 #box3_bottom{height: 60px}
    .template_4 #box3 #box3_bottom #news_feed{font-size: 14px; }
    .template_4 #box3 #box3_top .font_upcoming_title,
    .template_4 #box3 #box3_bottom #rss_last_update{font-size: 12px;}
    .template_4 #box3 #box3_bottom #rss_icon,
    .template_4 #learn_more{font-size: 0.75rem;}
    .template_4 #box3 #box3_bottom #rss_icon svg,
    .template_4 #learn_more svg{width: 15px}
}
@media (min-width: 1800px)
{
    .template_4 #clinic_name {font-size: 3rem;}
    .template_4 #clinic_logo {width: 200px;margin-bottom:12px;padding:4px;;}
    .template_4 .font_time {font-size:2rem;}
    .template_4 .font_date {font-size:2rem;}
    .template_4 #box3 {height:250px;}
    .template_4 #box3 #box3_top{height: 140px}
    .template_4 #box3 #box3_top .font_upcoming {font-size:2rem; }
    .template_4 #box3 #box3_top .font_upcoming_title {font-size:1.5rem;}
    .template_4 #box3 #box3_bottom{height: 110px}
    .template_4 #box3 #box3_bottom #news_feed{font-size: 28px; }
    .template_4 #box3 #box3_bottom #rss_last_update{font-size: 1.5rem;}
    .template_4 #box3 #box3_bottom #rss_icon,
    .template_4 #learn_more{font-size: 1.5rem;}
    .template_4 #box3 #box3_bottom #rss_icon svg,
    .template_4 #learn_more svg{width: 30px}
    .record_body .body_description{font-size: 35px}
}
@media (min-width: 1920px)
{
    .template_4 #clinic_name {font-size: 3rem;}
    .template_4 #clinic_logo {width: 200px;margin-bottom:12px;padding:4px;;}
    .template_4 .font_time {font-size:2rem;}
    .template_4 .font_date {font-size:2rem;}
    .template_4 #box3 {height:250px;}
    .template_4 #box3 #box3_top{height: 140px}
    .template_4 #box3 #box3_top .font_upcoming {font-size:2rem; }
    .template_4 #box3 #box3_top .font_upcoming_title {font-size:1.5rem;}
    .template_4 #box3 #box3_bottom{height: 110px}
    .template_4 #box3 #box3_bottom #news_feed{font-size: 25px; }
    .template_4 #box3 #box3_bottom #rss_last_update{font-size: 16px;}
    .template_4 #box3 #box3_bottom #rss_icon,
    .template_4 #learn_more{font-size: 16px;}
    .template_4 #box3 #box3_bottom #rss_icon svg,
    .template_4 #learn_more svg{width: 30px}
    .record_body .body_description{font-size: 35px}
}