body{ color:#000; font-family: 'Roboto', Helvetica, "sans-serif"; padding: 0; margin: 0; background: #fff;}
*,::after,::before {
    box-sizing: border-box
}
h2{ margin:20px 0; font-size: 24px;}
img{ max-width:100%; height: auto;}
textarea{ resize:none;}
button{ cursor:pointer;}
button:disabled{ cursor:not-allowed; }
.text-center{ text-align:center;}
.mw-250{ max-width:250px;}
.mw-500{ max-width:500px;}
.d-none{ display:none !important;}
.main-block{ display:flex; min-height: 100vh; background: #fff;}
.main-block > div{ width:50%; position: relative;}

/*Animation*/
:root {
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1
}

.animate__animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-duration: var(--animate-duration); animation-duration: var(--animate-duration); -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.animate__animated.animate__delay-1s { -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-animation-delay: var(--animate-delay); animation-delay: var(--animate-delay)}
.animate__animated.animate__delay-2s { -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-animation-delay: calc(var(--animate-delay)*2); animation-delay: calc(var(--animate-delay)*2)}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}
.animate__fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight}

@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3)
    }

    50% {
        opacity: 1
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3)
    }

    50% {
        opacity: 1
    }
}

.animate__zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn}

@keyframes zoomInDown {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0);
        transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0);
        -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19);
        animation-timing-function: cubic-bezier(.55,.055,.675,.19)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
        transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
        -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1);
        animation-timing-function: cubic-bezier(.175,.885,.32,1)
    }
}
.animate__zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown}

/*Main*/
.side-right{ background:#fff;}
.side-left{ background:#f6f6f6; background-size: cover; position: relative; min-height: 225px;}

.side-right-content{ background:#fff;width:85%!important;}
.side-left-content{ background:#fff; width:15%!important; position: relative; min-height: 225px;}

.side-left:after { content: ""; position: absolute; left: 0; top: 0; height: 100vh; width: 100%; background: #000; opacity: 0.15;}
.powered-by { font-size:12px; letter-spacing:1px; background: rgb(63 62 62 / 85%); color: #ffffff; text-transform: none; display: inline-flex; flex-direction: column; padding: 15px; border-radius: 10px; max-width: 225px; position: absolute; bottom: 5vh; right: 5vh;}
.powered-by div{ margin-bottom:10px;}

.panel {height: 100vh; width: 100%; display: none; flex-direction: column; justify-content: center; align-items: center; background: #fff; padding:50px;}
.panel.currentpage { display:flex; position: relative; z-index: 1;}
.panel.nopadding {padding:0px!important;}

.review-type-choice{ overflow:hidden;}
.review-type-choice h1 { font-size: 32px; text-align: center; color: #98389d; margin: 0;}
.btn-choose { background: #fdd4ff; border: 1px solid #fdd4ff; min-width: 270px; margin: 10px 0; height: 56px; border-radius: 45px; font-weight: 500; padding: 0 25px; display: flex; align-items: center; cursor: pointer; color: #98389d; transition: all 0.5s ease-in-out; text-decoration: none;}
.btn-choose span:first-child { background: #98389d; height: 25px; width: 25px; color: #fff; text-align: center; font-weight: normal; font-size: 15px; display: flex; border-radius: 50%; justify-content: center; align-items: center; margin-right: 10px;}
.btn-choose:hover{ border: 1px solid #98389d;}
.btn-choose:hover { border: 1px solid #98389d; background: #98389d; color: #FFF;}
.btn-choose:hover span { background: #fdd4ff; color: #98389d; font-weight: 500;}
.btn-choose.btn-center{ display: inline-flex; justify-content: center;}

/* text review */
.type-review-area{padding:25px;}
.type-review-field{ border:none; width: 100%; height: 100vh; margin-bottom: 20px; font-size: 18px; outline: none;}
.text-review-submit { position: relative; display: block; padding: 15px; font-size: 30px; font-weight: bold; text-decoration: none; color: #98389d; background: #fdd4ff; border:none; width: 80px; min-height: 80px; border-radius: 50%; cursor: pointer;}
.text-review-submit:disabled{ cursor:not-allowed;}
.text-review-submit:after, .text-review-submit:before { content: ""; display: block; position: absolute; transition: all 0.5s ease-in-out;}
.text-review-submit:before { top: calc(50% + 5px); right: 20px; width: 20px; height: 20px; transform-origin: 50% 50%; transform: translate(0, -0.5em) rotate(45deg); box-shadow: inset -0.2em 0.2em 0 0 #98389d; border-radius: 0 0.15em 0 0;}
.text-review-submit:after { top: 50%; right: calc(50% - 10px); width: 30px; height: 0.2em; transform: translate(0, -0.1em); background-color: #98389d;}
.text-review-submit:hover{ background:#98389d; color: #fdd4ff;}
.text-review-submit:hover:before{ box-shadow: inset -0.2em 0.2em 0 0 #fdd4ff;}
.text-review-submit:hover:after {background-color: #fdd4ff;}

/*Client info form*/
span.error { color: red; }
.client-info-area{ padding:50px;}
.client-info-area .form-group{ max-width: 550px;}
.client-info-area h2{ font-size: 20px; font-weight: 500; margin: 0 0 40px;}
.client-info-area .form-group{ position:relative; margin-bottom:25px; width:100%;}
.form-field { width: 100%; padding: 0 0 10px; font-size: 18px; border: none; outline: none; border-bottom: 1px solid #e5e5e5;}
.form-field:focus{ border-color:#98389d;}
.form-submit{width:100%;background: #98389d;border-radius: 56px;height:56px;text-align:center;text-decoration:none;color: #fff;transition: all 0.5s ease-in-out;border: none;outline: none;font-size: 18px;}
.form-submit:hover{ background: #7f2e83; color: #fdd4ff;}

/*Video Review*/
.record-answer-btn{ justify-content: center;}
.record-answer-btn svg{fill: #98389d; margin-right: 10px;}
.record-answer-btn:hover svg{fill: #fff;}

/* Cam request */
.cam-request-area { padding: 50px;}
.no-cam-acceess-box{ background: #f9f9f9;padding: 25px;border-radius: 65px;min-height: 150px;display: flex;flex-direction: column;justify-content: center;align-items: center;margin: 35px 0 25px;}
.no-cam-acceess-box div { font-size: 15px; margin: 10px 0 0; font-weight: 500;}
.video-wrapper-box{width: 100%;padding: 15px;position:relative;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.video-wrapper-box .video-box { aspect-ratio:16/9; margin: auto;position: relative;overflow: hidden;border-radius: 15px;background: #000;}
.video-wrapper-box .video-box.portrait { aspect-ratio:9/16;}
.video-wrapper-box video, .video-wrapper-box canvas{width: 100%;}
/*.video-wrapper-box .video-box {width: 85vh;height: 55vh;margin: auto;position: relative;overflow: hidden;border-radius: 15px;background: #000;}
.video-wrapper-box .video-box.portrait {width: 55vh;height: 85vh;}
.video-wrapper-box video, .video-wrapper-box canvas{height: 100%;left: 50%;min-height: 100%;min-width: 100%;position: absolute;top: 50%;width: 100%;object-fit: cover;transform: translate(-50%, -50%) scaleX(-1);}*/
/*.video-wrapper-box video,.video-wrapper-box canvas{ max-width:100%;}*/
.video-wrapper-box .video-box button#start-recording, .video-wrapper-box .video-box button#end-recording { position: absolute; z-index: 1; left: calc(50% - 40px); bottom: 25px; width: 80px; height: 80px; border-radius: 50%; background: #c13e18; color: #fff; border: 7px solid #666; text-transform: uppercase;}
.video-wrapper-box .video-box button#start-recording:hover, .video-wrapper-box .video-box button#end-recording:hover{background:#b52e17;}
.video-wrapper-box .video-box button#upload_bk_img{ position: absolute; z-index: 1; left: 15px; top: 15px; width: 48px; height: 48px; border-radius: 50%; background: url("../images/change-bg-icon.png") center center no-repeat #fff; background-size: 85%; border: none;}
.video-wrapper-box .video-box button#upload_bk_img:hover{ background-color:#fdd4ff;}
.video-wrapper-box .video-box button#change_mode{ position: absolute; z-index: 1; right: 15px; top: 15px; width: 48px; height: 48px; border-radius: 50%; background: url("../images/orientation-change.png") center center no-repeat #fff; background-size: 75%; border: none;}
.video-wrapper-box .video-box button#change_mode:hover{ background-color:#fdd4ff;}
.preview-action-buttons {position: absolute;z-index: 1;background: #33333340;padding: 10px;text-align: center;bottom: 25px;color: #fff;text-shadow: 0 0 2px #333;border-radius: 10px;left: calc(50% - 77px);}
.preview-action-buttons div:nth-child(1) {font-size:20px;margin-bottom: 10px;/* background: #00000036; *//* width: auto; */}
.preview-action-buttons .send-recording { font-size:15px; width: 50px; margin: 0 5px; height: 50px; background:#129f29; line-height: 50px; border-radius: 50px; color: #fff; display: inline-block;}
.preview-action-buttons .send-recording:hover{background: #0d8722;}
.preview-action-buttons .cancel-recording { font-size:15px; width: 50px; margin: 0 5px; height: 50px; background:#959595; line-height: 50px; border-radius: 50px; color: #fff; display: inline-block;}
.preview-action-buttons .cancel-recording:hover{ background: #757575;}

.select_bk_img.active img{ border:2px solid #98389d;}

/*No Cam*/
.nocam-detected-area{ padding:50px;}
.nocam-detected-area > div > .mw-250{ margin:auto;}
.nocam-detected-area h2{}
.nocam-detected-area p{ font-weight:500; margin-bottom: 15px;}
.nocam-detected-area ol{text-align: left;margin:0;font-size: 14px;padding-left: 10px;}
.nocam-detected-area ol li{ margin-bottom:5px;}
.nocam-detected-area ol li::marker { color: #98389d; font-weight: 500;}
.nocam-detected-area .upload-video-field{ display:none;}
.nocam-detected-area .btn-choose.btn-upload-video {min-width: auto;text-align: center;display: inline-flex;margin: 0px 0 10px;}
.nocam-detected-area .or-text{margin: 20px auto;font-weight: 500;}
.nocam-detected-area .upload-limit-text{ font-size:14px;}
a.backbtn { margin: 25px 0 0; display: inline-block; font-weight: 500; text-decoration: none; color: #000;}
a.backbtn span { margin-right: 5px; font-size: 26px; line-height: 14px; position: relative; top: 5px;}
a.backbtn:hover{ color:#98389d;}

/*Thank you page*/
.thank-you-area{ padding:50px; text-align: center;}
.thank-you-area h2{ font-size: 42px; font-weight: 500; color: #98389d; margin: 0 0 30px;}
.thank-you-area p{ font-size: 18px; margin: 0;}


@media only screen and ( min-width:1024px){
    .side-left{ background: url("../images/bg-1000.jpg") center center no-repeat #f6f6f6; background-size: cover;}
}
@media only screen and ( min-width:2000px){
    .side-left{ background: url("../images/bg-2000.jpg") center center no-repeat #f6f6f6; background-size: cover;}
}
@media only screen and ( max-width:1024px){
    .main-block{ flex-direction:column; height:100%; min-height:calc(100% - 55px);}
    .main-block > div{ width:100%; height:100%;}
    .main-block > div > .panel{ height:100%;}
    .side-left { display:none;}
    .video-wrapper-box { padding:0;}
    .video-wrapper-box .video-box{ height: 100vh; width: 100vw;border-radius: 0;}
}
@media only screen and ( max-width:767px){

}