@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.ttf');
    font-weight: 400;
	font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Medium.ttf');
    font-weight: 500;
	font-style: normal;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-SemiBold.ttf');
    font-weight: 600;
	font-style: normal;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Bold.ttf');
    font-weight: 700;
	font-style: normal;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-ExtraBold.ttf');
    font-weight: 800;
	font-style: normal;
}
@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/DMSans-Bold.ttf');
    font-weight: 700;
	font-style: normal;
}
body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
     background-image: linear-gradient(to right,#ba1616, #ba1617, #260008, #260008, #53050c);
}
p { margin: 0;}
a {text-decoration: none;}
html,body{overflow-x: hidden !important;}
body{background-position: center;background-size: cover;background-repeat: no-repeat}
.brands-partner {
    display: table-cell;
    vertical-align: middle;
    background: #fff;
    text-align: center;
    padding: 5px 15px 10px;
    border-radius: 3px;
}
.q_a_moreBtn {
    float: left;
    background: linear-gradient(to bottom, rgba(110, 238, 208, 1), rgba(161, 162, 255, 1));
    padding: 8px 8px;
    outline: none;
    border: none;
    border-radius: 3em;
    cursor: pointer;
    color: #fff;
    font-size: 12px;
    font-weight: 600;

}
.user-interaction-qr,
.video-container,
.seminar-logo,
.seminar-info,
.page-container.login-homepage .header,
.custom-icons,
.custom-icons-link,
.qr-content .qr-text-2,
.user-interaction-qr .qr-content #qr-code button,
.seminar-info .title div {
    display: none;
}
#player:hover + .full_screen_icon {
    display: none;
}
.login-container {
    margin: 0 8px;
}

/* Video Players styling Start */
.page-container.mini-player .video-container {
    display: flex;
    position: relative;
    justify-content: center;
    height: 70vh;
    width: 60vw;
    margin: 0 5rem;
}
.page-container.full-player .video-container {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 55px;
    left: 0;
    right: 0;
    bottom: 0;
}
.video-overlay {
    position: absolute;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background:rgba(0, 0, 0, 0)
}
.redirect-disable {
    position: absolute;
    width: 80px;
    height: 30px;
    bottom: 0;
    right: 0;
    opacity: 0;
}
.custom-controls {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 30px;
    background: rgba(0, 0,0,0);
    bottom: 0.3rem;
	z-index: 1;
}
.custom-controls img {
    width: 1.2rem;
    cursor: pointer;
}
iframe {
    width: 100%;
    height: 100%;
}
/* Video Players styling END */

/* FIRST LOGIN PAGE */
.page-container.mini-player .header {
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 55px;
}
.page-container.full-player .header{
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 55px;
}
.header .brand-icons {
    display: flex;
    gap: 3rem;
    margin-left: 8rem;
}
.header .brand-icons .mrsi-logo img {
    width: 6rem;
}
.header .brand-icons .crownit-logo img {
    width: 8rem;
}
.header .user-name-logo {
    display: flex;
    gap: 10px;
    margin-right: 3rem;
    justify-content: center;
    align-items: center;
}
.header .user-name-logo .user-name {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 3px;
}
.header .user-name-logo .user-icon img {
    width: 1.8rem;
}
.page-container.login-homepage .content{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5rem;
    margin-top: -3vw;
}
.page-container.login-homepage .seminar-logo {
    display: block;
}
.seminar-logo img {
    width: 30rem;
}
.page-container.login-homepage .seminar-info {
    display: block;
    text-align: center;
    color: #fff;
}
.seminar-info .title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 22px;
    margin: 0 17px;
	max-width: 600px;
}
.seminar-info .sub-title{
    font-size: 13px;
    margin-top: 18px;
	padding: 0px 20px;
}
.first-date, .second-date {
    display: flex;
    flex-direction: column;
}
.event-date {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
	margin-bottom: 25px;
}
.timing {
    font-size: .8rem;
    margin-top: -18px;
}
.initial {
    font-size: 4.5rem;
    color: #ce3ede;
    font-weight: 500;
	-webkit-text-fill-color: transparent;
    background-clip: text;
    background-image: linear-gradient(to right,#BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
}
.date-icon {
    display: flex;
}
.date-icon .sub {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 1px;
}
.date-icon .abbr {
    font-size: 1.2rem;
    text-align: start;
}
.date-icon .month {
    font-size: 1.5rem;
    font-weight: 600;
}
.welcome-text {
    font-size: 1.4rem;
    font-weight: 600;
    text-align: start;
}
.info-text {
    font-size: .9rem;
    text-align: start;
    margin-top: 2px;
}
.form-content {
    position: relative;
    margin: 1.5rem 0;
}

.input-field {
    margin-top: 1rem;
}
.email-text-field{display: flex;}
.line {
    border-top: 1px solid rgb(62 58 58 / 0.25);
    margin: 1.3rem 0;
}
.email-field {
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-right: 12px;
}
.email-field input {
    outline: none;
    border-radius: 1.4px;
    background: #fff;
    padding: 7px 4px;
    border: 1px solid #6d6767;
    width: 20.3rem;
	font-size: 14px;
	font-family: 'Helvetica';
}
.input-field .submit-btn {
	background: #f2f0f0;
	display: inline-block;
	font-family: 'DM Sans';
	color: #333;
    font-weight: 800;
    align-self: end;
    cursor: pointer;
    padding: 6px 20px;
    border-radius: 4px;
    font-size: 16px;
    outline: none;
    border: none;
}
.input-field .resend-otp-btn {
	font-family: 'DM Sans';
	background: #f2f0f0;
	color: #333;
    align-self: end;
    cursor: pointer;
    font-size: 13px;
	font-weight: 800;
    padding: 7px 6px;
    border-radius: 4px;
    outline: none;
    border: none;
	margin-left: 4px;
}
.input-field .submit-btn:hover, .input-field .resend-otp-btn:hover{background: #f4cecf;}
.error-message {
    display: flex;
    justify-content: flex-start;
    gap: 6px;
    margin-top: 6px;
    align-items: center;
    display: flex;
    width: 100%;
    place-content: end;
}
.error-message .err-message {
    font-size: 12px;
    color: #fb6a6a;
}
.error-message .err-icon {
    margin-top: 3px;
}
.error-message .err-icon img {width: 15px;}

/* Second MINI PLAYER Page */
.page-container.mini-player .content {
    display: grid;
    grid-template-columns: 2.5fr 1fr;
    margin-top: -4vw;
}
.page-container.mini-player .user-interaction-qr {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3rem;
    margin-right: 3rem;
}
.user-interaction-qr .brand-symbol img {width: 100%;}
.user-interaction-qr .qr-content img {
    width: 10rem;
    opacity: .7;
}
.user-interaction-qr .qr-content img:hover {
    opacity: 1;
}
.qr-content-full {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 14rem;
    gap: 15px;
    padding: 2rem 1rem 1rem 1rem;
}
.qr-content-full p {
    text-align: center;
    font-size: 9px;
}
#qr-code-full img {
    width: 8rem;
}
.page-container.full-player .custom-icons {
    position: relative;
    display: block;
    top: 0.5rem;
    right: 1.3rem;
	z-index: 100;
}
.page-container.full-player .custom-icons-link {
    position: relative;
    top: 0.5rem;
}
.custom-icons img,
.custom-icons-link img {
    width: 3rem;
    cursor: pointer;
}
.qr-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
#qr-code img {
    border: 6px solid #fff;
    width: 70%;
}
.qr-content .qr-text-1 {
    font-size: 12px;
    color: #fff;
    padding: 0 6px;
}

/* Footer */
.footer {
    display: none;
    justify-content: center;
}
.footer .brands-container {
	display: flex;
    width: 85vw;
    height: auto;
    padding: 10px;
    border-radius: 3px;
    gap: 5px;
    place-content: center;
    grid-gap: 10px;
}
.brand-partner-type {
    color: white;
    text-align: center;
    width: 100%;
    display: table-caption;
    padding-bottom: 6px;
}

.page-container.login-homepage .footer,
.page-container.mini-player .footer {
    display: flex;margin-bottom: 20px;
}

/* Placeholder Color */
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #222;
    font-size: .8rem;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #222;
   opacity:  1;
   font-size: .8rem;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #222;
   opacity:  1;
   font-size: .8rem;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #222;
   font-size: .8rem;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #222;
   font-size: .8rem;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #222;
   font-size: .8rem;
}

/* Styles for the custom menu */
#custom-menu {
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    display: none;
    z-index: 1000;
    transform: translateX(-80%);
    margin-top: 36px;
}

#custom-menu::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: #fff;
    top: -0.2em;
    right: 1.6em;
    transform: rotate(45deg) skew(20deg, 20deg);
}

/* Hide the menu by default */
.hidden {
    display: none;
}
.postload-disable {
    position: absolute;
    width: 170px;
    height: 51px;
    bottom: 0;
    left: 0;
    background: red;
    opacity: 0;
}
#backgroundImg, #backgroundImgLoad {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
/* Style the page content */

/* Style the page loader */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2); /* Semi-transparent black background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensure it's above other content */
}

/* Style the loader animation (customize as needed) */
.loader {
    border: 4px solid #f3f3f3; /* Light gray border */
    border-top: 4px solid #3498db; /* Blue border for animation */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite; /* Rotation animation */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.brands-display{display: table;width: 100%;min-width: 100px;margin-top:10px}
.video-div{width: 100%;}
.form-content .email-field span.contact-msg{font-size: 10px;}
.form-content .email-field span.email-text{font-weight: bold;font-size: 11px;}
.otp-div p{font-size: 15px;text-align: left;font-weight: 500;}
.otp-div p a{color: #d4938d;font-weight: 600;}
.otp-div p a:hover{color: #fff;}
.otp-div .email-field p.resend-otp-msg{font-size: 13px;font-weight: 300;margin-top: 8px;}
.otp-div{margin-top: 30px;}
.otp-div .input-field{display: flex;margin-top: 14px;}
.otp-div .email-field input{width: 10rem;}
.otp-div .input-field .submit-btn{margin-left: 4px}
.edit-icon{margin-left: 6px;background: #00b4ed;padding: 1px 6px;border-radius: 3px;}
.otp-div .edit-icon{display: inline-flex;justify-content: center;align-items: center;width: 29px;height: 29px;margin-left: 2px;background: linear-gradient(to bottom, rgb(255 108 85), rgb(172 7 18));padding: 5px 6px;border-radius: 50px;}
.otp-div .edit-icon:hover{background: linear-gradient(to bottom, rgb(212 72 82), rgb(91 74 76))}
.otp-div .edit-icon i{font-size: 12px;color: #fff;}
.disable-btn{display: inline-block;color: #333333;background-color: #f2f0f0;pointer-events: none;opacity: .80;font-family: 'DM Sans', sans-serif;font-weight: 600;cursor: pointer;padding: 6px 20px;border-radius: 4px;font-size: 16px;outline: none;border: none;}
.footer .row [class*=col-] {padding-left: 5px;padding-right: 5px;}
.footer .brands-partner .row [class*=col-]{padding-bottom: 18px;}
.event-date .first-date{position: relative;}
.event-date .first-date:nth-child(2){padding-left: 15px;}
.event-date .first-date:nth-child(2):before{content: "";width: 1px;height: 80%;background: #fff;position: absolute;left: 0px;top: 20px;}
.brands-partner img {margin: 5px 6px 7px;max-width: calc(100% - 0px);max-height: 50px;min-height: 50px;object-fit: contain;}
.adjust-width{flex-grow: 1;}
.top-right-logo{text-align: right;}
.top-right-logo img{max-width: 120px;}
.seminar-info .title p, .seminar-info .sub-title, .date-icon .abbr, .date-icon .month, .timing,
.welcome-text, .info-text, .form-content .email-field span.contact-msg{color: #fefefe}

@media only screen and (max-width: 380px) {
	.initial{font-size: 3rem;}
	.date-icon .month{font-size: 1rem;}
	.event-date .first-date:nth-child(2){padding-left: 5px;}
	.event-date .first-date:nth-child(2):before{left: -4px;}
	.timing{margin-top: -6px}
	.page-container.login-homepage .content {margin-top: 4vw;}
	.email-field input{width: 18rem;}
}
@media only screen and (max-width: 767px) {
    body{
        overflow: auto;
        background-attachment: unset;
    }
    .qr-content .qr-text-1,
    .user-interaction-qr .qr-content #qr-code img,
    .page-container.full-player .header,
    .mobile-hide {
        display: none;
    }
    .qr-content .qr-text-2,
    .user-interaction-qr .qr-content #qr-code button,
    .page-container.full-player .custom-icons-link,
    .seminar-info .title div {
        display: block;
    }
    .user-interaction-qr .qr-content #qr-code button {
        background: linear-gradient(to bottom, rgba(110, 238, 208, 1), rgba(161, 162, 255, 1));
        padding: 1em 4.8em;
        font-weight: bold;
        outline: none;
        border: none;
        border-radius: 3em;
        cursor: pointer;
        color: #fff;
    }
    .qr-content .qr-text-2 {
        color: #fff;
        font-size: 12px;
    }
    .page-container.login-homepage .content {
        gap: 0.5rem;
        flex-direction: column;
    }
    .seminar-info .title {
        font-size: 1.2em;
        margin: 0 1em;
    }
    .login-container {
        margin: 0 2rem;
    }
    .info-text {
        font-size: .8rem;
        margin-top: 8px;
    }
    .line {
        margin: 1.3rem 2rem;
    }
    .input-field button {
        align-self: auto;
    }
    .page-container.mini-player .content {
        display: flex;
        flex-direction: column;
        gap: 15px;
        justify-content: center;
        align-items: center;
        margin: unset;
    }
    .page-container.mini-player .video-container {
        height: 100%;
        width: 100%;
        margin: unset;
    }
    .page-container.mini-player .user-interaction-qr {
        margin: unset;
    }
    .page-container.mini-player .user-interaction-qr {
        gap: 2rem;
    }
    .header .user-name-logo {
        display: flex;
        gap: 10px;
        margin-right: 1em;
        justify-content: flex-end;
        align-items: center;
        width: 100%;
        margin-top: 0.2em;
    }
    .header .brand-icons {
        display: flex;
        gap: 1em;
        border-bottom: 3px solid #00000061;
        width: 100%;
        justify-content: space-between;
        margin-left: unset;
    }
    .page-container.mini-player .header {
        height: unset;
        flex-direction: column;
    }
    .page-container.full-player .video-container {
        top: 0;
    }
    .page-container.full-player .custom-icons-link {
        right: 20vw;
    }
    .header .brand-icons .mrsi-logo {
        margin-left: .5em;
    }
    .header .brand-icons .crownit-logo {
        margin-right: .5em;
    }
    .user-interaction-qr .brand-symbol img {width: 15rem;}
	.welcome-text,.info-text{text-align: center;}
	.welcome-text{font-size: 1.3rem;}
	.page-container.mini-player iframe.video-div{height: calc(100vw/1.77)}
	.video-div{margin: 12px 25px}
	body{background-size: cover;background-position: -300px 0px;background-repeat: no-repeat;}
	.form-content .email-field span.contact-msg{margin: 0 auto;}
	.email-field input{margin: 0 auto;}
	.otp-div .email-field input{width: 16rem}
	.event-date{margin-top: 15px}
	.otp-div .input-field .submit-btn{margin-top: 0px}
}
@media only screen and (max-width: 575px){
	.seminar-logo img {width: 17rem;}
	.otp-div .input-field{margin-top: 7px}
    .input-field {flex-direction: column;gap: 20px;}
	.email-text-field{display: block}
	.input-field .submit-btn{margin-top: 10px}
	.otp-div p{text-align: center !important;}
	.otp-div .email-field p.resend-otp-msg{margin: 4px auto 0px;}
	.email-field{margin-right: 0px;}
}
@media only screen and (max-width: 961px) and (orientation: landscape) {
    .page-container.full-player .header,
    .page-container.full-player .user-name-logo {display: none;}
    .page-container.full-player .video-container {top: 0;}
    body { overflow: auto;background-attachment: unset;}
}
@media only screen and (max-width: 961px){
    .page-container.full-player .custom-icons{display: none;}
    .page-container.full-player .custom-icons-link {display: block;}
}
@media only screen and (min-width: 576px) and (max-width: 767px){
	.page-container.mini-player iframe.video-div{height: calc(100vw/1.97);}
	.seminar-logo img {width: 22rem;}
}
@media only screen and (min-width: 768px) and (max-width: 991px){
	.page-container .content{padding: 0px 15px;gap: 2rem !important;}
	.seminar-logo img{width: 18rem;}
	.footer .brands-container{width: 92vw;}
	.page-container.mini-player .video-container{height: 55vh;width: 60vw;margin: 0 1rem;}
	.page-container.mini-player .user-interaction-qr{margin-right: 20px;}
	.header .brand-icons{margin-left: 2rem;}
	.seminar-info .title{font-size: 18px;}
	.email-field{margin-right: 7px;}
	.otp-div .input-field .submit-btn{margin-left: 3px;}
	.email-field input{width: 17rem}
	.input-field .submit-btn, .input-field .disable-btn{padding: 6px 18px}
	.page-container.login-homepage .content{margin-top: 0vw;}
}
@media only screen and (min-width: 992px) and (max-width: 1199px){
	.page-container .content{padding: 0px 15px;gap: 4rem !important;}
	.seminar-logo img{width: 22rem;}
	.footer .brands-container{width: 95vw;}
	.page-container.mini-player .video-container{margin: 0 1rem;}
	.page-container.mini-player .user-interaction-qr{margin-right: 20px;}
	.header .brand-icons{margin-left: 2rem;}
	.user-interaction-qr .brand-symbol img{width: 80%;}
	.footer .brands-partner .row [class*=col-] {width: 98px;}
}
@media only screen and (min-width: 768px) and (max-device-width : 1024px)  and (orientation: portrait) {
	.page-container.mini-player .video-container{height: 25vh}
}
@media only screen and (min-width: 768px) and (max-device-width : 1024px)  and (orientation: landscape) {
	.page-container.mini-player .video-container{height: 45vh}
}
@media only screen and (max-width: 991px){
	.footer .brands-container{display: block;}
	.form-content{margin: 1.5rem 0 0}
	.brands-display{margin-top: 20px}
}
@media only screen and (min-width: 381px) and (max-width: 575px){
	.initial{font-size: 4rem;}
	.date-icon .month{font-size: 1.2rem;}
	.page-container.login-homepage .content{margin-top: -5vw}
}