.top {
    align-items     : center;
    background      : url('/img/background.png') no-repeat center;
    /*height          : 100vh;*/
    background-size : 100% auto;
    display         : flex;
    flex-direction  : column;
    max-height      : 510px;
    min-height      : 500px;
}

.top_logo {
    margin-top : 100px;
    width      : 288px;
}

.top_logo img {
    width : 100%;
}

.top_title {
    color          : #fff;
    font-size      : 89px;
    font-weight    : 900;
    margin         : auto 0;
    padding-bottom : 100px;
    text-align     : center;
}

footer {
    background-color : #22a8cb !important;
    color            : #fff;
    height           : auto;
    padding          : 15px 0 25px;
}

footer a {
    color           : #fff !important;
    text-decoration : none;
}

footer a:hover {
    text-decoration : underline !important;
}

#helper-links {
    justify-content : flex-end;
    margin-bottom   : 0.5rem;
}

#address {
    font-size    : 15px;
    line-height  : 18px;
    margin-right : auto;
}

#copyright {
    font-size   : 15px;
    line-height : 18px;
}

.footer-content {
    align-items : center;
    display     : flex;
    max-width   : 1160px;
    padding     : 0 30px;
    width       : 100%;
}

.footer-content .payment-icons {
    margin : 0 20px;
    width  : auto;
}

.footer_inf {
    margin-left : auto;
}

.footer_inf a {
    color           : #fff;
    display         : block;
    font-size       : 15px;
    text-decoration : none;
}

body {
    background : #d6ecef;
}

#loyalty-status {
    width : max-content;
}

.form-bg {
    background    : #fff;
    border-radius : 60px;
    max-width     : 760px;
    padding       : 0 !important;
    width         : 100%;
    /*padding       : 0 80px !important;*/
    /*margin-bottom : 140px !important;*/
}

.form-buttons {
    max-width : 760px;
    width     : 100%;
}

#alert-error {
    background              : #f8d7da;
    border-top-left-radius  : 60px;
    border-top-right-radius : 60px;
    color                   : #842029;
    font-weight             : 900;
    padding                 : 1rem 0.5rem;
}

#promocode-activated {
    background              : #22a8cb;
    border-top-left-radius  : 60px;
    border-top-right-radius : 60px;
    color                   : #fff;
    font-weight             : 900;
    padding                 : 1rem 0.5rem;
}

#pay-form {
    margin  : 0 75px !important;
    padding : 1px;
}

.form-title {
    align-items     : flex-end;
    color           : #22a8cb;
    display         : flex !important;
    font-size       : 35px;
    font-weight     : 900 !important;
    justify-content : space-between;
    margin          : 35px 0 30px;
}

#type-of-day-visit-time {
    color       : #0d335b;
    font-size   : 18px;
    font-weight : 400 !important;
}

#type-of-day-visit-time-part-5 {
    color        : #0d335b;
    font-size    : 18px;
    font-weight  : 400 !important;
    margin-left  : auto;
    margin-right : 5px;
}

#service {
    background    : #aee0e4;
    border        : none;
    border-radius : 60px;
    color         : #003b63;
    font-size     : 30px;
    font-weight   : 600;
    height        : 60px;
    outline       : none;
    padding       : 5px 30px;
    width         : 100%;
}

.form-arrow {
    position : relative;
}

.form-arrow-img {
    display  : block;
    height   : 30px;
    position : absolute;
    right    : 20px;
    top      : 100px;
    /*width: 50px;*/
    z-index  : 1;
}

.service-list-wrap {
    background    : #aee0e4 !important;
    border-radius : 20px;
    height        : 0;
    margin-top    : 5px;
    /* display: none; */
    /* position: absolute; */
    /* z-index: 9;
    left: 0; */
    /* width: 100%; */
    /* top: 145px; */
    padding       : 0 15px;
    transition    : 0.5s;
}

.service-list-wrap-show {
    height  : 220px;
    padding : 10px 15px;
}

.service-list-wrap-show .service-list {
    height : 210px;
}

.service-list {
    color      : #003b63;
    font-size  : 20px;
    height     : 0;
    list-style : none;
    margin     : 0;
    max-height : 210px;
    overflow-y : scroll;
    padding    : 0;
    transition : height 0.5s;
}

.service-list::-webkit-scrollbar {
    height : 0;
    width  : 3px;
}

.service-list::-webkit-scrollbar-thumb {
    background : #003b63;
    height     : 0;
    width      : 3px;
}

.service-list li {
    cursor  : pointer;
    padding : 5px;
}

.service-list li:hover {
    color : #fff;
}

.form-date {
    background    : #aee0e4 !important;
    border-radius : 60px;
}

.form-date input {
    background    : transparent !important;
    border        : none;
    border-radius : 60px;
    color         : #003b63;
    cursor        : pointer;
    font-size     : 30px;
    font-weight   : 600;
    height        : 60px;
    padding       : 5px 30px;
    z-index       : 9;
}

.form-date span {
    background    : #22a8cb !important;
    border-radius : 0 60px 60px 0;
    color         : #fff;
    font-size     : 24px;
    font-weight   : 600;
    height        : 60px;
    padding       : 5px 30px;
    position      : relative;
    width         : 160px !important;
}

.form-date span::before {
    background      : url('/img/calendar.svg') no-repeat;
    background-size : 100% 100%;
    content         : '';
    cursor          : pointer;
    display         : block;
    height          : 46px;
    left            : -65px;
    position        : absolute;
    width           : 45px;
    z-index         : 1;
}

.type-of-client .form-label {
    color         : #4d4d4d;
    font-size     : 24px;
    font-weight   : 700;
    margin-bottom : 40px;
}

.type-of-client .form-label .text-black-50 {
    color       : #777 !important;
    font-size   : 16px;
    font-weight : normal;
}

.type-of-client .form-label .text-secondary {
    color      : #22a8cb !important;
    display    : block;
    /*font-size   : 21px !important;*/
    /*font-weight : 400 !important;*/
    margin-top : 15px;
}

.type-of-client .text-end {
    color       : #4d4d4d;
    font-size   : 23px;
    font-weight : 700;
}

.type-of-client .text-end .text-danger {
    color           : #d30000 !important;
    display         : block;
    font-size       : 23px;
    font-weight     : 400 !important;
    text-decoration : line-through;
}

.type-of-client .input-group {
    align-items : center;
    display     : flex;
    flex-wrap   : nowrap;
}


.type-of-client .input-group input {
    border    : none;
    color     : #0d335b;
    font-size : 32px;
    height    : auto;
    padding   : 0;
    width     : 70px;
}

.type-of-client .input-group button {
    border  : none;
    color   : transparent;
    height  : 30px !important;
    padding : 0;
    width   : 30px !important;
}

.type-of-client .input-group button:nth-child(1) {
    background      : url('/img/minus.svg') no-repeat center;
    background-size : 100% auto;
}

.type-of-client .input-group button:nth-child(3) {
    background      : url('/img/plus.svg') no-repeat center;
    background-size : 100% auto;
}

.form-bottom {
    border-top     : 6px solid #aee0e4 !important;
    display        : flex;
    flex-direction : row-reverse;
    padding-top    : 30px !important;
}

#enter-promocode, #birthdate-discount {
    border-bottom   : 2px solid #22a8cb;
    color           : #22a8cb;
    cursor          : pointer;
    display         : block;
    font-size       : 22px;
    font-weight     : 900;
    margin-left     : auto;
    margin-top      : 5px;
    padding-bottom  : 5px;
    position        : relative;
    text-decoration : none;
    width           : max-content;
    z-index         : 1;
}

.form-sum {
    color       : #003b63;
    flex-grow   : 1;
    font-size   : 34px;
    font-weight : 900 !important;
    text-align  : left !important;
}

.form-sum span {
    color : #22a8cb;
}

#pay-form-next-screen {
    background     : #22a8cb;
    border         : none;
    border-radius  : 60px;
    color          : #fff;
    font-size      : 29px;
    font-weight    : 900;
    height         : 86px;
    text-transform : uppercase;
    /*margin         : 45px 0 -130px 0 !important;*/
    width          : 270px;
}

#pay-form-auth {
    background : #22a8cb;
}

.form-input {
    margin-top : 35px;
}

.form-input-margin {
    margin-top : 80px;
}

.form-input label {
    color       : #22a8cb;
    font-size   : 35px;
    font-weight : 900;
    text-align  : center;
}

.form-input input {
    background    : #aee0e4;
    border        : none;
    border-radius : 60px;
    color         : #003b63;
    font-size     : 29px;
    font-weight   : 300;
    height        : 79px;
    text-align    : center;
}

.form-input input:focus {
    background : #aee0e4;
    color      : #003b63;
}

.form-check {
    align-items : center;
    display     : flex;
    margin      : 70px 0 !important;
    padding     : 0;
}

.form-check p {
    color       : #6b6b6b;
    font-size   : 12px;
    line-height : 18px;
    /*max-width   : 410px;*/
    margin      : 0 0 0 20px;
}

.form-check p a {
    color           : #22a8cb !important;
    text-decoration : underline !important;
}

.form-check label input[type=checkbox] {
    display  : block;
    height   : 0;
    opacity  : 0;
    position : absolute;
    width    : 0;
    z-index  : -1;
}

.is-invalid + .form-box-ok {
    border-color : var(--bs-red) !important;
}

.form-box-ok {
    align-items     : center;
    border          : 4px solid #22a8cb;
    border-radius   : 10px;
    display         : flex;
    height          : 55px;
    justify-content : center;
    position        : relative;
    width           : 55px;
}

.form-box-ok::before {
    content  : '';
    display  : block;
    height   : 100%;
    left     : 0;
    position : absolute;
    top      : 0;
    width    : 100%;
    z-index  : 1;
}

.form-check label input[type=checkbox]:checked + .form-box-ok::before {
    background : url('/img/checkbox.svg') no-repeat center;
}

#pay-form-previous-screen,
#pay-form-as-guest,
#pay-form-cancel {
    background : #a1bfd1;
}

.pay-form-accept {
    background : rgb(249, 203, 35);
    background : linear-gradient(90deg, rgba(249, 203, 35, 1) 50%, rgba(248, 140, 0, 1) 100%);
}

.datepicker {
    border        : none;
    border-radius : 20px;
    padding       : 30px;
}

.datepicker--pointer {
    display : none;
}

.datepicker--nav {
    background    : #22a8cb;
    border-radius : 20px;
    color         : #fff;
}

.datepicker--nav-action:hover, .datepicker--nav-title:hover {
    background : transparent;
}

.datepicker--nav-action path {
    stroke : #fff;
}

.datepicker--nav-title i {
    color : #fff;
}

.datepicker--days-names {
    background : #b7e4e8;
    padding    : 5px 0;
}

.datepicker--day-name {
    color : #0d335b;
}

.datepicker--cell.datepicker--cell-day {
    border-radius : 50%;
    color         : #0d335b;
    font-size     : 16px;
    height        : 34.5px;
    width         : 34.5px;
}

.datepicker--cell.datepicker--cell-day.-current-.-selected-, .datepicker--cell.datepicker--cell-day.-selected- {
    background : #22a8cb;
    color      : #fff !important;
}


.datepicker--cell.datepicker--cell-day.-disabled- {
    color : #bfbfbf;
}

.datepicker--cell.datepicker--cell-day.-other-month- {
    color : #bfbfbf !important;
}

.datepicker--cell.datepicker--cell-day.-weekend- {
    color : #f2120b;
}

.datepicker--cell.datepicker--cell-day.-weekend-.-disabled-, .datepicker--cell.datepicker--cell-day.-weekend-.-other-month- {
    color : #f4a2a2;
}

.modal-content {
    border-radius : 20px;
}

.modal-title {
    color       : #22a8cb;
    font-size   : 24px;
    font-weight : 900;
}

.modal-dialog {
    /*margin: calc(50vh - 175px) auto;*/
    /*max-width : 350px;*/
}

.modal-body {
    border-bottom : 3px solid #b7e4e8;
    border-top    : 3px solid #b7e4e8;
    padding       : 20px 30px;
}

.modal-footer .btn {
    background     : #22a8cb;
    border         : none;
    border-radius  : 60px;
    color          : #fff;
    font-size      : 20px;
    font-weight    : 900;
    height         : 60px;
    line-height    : 50px;
    text-transform : uppercase;
    padding-left   : 1rem;
    padding-right  : 1rem;
    /*width: 210px;*/
}

.modal-body input {
    background    : #aee0e4;
    border        : none;
    border-radius : 60px;
    color         : #003b63;
    font-size     : 29px;
    font-weight   : 300;
    height        : 70px;
    text-align    : center !important;
}

.modal-body input:focus {
    background : #aee0e4;
}

.datepicker--cell.datepicker--cell-day.-job-day- {
    color : #0d335b;
}

@media screen and (max-width : 1920px) {
    .form-bg {
        border-radius : 50px;
        max-width     : 550px;
    }

    .form-buttons {
        max-width : 550px;
    }

    #promocode-activated, #alert-error {
        border-top-left-radius  : 50px;
        border-top-right-radius : 50px;
    }

    #pay-form {
        margin : 0 35px !important;
    }

    .form-title {
        font-size : 24px;
        margin    : 25px 0 15px;
    }

    .form-date {
        border-radius : 40px;
    }

    #service {
        border-radius : 40px;
        font-size     : 20px;
        height        : 45px;
        padding       : 5px 20px;
    }

    .form-arrow-img {
        height : 20px;
        top    : 65px;
        width  : 35px;
    }

    .service-list-wrap {
        max-height : 205px;
        /* top: 100px; */
    }

    .service-list {
        font-size  : 18px;
        max-height : 190px;
    }

    #type-of-day-visit-time,
    #type-of-day-visit-time-part-5 {
        font-size : 16px;
    }

    .form-date input {
        border-radius : 40px;
        font-size     : 20px;
        height        : 45px;
        padding       : 5px 20px;
    }

    .form-date span {
        font-size : 24px;
        height    : 45px;
        padding   : 5px 25px;
    }

    .form-date span::before {
        height : 30px;
        left   : -45px;
        width  : 30px;
    }

    .type-of-client .form-label {
        font-size     : 18px;
        margin-bottom : 0;
    }

    .type-of-client .form-label .text-secondary {
        font-size  : 16px !important;
        margin-top : 10px;
    }

    .type-of-client .text-end {
        font-size : 18px;
    }

    .type-of-client .text-end .text-danger {
        font-size : 16px;
    }

    .type-of-client .input-group input {
        font-size : 20px;
        width     : 50px;
    }

    .type-of-client .input-group button {
        height : 20px !important;
        width  : 20px !important;
    }

    .form-bottom {
        border-top  : 4px solid #aee0e4 !important;
        padding-top : 20px !important;
    }

    #enter-promocode, #birthdate-discount {
        border-bottom  : 1px solid #22a8cb;
        font-size      : 16px;
        /*margin-left    : -120px;*/
        margin-top     : 5px;
        padding-bottom : 4px;
    }

    .form-sum {
        font-size : 24px;
    }

    #pay-form-next-screen {
        font-size : 20px;
        height    : 50px;
        width     : 200px;
        /*margin    : 45px 0 -130px 0 !important;*/
    }

    .form-input {
        margin-top : 20px;
    }

    .form-input-margin {
        margin-top : 30px;
    }

    .form-input label {
        font-size : 24px;
    }

    .form-input input {
        font-size : 20px;
        height    : 45px;
    }

    .form-check {
        margin : 30px 0 !important;
    }

    .form-box-ok {
        border : 2px solid #22a8cb;
        height : 35px;
        width  : 35px;
    }

    .form-check label input[type=checkbox]:checked + .form-box-ok::before {
        background-size : 70%;
    }

    .form-check p {
        margin-left : 15px;
    }

    .modal-body input {
        border-radius : 40px;
        font-size     : 20px;
        height        : 45px;
    }

    .modal-footer button {
        font-size : 20px;
        height    : 50px;
    }
}

@media screen and (max-width : 1280px) {
    .top {
        background-size : cover;
    }
}

@media screen and (max-width : 1024px) {
    #root {
        min-height : calc(100vh - 175px);
    }

    footer {
        margin-top : 25px;
    }

    footer > div {
        justify-content : center !important;
        width           : 100%;
    }

    #address, #copyright > div {
        text-align : center;
        width      : 100%;
    }

    #copyright > div {
        margin : 0.25rem 0;
    }

    .footer-content {
        max-width : 470px;
        padding   : 0 15px;
    }

    .footer-content .payment-icons {
        margin : 30px auto;
        order  : 2;
    }

    .footer_inf {
        order      : 3;
        text-align : center;
        width      : 100%;
    }
}

@media screen and (max-width : 768px) {
    .top {
        min-height : auto;
    }

    .top_title {
        font-size : 60px;
    }

    .form-bg {
        /*padding       : 0 30px !important;*/
        border-radius : 40px;
    }

    .form-box-ok {
        border-radius : 5px;
        height        : 23px;
        width         : 23px;
    }

    .form-box-ok::before {
        height : 60%;
        left   : 20%;
        top    : 20%;
        width  : 60%;
    }

    .form-check label input[type=checkbox]:checked + .form-box-ok::before {
        background-size : 100%;
    }

    #promocode-activated, #alert-error {
        border-top-left-radius  : 40px;
        border-top-right-radius : 40px;
    }

    #pay-form {
        margin : 0 25px;
    }

    .form-title {
        font-size : 24px;
        margin    : 25px 0 05px;
    }

    #type-of-day-visit-time,
    #type-of-day-visit-time-part-5 {
        font-size : 16px;
    }

    #service {
        border-radius : 40px;
        font-size     : 18px;
        height        : 50px;
        padding       : 5px 20px;
    }

    .form-arrow-img {
        height : 25px;
        top    : 55px;
        width  : 40px;
    }

    .service-list-wrap {
        max-height : 205px;
        /* top: 105px; */
    }

    .form-date input {
        border-radius : 40px;
        font-size     : 18px;
        height        : 45px;
        padding       : 5px 20px;
    }

    .form-date span {
        border-radius : 0 40px 40px 0;
        font-size     : 20px;
        height        : 45px;
        padding       : 5px 20px;
    }

    .form-date span::before {
        height : 30px;
        left   : -50px;
        width  : 30px;
    }

    .type-of-client .form-label {
        font-size     : 18px;
        margin-bottom : 20px;
    }

    .type-of-client .form-label .text-secondary {
        font-size  : 16px !important;
        margin-top : 10px;
    }

    .type-of-client .text-end {
        font-size : 18px;
    }

    .type-of-client .text-end .text-danger {
        font-size : 16px;
    }

    .type-of-client .input-group input {
        font-size : 18px;
        width     : 50px;
    }

    .type-of-client .input-group button {
        height : 20px !important;
        width  : 20px !important;
    }

    .form-bottom {
        border-top  : 3px solid #aee0e4 !important;
        padding-top : 20px !important;
    }

    #enter-promocode, #birthdate-discount {
        font-size      : 16px;
        margin-top     : 2px;
        padding-bottom : 3px;
    }

    .form-sum {
        font-size : 20px;
    }

    #pay-form-next-screen {
        border-radius : 40px;
        font-size     : 20px;
        height        : 50px;
        width         : 200px;
    }

    .form-input {
        margin-top : 20px;
    }

    .form-input-margin {
        margin-top : 30px;
    }

    .form-input label {
        font-size  : 20px;
        text-align : center;
    }

    .form-input input {
        border-radius : 40px;
        font-size     : 18px;
        height        : 45px;
    }

    .form-check {
        margin : 30px 0 !important;
    }
}

@media screen and (max-width : 500px) {
    .top_title {
        font-size : 50px;
    }

    .form-date span::before {
        display : none;
    }

    #address, #copyright {
        font-size : 13px;
    }

    .footer_inf a {
        font-size : 13px;
    }

    .footer-content .payment-icons {
        margin : 20px auto;
    }

    .form-bg {
        /*padding       : 0 15px !important;*/
        border-radius : 40px;
    }

    #promocode-activated, #alert-error {
        border-top-left-radius  : 40px;
        border-top-right-radius : 40px;
    }

    #pay-form {
        margin : 0 15px;
    }

    .type-of-client > div {
        flex-wrap : wrap;
    }

    .type-of-client .form-label {
        display       : flex;
        margin-bottom : 10px;
        width         : 100%;
    }

    .type-of-client .form-label span {
        margin-left : 3px;
    }

    .type-of-client .form-label span:last-child {
        margin-left : auto;
    }

    .type-of-client .form-label .text-secondary {
        margin-left : 3px;
        margin-top  : 0;
    }

    .type-of-client .text-end {
        font-size : 18px;
    }

    .type-of-client .text-end .text-danger {
        font-size : 18px;
    }

    .type-of-client .input-group input {
        font-size : 18px;
        width     : 50px;
    }

    .type-of-client .input-group button {
        height : 20px !important;
        width  : 20px !important;
    }

    .datepicker {
        padding : 20px;
    }

    .modal-body {
        padding : 30px 15px;
    }

    #pay-form-as-guest {
        font-size : 1.2rem;
    }
}

@media screen and (max-width : 360px) {
    .top_title {
        font-size : 45px;
    }

    #type-of-day-visit-time.promo700,
    #type-of-day-visit-time-part {
        font-size : 13px;
        position  : relative;
        top       : -1px;
    }

    #address, #copyright {
        font-size : 11px;
    }
}