:root {
    /* =========================================================================
       Foundation
       ========================================================================= */

    /* Document */
    --doc-height: 100%;

    /* Layout & Grid */
    --container-wrap-width: 1280px;
    --content-min-width: 320px;
    --grid-side-indent: .75rem;

    /* Z-Index Scale */
    --z-index-1: 100;
    --z-index-2: 200;
    --z-index-3: 300;
    --z-index-4: 400;
    --z-index-5: 500;
    --z-index-6: 600;
    --z-index-7: 700;
    --z-index-8: 800;
    --z-index-9: 900;
    --z-index-10: 1000;

    /* Animations */
    --transition-duration-s: .1s;
    --transition-duration-m: .2s;
    --transition-duration-l: .33s;

    /* =========================================================================
       Color palette
       ========================================================================= */

    /* Base */
    --white-color: #fff;
    --black-color: #000;

    /* Accent (brand) */
    --accent-color-decimal: 139, 195, 74;
    --accent-color: rgb(var(--accent-color-decimal));
    --text-on-accent-color: #fff; /*should be contrasting to the accent color (buttons, header bg, etc.)*/

    /* Text */
    --primary-text-color-decimal: 0, 0, 0;
    --primary-text-color: rgb(var(--primary-text-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);
    --tertiary-text-color: #9e9e9e;
    --light-grey-text-color: #e0e0e0;
    --inverted-text-color: #fbfbfb;
    --inversion-primary-text-color-decimal: 255, 255, 255;
    --inversion-primary-text-color: rgb(var(--inversion-primary-text-color-decimal));
    --primary-yellow-text-color: #f5cc01;
    --text-high-emphasis-color: rgba(var(--primary-text-color-decimal), .8);
    --text-medium-emphasis-color: rgba(var(--primary-text-color-decimal), .6);
    --text-highlighted-bg: #ffdd1b;
    --heading-color: var(--primary-text-color);
    --heading-text-transform: none;

    /* Link */
    --link-color-decimal: 51, 77, 204;
    --link-color: rgb(var(--link-color-decimal));

    /* Status */
    --success-color: #4caf50;
    --success-color-decimal: 76, 175, 80;
    --error-color-decimal: 204, 51, 50;
    --error-color: rgb(var(--error-color-decimal));
    --warning-color-decimal: 255, 153, 0;
    --warning-color: rgb(var(--warning-color-decimal));
    --warning-secondary-color: #f5cc01;
    --info-color: #f5edc4;
    --info-color-lighten: #fff9c4;
    --info-color-darken: #ffd54f;
    --disabled-color: #9e9e9e;

    /* Neutral surface & divider colors */
    --light-grey-bg-color: #eee;
    --divider-color: #E6E8EC;

    /* =========================================================================
       Typography
       ========================================================================= */

    --font-family-main: Roboto, sans-serif;
    --font-family-bold: Roboto, sans-serif;
    --font-family-bold-weight: 700;

    --font-size-xs: 12px;
    --font-size-s: 14px;
    --font-size-m: 16px;
    --font-size-l: 18px;
    --font-size-xl: 20px;
    --font-size-xxl: 24px;
    --font-size-xxxl: 26px;
    --font-size-xxxxl: 30px;
    --font-size-xxxxxl: 40px;
    --font-size-xxxxxxl: 50px;

    /* =========================================================================
       Spacing & sizing
       ========================================================================= */

    /* Indents */
    --indent-xxxs: 2px;
    --indent-xxs: 4px;
    --indent-xs: 6px;
    --indent-s: 8px;
    --indent-m: 12px;
    --indent-l: 14px;
    --indent-xl: 16px;
    --indent-xxl: 24px;
    --indent-xxxl: 32px;

    /* Icon sizes */
    --icon-size-xxs: 16px;
    --icon-size-xs: 18px;
    --icon-size-s: 24px;
    --icon-size-m: 32px;
    --icon-size-l: 80px;
    --icon-size-xl: 100px;

    /* Round sizes */
    --round-size-xs: 30px;
    --round-size-s: 40px;
    --round-size-ml: 80px;
    --round-size-l: 100px;

    /* =========================================================================
       Surfaces (containers, cards, notifications)
       ========================================================================= */

    /* Container / layout */
    --container-bg: #fff;
    --container-border-radius: 24px;
    --layout-bg: #0e3a5d05;
    --layout-text-color: var(--primary-text-color);
    --layout-secondary-bg: rgba(var(--accent-color-decimal), .2);

    /* Custom theming hooks */
    --custom-background-color: var(--container-bg);
    --custon-box-shadow: 0 0 12px 0 rgba(12, 55, 78, .3);
    --custom-header-image: none;
    --custom-cms-header-image: none;
    --custom-faq-image: none;
    --custom-border-radius: var(--card-radius);
    --custom-padding-size: 24px;

    /* Cards */
    --card-radius: 12px;
    --card-border-radius: 4px;
    --card-panel-radius: 12px;
    --card-bg: var(--container-bg);
    --card-box-bg: var(--layout-secondary-bg);
    --card-image-bg: rgba(var(--accent-color-decimal), .1);
    --card-image-width: 180px;
    --card-image-height: 180px;
    --card-round-image-size: 120px;
    --card-secondary-bg: rgba(var(--accent-color-decimal), .1);
    --card-secondary-radius: var(--card-radius);
    --card-shadow: 0 1px 2px var(--menu-surface-shadow-color), 0 4px 12px var(--menu-surface-shadow-color);
    --card-shadow-hover: 0 1px 2px var(--menu-surface-shadow-hover-color), 0 4px 12px var(--menu-surface-shadow-hover-color);
    --card-max-width: 460px;
    --card-medium-max-width: 700px;
    --card-sidebar-border: #e0e0e0;
    --card-sidebar-bg: #eee;
    --plain-card-underline: #eee;

    /* Notifications */
    --notification-bg: var(--container-bg);

    /* Highlight */
    --highlight-bg: transparent;

    /* =========================================================================
       Buttons
       ========================================================================= */

    --button-height: 44px;
    --button-height-s: 32px;
    --button-height-xxs: 24px;
    --button-height-xs: 28px;
    --button-height-small: 38px;
    --button-large-height: var(--field-height);
    --button-padding: 14px;
    --button-radius: 4px;
    --button-font-weight: normal;
    --button-font-family: var(--font-family-bold);
    --button-font-size: 16px;
    --button-color: var(--text-on-accent-color);
    --button-bg: var(--accent-color);
    --button-hover-shadow: 0 1px 1px rgba(0, 0, 0, .25);
    --button-notification-size: 20px;
    --button-notification-size-xs: 12px;
    --btn-text-transform: none;
    --btn-round-m: 48px;
    --btn-round-active-color: var(--accent-color);
    --btn-shadow: 0 1px 2px 0 rgba(0, 0, 0, .28);
    --btn-shadow-hover: 0 1px 2px 0 rgba(0, 0, 0, .4);
    --btn-scroll-top-shadow: 0 4px 10px 2px rgba(0, 0, 0, .08), 0 1px 3px 2px rgba(0, 0, 0, .05);
    --btn-scroll-top-shadow-hover: 0 6px 12px 2px rgba(0, 0, 0, .05), 0 1px 7px 5px rgba(0, 0, 0, .03);
    --btn-flat-bg: transparent;
    --btn-flat-color: var(--accent-color);
    --btn-flat-custom-color: var(--primary-text-color);
    --btn-flat-border-color: var(--accent-color);
    --btn-flat-border-size: 2px;
    --btn-flat-shadow: none;
    --btn-flat-text-transform: none;
    --btn-flat-custom-bg: #fff;
    --btn-flat-custom-hover-bg: #fff;
    --btn-primary-bg: #000;
    --btn-primary-color: #fff;
    --error-button-bg: var(--error-color);
    --disabled-button-bg: #e0e0e0;
    --disabled-button-color: rgba(255, 255, 255, .6);
    --specific-platform-btn-visibility: inline-block;
    --expert-button-width: initial;

    /* =========================================================================
       Form fields & inputs
       ========================================================================= */

    --field-side-padding: 16px;
    --field-hint-padding: 0;
    --field-label-color: var(--grey-text-color);
    --field-value-color: var(--primary-text-color);
    --field-border-radius: var(--card-radius);
    --field-border-size: 1px;
    --field-border-color: #c2c9d2;
    --field-border: var(--field-border-size) solid var(--field-border-color);
    --field-height: 60px;
    --field-height-small: 44px;
    --field-background: var(--container-bg);
    --line-ripple-color: #0000006b;
    --line-ripple-color-hover: #000;
    --num-field-bg: rgba(var(--accent-color-decimal), .3);
    --num-field-hover-bg: rgba(var(--accent-color-decimal), .4);
    --element-highlight-color: #000;

    /* =========================================================================
       Chips & tags
       ========================================================================= */

    --chip-bg: var(--layout-secondary-bg);
    --chip-border-radius: 8px;

    --tag-border-radius: 24px;
    --tag-border: 1px solid rgba(0, 0, 0, .12);
    --tag-background: #fff;
    --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);

    /* =========================================================================
       Menus, dropdowns, accordions
       ========================================================================= */

    /* Menu surface */
    --menu-surface-color: #000;
    --menu-surface-bg: #fff;
    --menu-surface-radius: var(--card-radius);
    --menu-panel-radius: var(--card-radius);
    --menu-surface-shadow-color: rgba(0, 0, 0, .1);
    --menu-surface-shadow-hover-color: rgba(0, 0, 0, .15);
    --menu-item-hover-bg: rgba(var(--accent-color-decimal), .1);
    --menu-item-active-bg: rgba(var(--accent-color-decimal), .2);

    /* Dropdown */
    --dropdown-min-width: 150px;
    --dropdown-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12), 0 3px 1px -2px rgba(0, 0, 0, .2);
    --categories-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12), 0 3px 1px -2px rgba(0, 0, 0, .2);

    /* Accordion */
    --collapsible-header-bg: #f7f7f7;
    --collapsible-divider-shadow: 0 -1px 0 0 rgba(0, 0, 0, .15);

    /* FAQ */
    --faq-item-radius: var(--card-radius);
    --faq-item-bg: var(--card-bg);
    --faq-item-shadow: none;
    --faq-item-hover-bg: var(--menu-item-hover-bg);

    /* =========================================================================
       Feedback components (progress, spinner, slider, rating)
       ========================================================================= */

    /* Progress bar */
    --progress-bar-color: #fbc02d;
    --progress-bar-text-color: #ffee58;

    /* Slider */
    --slider-track-height: 4px;
    --slider-track-background: rgba(var(--accent-color-decimal), .2);

    /* Loading spinner */
    --spinner-color: #d8d8d8;
    --spinner-default-color: #0f9d58;
    --spinner-disabled-color: #d8d8d8;
    --loader-size: 24px;
    --loader-size-xs: 20px;
    --loader-size-l: 64px;

    /* Rating stars */
    --rating-star-filled-color: #f90;
    --rating-star-empty-color: #979797;
    --rating-star-size: 24px;

    /* =========================================================================
       Tables, toasts, badges, bars
       ========================================================================= */

    /* Tables */
    --striped-table-wrap-background: var(--card-secondary-bg);
    --striped-table-background: var(--layout-bg);
    --table-row-height: 65px;
    --slim-table-radius: 4px;

    /* Toast / cookie / notifications */
    --toast-color: #323232;
    --cookie-message-bg: #333;
    --prolongation-notification-bg: #fefae6;

    /* Badges */
    --common-badge-s: 12px;
    --common-badge-m: 20px;

    /* Horizontal bar */
    --horizontal-bar-height: 48px;
    --horizontal-bar-height-s: 40px;

    /* =========================================================================
       Miscellaneous components
       ========================================================================= */

    /* Review */
    --review-border-radius: 0;

    /* Image cropper */
    --image-cropper-holder-bg: #8e8e8e;
    --image-cropper-bg: #676767;

    /* Social */
    --social-icon-width: 50px;
    --linkedin-bg: #0077b5;
    --troubleshoot-button-bg: #ffca28;

    /* Signature */
    --signature-photo-width: 200px;
    --signature-photo-height: 100px;

    /* Subscription plan */
    --subscription-plan-label-height: 30px;

    /* =========================================================================
       Layout sections
       ========================================================================= */

    /* Top bar */
    --top-bar-height: 75px;
    --top-bar-mobile-height: 50px;
    --top-bar-bg: transparent;
    --top-bar-links-text-size: 14px;
    --top-bar-links-font-weight: normal;
    --top-bar-link-color-decimal: 0, 0, 0;
    --top-bar-link-color: rgb(var(--top-bar-link-color-decimal));

    /* Header */
    --section-stripe-bg: #f5f5f5;
    --section-stripe-bg-even: #f5f5f5;
    --header-information-link-color: #fff;
    --header-information-link-font-size: 16px;
    --header-information-link-font-family: var(--font-family-main);
    --header-information-link-text-shadow: none;
    --brand-logo-max-width: 175px;
    --static-link-height-desktop: 64px;
    --static-link-height-mobile: 48px;

    /* Side bar / Side nav */
    --sidebar-width: 224px;
    --sidenav-width: 320px;
    --side-bar-bg: var(--card-bg);
    --main-sidebar-background: var(--container-bg);
    --main-sidebar-icons-bg: #fff;
    --main-sidebar-icons-color: var(--primary-text-color);
    --secondary-sidebar-icons-bg: var(--container-bg);
    --online-status-switcher-visibility: block;

    /* Footer */
    --footer-accent-button-bg: var(--accent-color);
    --footer-background: #e7e7e7;
    --footer-border-top: 0;
    --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-field-value-color: var(--primary-text-color);
    --footer-line-ripple-color: #0000006b;
    --custom-footer-banner-visability: none;

    /* =========================================================================
       Feature-specific
       ========================================================================= */

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

    /* Booking / Questionnaire forms */
    --booking-form-bg: var(--container-bg);
    --questionnaire-form-bg: var(--container-bg);
    --waiting-room-form-max-width: 616px;

    /* Chat */
    --chat-header-height: 80px;
    --chat-sidebar-width: 350px;
    --chat-message-radius: 12px;
    --chat-message-outgoing-bg: #575757;
    --chat-room-message-outgoing-bg: #f7f7f7;
    --chat-room-message-incoming-bg: #f1f8e9;
    --chat-textarea-bg: #fff;
    --chat-textarea-height: 34px;

    /* Dashboard */
    --dashboard-statistics-item-bg: #f5f5f5;

    /* Calendar */
    --calenadr-col-bg: #f2f2f2;
    --calenadr-border-color: #d8d8d8;
    --calenadr-working-hours-bg: #fff;
    --calendar-event-bg: #fff4e2;
    --calendar-popup-bg: #fff;
    --calendar-disabled-days-color: #d8d8d8;

    /* Event */
    --event-logo-size: 250px;
    --event-logo-size-mobile: 120px;
    --files-confirm-bg: #f2f2f2;

    /* Call */
    --call-background: #575757;
    --call-image: url('/assets/img/call-image.png');
    --call-image-opacity: 1;
    --call-min-width-desktop: 1030px;
    --call-side-panel-width: 320px;
    --event-call-sidebar-width: 350px;
    --call-prescription-width: 850px;
    --call-sick-note-width: 850px;
    --call-panel-color: #e8e8e8;
    --call-panel-background: #333;
    --call-panel-radius-size: 5px;
    --call-panel-border: 2px solid #2d2d2d;
    --call-panel-border-color: #e8e8e8;
    --call-panel-bar-height: 50px;
    --call-panel-footer-height: 74px;
    --call-panel-btn-background: #171717;
    --call-actions-btn-custom-bg: var(--error-color);
    --call-actions-btn-custom-active-bg: var(--success-color);
    --call-actions-btn-custom-color: #fff;
    --call-actions-btn-custom-active-color: #fff;
    --call-microphone-detector-width: 300px;
    --call-microphone-detector-height: 60px;
    --call-microphone-detector-arrow-size: 16px;
    --call-participant-controls-background: #696969;
    --call-participant-controls-options-btn-radius: 2px;
    --determinate-color-decimal: 76, 175, 80;
    --determinate-color: rgb(var(--determinate-color-decimal));
    --determinate-text-color: rgba(var(--determinate-color-decimal), .2);
}