@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@100;400;700&display=swap');

* {
    font-family: 'Sarabun', sans-serif!important;
}

#approve-upload
{
  display: none;
}

.section-player
{
    padding: 60px 0;
}

.section-exam
{
    padding: 100px 0;
}

#topnav .navigation-menu > li > a {
    font-size: 16px;
    font-weight: normal;
}

.bg-profile {
  padding: 90px 0 0 0;
}

.bg-profile .public-profile {
  top: 20px;
}

.profile-session
{
  padding: 50px 0;
}


.edit-profile-session
{
  padding: 20px 0;
}

.score
{
  font-size: 17px;
  position: absolute;
  right: 0;
  top: 0;
  background: #2f55d4;
  color: #fff;
  padding: 9px;
  border-top-right-radius: 5px;
}

.card-edit
{
  font-size: 16px;
  position: absolute;
  right: 12px;
  top: 57px;
  background: #2f55d4;
  color: #fff;
  padding: 5px;
  padding-left: 15px;
  padding-right: 15px;
  border-top-right-radius: 5px;
}

.card-edit a
{
  font-size: 14px;
  color: #fff;
}

.sidebar
{
  margin-top:24px;
}

.student-session
{
  padding: 0px 0;
  padding-bottom: 20px;
}

.card .card-body {
  padding: 10px;
}

.bg-half-170 {
    padding: 50px 0;
}

.topic-play,.topic-play a
{
  background: #2f55d4;
  color: #fff!important;
}

.topic-play:hover,.topic-play a:hover
{
  background: #2f55d4;
  color: #fff!important;
}

.topic-wait, .topic-wait a{ 
    color: #3c4858;
    opacity: 0.5;
}

.topic-pending, .topic-pending a{ 
    color: #000;
    opacity: 1;
}

.topic-active, .topic-active a{
    color: #0d6efd;
    font-weight: bold;
}

.topic-complete, .topic-complete a{
    color: #2eca8b;
}

.topic-warning, .topic-warning a{
    color: #dc3545;
    opacity: 0.8;
}

.topic-processing, .topic-processing a
{
  color: #0d6efd;
  font-weight: bold;
}

.topic-finish, .topic-finish a
{
  color: #2eca8b;
}

.topic-pending, .topic-pending a
{
  color: #000;
  opacity: 1;
}

.bg-half-170-home {
    padding: 100px 0;
}

.player-control
{
    padding-top: 10px;
}

.dashboard-icon
{
    font-size:65px;
}

.isloading-wrapper.isloading-right{margin-left:10px;}
.isloading-overlay{position:relative;text-align:center;}.isloading-overlay .isloading-wrapper{background:#FFFFFF;-webkit-border-radius:7px;-webkit-background-clip:padding-box;-moz-border-radius:7px;-moz-background-clip:padding;border-radius:7px;background-clip:padding-box;display:inline-block;margin:0 auto;padding:10px 20px;top:10%;z-index:9000;}
.is-loading-text-wrapper{background:#fff;border-radius:2px;color:#444;display:inline-block;padding:10px 20px;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}.is-loading-text-wrapper:after{animation-name:is-loading-anim;animation-duration:1s;animation-iteration-count:infinite;animation-direction:alternate;content:'';display:inline-block;background:#0BB;height:2px;position:absolute;left:50%;bottom:1px;transform:translate(-50%, 0%);vertical-align:middle;width:1px;z-index:2}#is-loading-full-overlay,.is-loading-element-overlay{background:rgba(0,0,0,0.5);position:relative;top:0;bottom:0;left:0;right:0;z-index:99999}#is-loading-full-overlay{position:fixed}.is-loading-element-overlay{position:absolute}.is-loading-element-overlay-target{position:relative}.is-loading-element-overlay-target .is-loading-text-wrapper{padding-bottom:4px;padding-top:0px}@keyframes is-loading-anim{0%{width:1px}100%{width:98%}}

.lesson-name
{
  font-size: 30px;
  font-weight: bold;
  line-height: 50px;
}

.lobby-score-text
{
  color: #ffc107;
  font-size: 40px;
  line-height: 70px;
  margin-top: 23px;
  width: 20px;
  text-align: center;
}

.lobby-score-label
{
  font-size: 12px;
  bottom: 12px;
  position: absolute;
  left: 26px;
  color:#000;
}

.lobby-icon 
{
  top: 60px;
  position: absolute;
}

.lobby-icon-upload {
  top: 53px;
  left: 34px;
  position: absolute;
}

.lobby-content 
{
  margin-left: 30px;
  border-left: solid 1px #ffffff4f;
  padding-left: 10px;
}

.lobby-image-preview .avatar-btn {
  height: 50px;
  width: 50px;
  border: 1px solid #c3c3c3;
}

.lobby-image-preview .approve-btn {
  height: 90px;
  width: 90px;
  border: 1px solid #c3c3c3;
}

.lobby-content-upload
{
  margin-left: 5px;
  border-left: solid 1px #0000001f;
  padding-left: 10px;
}

.key-feature:hover {
transform: unset!important;
  box-shadow: unset!important;
}

#lobby_btn
{
  display: none;
}

.quiz {
  /* margin: 0 auto; */
  padding:10px;
  
}
.quiz ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.quiz-question {
  font-weight: bold;
  display: block;
  padding: 0px;
  margin: 0;
  font-size: 18px;
  line-height: 26px;
}

.quiz-item {
  background: #fff;
  border: solid #c7c7c7 1px;
  padding: 10px;
  margin-bottom: 15px;
  width: 100%;
  float: left;
}

.quiz-question .quiz-number {
  position: absolute;
  color: #0062cc;
  font-size: 14px;
}

.quiz-question .quiz-text {
  padding-inline-start: 35px;
  color: #242424;
}

.quiz-answer {
  margin: 0;
  padding: 10px;
  background: #f7f7f7;
  margin-bottom: 5px;
}
.quiz-answer:hover {
  background: rgb(112 181 255 / 20%);
}

.quiz-answer label {
  width: 100%;
  display: block;
  cursor: pointer;
  margin-bottom: 0px;
}

/* .quiz-answer:before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 1px solid #ccc;
  background: #fff;
  vertical-align: middle;
  margin-right: 10px;
} */
.quiz-answer.active:before {
  background-color: #333;
  border-color: #333;
}
.quiz-answer.correct:before {
  background-color: green;
  border-color: green;
}
.quiz-answer.incorrect:before {
  background-color: red;
  border-color: red;
}
.quiz-answer.active.correct:before {
outline: 2px solid green; 
  outline-offset: 2px;
}
.quiz-result {
  max-width: 960px;
  margin: 0 auto;
  font-weight: bold;
  text-align: center;
  color: #fff;
  padding: 20px;
}
.quiz-result.good {
  background: green;
}
.quiz-result.mid {
  background: orange;
}
.quiz-result.bad {
  background: red;
}

.quiz-answer .text 
{
  padding-inline-start: 35px;
}

.quiz-answer .check 
{

}

input[type=radio] {
  border: 2px solid #444;
  padding: 10px;
  -webkit-appearance: none;
  position:absolute;
}

input[type=radio]:checked {
  background: url(data:image/gif;base64,R0lGODdhAQABAPAAAAAAACZFySH5BAEAAAEALAAAAAABAAEAAAICRAEAOw==) no-repeat center center;
  background-size: 10px 10px;
}

input[type=radio]:focus {
  outline-color: transparent;
}

@media only screen and (max-width: 600px) {
  .toolbar {
    margin-bottom: 35px;
  }
}

.avatar-btn {
  height: 36px;
  width: 36px;
  top: 13px;
  position: relative;
  right: 5px;
}

.toolbar {
  padding: 10px;
  background: #fff;
  margin: 10px;
  min-width:250px;
}

.ans-active {
  background: rgb(112 181 255 / 50%);
}

.quick-nav
{

}

.current
{
  
}

.quiz-header
{
  padding: 10px;
  background: #fff;
  border: solid #c7c7c7 1px;
  margin-bottom: 20px;
}

.quiz-action
{
  background: #fff;
  padding: 10px;
  margin-bottom: 20px;
}

.player-time
{
  margin-top: 10px;
  font-size: 24px;
  width: 100%;
  text-align: center;
  line-height: 40px;
  border: 1px solid #e9ecef;
  letter-spacing: 1px;
  border-radius: 5px;
  background: #2f55d4;
  color: #fff;
}
}

.blog-detail
{
  padding: 10px;
  margin-bottom: 10px;
}

.exam-result
{
  color: #565656;
  background: #dee2e6;
  font-size: 14px;
  padding: 3px 10px 3px 10px;
  border-radius: 5px;
  margin-top: 5px;
  float: left;
  font-weight: bold;
}

.player-time-result
{
  color: #565656;
  background: #dee2e6;
  font-size: 14px;
  padding: 3px 10px 3px 10px;
  border-radius: 5px;
  margin-top: 5px;
  /* float: left; */
  font-weight: bold;
  display: block;
  width: 100px;
  text-align: center;
}

.player-time-start
{
  color: #fff;
  background: #dc3545;
  font-size: 14px;
  padding: 3px 10px 3px 10px;
  border-radius: 5px;
  margin-top: 5px;
  /* float: left; */
  font-weight: bold;
  display: block;
  width: 250px;
  text-align: center;
}

.progress-text
{
  float: left;
  width: 100%;
  position: relative;
  display: block;
  border-top: 1px solid #f4f5f6;
  padding-top: 10px;
}

.lesson-detail
{
  border-bottom: 1px solid #f4f5f6;
  padding-top: 0px;
  float: left;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.study-progress
{
  float: left;
  width: 100%;
  height: 5px;
  margin-top: 10px;
}

.progress-box {
  margin-top: 15px;
  margin-bottom: 15px;
  float: left;
  width: 100%;
}

.progress-box .progress .progress-value {
  position: absolute;
  top: -16px;
  right: 0px;
  left: 0px;
  font-size: 13px!important;
}

.progress-box .title
{
  padding-bottom: 10px;
  color: #000;
}

.study-overall-progress
{
  float: left;
  width: 100%;
  height: 22px;
  margin-top: 10px;
}

.course-detail-body {
  padding: 10px 0px 0px 1px!important;
  border-top: 1px solid #f4f5f6;
  margin-top: 10px;
}

#topic-table .text-end .uil
{
  margin-right: 10px;
}

.blog
{
  padding: 10px;
  margin-bottom: 15px;
}

.change-avatar
{
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  font-size: 10px;
  border: 1px solid #6c757d;
  color: #000;
  position: relative;
  float: right;
  box-shadow: 1px 1px 12px 1px rgba(0,0,0,0.75);
-webkit-box-shadow: 1px 1px 12px 1px rgba(0,0,0,0.75);
-moz-box-shadow: 1px 1px 12px 1px rgba(0,0,0,0.75);
}

.change-avatar a
{
  color: #000;
}

#avatar-upload
{
  display: none;
}

#idcard-upload
{
  display: none;
}

.qrcode-image
{
  padding-top: 10px;
  padding-bottom: 0px;
}

.qrcode-image img
{
  padding-bottom: 20px;
}

#footer_toolbar {
  position: fixed;
  left: 0px;
  bottom: 0px;
  height: 140px;
  width: 100%;
  background: #fff;
  padding: 20px 10px 10px 10px;
  border-top: 1px solid #d1d1d1;
  font-size: 14px;
  box-shadow: 1px 1px 10px -2px rgba(0,0,0,0.51);
-webkit-box-shadow: 1px 1px 10px -2px rgba(0,0,0,0.51);
-moz-box-shadow: 1px 1px 10px -2px rgba(0,0,0,0.51);
}

#footer_toolbar .show-exam-meter{
  width: 100%;
  font-size: 20px;
  font-weight: bold;
  display: block;
  float: left;
}

#footer_toolbar .show-time-meter{
  width: 100%;
  font-size: 20px;
  font-weight: bold;
  display: block;
  float: left;
}

#footer_toolbar .show-text-meter{
  color: #7e7e7e;
  font-size: 15px;
}

#reloadBTN{
  float: right;
}

.topic-play .bg-secondary {
  background-color: #f17425 !important;
}

.table-responsive .table-center tbody tr.topic-play:hover {
  background-color: #2c4dbb;
}

.bg-secondary {
  background-color: #5a6d90 !important;
}

.student-toolbar
{
  border-top: 1px solid #ededed;
  padding-top: 20px;
  margin-top: 10px;
}

.bg-primary .content .title
{
  color:#fff;
}

.bg-primary .content .title a
{
  color:#fff;
}

.bg-primary .content .exam_round_date
{
  color:#fff;
}

.bg-primary .content .exam_round
{
  color:#fff;
}

.bg-primary a
{
  color:#fff;
}

.bg-unactive
{
  background-color: #fbfbfb;
  border: 1px solid #e3e3e3;
}

.bg-unactive .content .title
{
  color:#a9a9a9;
}

.bg-unactive .content .title a
{
  color:#a9a9a9;
}

.bg-unactive a
{
  color:#a9a9a9;
}

.bg-unactive .content .exam_round_date
{
  color:#a9a9a9;
}

.bg-unactive .content .exam_round
{
  color:#a9a9a9;
}

.bg-unactive .uil
{
  color:#a9a9a9;
}

.font-size-12
{
  font-size: 12px!important ;
}

.font-size-10
{
  font-size: 10px!important ;
}

.font-size-14
{
  font-size: 14px!important ;
}

.font-size-16
{
  font-size: 16px!important ;
}

.font-size-18
{
  font-size: 18px!important ;
}
.font-size-20
{
  font-size: 20px!important ;
}

.score-result
{
  
}

.score-result h1.success
{
  font-size: 50px!important;
  color: #00cd6e;
}

.score-result h1.fail
{
  font-size: 50px!important;
  color: #db0303;
}

.score-result p
{
  font-size: 18px!important ;
}

.frb-group {
	margin: 15px 0;
}

.section-course {
  padding: 20px 0;
  position: relative;
}

.device-session {
  padding: 10px 0;
}

.float-right
{
  float: right!important ;
}

.image-placeholder img
{
  width: 100%;
}

.frb ~ .frb {
	margin-top: 15px;
}

.frb input[type="radio"]:empty,
.frb input[type="checkbox"]:empty {
	display: none;
}

.frb input[type="radio"] ~ label:before,
.frb input[type="checkbox"] ~ label:before {
	font-family: FontAwesome;
	content: '\f096';
	position: absolute;
	top: 50%;
	margin-top: -15px;
	left: 15px;
	font-size: 22px;
}

.frb input[type="radio"]:checked ~ label:before,
.frb input[type="checkbox"]:checked ~ label:before {
	content: '\f046';
}

.frb input[type="radio"] ~ label,
.frb input[type="checkbox"] ~ label {
	position: relative;
	cursor: pointer;
	width: 100%;
	border: 1px solid #ccc;
	border-radius: 5px;
	background-color: #fdfdfd;
}

.frb input[type="radio"] ~ label:focus,
.frb input[type="radio"] ~ label:hover,
.frb input[type="checkbox"] ~ label:focus,
.frb input[type="checkbox"] ~ label:hover {
	box-shadow: 0px 0px 3px #333;
}

.frb input[type="radio"]:checked ~ label,
.frb input[type="checkbox"]:checked ~ label {
	color: #fafafa;
}

.frb input[type="radio"]:checked ~ label,
.frb input[type="checkbox"]:checked ~ label {
	background-color: #f2f2f2;
}

.frb.frb-default input[type="radio"]:checked ~ label,
.frb.frb-default input[type="checkbox"]:checked ~ label {
	color: #333;
}

.frb.frb-primary input[type="radio"]:checked ~ label,
.frb.frb-primary input[type="checkbox"]:checked ~ label {
	background-color: #337ab7;
}

.frb.frb-success input[type="radio"]:checked ~ label,
.frb.frb-success input[type="checkbox"]:checked ~ label {
	background-color: #5cb85c;
}

.frb.frb-info input[type="radio"]:checked ~ label,
.frb.frb-info input[type="checkbox"]:checked ~ label {
	background-color: #5bc0de;
}

.frb.frb-warning input[type="radio"]:checked ~ label,
.frb.frb-warning input[type="checkbox"]:checked ~ label {
	background-color: #f0ad4e;
}

.frb.frb-danger input[type="radio"]:checked ~ label,
.frb.frb-danger input[type="checkbox"]:checked ~ label {
	background-color: #d9534f;
}

.frb input[type="radio"]:empty ~ label span,
.frb input[type="checkbox"]:empty ~ label span {
	display: inline-block;
}

.frb input[type="radio"]:empty ~ label span.frb-title,
.frb input[type="checkbox"]:empty ~ label span.frb-title {
	font-size: 16px;
	font-weight: 700;
  margin: 15px 10px 10px 40px;
}

.frb input[type="radio"]:empty ~ label span.frb-description,
.frb input[type="checkbox"]:empty ~ label span.frb-description {
	font-weight: normal;
	font-style: italic;
	color: #999;
	margin: 5px 5px 5px 50px;
}

.frb input[type="radio"]:empty:checked ~ label span.frb-description,
.frb input[type="checkbox"]:empty:checked ~ label span.frb-description {
	color: #fafafa;
}

.frb.frb-default input[type="radio"]:empty:checked ~ label span.frb-description,
.frb.frb-default input[type="checkbox"]:empty:checked ~ label span.frb-description {
	color: #999;
}

@media (max-width: 767px)
{
    .bg-home, .bg-half-170, .bg-half-260, .bg-marketing, .swiper-slider-hero .swiper-container .swiper-slide {
        padding: 40px 0;
        height: auto;
    }

    .lesson-name
    {
      font-size: 24px;
      line-height: 30px;
    }
}






/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/

hr.dashed {
  border-top: 2px dashed #e5e5e5;
}

hr.dotted {
  border-top: 2px dotted #e5e5e5;
  margin-top: 10px;
  margin-bottom: 10px;
}

hr.solid {
  border-top: 2px solid #e5e5e5;
}


hr.hr-text {
position: relative;
  border: none;
  height: 1px;
  background: #e5e5e5;
}

hr.hr-text::before {
  content: attr(data-content);
  display: inline-block;
  background: #fff;
  font-weight: bold;
  font-size: 0.85rem;
  color: #e5e5e5;
  border-radius: 30rem;
  padding: 0.2rem 2rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.img-container{
  position:relative;
  display:inline-block;
}

.img-container img
{
  width:100%;
}

.img-container .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(178 149 61 / 60%);
  opacity: 0;
  transition: opacity 500ms ease-in-out;
}

.img-container:hover .overlay{
  opacity:1;
}

.overlay span{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:#fff;
}

.image-placeholder
{
  margin-bottom: 30px;
}

.block-register
{
  background: #00000080;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 999;
  color: #fff;
  padding-top: 50%;
  text-align: center;
  font-size: 24px;
}

.block-register .text
{

}

.item-select-descripton 
{
  float: left;
  width: 100%;
  padding-left: 30px;
  padding-top: 10px;
  margin-top: -24px;
  padding-bottom: 10px;
  margin-bottom: 5px;
  border-bottom: 1px dotted #e3e3e3;

  font-size: 15px;
  color: #6e6e6e;
}

.file_input
{
  display: none;
}

.form-control-birthdate {
  padding: 15px 5px 9px 8px!important;
  font-size: 14px;
}

.custom-checkbox label {
  color: #000000;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 0;
}

.custom-radio
{
  margin-bottom: -5px;
  padding-top: 10px;
  float: left;
  width: 100%;
}

.custom-control-label
{
  left: 30px;
  padding-left: 5px;
  
}

.custom-radio .custom-control-label::before
{
  left: -20px;
}

.custom-radio label
{
  padding-left: 30px;
  line-height: 45px;
  margin-top: -10px;
  cursor: pointer;
  width: 100%;
}

.custom-control-label::after
{
    left: -20px;
}

.form-control-birthdate {
  padding: 4px 5px 9px 8px!important;
  font-size: 14px;
}

#frm-signup h6
{
  color: #0d6efd;
}

.form-check-label strong
{
  font-size: 16px;
}

.page-form-title
{
  color: #0d6efd;
}

.register-session {
  padding: 100px 0;
}

.payment-gateway .custom-radio
{
  width: unset;
}

.custom-payment-gateway
{
  margin-bottom: -5px;
  padding-top: 10px;
  float: left;
  width: unset;
}

.custom-radio label i
{
  font-size: 60px;
  color: #6c757d;
}

#select-bill-type{
}

#corp-form-input{
  display: none;
}

#fill-corp-address
{
  display: none;
}

.home-card
{
  border: 1px solid #e6e6e6;
  padding: 15px;
  margin: 5px;
}

.display-6 {
  font-size: 30px !important;
}

#bill_area
{
  display: none;
}

#register_area
{
  display: none;
}

.bg-invoice .card .card-body {
  padding: 25px;
}

.invoice-container {
  padding: 1rem;
}
.invoice-container .invoice-header .invoice-logo {
  margin: 0.8rem 0 0 0;
  display: inline-block;
  font-size: 1.6rem;
  font-weight: 700;
  color: #2e323c;
}
.invoice-container .invoice-header .invoice-logo img {
  max-width: 290px;
}
.invoice-container .invoice-header address {
  font-size: 1rem;
  margin: 0;
}
.invoice-container .invoice-details {
  margin: 1rem 0 0 0;
  padding: 1rem;
  line-height: 180%;
  background: #f5f6fa;
}
.invoice-container .invoice-details .invoice-num {
  text-align: left;
  font-size: 1rem;
}
.invoice-container .invoice-body {
  padding: 1rem 0 0 0;
}
.invoice-container .invoice-footer {
  text-align: center;
  color: #ff0000;
  font-size: 16px;
  margin: 15px 0 0 0;
}

.invoice-status {
  text-align: center;
  padding: 1rem;
  background: #ffffff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  margin-bottom: 1rem;
}
.invoice-status h2.status {
  margin: 0 0 0.8rem 0;
}
.invoice-status h5.status-title {
  margin: 0 0 0.8rem 0;
  color: #9fa8b9;
}
.invoice-status p.status-type {
  margin: 0.5rem 0 0 0;
  padding: 0;
  line-height: 150%;
}
.invoice-status i {
  font-size: 1.5rem;
  margin: 0 0 1rem 0;
  display: inline-block;
  padding: 1rem;
  background: #f5f6fa;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
}
.invoice-status .badge {
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .invoice-container {
      padding: 1rem;
  }
}


.custom-table {
  border: 1px solid #e0e3ec;
}
.custom-table thead {
  background: #007ae1;
}
.custom-table thead th {
  border: 0;
  color: #ffffff;
}
.custom-table > tbody tr:hover {
  background: #fafafa;
}
.custom-table > tbody tr:nth-of-type(even) {
  background-color: #ffffff;
}
.custom-table > tbody td {
  border: 1px solid #e6e9f0;
}


.card {
  background: #ffffff;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border: 0;
  margin-bottom: 1rem;
}

.text-success {
  color: #00bb42 !important;
}

.text-muted {
  color: #9fa8b9 !important;
}

.custom-actions-btns {
  margin: auto;
  display: flex;
  justify-content: flex-end;
}

.custom-actions-btns .btn {
  margin: .3rem 0 .3rem .3rem;
}

.topic-play .topic-duration-badge {
  background: #fff !important;
  color: #0062cc !important;
}

.topic-pending .topic-duration-badge {
  background: #9d9d9d !important;
  color: #fff !important;
}

.topic-finish .topic-duration-badge {
  background: #00ae3e !important;
  color: #fff !important;
}

.topic-duration-badge {
  background: #0062cc;
  color: #fff;
  padding: 3px 5px 3px 5px;
  font-size: 12px;
  border-radius: 4px;
  width: 75px;
  display: block;
  text-align: center;
}

.topic-name-list
{
}

.topic-name-list a
{
}

.topic-name-title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 30px;
}

.topic-timer-data
{
  color: #fff;
  background: #140b55;
  font-size: 13px;
  padding: 3px;
}

.status-icon-label
{
  font-size: 14px;
  float: left;
  display: block;
  margin-left: -25px;
}

.status-icon-data
{
  float: left;
  display: block;
  margin-top: -22px;
  margin-left: 10px;
}

.enroll_process
{
  float: right;
}

#user-nav
{
  display: none;
}

#guest-nav
{
  display: none;
}

.user-block
{
  display: none;
}

.guest-block
{
  display: none;
}

.topic-name-title small 
{
  font-size: 13px;
  color: #0d6efd;
  line-height: 10px;
}

.topic-link
{
  cursor: pointer;
}

.edit-session {
  padding: 30px 0;
}

#processing_overlay{
  background: #fff;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 999;
  top: 0;
  float: left;
  color: #000;
  text-align: center;
  padding-top: 25%;
  font-size: 18px;
}

.payment-label {
  float: right;
  background: #3c4858;
  padding: 7px;
  font-size: 13px;
  color: #fff;
  text-transform: capitalize;
}
h5.bill-title
{
  border-bottom: 1px solid #efefef;
  padding-bottom: 15px;
  margin-bottom: 2px;
}

.bill-title-small
{
  font-size: 15px;
  color: #a3a3a3;
  font-weight: normal;
}

.meta-border-bottom
{
  border-bottom: 1px solid #efefef;
  padding-bottom: 8px;
  margin-bottom: 2px;
}

.payment-label-title
{
  line-height: 30px;
  color: #2f55d4;
  font-size: 14px;
}
.blog:hover {
  transform:unset;
}

.border-left-white
{
  border-left: 1px solid rgb(255 255 255 / 30%);
    padding-left: 20px;
}

.mobileshow    { display:block; }

@media screen and (min-width: 500px) {
    .mobileshow   { display:none; }
}

.desktopshow    { display:none; }

@media screen and (min-width: 500px) {
    .desktopshow   { display:block; }
}

.title-heading h5 small 
{
  font-size: 16px;
  font-weight: normal;
  color: #9f9f9f;
}

.unactive
{
  opacity: 0.6;
}

#exam-pretest{
  border: 2px solid #0067ff;
}

.course-card-item
{
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: #d5d5d5 dashed 1px;
}

.result-label
{
  background: #fff;
  color: #000;
  padding: 5px 10px 5px 10px;
  margin-top: 2px;
  float: left;
}

.exam-result-pending
{
  color: #2f55d4;
  line-height: 24px;
}

.course-action-footer
{
  border-top: 1px solid #dfdfdf;
  padding-top: 25px;
  padding-left: 15px;
  font-weight: bold;
  color: #2f55d4;
}

.retest-score-number
{
  font-size: 20px;
}

.retest-score-number small
{
  font-size: 14px;
}

.enroll-btn
{

}

.cert-btn-block
{
  float: left;
  width: 100%;
  margin-top: 14px;
}

#player
{
  width: 100%;
}

.debug {
  position: fixed;
  top: -20px;
  right: 0;
  z-index: 99999999999;
  opacity: 0.9;
  height: 0px;
  overflow-y: scroll;
  overflow-y: hide;
  font-family: 'Courier New', Courier, monospace;
  background-color: #000000;
  color: #f8f8f2;
  padding: 10px;
  width: 100%;
}

.debug-container {
  height: 100%;
}

.debug-text {
  font-size: 13px;
  padding: 0px 0px 20px 0px;
  
}

.clear-debug-btn {
  font-size: 12px;
  padding: 5px 10px;
  background-color: #f8f8f2;;
  color: #333;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  position: fixed;
  top: 10px;
  right: 10px;
}

.debug-actions {
  position: fixed;
  z-index: 99999;
  height: 50px;
  bottom: -10px;
  width: 100%;
}

.expand-debug-btn {
  display: block;
  margin: 0 auto;
  font-size: 20px;
  padding: 5px 10px;
  background-color: #333;
  color: #f8f8f2;
  border: none;
  border-radius: 0px;
  cursor: pointer;
  width: 100%;
}

.debug .log-error {
  color: rgb(255, 0, 0);
  padding-bottom: 10px;
}

.debug .log-success {
  color: green;
  padding-bottom: 10px;
}

.debug .log-info {
  color: #0d6efd;
  padding-bottom: 10px;
}

.debug-text .timestamp
{
  color: #fff;
  font-weight: bold;
}

.debug-text .title
{
  color: #0100ff;
  font-weight: bold;
}

.plyr--video {
  border-radius: 5px;
}

@media (max-width: 991px)
{
  .course-action-footer
  {
    display: block !important;
  }
  .exam-result-pending
  {
    color: #2f55d4;
    line-height: 24px;
    margin-top: 14px;
    float: left;
  }
  .enroll-btn
  {
    width: 100%;
  }

  .retest-score-number
  {
    float: left;
  }

}




@charset "UTF-8";
html {
  --plyr-color-main: #1a6009;
}

@keyframes plyr-progress {
  to {
    background-position: 25px 0;
    background-position: var(--plyr-progress-loading-size, 25px) 0;
  }
}
@keyframes plyr-popup {
  0% {
    opacity: 0.5;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes plyr-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.plyr {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  align-items: center;
  direction: ltr;
  display: flex;
  flex-direction: column;
  font-family: inherit;
  font-family: var(--plyr-font-family, inherit);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  font-weight: var(--plyr-font-weight-regular, 400);
  height: 100%;
  line-height: 1.7;
  line-height: var(--plyr-line-height, 1.7);
  max-width: 100%;
  min-width: 200px;
  position: relative;
  text-shadow: none;
  transition: box-shadow 0.3s ease;
  z-index: 0;
}

.plyr audio,
.plyr iframe,
.plyr video {
  display: block;
  height: 100%;
  width: 100%;
}

.plyr button {
  font: inherit;
  line-height: inherit;
  width: auto;
}

.plyr:focus {
  outline: 0;
}

.plyr--full-ui {
  box-sizing: border-box;
}

.plyr--full-ui *,
.plyr--full-ui ::after,
.plyr--full-ui ::before {
  box-sizing: inherit;
}

.plyr--full-ui a,
.plyr--full-ui button,
.plyr--full-ui input,
.plyr--full-ui label {
  touch-action: manipulation;
}

.plyr__badge {
  background: #4a5464;
  background: var(--plyr-badge-background, #4a5464);
  border-radius: 2px;
  border-radius: var(--plyr-badge-border-radius, 2px);
  color: #fff;
  color: var(--plyr-badge-text-color, #fff);
  font-size: 9px;
  font-size: var(--plyr-font-size-badge, 9px);
  line-height: 1;
  padding: 3px 4px;
}

.plyr--full-ui ::-webkit-media-text-track-container {
  display: none;
}

.plyr__captions {
  animation: plyr-fade-in 0.3s ease;
  bottom: 0;
  display: none;
  font-size: 13px;
  font-size: var(--plyr-font-size-small, 13px);
  left: 0;
  padding: 10px;
  padding: var(--plyr-control-spacing, 10px);
  position: absolute;
  text-align: center;
  transition: transform 0.4s ease-in-out;
  width: 100%;
}

.plyr__captions span:empty {
  display: none;
}

@media (min-width: 480px) {
  .plyr__captions {
    font-size: 15px;
    font-size: var(--plyr-font-size-base, 15px);
    padding: calc(10px * 2);
    padding: calc(var(--plyr-control-spacing, 10px) * 2);
  }
}
@media (min-width: 768px) {
  .plyr__captions {
    font-size: 18px;
    font-size: var(--plyr-font-size-large, 18px);
  }
}
.plyr--captions-active .plyr__captions {
  display: block;
}

.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
  transform: translateY(calc(10px * -4));
  transform: translateY(calc(var(--plyr-control-spacing, 10px) * -4));
}

.plyr__caption {
  background: rgba(0, 0, 0, 0.8);
  background: var(--plyr-captions-background, rgba(0, 0, 0, 0.8));
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: #fff;
  color: var(--plyr-captions-text-color, #fff);
  line-height: 185%;
  padding: 0.2em 0.5em;
  white-space: pre-wrap;
}

.plyr__caption div {
  display: inline;
}

.plyr__control {
  background: 0 0;
  border: 0;
  border-radius: 3px;
  border-radius: var(--plyr-control-radius, 3px);
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
  overflow: visible;
  padding: calc(10px * 0.7);
  padding: calc(var(--plyr-control-spacing, 10px) * 0.7);
  position: relative;
  transition: all 0.3s ease;
}

.plyr__control svg {
  display: block;
  fill: currentColor;
  height: 18px;
  height: var(--plyr-control-icon-size, 18px);
  pointer-events: none;
  width: 18px;
  width: var(--plyr-control-icon-size, 18px);
}

.plyr__control:focus {
  outline: 0;
}

.plyr__control.plyr__tab-focus {
  outline-color: #00b3ff;
  outline-color: var(--plyr-tab-focus-color, var(--plyr-color-main, var(--plyr-color-main, #00b3ff)));
  outline-offset: 2px;
  outline-style: dotted;
  outline-width: 3px;
}

a.plyr__control {
  text-decoration: none;
}

a.plyr__control::after,
a.plyr__control::before {
  display: none;
}

.plyr__control.plyr__control--pressed .icon--not-pressed,
.plyr__control.plyr__control--pressed .label--not-pressed,
.plyr__control:not(.plyr__control--pressed) .icon--pressed,
.plyr__control:not(.plyr__control--pressed) .label--pressed {
  display: none;
}

.plyr--full-ui ::-webkit-media-controls {
  display: none;
}

.plyr__controls {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  text-align: center;
}

.plyr__controls .plyr__progress__container {
  flex: 1;
  min-width: 0;
}

.plyr__controls .plyr__controls__item {
  margin-left: calc(10px / 4);
  margin-left: calc(var(--plyr-control-spacing, 10px) / 4);
}

.plyr__controls .plyr__controls__item:first-child {
  margin-left: 0;
  margin-right: auto;
}

.plyr__controls .plyr__controls__item.plyr__progress__container {
  padding-left: calc(10px / 4);
  padding-left: calc(var(--plyr-control-spacing, 10px) / 4);
}

.plyr__controls .plyr__controls__item.plyr__time {
  padding: 0 calc(10px / 2);
  padding: 0 calc(var(--plyr-control-spacing, 10px) / 2);
}

.plyr__controls .plyr__controls__item.plyr__progress__container:first-child,
.plyr__controls .plyr__controls__item.plyr__time + .plyr__time,
.plyr__controls .plyr__controls__item.plyr__time:first-child {
  padding-left: 0;
}

.plyr__controls:empty {
  display: none;
}

.plyr [data-plyr=airplay],
.plyr [data-plyr=captions],
.plyr [data-plyr=fullscreen],
.plyr [data-plyr=pip] {
  display: none;
}

.plyr--airplay-supported [data-plyr=airplay],
.plyr--captions-enabled [data-plyr=captions],
.plyr--fullscreen-enabled [data-plyr=fullscreen],
.plyr--pip-supported [data-plyr=pip] {
  display: inline-block;
}

.plyr__menu {
  display: flex;
  position: relative;
}

.plyr__menu .plyr__control svg {
  transition: transform 0.3s ease;
}

.plyr__menu .plyr__control[aria-expanded=true] svg {
  transform: rotate(90deg);
}

.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip {
  display: none;
}

.plyr__menu__container {
  animation: plyr-popup 0.2s ease;
  background: rgba(255, 255, 255, 0.9);
  background: var(--plyr-menu-background, rgba(255, 255, 255, 0.9));
  border-radius: 4px;
  bottom: 100%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  box-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba(0, 0, 0, 0.15));
  color: #4a5464;
  color: var(--plyr-menu-color, #4a5464);
  font-size: 15px;
  font-size: var(--plyr-font-size-base, 15px);
  margin-bottom: 10px;
  position: absolute;
  right: -3px;
  text-align: left;
  white-space: nowrap;
  z-index: 3;
}

.plyr__menu__container > div {
  overflow: hidden;
  transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.plyr__menu__container::after {
  border: 4px solid transparent;
  border: var(--plyr-menu-arrow-size, 4px) solid transparent;
  border-top-color: rgba(255, 255, 255, 0.9);
  border-top-color: var(--plyr-menu-background, rgba(255, 255, 255, 0.9));
  content: "";
  height: 0;
  position: absolute;
  right: calc(((18px / 2) + calc(10px * 0.7)) - (4px / 2));
  right: calc( ( (var(--plyr-control-icon-size, 18px) / 2) + calc(var(--plyr-control-spacing, 10px) * 0.7) ) - (var(--plyr-menu-arrow-size, 4px) / 2) );
  top: 100%;
  width: 0;
}

.plyr__menu__container [role=menu] {
  padding: calc(10px * 0.7);
  padding: calc(var(--plyr-control-spacing, 10px) * 0.7);
}

.plyr__menu__container [role=menuitem],
.plyr__menu__container [role=menuitemradio] {
  margin-top: 2px;
}

.plyr__menu__container [role=menuitem]:first-child,
.plyr__menu__container [role=menuitemradio]:first-child {
  margin-top: 0;
}

.plyr__menu__container .plyr__control {
  align-items: center;
  color: #4a5464;
  color: var(--plyr-menu-color, #4a5464);
  display: flex;
  font-size: 13px;
  font-size: var(--plyr-font-size-menu, var(--plyr-font-size-small, 13px));
  padding-bottom: calc(calc(10px * 0.7) / 1.5);
  padding-bottom: calc(calc(var(--plyr-control-spacing, 10px) * 0.7) / 1.5);
  padding-left: calc(calc(10px * 0.7) * 1.5);
  padding-left: calc(calc(var(--plyr-control-spacing, 10px) * 0.7) * 1.5);
  padding-right: calc(calc(10px * 0.7) * 1.5);
  padding-right: calc(calc(var(--plyr-control-spacing, 10px) * 0.7) * 1.5);
  padding-top: calc(calc(10px * 0.7) / 1.5);
  padding-top: calc(calc(var(--plyr-control-spacing, 10px) * 0.7) / 1.5);
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 100%;
}

.plyr__menu__container .plyr__control > span {
  align-items: inherit;
  display: flex;
  width: 100%;
}

.plyr__menu__container .plyr__control::after {
  border: 4px solid transparent;
  border: var(--plyr-menu-item-arrow-size, 4px) solid transparent;
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.plyr__menu__container .plyr__control--forward {
  padding-right: calc(calc(10px * 0.7) * 4);
  padding-right: calc(calc(var(--plyr-control-spacing, 10px) * 0.7) * 4);
}

.plyr__menu__container .plyr__control--forward::after {
  border-left-color: #728197;
  border-left-color: var(--plyr-menu-arrow-color, #728197);
  right: calc((calc(10px * 0.7) * 1.5) - 4px);
  right: calc( (calc(var(--plyr-control-spacing, 10px) * 0.7) * 1.5) - var(--plyr-menu-item-arrow-size, 4px) );
}

.plyr__menu__container .plyr__control--forward.plyr__tab-focus::after,
.plyr__menu__container .plyr__control--forward:hover::after {
  border-left-color: currentColor;
}

.plyr__menu__container .plyr__control--back {
  font-weight: 400;
  font-weight: var(--plyr-font-weight-regular, 400);
  margin: calc(10px * 0.7);
  margin: calc(var(--plyr-control-spacing, 10px) * 0.7);
  margin-bottom: calc(calc(10px * 0.7) / 2);
  margin-bottom: calc(calc(var(--plyr-control-spacing, 10px) * 0.7) / 2);
  padding-left: calc(calc(10px * 0.7) * 4);
  padding-left: calc(calc(var(--plyr-control-spacing, 10px) * 0.7) * 4);
  position: relative;
  width: calc(100% - (calc(10px * 0.7) * 2));
  width: calc(100% - (calc(var(--plyr-control-spacing, 10px) * 0.7) * 2));
}

.plyr__menu__container .plyr__control--back::after {
  border-right-color: #728197;
  border-right-color: var(--plyr-menu-arrow-color, #728197);
  left: calc((calc(10px * 0.7) * 1.5) - 4px);
  left: calc( (calc(var(--plyr-control-spacing, 10px) * 0.7) * 1.5) - var(--plyr-menu-item-arrow-size, 4px) );
}

.plyr__menu__container .plyr__control--back::before {
  background: #dcdfe5;
  background: var(--plyr-menu-back-border-color, #dcdfe5);
  box-shadow: 0 1px 0 #fff;
  box-shadow: 0 1px 0 var(--plyr-menu-back-border-shadow-color, #fff);
  content: "";
  height: 1px;
  left: 0;
  margin-top: calc(calc(10px * 0.7) / 2);
  margin-top: calc(calc(var(--plyr-control-spacing, 10px) * 0.7) / 2);
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 100%;
}

.plyr__menu__container .plyr__control--back.plyr__tab-focus::after,
.plyr__menu__container .plyr__control--back:hover::after {
  border-right-color: currentColor;
}

.plyr__menu__container .plyr__control[role=menuitemradio] {
  padding-left: calc(10px * 0.7);
  padding-left: calc(var(--plyr-control-spacing, 10px) * 0.7);
}

.plyr__menu__container .plyr__control[role=menuitemradio]::after,
.plyr__menu__container .plyr__control[role=menuitemradio]::before {
  border-radius: 100%;
}

.plyr__menu__container .plyr__control[role=menuitemradio]::before {
  background: rgba(0, 0, 0, 0.1);
  content: "";
  display: block;
  flex-shrink: 0;
  height: 16px;
  margin-right: 10px;
  margin-right: var(--plyr-control-spacing, 10px);
  transition: all 0.3s ease;
  width: 16px;
}

.plyr__menu__container .plyr__control[role=menuitemradio]::after {
  background: #fff;
  border: 0;
  height: 6px;
  left: 12px;
  opacity: 0;
  top: 50%;
  transform: translateY(-50%) scale(0);
  transition: transform 0.3s ease, opacity 0.3s ease;
  width: 6px;
}

.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before {
  background: #00b3ff;
  background: var(--plyr-control-toggle-checked-background, var(--plyr-color-main, var(--plyr-color-main, #00b3ff)));
}

.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.plyr__menu__container .plyr__control[role=menuitemradio].plyr__tab-focus::before,
.plyr__menu__container .plyr__control[role=menuitemradio]:hover::before {
  background: rgba(35, 40, 47, 0.1);
}

.plyr__menu__container .plyr__menu__value {
  align-items: center;
  display: flex;
  margin-left: auto;
  margin-right: calc((calc(10px * 0.7) - 2) * -1);
  margin-right: calc((calc(var(--plyr-control-spacing, 10px) * 0.7) - 2) * -1);
  overflow: hidden;
  padding-left: calc(calc(10px * 0.7) * 3.5);
  padding-left: calc(calc(var(--plyr-control-spacing, 10px) * 0.7) * 3.5);
  pointer-events: none;
}

.plyr--full-ui input[type=range] {
  -webkit-appearance: none;
  background: 0 0;
  border: 0;
  border-radius: calc(13px * 2);
  border-radius: calc(var(--plyr-range-thumb-height, 13px) * 2);
  color: #00b3ff;
  color: var(--plyr-range-fill-background, var(--plyr-color-main, var(--plyr-color-main, #00b3ff)));
  display: block;
  height: calc((3px * 2) + 13px);
  height: calc( (var(--plyr-range-thumb-active-shadow-width, 3px) * 2) + var(--plyr-range-thumb-height, 13px) );
  margin: 0;
  padding: 0;
  transition: box-shadow 0.3s ease;
  width: 100%;
}

.plyr--full-ui input[type=range]::-webkit-slider-runnable-track {
  background: 0 0;
  border: 0;
  border-radius: calc(5px / 2);
  border-radius: calc(var(--plyr-range-track-height, 5px) / 2);
  height: 5px;
  height: var(--plyr-range-track-height, 5px);
  -webkit-transition: box-shadow 0.3s ease;
  transition: box-shadow 0.3s ease;
  -webkit-user-select: none;
  user-select: none;
  background-image: linear-gradient(to right, currentColor 0, transparent 0);
  background-image: linear-gradient(to right, currentColor var(--value, 0), transparent var(--value, 0));
}

.plyr--full-ui input[type=range]::-webkit-slider-thumb {
  background: #fff;
  background: var(--plyr-range-thumb-background, #fff);
  border: 0;
  border-radius: 100%;
  box-shadow: 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2);
  box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2));
  height: 13px;
  height: var(--plyr-range-thumb-height, 13px);
  position: relative;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  width: 13px;
  width: var(--plyr-range-thumb-height, 13px);
  -webkit-appearance: none;
  margin-top: calc(((13px - 5px) / 2) * -1);
  margin-top: calc( ( ( var(--plyr-range-thumb-height, 13px) - var(--plyr-range-track-height, 5px) ) / 2 ) * -1 );
}

.plyr--full-ui input[type=range]::-moz-range-track {
  background: 0 0;
  border: 0;
  border-radius: calc(5px / 2);
  border-radius: calc(var(--plyr-range-track-height, 5px) / 2);
  height: 5px;
  height: var(--plyr-range-track-height, 5px);
  -moz-transition: box-shadow 0.3s ease;
  transition: box-shadow 0.3s ease;
  user-select: none;
}

.plyr--full-ui input[type=range]::-moz-range-thumb {
  background: #fff;
  background: var(--plyr-range-thumb-background, #fff);
  border: 0;
  border-radius: 100%;
  box-shadow: 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2);
  box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2));
  height: 13px;
  height: var(--plyr-range-thumb-height, 13px);
  position: relative;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease;
  width: 13px;
  width: var(--plyr-range-thumb-height, 13px);
}

.plyr--full-ui input[type=range]::-moz-range-progress {
  background: currentColor;
  border-radius: calc(5px / 2);
  border-radius: calc(var(--plyr-range-track-height, 5px) / 2);
  height: 5px;
  height: var(--plyr-range-track-height, 5px);
}

.plyr--full-ui input[type=range]::-ms-track {
  background: 0 0;
  border: 0;
  border-radius: calc(5px / 2);
  border-radius: calc(var(--plyr-range-track-height, 5px) / 2);
  height: 5px;
  height: var(--plyr-range-track-height, 5px);
  -ms-transition: box-shadow 0.3s ease;
  transition: box-shadow 0.3s ease;
  -ms-user-select: none;
  user-select: none;
  color: transparent;
}

.plyr--full-ui input[type=range]::-ms-fill-upper {
  background: 0 0;
  border: 0;
  border-radius: calc(5px / 2);
  border-radius: calc(var(--plyr-range-track-height, 5px) / 2);
  height: 5px;
  height: var(--plyr-range-track-height, 5px);
  -ms-transition: box-shadow 0.3s ease;
  transition: box-shadow 0.3s ease;
  -ms-user-select: none;
  user-select: none;
}

.plyr--full-ui input[type=range]::-ms-fill-lower {
  background: 0 0;
  border: 0;
  border-radius: calc(5px / 2);
  border-radius: calc(var(--plyr-range-track-height, 5px) / 2);
  height: 5px;
  height: var(--plyr-range-track-height, 5px);
  -ms-transition: box-shadow 0.3s ease;
  transition: box-shadow 0.3s ease;
  -ms-user-select: none;
  user-select: none;
  background: currentColor;
}

.plyr--full-ui input[type=range]::-ms-thumb {
  background: #fff;
  background: var(--plyr-range-thumb-background, #fff);
  border: 0;
  border-radius: 100%;
  box-shadow: 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2);
  box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2));
  height: 13px;
  height: var(--plyr-range-thumb-height, 13px);
  position: relative;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
  width: 13px;
  width: var(--plyr-range-thumb-height, 13px);
  margin-top: 0;
}

.plyr--full-ui input[type=range]::-ms-tooltip {
  display: none;
}

.plyr--full-ui input[type=range]:focus {
  outline: 0;
}

.plyr--full-ui input[type=range]::-moz-focus-outer {
  border: 0;
}

.plyr--full-ui input[type=range].plyr__tab-focus::-webkit-slider-runnable-track {
  outline-color: #00b3ff;
  outline-color: var(--plyr-tab-focus-color, var(--plyr-color-main, var(--plyr-color-main, #00b3ff)));
  outline-offset: 2px;
  outline-style: dotted;
  outline-width: 3px;
}

.plyr--full-ui input[type=range].plyr__tab-focus::-moz-range-track {
  outline-color: #00b3ff;
  outline-color: var(--plyr-tab-focus-color, var(--plyr-color-main, var(--plyr-color-main, #00b3ff)));
  outline-offset: 2px;
  outline-style: dotted;
  outline-width: 3px;
}

.plyr--full-ui input[type=range].plyr__tab-focus::-ms-track {
  outline-color: #00b3ff;
  outline-color: var(--plyr-tab-focus-color, var(--plyr-color-main, var(--plyr-color-main, #00b3ff)));
  outline-offset: 2px;
  outline-style: dotted;
  outline-width: 3px;
}

.plyr__poster {
  background-color: #000;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 0.2s ease;
  width: 100%;
  z-index: 1;
}

.plyr--stopped.plyr__poster-enabled .plyr__poster {
  opacity: 1;
}

.plyr__time {
  font-size: 13px;
  font-size: var(--plyr-font-size-time, var(--plyr-font-size-small, 13px));
}

.plyr__time + .plyr__time::before {
  content: "⁄";
  margin-right: 10px;
  margin-right: var(--plyr-control-spacing, 10px);
}

@media (max-width: calc(768px - 1)) {
  .plyr__time + .plyr__time {
    display: none;
  }
}
.plyr__tooltip {
  background: rgba(255, 255, 255, 0.9);
  background: var(--plyr-tooltip-background, rgba(255, 255, 255, 0.9));
  border-radius: 3px;
  border-radius: var(--plyr-tooltip-radius, 3px);
  bottom: 100%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  box-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba(0, 0, 0, 0.15));
  color: #4a5464;
  color: var(--plyr-tooltip-color, #4a5464);
  font-size: 13px;
  font-size: var(--plyr-font-size-small, 13px);
  font-weight: 400;
  font-weight: var(--plyr-font-weight-regular, 400);
  left: 50%;
  line-height: 1.3;
  margin-bottom: calc(calc(10px / 2) * 2);
  margin-bottom: calc(calc(var(--plyr-control-spacing, 10px) / 2) * 2);
  opacity: 0;
  padding: calc(10px / 2) calc(calc(10px / 2) * 1.5);
  padding: calc(var(--plyr-control-spacing, 10px) / 2) calc(calc(var(--plyr-control-spacing, 10px) / 2) * 1.5);
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, 10px) scale(0.8);
  transform-origin: 50% 100%;
  transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
  white-space: nowrap;
  z-index: 2;
}

.plyr__tooltip::before {
  border-left: 4px solid transparent;
  border-left: var(--plyr-tooltip-arrow-size, 4px) solid transparent;
  border-right: 4px solid transparent;
  border-right: var(--plyr-tooltip-arrow-size, 4px) solid transparent;
  border-top: 4px solid rgba(255, 255, 255, 0.9);
  border-top: var(--plyr-tooltip-arrow-size, 4px) solid var(--plyr-tooltip-background, rgba(255, 255, 255, 0.9));
  bottom: calc(4px * -1);
  bottom: calc(var(--plyr-tooltip-arrow-size, 4px) * -1);
  content: "";
  height: 0;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 0;
  z-index: 2;
}

.plyr .plyr__control.plyr__tab-focus .plyr__tooltip,
.plyr .plyr__control:hover .plyr__tooltip,
.plyr__tooltip--visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.plyr .plyr__control:hover .plyr__tooltip {
  z-index: 3;
}

.plyr__controls > .plyr__control:first-child .plyr__tooltip,
.plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip {
  left: 0;
  transform: translate(0, 10px) scale(0.8);
  transform-origin: 0 100%;
}

.plyr__controls > .plyr__control:first-child .plyr__tooltip::before,
.plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip::before {
  left: calc((18px / 2) + calc(10px * 0.7));
  left: calc( (var(--plyr-control-icon-size, 18px) / 2) + calc(var(--plyr-control-spacing, 10px) * 0.7) );
}

.plyr__controls > .plyr__control:last-child .plyr__tooltip {
  left: auto;
  right: 0;
  transform: translate(0, 10px) scale(0.8);
  transform-origin: 100% 100%;
}

.plyr__controls > .plyr__control:last-child .plyr__tooltip::before {
  left: auto;
  right: calc((18px / 2) + calc(10px * 0.7));
  right: calc( (var(--plyr-control-icon-size, 18px) / 2) + calc(var(--plyr-control-spacing, 10px) * 0.7) );
  transform: translateX(50%);
}

.plyr__controls > .plyr__control:first-child .plyr__tooltip--visible,
.plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip--visible,
.plyr__controls > .plyr__control:first-child + .plyr__control.plyr__tab-focus .plyr__tooltip,
.plyr__controls > .plyr__control:first-child + .plyr__control:hover .plyr__tooltip,
.plyr__controls > .plyr__control:first-child.plyr__tab-focus .plyr__tooltip,
.plyr__controls > .plyr__control:first-child:hover .plyr__tooltip,
.plyr__controls > .plyr__control:last-child .plyr__tooltip--visible,
.plyr__controls > .plyr__control:last-child.plyr__tab-focus .plyr__tooltip,
.plyr__controls > .plyr__control:last-child:hover .plyr__tooltip {
  transform: translate(0, 0) scale(1);
}

.plyr__progress {
  left: calc(13px * 0.5);
  left: calc(var(--plyr-range-thumb-height, 13px) * 0.5);
  margin-right: 13px;
  margin-right: var(--plyr-range-thumb-height, 13px);
  position: relative;
}

.plyr__progress input[type=range],
.plyr__progress__buffer {
  margin-left: calc(13px * -0.5);
  margin-left: calc(var(--plyr-range-thumb-height, 13px) * -0.5);
  margin-right: calc(13px * -0.5);
  margin-right: calc(var(--plyr-range-thumb-height, 13px) * -0.5);
  width: calc(100% + 13px);
  width: calc(100% + var(--plyr-range-thumb-height, 13px));
}

.plyr__progress input[type=range] {
  position: relative;
  z-index: 2;
}

.plyr__progress .plyr__tooltip {
  font-size: 13px;
  font-size: var(--plyr-font-size-time, var(--plyr-font-size-small, 13px));
  left: 0;
}

.plyr__progress__buffer {
  -webkit-appearance: none;
  background: 0 0;
  border: 0;
  border-radius: 100px;
  height: 5px;
  height: var(--plyr-range-track-height, 5px);
  left: 0;
  margin-top: calc((5px / 2) * -1);
  margin-top: calc((var(--plyr-range-track-height, 5px) / 2) * -1);
  padding: 0;
  position: absolute;
  top: 50%;
}

.plyr__progress__buffer::-webkit-progress-bar {
  background: 0 0;
}

.plyr__progress__buffer::-webkit-progress-value {
  background: currentColor;
  border-radius: 100px;
  min-width: 5px;
  min-width: var(--plyr-range-track-height, 5px);
  -webkit-transition: width 0.2s ease;
  transition: width 0.2s ease;
}

.plyr__progress__buffer::-moz-progress-bar {
  background: currentColor;
  border-radius: 100px;
  min-width: 5px;
  min-width: var(--plyr-range-track-height, 5px);
  -moz-transition: width 0.2s ease;
  transition: width 0.2s ease;
}

.plyr__progress__buffer::-ms-fill {
  border-radius: 100px;
  -ms-transition: width 0.2s ease;
  transition: width 0.2s ease;
}

.plyr--loading .plyr__progress__buffer {
  animation: plyr-progress 1s linear infinite;
  background-image: linear-gradient(-45deg, rgba(35, 40, 47, 0.6) 25%, transparent 25%, transparent 50%, rgba(35, 40, 47, 0.6) 50%, rgba(35, 40, 47, 0.6) 75%, transparent 75%, transparent);
  background-image: linear-gradient(-45deg, var(--plyr-progress-loading-background, rgba(35, 40, 47, 0.6)) 25%, transparent 25%, transparent 50%, var(--plyr-progress-loading-background, rgba(35, 40, 47, 0.6)) 50%, var(--plyr-progress-loading-background, rgba(35, 40, 47, 0.6)) 75%, transparent 75%, transparent);
  background-repeat: repeat-x;
  background-size: 25px 25px;
  background-size: var(--plyr-progress-loading-size, 25px) var(--plyr-progress-loading-size, 25px);
  color: transparent;
}

.plyr--video.plyr--loading .plyr__progress__buffer {
  background-color: rgba(255, 255, 255, 0.25);
  background-color: var(--plyr-video-progress-buffered-background, rgba(255, 255, 255, 0.25));
}

.plyr--audio.plyr--loading .plyr__progress__buffer {
  background-color: rgba(193, 200, 209, 0.6);
  background-color: var(--plyr-audio-progress-buffered-background, rgba(193, 200, 209, 0.6));
}

.plyr__volume {
  align-items: center;
  display: flex;
  max-width: 110px;
  min-width: 80px;
  position: relative;
  width: 20%;
}

.plyr__volume input[type=range] {
  margin-left: calc(10px / 2);
  margin-left: calc(var(--plyr-control-spacing, 10px) / 2);
  margin-right: calc(10px / 2);
  margin-right: calc(var(--plyr-control-spacing, 10px) / 2);
  position: relative;
  z-index: 2;
}

.plyr--is-ios .plyr__volume {
  min-width: 0;
  width: auto;
}

.plyr--audio {
  display: block;
}

.plyr--audio .plyr__controls {
  background: #fff;
  background: var(--plyr-audio-controls-background, #fff);
  border-radius: inherit;
  color: #4a5464;
  color: var(--plyr-audio-control-color, #4a5464);
  padding: 10px;
  padding: var(--plyr-control-spacing, 10px);
}

.plyr--audio .plyr__control.plyr__tab-focus,
.plyr--audio .plyr__control:hover,
.plyr--audio .plyr__control[aria-expanded=true] {
  background: #00b3ff;
  background: var(--plyr-audio-control-background-hover, var(--plyr-color-main, var(--plyr-color-main, #00b3ff)));
  color: #fff;
  color: var(--plyr-audio-control-color-hover, #fff);
}

.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track {
  background-color: rgba(193, 200, 209, 0.6);
  background-color: var(--plyr-audio-range-track-background, var(--plyr-audio-progress-buffered-background, rgba(193, 200, 209, 0.6)));
}

.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track {
  background-color: rgba(193, 200, 209, 0.6);
  background-color: var(--plyr-audio-range-track-background, var(--plyr-audio-progress-buffered-background, rgba(193, 200, 209, 0.6)));
}

.plyr--full-ui.plyr--audio input[type=range]::-ms-track {
  background-color: rgba(193, 200, 209, 0.6);
  background-color: var(--plyr-audio-range-track-background, var(--plyr-audio-progress-buffered-background, rgba(193, 200, 209, 0.6)));
}

.plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb {
  box-shadow: 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2), 0 0 0 3px rgba(35, 40, 47, 0.1);
  box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, rgba(35, 40, 47, 0.1));
}

.plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb {
  box-shadow: 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2), 0 0 0 3px rgba(35, 40, 47, 0.1);
  box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, rgba(35, 40, 47, 0.1));
}

.plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb {
  box-shadow: 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2), 0 0 0 3px rgba(35, 40, 47, 0.1);
  box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, rgba(35, 40, 47, 0.1));
}

.plyr--audio .plyr__progress__buffer {
  color: rgba(193, 200, 209, 0.6);
  color: var(--plyr-audio-progress-buffered-background, rgba(193, 200, 209, 0.6));
}

.plyr--video {
  background: #000;
  overflow: hidden;
}

.plyr--video.plyr--menu-open {
  overflow: visible;
}

.plyr__video-wrapper {
  background: #000;
  height: 100%;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.plyr__video-embed,
.plyr__video-wrapper--fixed-ratio {
  height: 0;
  padding-bottom: 56.25%;
}

.plyr__video-embed iframe,
.plyr__video-wrapper--fixed-ratio video {
  border: 0;
  left: 0;
  position: absolute;
  top: 0;
}

.plyr--full-ui .plyr__video-embed > .plyr__video-embed__container {
  padding-bottom: 240%;
  position: relative;
  transform: translateY(-38.28125%);
}

.plyr--video .plyr__controls {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
  background: var(--plyr-video-controls-background, linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75)));
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  bottom: 0;
  color: #fff;
  color: var(--plyr-video-control-color, #fff);
  left: 0;
  padding: calc(10px / 2);
  padding: calc(var(--plyr-control-spacing, 10px) / 2);
  padding-top: calc(10px * 2);
  padding-top: calc(var(--plyr-control-spacing, 10px) * 2);
  position: absolute;
  right: 0;
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
  z-index: 3;
}

@media (min-width: 480px) {
  .plyr--video .plyr__controls {
    padding: 10px;
    padding: var(--plyr-control-spacing, 10px);
    padding-top: calc(10px * 3.5);
    padding-top: calc(var(--plyr-control-spacing, 10px) * 3.5);
  }
}
.plyr--video.plyr--hide-controls .plyr__controls {
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
}

.plyr--video .plyr__control.plyr__tab-focus,
.plyr--video .plyr__control:hover,
.plyr--video .plyr__control[aria-expanded=true] {
  background: #00b3ff;
  background: var(--plyr-video-control-background-hover, var(--plyr-color-main, var(--plyr-color-main, #00b3ff)));
  color: #fff;
  color: var(--plyr-video-control-color-hover, #fff);
}

.plyr__control--overlaid {
  background: #00b3ff;
  background: var(--plyr-video-control-background-hover, var(--plyr-color-main, var(--plyr-color-main, #00b3ff)));
  border: 0;
  border-radius: 100%;
  color: #fff;
  color: var(--plyr-video-control-color, #fff);
  display: none;
  left: 50%;
  opacity: 0.9;
  padding: calc(10px * 1.5);
  padding: calc(var(--plyr-control-spacing, 10px) * 1.5);
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: 0.3s;
  z-index: 2;
}

.plyr__control--overlaid svg {
  left: 2px;
  position: relative;
}

.plyr__control--overlaid:focus,
.plyr__control--overlaid:hover {
  opacity: 1;
}

.plyr--playing .plyr__control--overlaid {
  opacity: 0;
  visibility: hidden;
}

.plyr--full-ui.plyr--video .plyr__control--overlaid {
  display: block;
}

.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track {
  background-color: rgba(255, 255, 255, 0.25);
  background-color: var(--plyr-video-range-track-background, var(--plyr-video-progress-buffered-background, rgba(255, 255, 255, 0.25)));
}

.plyr--full-ui.plyr--video input[type=range]::-moz-range-track {
  background-color: rgba(255, 255, 255, 0.25);
  background-color: var(--plyr-video-range-track-background, var(--plyr-video-progress-buffered-background, rgba(255, 255, 255, 0.25)));
}

.plyr--full-ui.plyr--video input[type=range]::-ms-track {
  background-color: rgba(255, 255, 255, 0.25);
  background-color: var(--plyr-video-range-track-background, var(--plyr-video-progress-buffered-background, rgba(255, 255, 255, 0.25)));
}

.plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb {
  box-shadow: 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2), 0 0 0 3px rgba(255, 255, 255, 0.5);
  box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, rgba(255, 255, 255, 0.5));
}

.plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb {
  box-shadow: 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2), 0 0 0 3px rgba(255, 255, 255, 0.5);
  box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, rgba(255, 255, 255, 0.5));
}

.plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb {
  box-shadow: 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2), 0 0 0 3px rgba(255, 255, 255, 0.5);
  box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, rgba(255, 255, 255, 0.5));
}

.plyr--video .plyr__progress__buffer {
  color: rgba(255, 255, 255, 0.25);
  color: var(--plyr-video-progress-buffered-background, rgba(255, 255, 255, 0.25));
}

.plyr:-webkit-full-screen {
  background: #000;
  border-radius: 0 !important;
  height: 100%;
  margin: 0;
  width: 100%;
}

.plyr:-ms-fullscreen {
  background: #000;
  border-radius: 0 !important;
  height: 100%;
  margin: 0;
  width: 100%;
}

.plyr:fullscreen {
  background: #000;
  border-radius: 0 !important;
  height: 100%;
  margin: 0;
  width: 100%;
}

.plyr:-webkit-full-screen video {
  height: 100%;
}

.plyr:-ms-fullscreen video {
  height: 100%;
}

.plyr:fullscreen video {
  height: 100%;
}

.plyr:-webkit-full-screen .plyr__video-wrapper {
  height: 100%;
  position: static;
}

.plyr:-ms-fullscreen .plyr__video-wrapper {
  height: 100%;
  position: static;
}

.plyr:fullscreen .plyr__video-wrapper {
  height: 100%;
  position: static;
}

.plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper {
  height: 0;
  position: relative;
}

.plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper {
  height: 0;
  position: relative;
}

.plyr:fullscreen.plyr--vimeo .plyr__video-wrapper {
  height: 0;
  position: relative;
}

.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen {
  display: block;
}

.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen {
  display: block;
}

.plyr:fullscreen .plyr__control .icon--exit-fullscreen {
  display: block;
}

.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen + svg {
  display: none;
}

.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen + svg {
  display: none;
}

.plyr:fullscreen .plyr__control .icon--exit-fullscreen + svg {
  display: none;
}

.plyr:-webkit-full-screen.plyr--hide-controls {
  cursor: none;
}

.plyr:-ms-fullscreen.plyr--hide-controls {
  cursor: none;
}

.plyr:fullscreen.plyr--hide-controls {
  cursor: none;
}

@media (min-width: 1024px) {
  .plyr:-webkit-full-screen .plyr__captions {
    font-size: 21px;
    font-size: var(--plyr-font-size-xlarge, 21px);
  }

  .plyr:-ms-fullscreen .plyr__captions {
    font-size: 21px;
    font-size: var(--plyr-font-size-xlarge, 21px);
  }

  .plyr:fullscreen .plyr__captions {
    font-size: 21px;
    font-size: var(--plyr-font-size-xlarge, 21px);
  }
}
.plyr:-webkit-full-screen {
  background: #000;
  border-radius: 0 !important;
  height: 100%;
  margin: 0;
  width: 100%;
}

.plyr:-webkit-full-screen video {
  height: 100%;
}

.plyr:-webkit-full-screen .plyr__video-wrapper {
  height: 100%;
  position: static;
}

.plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper {
  height: 0;
  position: relative;
}

.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen {
  display: block;
}

.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen + svg {
  display: none;
}

.plyr:-webkit-full-screen.plyr--hide-controls {
  cursor: none;
}

@media (min-width: 1024px) {
  .plyr:-webkit-full-screen .plyr__captions {
    font-size: 21px;
    font-size: var(--plyr-font-size-xlarge, 21px);
  }
}
.plyr:-moz-full-screen {
  background: #000;
  border-radius: 0 !important;
  height: 100%;
  margin: 0;
  width: 100%;
}

.plyr:-moz-full-screen video {
  height: 100%;
}

.plyr:-moz-full-screen .plyr__video-wrapper {
  height: 100%;
  position: static;
}

.plyr:-moz-full-screen.plyr--vimeo .plyr__video-wrapper {
  height: 0;
  position: relative;
}

.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen {
  display: block;
}

.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen + svg {
  display: none;
}

.plyr:-moz-full-screen.plyr--hide-controls {
  cursor: none;
}

@media (min-width: 1024px) {
  .plyr:-moz-full-screen .plyr__captions {
    font-size: 21px;
    font-size: var(--plyr-font-size-xlarge, 21px);
  }
}
.plyr:-ms-fullscreen {
  background: #000;
  border-radius: 0 !important;
  height: 100%;
  margin: 0;
  width: 100%;
}

.plyr:-ms-fullscreen video {
  height: 100%;
}

.plyr:-ms-fullscreen .plyr__video-wrapper {
  height: 100%;
  position: static;
}

.plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper {
  height: 0;
  position: relative;
}

.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen {
  display: block;
}

.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen + svg {
  display: none;
}

.plyr:-ms-fullscreen.plyr--hide-controls {
  cursor: none;
}

@media (min-width: 1024px) {
  .plyr:-ms-fullscreen .plyr__captions {
    font-size: 21px;
    font-size: var(--plyr-font-size-xlarge, 21px);
  }
}
.plyr--fullscreen-fallback {
  background: #000;
  border-radius: 0 !important;
  height: 100%;
  margin: 0;
  width: 100%;
  bottom: 0;
  display: block;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10000000;
}

.plyr--fullscreen-fallback video {
  height: 100%;
}

.plyr--fullscreen-fallback .plyr__video-wrapper {
  height: 100%;
  position: static;
}

.plyr--fullscreen-fallback.plyr--vimeo .plyr__video-wrapper {
  height: 0;
  position: relative;
}

.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen {
  display: block;
}

.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen + svg {
  display: none;
}

.plyr--fullscreen-fallback.plyr--hide-controls {
  cursor: none;
}

@media (min-width: 1024px) {
  .plyr--fullscreen-fallback .plyr__captions {
    font-size: 21px;
    font-size: var(--plyr-font-size-xlarge, 21px);
  }
}
.plyr__ads {
  border-radius: inherit;
  bottom: 0;
  cursor: pointer;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

.plyr__ads > div,
.plyr__ads > div iframe {
  height: 100%;
  position: absolute;
  width: 100%;
}

.plyr__ads::after {
  background: #23282f;
  border-radius: 2px;
  bottom: 10px;
  bottom: var(--plyr-control-spacing, 10px);
  color: #fff;
  content: attr(data-badge-text);
  font-size: 11px;
  padding: 2px 6px;
  pointer-events: none;
  position: absolute;
  right: 10px;
  right: var(--plyr-control-spacing, 10px);
  z-index: 3;
}

.plyr__ads::after:empty {
  display: none;
}

.plyr__cues {
  background: currentColor;
  display: block;
  height: 5px;
  height: var(--plyr-range-track-height, 5px);
  left: 0;
  margin: -var(--plyr-range-track-height, 5px)/2 0 0;
  opacity: 0.8;
  position: absolute;
  top: 50%;
  width: 3px;
  z-index: 3;
}

.plyr__preview-thumb {
  background-color: rgba(255, 255, 255, 0.9);
  background-color: var(--plyr-tooltip-background, rgba(255, 255, 255, 0.9));
  border-radius: 3px;
  bottom: 100%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  box-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba(0, 0, 0, 0.15));
  margin-bottom: calc(calc(10px / 2) * 2);
  margin-bottom: calc(calc(var(--plyr-control-spacing, 10px) / 2) * 2);
  opacity: 0;
  padding: 3px;
  padding: var(--plyr-tooltip-radius, 3px);
  pointer-events: none;
  position: absolute;
  transform: translate(0, 10px) scale(0.8);
  transform-origin: 50% 100%;
  transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
  z-index: 2;
}

.plyr__preview-thumb--is-shown {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

.plyr__preview-thumb::before {
  border-left: 4px solid transparent;
  border-left: var(--plyr-tooltip-arrow-size, 4px) solid transparent;
  border-right: 4px solid transparent;
  border-right: var(--plyr-tooltip-arrow-size, 4px) solid transparent;
  border-top: 4px solid rgba(255, 255, 255, 0.9);
  border-top: var(--plyr-tooltip-arrow-size, 4px) solid var(--plyr-tooltip-background, rgba(255, 255, 255, 0.9));
  bottom: calc(4px * -1);
  bottom: calc(var(--plyr-tooltip-arrow-size, 4px) * -1);
  content: "";
  height: 0;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 0;
  z-index: 2;
}

.plyr__preview-thumb__image-container {
  background: #c1c8d1;
  border-radius: calc(3px - 1px);
  border-radius: calc(var(--plyr-tooltip-radius, 3px) - 1px);
  overflow: hidden;
  position: relative;
  z-index: 0;
}

.plyr__preview-thumb__image-container img {
  height: 100%;
  left: 0;
  max-height: none;
  max-width: none;
  position: absolute;
  top: 0;
  width: 100%;
}

.plyr__preview-thumb__time-container {
  bottom: 6px;
  left: 0;
  position: absolute;
  right: 0;
  white-space: nowrap;
  z-index: 3;
}

.plyr__preview-thumb__time-container span {
  background-color: rgba(0, 0, 0, 0.55);
  border-radius: calc(3px - 1px);
  border-radius: calc(var(--plyr-tooltip-radius, 3px) - 1px);
  color: #fff;
  font-size: 13px;
  font-size: var(--plyr-font-size-time, var(--plyr-font-size-small, 13px));
  padding: 3px 6px;
}

.plyr__preview-scrubbing {
  bottom: 0;
  filter: blur(1px);
  height: 100%;
  left: 0;
  margin: auto;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 0.3s ease;
  width: 100%;
  z-index: 1;
}

.plyr__preview-scrubbing--is-shown {
  opacity: 1;
}

.plyr__preview-scrubbing img {
  height: 100%;
  left: 0;
  max-height: none;
  max-width: none;
  object-fit: contain;
  position: absolute;
  top: 0;
  width: 100%;
}

.plyr--no-transition {
  transition: none !important;
}

.plyr__sr-only {
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  border: 0 !important;
  height: 1px !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}

.plyr [hidden] {
  display: none !important;
}