@import'https://fonts.googleapis.com/css?family=Roboto:300,400,700';

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block
}

audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline
}

    audio:not([controls]) {
        display: none;
        height: 0
    }

[hidden], template {
    display: none
}

.hidden {
    display: none !important;
    visibility: hidden !important;
}

.error-document {
    color: red;
    margin: 0;
}

.error {
    color: red;
    margin: 0;
}

.error-mail {
    color: red;
    margin: 0;
}

a {
    background-color: transparent
}

    a:active, a:hover {
        outline: 0
    }

;abbr[title] {
    border-bottom: 1px dotted
}

b, strong {
    font-weight: 700
}

@if $legacy_browser_support {
    blockquote {
        margin: 1em 40px
    }
}

dfn {
    font-style: italic
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

@if $legacy_browser_support {
    h2 {
        font-size: 1.5em;
        margin: .83em 0
    }

    h3 {
        font-size: 1.17em;
        margin: 1em 0
    }

    h4 {
        font-size: 1em;
        margin: 1.33em 0
    }

    h5 {
        font-size: .83em;
        margin: 1.67em 0
    }

    h6 {
        font-size: .67em;
        margin: 2.33em 0
    }
}

mark {
    background: #ff0;
    color: #000
}

@if $legacy_browser_support {
    q:before, q:after {
        content: '';
        content: none
    }
}

small {
    font-size: 80%
}

.principal-mensajes {
    width: 100%;
    margin-top: 20px;
}

.listadoMensajes {
    width:100%;
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 1em 40px
}

hr {
    box-sizing: content-box;
    height: 0
}

pre {
    overflow: auto
}

code, kbd, pre, samp {
    font-family: monospace,monospace;
    font-size: 1em
}

button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;

    @if $legacy_browser_support {
        vertical-align: baseline
    }
}

button {
    overflow: visible
}

button, select {
    text-transform: none
}

button, html input[type=button], input[type=reset], input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer
}

    button[disabled], html input[disabled] {
        cursor: default
    }

    button::-moz-focus-inner, input::-moz-focus-inner {
        border: 0;
        padding: 0
    }

input {
    line-height: normal
}

    input[type=checkbox], input[type=radio] {
        box-sizing: border-box;
        padding: 0
    }

    input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
        height: auto
    }

    input[type=search] {
        -webkit-appearance: textfield;
        box-sizing: content-box
    }

        input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
            -webkit-appearance: none
        }

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}

legend {
    border: 0;
    padding: 0;

    @if $legacy_browser_support {
        white-space: normal
    }
}

.footer {
    font-family: "Helvetica";
    font-style: normal;
    width: 100%;
    position: fixed;
    bottom: 0;
    color: #eceaea;
    font-size: 16px;
    z-index: 30;
    height: 39px;
    background-color: rgba(0, 0, 0, 0.58);
    display: inline-flex;
}

.footer-movil {
    display: none;
}

.titulo-movil {
    font-size: 20px !important;
}

.logo-footer {
    float: right;
    width: 15%;
    padding-top: 4px;
    cursor: pointer;
}

.only-mobile {
    display: none;
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: 700
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

td, th {
    padding: 0;
    font-size: 14px !important;
}

.homeHero-rowList {
    width: 100%;
    height: 80px;
    border-bottom: 1px solid rgba(0,0,0,.2)
}

.homeHero__txtList {
    color: #000;
    width: calc(100% - 60px);
    text-align: left
}

.registro-input {
    height: 25px !important;
    margin: 0 0 0 0px !important;
}

.registro-item-aseguradora {
    width: calc(100% - 12px);
    height: 41px;
    padding: 0 5px;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 7px;
    outline: none;
    margin-right: 5px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    position: relative;
    background: #fff;
}

.btn-light-blue {
    color: #fff !important;
    background-color: #007bff;
    border-color: #007bff;
}

.btn-light-red {
    color: #fff !important;
    background-color: red;
    border-color: #007bff;
}

.btn-light-white {
    color: #007bff !important;
    background-color: #fff;    
    border: 1px solid #007bff !important;
}

.btn-light-white:hover {
    color: #fff !important;
    background-color: #007bff;
    border: 1px solid #007bff !important;
}

.btn-green {
    background-image: linear-gradient(-180deg,#7ed321 3%,#5fa315 100%);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.19),inset 1px 1px 1px 0 rgba(255,255,255,.15);
    border-radius: 48px;
    color: #fff;
    font-size: 1.2em;
    padding: 10px 25px;
    font-weight: 300;
    text-shadow: 1px 1px 2px rgba(0,0,0,.2)
}

.btn-blue {
    color: #fff;
    background: #003A89;
    border-radius: 3px;
    font-size: 1.3em;
    font-weight: 400;
    height: 45px;
    line-height: 45px;
    padding: 0 20px;
    display: inline-block;
    cursor: pointer
}

    .btn-blue:hover {
        background: #0069d9;
        color: #fff;
    }

.latMenu {
    height: 100vh;
    width: 20%;
    background: #3e70cf;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    color: #fff;
    transition: .3s ease-out;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%)
}

.latMenu__btnClose {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    background: url(../images/close.svg) center no-repeat;
    transition: .3s ease-out
}

    .latMenu__btnClose:hover {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }

.latMenu__tit {
    font-size: 1.2em;
    width: cacl(100% - 30px);
    padding: 10px 0 10px 10px
}

.latMenu-wrapBtn {
    width: 100%
}

.latMenu-wrapBtn__btn {
    width: 90%;
    display: block;
    font-size: 1em;
    border-bottom: 1px solid rgba(255,255,255,.2);
    padding: 10px 5%;
    color: #fff
}

    .latMenu-wrapBtn__btn:hover {
        background: #000;
        background: rgba(0,0,0,.2)
    }

.menu-open {
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

.header {
    width: 96%;
    padding: 0 2%;
    height: 52px;
    overflow: auto;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    background: #454ca4;
    background: linear-gradient(to bottom,#454ca4 0,#191c41 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#454ca4',endColorstr='#191c41',GradientType=0)
}

.header__btn {
    width: 27px;
    height: 19px;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: justify;
    justify-content: space-between;
    cursor: pointer
}

    .header__btn div {
        background: #fff;
        height: 3px;
        width: 100%
    }

.header-wrap {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    height: 100%
}

.header-wrap-infoUser {
    height: 100%;
    color: #fff;
    border-left: 1px solid rgba(255,255,255,.2);
    padding-left: 20px;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center
}

.header-wrap-infoUser__name {
    font-weight: 400;
    font-size: 1em;
    margin: 4px 0
}

.header-wrap-infoUser__close {
    color: #fff;
    font-size: .8em;
    font-weight: 300;
    opacity: .9
}

    .header-wrap-infoUser__close:hover {
        text-decoration: underline
    }

.header-wrap-noti {
    height: 100%;
    color: #fff;
    margin-right: 10px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    cursor: pointer
}

.header-wrap-noti__icon {
    display: inline-block;
    width: 17px;
    height: 21px;
    background: url(../images/header/icon.svg) center no-repeat
}

.header-wrap-noti__num {
    margin-left: 5px
}

.header-wrap__btnClose {
    color: #fff;
    cursor: pointer;
    float: right;
    margin-top: 5px
}

    .header-wrap__btnClose span {
        display: inline-block;
        width: 20px;
        height: 20px;
        background: url(../images/close.svg) center no-repeat;
        vertical-align: middle;
        margin-left: 10px;
        transition: .3s ease-out
    }

    .header-wrap__btnClose:hover span {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }

.header-wrap_reg {
    width: 100%;
    display: block;
    height: auto
}

.header-wrap__back {
    cursor: pointer;
    color: #fff;
    float: left
}

    .header-wrap__back span {
        display: inline-block;
        width: 15px;
        height: 30px;
        vertical-align: middle;
        background: url(../images/back.svg) center no-repeat;
        margin-right: 10px
    }

.terms {
    width: 80%;
    margin: auto
}

.terms__tit {
    font-size: 1.5em;
    font-weight: 700;
    margin: 10px 0
}

.noti {
    width: 80%;
    margin: auto
}

.noti__tit {
    font-size: 2.1em;
    font-weight: 700;
    margin: 20px 0 5px
}

.noti__subTit {
    margin: 3px 0 10px;
    font-size: 1.3em
}

.noti__item {
    width: 100%;
    border-bottom: 1px solid rgba(0,0,0,.1);
    margin: 15px 0 0;
    padding: 0 0 15px;
    cursor: pointer
}

    .noti__item:hover {
        text-decoration: underline
    }

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0
}

    .slick-list:focus {
        outline: none
    }

    .slick-list.dragging {
        cursor: pointer;
        cursor: hand
    }

.slick-slider .slick-track, .slick-slider .slick-list {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0)
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block
}

    .slick-track:before, .slick-track:after {
        display: table;
        content: ''
    }

    .slick-track:after {
        clear: both
    }

.slick-loading .slick-track {
    visibility: hidden
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px
}

[dir=rtl] .slick-slide {
    float: right
}

.slick-slide img {
    display: block
}

.slick-slide.slick-loading img {
    display: none
}

.slick-slide.dragging img {
    pointer-events: none
}

.slick-initialized .slick-slide {
    display: block
}

.slick-loading .slick-slide {
    visibility: hidden
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent
}

.slick-arrow.slick-hidden {
    display: none
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

    .animated.infinite {
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite
    }

    .animated.hinge {
        -webkit-animation-duration: 2s;
        animation-duration: 2s
    }

    .animated.flipOutX, .animated.flipOutY, .animated.bounceIn, .animated.bounceOut {
        -webkit-animation-duration: .75s;
        animation-duration: .75s
    }

@-webkit-keyframes swing {
    20% {
        -webkit-transform: rotate3d(0,0,1,15deg);
        transform: rotate3d(0,0,1,15deg)
    }

    40% {
        -webkit-transform: rotate3d(0,0,1,-10deg);
        transform: rotate3d(0,0,1,-10deg)
    }

    60% {
        -webkit-transform: rotate3d(0,0,1,5deg);
        transform: rotate3d(0,0,1,5deg)
    }

    80% {
        -webkit-transform: rotate3d(0,0,1,-5deg);
        transform: rotate3d(0,0,1,-5deg)
    }

    to {
        -webkit-transform: rotate3d(0,0,1,0deg);
        transform: rotate3d(0,0,1,0deg)
    }
}

@keyframes swing {
    20% {
        -webkit-transform: rotate3d(0,0,1,15deg);
        transform: rotate3d(0,0,1,15deg)
    }

    40% {
        -webkit-transform: rotate3d(0,0,1,-10deg);
        transform: rotate3d(0,0,1,-10deg)
    }

    60% {
        -webkit-transform: rotate3d(0,0,1,5deg);
        transform: rotate3d(0,0,1,5deg)
    }

    80% {
        -webkit-transform: rotate3d(0,0,1,-5deg);
        transform: rotate3d(0,0,1,-5deg)
    }

    to {
        -webkit-transform: rotate3d(0,0,1,0deg);
        transform: rotate3d(0,0,1,0deg)
    }
}

.swing {
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing
}

.home-hero {
    width: 100%;
    height: 100vh;
    min-height: 500px;
    background: url(../images/bg-hero.jpg) center no-repeat;
    background-size: cover;
    overflow: auto;
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
}

.home-hero-inner {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    color: #fff;
    position: absolute;
    width: 100%;
    height: auto
}

.home-hero-tit {
    font-size: 3em;
    margin: 0;
    text-align: center
}

.home-hero-txt {
    font-size: 1em;
    text-align: center
}

.home-hero-wrap-btns {
    width: 55%;
    margin: auto;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center
}

.home-hero-btn {
    display: inline-block;
    margin: 10px;
    text-align: center
}

.home-hero-logo {
    position: absolute;
    top: 3%;
    left: 3%
}

.home-descrip {
    width: 100%;
    height: auto;
    padding: 10% 0;
    background: #f8f8f8;
    text-align: center
}

.home-descrip-tit {
    font-size: 2em;
    color: #000
}

.home-descrip-txt {
    font-size: 1em;
    color: #646464;
    width: 50%;
    margin: auto
}

.home-slide {
    width: 100%;
    height: auto;
    margin: 3% 0;
    border-bottom: 1px solid #ccc;
    overflow: hidden
}

.home-slide-tit, .home-slide-txt {
    text-align: center;
    color: #000
}

.home-slide-tit {
    font-size: 2em;
    font-weight: 700;
    margin: 0
}

.home-slide-txt {
    color: #646464
}

.home-slide-wrap {
    width: 80%;
    margin: 40px auto
}

.slick-dots {
    padding: 0;
    text-align: center
}

    .slick-dots li {
        display: inline-block
    }

        .slick-dots li button {
            text-indent: -9999px;
            border: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin: 5px;
            outline: none;
            background: #646464;
            transition: .3s ease-out
        }

            .slick-dots li button:hover {
                background: #2b2c76
            }

.slick-active button {
    background: #2b2c76 !important
}

.slide-item .wrap-img {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    overflow: hidden;
    float: left;
    margin-right: 20px
}

    .slide-item .wrap-img img {
        width: 100%;
        height: 100%
    }

.slide-item .wrap-txt {
    float: left;
    width: calc(100% - 240px)
}

    .slide-item .wrap-txt .tit {
        font-weight: 700;
        font-size: 2em
    }

    .slide-item .wrap-txt .txt {
        color: #646464;
        font-size: 1em
    }

.allies {
    margin: 50px 0
}

.allies-tit {
    text-align: center;
    font-size: 2em
}

.allies-wrap {
    width: 80%;
    margin: 50px auto;
    text-align: center
}

    .allies-wrap img {
        display: inline-block
    }

.team {
    text-align: center;
    padding: 80px 0;
    background: #f8f8f8
}

.team-tit {
    text-align: center;
    font-size: 2em;
    margin: 0
}

.team-txt {
    font-size: 1em;
    margin: 0
}

.team .inner-slide {
    width: 80%;
    margin: 50px auto
}

.team-slide-item {
    width: 135px
}

    .team-slide-item .wrap-img {
        width: 135px;
        height: 135px;
        border-radius: 50%;
        overflow: hidden;
        margin: auto
    }

        .team-slide-item .wrap-img img {
            width: 100%;
            height: 100%
        }

    .team-slide-item .name {
        font-size: 1.2em;
        display: block;
        margin: 5px 0
    }

    .team-slide-item .divider {
        width: 80%;
        height: 1px;
        margin: 5px auto;
        background: #e3e3e3;
        display: block
    }

    .team-slide-item .txt {
        display: block
    }

.login {
    width: 100%;
    height: 100vh;
    min-height: 500px;
    position: relative;
    background: #454ca4;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(to bottom,#454ca4 0,#191c41 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#454ca4',endColorstr='#191c41',GradientType=0)
}

.login-logo {
    width: 50%
}

    .login-logo img {
        width: 300px;
        max-width: 100%;
        display: block;
        margin: auto
    }

.login-data {
    width: 50%
}

.login-data__label {
    display: block;
    font-size: 1.2em;
    font-weight: 400
}

.login-data__input {
    height: 50px;
    width: 50%;
    max-width: 100%;
    border: none;
    border-radius: 7px;
    margin: 10px 0;
    padding: 0 10px;
    color: #000;
    outline: none
}

.login-data__forgot {
    display: block;
    font-size: .8em;
    font-weight: 300
}

.login-data__btn {
    margin: 20px 0;
    display: inline-block
}

.login-data__tit {
    font-size: 1.5em
}

.login-logo-foot {
    position: absolute;
    bottom: 20px;
    right: 20px;
    max-height: 150px;
    max-width: 150px;
}

.inner-logo {
    position: absolute;
    top: 20px;
    right: 3%
}

.wrapIni {
    width: 100%;
    /*height: calc(100vh - 52px);*/
    min-height: 500px;
    background: url(../images/bg-doctor.jpg) left no-repeat;
    background-size: cover;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    position: relative
}

.wrapIni-col {
    width: 50%;
    height: auto
}

    .wrapIni-col:nth-of-type(1) {
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: center;
        justify-content: center
    }

    .wrapIni-col:nth-of-type(2) {
        border-left: 1px solid #ccc;
        padding-left: 20px
    }

.wrapDate {
    width: 94%;
    min-height: calc(100vh - 92px);
    min-height: 500px;
    padding: 20px 3%;
    background: #f8f8f8;
    position: relative
}

.wrapDate__tit {
    font-size: 2em;
    margin: 0;
    color: #000
}

.wrapDate__desc {
    font-size: 1em;
    margin: 5px 0
}

.wrapDate__subTit {
    font-size: 1em;
    font-weight: 700
}

.wrapDate-dateRow {
    width: calc(100% - 40px);
    height: auto;
    min-height: 120px;
    background: #fff;
    padding: 10px 20px;
    border-radius: 3px;
    border: 1px solid #000;
    border: 1px solid rgba(0,0,0,.2);
    margin-top: 20px;
    display: -webkit-box;
    display: flex
}

.wrapDate-dateRow-doc {
    height: 130px;
    margin-right: 20px
}

.wrapDate-dateRow-colTxt__tit {
    font-size: 2em;
    font-weight: 700;
    margin: 0
}

.wrapDate-dateRow-colTxt__txt {
    margin: 5px 0
}

.wrapDate-dateRow__titDate {
    font-size: 1.5em;
    color: #2b2c76;
    font-weight: 700
}

.wrapDate-dateRow-date_full {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column
}

.wrapDate-dateRow-doctorRow {
    display: -webkit-box;
    display: flex;
    margin-top: 10px
}

.wrapDate-dateRow-doctorRow-avatarDoc {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #979797;
    margin-right: 10px
}

    .wrapDate-dateRow-doctorRow-avatarDoc img {
        width: 100%;
        height: 100%
    }

.wrapDate-dateRow-doctorRow-infoDoc {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-flow: column;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-right: 50px
}

.wrapDate-dateRow-doctorRow-infoDoc__name {
    font-weight: 700;
    font-size: 1.2em
}

.wrapDate-dateRow-actions {
    margin: 20px 0 0
}

.wrapDate-dateRow-actions__btn {
    display: inline-block;
    color: #979797;
    padding: 10px 30px;
    border: 1px solid #979797;
    border-radius: 3px;
    margin: 0 10px
}

    .wrapDate-dateRow-actions__btn:hover {
        color: #2b2c76;
        border: 1px solid #2b2c76
    }

.pastDate {
    width: calc(100% - 20px);
    border: 1px solid #000;
    border: 1px solid rgba(0,0,0,.2);
    padding: 10px;
    border-radius: 3px;
    color: #000;
    background: #fff;
    margin: 20px 0 0
}

.pastDate__txt {
    color: #000;
    margin: 0
}

.pastDate__icon {
    width: 15px;
    height: 15px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px
}

.pastDate__icon_finish {
    background: url(../images/ok.svg) center no-repeat
}

.pastDate__icon_cancel {
    background: url(../images/fail.svg) center no-repeat
}

.dateScore {
    width: 94%;
    /*height: calc(100vh - 92px);*/
    min-height: 500px;
    padding: 20px 3%;
    background: #f8f8f8;
    position: relative
}

.dateScore__tit {
    font-size: 2em;
    margin: 0;
    color: #000
}

.dateScore__desc {
    font-size: 1em;
    margin: 5px 0
}

.dateScore__subTit {
    font-size: 1em;
    font-weight: 700
}

.dateScore-wrap {
    width: 100%;
    height: auto;
    min-height: 120px;
    background: #fff;
    border-radius: 3px;
    border: 1px solid #000;
    border: 1px solid rgba(0,0,0,.2);
    margin-top: 20px
}

.dateScore-wrap_empty {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 10px
}

    .dateScore-wrap_empty img {
        margin-right: 20px
    }

.dateScore-up {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-flow: row;
    margin: 20px
}

.dateScore-avatar {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #979797;
    margin-right: 10px
}

    .dateScore-avatar img {
        width: 100%;
        height: 100%
    }

.dateScore__doc {
    font-size: 1.2em;
    font-weight: 700
}

.dateScore__score {
    color: #03ca00;
    font-weight: 700;
    min-width: 80px;
    display: inline-block
}

.dateScore__star {
    display: inline-block;
    width: 20px;
    height: 17px;
    margin-right: 5px;
    background: url(../images/star.svg) center no-repeat;
    vertical-align: top
}

.dateScore__star_starFull {
    background: url(../images/star-full.svg) center no-repeat
}

.dateScore-wrapScore {
    margin-left: auto;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: end;
    align-items: flex-end;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column
}

.dateScore__txtScore {
    font-weight: 700;
    margin-right: 5px
}

.dateScore-down {
    width: calc(100% - 40px);
    height: 50px;
    margin: 0 0 20px;
    padding: 20px 20px 0;
    border-top: 1px solid rgba(0,0,0,.2);
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
}

.dateScore-down__iconPost {
    width: 27px;
    height: 25px;
    background: url(../images/post.svg) center no-repeat;
    margin: 20px
}

.dateScore__btn {
    margin-right: 10px
}

.chat {
    width: 100%;
    min-height: calc(100vh - 92px);
    height: auto;
    padding: 20px 0;
    background: #f8f8f8;
    position: relative
}

.chat__tit {
    font-size: 2em;
    margin: 0 0 0 3%;
    color: #000
}

.chat__desc {
    font-size: 1em;
    margin: 5px 0 0 3%
}

.chat-docRow {
    width: 94%;
    height: 95px;
    padding: 0 3%;
    border-top: 1px solid rgba(0,0,0,.2);
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    cursor: pointer;
    transition: .3s ease-out
}

    .chat-docRow:hover {
        background: #000;
        background: rgba(0,0,0,.2)
    }

    .chat-docRow:nth-of-type(1) {
        margin-top: 20px
    }

    .chat-docRow:last-of-type {
        border-bottom: 1px solid rgba(0,0,0,.2)
    }

.chat-docRow__avatarDoc {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #979797;
    margin-right: 10px
}

    .chat-docRow__avatarDoc img {
        width: 100%;
        height: 100%
    }

.chat-docRow__nameDoc {
    font-weight: 700
}

.chat-action {
    width: 94%;
    padding: 0 3%
}

.chat-action-row {
    width: 100%;
    display: -webkit-box;
    display: flex;
    margin-top: 20px
}

.chat-action-row__avatar {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px
}

    .chat-action-row__avatar img {
        width: 100%;
        height: 100%
    }

.chat-action-row__avatar-user {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 0 0 10px
}

    .chat-action-row__avatar-user img {
        width: 100%;
        height: 100%
    }

.chat-action-row__msm {
    width: 70%;
    padding: 10px;
    border: 1px solid #dedede;
    border-radius: 5px;
    background: #fff;
    -webkit-box-pack: start;
    justify-content: flex-start
}

.chat-action-row__date {
    font-size: .7em;
    margin: 7px 0 0;
    color: #000;
    color: rgba(0,0,0,.4)
}

.chat-action-row__date-user {
    text-align: right
}

.chat-action-row-user {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    flex-direction: row-reverse
}

.chat-box {
    width: 94%;
    padding: 0 3%;
    margin: 40px 0
}

.chat-box-txt {
    width: 90%;
    margin: auto;
    display: block;
    height: 43px;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #979797;
    outline: none
}

.chat-box__photo {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    cursor: pointer
}

    .chat-box__photo:hover {
        text-decoration: underline
    }

.chat-box__sendIcon {
    display: inline-block;
    width: 37px;
    height: 34px;
    margin-right: 10px;
    background: url(../images/pic.svg) center no-repeat
}

.chat-box-wrapSend {
    display: -webkit-box;
    display: flex;
    width: 90%;
    margin: 20px auto;
    -webkit-box-pack: justify;
    justify-content: space-between
}

.perfil-top {
    /*width: 94%;*/
    padding: 20px 3%;
    position: relative;
    z-index: 1;
    background: #f2f2f2;
    padding-bottom: 70px
}

.perfil-tabs {
    margin-top: -50px;
    position: relative;
    z-index: 2
}

.perfil-tabs-wrap {
    display: -webkit-box;
    display: flex;
    width: 90%;
    margin: auto
}

.perfil-tabs-wrap__btn {
    display: block;
    padding: 0 20px;
    height: 50px;
    line-height: 50px;
    border-radius: 7px 7px 0 0;
    font-weight: 700;
    cursor: pointer;
    transition: .3s ease-out;
    margin: 0 5px
}

    .perfil-tabs-wrap__btn:hover {
        background: #fff
    }

    .perfil-tabs-wrap__btn.active {
        background: #fff
    }

.perfil-tabs-content {
    width: 90%;
    margin: auto;
    color: #000
}

.perfil-tabs-innerContent:last-of-type {
    display: none
}

.perfil-tabs-upData {
    width: 100%;
    margin: 20px 0 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
}

.perfil-tabs__wrapPhoto {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #979797;
    margin-right: 20px
}

    .perfil-tabs__wrapPhoto img {
        width: 100%;
        height: 100%
    }

.perfil-tabs__btnPhoto {
    color: #646464;
    padding: 10px 30px;
    border: 1px solid #646464;
    border-radius: 7px;
    transition: .3s ease-out
}

    .perfil-tabs__btnPhoto:hover {
        color: #2b2c76;
        border: 1px solid #2b2c76
    }

.perfil-tabs-form {
    margin: 20px 0 50px
}

    .perfil-tabs-form label {
        display: block;
        font-weight: 700
    }

    .perfil-tabs-form input, .perfil-tabs-form select {
        width: 100%;
        height: 34px;
        padding: 5px;
        border: 1px solid #000;
        border: 1px solid rgba(0,0,0,.2);
        border-radius: 3px;
        margin: 5px 0 20px;
        outline: none
    }

    .perfil-tabs-form select {
        background: none;
        width: 101%
    }

.divider {
    width: 100%;
    height: 1px;
    background: #000;
    background: rgba(0,0,0,.2);
    margin: 20px 0
}

.moreData {
    width: 94%;
    height: calc(100vh - 92px);
    min-height: 500px;
    padding: 20px 3%;
    position: relative
}

.moreData__tit {
    font-size: 2em;
    margin: 20px 0;
    color: #000
}

.moreData__subTit {
    font-weight: 700;
    margin-bottom: 20px
}

.moreData-dropDown {
    padding: 10px;
    width: calc(100% - 20px);
    border: 1px solid #000;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 3px;
    margin-bottom: 10px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    position: relative
}

    .moreData-dropDown span {
        position: absolute;
        display: block;
        width: 30px;
        height: 10px;
        background: url(../images/down.svg) center no-repeat;
        right: 20px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%)
    }

.moreData__label {
    font-weight: 700;
    margin: 10px 0;
    display: inline-block
}

.moreData__avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px
}

    .moreData__avatar img {
        width: 100%;
        height: 100%
    }

.moreData-form select {
    width: 100%;
    border: 1px solid #000;
    border: 1px solid rgba(0,0,0,.2);
    background: #fff;
    height: 45px;
    border-radius: 3px;
    outline: none
}

.moreData-form input[type=text] {
    width: calc(100% - 12px);
    padding: 0 5px;
    border: 1px solid #000;
    border: 1px solid rgba(0,0,0,.2);
    height: 45px;
    border-radius: 3px;
    outline: none
}

.checkData {
    /*width: 94%;
    min-height: calc(100vh - 92px);
    min-height: 500px;*/
    padding: 20px 3%;
    position: relative
}

.checkData-mainWrap {
    display: -webkit-box;
    display: flex;
    margin-top: 40px
}

.checkData-form {
    width: 50%
}

.checkData-map {
    width: 50%
}

.checkData__ .checkData__tit {
    font-size: 2em;
    margin: 20px 0;
    color: #000
}

.checkData__label {
    font-weight: 700
}

.checkData__txt {
    padding: 10px;
    width: calc(100% - 40px);
    border: 1px solid #000;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 3px;
    margin: 3px 10px 10px 0
}

.checkData__btnSend {
    margin-right: 10px
}

.checkData-map iframe {
    width: 90%;
    height: 252px
}

.checkData__mapTit {
    font-weight: 700;
    margin: 0 0 10px
}

.checkData__mapTxt {
    margin: 0 0 10px
}

.checkAlert {
    /*width: calc(100% - 20px);*/
    padding: 10px;
    background: #f00;
    color: #fff;
    font-weight: 700
}

.checkAlert_green {
    background: #00be4f
}

.wrapModal {
    position: fixed;
    z-index: 30;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: #000;
    background: rgba(0,0,0,.5);
    min-height: 500px
}

.wrapModal-center {
    position: absolute;
    width: 100%;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.wrapModal-inner {
    width: 50%;
    min-height: 250px;
    margin: auto;
    background: #fff;
    border-radius: 5px;
    text-align: center;
    padding: 20px;
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center
}

.wrapModal__btnClose {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 25px;
    height: 25px;
    background: url(../images/close-b.svg) center no-repeat;
    background-size: cover;
    cursor: pointer;
    transition: .3s ease-out
}

    .wrapModal__btnClose:hover {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }

.wrapModal__tit {
    font-size: 1.8em;
    font-weight: 700;
    margin: 10px 0
}

.wrapModal__txt {
    font-size: 1.2em;
    font-weight: 300;
    margin: 10px 0;
    display: block
}

.wrapModal__btn {
    margin: 0 10px
}

.wrapModal-form {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: end;
    justify-content: flex-end
}

.wrapModal__input {
    border-radius: 3px;
    height: 35px;
    margin: 10px 0;
    border: 1px solid #000;
    border: 1px solid rgba(0,0,0,.2);
    outline: none;
    padding: 5px
}

.wrapModal__input_form {
    width: 60%
}

.wrapModal__label {
    margin-right: 5px;
    width: 30%;
    display: inline-block;
    vertical-align: middle;
    font-weight: 700
}

.wrapModal__textarea {
    height: 67px;
    padding: 5px;
    margin: 10px 0;
    resize: none;
    outline: none;
    border-radius: 3px;
    width: calc(60% - 1px);
    border: 1px solid #000;
    border: 1px solid rgba(0,0,0,.2);
    display: inline-block
}

.confirm-mail {
    width: 60%;
    margin: auto
}

.confirm-mail__logo {
    float: right;
    display: block;
    margin-top: 30px
}

.confirm-mail__tit {
    color: #2b2c76;
    font-size: 22px;
    margin-top: 30px;
    float: left
}

.confirm-mail__divider {
    clear: both;
    float: left;
    margin: 20px 0
}

.confirm-mail__txt {
    width: 100%;
    clear: both
}

.confirm-mail__subTit {
    width: 100%;
    clear: both
}

.confirm-mail__input {
    height: 30px;
    width: 300px;
    max-width: 100%;
    border-radius: 7px;
    border: 1px solid #ccc;
    margin: 10px 0;
    padding: 0 10px;
    color: #000;
    outline: none
}

.confirm-mail__send {
    margin-bottom: 20px
}

.foot-home {
    background: #191c41;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    font-weight: 300
}

    .foot-home a {
        color: #fff;
        text-decoration: none;
        margin: 5px;
        font-weight: 300;
        display: inline-block
    }

        .foot-home a:hover {
            text-decoration: underline
        }

.registro {
    width: 100%;
    min-height: calc(100vh - 52px);
    height: auto;
    background: url(../images/bg-doctor.jpg)center no-repeat;
    background-size: cover;
    float: left;
    clear: both
}

.registro-form {
    width: 50%;
    margin: 20px auto
}

.registro-form__tit {
    width: 100%;
    float: left;
    text-align: center;
    font-size: 1.5em
}

.registro-form label {
    font-weight: 700
}

.registro-form input[type=text], .registro-form select {
    width: calc(100% - 12px);
    margin: 5px 0 20px;
    height: 30px;
    padding: 5px;
    border: 1px solid #000;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 7px;
    outline: none
}

.registro-form select {
    width: calc(102% - 12px);
    background: #fff;
    height: 40px
}

.registro-form__txt {
    margin: 5px 0 10px
}

    .registro-form__txt input {
        margin-right: 10px;
        outline: none;
        width: 15px;
        height: 15px
    }

.registro-form__send {
    margin: 20px auto;
    display: block;
    width: 170px;
    text-align: center
}

.service-wrap {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    height: calc(100vh - 52px);
    overflow: scroll
}

.service__tit {
    font-weight: 700;
    font-size: 1.5em;
    margin: 20px auto;
    text-align: center
}

.service-wrapBtns {
    width: 653px
}

.service__btn {
    width: 215px;
    height: 215px;
    /*border-right: 1px solid #d1d1d1;
    border-bottom: 1px solid #d1d1d1;*/
    float: left;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    transition: .3s ease-out;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    cursor: pointer;
    color: #3898ec;
    font-weight: 700;
    font-size: 1.2em;
    text-align: center;
    box-shadow: 1px 0 0 0 #d1d1d1, 0 1px 0 0 #d1d1d1, 1px 1px 0 0 #d1d1d1, 1px 0 0 0 #d1d1d1 inset, 0 1px 0 0 #d1d1d1 inset;
}

    /*.service__btn:nth-child(1) {
        border-top: 1px solid #d1d1d1;
        border-left: 1px solid #d1d1d1
    }

    .service__btn:nth-child(2) {
        border-top: 1px solid #d1d1d1
    }

    .service__btn:nth-child(3) {
        border-top: 1px solid #d1d1d1
    }

    .service__btn:nth-child(4) {
        border-left: 1px solid #d1d1d1
    }

    .service__btn:nth-child(7) {
        border-left: 1px solid #d1d1d1;
    }

    .service__btn:nth-child(10) {
        border-left: 1px solid #d1d1d1;
    }*/

.pastScore {
    width: 94%;
    height: calc(100vh - 92px);
    min-height: 500px;
    padding: 20px 3%;
    position: relative
}

.pastScore__tit {
    font-size: 2em;
    margin: 0;
    color: #000
}

.pastScore__subTit {
    font-weight: 700
}

.pastScore-form {
    margin: 20px 0 0
}

    .pastScore-form label {
        display: block;
        font-weight: 700
    }

    .pastScore-form input, .pastScore-form select {
        width: 100%;
        height: 34px;
        padding: 5px;
        border: 1px solid #000;
        border: 1px solid rgba(0,0,0,.2);
        border-radius: 3px;
        margin: 5px 0 20px;
        outline: none
    }

    .pastScore-form select {
        background: none;
        width: 101%
    }

.pastScore__btnSel {
    width: calc(99% - 40px);
    padding: 10px 20px;
    border-top: 1px solid rgba(0,0,0,.2);
    border-left: 1px solid rgba(0,0,0,.2);
    border-right: 1px solid rgba(0,0,0,.2);
    border-radius: 3px
}

    .pastScore__btnSel:last-child {
        border-bottom: 1px solid rgba(0,0,0,.2)
    }

.pastScore__btnSel_selec {
    background: #3e70cf;
    color: #fff
}

.pastScore-wrapBtn {
    margin: 30px 0;
    clear: both;
    width: 100%
}

.pastScore-wrapScroll {
    height: 400px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-bottom: 20px
}

.datepicker {
    margin-bottom: 10px !important;
    height: 20px !important;
    width: 97% !important
}

html, body {
    font-size: 14px;
    font-family: Roboto,sans-serif
}

a {
    text-decoration: none
}

;.foot-home {
    width: 100%;
    height: 15px;
    background: #191a42;
    background: linear-gradient(to right,#191a42 0,#434aa0 52%,#191a42 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#191a42',endColorstr='#191a42',GradientType=1)
}

@media(max-width:768px) {
    .wrapDate-dateRow-doctorRow {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column
    }

    .wrapDate-dateRow-doctorRow-infoDoc {
        margin-top: 20px
    }

    .checkData-mainWrap {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        flex-direction: column-reverse
    }

    .checkData-form {
        width: 100%;
        margin-top: 20px
    }

    .checkData-map {
        width: 100%
    }

    .wrapModal-inner {
        width: 70%
    }

    .registro-form {
        width: 80% !important
    }

    .latMenu {
        width: 40%
    }

    .home-hero-wrap-btns {
        width: 80%
    }

    .login {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column
    }

    .login-data {
        margin-top: 20px
    }

    .login-data__input {
        width: calc(100% - 20px)
    }

    .wrapIni {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column
    }

    .wrapIni-col {
        width: 90%;
        padding: 5% 0
    }

        .wrapIni-col:nth-of-type(2) {
            border-left: none;
            text-align: center;
            margin-top: 20px;
            padding-left: 0
        }
}

@media(max-width:544px) {
    .wrapDate-dateRow-actions__btn {
        display: block;
        margin: 10px 0;
        text-align: center
    }

    .dateScore .inner-logo {
        display: none
    }

    .chat .inner-logo {
        display: none
    }

    .checkData .inner-logo {
        display: none
    }

    .wrapModal-form {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column
    }

    .wrapModal__input_form {
        width: 90%
    }

    .wrapModal__label {
        width: 90%
    }

    .wrapModal__textarea {
        width: 90%
    }

    .confirm-mail__input {
        width: 94%
    }

    .foot-home a {
        display: block
    }

    .foot-home span {
        display: none
    }

    .registro-form {
        width: 90% !important
    }

    .pastScore .inner-logo {
        display: none
    }

    .latMenu {
        width: 80%
    }

    .home-hero-wrap-btns {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column
    }

    .home-hero-tit {
        width: 90%;
        margin: 10px auto
    }

    .home-hero-txt {
        width: 90%;
        margin: 10px auto
    }

    .home-descrip-tit {
        width: 90%;
        margin: 10px auto
    }

    .home-descrip-txt {
        width: 90%;
        margin: 10px auto
    }

    .login-data {
        width: 90%
    }

    .inner-logo {
        width: 100px
    }

    .wrapIni {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column
    }

    .wrapIni-col img {
        height: 150px
    }
}

@media(max-width:767px) {
    .dateScore-up {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column
    }

    .dateScore-wrapScore {
        margin-left: 0;
        -webkit-box-align: start;
        align-items: flex-start
    }

    .moreData .inner-logo {
        display: none
    }

    .confirm-mail {
        width: 80%
    }

    .confirm-mail__logo {
        display: none
    }

    .service-wrap {
        -webkit-box-pack: start;
        justify-content: flex-start;
        min-height: 500px;
        overflow: scroll
    }

    .service-wrapBtns {
        width: 300px !important
    }

    .service__btn {
        width: 100%;
        height: 90px;
        border-bottom: 1px solid #d1d1d1;
        border-top: none;
        border-left: none;
        border-right: none
    }

        .service__btn img {
            display: none
        }

        .service__btn:nth-child(1) {
            border-top: none;
            border-left: none
        }

        .service__btn:nth-child(2) {
            border-top: none
        }

        .service__btn:nth-child(3) {
            border-top: none
        }

        .service__btn:nth-child(4) {
            border-left: none
        }

    .slide-item .wrap-img {
        float: none;
        margin: auto
    }

    .slide-item .wrap-txt {
        float: none;
        width: 100%;
        text-align: center
    }
}

@media(max-width:320px) {
    .wrapModal__btn {
        display: block;
        margin-top: 10px
    }
}

@media(max-width:992px) {
    .registro-form {
        width: 70%
    }
}

.modal-two-factor::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.modal-two-factor {
    border-radius: 5px;
    border: 1px solid #B0B9C3;
}

.modal-two-factor > main {
    width: 350px;
    height: 370px;
    max-width: 100%;
}

.two-factor-close {
    display: flex;
    justify-content: flex-end;
}

    .two-factor-close button {
        font-size: 22px;
        color: #000;
        background: transparent;
        border: none;        
    }

    .modal-two-factor section {
        display: flex;
        flex-direction: column;
        display: none;
        gap: 10px;
    }

    .modal-two-factor section h2 {
        padding: 0;
        text-align: center;
        font-weight: 800;
        font-size: 19px;
        width: 70%;
        margin: 0 auto;
    }

.two-factor-options {
    display: flex;
    flex-direction: column;
    gap: 14px
}

    .two-factor-options button {
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 5px;
        border: none;
        padding: 15px;
        width: 100%;
        text-align: left;
        box-shadow: 0px 0px 15px 3px rgba(0,0,0,0.14);
        border: 1px #DADADA solid;
    }

        .two-factor-options button.two-active {
            background: #E5EBF2;
        }

        .two-factor-options button label {
            font-size: 14px;
        }

    .two-factor-options button span {
        font-size: 14px;
        font-weight: 700;
    }

.two-factor-code {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

    .two-factor-code input {
        background: #fff;
        border: 1px solid #9B9B9B;
        width: 50px;
        height: 50px;
        font-size: 20px;
        text-align: center;
        border-radius: 5px;
    }

.two-factor-buttons {
    display: flex;
    justify-content: center;
    gap: 7px;
    padding: 14px;
}

    .two-factor-buttons .btn-cancel {
        border: 1px solid var(--global-color);
        color: var(--global-color);
        background: #fff;
        border-radius: 5px;
        padding: 7px 14px;
        font-weight: 700;
    }

    .two-factor-buttons .btn-action {
        border: 1px solid var(--global-color);
        background: var(--global-color);
        color: #fff;
        border-radius: 5px;
        padding: 7px 14px;
        font-weight: 700;
    }

        .two-factor-buttons .btn-action:disabled {
            background: #ABABAB;
            border: 1px solid #ABABAB;
        }

.two-factor-attempt {
    display: flex;
    justify-content: center;
}

    .two-factor-attempt button {
        padding: 0;
        margin: 0;
        color: var(--global-color);
        text-decoration: underline;
        background: none;
        border: none;
    }

.two-factor-invalid-code {
    display: none;
    text-align: center;
}

.two-factor-message {
    display: none;
    text-align: center;
}

.two-factor-message.invalid-code {
    color: #FB4030;
}

    .two-factor-message.resend-code {
        color: var(--global-color);
    }

.modal-change-password::backdrop {
    background: rgba(0, 0, 0, 0.8); 
}

.modal-change-password {
    border-radius: 10px; 
    border: none;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    background-color: #fff; 
    padding: 20px; 
}

.change-password-close button {
    font-size: 26px;
    color: #888; 
}

.modal-change-password section {
    display: flex;
    flex-direction: column;
    gap: 20px; 
}

    .modal-change-password section h5 {
        font-weight: 800;
        font-size: 20px; 
        margin-bottom: 20px; 
    }

.main-form .cell label {
    margin-bottom: 5px;
    color: #333; 
}

.main-form .cell input[type="password"] {
    padding: 10px;
    border-radius: 5px; 
    border: 1px solid #ccc; 
}

.password_error {
    color: red;
    font-size: 14px;
    display: none;
}

.button.navigation.btn {
    padding: 10px 20px;
    margin-right: 10px;
    cursor: pointer;
}

    .button.navigation.btn:hover {
        opacity: .8;
    }

.input#newPassword {
    width: calc(50% - 10px);
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
    border: solid thin #ccc;
}

.input#confirmNewPassword {
    width: calc(50% - 10px);
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
    border: solid thin #ccc;
}

.change-password-label,
#newPassword,
#confirmNewPassword {
    display: block;
    margin-bottom: 10px;
}