/* Variables */
 :root {
     --txt-size: 14px;
     --w-color: #ffffff;
     --b-color: #000000;
     --g-color: #cecece;
     --bg-color: #FFFFFF;
     --auth-text: #FFFFFF;
     --error-ms: #ff3535;
     --sec-color: #C69B5D;
     --main-color: #221F1F;
     --button-color: #E74F29;
     --scroll-color: #868686b0;
     --scroll-top-color: #555555;
}
/* Global */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}
 html, body, main {
     width: 100%;
     font-weight: 400;
     min-height: 100vh;
     position: relative;
     overflow: hidden;
     touch-action: pan-y;
     font-size: var(--txt-size);
     background-color: var(--bg-color);
     font-family: 'Poppins', sans-serif !important;
     -ms-touch-action: pan-y;
}
 main {
     min-height: 100vh;
     background-size: 100% 100%;
}
 @font-face {
     font-family: 'NexaBold';
     src: url("/fonts/Nexa Bold.eot?4069c474169e4d6c07e7e4908d70906f");
     src: local('☺'), url("/fonts/Nexa Bold.woff?b8cc96117d1e0c073b77bd36f9866a6b") format('woff'), url("/fonts/Nexa Bold.ttf?cc949b1cffcc2fb2bba8dbb90451fc28") format('truetype'), url("/fonts/Nexa Bold.svg?c2b99812f7617bd31a220050147e457d") format('svg');
     font-weight: normal;
     font-style: normal;
}
 @font-face {
     font-family: 'NexaLight';
     src: url("/fonts/Nexa Light.eot?e6d96cc25ec04fbc2353556d8e0f6c74");
     src: local('☺'), url("/fonts/Nexa Light.woff?a407129ebed923255d152bb04a53583f") format('woff'), url("/fonts/Nexa Light.ttf?fafe41fa54ba1af5fe1b37f810c3b910") format('truetype'), url("/fonts/Nexa Light.svg?2bac835e8aabddeb710cb1bf9b39c0ed") format('svg');
     font-weight: normal;
     font-style: normal;
}
 .container {
     max-width: 90%;
}
 .divider {
     margin: 25px 0;
     background-color: #969696;
}
 img {
     max-width: 100%;
     max-height: 100%;
}
 a, a:hover, a:focus {
     color: inherit !important;
     text-decoration: none !important;
}
 button, input, select, textarea, .form-control:focus, .form-select:focus {
     outline: unset;
     box-shadow: unset;
     background-color: var(--bg-color);
}
 button:focus, input:focus, select:focus, textarea:focus {
     outline: unset !important;
     box-shadow: unset !important;
}
 .form-check {
     position: relative;
     margin-bottom: 25px;
}
 .form-check-input:focus {
     border: none;
     box-shadow: none;
}
 .form-check-input:checked {
     background-color: var(--sec-color);
     border-color: var(--sec-color);
}
 .form-select {
     -moz-appearance: none !important;
     -webkit-appearance: none !important;
     background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23ED6839' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>") !important;
}
 p.code {
     position: absolute;
     color: var(--bg-color);
     bottom: 120px;
     right: -35px;
     margin: 0;
     font-size: 9px;
     transform: rotateZ(90deg);
}
 .input-container {
     position: relative;
}
 .hide_input {
     position: absolute;
     top: 0;
     left: 0;
     width: 10px;
     height: 10px;
     opacity: 0;
     z-index: -1;
}
 .opacity-0 {
     opacity: 0 !important;
}
/* Error Message */
 span.error {
     font-size: 14px;
     text-align: left;
     padding-top: 5px;
     padding-left: 15px;
     color: var(--error-ms);
}
/* Scroll */
 ::-webkit-scrollbar-track {
     background-color: transparent;
}
 ::-webkit-scrollbar {
     width: 7px;
     background-color: transparent;
}
 ::-webkit-scrollbar-thumb {
     background-color: var(--scroll-color);
     border: 0 solid var(--scroll-top-color);
}
/* Splash */
 .splash {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     color: #fff;
     z-index: 4000;
     transition: all .3s linear;
     background-color: rgba(0 0 0 0.6);
}
 .splash:before {
     content: "";
     display: inline-block;
     vertical-align: middle;
     width: 0;
     height: 50%;
}
 .splash .splash_content {
     width: 100%;
     text-align: center;
     font-weight: 400;
     vertical-align: middle;
     white-space: normal;
     display: inline-block;
     transform: translateY(-50%);
}
 .splash .splash_content h1 {
     font-weight: bold;
     font-family: Trebuchet MS, Helvetica, sans-serif;
}
 .text-muted {
     color: #e4e4e4 !important;
}
 .splash svg {
     -webkit-animation: animation .5s infinite linear;
     animation: animation .5s infinite linear;
}
 @-webkit-keyframes animation {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(45deg);
    }
}
 @keyframes animation {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(45deg);
    }
}
/* Main Structure */
 .main_container {
     display: flex;
     width: 100%;
     height: 100%;
     justify-content: center;
}
 .main_container .page_side {
     width: 14.3%;
     color: var(--w-color);
     padding: 15px 15px 75px;
}
 .main_container .page_content {
     width: 85.7%;
     padding: 50px 15px;
}
/* Footer */
 .footer {
     position: fixed;
     left: 0;
     bottom: 0;
     height: 65px;
     width: 14.33%;
     display: flex;
     padding: 0 15px;
     align-items: center;
     justify-content: center;
}
 .footer img {
     width: 100%;
}
/* message on rotation */
 @media screen and (max-width: 1023px){
     .risk, .algorithm, .home, .distribution, .auth, .surgery, .message_tablet, .distribution-view, .thank-you-c{
         display: none !important;
    }
     .portrait_rotation {
         display: block !important;
    }
}
 /*@media only screen and (min-device-width: 1367px){*/
     /*.risk, .algorithm, .home, .distribution, .auth, .surgery, .message_tablet, .distribution-view, .thank-you-c{*/
         /*display: none !important;*/
    /*}*/
     /*.portrait_rotation {*/
         /*display: block !important;*/
    /*}*/
/*}*/
 @media (orientation: portrait) {
     .risk, .algorithm, .home, .distribution, .auth, .surgery, .message_disktop, .distribution-view, .thank-you-c{
         display: none !important;
    }
     .portrait_rotation, .message_tablet {
         display: block !important;
    }
}
 .portrait_rotation {
     background: black;
     height: 100%;
     width: 100%;
}
 .rotation_content{
     height: 100%;
     width: 100%;
     display: flex !important;
     justify-content: center;
     align-items: center;
     flex-direction: column;
}
 .ipad {
     height: 100px;
     width: 200px;
     border: 3px solid white;
     border-radius: 10px;
     -webkit-animation: rotate 1.5s ease-in-out infinite alternate;
     animation: rotate 1.5s ease-in-out infinite alternate;
    /* display: none;
     */
}
 .message_tablet, .message_disktop {
     color: white;
     font-size: 2em;
     margin-top: 80px;
    /* display: none;
     */
}
 @-webkit-keyframes rotate {
     0% {
         transform: rotate(0deg) 
    }
     50% {
         transform: rotate(-90deg) 
    }
     100% {
         transform: rotate(-90deg) 
    }
}
 @keyframes rotate {
     0% {
         transform: rotate(0deg) 
    }
     50% {
         transform: rotate(-90deg) 
    }
     100% {
         transform: rotate(-90deg) 
    }
}
/* thank you */
 .thank-you-c {
     height: 100%;
     background-image: url('/images/thank-you-background.png');
     background-repeat: no-repeat;
     background-size: 100% 100%;
     background-position: center;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: flex-end;
     background-color: black;
     min-height: 100vh;
}
 .thanks-img{
     width:70%;
     margin-bottom: 6vw;
     margin-right: 4%;
}
/* start style of the spin */
 .loading-overlay {
     background: rgba(0 ,0 ,0 ,.9);
     color: #fff;
     position: fixed;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     z-index: 99999;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .reverse-spinner {
     position: relative;
     height: 150px;
     width: 150px;
     border: 6px solid transparent;
     border-top-color: #C69B5D;
     border-left-color: #C69B5D;
     border-radius: 50%;
     -webkit-animation: spin 1.5s linear infinite;
     animation: spin 1.5s linear infinite;
}
 .overlay-hidden {
    display: none !important;
}
 .reverse-spinner::before {
     position: absolute;
     top: 15px;
     left: 15px;
     right: 15px;
     bottom: 15px;
     content: "";
     border: 6px solid transparent;
     border-top-color: #221F1F;
     border-left-color: #221F1F;
     border-radius: 50%;
     -webkit-animation: spinBack 1s linear infinite;
     animation: spinBack 1s linear infinite;
}
 @-webkit-keyframes spin {
     from {
         transform: rotate(0) 
    }
     to {
         transform: rotate(360deg) 
    }
}
 @keyframes spin {
     from {
         transform: rotate(0) 
    }
     to {
         transform: rotate(360deg) 
    }
}
 @-webkit-keyframes spinBack {
     from {
         transform: rotate(0) 
    }
     to {
         transform: rotate(-720deg) 
    }
}
 @keyframes spinBack {
     from {
         transform: rotate(0) 
    }
     to {
         transform: rotate(-720deg) 
    }
}
 @media screen and (min-width: 1366px) {
     .thank-you-c {
         background-size: 100% 100%;
    }
}
 @media (orientation: portrait) {
     .next-button {
         width: 15%;
    }
}