html {
   scroll-behavior: smooth !important;
}

body {
   padding-top: 0 !important;
   background-image: url(../images/background.jpg);
   background-position: center center;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;
}

.quiz-header,
.quiz-footer {
   position: fixed;
   padding: 6px 10px;
   background: #191c3270;
   border-bottom: 1px solid #ffffff2b;
}

.quiz-header {
   top: 0;
   z-index: 10;
}

.icon-size {
   font-size: 48px;
   font-weight: bold;
}

.otp-code {
   font-size: 42px;
   font-weight: bold;
   margin: 0;
   padding: 4px 12px;
}

.otp-code-form {
   font-size: 48px;
   font-weight: bold;
   margin: 0;
   padding: 4px;
   letter-spacing: 16px;
}

#zmmtg-root {
   background-color: #181c32 !important;
   --bg-color: 24, 28, 50 !important;
}

#content {
   background-color: #181c32 !important;
   --bg-color: 24, 28, 50 !important;
}

#content p {
   color: #f5f8fa !important;
}

.mw-200px {
   max-width: 200px !important;
}

.w-100 {
   width: 100% !important;
}

.nav-tabs .nav-link {
   margin-bottom: -1px;
   background: #0000008a;
   border: 1px solid #c3c3c3;
   border-top-left-radius: 0.475rem;
   border-top-right-radius: 0.475rem;
   color: #fff;
}

.nav-link.active {
   color: #fff;
   background-color: #f1416c;
   border-color: #e4e6ef #e4e6ef #fff;
}

#default-tab .nav-tabs .nav-link {
   margin-bottom: -1px;
   background: 0 0;
   border: 1px solid transparent;
   border-top-left-radius: 0.475rem;
   border-top-right-radius: 0.475rem;
}

#default-tab .nav-link.active {
   color: #5e6278;
   background-color: #fff;
   border-color: #e4e6ef #e4e6ef #fff;
}

#default-tab .nav-link {
   display: block;
   padding: 0.5rem 1rem;
   color: #009ef7;
   transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}

.blur-bg {
   background: #f5f8faad;
}

a {
   cursor: pointer !important;
}

.border-medium {
   border: 1px solid #ffffff2b;
}

.accordion-button-with-progress {
   padding: 1.5rem 1.5rem 0 !important;
}

.modal {
   background-color: #181c32e6 !important;
}

.form-check.form-check-solid .form-check-input {
   border: 1px solid #009ef7!important;
}

.end-50px {
  right: 50px !important
}

.z-index-11 {
   z-index: 11;
}

.z-index-111 {
   z-index: 110;
}

#slideout {
   position: fixed;
   top: 0;
   height: 100%;
   -webkit-transition-duration: 1s;
   -moz-transition-duration: 1s;
   -o-transition-duration: 1s;
   transition-duration: 1s;
   overflow: scroll;
   z-index: 110;
}

#slideup_layer {
   position: fixed;
   top: 0;
   height: 90%;
   -webkit-transition-duration: 1s;
   -moz-transition-duration: 1s;
   -o-transition-duration: 1s;
   transition-duration: 1s;
   overflow: scroll;
   z-index: 110;
}

#slideup_layer_board {
   position: fixed;
   top: 0;
   height: 90%;
   -webkit-transition-duration: 1s;
   -moz-transition-duration: 1s;
   -o-transition-duration: 1s;
   transition-duration: 1s;
   overflow: scroll;
   z-index: 110;
}

.live_quiz_button_container {
   position: fixed;
   bottom: 48px;
   right: 16px;
   z-index: 110;
}

#live_quiz_button {
   /* position: fixed;
   bottom: 48px;
   right: 16px;
   z-index: 110; */
}

#live_board_button {
   /* position: fixed;
   bottom: 48px;
   right: 16px;
   z-index: 110; */
}

#live_quiz_exit_button {
   position: fixed;
   bottom: 48px;
   left: 16px;
   z-index: 110;
}

.text-vertical {
   vertical-align: middle;
}


.blink {
	-webkit-animation: pulse 500ms infinite alternate;
	        animation: pulse 500ms infinite alternate;
}
@-webkit-keyframes pulse {
	0% { color:#a1a5b7; }
	100% { color: #f1416c; }
}
@keyframes pulse {
	0% { color: #a1a5b7; }
	100% { color: #f1416c; }
}

.border-gray {
   border-color: #b5b5b5 !important
}

.separator.separator-content.border-gray::after,
.separator.separator-content.border-gray::before {
  border-color: #b5b5b5 !important
}

 #scroll-text {
   /* animation properties */
   -moz-transform: translateX(100%);
   -webkit-transform: translateX(100%);
   transform: translateX(100%);
   
   -moz-animation: my-animation 15s linear infinite;
   -webkit-animation: my-animation 15s linear infinite;
   animation: my-animation 15s linear infinite;
 }
 
 /* for Firefox */
 @-moz-keyframes my-animation {
   from { -moz-transform: translateX(100%); }
   to { -moz-transform: translateX(-100%); }
 }
 
 /* for Chrome */
 @-webkit-keyframes my-animation {
   from { -webkit-transform: translateX(100%); }
   to { -webkit-transform: translateX(-100%); }
 }
 
 @keyframes my-animation {
   from {
     -moz-transform: translateX(100%);
     -webkit-transform: translateX(100%);
     transform: translateX(100%);
   }
   to {
     -moz-transform: translateX(-100%);
     -webkit-transform: translateX(-100%);
     transform: translateX(-100%);
   }
}

.transparent-black {
   background-color: #00000068;
}

#eraser_cursor {
   position: absolute;
   background-color: #f4f4f4;
   /* width: 64px;
   height: 64px; */
   margin: -32px 0px 0px -32px;
   border: 1px solid #c6c6c6;
   border-radius: 50%;
   pointer-events: none !important;
   box-shadow: 0 0 16px rgba(255, 255, 255, 0);
   z-index: 112;
}

.signature {
   font-family: "Brush Script MT", Times, cursive;
   font-size: 32px;
}

.bg-secondary {
   --bs-bg-opacity: 0.8 !important;
}


/* Hide fullscreen button in native controls
video::-webkit-media-controls-fullscreen-button {
   display: none !important;
}

/* Hide cast button in native controls 
video::-webkit-media-controls-overlay-play-button,
video::-internal-media-controls-overlay-cast-button {
   display: none !important;
}
*/

/* SAFER version that only targets specific elements */

/* Hide fullscreen button */
video::-webkit-media-controls-fullscreen-button {
   display: none !important;
}

/* Hide only the cast button (more specific) */
video::-webkit-media-controls-overlay-enclosure {
   display: none !important;
}

/* Alternative for newer browsers */
video[controlsList~="nofullscreen"]::-webkit-media-controls-fullscreen-button {
   display: none;
}

/* Keep all other controls visible */
video::-webkit-media-controls-panel,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-current-time-display,
video::-webkit-media-controls-time-remaining-display,
video::-webkit-media-controls-timeline,
video::-webkit-media-controls-volume-slider,
video::-webkit-media-controls-mute-button {
   display: flex !important; /* Force these to remain visible */
}