/* 1. RESET
*****************************************************************************************/
body{
  background-color: var(--Neutral-10);
  font-family: "Noto Sans Hebrew", sans-serif;
  color: var(--Neutral-90);
  font-size: 14px;
}::-webkit-scrollbar{
  width: 6px;
  height: 6px;
}::-webkit-scrollbar-button{
  width: 0px;
  height: 0px;
}::-webkit-scrollbar-thumb{
  background: var(--Neutral-90);
  border: 0;
  border-radius: var(--radius-m);
}::-webkit-scrollbar-thumb:hover{
  background: var(--black);
}::-webkit-scrollbar-thumb:active{
  background: var(--black);
}::-webkit-scrollbar-track{
  background: var(--Neutral-10);
  border: 0;
  border-radius: 0;
}::-webkit-scrollbar-track:hover{
  background: var(--Neutral-30);
}::-webkit-scrollbar-track:active{
  background: var(--Neutral-30);
}::-webkit-scrollbar-corner{
  background: transparent;
}a{
  color: var(--primary);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}a:hover{
  color: var(--primary-dark);
}h1, h2, h3, h4, h5, h6{
  font-family: "Noto Sans Hebrew", sans-serif;
  color: var(--Neutral-90);
  font-weight: 700;
  letter-spacing: 0;
  margin: 0;
  padding: 0;
}h1{
  font-size: 40px;
  line-height: 48px;
}h2{
  font-size: 32px;
  line-height: 40px;
}h3{
  font-size: 28px;
  line-height: 36px;
}h4{
  font-size: 24px;
  line-height: 32px;
}h5{
  font-size: 20px;
  line-height: 28px;
}h6{
  font-size: 16px;
  line-height: 24px;
}p{
  margin: 0;
  padding: 0;
}.form-floating label{
  opacity: 0.5;
}.spinner-border.text-primary{
  color: var(--primary) !important;
}/* 2. GLOBALS
*****************************************************************************************/
.body-20{
  font-size: 20px;
  line-height: 32px;
}.body-18{
  font-size: 18px;
  line-height: 28px;
}.body-16{
  font-size: 16px;
  line-height: 24px;
}.body-14{
  font-size: 14px;
  line-height: 20px;
}.body-12{
  font-size: 12px;
  line-height: 20px;
}.body-regular{
  font-weight: 400;
}.body-medium{
  font-weight: 500;
}.body-semibold{
  font-weight: 600;
}.body-bold{
  font-weight: 700;
}.bg-white-rounded{
  background-color: #ffffff;
  padding: 15px;
  border-radius: var(--radius-m);
  border: 1px solid var(--Neutral-30);
}.down-8{
  margin-bottom: 8px !important;
}.down-12{
  margin-bottom: 12px !important;
}.down-16{
  margin-bottom: 16px !important;
}.down-20{
  margin-bottom: 20px !important;
}.down-24{
  margin-bottom: 24px !important;
}.down-32{
  margin-bottom: 32px !important;
}.down-48{
  margin-bottom: 48px !important;
}.down-64{
  margin-bottom: 64px !important;
}.up-8{
  margin-top: 8px !important;
}.up-12{
  margin-top: 12px !important;
}.up-16{
  margin-top: 16px !important;
}.up-20{
  margin-top: 20px !important;
}.up-24{
  margin-top: 24px !important;
}.up-32{
  margin-top: 32px !important;
}.up-48{
  margin-top: 48px !important;
}.up-64{
  margin-top: 64px !important;
}.rounded{
  border-radius: 512px !important;
}/* 3. BUTTONS
*****************************************************************************************/
.btn{
  border-radius: 96px;
  border: none;
  font-size: 14px;
  line-height: 24px;
  font-weight: 600;
  padding: 12px 20px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}.btn.btn-small, .btn.btn-sm{
  padding: 6px 20px;
  font-size: 12px;
}.btn span.material-symbols-outlined{
  margin-left:8px;
  float:right;
}/*form[role="search"] .btn{
  color: #212529 !important;
}*/
/** PRIMARY BUTTON **/
.btn-primary{
  color: var(--white);
  background-color: var(--primary);
  border: none;
}.btn.btn-primary:hover{
  background-color: var(--primary-dark);
}.btn.btn-primary:active{
  background-color: var(--primary-dark);
}/** SECONDARY BUTTON **/
.btn-secondary{
  color: var(--primary);
  background-color: var(--primary-light);
  border: none;
}.btn.btn-secondary:hover{
  background-color: var(--primary);
}.btn.btn-secondary:active{
  background-color: var(--primary-dark);
}/** ICON BUTTON **/
.btn-icon{
  padding: 12px;
  background-color: var(--Neutral-10);
}.btn-icon.btn-upload{
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--Neutral-30);
}@media (max-width: 767.98px){
  .btn-icon.btn-upload {
    border: unset;
    background-color: unset;
  }}

.btn-icon.btn-upload{
  width: 50px;
}.btn-icon.btn-profile{
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--Neutral-30);
  height: 48px;
}@media (max-width: 767.98px){
  .btn-icon.btn-profile {
    border: unset;
    margin-right:0 !important;
  }}
.btn-icon.btn-profile img{
  width: 35px;
  height: 35px;
  margin: 4px;
}@media (max-width: 767.98px){
  .btn-icon.btn-profile img {
    margin: unset;
    width: unset;
    height: unset;
  }}
.btn-icon.btn-profile span{
  color: var(--Neutral-60);
  font-weight: 500;
  font-size: 14px;
  margin: 0 5px;
}.btn-icon.btn-profile .material-symbols-outlined{
  color: #000000;
  font-size: 22px;
  margin: 0 10px;
  width: 22px;
}.btn-icon span{
  color: var(--Neutral-50);
}.btn-icon span.material-symbols-outlined{
  margin: 0;
  float:none;
  display: block;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}.btn-icon::after{
  display: none;
}.btn-icon:hover{
  background-color: var(--Neutral-20);
}.btn.btn-icon:active{
  background-color: var(--Neutral-30);
}.btn.btn-icon.show{
  border: none;
  background-color: var(--Neutral-20);
}.btn.btn-icon:hover span{
  color: var(--Neutral-90);
}/** MENU ICON BUTTON **/
.btn-menu{
  padding: 12px 0;
  width: 50px;
  height: 50px;
  border: 1px solid var(--Neutral-30);
  background-color: var(--Neutral-10);
  transition: all 300ms;
  color: var(--Neutral-50);
}.btn-menu:hover{
  color: var(--Neutral-90);
  background-color: var(--Neutral-20);
  border: 1px solid var(--Neutral-30);
}.btn-menu span.material-symbols-outlined{
  margin: 0;
  float:none;
  display: block;
}/* 4. NAV
*****************************************************************************************/
.top-nav{
  background-color: var(--white);
  border-bottom: 1px solid var(--Neutral-20);
  padding: 12px 0;
  z-index: 1021;
}.top-nav .bubble{
  position: absolute;
  bottom: 0;
  right:0;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--system-error-primary);
  font-size: 8px;
  padding: 5px;
  height: 18px;
  width: 18px;
  color: var(--white) !important;
  border: 1px solid var(--white);
}.top-nav .row{
  display: flex;
  align-items: center;
}.top-nav .brand{
  margin-left:16px;
  text-decoration: none;
}.top-nav .brand .desktop{
  display: inline;
}.top-nav .brand .mobile{
  display: none;
}@media (max-width: 767.98px){
  .top-nav .brand {
    margin-left:8px;
  }.top-nav .brand .desktop{
    display: none;
  }.top-nav .brand .mobile{
    display: inline;
  }}
/** SEARCH **/
.top-nav .input-group{
  margin: 0;
  border-radius: 96px;
}.top-nav .input-group input[type=text]{
  background-color: var(--Neutral-10);
  border-top-left-radius:24px !important;
  border-bottom-left-radius:24px !important;
  border-top-right-radius:0;
  border-bottom-right-radius:0;
  border-right:0;
  border-color: #dee2e6;
  border-style: solid;
  padding: 12px 20px;
  font-size: 16px;
  line-height: 24px;
}.top-nav .input-group input[type=text]::placeholder{
  color: var(--Neutral-50);
}.top-nav .input-group .btn{
  background-color: var(--Neutral-10);
  border-top-right-radius:24px !important;
  border-bottom-right-radius:24px !important;
  border-top-left-radius:0;
  border-bottom-left-radius:0;
  border-left:0;
  border-color: #dee2e6;
  border-width: 1px;
  border-style: solid;
  color: var(--Neutral-50);
}.top-nav .input-group .btn:hover{
  color: var(--Neutral-90);
}.nav-actions{
  display: flex;
  justify-content: flex-end;
}.nav-actions .profile{
  display: inline-block;
}.profile-stats{
  padding: 16px;
  min-width: 220px;
  color: var(--Neutral-60);
}.profile-stats h5{
  margin-bottom: 4px;
}.profile-stats .stats{
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  padding-top: 16px;
  color: var(--Neutral-90);
}.profile-stats .stats p{
  padding-right:32px;
}.profile-stats .stats strong{
  display: block;
}/* NEW STYLE
*****************************************************************************************/
.border-box-normal{
  border-radius: var(--radius-m);
  border: 1px solid var(--Neutral-30);
  overflow: hidden;
  padding: 16px;
}.border-box-shadow{
  border-radius: var(--radius-m);
  border: 1px solid var(--Neutral-30);
  background-color: #ffffff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  padding: 16px 0;
}.border-box-shadow .form-stats span{
  color: var(--Neutral-60);
  font-size: 15px;
}.border-box-shadow .form-stats span.number{
  color: var(--Neutral-90);
  font-size: 16px;
  font-weight: 700;
}.border-box-shadow.overflow-visible{
  overflow: visible;
}.border-box-shadow .form-item{
  padding: 0 16px;
}.border-box-shadow .form-upload{
  padding: 24px;
}.border-box-shadow .form-floating{
  padding: 0;
}.border-box-shadow .form-floating textarea{
  resize: none;
}.border-box-shadow .form-floating .form-control, .border-box-shadow .form-floating .form-select{
  border: unset;
}.border-box-shadow .form-floating .form-control:focus, .border-box-shadow .form-floating .form-select:focus{
  box-shadow: unset;
}.border-box-shadow .form-seperator{
  width: 100%;
  height: 1px;
  background-color: var(--Neutral-30);
  margin: 16px 0;
}.videos-points{
  padding: unset;
}.videos-points.edited > .video-point-item:nth-child(3):nth-last-child(1){
  justify-content: center;
  align-items: center;
  flex-direction: column;
}.videos-points.edited > .video-point-item:nth-child(3):nth-last-child(1) .message{
  display: block;
  margin-bottom: 16px;
}.videos-points.edited > .video-point-item:nth-child(3):nth-last-child(1) .btns-group{
  width: unset;
}.videos-points.edited > .video-point-item:nth-child(3):nth-last-child(1) .btns-group .btn-clean{
  display: none;
}.videos-points.edited .video-point-item{
  background-color: rgba(253, 238, 127, 0.08);
}.videos-points.edited .video-point-item.active{
  background-color: #fffacc;
}.videos-points.edited .video-point-item.active .num{
  background-color: var(--Neutral-90);
  color: #ffffff;
}.videos-points.edited .video-point-item.template{
  display: none;
}.videos-points.edited .video-point-item:last-child{
  justify-content: space-between;
  padding: 24px 16px;
}.videos-points.edited .video-point-item:hover{
  background-color: rgba(253, 238, 127, 0.12);
}.videos-points.edited .video-point-item:hover .do{
  color: var(--Neutral-90);
}.videos-points.edited .video-point-item .time{
  margin-left:16px;
}.videos-points.edited .video-point-item .do{
  margin-left:auto;
  color: var(--Neutral-40);
}.videos-points.edited .video-point-item .btn-filled{
  background-color: #fdee7f;
  color: var(--Neutral-90);
}.videos-points .video-point-item{
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--Neutral-20);
  padding: 16px;
  cursor: pointer;
}.videos-points .video-point-item.edit-mode .content .text{
  display: none;
}.videos-points .video-point-item.edit-mode .content input{
  display: inline-block;
}.videos-points .video-point-item:first-child{
  font-size: 18px;
  background-color: #ffffff;
}.videos-points .video-point-item:hover{
  background-color: var(--Neutral-10);
}.videos-points .video-point-item:last-child{
  border-bottom: unset;
}.videos-points .video-point-item .num{
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-l);
  background-color: #FDEE7F;
  font-size: 11px;
  color: var(--Neutral-90);
  width: 23px;
  margin-right:8px;
  height: 23px;
}.videos-points .video-point-item .time{
  color: var(--Neutral-60);
  margin-left:auto;
  display: flex;
  align-items: center;
}.videos-points .video-point-item .content{
  color: var(--Neutral-90);
  display: flex;
  align-items: center;
}.videos-points .video-point-item .content input{
  display: none;
  border: unset;
  background-color: transparent;
  width: 300px;
}.videos-points .message{
  display: none;
}.btns-group{
  display: flex;
  justify-content: space-between;
}.btns-group input{
  display: none;
}.btns-group input + label{
  cursor: pointer;
}.btns-group input:checked + label{
  background-color: var(--Neutral-20) !important;
}.btns-group .btn{
  margin-right:8px;
  height: 36px;
  width: unset;
  padding: 0 32px;
  font-weight: 400;
}.btns-group .btn:last-child{
  margin-right:unset;
}.btns-group.group-small .btn{
  height: 32px;
}.btns-group.group-small .btn-not-filled{
  background-color: unset;
  color: var(--primary);
}.btns-group.group-small .btn-multiple, .btns-group.group-small .btn-outlined, .btns-group.group-small .btn-filled{
  min-width: 36px;
  height: 32px;
  width: unset;
}.btns-group.group-small .btn-multiple .material-symbols-outlined, .btns-group.group-small .btn-outlined .material-symbols-outlined, .btns-group.group-small .btn-filled .material-symbols-outlined{
  font-size: 22px;
}.btns-group .btn-clean{
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--Neutral-60);
  text-decoration: none;
  font-size: 12px;
  cursor: pointer;
}.btns-group .btn-clean .material-symbols-outlined{
  font-size: 14px;
}.btns-group .btn-filled{
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-l);
  color: #ffffff;
  background-color: var(--primary);
  text-decoration: none;
  padding: 0 16px;
  font-size: 12px;
  margin-right:8px;
  white-space: nowrap;
}.btns-group .btn-filled.disabled{
  background-color: var(--Neutral-40);
  color: #ffffff;
}.btns-group .btn-filled.disabled:hover{
  background-color: var(--Neutral-50);
  color: #ffffff;
}.btns-group .btn-filled:hover{
  background-color: var(--primary-dark);
}.btns-group .btn-filled:last-child{
  margin-right:unset;
}.btns-group .btn-filled.btn-dark{
  border: 1px solid var(--Neutral-30);
  background-color: var(--Neutral-10);
  color: var(--Neutral-90);
  flex-grow: 1;
}.btns-group .btn-filled.btn-dark.active{
  background-color: var(--Neutral-20);
}.btns-group .btn-filled.btn-dark:hover{
  background-color: var(--Neutral-30);
}.btns-group .btn-filled.btn-secondary{
  background-color: var(--primary-light);
  color: var(--primary);
}.btns-group .btn-filled.btn-secondary:hover{
  background-color: var(--primary);
  color: var(--primary-light);
}.btns-group .btn-filled span:first-child{
  margin-right:4px;
}.btns-group .btn-multiple{
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-l);
  border: 1px solid var(--Neutral-30);
  text-decoration: none;
  overflow: hidden;
}.btns-group .btn-multiple .part{
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 8px;
}.btns-group .btn-multiple .part.fill{
  font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 0, "opsz" 48;
}.btns-group .btn-multiple .part .count{
  margin: 0 2px;
  font-size: 13px;
  font-weight: 600;
}.btns-group .btn-multiple .part:hover{
  background-color: var(--Neutral-20);
}.btns-group .btn-multiple .separator{
  width: 1px;
  height: 100%;
  background-color: var(--Neutral-30);
}.btns-group .btn-outlined{
  cursor: pointer;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-l);
  border: 1px solid var(--Neutral-30);
  text-decoration: none;
  margin-right:8px;
  color: var(--Neutral-90);
}.btns-group .btn-outlined.bg-yellow{
  background-color: rgba(253, 238, 127, 0.2);
}.btns-group .btn-outlined:last-child{
  margin-right:unset;
}.btns-group .btn-outlined .material-symbols-outlined{
  color: var(--Neutral-90);
}.btns-group .btn-outlined:hover{
  background-color: var(--Neutral-20);
}.btns-group .btn-bubble{
  position: relative;
}.btns-group .btn-bubble .count{
  width: 13px;
  height: 13px;
  border-radius: var(--radius-m);
  position: absolute;
  top: -2px;
  left:-2px;
  background-color: var(--primary);
  font-size: 8px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}.btns-group .btn-rounded{
  padding: 0;
}.btns-group .btn-rounded img{
  width: 100%;
  border-radius: var(--radius-l);
}.form-dropdown-advanced{
  padding: 0 16px;
}.form-dropdown-advanced input.controler{
  display: none;
}.form-dropdown-advanced input.controler:checked + .form-item{
  background-color: #E3F2FD;
  border-radius: var(--radius-m);
  border: 1px solid var(--Neutral-90);
}.form-dropdown-advanced input.controler:checked + .form-item .info span{
  color: var(--Neutral-90);
}.form-dropdown-advanced input.controler:checked + .form-item .info .hide{
  display: block;
}.form-dropdown-advanced .form-item{
  padding: 12px;
  width: 100%;
  cursor: pointer;
  border: 1px solid transparent;
}.form-dropdown-advanced .form-item:first-of-type{
  display: block;
}.form-dropdown-advanced .form-item:last-child{
  margin-bottom: 0;
}.form-dropdown-advanced .form-item .info{
  font-size: 12px;
  color: var(--Neutral-60);
  width: 100%;
}.form-dropdown-advanced .form-item .info .hide{
  width: 60%;
  display: none;
}.form-dropdown-advanced .form-item .info span{
  display: block;
}.form-dropdown-advanced .form-item .info span:first-child{
  color: var(--Neutral-90);
  font-size: 15px;
}.form-dropdown-advanced .form-item .item-details{
  display: flex;
  align-items: center;
  justify-content: space-between;
}.form-checkbox-advanced{
  padding: 0 16px;
}.form-checkbox-advanced.form-admin{
  margin-bottom: 10px;
  padding: 0;
}.form-checkbox-advanced.form-admin .form-item .item-details{
  justify-content: unset;
}.form-checkbox-advanced.form-admin .form-item .item-details .toggle{
  margin-right:10px;
}.form-checkbox-advanced input{
  display: none;
}.form-checkbox-advanced input:checked + .form-item .item-details .material-symbols-outlined{
  border-radius: var(--radius-l);
  background-color: var(--Neutral-90);
  margin-left:unset;
}.form-checkbox-advanced input:checked + .form-item .item-details .material-symbols-outlined.check{
  display: inline-block;
}.form-checkbox-advanced input:checked + .form-item .item-details .material-symbols-outlined.close{
  display: none;
}.form-checkbox-advanced .form-item{
  width: 100%;
  cursor: pointer;
}.form-checkbox-advanced .form-item:last-child{
  border-bottom: unset;
}.form-checkbox-advanced .form-item .info{
  font-size: 12px;
  color: var(--Neutral-60);
}.form-checkbox-advanced .form-item .info span{
  display: block;
}.form-checkbox-advanced .form-item .info span:first-child{
  color: var(--Neutral-90);
  font-size: 15px;
}.form-checkbox-advanced .form-item .item-details{
  display: flex;
  align-items: center;
  justify-content: space-between;
}.form-checkbox-advanced .form-item .item-details .toggle{
  border: 1px solid var(--Neutral-50);
  border-radius: var(--radius-m);
  display: flex;
  align-items: center;
  width: 55px;
  padding: 3px;
  overflow: hidden;
}.form-checkbox-advanced .form-item .item-details .toggle .material-symbols-outlined{
  transition: all 200ms;
  border-radius: var(--radius-l);
  margin-left:auto;
}.form-checkbox-advanced .form-item .item-details .toggle .material-symbols-outlined.check{
  display: none;
  background-color: var(--system-success-primary);
  color: #ffffff;
}.form-checkbox-advanced .form-item .item-details .toggle .material-symbols-outlined.close{
  background-color: var(--Neutral-50);
  color: #ffffff;
}.table .progress-bar #progress-bar{
  background-color: var(--primary);
  border-radius: var(--radius-l);
  font-size: 7px;
  height: 10px;
  color: #FFFFFF;
}.tabs input[name=tabs]{
  display: none;
}.tabs input[name=tabs]:checked + .tab-control + .tab-content{
  display: flex;
  max-height: 2000px;
}.tabs input[name=tabs]:checked + .tab-control .add{
  display: none;
}.tabs input[name=tabs]:checked + .tab-control .remove{
  display: flex;
}.tabs .tab-control{
  width: 100%;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  margin-bottom: 24px;
  background-color: unset !important;
}.tabs .tab-control .tab-label{
  display: flex;
  align-items: center;
}.tabs .tab-control .tab-label span:first-child{
  margin-right:8px;
}.tabs .tab-control .btns-group{
  width: unset;
}.tabs .tab-control .btns-group .remove{
  display: none;
}.tabs .tab-content{
  max-height: 0;
  transition: all 200ms;
  flex-direction: column;
  display: none;
}.tabs .tab-content .tab-item{
  width: 100%;
  margin-bottom: 24px;
}.dropdown-menu{
  direction:ltr;
  text-align:left;
  z-index: 9999;
}.dropdown-menu li{
  padding: 0 12px;
}.dropdown-menu .dropdown-item{
  padding: 8px 16px;
}.dropdown-menu .dropdown-item .material-symbols-outlined{
  float:right;
  font-size: 20px;
  color: var(--system-error-primary);
}.dropdown-menu .dropdown-item .material-symbols-outlined:hover{
  color: var(--black);
}.dropdown-menu .dropdown-item:hover{
  background-color: var(--Neutral-10);
}.dropdown-menu .dropdown-item:active{
  color: var(--black);
  background-color: var(--Neutral-20);
}/* 6. OFFCANVAS MENU
*****************************************************************************************/
#offcanvasRight.offcanvas.offcanvas-end,
#offcanvasRight.offcanvas.offcanvas-start{
  border: none;
  width: 280px;
}#offcanvasRight .offcanvas-header{
  display: inline-flex;
  padding: 18px 16px;
  justify-content: flex-end;
  align-items: center;
  gap: 81px;
}#offcanvasRight .list-group{
  margin: 0;
  padding: 20px;
  border: none;
  border-radius: 0;
  border-top: 1px solid var(--Neutral-20);
}#offcanvasRight .list-group-item{
  border: none;
  padding: 0;
}#offcanvasRight .list-group-item a{
  color: var(--Neutral-90);
  font-size: 14px;
  text-decoration: none;
  font-weight: 500;
  display: block;
  padding: 6px 0;
}#offcanvasRight .list-group-item a:hover{
  color: var(--primary);
}#offcanvasRight .list-group-item:hover span.material-symbols-outlined{
  color: var(--primary);
}#offcanvasRight .list-group span.material-symbols-outlined{
  float:left;
  margin-right:12px;
  color: var(--Neutral-50);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}#offcanvasRight .offcanvas-body{
  padding: 0;
}#offcanvasRight .offcanvas-body .list-title{
  color: var(--Neutral-50);
  display: block;
  margin-bottom: 12px;
}#offcanvasRight .list-group .avatar{
  border-radius: var(--radius-l);
  float:left;
  margin-right:12px;
}#offcanvasRight hr{
  color: var(--Neutral-30);
  margin: 4px 0;
  opacity: 1;
}.powered{
  color: var(--Neutral-50);
}.powered img{
  margin-right:12px;
}/* 7. BADGE
*****************************************************************************************/
.badge{
  padding: 0 8px;
  font-size: 12px;
  line-height: 20px;
  font-weight: 700;
  border-radius: var(--radius-l);
}.badge-primary{
  background-color: var(--primary);
}/* 8. FOOTER
*****************************************************************************************/
footer{
  border-top: 1px solid var(--Neutral-20);
  margin-top: 64px;
  padding: 32px 0;
  text-align:center;
  color: var(--Neutral-60);
}footer .langs{
  margin-bottom: 24px;
  color: var(--Neutral-50);
  direction:ltr;
}footer .langs span{
  margin-left:10px;
}footer .langs a{
  margin-left:5px;
}@media (max-width: 767.98px){
  footer {
    margin-top: 64px;
  }}
/* 9. VIDEO THUMBNAILS
*****************************************************************************************/
.videos-list{
  margin-bottom: 48px;
}.videos-header{
  margin-bottom: 48px;
  position: relative;
}@media (max-width: 767.98px){
  .videos-header h6 {
    padding: 10px;
  }}

.videos-header .carousel-control-next, .videos-header .carousel-control-prev{
  right:0;
  top: 6px;
  padding: 0;
  margin: 0;
  width: 24px;
  height: 24px;
  color: var(--primary);
  text-decoration: none;
}.videos-header .carousel-control-next{
  right:48px;
  left:auto;
}.videos-header .carousel-control-next:hover, .videos-header .carousel-control-prev:hover,
.videos-header .carousel-control-next:focus, .videos-header .carousel-control-prev:focus{
  opacity: 1;
  color: var(--primary);
}.video-card{
  margin-bottom: 25px;
}.video-card .card-img{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-m);
}.video-card .card-img .video-progress{
  display: none;
  position: absolute;
  bottom: 0;
  right:0;
  width: 100%;
  background-color: var(--Neutral-60);
  height: 4px;
}.video-card .card-img .video-progress.active{
  display: block;
}.video-card .card-img .video-progress .progress-bar{
  position: absolute;
  right:0;
  height: 100%;
  background-color: var(--primary);
}.video-card .card-img small{
  position: absolute;
  color: var(--white);
  padding: 4px 8px;
  border-radius: var(--radius-l);
  background: rgba(0, 0, 0, 0.72);
  width: fit-content;
  left:8px;
  bottom: 8px;
}.video-card .card-info{
  color: var(--Neutral-60);
}.video-card .card-info a.title{
  color: var(--Neutral-90);
  text-decoration: none;
  margin-top: 8px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* Number of lines to show */
  overflow: hidden;
  text-overflow: ellipsis;
}.video-card .card-info a.title:hover{
  color: var(--black);
}.video-card .card-info a.user{
  color: var(--Neutral-60);
  text-decoration: none;
}.video-card .card-info a.user:hover{
  color: var(--Neutral-90);
}.video-card .card-info small{
  font-size: 10px;
  padding: 2px;
  vertical-align: text-top;
  line-height: 20px;
  color: var(--Neutral-50);
}@media (max-width: 767.98px){
  .no-subscribers {
    display: block;
    text-align:center;
  }.no-subscribers h5{
    margin: 16px 0;
  }.no-subscribers .avatars{
    padding-left:16px;
  }.no-subscribers .avatars img{
    width: 48px;
    margin-left:-24px;
  }}
/* 10. INNER PAGES HEADER SECTIONS
*****************************************************************************************/
.header-with-icon{
  padding: 64px 0;
}.header-with-icon.text-right{
  padding-bottom: 32px;
}.header-with-icon p{
  background-color: var(--primary-light);
  border-radius: 256px;
  padding: 32px;
  display: inline-block;
  width: 128px;
  height: 128px;
  margin-bottom: 16px;
}.header-with-icon span{
  color: var(--primary);
  font-size: 64px;
}.header-with-icon h3 b{
  color: var(--Neutral-50);
}.header-with-icon.with-sort{
  display: flex;
  justify-content: space-between;
  align-items: center;
}.header-with-icon.with-sort .sort{
  color: var(--Neutral-60);
}.header-with-icon.with-sort .sort a{
  padding-left:16px;
}@media (max-width: 767.98px){
  .header-with-icon {
    padding: 32px 0;
  }.header-with-icon p{
    padding: 24px;
    width: 96px;
    height: 96px;
  }.header-with-icon span{
    font-size: 48px;
  }.header-with-icon.with-sort{
    display: block;
  }.header-with-icon.with-sort .sort{
    padding-top: 8px;
  }}
/* 11. FORM ELEMENTS
*****************************************************************************************/
.drag-and-drop-area{
  border: 1px dashed var(--Neutral-50);
  background-color: var(--white);
  padding: 32px;
  text-align:center;
  color: var(--Neutral-60);
  border-radius: var(--radius-s);
}.drag-and-drop-area.dnd-image{
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  height: 250px;
  flex-direction: column;
}.drag-and-drop-area.dnd-image.dnd-rounded{
  padding: 70px;
  border-radius: 100px;
  width: 128px;
  height: 128px;
}.drag-and-drop-area.dnd-image.dnd-rounded .img-circle{
  border-radius: 100px;
  width: 128px;
  height: 128px;
}.drag-and-drop-area.dnd-image.empty .img-circle{
  display: none;
}.drag-and-drop-area.dnd-image.empty [id^=drop-text-]{
  display: inline-block;
}.drag-and-drop-area.dnd-image:hover .icon .material-symbols-outlined{
  color: #000000;
}.drag-and-drop-area.dnd-image .icon{
  width: 25px;
  height: 25px;
  background-color: white;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  left:10px;
  bottom: 10px;
  border: 1px dashed var(--Neutral-50);
  border-radius: 100px;
  padding: 15px;
}.drag-and-drop-area.dnd-image .icon .material-symbols-outlined{
  font-size: 22px;
  width: unset;
  height: unset;
  line-height: 3px;
}.drag-and-drop-area.dnd-image .img-circle{
  border-radius: 8px;
  width: 100%;
  height: 100%;
}.drag-and-drop-area.dnd-image [id^=drop-text-]{
  display: none;
}.drag-and-drop-area.with-label{
  text-align:unset;
}.drag-and-drop-area .label{
  font-size: 16px;
  color: var(--Neutral-90);
}.drag-and-drop-area .info{
  font-size: 10px;
  color: var(--Neutral-60);
}.drag-and-drop-area .dnd-info{
  color: var(--Neutral-90);
  margin-top: 8px;
  display: inline-block;
  font-size: 13px;
}.drag-and-drop-area span{
  color: var(--Neutral-40);
  height: 80px;
  width: 80px;
  background-color: var(--Neutral-10);
  border-radius: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left:auto;
}.drag-and-drop-area.upload-area{
  background-color: unset;
}.drag-and-drop-area.upload-area #form, .drag-and-drop-area.upload-area #validation, .drag-and-drop-area.upload-area #preview{
  display: none;
}.drag-and-drop-area.upload-area.show-form #form{
  display: block;
}.drag-and-drop-area.upload-area.show-validation #validation{
  display: block;
}.drag-and-drop-area.upload-area.show-thumbnail #preview{
  display: block;
}.drag-and-drop-area.upload-area.show-thumbnail{
  padding: 0;
  border-radius: 16px;
  border: unset;
  overflow: hidden;
}.drag-and-drop-area.upload-area #validation{
  direction:ltr;
}.drag-and-drop-area.upload-area div[class*=col-]{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}.drag-and-drop-area.upload-area .video_file{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--Neutral-20);
  color: var(--Neutral-60);
  width: 80px;
  height: 80px;
  border-radius: 50px;
  font-size: 36px;
  margin-bottom: 20px;
}.drag-and-drop-area.upload-area .btn-filled{
  display: flex;
  justify-content: space-between;
}.drag-and-drop-area.upload-area .btn-filled .text{
  margin-right:7px;
}.form-control{
  display: block;
  font-size: 16px;
  line-height: 24px;
  padding: 12px;
  color: var(--Neutral-90);
  border-radius: var(--radius-s);
}.form-control::placeholder{
  color: var(--Neutral-50);
}.form-select.form-select-sm{
  font-size: unset;
  line-height: unset;
  padding: 6px;
  border-radius: 7px;
}.form-select{
  font-size: 16px;
  line-height: 24px;
  padding: 12px;
  background-position:right 12px center;
}.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3), .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control, .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select, .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){
  border-top-right-radius:0;
  border-bottom-right-radius:0;
  border-top-left-radius:var(--radius-s);
  border-bottom-left-radius:var(--radius-s);
}.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){
  border-top-left-radius:0;
  border-bottom-left-radius:0;
  border-top-right-radius:var(--radius-s);
  border-bottom-right-radius:var(--radius-s);
  direction:rtl;
  border-left:none;
}form .btn-primary{
  display: block;
  width: 100%;
}/* 12. VIDEO PAGE
*****************************************************************************************/
#video-page{
  margin-top: 48px;
}.video-frame{
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-l);
}.video-frame .video-invisible{
  background-color: #000000;
  min-height: 400px;
  border-radius: var(--radius-l);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align:center;
}.video-frame .video-invisible *{
  color: #FFFFFF;
}.video-frame.horizontal{
  height: 100%;
}@media (max-width: 767.98px){
  .video-frame.horizontal {
    height: unset !important;
  }}
.video-frame.vertical .plyr{
  background-color: #000000;
}.video-frame iframe{
  border-radius: var(--radius-m);
}.video-frame iframe.youtube{
  height: 65vh;
}.plyr{
  border-radius: var(--radius-m);
}.plyr #question-form{
  direction:ltr;
}.plyr__control--overlaid svg{
  width: 32px !important;
  height: 32px !important;
}.plyr--video .plyr__controls{
  padding: 15px 20px;
  background: rgb(0, 0, 0);
  background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(255, 255, 255, 0) 100%) !important;
}.video-embed{
  position: relative;
  overflow: hidden;
}.video-embed.pause .video-bottom, .video-embed.pause .video-header{
  opacity: 100;
}.video-embed .video-center{
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align:center;
  bottom: 100px;
  left:0px;
  font-size: 16px;
  font-weight: 600;
}.video-embed .video-bottom{
  position: absolute;
  bottom: 55px;
  right:20px;
  transition: all 820ms;
  overflow: hidden;
  opacity: 0;
  text-align:left;
}.video-embed .video-bottom img{
  margin-bottom: 0;
  transition: all 120ms;
  width: 80px;
}.video-embed .video-header{
  opacity: 0;
  position: absolute;
  top: 0;
  left:0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
  transition: all 120ms;
  width: 100%;
  text-align:left;
  border-top-left-radius:var(--radius-m);
  border-top-right-radius:var(--radius-m);
}.video-embed .video-header .wrapper{
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: end;
}.video-embed .video-header .wrapper a{
  text-decoration: none;
  color: var(--white);
  font-size: 1rem;
  margin: 0 10px;
}.video-embed .video-header .wrapper a:last-child{
  margin: 0;
}.video-frame img, .video-frame video{
  border-radius: var(--radius-m);
}.video-frame.vertical video{
  width: 328px;
}@media (max-width: 767.98px){
  #video-page #video-menu #upper {
    margin-bottom: 24px;
  }}
#video-page #video-menu #video-more .btn{
  margin-left:8px;
}#video-page #video-menu #video-more .btn .material-symbols-outlined{
  margin-left:unset;
  margin-right:4px;
}#video-page #video-menu .btn{
  height: 36px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
}#video-page #video-menu .btn img{
  margin-right:5px;
}#video-page #video-menu .avatar{
  display: flex;
}#video-page #video-menu .avatar img{
  border-radius: var(--radius-l);
}#video-page #video-menu .avatar .user-stats{
  display: flex;
  flex-direction: column;
  text-align:left;
  justify-content: space-between;
}#video-page #video-menu .avatar .user-stats a{
  color: var(--Neutral-90);
}#video-page #video-menu .avatar .user-stats .user-profile{
  font-size: 16px;
  text-decoration: none;
}#video-page #video-menu .avatar .user-stats span{
  font-size: 13px;
  color: var(--Neutral-60);
}#video-page #video-description .wrapper{
  padding: 24px;
  display: block;
}#video-page #video-description .wrapper .b-toggle{
  font-size: 13px;
  margin-top: 24px;
  text-decoration: none;
}#video-page #video-description .wrapper .b-toggle.b-hide{
  display: none;
}#video-page #video-description .wrapper.show .b-hide{
  display: inline-block;
}#video-page #video-description .wrapper.show .b-show{
  display: none;
}#video-page #video-description .wrapper.show .ellipsis{
  max-height: unset;
  width: 100%;
  overflow: unset;
  white-space: unset;
}#video-page #video-description .wrapper.show .ellipsis::after{
  content: unset;
}#video-page #video-description .wrapper .ellipsis{
  margin-top: 8px;
  display: inline-block;
  max-height: 55px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 50%;
  position: relative;
}#video-page #video-description .wrapper .ellipsis::after{
  content: "";
  position: absolute;
  bottom: 0;
  right:0;
  width: 100%;
  height: 20px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #ffffff 100%);
}#video-page #video-description .wrapper .stats{
  font-size: 14px;
}#video-page #video-description .wrapper .stats span{
  margin-right:4px;
}#video-page .comments{
  margin-top: 24px;
}#video-page .comments form{
  display: flex;
  gap: 12px;
}#video-page .comments form .comment-input{
  width: 100%;
}#video-page .comments .avatar{
  width: 48px;
  height: 48px;
}#video-page .comments .comment-item{
  padding-top: 24px;
  padding-left:60px;
  padding-right:96px;
}#video-page .comments .comment-item a{
  color: var(--Neutral-90);
  text-decoration: none;
}#video-page .comments .comment-item a label{
  padding: 0 8px;
}#video-page .comments .comment-item small{
  color: var(--Neutral-60);
}#video-page .comments .comment-item p{
  padding-left:52px;
}#video-page .comments .comment-item .rank{
  margin-left:44px;
  margin-top: 8px;
}#video-page .comments .comment-item .rank a{
  color: var(--Neutral-60);
  margin: 0 8px;
}#video-page .comments .comment-item .rank a span{
  padding-right:8px;
  vertical-align: bottom;
  font-size: 20px;
}#video-page .comments .comment-item .rank a:hover{
  color: var(--Neutral-90);
}#video-page .comments .comment-level-2 form{
  margin-left:52px;
  margin-top: 16px;
  flex-direction: column;
}#video-page .comments .comment-level-2 form .btn-secondary{
  display: inline-block;
  width: auto;
}#video-page .comments .comment-level-2 form a.btn{
  color: var(--Neutral-50);
}#video-page .comments .comment-level-2 form a.btn:hover{
  color: var(--Neutral-90);
}#video-page .comments .comment-level-2 .sub-comment-body{
  flex: 1 0 0;
}#video-page .video-title{
  display: block;
  padding: 24px 0 8px 0;
}.video-item{
  align-items: center;
}.video-item .link{
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-s);
  position: relative;
  overflow: hidden;
}.video-item .link img{
  width: 100%;
}.video-item .video-progress{
  display: none;
  position: absolute;
  bottom: 0;
  right:0;
  width: 100%;
  background-color: var(--Neutral-60);
  height: 4px;
}.video-item .video-progress.active{
  display: block;
}.video-item .video-progress .progress-bar{
  position: absolute;
  right:0;
  height: 100%;
  background-color: var(--primary);
}.video-item .card-thumbnail{
  position: relative;
}.video-item p{
  color: var(--Neutral-60);
}.video-item .card-thumbnail small{
  position: absolute;
  color: var(--white);
  padding: 2px 6px;
  border-radius: var(--radius-l);
  background-color: rgba(0, 0, 0, 0.72);
  width: fit-content;
  left:18px;
  bottom: 8px;
  font-size: 10px;
}.video-item[data-viewed=true] .card-thumbnail img{
  opacity: 0.4;
}.video-item a{
  color: var(--Neutral-90);
  text-decoration: none;
}.author-info .cta-d{
  display: none;
}@media (max-width: 767.98px){
  #video-page {
    margin-top: 24px;
  }.author-info{
    flex-direction: column;
  }ul.list-info li.avatar a{
    text-decoration: none;
  }.author-info .cta-m{
    display: none;
  }.author-info .cta-d{
    display: block;
  }.video-item{
    margin-top: 12px;
    margin-left:0;
    margin-right:0;
    width: 100%;
  }.video-item .card-thumbnail{
    padding-bottom: 10px;
  }.video-item .card-thumbnail img{
    width: 100%;
  }.video-item .card-thumbnail small{
    left:30px;
    bottom: 30px;
  }.video-desc{
    padding-right:16px;
  }#video-page .comments{
    margin-bottom: 48px;
  }#video-page .comments .comment-item{
    padding-left:0px;
    padding-right:0;
  }}
/* 13. VIDEO DETAILS
*****************************************************************************************/
ul.list-info{
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: baseline;
}@media (max-width: 767.98px){
  ul.list-info {
    height: unset;
  }}
ul.list-info li{
  padding-right:12px;
  color: var(--Neutral-60);
}ul.list-info li.rank{
  vertical-align: text-top;
  padding-right:0;
  padding-left:12px;
}ul.list-info li.rank a{
  color: var(--Neutral-60);
  text-decoration: none;
  margin: 0 12px;
  display: inline-block;
}ul.list-info li.rank a span{
  padding-right:8px;
  vertical-align: middle;
}ul.list-info li small{
  font-size: 10px;
  vertical-align: text-top;
  line-height: 20px;
  color: var(--Neutral-50);
}ul.list-info li.rank a:hover{
  color: var(--Neutral-90);
}ul.list-info li.avatar a{
  color: var(--Neutral-90);
}ul.list-info li.avatar a img{
  margin-right:8px;
  border-radius: var(--radius-l);
}ul.list-info li.title{
  display: block;
}.author-info{
  margin-top: 48px;
  border-top: 1px solid var(--Neutral-20);
  border-bottom: 1px solid var(--Neutral-20);
  padding: 24px 0;
  text-align:center;
  display: flex;
  justify-content: center;
  align-items: center;
}@media (max-width: 767.98px){
  ul.list-info li {
    padding-right:8px;
  }}
/* 14. ALERTS
*****************************************************************************************/
.alert{
  border: none;
  padding: 12px;
  border-radius: var(--radius-s);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}.alert-dismissible .btn-close{
  right:0;
  left:auto;
  padding: 16px;
}.alert-success{
  background-color: var(--system-success-light);
  color: var(--system-success-primary);
}.alert-warning{
  background-color: var(--system-warning-light);
  color: var(--system-warning-primary);
}.alert-error{
  background-color: var(--system-error-light);
  color: var(--system-error-primary);
}.alert-info{
  background-color: var(--system-info-light);
  color: var(--system-info-primary);
}/* 15. VERTICAL LAYPOUT
*****************************************************************************************/
.vertical-layout{
  margin-top: 24px;
}.vertical-layout .row{
  margin-bottom: 48px;
}.vertical-layout .row.small{
  margin-bottom: 24px;
}.vertical-layout .card-info{
  margin-bottom: 16px;
}/* 16. SUBSCRIBERS PAGE
*****************************************************************************************/
#subscribers{
  margin-top: 24px;
}#subscribers .row{
  row-gap: 45px;
  margin-bottom: 64px;
}.subscriber{
  text-align:center;
}.subscriber img{
  border-radius: 128px;
  width: 128px;
  height: 128px;
}.sub-info{
  display: block;
  padding: 12px 0;
}.sub-info a{
  display: block;
  color: var(--Neutral-90);
  text-decoration: none;
}@media (max-width: 767.98px){
  #subscribers .row {
    margin-bottom: 0;
  }.subscriber{
    text-align:left;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--Neutral-20);
    padding-bottom: 16px;
  }.subscriber img{
    width: 64px;
    height: 64px;
  }.sub-info{
    padding: 0 12px;
  }}
/* 17. PROFILE PAGE
*****************************************************************************************/
.profile-header{
  background-size: cover;
  background-position:center;
  background-color: var(--primary-light);
  margin-top: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 192px;
  margin-bottom: 256px;
  margin-right:-24px;
  margin-left:-24px;
}.profile-header > div{
  margin-top: 128px;
  text-align:center;
}.profile-header h2{
  margin-top: 8px;
}.profile-header img{
  border-radius: 128px;
}.profile-header span{
  margin: 0px 0 16px 0;
  display: block;
}.profile-information{
  margin: 64px 0 32px 0;
  padding: 24px 0;
  border-top: 1px solid var(--Neutral-20);
  border-bottom: 1px solid var(--Neutral-20);
}.profile-information ul.list-info{
  justify-content: center;
}@media (max-width: 767.98px){
  .profile-header {
    margin-bottom: 230px;
  }}
/* 18. AUTH PAGES
*****************************************************************************************/
#auth-page{
  background-image: url(../img/bg-auth.jpg);
  background-size: auto;
  background-repeat: no-repeat;
}.auth-form{
  margin-top: 24%;
}.auth-form .auth-header{
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid var(--Neutral-30);
  justify-content: space-between;
  margin-bottom: 48px;
}.auth-form .auth-header img{
  height: 76px;
  border-left:1px solid var(--Neutral-30);
  padding-left:48px;
  padding-bottom: 24px;
}.auth-form .auth-header h3 span{
  color: var(--Neutral-60);
  display: block;
}.auth-form a.btn{
  display: block;
  margin-bottom: 24px;
}.auth-form .btn-secondary{
  margin-top: -8px;
}.auth-footer{
  margin-top: 32px;
  text-align:center;
}@media (max-width: 767.98px){
  .auth-form .auth-header h3 span {
    display: none;
  }.auth-form .auth-header img{
    height: 56px;
    padding-left:24px;
    padding-bottom: 16px;
  }.auth-form .auth-header{
    margin-bottom: 24px;
  }}
@keyframes dummy{
  0% {
    background-color: #cccccc;
  }50%{
    background-color: #9e9d9d;
  }100%{
    background-color: #cccccc;
  }}
.hidden{
  display: none;
}.dropdown-divider{
  opacity: 0.2;
}.material-symbols-outlined.filled{
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}.video-player{
  width: 100%;
  max-height: 100%;
}.page-videos-upload input + label{
  cursor: pointer;
}.page-videos-upload input:checked + label{
  background-color: var(--Neutral-20) !important;
}.page-videos-edit [name=editmode] .sticky-top{
  background-color: var(--Neutral-10);
  padding: 0 0 24px;
  border-radius: var(--radius-l);
  top: 60px;
}.page-videos-edit .video-frame{
  height: 100%;
}.page-videos-edit .video-frame video{
  border-radius: var(--radius-m);
  height: 100%;
}.video-btns{
  display: flex;
  justify-content: center;
  align-items: center;
}.video-btns a{
  margin: 0 10px;
}.video-btns a .material-symbols-outlined{
  margin: 0;
}.video-btns .time{
  margin: 0 10px;
  font-size: 12px;
  padding: 5px;
  border-radius: 5px;
}.tags-container{
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}.tags-container.vertical{
  flex-direction: column;
}.tags-container .tag{
  cursor: grab;
}.tags-container .tag.basic a{
  text-decoration: none;
  color: var(--Neutral-60);
}.tags-container .tag .material-symbols-outlined{
  font-size: 16px;
}.tags-form .datalist{
  width: 100%;
  z-index: 99999;
  border: 1px solid var(--Neutral-90);
  border-radius: var(--radius-m);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}.tags-form .tags-container{
  margin-top: 24px;
}.tags-form .list-group-item{
  cursor: pointer;
}.unsubscribe{
  background-color: var(--primary-light);
  color: var(--primary);
  border: 1px solid var(--primary);
}.star-admin{
  font-size: 25px;
}.drag-and-drop-area{
  position: relative;
}.drag-and-drop-area.dragover{
  border-color: var(--secondary);
}.file-input{
  position: absolute;
  top: 0;
  right:0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}img.img-thumbnail, canvas.img-thumbnail{
  max-width: 50px;
}img.img-rounded, canvas.img-rounded{
  border-radius: var(--radius-m);
}img.img-24, canvas.img-24{
  width: 24px;
}.videos-list .videos-header{
  display: none;
}.videos-list.empty-mode .message{
  display: flex;
}.videos-list .message{
  display: none;
}.videos-list .dummy .video-card .card-img{
  background-color: #cccccc;
  width: 100%;
  height: 180px;
  border-radius: 10px;
  animation: dummy 1s linear infinite;
}.videos-list .dummy .video-card .title{
  background-color: var(--gray);
  margin: 10px 0;
  height: 25px;
  border-radius: 10px;
  animation: dummy 850ms linear infinite;
}.videos-list .dummy .video-card .subtitle{
  background-color: var(--gray);
  margin: 10px 0;
  height: 25px;
  width: 65%;
  border-radius: 10px;
  animation: dummy 550ms linear infinite;
}.related-videos{
  /*
  &[data-provider="ShortProvider"] {

    .videos-body {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--radius-m);
    }.video-desc{
      display: none;
    }.row{

      div[class*='col'] {
        width: 100%;
      }}
  }
  */
}
.related-videos .videos-header{
  margin-bottom: 24px;
}.tags-list{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}.tags-list .tag{
  border-radius: var(--radius-m);
  border: 1px solid var(--Neutral-60);
  padding: 3px 10px;
  text-align:center;
  margin-right:5px;
  margin-bottom: 6px;
}.tags-list .tag.dummy{
  background-color: #212529;
  width: 80px;
  height: 15px;
  margin-bottom: 15px;
  border-radius: 10px;
  animation: dummy 1s linear infinite;
  border: none;
}.tags-list .tag:hover{
  background-color: rgba(0, 0, 0, 0.05);
}.tags-list .tag a{
  color: var(--Neutral-60);
  text-decoration: none;
}.tags-list .tag.active{
  background-color: #212529;
}.tags-list .tag.active:hover{
  background-color: rgba(0, 0, 0, 0.8);
}.tags-list .tag.active a{
  color: var(--white);
}.template{
  display: none;
}video::cue{
  font-size: 1rem;
  color: var(--white);
}.text-line{
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}section[data-provider=subscriptions] .dummy [data-type=image]{
  background-color: #cccccc;
  border-radius: 1000px;
  animation: dummy 1s linear infinite;
}section[data-provider=subscriptions] .dummy [data-type=username]{
  background-color: #cccccc;
  margin: 5px 50px;
  height: 20px;
  border-radius: 10px;
  animation: dummy 1s linear infinite;
}section[data-provider=subscriptions] .dummy [data-type=subs]{
  background-color: #cccccc;
  height: 15px;
  border-radius: 10px;
  animation: dummy 1s linear infinite;
  color: transparent;
}.pagination{
  direction:rtl;
}.pagination .page-link{
  color: var(--primary);
}.pagination .page-link.active{
  background-color: var(--primary);
  color: #ffffff;
}.actions .material-symbols-outlined{
  font-size: 18px;
  margin: 0 2px;
}.admin-group .material-symbols-outlined{
  font-size: 18px;
}.page-transcription .video-frame{
  top: 100px;
  z-index: 0;
}.page-transcription .item-group{
  margin-bottom: 25px;
  border-bottom: 1px solid #CCCCCC;
  padding-bottom: 25px;
}#sharing-modal .modal-header{
  border-bottom: unset;
}#sharing-modal .modal-footer{
  border-top: unset;
}#sharing-modal .modal-body .share-item{
  display: flex;
  flex-direction: column;
  align-items: center;
}#sharing-modal .modal-body .share-item a{
  text-decoration: none;
  color: var(--Neutral-50);
  font-size: 12px;
  margin-top: 10px;
}.video-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 16px;
}.video-tags .tag{
  text-decoration: none;
  color: var(--Neutral-40);
  border: 1px solid var(--Neutral-40);
  border-radius: 8px;
  padding: 4px 8px;
}.video-tags .tag:hover{
  color: var(--Neutral-80);
}#dashboard .stream-btn span:not(.material-symbols-outlined){
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}section[data-provider=channels] .dummy .channel-item{
  background-color: #cccccc;
  width: 100%;
  height: 180px;
  border-radius: 10px;
  animation: dummy 1s linear infinite;
}section[data-provider=channels] .dummy .channel-item .details, section[data-provider=channels] .dummy .channel-item .channel-link{
  display: none;
}section[data-provider=channels] .channel-item{
  position: relative;
  margin-bottom: 24px;
  border-radius: 12px;
  overflow: hidden;
}section[data-provider=channels] .channel-item .details{
  position: absolute;
  top: 0;
  right:0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(255, 255, 255, 0) 100%) !important;
  color: #ffffff;
  flex-direction: column;
  padding-bottom: 24px;
}section[data-provider=channels] .channel-item .details [data-type=title]{
  font-weight: 700;
}section[data-provider=channels] .channel-item .details [data-type=count]{
  font-size: 12px;
}.videos-chooser{
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}.videos-chooser .headers{
  display: flex;
  justify-content: space-between;
  padding: 0 0 15px;
  font-size: 1.1rem;
  font-weight: 600;
}.videos-chooser .body{
  display: flex;
  justify-content: center;
}.videos-chooser .body .from{
  display: flex;
  flex-basis: 45%;
  border: dashed var(--Neutral-60) 1px;
  border-radius: 12px;
  padding: 24px;
  flex-direction: column;
  overflow-y: auto;
}.videos-chooser .body .from .admin-group{
  margin-top: auto;
}.videos-chooser .body .separator{
  flex-basis: 10%;
  margin: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}.videos-chooser .body .to{
  flex-basis: 45%;
  border: dashed var(--Neutral-60) 1px;
  border-radius: 12px;
  padding: 24px;
  overflow-y: auto;
}.videos-chooser .body .videos-list{
  height: 560px;
  padding: 0 24px 0;
  overflow-y: auto;
}.videos-chooser .body .videos-list .video-item{
  margin-bottom: 24px;
}.videos-chooser .body .videos-list .video-item:hover{
  cursor: move;
}.videos-chooser .body .videos-list .video-item .card-thumbnail small{
  left:5px;
}.cancopy{
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}.cancopy .form-control{
  font-size: 12px;
  height: 24px;
}/* 14. VIDEO CLIP
*****************************************************************************************/
html[dir=ltr] .page-videos-edit .clip-container .indicator.start{
  border-top-left-radius:5px;
  border-bottom-left-radius:5px;
  border-left:1px solid var(--primary);
  border-right:unset;
  border-top-right-radius:unset;
  border-bottom-right-radius:unset;
}html[dir=ltr] .page-videos-edit .clip-container .indicator.end{
  border-top-right-radius:5px;
  border-bottom-right-radius:5px;
  border-right:1px solid var(--primary);
  border-left:unset;
  border-top-left-radius:unset;
  border-bottom-left-radius:unset;
}.page-videos-edit .clip-container.clip-container-vertical{
  height: 32px;
  position: relative;
}.page-videos-edit .clip-container .clip-background{
  background-color: var(--primary-light) !important;
  border-top: 1px solid var(--primary);
  border-bottom: 1px solid var(--primary);
  margin-left:10px;
}.page-videos-edit .clip-container .indicator{
  width: 10px;
  height: 100%;
  position: absolute;
  cursor: ew-resize;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}.page-videos-edit .clip-container .indicator.start{
  background-color: var(--primary-light);
  border-top-right-radius:5px;
  border-bottom-right-radius:5px;
  color: var(--primary);
  border-right:1px solid var(--primary);
  border-top: 1px solid var(--primary);
  border-bottom: 1px solid var(--primary);
}.page-videos-edit .clip-container .indicator.end{
  background-color: var(--primary-light);
  border-top-left-radius:5px;
  border-bottom-left-radius:5px;
  color: var(--primary);
  border-left:1px solid var(--primary);
  border-top: 1px solid var(--primary);
  border-bottom: 1px solid var(--primary);
}.page-videos-edit .clip-container .clip-background{
  position: absolute;
  height: 100%;
  background-color: var(--primary);
  z-index: 0;
  border-top-right-radius:5px;
  border-bottom-right-radius:5px;
  cursor: move;
}.page-videos-edit #progressBarContainer{
  background-color: #cccccc;
  position: relative;
  height: 32px;
  border-radius: 5px;
}.page-videos-edit #progressBarContainer.has-clips{
  display: flex;
  flex-direction: column;
  transition: height 0.3s ease; /* Smooth height transition */
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 3px; /* adds space between clip containers */
  height: unset;
  padding: 25px 0;
  border-bottom: 1px solid #212529;
  border-left:1px solid #e9ecef;
  border-right:1px solid #e9ecef;
  border-radius: 0;
  background: repeating-linear-gradient(to right, #ffffff, #ffffff 49px, #e9ecef 49px, #e9ecef 50px);
}.page-videos-edit #progressBarContainer.has-clips .point-indicator{
  height: 100%;
}.page-videos-edit #progressBarContainer.has-clips #timeS, .page-videos-edit #progressBarContainer.has-clips #timeE, .page-videos-edit #progressBarContainer.has-clips .current-timeline{
  display: none;
}.page-videos-edit #progressBarContainer.has-clips #progressBar{
  height: 100%;
}.page-videos-edit #progressBarContainer.active{
  padding: 0;
  height: 32px;
}.page-videos-edit #progressBarContainer.active #rangeBackground{
  background: linear-gradient(to right, var(--primary), var(--primary-light)); /* Gradient background for range */
}.page-videos-edit #progressBarContainer.active #rangeBackground:hover{
  cursor: move;
}.page-videos-edit #progressBarContainer.active #rangeWrapper{
  display: block;
}.page-videos-edit #progressBarContainer.active .current-timeline{
  opacity: 1;
}.page-videos-edit #progressBarContainer .point-indicator{
  width: 5px;
  height: 42px;
  top: -5px;
  cursor: grabbing;
  position: absolute;
  background-color: #FDEE7F;
  border: 1px solid var(--Neutral-90);
  z-index: 2;
  transition: all 10ms;
}.page-videos-edit #progressBarContainer .point-indicator:after{
  content: "";
  position: absolute;
  top: -14px;
  right:2px;
  width: 1px;
  height: 10px;
  background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(255, 255, 255, 0) 100%) !important;
  display: none;
}.page-videos-edit #progressBarContainer .point-indicator:before{
  content: "";
  position: absolute;
  bottom: -14px;
  right:2px;
  width: 1px;
  height: 10px;
  background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(255, 255, 255, 0) 100%) !important;
  display: none;
}.page-videos-edit #progressBarContainer .point-indicator:hover, .page-videos-edit #progressBarContainer .point-indicator.active{
  border: 2px solid #FDEE7F;
  outline: 2px solid var(--Neutral-90);
  width: 10px;
  background-color: var(--Neutral-90);
}.page-videos-edit #progressBarContainer .point-indicator:hover:after, .page-videos-edit #progressBarContainer .point-indicator:hover:before, .page-videos-edit #progressBarContainer .point-indicator.active:after, .page-videos-edit #progressBarContainer .point-indicator.active:before{
  display: block;
}.page-videos-edit #progressBar{
  right:0;
  width: 4px;
  height: calc(100% + 10px);
  top: -5px;
  position: absolute;
  background-color: black; /* Color of the vertical line */
  transition: width 0.3s; /* Add transition for smooth width change */
  z-index: 2;
}.page-videos-edit #rangeWrapper{
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: none;
}.page-videos-edit #rangeBackground{
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1;
  /*    outline-color: #FFFFFF;
      outline-style: solid;
      outline-width: 3px;
      outline-offset: -3px;*/
  border-radius: 5px;
}.page-videos-edit #rangeStart,
.page-videos-edit #rangeEnd{
  position: absolute;
  height: 100%;
  cursor: ew-resize;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 0 3px;
}.page-videos-edit .range-indicator .material-symbols-outlined{
  font-size: 12px;
}.page-videos-edit #rangeStart{
  right:0;
}.page-videos-edit #rangeEnd{
  left:0;
}.page-videos-edit .range-timeline-btn{
  display: flex;
  font-size: 12px;
  position: absolute;
  bottom: 0;
  margin-bottom: -30px;
}.page-videos-edit .range-timeline-btn input{
  border: unset;
  background-color: unset;
  width: 80px;
}.page-videos-edit #timeS.range-timeline-btn.space{
  margin-right:-100px;
}.page-videos-edit #timeE.range-timeline-btn.space{
  margin-left:-100px;
}.page-videos-edit .range-timeline-btn .material-symbols-outlined{
  font-size: 16px;
  color: var(--black);
}.page-videos-edit .current-timeline{
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 0;
  right:47%;
  z-index: 99;
  margin-bottom: -60px;
  font-size: 12px;
  color: var(--black);
  font-weight: 800;
  opacity: 0;
}/* 15. LTI
***********************/
.no-header nav, .page-lti-index nav{
  display: none;
}.no-header .support-help, .page-lti-index .support-help{
  display: none;
}.no-header #video-page, .page-lti-index #video-page{
  margin-top: 24px;
}.no-header #video-page .video-frame.horizontal, .page-lti-index #video-page .video-frame.horizontal{
  height: 60vh;
}.support-help{
  position: fixed;
  right:35px;
  bottom: 20px;
}.support-help a{
  text-decoration: none;
}.support-help .material-symbols-outlined{
  background-color: rgba(var(--primary), 1);
  border-radius: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
}body.page-videos-watch #video-page .sticky-md-top{
  top: 100px;
}#notify-items .notify-item{
  border-bottom: 15px;
  padding-bottom: 15px;
  padding-top: 15px;
  border-bottom: 1px solid var(--Neutral-30);
}#notify-items .notify-item:last-child{
  border-bottom: unset;
}mini{
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  width: 40px;
  height: 40px;
  margin-right:8px;
}mini.v1{
  background-color: rgba(110, 237, 169, 0.12);
}mini.v1 span{
  color: #6EEDA9 !important;
  font-size: 22px !important;
}mini.v2{
  background-color: rgba(243, 190, 152, 0.12);
}mini.v2 span{
  color: #F3BE98 !important;
  font-size: 22px !important;
}mini.v3{
  background-color: rgba(253, 238, 127, 0.12);
}mini.v3 span{
  color: #9B9774 !important;
  font-size: 22px !important;
}mini.v4{
  background-color: rgba(137, 220, 255, 0.12);
}mini.v4 span{
  color: #89dcff !important;
  font-size: 22px !important;
}#recording-modal .hide{
  display: none;
}#recording-modal #startup select{
  font-size: 12px;
}#recording-modal #videos .disabled-camera{
  display: none;
}#recording-modal #videos.no-video .disabled-camera{
  width: 100%;
  height: 220px;
  background-color: var(--Neutral-10);
  color: var(--Neutral-40);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}#recording-modal #videos.no-video video{
  display: none;
}#recording-modal .duration{
  display: flex;
  align-items: center;
}#recording-modal .duration.disabled{
  display: none;
}#recording-modal .duration .recording{
  margin: 0 10px;
  width: 10px;
  height: 10px;
  border-radius: 20px;
  background-color: var(--primary);
  display: inline-block;
}#recording-modal video{
  max-height: 220px;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}#recording-modal video:not(.primary){
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 5px;
  left:15px;
}.card-analytics{
  background-color: var(--Neutral-30);
  border: 0;
  border-radius: var(--radius-m);
}.card-analytics .card-visual{
  background-color: var(--bs-card-cap-bg);
  color: var(--Neutral-50);
  padding-top: 10px;
}.card-analytics .card-header{
  color: var(--Neutral-60);
  font-size: 12px;
  font-weight: 500;
}.card-analytics .card-body .card-title{
  font-size: 20px;
  font-weight: 400;
}#questions-answers{
  direction:ltr;
  position: absolute;
  top: 0;
  right:0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7); /* Black with 70% opacity */
  backdrop-filter: blur(10px); /* Adjust the blur intensity as needed */
  opacity: 0;
  z-index: -1;
  display: flex;
  align-items: center;
  color: #ffffff;
  padding: 25px;
  flex-direction: column;
  justify-content: flex-start;
}#questions-answers.active{
  opacity: 1;
  z-index: 999;
}#questions-answers .headers .title{
  color: #ffffff;
  padding: 0 5px;
}#questions-answers .card{
  background-color: #000000;
  border-radius: var(--radius-m);
  color: #ffffff;
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
  padding: 15px;
}#questions-answers .card .stream-btn .up{
  display: none;
}#questions-answers .card b{
  color: var(--Neutral-60);
}#questions-answers .card p{
  overflow: hidden;
  max-height: 0;
  transition: all 300ms;
}#questions-answers .card .time{
  font-size: 13px;
}#questions-answers .card .bubble{
  border: 1px solid #89dcff;
  background-color: #000000;
  color: #89dcff;
  width: 24px;
  height: 24px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}#questions-answers .card.active b{
  color: #ffffff;
}#questions-answers .card.active p{
  max-height: 500px;
}#questions-answers .card.active .bubble{
  background-color: #89dcff;
  color: #000000;
}#questions-answers .card.active .stream-btn .up{
  display: block;
}#questions-answers .card.active .stream-btn .down{
  display: none;
}#features-questions{
  display: none;
  direction:ltr;
}#features-questions .hide{
  display: none;
}/*  START STREAM KIT */
.stream-btn{
  position: relative;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-m);
  color: #ffffff;
  background-color: var(--primary);
  border: 1px solid var(--primary);
  text-decoration: none;
  padding: 0 16px;
  font-size: 13px;
  gap: 5px;
}.stream-btn[disabled="1"]{
  background-color: var(--gray);
  border: unset;
}.stream-btn.btn-tag{
  border: 1px solid var(--Neutral-90);
  color: var(--Neutral-90);
  background-color: unset;
  height: 28px;
}.stream-btn.btn-tag.template{
  display: none;
}.stream-btn.btn-tag:hover{
  background-color: var(--Neutral-90);
  color: var(--Neutral-10);
}.stream-btn.btn-tag.active{
  background-color: var(--Neutral-90);
  color: var(--Neutral-10);
}.stream-btn.btn-tag .material-symbols-outlined{
  font-size: 16px;
}.stream-btn.btn-large{
  height: 42px;
  padding: 0 32px;
}.stream-btn .material-symbols-outlined{
  font-size: 22px;
}.stream-btn .material-symbols-outlined.fill{
  font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 0, "opsz" 48;
}.stream-btn .bubble{
  width: 16px;
  height: 16px;
  border-radius: var(--radius-m);
  position: absolute;
  top: -2px;
  left:-2px;
  background-color: var(--primary);
  font-size: 8px !important;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}.stream-btn:hover{
  color: #ffffff;
  background-color: var(--primary-dark);
}.stream-btn.btn-square{
  border-radius: 6px;
  width: 32px;
  height: 32px;
}.stream-btn.btn-rounded{
  border-radius: 48px;
  width: 48px;
  height: 48px;
}.stream-btn.btn-rounded span{
  padding: 0;
  margin: 0;
  font-size: 24px;
}.stream-btn.btn-image{
  padding: 0 !important;
  border: unset !important;
}.stream-btn.btn-image img{
  border-radius: 150px !important;
  width: 100%;
  height: 100%;
}.stream-btn.btn-rounded-xlarge{
  height: 80px;
  width: 80px;
  border-radius: 80px;
  padding: 0 32px;
}.stream-btn.btn-rounded-xlarge span{
  font-size: 36px;
}.stream-btn.btn-rounded-xxlarge{
  height: 128px;
  width: 128px;
  border-radius: 80px;
  padding: 0 32px;
}.stream-btn.btn-rounded-xxlarge span{
  font-size: 72px;
}.stream-btn.btn-xlarge{
  height: 80px;
  padding: 0 32px;
}.stream-btn.btn-reverse{
  background-color: var(--primary-light);
  border: 1px solid var(--primary-light);
  color: var(--primary);
}.stream-btn.btn-reverse:hover{
  background-color: var(--secondary-light);
}.stream-btn.btn-dark{
  border: 1px solid var(--Neutral-30);
  background-color: var(--Neutral-10);
  color: var(--Neutral-90);
}.stream-btn.btn-dark.active{
  background-color: var(--Neutral-20);
}.stream-btn.btn-dark:hover{
  background-color: var(--Neutral-20);
}.stream-btn.btn-clean{
  background-color: unset;
  border: unset;
  justify-content: unset;
  padding: 0;
  color: var(--Neutral-90);
}.stream-btn.btn-primary-s{
  width: 100%;
  background-color: unset;
  border: unset;
  padding: 0;
  font-size: 14px;
  color: var(--Neutral-90);
  justify-content: start;
}.stream-btn.btn-primary-s:hover{
  color: var(--primary);
}.stream-btn.btn-normal{
  background-color: unset;
  border: unset;
  padding: 0;
  font-size: 14px;
  color: var(--primary);
  text-decoration: underline;
}.stream-btn.btn-normal:hover{
  text-decoration: none;
}.stream-btn.btn-mini{
  height: 24px;
  padding: 0 8px;
  font-size: 10px;
}.stream-btn.btn-mini span{
  font-size: 12px !important;
}.stream-btn.btn-gray{
  background-color: var(--Neutral-20);
  color: var(--Neutral-60);
  border: 1px solid var(--Neutral-20);
}.stream-btn.btn-gray:hover{
  background-color: var(--Neutral-40);
  border: 1px solid var(--Neutral-10);
}.stream-btn.btn-yellow{
  background-color: rgba(243, 190, 152, 0.12);
  color: #F3BE98;
  border: unset;
}.stream-btn.btn-yellow-dark{
  background-color: #fdee7f;
  color: var(--Neutral-90);
  border: unset;
}.stream-btn.btn-green{
  background-color: rgba(110, 237, 169, 0.12);
  color: #6EEDA9;
  border: unset;
}.stream-btn.btn-blue{
  background-color: rgba(137, 220, 255, 0.12);
  color: #89DCFF;
  border: unset;
}.stream-btn.btn-white{
  color: #ffffff;
}.stream-icons{
  display: flex;
}.stream-icons.icon-gray{
  color: var(--Neutral-90);
}.stream-icons.icon-green{
  color: #1B5E20;
}.stream-icons.icon-blue{
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48;
  color: #89DCFF;
}.stream-form{
  border-radius: var(--radius-m);
  padding: 8px;
  font-size: 14px;
}.stream-form.form-checkbox{
  padding: 0;
}.stream-form.form-checkbox.form-radio .toggle{
  width: unset !important;
}.stream-form.form-checkbox input{
  display: none;
}.stream-form.form-checkbox input:checked + label .checkbox-group .material-symbols-outlined{
  border-radius: var(--radius-m);
  background-color: var(--Neutral-90);
  margin-left:unset;
}.stream-form.form-checkbox input:checked + label .checkbox-group .material-symbols-outlined.check{
  display: inline-block;
}.stream-form.form-checkbox input:checked + label .checkbox-group .material-symbols-outlined.close{
  display: none;
}.stream-form.form-checkbox label{
  cursor: pointer;
}.stream-form.form-checkbox label:last-child{
  border-bottom: unset;
}.stream-form.form-checkbox label .display{
  font-size: 12px;
  color: var(--Neutral-60);
}.stream-form.form-checkbox label .display span{
  display: block;
}.stream-form.form-checkbox label .display span:first-child{
  color: var(--Neutral-90);
  font-size: 15px;
}.stream-form.form-checkbox label .checkbox-group{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}.stream-form.form-checkbox label .checkbox-group .toggle{
  border: 1px solid var(--Neutral-50);
  border-radius: var(--radius-m);
  display: flex;
  align-items: center;
  width: 55px;
  padding: 3px;
  overflow: hidden;
}.stream-form.form-checkbox label .checkbox-group .toggle .material-symbols-outlined{
  transition: all 200ms;
  font-size: 18px;
  border-radius: var(--radius-m);
  margin-left:auto;
}.stream-form.form-checkbox label .checkbox-group .toggle .material-symbols-outlined.check{
  display: none;
  background-color: var(--system-success-primary);
  color: #ffffff;
}.stream-form.form-checkbox label .checkbox-group .toggle .material-symbols-outlined.close{
  background-color: var(--Neutral-50);
  color: #ffffff;
}.stream-form.form-mini{
  font-size: 13px;
}.stream-form ~ .form-addon{
  height: 100%;
  position: absolute;
  right:0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 15px;
}.stream-wrapper{
  width: 100%;
}.stream-wrapper .wrapper-input{
  position: relative;
}.stream-wrapper .wrapper-input .autocomplete-items{
  position: absolute;
  z-index: 1000;
  width: 100%;
}.stream-wrapper .wrapper-input .autocomplete-items .dropdown-item{
  cursor: pointer;
}.stream-wrapper .wrapper-input .autocomplete-items .dropdown-item.selected{
  background-color: var(--secondary-light);
}.stream-scroll{
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #888 rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
}.stream-scroll::-webkit-scrollbar{
  width: 8px;
}.stream-scroll::-webkit-scrollbar-track{
  background: #f1f1f1;
}.stream-scroll::-webkit-scrollbar-thumb{
  background: #888;
  border-radius: 4px;
}.stream-scroll::-webkit-scrollbar-thumb:hover{
  background: #555;
}.stream-block{
  display: flex;
  flex-direction: row;
  padding: 12px;
  gap: 12px;
}.stream-block.block-dashed{
  border: 1px dashed var(--Neutral-50);
  background-color: var(--white);
  padding: 32px;
  justify-content: center;
  align-items: center;
  color: var(--Neutral-60);
  border-radius: var(--radius-m);
}.stream-block.block-shadow{
  border-radius: var(--radius-m);
  border: 1px solid var(--Neutral-30);
  background-color: #ffffff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}.stream-block.block-shadow-clean{
  border-radius: var(--radius-m);
  border: 1px solid var(--Neutral-30);
  background-color: #ffffff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.04);
  flex-direction: column;
  align-items: unset;
  overflow: unset;
}.stream-block.block-column{
  flex-direction: column;
}.stream-block.block-wrap{
  flex-wrap: wrap;
}.stream-block.block-jambo{
  padding: 32px 0;
}.stream-block.block-justify-center{
  justify-content: center;
}.stream-block.block-justify-between{
  justify-content: space-between;
}.stream-block.block-justify-start{
  justify-content: start;
}.stream-badge{
  background-color: var(--primary);
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary-light);
  font-size: 8px;
  border-radius: var(--radius-l);
}.stream-widget.widget-card{
  display: inline-flex;
  flex-direction: column;
  background-color: var(--Neutral-30);
  border-radius: var(--radius-s);
  padding: 24px;
  color: var(--Neutral-60);
  gap: 12px;
}.stream-widget.widget-card.card-single-video{
  background-color: unset;
  padding: unset;
  gap: unset;
}.stream-widget.widget-card.card-single-video.template{
  display: none;
}.stream-widget.widget-card.card-single-video a{
  text-decoration: none;
  color: var(--Neutral-90);
}.stream-widget.widget-card.card-single-video .video-visual a{
  border-radius: var(--radius-s);
  position: relative;
  overflow: hidden;
  display: block;
}.stream-widget.widget-card.card-single-video .video-visual a img{
  border-radius: var(--radius-s);
  width: 100%;
  height: auto;
}.stream-widget.widget-card.card-single-video .video-visual a .video-progress{
  display: none;
  position: absolute;
  bottom: 0;
  right:0;
  width: 100%;
  background-color: var(--Neutral-60);
  height: 4px;
}.stream-widget.widget-card.card-single-video .video-visual a .video-progress.active{
  display: block;
}.stream-widget.widget-card.card-single-video .video-visual a .video-progress .progress-bar{
  position: absolute;
  right:0;
  height: 100%;
  background-color: var(--primary);
}.stream-widget.widget-card.card-single-video .video-visual a .card-duration{
  position: absolute;
  color: var(--white);
  padding: 2px 6px;
  border-radius: var(--radius-l);
  background-color: rgba(0, 0, 0, 0.72);
  width: fit-content;
  left:10px;
  bottom: 10px;
  font-size: 10px;
}.stream-widget.widget-card.card-single-video .video-body{
  display: flex;
  flex-direction: column;
  justify-content: center;
}.stream-widget.widget-card.card-single-video .video-body .card-header{
  font-size: 14px;
  font-weight: 700;
  color: #000000;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2; /* Limit to 2 lines */
  max-width: 50ch; /* Approximate 50 characters */
  white-space: normal;
}.stream-widget.widget-card.card-single-video .video-body .card-title{
  color: var(--Neutral-90);
  font-weight: 400;
  display: flex;
  font-size: 13px;
  justify-content: start;
}.stream-widget.widget-card.card-single-video .video-body .card-subtitle{
  font-size: 12px;
  gap: 3px;
}.stream-widget.widget-card.card-wide{
  flex-direction: row;
}.stream-widget.widget-card.card-wide .card-visual{
  display: flex;
  justify-content: center;
  align-items: center;
}.stream-widget.widget-card.card-wide .card-body{
  flex-direction: column;
}.stream-widget.widget-card.card-shadow{
  border-radius: var(--radius-m);
  border: 1px solid var(--Neutral-30);
  background-color: #ffffff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}.stream-widget.widget-card.card-classic{
  justify-content: center;
}.stream-widget.widget-card.card-classic .card-header{
  font-size: 16px;
  font-weight: 500;
}.stream-widget.widget-card.card-classic .card-body{
  flex-direction: column;
  flex-grow: unset;
  justify-content: center;
  gap: 8px;
}.stream-widget.widget-card.card-classic .card-body .card-header{
  color: var(--Neutral-90);
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}.stream-widget.widget-card.card-classic .card-body .card-title{
  font-size: 13px;
  color: var(--Neutral-60);
}.stream-widget.widget-card .card-visual{
  display: flex;
  justify-content: center;
  position: relative;
}.stream-widget.widget-card .card-visual .stream-btn{
  background-color: unset;
  border: unset;
}.stream-widget.widget-card .card-visual .stream-btn span{
  font-size: 36px;
}.stream-widget.widget-card .card-header{
  font-size: 12px;
  font-weight: 500;
}.stream-widget.widget-card .card-body{
  display: flex;
  justify-content: center;
}.stream-widget.widget-card .card-body .card-title{
  color: var(--Neutral-90);
  font-size: 20px;
  font-weight: 400;
  text-align:center;
}.stream-widget.widget-card .card-body .card-subtitle{
  font-size: 10px;
  gap: 3px;
}.stream-widget.widget-header{
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
  align-items: center;
  padding: 48px 0;
}.stream-widget.widget-advanced-dropdown{
  width: 100%;
  padding: 12px;
  margin: 0;
}.stream-widget.widget-advanced-dropdown .dropdown-input{
  display: none;
}.stream-widget.widget-advanced-dropdown .dropdown-input:checked + .dropdown-item{
  background-color: #E3F2FD;
  border: 1px solid var(--Neutral-90);
}.stream-widget.widget-advanced-dropdown .dropdown-input:checked + .dropdown-item .dropdown-hidden-content{
  display: block;
}.stream-widget.widget-advanced-dropdown .dropdown-item{
  cursor: pointer;
  width: 100%;
  padding: 12px;
  border-radius: var(--radius-s);
  border: 1px solid #ffffff;
}.stream-widget.widget-advanced-dropdown .dropdown-item .dropdown-content{
  display: flex;
  justify-content: space-between;
  width: 100%;
}.stream-widget.widget-advanced-dropdown .dropdown-item .dropdown-content .dropdown-details{
  justify-content: space-between;
  gap: 2px;
  display: flex;
  flex-direction: column;
}.stream-widget.widget-advanced-dropdown .dropdown-item .dropdown-content .dropdown-details span{
  color: var(--Neutral-90);
  font-size: 15px;
}.stream-widget.widget-advanced-dropdown .dropdown-item .dropdown-content .dropdown-details small{
  font-size: 12px;
  color: var(--Neutral-60);
}.stream-widget.widget-advanced-dropdown .dropdown-item .dropdown-hidden-content{
  display: none;
}.stream-widget.widget-order-list{
  width: 100%;
  margin: 0;
  gap: 24px;
  display: flex;
  flex-direction: column;
}.stream-widget.widget-order-list .order-list-footer{
  display: flex;
  gap: 12px;
}.stream-widget.widget-order-list .order-list-header{
  display: flex;
  gap: 12px;
}.stream-widget.widget-order-list .order-list-items{
  display: flex;
  flex-direction: column;
}.stream-widget.widget-order-list .order-list-items .order-list-item{
  cursor: pointer;
  border-radius: var(--radius-s);
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
}.stream-widget.widget-order-list .order-list-items .order-list-item ~ .actions{
  margin-left:auto;
}.stream-widget.widget-order-list .order-list-items .order-list-item .actions{
  display: flex;
  gap: 5px;
  color: var(--Neutral-40);
}.stream-widget.widget-order-list .order-list-items .order-list-item .time{
  color: var(--Neutral-60);
  display: flex;
  align-items: center;
}.stream-widget.widget-order-list .order-list-items .order-list-item .number{
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-m);
  background-color: #FDEE7F;
  font-size: 11px;
  color: var(--Neutral-90);
  width: 24px;
  height: 24px;
}.stream-widget.widget-order-list .order-list-items .order-list-item .content{
  margin-right:auto;
}.stream-image.image-brand{
  max-height: 40px;
}.stream-videos-list.empty-mode .no-video-message{
  display: flex;
}.stream-videos-list .no-videos-message{
  display: none;
}.stream-videos-list .dummy .video-visual [data-type=image]{
  background-color: #cccccc;
  width: 100%;
  height: 180px;
  border-radius: 10px;
  animation: dummy 1s linear infinite;
}.stream-videos-list .dummy .video-body .card-title{
  background-color: var(--gray);
  margin: 10px 0;
  height: 25px;
  border-radius: 10px;
  animation: dummy 850ms linear infinite;
}.stream-videos-list .dummy .video-body .card-subtitle{
  background-color: var(--gray);
  margin: 10px 0;
  height: 25px;
  width: 65%;
  border-radius: 10px;
  animation: dummy 550ms linear infinite;
}

/*# sourceMappingURL=styles.css.map */