/*******************
Fonts
*******************/
@font-face {
    font-family: 'Campton';
    src: url('/img/font/Campton-ExtraLightItalic.woff2') format('woff2'),
    url('/img/font/Campton-ExtraLightItalic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Campton';
    src: url('/img/font/Campton-Medium.woff2') format('woff2'),
    url('/img/font/Campton-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Campton';
    src: url('/img/font/Campton-SemiBold.woff2') format('woff2'),
    url('/img/font/Campton-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

.fnt-italic {
    font-family: 'Campton';
    font-weight: 200;
    font-style: italic;
}

.fnt-regular {
    font-family: 'Campton';
    font-weight: 500;
    font-style: normal;
}

.fnt-bold {
    font-family: 'Campton';
    font-weight: 600;
    font-style: normal;
}

.fnt-large {
    font-size: 24px;
}

.fnt-small {
    font-size: 12px;
}

/*******************
General
*******************/
html {
    height: calc(100vh - calc(100vh - 100%));
}

body {
    height: calc(100vh - calc(100vh - 100%));

    margin: 0;
    padding: 0;
    color: #fff;
    background-color: #000;

    font-family: 'Campton', 'Arial', sans-serif;
    font-weight: 500;
    font-style: normal;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.page-live {
    background-image: url('/img/bg-live.jpg');
}

#main-container {
    height: 100vh;
    z-index: 25;
    position: relative;
}

#ui-layer {}

#ui-layer > * {}

.el-ui {
    z-index: 75;
}

.box-max-width {
    max-width: 450px;
}

.left-content {
    margin-left: 0rem;
}

@media (min-width: 768px)  {
    .left-content {
        margin-left: 5rem;
    }
}

.bg-black {
    background-color: #000;
}

/*****************
Elements
*****************/
#btn-menu {
    position: fixed;
    right: 0;
    top: 10px;
    cursor: pointer;
    height: 50px;
}

#menu {
    position: fixed;
    right: 20px;
    top: 45px;
    cursor: pointer;
    z-index: 74;
    display: none;
}

#btn-live {
    position: fixed;
    top: -12px;
    left: 50%;
    margin-left: -88px;
}

#btn-live-help {
    position: fixed;
    left: 0;
    bottom: 15px;
    cursor: pointer;
    z-index: 100!important;
}

#btn-logout {
    position: fixed;
    left: 0;
    top: 10px;
    cursor: pointer;
}


.cam-ui {
    color: #000;
    display: flex;
}

#toggle-video {
    margin-right: 15px;
    width: 55px;
    cursor: pointer;
}

#toggle-video.on {
    animation: blinker 3s ease-in-out infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

/*
#cam-ui {
    position: absolute;
    right: -160px;
    color: #000;
    max-width: 140px;
}

#cam-ui img {
    width: 60px;
}

@media (max-width: 700px)  {
    #cam-ui {
        position: absolute;
        left: 0px;
        bottom: -70px;
        right: unset;
        max-width: unset;
        display: flex;
    }
}
*/


@media (max-width: 575px)  {
    #btn-live-help.open {
        display: none;
    }
}

/*******************
Panorama
*******************/
#pano {
    display: none;
    position: fixed;
    z-index: 25;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
}

/*****************
BgVideos
*****************/
#bg-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    opacity: 1;
    z-index: 0;
}

#exit-video {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: 2000;
}

/*****************
Modals Survey, Tour Info
*****************/
.modal-content, .modal-content a {
    color: #000 !important;
}

#modalProgram .modal-content, #modalTourInfo .modal-content {
    background-color: rgba(0,0,0,0);
    border: 0;
    text-align: center;
}

#modalProgram .modal-content img.main-content,
#modalTourInfo .modal-content img.main-content
{
    cursor: pointer;
}

#modalProgram .modal-content img.close,
#modalTourInfo .modal-content img.close
{
    position: absolute;
    z-index: 100;
    right: 0px;
    top: 0px;
    width: 50px;
    height: 50px;
    opacity: 1;
    cursor: pointer;
}

/*******************
Forms
*******************/
.form-box {
    background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="Gradient" x1="0" x2="100" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="%2300f4b1" offset="0"/><stop stop-color="%236685e7" offset="1"/></linearGradient></defs><rect x="2" y="2" width="100%" height="100%" style="height:calc(100% - 4px);width:calc(100% - 4px)" rx="20" ry="20" stroke-width="4" fill="transparent" stroke="url(%23Gradient)" stroke-opacity=".6"/></svg>');
    padding: 4px;
}

.form-box > div {
    background: rgba(0,0,0,.4);
    padding: 25px;
    border-radius: 20px;
}

.custom-control-label a {
    text-decoration: underline !important;
    color: #fff;
}

.modal-content a {
    text-decoration: underline !important;
}

.custom-control-label {
    padding-left: 10px;
    font-size: 13px;
}

.custom-control-label::before,
.custom-control-label::after {
    top: 0rem;
    width: 1.5rem;
    height: 1.5rem;
}

.form-control {
    border-radius: 8px;
    padding: 0 8px;
    font-size: 1rem;
    height: 40px;
}

.formError {
    width: 175px;
}

textarea.form-control {
    height: 68px;
    padding: 4px 8px;
}

.form-group {
    margin-bottom: 4px;
}

.form-group label {
    color: #fff;
    margin-bottom: 2px;
}

/*******************
Buttons
*******************/
.btn-gradient {
    background: linear-gradient(90deg, rgba(0,244,177,1) 0%, rgba(102,133,231,1) 100%);
    color: #000;
    border: 0;
    border-radius: 10px;
    min-width: 150px;
    font-size: 1.15rem;
    font-weight: bold;
}

.btn-menu {
    display: block;
    margin-bottom: 10px;
    height: 50px;
    line-height: 18px;
}

.btn-menu:last-child {
    margin-bottom: 0;
}

.menu-single {
    line-height: 36px !important;
}

.btn-menu span {
    display: block;
    font-size: 12px;
}

.btn-gradient:hover {
    color: #333;
}

.btn-black {
    background: #000;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 10px;
}

.btn-black:hover {
    color: #999;
}




.btn-default {
    border-radius: 8px;
    background-color: #2e3192;
    border: 3px solid #fff;
}

.btn-default:hover {
    border-radius: 8px;
    border: 3px solid #fff;
}

/*******************
Toast
*******************/
.toast {
    position: absolute;
    max-width: 83vw;
    width: 525px;
    height: 185px;
    z-index: 1000;
    text-align: center;
    font-weight: bold;
    font-size: .9rem;
    backdrop-filter: none;
    overflow: unset;
    border: 0;
    left: 50%;
    top: 50%;
    margin-left: -262px;
    margin-top: -92px;
    display: none;
}

@media (max-width: 600px)  {
    .toast {
        left: 50%;
        margin-left: calc(-83vw / 2);
    }
}



.toast-body {
    height: 100%;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.35rem;
    padding-top: 65px !important;
}

.toast-envelope {
    left: 50%;
    width: 120px;
    margin-left: -60px;
    position: absolute;
    top: -35px;
}

.toast-close, .toast-close:hover {
    opacity: 1!important;
    position: absolute;
    right: -27px;
    top: -27px;
    width: 62px;
    height: 62px;
    cursor: pointer;
}

/*
.toast-body a, .toast-body a:hover {
    color: #000;
    text-decoration: underline;

    font-weight: normal;
    font-size: .9rem;
    line-height: 2rem;
}


*/

/*******************
Player
*******************/

.video-embed {
    box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.75);
    border-radius: 10px;
    position: relative;
    /*overflow: hidden;*/
    width: 100%;
    /*padding-top: calc(56.25%);*/
    padding-top: calc(56.25% + 55px);
}

.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    /*overflow: hidden;*/

}

#embed-frame {
    width: 100%;
    height: 100%;
}

/*******************
Mobile
*******************/
@media (max-width: 575px)  {
    #btn-menu {
        top: 40px;
        height: 40px;
    }

    #btn-live-help {
        height: 56px;
        left: -5px;
        bottom: -5px;
    }

    #btn-live {
        position: fixed;
        top: -12px;
        left: 50%;
        margin-left: -70px;

        width: 140px;
    }

    #btn-logout {
        width: 80px;
        left: -5px;
        top: -5px;
    }

    #cometchat__widget .app__launcher {
        bottom: 10px !important;
        right: 10px !important;
    }

    nav.chat-container {
        top: 55px !important;
        bottom: 65px !important;
    }
}

/*******************
Page Specific
*******************/
#pnl-question-post {
    color: #000;
}

.program-box {
    border: 1px solid #58a4d8;
    border-radius: 20px;
    padding: 15px;
    font-size: .9rem;
}

.btn-program {
    border-radius: 14px;
    background-color: #d9623d;
    border: 1px solid #fff;
    margin-bottom: 10px;
    font-size: .8rem;
    font-weight: 700;
    padding: .4rem 1rem;
}

.btn-program:hover {
    background-color: #d9623d;
}

.btn-program.sel {
    border-radius: 14px;
    background-color: #58a4d8;
    border: 1px solid #fff;
    margin-bottom: 10px;
}

.btn-program.sel:after {
    margin-top: -10px;
    content:'';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    width: 0;
    height: 0;
    border-bottom: solid 10px #58a4d8;
    border-left: solid 10px transparent;
    border-right: solid 10px transparent;

}

.program-box table {
    width: 100%;
}


.program-box table td {
    padding-left: 15px;
}

.program-box table th, .program-box table td {
    vertical-align: top;
    padding-bottom: 4px;
}

#product-popup {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: rgba(0,0,0, .3);
    opacity: .9;
    display: none;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#product-popup img {
    max-width: 100%;
    max-height: 100%;
}


#product-popup video {
    width: 30vw;
    height: 35vh;
    position: absolute;
    top: 20px;
    right: 20px;
    border-radius: 20px;
}

@media (max-width: 575px)  {
    #product-popup video {
        width: 100vw;
        height: calc(100vw / 1.77);
        position: absolute;
        top: 0px;
        right: 0px;
    }
}