body {
    font-family: 'Roboto', sans-serif;
}

a:hover {
    text-decoration: none;
}

/*********** HEADER ***********/
header h4 {
    font-size: 24px;
    color: var(--text-header-desc, #3b4c6d);
    margin-top: 36px;
}

header .nav {
    font-size: 18px;
}

header .top-back {
    position: relative;
}

header .top-back::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--img-back-top) center;
    filter: var(--img-back-top-filter);
    background-size: cover;
}

header .top-back div {
    position: relative;
}

.navbar {
    padding: 10px;
}

.nav .logo {
    padding-left: 0;
    margin-right: 0;
}

.nav .logo img, .logo-max-sized {
    max-height: 80px;
    max-width: 160px;
}

.nav .logo img, .logo-min-sized {
    max-height: 40px;
    max-width: 80px;
}

.logo-max-sized-2 {
    max-height: 160px;
    max-width: 160px;
}

.nav a:hover {
    color: #ffffff;
}

.nav a.primary {
    color: var(--color-primary);
}

.nav a.primary:hover {
    color: black;
}

.loader-spinner {
    color: var(--spinner-color);
}

/*********** HEADER ***********/

/*********** SEARCH ***********/

td .slot-busy {
    color: #000;
    background-color: transparent;
}

td .slot-available {
    background-color: var(--color-primary);
    border-radius: 5px;
    color: #fff;
}

td .slot-available:hover {
    cursor: pointer;
    background-color: #497aab;
}

td .slot-available-online {
    background-color: var(--color-primary);
    border-radius: 8px;
    color: #fff;
}

td .slot-available-online:hover {
    cursor: pointer;
    background-color: #497aab;
}

td .slot-available-onsite {
    background-color: var(--color-primary);
    border-radius: 8px;
    color: #fff;
}

td .slot-available-onsite:hover {
    cursor: pointer;
    background-color: #497aab;
}

.overflow-ellipsis {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

/************ CARDS ***********/
.generic-card .area select {
    background: #fff;
}

.area {
    border-radius: 10px;
    border: 1px solid #eee;
    background-color: #f8f9fa;
}

.generic-card {
    background-color: #fff;
    color: #000;
    border-radius: 8px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.generic-card.no-bg {
    background-color: transparent;
}

.generic-card .title span {
    font-size: 18px;
    font-weight: bolder;
    border-bottom: 5px solid var(--color-primary);
    margin-top: 0;
}

.form-card .title2 span {
    font-size: 18px;
    font-weight: bolder;
    border-bottom: 5px solid var(--color-primary);
    margin-top: 0;
}

.auth-form-card .title span {
    font-size: 24px;
    font-weight: bolder;
    border-bottom: 4px solid var(--color-primary);
    margin-top: 0;

}

.generic-card .form-group {
    margin-bottom: 30px;
}

.generic-card label {
    font-size: 16px;
}

.generic-card .form-group div {
    margin-top: 2px;
}

.generic-card button {
    padding: 4px 28px;
    font-size: 18px;
    text-transform: uppercase;
}

.generic-card .subscription-panel div span.title {
    width: 100px;
    display: inline-block;
}

.generic-card .subscription-panel div span.data {
    font-weight: bolder;
}

.generic-card .subscription-panel .div-info {
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 15px 20px;
}

.sub-card .title {
    color: var(--color-primary);
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    width: 100% !important;
}

.sub-card .key {
    font-weight: bold;
}

.sub-card {
}

.sub-card.notes {
    background: var(--background-primary-light-12);
    padding: 5px 10px;
    border-radius: 10px;
}

.sub-card.notes .note-file > a {
    color: black;
    text-decoration: none;
}

.sub-card.notes .note-file > a:hover {
    color: var(--color-primary);
    text-decoration: underline;
    font-weight: bold;
}

.fs-22 {
    font-size: 22px;
}

.fs-20 {
    font-size: 20px;
}

.fs-16 {
    font-size: 16px;
}

.fs-12 {
    font-size: 12px;
}

.lh-40 {
    line-height: 40px;
}

.gray-border {
    border: 2px solid #b7b7b7;
}

.gray-border-left {
    border-left: 2px solid #b7b7b7;
}

.gray-border-right {
    border-right: 2px solid #b7b7b7;
}

.maxw-400 {
    max-width: 400px;
}

.maxw-500 {
    max-width: 500px;
}

.maxw-600 {
    max-width: 600px;
}

.maxw-700 {
    max-width: 600px;
}

.maxw-800 {
    max-width: 800px;
}

.maxw-1000 {
    max-width: 1000px;
}

.maxw-1200 {
    max-width: 1200px;
}

.maxw-1400 {
    max-width: 1400px;
}

.minh-100 {
    min-height: 100px;
}

.minh-200 {
    min-height: 200px;
}

.minh-300 {
    min-height: 300px;
}

.minh-400 {
    min-height: 400px;
}

.minh-500 {
    min-height: 500px;
}

.maxh-400 {
    max-height: 400px;
}

.maxh-500 {
    max-height: 500px;
}

.maxh-600 {
    max-height: 600px;
}

.maxh-700 {
    max-height: 600px;
}

.maxh-800 {
    max-height: 800px;
}

.maxh-1000 {
    max-height: 1000px;
}

.maxh-1200 {
    max-height: 1200px;
}

.text-blue {
    color: var(--color-primary);
}

.border-blue {
    border-color: var(--border-color-primary);
}

.icon-feature {
    filter: var(--icon-filter);
}

.relative {
    position: relative;
}

.sticky-top-default {
    position: sticky;
    top: 0;
    z-index: 10;
}

.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    /* add padding to account for vertical scrollbar */
    padding-right: 20px;

    z-index: 100000 !important;
}

.form-control::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #ababab;
    opacity: 1;
    /* Firefox */
}

.form-control::-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #ababab;
}

.form-control::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #ababab;
}

.h4, h4 {
    font-size: 18px;
}

ul {
    list-style: none;
    padding-left: 1rem;
}

.bg_pos {
    background-size: contain;
    background-repeat: no-repeat no-repeat;
    background-position: center;
}

.container {
    max-width: 960px;
}

.d-none {
    display: none;
}

.modal {
    overflow-x: hidden;
    overflow-y: auto;
}

.modal-title {
    line-height: 24px;
    font-size: 18px;
    width: 90%;
    float: left;
    color: #fff;
}

.modal-title::first-letter {
    text-transform: uppercase;
}

.modal-body {
    color: #000;
    font-size: 16px;
}

.popup-charge .alert-title {
    display: block;
    font-weight: bold;
    margin-bottom: 15px;
}

.popup-charge .alert-message {
    display: block;
}

.popup-charge .amount-message {

}

.bg-success, .btn-success, .btn-success:focus, .modal.success .modal-header {
    background-color: var(--bg-success);
}


.bg-danger, .btn-danger, .btn-danger:focus, .modal.danger .modal-header {
    background-color: var(--bg-danger);
}

.bg-warning, .btn-warning, .btn-warning:focus, .modal.warning .modal-header {
    background-color: var(--bg-warning);
}

.bg-info, .btn-info, .btn-info:focus, .modal.info .modal-header {
    background-color: var(--bg-info);
}

.bg-primary, .btn-primary, .btn-primary:focus, .modal.primary .modal-header {
    background-color: var(--bg-primary);
}

.modal-header.bg-primary {
    background-color: var(--bg-primary) !important;
}

.btn.btn-outline-primary:active,
.btn.btn-outline-primary:focus-visible {
    background-color: var(--bg-primary) !important;
    border-color: var(--btn-border-color-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--gradient-color-rgb), 0.5) !important;
    color: white !important;
}

.btn.btn-outline-primary:active:focus-visible {
    background-color: white !important;
    color: var(--btn-color-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--gradient-color-rgb), 0.5);
}



.modal.secondary .modal-header {
    background-color: lightgray;
}

.modal.secondary .modal-header > .modal-title {
    color: black;
}

.dropdown-item {
    font-size: 14px;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--bg-primary) !important;
}

.gradient-back {
    padding: 1px;
    -webkit-box-shadow: 0 31px 57px 12px rgba(0, 0, 0, 0.26);
    -moz-box-shadow: 0 31px 57px 12px rgba(0, 0, 0, 0.26);
    box-shadow: 0 31px 57px 12px rgba(0, 0, 0, 0.26);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#43a3fe", endColorstr="#90c7ff", GradientType=1);
}

.rainbow {
    position: relative;
    min-height: 856px;
}

.rainbow::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--img-advantages);
    filter: var(--img-advantages-filter);
    background-position: center right;
    background-repeat: no-repeat;
}

.rainbow div {
    position: relative;
}

.card {
    border: 0;
}

.h-40 {
    height: 40px;
}

.bl-center {
    float: none;
    margin: 0 auto;
}

.role {
    margin: 0;
}

.no-sort::after {
    display: none !important;
}

.no-sort::before {
    display: none !important;
}

.no-sort {
    pointer-events: none !important;
    cursor: default !important;
}

#cosmetic-block {
    height: 434px;
    padding: 1px;
    background-image: var(--img-bg-cosmetic);
    filter: var(--img-bg-cosmetic-filter);
    background-size: cover;
    -webkit-box-shadow: 0 31px 57px 12px rgba(0, 0, 0, 0.26);
    -moz-box-shadow: 0 31px 57px 12px rgba(0, 0, 0, 0.26);
    box-shadow: 0 31px 57px 12px rgba(0, 0, 0, 0.26);
}

input[type='radio'] {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    outline: none;
    border: 2px solid #000;
    top: 2px;
    position: relative;
}

input[type='radio']:before {
    content: '';
    display: block;
    width: 50%;
    height: 50%;
    margin: 20% auto;
    border-radius: 50%;
}

.textfield-appearance {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
}

select {
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    -text-indent: 4px;
    cursor: pointer;
    background-repeat: no-repeat !important;
    background-position: right .75rem center !important;
    background-size: 16px 12px !important;
}

select:disabled, .form-control:disabled, .form-control[readonly] {
    background-color: #e9ecef !important;
}

.mt-2 {
    margin-top: 1em;
}

input[type="radio"]:checked:before {
    border: 4px solid #000;
    background: #000;
}

footer {
    background-color: var(--background-primary-light);
}

footer .copyright {
    padding: 10px 10px 10px 28px;
    font-size: 16px;
    color: var(--text-copy);
}

footer .social-buttons {
    text-align: center;
}

footer .social-buttons a img {
    width: 40px;
    margin: 6px;
}

footer .menu {
    padding: 40px 0 20px;
    font-size: 14px;
}

footer .menu ul {
    padding: 0 2rem;
}

footer .menu ul:nth-child(2) {
    margin: 0;
}

footer .menu ul > li > a {
    color: #fff;
}

footer .menu ul > li:nth-child(n+2) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
}

footer .menu ul > li:nth-child(n+2):hover {
    text-decoration: underline;
}

footer .menu ul > li:first-child {
    background-color: var(--color-primary);
    color: #fff;
    padding: 5px 10px;
    line-height: 12px;
    margin-bottom: 14px;
}

footer .menu ul > li:first-child i {
    cursor: pointer;
    display: none;
}

.datetimepicker table {
    color: #000;
    font-size: 16px;
}

header .active a {
    color: #fff;
}

.username .active {
    font-size: 15px;
}

.font-bold {
    font-weight: bold;
}

.w-100 {
    width: 100%;
}

.my-1 {
    margin: 0.9em 0;
}

.mr-03 {
    margin-right: .3em;
}

.pl-1 {
    padding-left: 1em !important;
}

.pr-1 {
    padding-right: 1em !important;
}

.no-indent {
    text-indent: 0;
}

.btn-loading img {
    width: 25px;
}

.doctor-menu {
    width: 225px !important;
}

.ap-cont .fa-caret-up {
    position: absolute;
    top: -30px;
    font-size: 50px;
    left: 20px;
    color: #fff;
}

.modal .btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.modal .btn-secondary:hover {
    color: #fff;
    background-color: #5a6268;
    border-color: #545b62;
}


.patient-appointments {
    padding: 1px;
    position: relative;
}

.patient-appointments::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--img-register);
    background-size: cover;
    background-repeat: no-repeat;
    filter: var(--img-register-filter);
}

.patient-appointments .btn-sm {
    font-size: 12px;
}

.patient-appointments [data-show-id] {
    font-size: 14px;
}

.patient-appointments > div {
    position: relative;
}

#form-section h1 div {
    text-transform: uppercase;
}

#navbarResponsive div.nav {
    min-height: 180px;
}

@media (max-width: 980px) {
    footer .menu {
        padding: 76px 0;
    }
}

@media (max-width: 900px) {
    #menu_small {
        display: block;
        right: 2em;
        position: absolute;
        top: 15px;
    }

    #navbarResponsive {
        display: none;
    }
}

@media (max-width: 780px) {
    .copyright {
        text-align: center;
    }
}

@media (max-width: 640px) {
    footer, footer .copyright, footer .social-buttons, footer .menu .col-md-4, footer .menu {
        width: 100%;
        max-width: 100%;
        display: block !important;
        float: left;
    }

    footer .menu {
        margin-left: auto;
        margin-right: auto;
    }

    footer .menu .col-md-4 {
        margin-bottom: 0;
    }

    footer .menu ul:nth-child(2) {
        margin: 10px 0;
    }

    footer .menu .col-md-4:nth-child(n+2) li:nth-child(n+2) {
        display: none;
    }

    footer .menu ul > li:first-child {
        padding: 13px;
        font-size: 18px;
    }

    footer .menu ul > li:first-child i {
        display: block;
        float: right;
    }

    footer .menu ul > li > a {
        font-size: 16px;
        padding-left: 15px;
    }
}