/*general variables*/
:root {
    --doc-height: 100%;
    --accent-color-decimal: 139, 195, 74;
    --black-overlay-30: rgba(0, 0, 0, .3);
    --black-overlay-50: rgba(0, 0, 0, .5);
    --accent-color: rgb(var(--accent-color-decimal));
    --grey-text-color-decimal: 77, 77, 77;
    --grey-text-color: rgb(var(--grey-text-color-decimal));
    --secondary-text-color: var(--grey-text-color);
    --primary-text-color-decimal: 0, 0, 0;
    --primary-text-color: rgb(var(--primary-text-color-decimal));
    --link-color-decimal: 51, 77, 204;
    --link-color: rgb(var(--link-color-decimal));
    --text-on-accent-color: #fff; /*should be contrasting to the accent color (buttons, header bg, etc.)*/
    --input-focus-color: var(--accent-color);
    --custom-section-color: #fff;
    --success-color: #4caf50;
    --success-color-decimal: 76, 175, 80;
    --container-bg-decimal: 255, 255, 255;
    --container-bg: #fff;
    --container-border-radius: 24px;
    --error-color-decimal: 204, 51, 50;
    --error-color: rgb(var(--error-color-decimal));
    --layout-bg: #f2f2f2;
    --notification-bg: var(--container-bg);
    --custom-background-color: var(--layout-bg);
    --layout-text-color: var(--primary-text-color);
    --booking-form-bg: var(--layout-bg);
    --questionnaire-form-bg: var(--layout-bg);
    --layout-secondary-bg: #e8e8e8;
    --warning-color-decimal: 255, 153, 0;
    --warning-color: rgb(var(--warning-color-decimal));
    --warning-secondary-color: #f5cc01;
    --disabled-color: #9e9e9e;
    --mdc-checkbox-state-layer-size: 18px;
    --menu-surface-color: #000;
    --menu-surface-bg: #fff;
    --menu-surface-radius: 12px;
    --menu-panel-radius: 24px;
    --menu-surface-shadow-color: rgba(0, 0, 0, .2);
    --menu-item-hover-bg: rgba(0, 0, 0, .04);
    --calenadr-col-bg: #f2f2f2;
    --calenadr-border-color: #d8d8d8;
    --calendar-event-bg: #fff4e2;
    --calenadr-working-hours-bg: #fff;
    --calendar-popup-bg: #fff;
    --calendar-bg: var(--layout-bg);
    --calendar-disabled-days-color: #d8d8d8;
    --text-high-emphasis-color: rgba(var(--primary-text-color-decimal), .8);
    --text-medium-emphasis-color: rgba(var(--primary-text-color-decimal), .6);
    --text-low-emphasis-color: rgba(var(--primary-text-color-decimal), .4);
    --chip-bg: var(--layout-bg);
    --chip-border-radius: 8px;

    /*Landing*/
    --landing-content-block-bg: rgba(255, 255, 255, .6);
    --landing-category-icon-width: 140px;
    --landing-btn-width: auto;
    --landing-container-vertical-indent: 90px;
    --landing-page-divider-color: transparent;
    --landing-page-border-radius: var(--container-border-radius);
    --success-stories-image-visability: inline-block;
    --success-stories-stars-visability: none;
    --call-background: #575757;
    --success-stories-item-border: var(--primary-text-color);
    --success-stories-item-shadow: none;
    --success-stories-item-background: transparent;

    /*Custom fonts*/
    --font-family-main: Roboto, sans-serif;
    --font-family-bold: Roboto, sans-serif;
    --font-family-bold-weight: 700;
    --font-family-semibold-weight: 500;

    /*Dashboard*/
    --dashboard-item-bg: var(--container-bg);
    --dashboard-item-box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    --dashboard-item-hover-box-shadow: 0 1px 12px -1px rgba(0, 0, 0, .3);
    --dashboard-item-border-radius: 4px;
    --dashboard-item-font-family: var(--font-family-main);
    --dashboard-item-size: 222px;
    --dashboard-heading-font-size: 34px;
    --dashboard-wrapper-width: 992px;

    /*Buttons*/
    --button-height: 42px;
    --button-height-xs: 28px;
    --button-padding: 14px;
    --button-radius: 24px;
    --button-font-weight: normal;
    --button-font-family: var(--font-family-main);
    --button-font-size: 16px;
    --button-color: var(--text-on-accent-color);
    --button-bg: var(--accent-color);
    --hover-button-bg: rgba(var(--accent-color-decimal), .1);
    --error-button-bg: var(--error-color);
    --error-hover-button-bg: var(--error-color);
    --button-shadow: none;
    --button-hover-shadow: 0px 1px 1px rgba(0, 0, 0, .25);
    --btn-text-transform: none;
    --btn-round-size: 48px;
    --btn-round-disabled-color: hsla(0, 0%, 100%, .6);
    --btn-round-disabled-hover-color: #fff;
    --btn-round-active-color: var(--accent-color);
    --disabled-button-color: rgba(0, 0, 0, .7);
    --disabled-button-flat-bg: transparent;
    --disabled-button-bg: #e0e0e0;
    --btn-flat-custom-color: var(--primary-text-color);
    --button-large-height: 56px;
    --button-large-radius: 28px;
    --button-large-font-size: 18px;
    --btn-flat-border-color: var(--accent-color);
    --btn-flat-color: var(--accent-color);
    --btn-flat-shadow: none;
    --btn-flat-border-size: 1px;
    --btn-flat-text-transform: none;
    --btn-flat-bg: transparent;
    --btn-flat-bg-hover: transparent;
    --btn-flat-custom-bg: #fff;
    --btn-flat-custom-hover-bg: #fff;
    --btn-flat-custom-bg-hover: var(--btn-flat-custom-bg);
    --specific-platform-btn-visibility: inline-block;
    --expert-button-width: initial;

/*Top bar*/
    --top-bar-height: 75px;
    --top-bar-bg: var(--layout-bg);
    --top-bar-links-text-size: 14px;
    --top-bar-links-font-weight: normal;
    --top-bar-links--font-family: var(--font-family-main);
    --top-bar-menu-icon-color: var(--primary-text-color);
    --user-image-top-bar-bg: var(--container-bg);

/*Header*/
    --section-stripe-bg: #f5f5f5;
    --section-stripe-bg-even: #f5f5f5;
    --header-information-link-color: #fff;
    --top-bar-link-color: var(--primary-text-color);
    --top-bar-link-active-border-color: var(--accent-color);
    --header-information-link-font-size: 16px;
    --header-information-link-font-family: var(--font-family-main);
    --header-information-link-text-shadow: none;
    --header-search-radius: 4px;
    --header-border: 1px solid rgba(0, 0, 0, .2);
    --header-search-bg: #fff;
    --header-search-color: var(--primary-text-color);
    --header-search-placeholder-color: #757575;

/*Footer*/
    --footer-accent-button-bg: var(--accent-color);
    --footer-background: #e7e7e7;
    --footer-copy-text-background: #cecece;
    --footer-copy-text-border-top: none;
    --footer-link-color: #616161;
    --footer-input-color: #9e9e9e;
    --footer-text-color: #212121;
    --footer-logo-custom-visibility: block;
    --footer-image-visability: none;
    --footer-image: url('/assets/img/logo.png');
    --footer-field-value-color: var(--primary-text-color);
    --footer-line-ripple-color: #0000006b;
    --custom-footer-banner-visability: none;

/*Category*/
    --category-list-background: #fff;
    --category-list-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    --category-font-size: 20px;

/*Cards*/
    --card-radius: 12px;
    --card-padding: 0;
    --card-content-padding: 16px;
    --card-image-width: 260px;
    --card-image-height: 200px;
    --card-panel-radius: 4px;
    --card-box-bg: var(--layout-bg);
    --card-box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    --card-image-bg: var(--card-box-bg);
    --card-hover-shadow-color: rgba(0, 0, 0, .2);
    --organization-image-bg: var(--card-box-bg);
    --info-box-bg: rgba(var(--container-bg-decimal), .8);
    --info-box-radius: 12px;
    --card-secondary-bg: #dcdcdc;

/*Profile*/
    --profile-image-width: 100%;
    --profile-image-height: 100%;
    --profile-image-radius: 4px;
    --profile-name-font-size: 48px;
    --profile-name-font-weight: 400;

/*Other*/
    --container-wrap-width: 1280px;
    --header-search-icon-color: var(--primary-text-color);
    --heading-color: var(--primary-text-color);
    --heading-box-title-color: rgba(51, 51, 51, .8);
    --main-sidebar-icons-bg:  #fff;
    --secondary-sidebar-icons-bg: var(--layout-bg);
    --main-sidebar-icons-color: var(--primary-text-color);
    --visit-reason-table-header-bg: var(--container-bg);
    --count-timer-color: var(--accent-color);
    --settings-header-title-font-weight: 500;
    --settings-header-background: #fff;
    --expert-card-border: 1px solid var(--card-sidebar-border);
    --expert-card-background: #eee;
    --review-border-radius: 0;
    --main-sidebar-background: var(--layout-bg);
    --card-sidebar-border: #e0e0e0;
    --card-sidebar-bg: #eee;
    --feedback-text-color: inherit;
    --online-status-switcher-visibility: block;
    --main-content-background: transparent;
    --social-icon-width: 50px;
    --switcher-bg: var(--layout-bg);
    --field-label-color: var(--grey-text-color);
    --field-value-color: var(--primary-text-color);
    --field-value-placeholder-color: #757575;
    --line-ripple-color: #0000006b;
    --custom-border-color: #0000006b;
    --custom-border-radius: var(--card-radius);
    --custom-padding-size: 16px;
    --actions-buttons-alignment: space-between;
    --line-ripple-color-hover: #000;
    --chat-room-message-outgoing-bg: #f7f7f7;
    --chat-room-message-incoming-bg: #f1f8e9;
    --chat-textarea-bg: #fff;
    --dashboard-statistics-item-bg: #f5f5f5;
    --faq-item-bg: var(--card-box-bg);
    --faq-item-hover-bg: var(--menu-item-hover-bg);
    --num-field-bg: rgba(var(--accent-color-decimal), .4);
    --num-field-hover-bg: rgba(var(--accent-color-decimal), .6);

/*Tags*/
    --tag-border-radius: 4px;
    --tag-border: 1px solid rgba(0, 0, 0, .12);
    --tag-background: #fff;
    --tag-background-hover: rgba(0, 0, 0, .04);
    --tag-color-default: var(--primary-text-color);
    --tag-color-primary: var(--text-high-emphasis-color);
    --tag-color-secondary: var(--text-medium-emphasis-color);
    --tag-text-transform: none;
    --custom-tag-bg: rgba(var(--accent-color-decimal), .2);
    --custom-tag-radius: var(--tag-border-radius);

/*call*/
    --call-actions-btn-red: var(--error-color);
    --call-actions-btn-custom-bg: var(--error-color);
    --call-actions-btn-custom-active-bg: var(--success-color);
    --determinate-color-decimal: 76, 175, 80;
    --determinate-color: rgb(var(--determinate-color-decimal));
    --determinate-text-color: rgba(var(--determinate-color-decimal), .2);
    --progress-bar-color: #fbc02d;
    --progress-bar-text-color: #ffee58;
    --call-image-opacity: 1;

/*slider*/
    --slider-track-height: 16px;
    --slider-track-background: var(--layout-bg);

/*Loading spinner*/
    --spinner-color: #d8d8d8;
    --spinner-default-color: #0f9d58;
    --spinner-danger-color: var(--error-color);
    --spinner-success-color: var(--spinner-default-color);
    --spinner-disabled-color: #d8d8d8;
    --loader-size: 24px;
    --loader-size-xs: 20px;
    --loader-size-l: 64px;

    --heading-text-transform: none;
    --heading-box-border: 1px solid #d8d8d8;
}