/*Define custom here*/
@font-face {
    font-family: 'Area_Normal_Regular';
    src: url('../../assets/fonts/Area_Normal_Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Area_Normal_Black';
    src: url('../../assets/fonts/Area_Normal_Black.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Area_Normal_SemiBold';
    src: url('../../assets/fonts/Area_Normal_SemiBold.ttf') format('truetype');
    font-style: normal;
}

@font-face {
    font-family: 'Area_Normal_Bold';
    src: url('../../assets/fonts/Area_Normal_Bold.ttf') format('truetype');
    font-style: normal;
}

/*Variables*/
:root {
    /*Custom fonts*/
    --area-regular: 'Area_Normal_SemiBold';
    --area-bold: 'Area_Normal_Bold';
    --font-family-main: var(--area-regular);
    --font-family-bold: var(--area-bold);

    /*General color variables*/
    --accent-color-decimal: 206, 19, 29;
    --primary-text-color-decimal: 206, 19, 29;
    --link-color-decimal:  206, 19, 29;
    --layout-bg: #fbf6eb;
    --layout-secondary-bg: #F6DEBE;
    --container-bg: #fbf6eb;
    --custom-background-color: #f8edd7;
    --text-on-accent-color: #fbf6eb;
    --section-stripe-bg: var(--container-bg);
    --section-stripe-bg-even: var(--container-bg);
    --line-ripple-color: var(--primary-text-color);
    --line-ripple-color-hover: var(--primary-text-color);
    --calenadr-col-bg: var(--custom-background-color);
    --calenadr-working-hours-bg: #f8e7cd;
    --calendar-popup-bg: var(--container-bg);
    --menu-surface-color: var(--primary-text-color);
    --menu-surface-bg: var(--container-bg);
    --field-label-color: var(--primary-text-color);
    --hover-button-bg: #AE000C;
    --disabled-button-color: #785050;
    --disabled-button-bg: #E4DCDC;
    --header-search-bg: #f8edd7;
    --main-sidebar-icons-bg: var(--custom-background-color);
    --secondary-sidebar-icons-bg: var(--custom-background-color);
    --secondary-text-color: var(--primary-text-color);
    --grey-text-color: var(--primary-text-color);
    --container-border-radius: 0;
    --menu-surface-shadow-color: transparent;

    /*button*/
    --btn-flat-custom-bg: #fae6cd;
    --button-font-family: var(--font-family-bold);
    --btn-flat-custom-hover-bg: #f0d9af;
    --btn-flat-bg-hover: #fae6cd;
    --button-shadow: none;

    /*header*/
    --header-information-link-color: var(--link-color);
    --top-bar-link-color: var(--link-color);
    --top-bar-menu-icon-color: var(--link-color);

    /*footer*/
    --footer-background: var(--layout-bg);
    --footer-link-color: var(--link-color);
    --footer-copy-text-background: var(--layout-bg);
    --footer-input-color: var(--primary-text-color);
    --footer-text-color: var(--primary-text-color);

    /*Cards*/
    --card-box-bg: var(--custom-background-color);
    --organization-image-bg: var(--custom-background-color);
    --category-list-background: var(--custom-background-color);
    --card-image-bg: var(--container-bg);
    --expert-card-background: var(--custom-background-color);
    --card-sidebar-bg: var(--layout-bg);
    --card-radius: 32px;
    --card-box-shadow: none;
    --card-padding: 24px;
    --card-content-padding: 0;
    --card-image-width: 225px;
    --card-image-height: 225px;
    --rating-box-bg: rgba(var(--layout-secondary-bg), .8);

    /*Loading spinner*/
    --spinner-default-color: var(--accent-color);

    --tag-border-radius: 34px;
    --tag-border: none;
    --tag-background: #F6DEBE;
    --heading-box-border: none;
    --custom-border-color: transparent;
    --category-list-shadow: none;
    --disabled-color: #785050;
    --landing-container-vertical-indent: 60px;
}

/*Define custom style here*/

.user-image .photo,
.form-note {
    color: var(--primary-text-color) !important;
}

.header .brand-logo img,
mobile-side-bar-menu .brand-logo img {
    width: auto !important;
    min-width: initial !important;
    max-width: initial !important;
}

@media (max-width: 991px) {
    .header .brand-logo.__small-on-mobile img {
        width: auto !important;
        min-width: initial !important;
        max-width: initial !important;
    }
}

.card .card-image .status {
    border-color: var(--custom-background-color) !important;
}

@media (min-width: 768px) {
    landing-page h2 {
        font-size: 36px !important;
    }
}

.container.__fixed-width,
.container {
    max-width: 1400px !important;
}

.footer {
    border-top: 1px solid var(--accent-color);
    border-radius: 0 !important;
}