/*
MEDEVO
URL: ?
AUTHOR: Nabil Amer Thabit (nbilz//lab//dsign | @nbilz)
EMAIL: nbilz@live.com
CREATE DATE: Oct 14, 2021
UPDATE DATE: Oct 14, 2021
REVISION: 1
NAME: medevo.main-1.0.css
TYPE: Cascading Style Sheet
DESCRIPTION: Medevo by Biofarma
PALETTE:    1. #004BBB / rgb(0, 75, 187) (Strong Blue / Cobalt)
            2. #03D9CD / rgb(3, 217, 205) (Vivid Cyan / Robin's Egg Blue)
*/

@font-face{
    font-family: 'OpenSans';
    src: url('../font/OpenSans.woff2') format('woff2'),
         url('../font/OpenSans.woff') format('woff'),
         url('../font/OpenSans.ttf') format('ttf'),
         url('../font/OpenSans.eot') format('eot'),
         url('../font/OpenSans.svg') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face{
    font-family: 'OpenSans';
    src: url('../font/OpenSans-Semibold.woff2') format('woff2'),
         url('../font/OpenSans-Semibold.woff') format('woff'),
         url('../font/OpenSans-Semibold.ttf') format('ttf'),
         url('../font/OpenSans-Semibold.eot') format('eot'),
         url('../font/OpenSans-Semibold.svg') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face{
    font-family: 'OpenSans';
    src: url('../font/OpenSans-Bold.woff2') format('woff2'),
         url('../font/OpenSans-Bold.woff') format('woff'),
         url('../font/OpenSans-Bold.ttf') format('ttf'),
         url('../font/OpenSans-Bold.eot') format('eot'),
         url('../font/OpenSans-Bold.svg') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

html{
    -webkit-text-size-adjust: 100%;
}

body{
    background: #FFF;
    color: #575757;
    font-size: 12px;
    line-height: 12px;
    font-family: 'OpenSans', Helvetica, Arial, sans-serif;
    margin: 0;
    font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
}

body a{
    text-decoration: none;
    color: #03D9CD;
    transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -webkit-transition: all 200ms ease-in-out;
}

body a:hover{
    color: #03B9AD;
}

input,
select,
textarea,
button{
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    font-family: 'OpenSans', Helvetica, Arial, sans-serif;
    box-sizing: border-box;
    border: none;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -webkit-transition: all 200ms ease-in-out;
}

textarea{
    resize: none;
}

input:focus,
select:focus,
textarea:focus{
    outline: none;
}

button{
    cursor: pointer;
}

.svg{
    display: inline-block;
    visibility: hidden;
    width: 100%;
    margin: -2px 0 0 0;
    transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -webkit-transition: all 200ms ease-in-out;
}

.svg.replaced-svg{
    visibility: visible;
}

ul.top-grad{
    position: relative;
    overflow: auto;
    z-index: 1;
}

ul.top-grad li{
    float: left;
    height: 10px;
}

ul.top-grad li:nth-child(1){
    width: 70%;
    background: #004BBB;
}

ul.top-grad li:nth-child(2){
    width: 30%;
    background: #03D9CD;
}

/* ul.top-grad li:nth-child(3){
    width: 15%;
    background: #F3C615;
} */

section{
    max-width: 1360px;
    margin: 0 auto;
    padding: 30px 20px;
    box-sizing: border-box;
}

section.for-footer{
    position: relative;
    padding: 0 20px;
    z-index: 1;
}

footer{
    border-top: 1px solid #E5E5E5;
    padding: 30px 0;
}

footer > ul{
    margin: -20px;
    padding: 0 80px;
}

footer > ul > li{
    padding: 20px;
}

footer > ul > li:first-child{
    width: 66%;
}

footer > ul > li:last-child{
    width: 34%;
}

footer > ul > li > div{
    color: #004BBB;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    width: 45px;
    float: left;
}

footer > ul > li > ul{
    margin: -10px -10px -10px 55px;
}

footer > ul > li > ul > li{
    position: relative;
    font-size: 10px;
    line-height: 14px;
    padding: 10px;
}

footer > ul > li:last-child > ul > li{
    width: 50%;
}

footer > ul > li:first-child > ul > li{
    padding-left: 34px;
}

footer > ul > li:first-child > ul > li:first-child{
    width: 30%;
}

footer > ul > li:first-child > ul > li:last-child{
    width: 70%;
}

footer > ul > li > ul > li strong{
    font-weight: 600;
}

footer > ul > li > ul > li .svg{
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    color: #004BBB;
    width: 14px;
    height: 18px;
    margin: 0 0 0 -24px;
}

.overlay{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 3;
}

.overlay[disabled]{
    pointer-events: none;
}

.overlay > img{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 155px;
    height: 155px;
    animation: rotate-spin 1s infinite linear;
}

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

.popup{
    position: fixed;
    background: #FFF;
    top: 50%;
    transform: translate(0, -50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    border-radius: 8px;
    max-width: 600px;
    padding: 58px;
    box-sizing: border-box;
    z-index: 9;
}

.popup .close-pop{
    position: absolute;
    top: 20px;
    right: 20px;
    color: #757575;
}

.popup .pop-head .close-pop{
    top: 30px;
    right: 30px;
}

.popup .close-pop:hover{
    color: #0EABBC;
}

.popup .close-pop .svg{
    width: 14px;
    height: 14px;
}

.popup .pop-head{
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    margin: -34px -38px 15px -38px;
}

.popup .pop-head.use-underline{
    padding: 0 30px 30px 30px;
    margin: -28px -58px 20px -58px;
    border-bottom: 1px solid #E0E0E0;
    color: #000000;
    font-weight: 600;
}

.popup .content-dialogue{
    text-align: center;
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
}

.popup .content-dialogue span{
    display: block;
    margin: 16px 0;
    font-size: 17px;
    line-height: 23px;
    font-weight: normal;
}

.popup .content-callin{
    text-align: center;
    font-size: 24px;
    line-height: 28px;
    margin: -34px 0 0 0;
}

.popup .content-callin img{
    display: block;
    width: 162px;
    height: 162px;
    margin: 24px auto 8px auto;
    object-fit: cover;
}

.popup .content-callin img.img-user{
    border-radius: 162px;
}

.popup .content-callin strong{
    font-size: 28px;
    line-height: 32px;
    font-weight: 600;
}

.popup .content-onboard{
    text-align: center;
    font-size: 17px;
    line-height: 23px;
}

.popup .content-onboard img{
    display: block;
    object-fit: contain;
    height: 264px;
    width: 100%;
    margin: 0 0 25px 0;
}

.popup .content-onboard strong{
    display: block;
    margin: 0 0 15px 0;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
}

.popup .content-form ul.forming{
    margin: 0 -38px -38px -38px;
}

.popup .content-form ul.forming li{
    width: 100%;
}

.popup .content-form ul.forming li label{
    color: #404040;
    font-size: 16px;
    line-height: 22px;
}

.popup .content-form ul.forming li label span{
    display: block;
    color: #9E9E9E;
    margin: 5px 0 0 0;
    font-size: 12px;
    line-height: 16px;
}

.popup .content-form ul.forming li .btn.btn-blue{
    float: right;
    width: 180px;
    box-sizing: border-box;
}

.popup .content-form ul.forming li .as-chev{
    pointer-events: none;
    position: absolute;
    right: 43px;
    width: 20px;
    height: 12px;
    top: 96px;
    border-right: 0;
    padding: 0;
    margin: 0;
    color: #0EABBC;
    z-index: 1;
}

.popup .content-form ul.forming li .select2-container--default .select2-selection--single{
    font-size: 16px;
}

.popup .content-form ul.forming li .select2-container--default .select2-selection--single .select2-selection__rendered{
    padding-right: 75px;
}

.popup ul.dialogue{
    padding: 48px 65px 0 65px;
    margin: -5px;
}

.popup ul.dialogue.dia-call{
    padding: 30px 65px 0 65px;
    margin: -5px -5px -28px -5px;
}

.popup ul.dialogue.dialogue-single{
    padding: 20px 65px 0 65px;
}

.popup ul.dialogue > li{
    padding: 5px;
    width: 50%;
}

.popup ul.dialogue.dialogue-single > li{
    width: 100%;
}

.popup ul.dialogue.dia-call > li{
    text-align: center;
    font-size: 20px;
    line-height: 27px;
}

.popup ul.dialogue.dia-call > li a{
    width: 112px;
    margin: 0 auto 5px auto;
    border-radius: 56px;
    padding: 18px 12px;
}

.popup ul.dialogue.dia-call > li a:hover{
    color: #FFF;
}

.popup ul.dialogue.dia-call > li a .svg{
    width: 28px;
    height: 20px;
    margin: 0;
    vertical-align: middle;
}

.popup ul.onboard{
    margin: 50px -28px -33px -28px;
}

.popup ul.onboard > li{
    width: 50%;
}

.popup ul.onboard > li a{
    display: block;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #004BBB;
}

.popup ul.onboard > li a:hover{
    color: #03D9CD;
}

.popup ul.onboard > li:last-child a{
    text-align: right;
}

.popup ul.onboard > li a .svg{
    width: 12px;
    height: 8px;
}

.popup ul.onboard > li:first-child a .svg{
    transform: rotate(90deg) translate(-1px, 0);
    margin: 0 15px 0 0;
}

.popup ul.onboard > li:last-child a .svg{
    transform: rotate(-90deg) translate(1px, 0);
    margin: 0 0 0 15px;
}

.popup .forming{
    margin: 10px -15px -44px -15px;
}

.popup .forming textarea{
    font-size: 12px;
    line-height: 16px;
    padding: 16px;
}

.splash-msg{
    position: fixed;
    max-width: 620px;
    margin: 0 auto;
    padding: 16px 43px 16px 16px;
    z-index: 2;
    top: 120px;
    left: 0;
    right: 0;
    color: #43936C;
    background: #D9E9E2;
    border: 1px solid #43936C;
    font-size: 16px;
    line-height: 24px;
    border-radius: 4px;
    box-sizing: border-box;
}

.splash-msg.msg-error{
    color: #CB3A31;
    background: #FFF4F2;
    border: 1px solid #CB3A31;
}

.splash-msg a{
    position: absolute;
    right: 16px;
    top: 50%;
    color: #43936C;
    transform: translate(0, -50%);
}

.splash-msg.msg-error a{
    color: #CB3A31;
}

.splash-msg a .svg{
    width: 11px;
    height: 11px;
}

.splash-msg a:hover{
    color: #23734C;
}

ul.floating{
    overflow: auto;
}

ul.floating > li{
    float: left;
    box-sizing: border-box;
}

ul.forming{
    margin: -15px;
}

ul.forming > li{
    position: relative;
    padding: 15px;
}

ul.forming > li > ul.otp{
    margin: -7.5px;
    overflow: auto;
}

ul.forming > li > ul.otp > li{
    float: left;
    padding: 7.5px;
    box-sizing: border-box;
}

ul.forming > li > ul.otp > li > input{
    width: 55px;
    height: 69px;
    padding: 0;
    text-align: center;
    font-size: 36px;
    /* color: #E26B26; */
    box-sizing: border-box;
}

ul.forming label{
    display: block;
    font-weight: 600;
    color: #616161;
    font-size: 18px;
    line-height: 22px;
    margin: 0 0 16px 0;
}

ul.forming .as-label{
    position: absolute;
    pointer-events: none;
    left: 45px;
    font-size: 18px;
    line-height: 18px;
    padding: 0 10px 0 0;
    top: 74px;
    border-right: 1px solid #616161;
}

ul.forming .as-label-right{
    position: absolute;
    top: 70px;
    right: 49px;
    color: #0EABBC;
    width: auto;
}

ul.forming input,
ul.forming select,
ul.forming textarea{
    color: #616161;
    border: 1px solid #9E9E9E;
    height: 57px;
    border-radius: 4px;
    font-size: 18px;
    padding: 0 30px;
    background: #F9FAFA;
}

ul.forming textarea{
    padding: 15px 30px;
    height: 170px;
}

ul.forming li.has-label input,
ul.forming li.has-label select,
ul.forming li.has-label textarea{
    padding: 0 30px 0 80px;
}

ul.forming li.has-label-right input,
ul.forming li.has-label-right select,
ul.forming li.has-label-right textarea{
    padding: 0 80px 0 30px;
}

ul.forming input:hover,
ul.forming select:hover,
ul.forming textarea:hover{
    border: 1px solid #004BBB;
}

ul.forming input.correct,
ul.forming select.correct,
ul.forming textarea.correct{
    border: 2px solid #004BBB;
    background: rgba(3, 217, 205, .05);
}

ul.forming input.error,
ul.forming select.error,
ul.forming textarea.error{
    border: 1px solid #CB3A31;
    background: rgba(203, 58, 49, .05);
}

ul.forming input:focus,
ul.forming select:focus,
ul.forming textarea:focus{
    box-shadow: 0 0 5px #004BBB;
}

ul.forming .select2-container{
    position: relative;
    z-index: 0;
}

ul.forming .select2-container--default .select2-selection--single{
    border: 1px solid #9E9E9E;
    background: #F9FAFA;
    height: 57px;
}

ul.forming .select2-container--default.correct .select2-selection--single{
    border: 2px solid #004BBB;
    background: rgba(3, 217, 205, .05);
}

ul.forming .select2-container--default.error .select2-selection--single{
    background: #FFF4F2;
    border: 2px solid #CB3A31;
}

ul.forming .select2-container--default .select2-selection--single:hover{
    border-color: #004BBB;
}

ul.forming .select2-container--default .select2-selection--single:focus{
    outline: none;
}

ul.forming .select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height: 57px;
    color: #616161;
    padding-left: 30px;
    padding-right: 30px;
}

ul.forming .select2-container--default.correct .select2-selection--single .select2-selection__rendered{
    line-height: 55px;
    color: #004BBB;
}

ul.forming .select2-container--default.error .select2-selection--single .select2-selection__rendered{
    line-height: 55px;
    color: #CB3A31;
}

ul.forming .select2-container--default .select2-selection--single .select2-selection__arrow{
    display: none;
}

ul.forming .select2-container--default .select2-selection--single .select2-selection__clear{
    float: none;
    position: absolute;
    right: 0;
    height: 53px;
    width: 53px;
    margin-right: 56px;
    font-size: 26px;
    color: #CB3A31;
}

.ui-widget.ui-widget-content{
    background: #F9FAFA;
    border: 1px solid #C2CFE0;
}

.ui-menu{
    font-family: 'OpenSans', Helvetica, Arial, sans-serif;
    border-radius: 8px;
    overflow: hidden;
}

.ui-menu .ui-menu-item-wrapper{
    font-size: 12px;
    line-height: 16px;
    padding: 10px 20px;
}

/* .ui-menu .ui-menu-item .ui-menu-item-wrapper:hover, */
.ui-menu .ui-menu-item .ui-menu-item-wrapper.ui-state-active{
    color: #616161;
    border-color: transparent;
    background: rgba(3, 217, 205, .05);
}

.select2-dropdown{
    background: #F9FAFA;
    border: 1px solid #C2CFE0;
}

.select2-search--dropdown{
    padding: 10px;
    border-bottom: 1px solid #C2CFE0;
}

.select2-container--default .select2-search--dropdown .select2-search__field{
    border-radius: 4px;
    border: 1px solid #9E9E9E;
}

.select2-results__option{
    font-size: 12px;
    line-height: 16px;
    padding: 10px 20px;
    transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -webkit-transition: all 200ms ease-in-out;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
    color: #616161;
    background: rgba(0, 75, 187, .1);
}

.select2-container--default .select2-results__option--selected{
    color: #FFF;
    background: #004BBB;
}

ul.forming > li.for-button{
    text-align: right;
}

ul.forming button{
    display: inline-block;
    height: 45px;
    width: 154px;
}

ul.forming .error-msg{
    position: relative;
    margin: 15px 0 0 0;
    font-size: 14px;
    line-height: 19px;
    color: #CB3A31;
    padding: 0 0 0 15px;
}

ul.forming .error-msg strong{
    position: absolute;
    left: 0;
    top: 0;
}

.btn{
    color: #FFF;
    border-radius: 100px;
    font-weight: 600;
    font-size: 18px;
    background: transparent;
}

a.btn{
    display: block;
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    line-height: 18px;
}

.btn.btn-blue{
    background: #004BBB;
}

.btn.btn-blue:hover{
    color: #FFF;
    background: #03D9CD;
}

.btn.btn-red{
    background: #CB3A31;
}

.btn.btn-red:hover{
    background: #AB1A11;
}

.btn.btn-grey{
  background: #3C4043;
}

.btn.btn-grey:hover{
  background: #2a2a2c;
}

.btn.btn-green{
    background: #43936C;
}

.btn.btn-green:hover{
    background: #23734C;
}

.btn.btn-outline{
    background: #FFF;
    color: #004BBB;
    border: 1px solid #004BBB;
}

.btn.btn-outline:hover{
    color: #03D9CD;
    border: 1px solid #03D9CD;
}

.btn.btn-plain{
    color: #CB3A31;
}

.btn.btn-plain:hover{
    color: #AB1A11;
}

.btn.btn-plain.use-blue{
    color: #004BBB;
}

.btn.btn-plain.use-blue:hover{
    color: #03D9CD;
}

.btn[disabled]{
    pointer-events: none;
    background: #BDBDBD;
}

.sec-login{
    max-width: 520px;
    padding-bottom: 90px;
}

.sec-login img{
    display: block;
    width: 324px;
    margin: 70px 0;
}

.sec-login .title-login{
    font-size: 40px;
    line-height: 55px;
    font-weight: bold;
    color: #0EABBC;
    margin: 0 0 50px 0;
}

.sec-login .forgot-pass{
    font-size: 14px;
    line-height: 19px;
    margin: 15px 0 0 0;
}

.sec-login .forgot-pass > a{
    font-weight: 600;
}

.sec-login .forgot-pass > a[disabled]{
    color: #575757;
    opacity: .5;
    pointer-events: none;
}

.sec-login ul.forming li.for-pass > a{
    position: absolute;
    right: 50px;
    top: 72px;
    width: 25px;
    height: 18px;
}

.sec-login ul.forming li.for-pass input{
    padding-right: 75px;
}

.clear,
ul.clear-odd > li:nth-child(odd),
ul.clear-even > li:nth-child(even){
    clear: both;
}

@media screen and (min-width: 1025px) and (max-width: 1600px){}

@media screen and (min-width: 768px) and (max-width: 1024px){}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){}

@media screen and (max-width: 767px){
    footer > ul{
        padding: 0;
    }

    footer > ul > li:first-child,
    footer > ul > li:last-child,
    footer > ul > li:last-child > ul > li,
    footer > ul > li:first-child > ul > li:first-child,
    footer > ul > li:first-child > ul > li:last-child{
        width: 100%;
    }

    .popup{
        padding: 30px;
        border-radius: 0;
    }

    .popup ul.dialogue,
    .popup ul.dialogue.dia-call{
        padding: 48px 0 0 0;
        margin: -5px;
    }

    .popup .content-callin{
        margin: 0;
    }

    .splash-msg{
        margin: 0 20px;
    }

    .popup .content-form ul.forming{
        margin: 0 -15px -15px -15px;
    }

    .popup .pop-head.use-underline{
        padding: 30px;
        margin: -30px -30px 15px -30px;
    }

    .popup .content-form ul.forming li .as-chev{
        top: 110px;
    }
}

@media screen and (max-width: 767px) and (orientation: landscape){}

@media screen and (max-width: 767px) and (orientation: portrait){}

/*
@media screen and (min-width: 1025px) and (max-width: 1600px){}

@media screen and (min-width: 768px) and (max-width: 1024px){}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){}

@media screen and (max-width: 767px){}

@media screen and (max-width: 767px) and (orientation: landscape){}

@media screen and (max-width: 767px) and (orientation: portrait){}
*/