:root {
    --main-font: 'Manrope', sans-serif;
}

body {
    font-family: var(--main-font) !important;
    background-color: #F1F1F1 !important;
}

.logo {
    max-width: 350px;
}

h1, h2, h3, h4, h5, h6, p {
    color: #000 !important;
}


/* _______________________ */
/* GENERAL PAGES CLASS - UTILS */
/* Utilities repeated in multiple sections */
/* _______________________ */
/* _______________________ */


.page-title {
    font-size: 30px;
    font-weight: 800;
    padding-bottom: 10px;
}

.page-title-medium {
    font-size: 24px;
    font-weight: 800;
    line-height: 26px;
    color: #000;
}


.bg-hover-black:hover {
    background-color: #000 !important;
}


@media(max-width:1200px) {

    .page-title {
        font-size: 24px;
        padding-bottom: 8px;
    }
}

@media(max-width:600px) {

    .page-title {
        font-size: 20px;
        padding-bottom: 6px;
    }
}


/* Header___________________________ */

/* CTA BUTTON IN HEADER */
.cta-header {
    border: 1px solid #E3E3E3;
    border-radius: 60px;
    padding: 12px 20px;
    color: #000;
    text-decoration: none;
    font-weight: 800;
    line-height: 30px;
    margin-right: 25px;
}

    .cta-header img {
        margin-right: 5px;
        margin-top: -3px;
    }

/* Navbar - Mobile Menu Icon - Toggler */
.navbar-toggler {
    width: 20px;
    height: 20px;
    position: relative;
    transition: .5s ease-in-out;
    color: transparent !important;
}

    .navbar-toggler,
    .navbar-toggler:focus,
    .navbar-toggler:active,
    .navbar-toggler-icon:focus {
        outline: none;
        box-shadow: none;
        border: 0;
        position: relative;
    }

        .navbar-toggler span {
            margin: 0;
            padding: 0;
        }

.toggler-icon {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: #000;
    border-radius: 1px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
}

.middle-bar {
    margin-top: 0px;
}


/* State when the navbar is collapsed */

.navbar-toggler.collapsed .top-bar {
    position: absolute;
    top: 0px;
    transform: rotate(0deg);
}

.navbar-toggler.collapsed .middle-bar {
    opacity: 1;
    position: absolute;
    width: 50%;
    top: 10px;
    filter: alpha(opacity=100);
}

.navbar-toggler.collapsed .bottom-bar {
    position: absolute;
    top: 20px;
    transform: rotate(0deg);
}

/* when navigation is clicked */

.navbar-toggler .top-bar {
    top: inherit;
    transform: rotate(135deg);
}

.navbar-toggler .middle-bar {
    opacity: 0;
    top: inherit;
    filter: alpha(opacity=0);
}

.navbar-toggler .bottom-bar {
    top: inherit;
    transform: rotate(-135deg);
}

/* Color of 3 lines */

.navbar-toggler.collapsed .toggler-icon {
    background: #000;
}



/* Common class in menu items */
.navigation-item {
    font-size: 16px !important;
    line-height: 20px !important;
    font-weight: 800 !important;
    color: #000 !important;
}

.horizontal-line-menu {
    border-top: 2px solid #ececec;
    width: 100%;
    height: 1px !important;
    display: none;
    padding-bottom: 20px;
}
/* ___________________________ */
/* Header Responsive Q________________ */
/* ___________________________ */

@media(max-width:1200px) {

    .navigation__items {
        width: 100%;
        justify-content: space-between !important;
        padding-bottom: 20px;
    }

    .horizontal-line-menu {
        display: block;
    }

    .navbar-brand {
        width: 100%;
        padding: 25px 0 !important;
        margin: 0;
    }

    .navigation__container---menu {
        margin-top: 10px;
    }

    .nav-item {
        margin-bottom: 5px;
    }
}

@media(max-width:600px) {
    .logo {
        max-width: 100%;
    }
}

/*__________________ */
/* _______login_form */
/* _________________ */
/* sm, md, lg, xl, and xxl. */

.login_form_wrapper .login_form_container {
    background-color: #fff;
    padding: 40px 20px 0px 20px;
    border-radius: 20px;
}

.container-wrapper .login_form_container {
    background-color: #fff;
    padding: 40px 50px 0px 50px;
    border-radius: 20px;
}

.login_form_title {
    font-size: 36px;
    font-weight: 800;
    padding-bottom: 10px;
}

.login_remember_box {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
}

.login_new_user {
    font-size: 18px;
    color: #000;
    padding-top: 20px;
    padding-bottom: 20px;
    font-weight: 400 !important;
    transition: all .2s;
}

    .login_new_user:hover {
        color: #FE0000;
        transition: all .3s;
    }

    .login_new_user img {
        margin-right: 5px;
    }

.formfield {
    padding-top: 30px;
}

.formfield-label {
    font-weight: 800;
    color: #000;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 8px;
}

.formfield input,
.formfield input.dxbl-text-edit-input {
    background-color: #F5F5F5;
    padding: 12px 15px;
    border: 2px solid #D9D9D9 !important;
    border-radius: 10px !important;
}


.formfield dxbl-combobox {
    background-color: #F5F5F5;
    padding: 0px 15px !important;
    border: 2px solid #D9D9D9 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

    .formfield dxbl-combobox input,
    .formfield dxbl-combobox input.dxbl-text-edit-input {
        border: 0px solid #D9D9D9 !important;
    }

.formfield button {
    background-color: #F5F5F5;
}

.form-divider {
    border-bottom: 2px solid #D8D8D8;
    width: 100%;
    height: 2px;
}

.login_btn_wrapper {
    padding: 35px 0;
}

.login_btn {
    display: block;
    text-decoration: none;
    color: #000;
    font-size: 22px;
    line-height: 15px;
    text-align: center;
    font-weight: 800;
    border: 2px solid #FE0000;
    padding: 22px 80px;
    border-radius: 60px;
    position: relative;
    transition: all .33s ease;
}

.login_btn_alt {
    display: block;
    text-decoration: none;
    color: #000;
    font-size: 22px;
    line-height: 28px;
    text-align: center;
    font-weight: 800;
    border: 2px solid #000;
    padding: 15px 60px;
    border-radius: 60px;
    position: relative;
    transition: all .33s ease;
}

.login_btn::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 36%;
    width: 40px;
    height: 18px;
    background-image: url(/icons/arrow-right-big.svg);
    background-repeat: no-repeat;
    background-size: cover;
}

.login_btn_alt::before {
    content: "";
    position: absolute;
    left: 25px;
    top: 36%;
    width: 50px;
    height: 20px;
    background-image: url(/icons/arrow-left-big.svg);
    background-repeat: no-repeat;
    background-size: cover;
}

.login_btn:hover,
.login_btn_alt:hover {
    background-color: #000;
    color: #fff;
    transition: all .33s ease;
}

    .login_btn:hover::after,
    .login_btn_alt:hover::before {
        filter: invert(40%) sepia(100%) saturate(7444%) hue-rotate(357deg) brightness(92%) contrast(126%);
    }

@media(max-width:600px) {
    .container-wrapper .login_form_container {
        padding: 40px 15px 0px 15px;
    }

    .login_form_title {
        font-size: 30px;
    }

    .login_remember_box {
        flex-wrap: wrap;
    }

    .login_new_user {
        padding-bottom: 0;
    }

    .form-divider {
        padding-top: 20px;
    }
}




/* _________________*/
/* ___FOOOTER_______ */
/* _________________ */
.footer-logo-container {
    text-align: center;
    padding: 30px 0;
}

.footer-hr {
    width: 100%;
    max-width: 850px;
    height: 2px;
    background-color: #D9D9D9;
    margin: 0 auto;
}

.footer-logo-img {
    text-align: center;
    margin-top: 30px;
}

.footer-single-card-container {
}

.footer-single-card {
    background: #fff;
    border-radius: 20px;
    padding: 35px;
}

.footer-card-icon {
}

.footer-card-heading {
}

.footer-card-subheading {
}

.footer-card-info {
    font-size: 16px;
    padding: 0;
    margin: 0;
    padding-top: 5px;
}

.footer-card-heading {
    font-size: 20px;
    font-weight: 800;
    color: #000 !important;
    text-decoration: none !important;
    word-wrap: break-word;
}

    .footer-card-heading a {
        font-size: 20px;
        color: #000 !important;
        text-decoration: none;
    }




/* Footer copyrights */
.col.text-center.footer-copyrights-container {
    display: flex;
    justify-content: center;
    max-width: 800px;
    padding: 25px 0 25px 0;
    margin: 0 auto;
}

.footer-copyrights-container-item {
    color: #000 !important;
    text-decoration: none !important;
}

/* FOOTER RESPONSIVE */
@media(max-width:767px) {
    .footer-logo-img {
        max-width: 350px;
        width: 90%
    }

    .footer-single-card {
        display: flex;
        align-items: center;
    }

    .footer-card-container {
        padding-left: 12px;
    }

    .col.text-center.footer-copyrights-container {
        flex-direction: column;
        padding-top: 50px;
    }

    .footer-copyrights-container-item {
        padding-bottom: 11px;
    }
}






/* ___________________________________________________ */
/* ______________________SIGNUP PAGE__________________ */
/* ___________________________________________________ */
.form-check {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}

.form-check-label {
    margin-left: 10px;
    font-size: 18px;
}

.form-check [type=checkbox] {
    width: 2rem;
    height: 2rem;
    color: #000;
    vertical-align: middle;
    -webkit-appearance: none;
    background: none;
    border: 0;
    outline: 0;
    flex-grow: 0;
    border-radius: 50%;
    background-color: #FFFFFF;
    transition: background 300ms;
    cursor: pointer;
}

    /* Pseudo element for check styling */

    .form-check [type=checkbox]::before {
        content: "";
        color: transparent;
        display: block;
        width: inherit;
        height: inherit;
        border-radius: inherit;
        border: 0;
        background-color: transparent;
        background-size: contain;
        box-shadow: inset 0 0 0 1px #CCD3D8;
    }

    /* Checked */

    .form-check [type=checkbox]:checked {
        background-color: currentcolor;
    }

        .form-check [type=checkbox]:checked::before {
            box-shadow: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath d='M15.88 8.29L10 14.17l-1.88-1.88a.996.996 0 1 0-1.41 1.41l2.59 2.59c.39.39 1.02.39 1.41 0L17.3 9.7a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0z' fill='%23fff'/%3E %3C/svg%3E");
        }

    /* Disabled */
    .form-check [type=checkbox]:disabled {
        background-color: #000;
        opacity: 0.84;
        cursor: not-allowed;
    }


    /* IE */
    .form-check [type=checkbox]::-ms-check {
        content: "";
        color: transparent;
        display: block;
        width: inherit;
        height: inherit;
        border-radius: inherit;
        border: 0;
        background-color: transparent;
        background-size: contain;
        box-shadow: inset 0 0 0 1px red;
    }

    .form-check [type=checkbox]:checked::-ms-check {
        box-shadow: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath d='M15.88 8.29L10 14.17l-1.88-1.88a.996.996 0 1 0-1.41 1.41l2.59 2.59c.39.39 1.02.39 1.41 0L17.3 9.7a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0z' fill='%23fff'/%3E %3C/svg%3E");
    }





/* ___________________________________________________ */
/* ______________________WELCOME PAGE__________________ */
/* ___________________________________________________ */


.welcome-single__container {
    background-color: #fff;
    padding: 40px 20px;
    border-radius: 20px;
}

.welcome-single__icon {
    padding-bottom: 30px;
    height: 8.2rem;
}

.welcome-single__title {
    font-size: 24px;
    font-weight: 800;
    padding-bottom: 10px;
}

.welcome-single__text {
    padding-bottom: 15px;
    height: 12.5rem;
}

.welcome-single__button {
    max-width: 220px;
    padding-top: 16px;
    padding-bottom: 14px;
    line-height: 27px;
    padding-left: 30px;
    text-align: left;
}


@media(max-width:1200px) {

    .welcome-single__title {
        font-size: 20px;
        padding-bottom: 8px;
    }

    .welcome-single__text {
        padding-bottom: 17px;
    }

    .welcome-single__icon {
        padding-bottom: 1rem;
        height: 6.7rem;
    }
}

@media(max-width:600px) {

    .welcome-single__title {
        font-size: 16px;
        padding-bottom: 6px;
    }

    .welcome-single__text {
        padding-bottom: 14px;
    }

    .welcome-single__icon {
        padding-bottom: 1rem;
        height: 5.2rem;
    }
}






/* ___________________________________________________ */
/* ______________________USER PROFILE__________________ */
/* ___________________________________________________ */


.profile-tab__icon {
}

.nav-link {
    color: #565656 !important;
    font-weight: 800 !important;
}

.navigation-item-icon {
    margin-right: 5px;
}

.nav-link.active {
    color: #000 !important;
    font-weight: 800 !important;
}

.nav-tabs .nav-link.active {
    background-color: transparent !important;
    border: none !important;
}

.active .navigation-item-icon {
    filter: invert(23%) sepia(91%) saturate(7261%) hue-rotate(1deg) brightness(92%) contrast(119%);
}


/* USER PROFILE - KRATHSH RANTEBOU */
.profile-tab-dropdown {
    padding: 12.5px !important;
}



/* DATES */
.datetimepicker {
    padding: 12px !important;
    font-size: 16px !important;
    line-height: 21px !important;
    font-weight: 600 !important;
}


/*stywrapper to give some space*/
.custom-checkbox {
    position: relative;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

    /*stylabel to give some more space*/
    .custom-checkbox label {
        display: block;
        padding: 12px 0 12px 48px;
        padding-left: 70px;
        font-size: 18px;
        font-weight: 800;
    }

    /*styand hide original checkbox*/
    .custom-checkbox input {
        height: 58px;
        left: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        width: 58px;
    }

        /*poson new box*/
        .custom-checkbox input + label::before {
            border: 2px solid #D9D9D9;
            border-radius: 7px;
            content: "";
            height: 58px;
            left: 0;
            position: absolute;
            top: 0;
            width: 58px;
            background-color: #F5F5F5;
        }

        /*svgckground styles*/
        .custom-checkbox input + label::after {
            content: "";
            opacity: 0;
            background-image: url("/icons/checkbox-c.svg");
            background-repeat: no-repeat;
            height: 21px;
            width: 30px;
            position: absolute;
            left: 15px;
            top: 17px;
            transition: opacity 0.2s ease-in-out;
        }

        /*rev check for 'on' state*/
        .custom-checkbox input:checked + label::after {
            opacity: 1;
        }

        /*focstyles*/
        .custom-checkbox input:focus + label::before {
            box-shadow: 0 0 0 3px #000;
            outline: 3px solid transparent; /* For Windows high contrast mode. */
        }


/* AVAILABLE DATES */

.ava-single-container {
    background-color: #F9F9F9;
    padding: 0 !important;
    border-radius: 20px;
}

.ava-single-row {
    padding: 25px 10px;
}

.ava-single-title-container {
    background-color: #FFFFFF;
    padding: 26px 20px;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
}

.ava-single-title {
    font-size: 24px;
    font-weight: 800;
    color: #000;
}

.ava-single-time {
    font-size: 22px;
    font-weight: 800;
    color: #000;
    padding-left: 20px !important;
    padding-top: 40px !important;
    padding-bottom: 30px !important;
}

.ava-single-place {
    font-size: 18px;
    line-height: 20px;
    color: #000;
}

.ava-single-cost {
    font-size: 18px;
    line-height: 20px;
    color: #000;
}

.ava-single-button-container {
    text-align: right !important;
}

.ava-single-btn {
    background-color: #fff;
    transition: all .3s;
}

    .ava-single-btn:hover {
        background-color: #000;
        color: #fff;
        transition: all .3s ease;
        border: 0 !important;
    }

.ava-single-container table {
    margin-bottom: 0 !important;
}

#ava-table .ava-single-row:last-child {
    border: 0px solid transparent !important;
}

.pagination ul li .page-link {
    color: #000 !important;
}


/* MODAL FOR AVAILABLE DATES */

.ava-modal-footer {
    padding: 0 20px;
}

@media(max-width:768px) {
    .ava-single-row {
        display: flex;
        flex-wrap: wrap;
        padding-left: 15px;
        padding-right: 15px;
    }

    .ava-single-time {
        width: 100% !important;
        padding-left: 0 !important;
        padding-bottom: 0 !important;
        border-bottom: 0 !important;
    }

    .ava-single-place {
        width: 100%;
        padding-left: 0 !important;
    }

    .ava-single-cost {
        width: 100% !important;
        padding-left: 0 !important;
        border-bottom: 0 !important;
    }

    .ava-single-button-container {
        width: 100% !important;
        border: 0 !important;
        margin-top: 20px;
    }
}

/* MODAL - CONFIRM */

.confirm-link {
    text-decoration: none;
    display: flex;
    align-items: center;
}

    .confirm-link span {
        padding-left: 7px;
        color: #000;
        transition: all .3s;
    }

    .confirm-link:hover span {
        color: #565656;
    }


/* USER PROFILE _ INFORMATIONS */

.profile-section {
}

.profile-section-header {
}

.profile-section-link {
    text-decoration: none !important;
    color: #000;
    display: flex;
    align-items: center;
}

    .profile-section-link:hover {
        color: #565656;
    }

    .profile-section-link span {
        padding-left: 5px;
    }

.profile-section-info-password-link {
    color: #FE0000;
    font-size: 18px;
    font-weight: bold;
}


/* contacts */

.add-new-contact {
    border: 1px solid #FE0000;
    padding: 15px 20px;
    background: #fff;
    color: #000;
    border-radius: 60px;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    font-size: 22px;
    max-width: 444px !important;
    cursor: pointer;
    transition: all .16s ease-out;
}

    .add-new-contact:hover {
        background: #000;
        color: #fff;
        transition: all .16s ease-in;
    }

@media(max-width:600px) {
    .add-new-contact {
        max-width: 90% !important;
        margin: 0 auto;
        font-size: 20px
    }
}


.highlight {
    background: #ffff99;
}




/* SEARCH DATES________ */

.info-notice {
    font-size: 18px;
    line-height: 25px;
    font-weight: 800;
    display: flex;
    align-items: center;
}

    .info-notice img {
        margin-right: 5px;
    }

.info-notice-text {
    max-width: 700px !important;
}


/* SEARCH DATES - CALENDAR & TIME TOGGLES */
.calendar-title {
    font-size: 24px;
    font-weight: 800;
}

.calendar-information {
    font-size: 16px;
    font-weight: 400;
    color: #000;
    margin-bottom: 10px;
    position: relative;
}

    .calendar-information::before {
        content: "";
        position: absolute;
        width: 18px;
        height: 18px;
        left: 0;
        top: 3px;
        border: 1px solid #D8D8D8;
        border-radius: 50px;
    }

.ava-high {
    position: relative;
    padding-left: 30px;
}

    .ava-high::before {
        background-color: #B4FFB2;
    }

.ava-medium {
    position: relative;
    padding-left: 30px;
}

    .ava-medium::before {
        background-color: #FFF6A0;
    }

.ava-low {
    position: relative;
    padding-left: 30px;
}

    .ava-low::before {
        background-color: #FFC7C3;
    }

.ava-none {
    position: relative;
    padding-left: 30px;
}

    .ava-none::before {
        background-color: #2c292980 !important
    }

.datepicker-container {
    position: relative;
    display: inline-block;
}

.datepicker table tr td.active.active {
    background: #d8d8d8 !important;
}

#datepicker {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: none;
    width: 100% !important;
}

/*.calendar-main {
    border: 2px solid #D9D9D9 !important;
    border-radius: 20px !important;
}*/

.table-condensed thead:nth-child(2) {
    border: 1px solid #000 !important;
    background: red !important;
}

.table-condensed {
    margin: 0 !important;
}

.datepicker-inline {
    width: 100% !important;
}

.datepicker table {
    width: 100% !important;
}

th.datepicker-switch {
    background: #fff !important;
}

th.next {
    background: #fff;
}

th.dow {
    background: #fff !important;
}

.day {
    /* border:1px solid #D8D8D8 !important; */
    box-shadow: inset 0 0 0 1px #D8D8D8 !important;
    border-radius: 8px !important;
    padding: 15px 10px !important;
    color: #B6B6B6 !important;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dxbl-calendar-selected-item::before {
    background-color: #007fff !important;
}

.table-condensed {
    border-spacing: 15px !important;
    border-collapse: separate !important;
}

.today {
    color: #000 !important;
    border-color: #000 !important;
}

td.disabled.day {
    background: #fff !important;
    color: #fff !important
}

td.active.day {
    background-image: none !important;
    box-shadow: inset 0 0 0 2px #FE0000 !important;
    color: #000 !important;
}

td.today.day {
    background-color: #000 !important;
    background-image: none !important;
    color: #fff !important;
}

/* COLORS FOR AVAILABILITY */
.highAvail {
    background: red !important;
}

td.high {
    background-color: #B4FFB2;
}

td.medium {
    background-color: #FFF6A0;
}

td.low {
    background-color: #FFC7C3;
}

.highAva {
    background: #B4FFB2 !important;
    color: #000 !important;
}

.mediumAva {
    color: #000 !important;
    background: #FFF6A0 !important;
}

.lowAva {
    color: #000 !important;
    background: #FFC7C3 !important;
}

.noneAva {
    background-color: #2c292980 !important;
    color: white !important;
}

@media(max-width:600px) {
    table {
        border-spacing: 0 !important;
    }

    .day {
        padding: 10px !important;
    }
}

@media (max-width: 500px) {
    .day {
        padding: 1px 1px !important;
    }
}




/* _____CALENDAR ACCORDIONS_______ */

.accordion {
}

.accordion-item {
    margin-bottom: 0px;
}

.accordion-button {
    width: 100%;
    text-align: left !important;
    padding: 10px 15px !important;
    font-weight: bold !important;
    font-size: 22px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.accordion-collapse {
    padding: 0px 15px;
    background: #D9D9D9;
}

/* CALENDAR TIME FRAMES */
.calendar-timeframe {
    width: 100%;
    text-align: left !important;
    padding: 17px 15px !important;
    font-weight: bold !important;
    font-size: 22px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
/* ELEMENT FOR CREATING A SPACE BETWEEN TOGGLES */
.card-spacer {
    margin: 15px;
}

.card-frame {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #000;
    padding-bottom: 10px;
    padding-top: 10px;
}

.card-body,
.accordion-collapse {
    background-color: #F5F5F5 !important;
    max-height: 350px;
    overflow-y: auto;
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border: 0 !important;
}

.card-frame-time,
.card-frame-cost {
    font-size: 20px;
    line-height: 21px;
    color: #000;
    font-weight: 800;
}

.card-frame-btn {
    font-size: 18px;
    font-weight: 800;
    color: #000;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    border-radius: 60px;
    border: 1px solid #e3e3e3;
    background-color: #fff;
    padding: 10px 20px;
    transition: all .11s ease-out;
}

    .card-frame-btn:hover {
        background: #000;
        color: #fff;
        transition: all .22s ease-in;
        border: 0px solid #FE0000;
    }

    .card-frame-btn img {
        margin-right: 5px;
    }

.cart-body .card-frame:last-child {
    background: red !important;
    margin-bottom: 100px;
}


@media(max-width:1200px) {
    .card-frame-btn {
        font-size: 16px;
        padding: 10px 15px;
    }
}

@media(max-width:600px) {
    .card-frame {
        flex-wrap: wrap;
    }

    .card-frame-btn {
        width: 100%;
        justify-content: center;
        margin-top: 30px;
    }
}


/* CARD - CUSTOM SCROLLBAR */
/* width */
.accordion-collapse::-webkit-scrollbar {
    width: 5px;
    background: #fff;
}

/* Track */
.accordion-collapse::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

/* Handle */
.accordion-collapse::-webkit-scrollbar-thumb {
    background: #000;
    border-radius: 10px;
}

    /* Handle on hover */
    .accordion-collapse::-webkit-scrollbar-thumb:hover {
        background: #000;
    }




/* LISTA ME RANTEBOU */

.reservations-wrapper {
    background-color: #fff;
    padding: 20px 0;
    border-radius: 15px;
    position: relative;
}

.hospital-table td {
    padding: 0px 20px 0px 20px !important;
    font-weight: bold;
    height: 60px;
}

.paginate_button a {
    color: #000 !important;
}

.paginate_button.page-item.active a {
    background-color: #eee !important;
    border-color: #000 !important;
}

.list-cancel-date {
    display: flex;
    color: #000;
    text-decoration: none;
    justify-content: left;
}

    .list-cancel-date:hover {
        text-decoration: underline;
        color: #000;
        ;
    }

    .list-cancel-date img {
        margin-right: 5px;
        ;
    }

.delete-back-btn {
    border: 1px solid #D8D8D8;
    font-size: 24px;
    color: #000;
    background-color: #fff;
    text-decoration: none;
    border-radius: 40px;
    max-width: 230px !important;
    text-align: center;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s;
}

    .delete-back-btn img {
        margin-right: 10px;
    }

    .delete-back-btn:hover img {
        transition: all .3s ease;
        filter: invert(40%) sepia(100%) saturate(7444%) hue-rotate(357deg) brightness(92%) contrast(126%);
    }

    .delete-back-btn:hover,
    .delete-confirm-btn:hover {
        color: #fff !important;
        background-color: #000 !important;
        /* filter: invert(40%) sepia(100%) saturate(7444%) hue-rotate(357deg) brightness(92%) contrast(126%); */
    }



.delete-confirm-btn {
    font-size: 24px;
    color: #000;
    background-color: #fff;
    border: 1px solid #FE0000;
    border-radius: 40px;
    ;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 240px !important;
    text-decoration: none !important;
    font-weight: bold;
    transition: all .3s;
}

    .delete-confirm-btn:hover {
        background: #000;
        color: #fff;
        transition: all .3s;
    }

/* CONFIRM PAGE */

.bk-moded {
    background-color: #fff;
    border: 1px solid #FE0000;
    font-size: 20px !important;
    line-height: 32px;
}


@media(max-width:600px) {
    .bk-moded {
        width: 100%;
    }
}




/* Extras */
.navigation-item-icon {
    width: 17px;
    height: 19px;
}

/* DevExpress Extras */
.nav-link .dx-menu-item-text-container {
    float: right;
    padding-left: 5px;
}

.form-control {
    border: 0px solid grey !important;
    box-shadow: none !important;
}

.form-group {
    border: 0px solid grey !important;
    box-shadow: none !important;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.login_btn.dxbl-btn:not(.dxbl-disabled):not(:disabled):hover,
.login_btn:hover, .login_btn_alt:hover, .bk-moded:hover,
.add-new-contact:hover {
    background-color: #000 !important;
    color: #fff !important;
    transition: all .33s ease !important;
}

.login_remember_box .dxbl-btn.dxbl-btn-link span:not(.dxbl-image),
.login_remember_box .dxbl-btn.dxbl-btn-outline-link span:not(.dxbl-image),
.login_remember_box .dxbl-btn.dxbl-btn-text-link span:not(.dxbl-image) {
    text-decoration: none;
}

.profileIcon {
    background-image: url(/icons/profile-user.svg);
    width: 18px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: cover;
}

.pdfIcon {
    background-image: url(/icons/donwload-pdf.svg);
    width: 12px;
    height: 17px;
    background-repeat: no-repeat;
    background-size: cover;
}

.printIcon {
    background-image: url(/icons/print.svg);
    width: 19px;
    height: 19px;
    background-repeat: no-repeat;
    background-size: cover;
    padding-left: 19px !important;
}

.cancelIcon {
    background-image: url(/icons/cancel-reservation.svg);
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
}

.backIcon {
    background-image: url(/icons/delete-arrow-left.svg);
    width: 50px;
    height: 26px;
    background-repeat: no-repeat;
}

.dxbl-btn:hover .backIcon {
    transition: all .3s ease;
    filter: invert(40%) sepia(100%) saturate(7444%) hue-rotate(357deg) brightness(92%) contrast(126%);
}

.editIcon {
    background-image: url(/icons/edit-reservation.svg);
    width: 24px;
    height: 23px;
    background-repeat: no-repeat;
}

.listIcon {
    background-image: url(/icons/all-dates.svg);
    width: 24px;
    height: 23px;
    background-repeat: no-repeat;
}

.searchIcon {
    background-image: url(/icons/rantevou-24x23.svg);
    width: 24px;
    height: 23px;
    background-repeat: no-repeat;
}

.deleteIcon {
    background-image: url(/icons/delete-account-small.svg);
    width: 22px;
    height: 23px;
    background-repeat: no-repeat;
}

.contactsIcon {
    background-image: url(/icons/profile-contacts.svg);
    width: 35px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: cover;
}

.flag {
    background-image: url(/icons/header-lang.svg);
    width: 20px;
    height: 18px;
    background-repeat: no-repeat;
}




.dxbl-modal-footer {
    padding: 0 20px !important;
    display: block !important;
}

    .dxbl-modal-footer::before {
        position: relative !important;
        z-index: -1;
        border-radius: inherit;
        background-color: #000 !important;
        opacity: 100% !important;
    }

.dxbl-scroll-viewer,
.dxbl-scroll-viewer-content {
    background: none !important;
}

.noheader .dxbl-grid-header-row {
    opacity: 0;
}

.dxbl-grid {
    border: 0px;
}

.dxbl-grid-table td {
    border: 0px !important;
}

.dxbl-tabs {
    background: none !important;
}

.dxbl-tabs-item {
    border: 0px solid grey !important;
    color: #565656 !important;
    font-weight: 800 !important;
}

.dxbl-active .navigation-item-icon {
    filter: invert(23%) sepia(91%) saturate(7261%) hue-rotate(1deg) brightness(92%) contrast(119%);
}

.dxbl-tabs-content-panel {
    padding: 0px !important;
}

.dxbl-grid-header-row {
    height: 0px !important;
    padding: 0px !important;
    margin: 0px !important;
}

.form-select,
.form-select .dxbl-btn {
    border: 0px solid grey;
}

/* DexExpress Calendar*/

.dxbl-calendar {
    width: 100% !important;
    border-radius: 15px !important;
}

.dxbl-calendar-header {
    background: white !important;
    border-radius: 15px !important;
    border: 0px solid grey !important;
}

.calendar-main table {
    width: 100% !important;
}

.hide-week-number .dxbl-calendar-week-number,
.hide-week-number th:nth-child(1) {
    display: none;
}

.dxbl-grid-expand-button-cell button {
    display: none !important;
}




/* Container */
.dxbl-align-center {
    padding: 0px 10px !important;
}

.card-frame-btn .dxbl-btn:hover {
    border: 0px solid grey !important;
}

.dxbl-scroll-viewer {
    border: 0px solid grey !important;
}

/* Appointment List */
.hospital-table .dxbl-grid-header-row {
    background-color: white !important;
}

.hospital-table td {
    border: 1px solid #8080802e !important;
}

.even {
    background-color: #8080802e !important;
}

.odd {
    background-color: white !important;
}

.dxbl-pager .dxbl-btn {
    border: 1px solid #8080802e !important;
}

.dxbl-pager-page-size-selector .dxbl-text-edit {
    border: 1px solid #8080802e !important;
    width: 100px !important;
}

.dxbl-edit-btn-dropdown {
    border: 0px solid grey !important;
}

.RichContentHeight {
    height: 100px !important;
    border: 0px solid grey;
}

.dxbs-menu div.nav .dropdown-menu {
    right: 0px !important;
}

.dxbs-menu .dx-menu-bar > ul{
    flex-flow:row-reverse;
}

.dxbl-pager > .dxbl-btn.dxbl-btn-outline-secondary.dxbl-pager-active-page-btn {
    background-color: black !important;
}

.list-cancel-date {
    margin: auto;
}

.nav-link:hover {
    color: #0a58ca !important;
    background-color: !important;
}

.dxbl-menu .dxbl-menu-item-list > .dxbl-menu-list-item > .dxbl-menu-item > a:not(disabled):hover:before {
    background-color: white !important;
}

.modal-title {
    font-weight: 800 !important;
    padding: 10px;
}

.profile-section p {
    font-size: 15px;
}

.register_btn {
    margin: 0 auto;
}

.dxbs-menu .dx-menu-spaceitem {
    display: none;
}

.dxbl-pager:not(.dxbl-sm):not(.dxbl-lg) .dxbl-pager-compact-mode {
    width: 4em !important;
}

.dxbl-pager-container {
    justify-content: center;
}

.accordion .dxbl-grid-top-panel {
    justify-content: right;
}

.accordion .dxbl-grid-bottom-panel {
    justify-content: center;
}

.accordion .dxbl-grid-top-panel .dxbl-pager {
    display: none;
}

.accordion .dxbl-grid-bottom-panel .dxbl-pager-page-size-selector {
    display: none;
}

.accordion-button.collapsed::after {
    transform: rotate(0deg);
}

.accordion-button:not(.collapsed)::after {
    transform: rotate(180deg);
}

.btn-login-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .btn-login-center .dxbl-btn.login_btn {
        margin: auto;
    }


.reset_btn {
    padding: 18px 70px 18px 27px !important;
}

.btn-login-center .dxbl-btn.login_btn,
.btn-reset-center .dxbl-btn.reset_btn {
    margin: auto;
}


.reset_btn {
    padding: 22px 74px 19px 32px !important;
    line-height: 20px;
}

.form-group .custom-field {
    border: 2px solid #D9D9D9 !important;
    border-radius: 0px !important;
}

.custom-field input {
    border: 0px solid #D9D9D9 !important;
    border-radius: 0px !important;
}


.text-danger {
    height: auto;
}

.formfield .dxbl-fl-ctrl-nc,
.dxbl-fl-empty-caption + .dxbl-fl-ctrl {
    margin-top: 0px !important;
}


/* Help */
.help-responsive-img {
    max-width: 40%;
    height: auto;
    object-fit: cover;
    /* Prevent the image from stretching. So it crops the image to prevent from awkward stretching */
}

@media(max-width:600px) {

    .help-responsive-img {
        width: 100%;
        max-width: unset;
    }
}

.row .help-ul-pad-left {
    padding-left: 3rem;
}