:root {
    color-scheme: light dark;

    --OFF: ;
    --ON: initial;

    --light: var(--ON);
    --dark: var(--OFF);

    --color-green: #3E6C3F;
    --color-green-dark: #335934;
    --color-green-light: #9BB19B;
    --color-red: #EE4444;
    --color-yellow: #74A722;

    --color-gray-800: #222;
    --color-gray-700: #333;
    --color-gray-600: #555;
    --color-gray-500: #999;
    --color-gray-100: #ececec;
    --color-gray-0: #f8f8f8;

    --theme-color: var(--color-green);
    --theme-color-rgba: 79, 145, 1;

    --base-color: #000;
    --base-color-rgba: 0, 0, 0;

    --scroll-size: 4px;
    --scroll-size-val: auto;
    --scroll-radius: 2px;
    --scroll-thumb-color: var(--color-green);
    --scroll-thumb-border: none;
    --scroll-track-color: transparent;

    --base-font-family: Montserrat, Arial, Helvetica, sans-serif;
    --base-font-size: calc(15 / 16 * 1rem);
    --base-lineheight: calc(22 / 15);

    --grid-gap: 20px;

    --_link-color: var(--color-green-dark);
    --_link-color-hover: var(--color-green);
    --_link-line: none;
    --_link-line-hover: underline;
    --_link-line-style: solid;
    --_link-line-style-hover: var(--_link-line-style);
    --_link-line-color: var(--_link-color);
    --_link-line-color-hover: var(--_link-line-color);
    --_link-line-thickness: 1px;
    --_link-line-offset: 2px;

    --transition-duration: 0.2s;

    --sections-gap: 48px;

    --header-height: 56px;
    --is-header-sticky: 1;

    /* input */
    --_input-font-size: 15px;
    --_input-line-height: calc(22 / 15);
    --_input-height: 40px;
    --_input-padding-y: 0;
    --_input-padding-x: 15px;
    --_input-border-width: 1px;
    --_input-border-color: #e6e6e6;
    --_input-border-color-focus: var(--color-green-light);
    /*--_input-border-color-required: #FF6A00;*/
    --_input-border-color-error: var(--color-red);
    --_input-border-radius: 3px;
    --_input-bg: var(--color-gray-0);
    --_input-bg-error: #ffd0d0;
    --_input-bg-focus: #fff;
    --_input-color: #25282D;
    --_input-plaseholder-color: #828897;
    --_input-plaseholder-opacity: 1;
    --_input-disabled-border-color: #E5EEFF;
    --_input-disabled-bg-color: #F9FBFF;
    --_input-disabled-color: var(--_input-color);

    --_input-range-size: 6px;
    --_input-range-radius: 20px;
    --_input-range-bg: #707070;
    --_input-range-progress-bg: #F09100;
    --_input-range-thumb-size: 22px;
    --_input-range-thumb-radius: 50%;
    --_input-range-thumb-bg: #F09100;

    --_select-padding-right: 35px;
    --_select-icon: url("/layout/images/icons.svg#arrow-down-view");
    --_select-icon-focus: url("/layout/images/icons.svg#arrow-up-view");
    --_select-icon-color: #5F5B59;
    --_select-icon-pos: right 11px center;
    --_select-icon-size: 20px 20px;
    --_select-image-size: 40px;
    --_select-image-gap: 16px;

    /* buttons */
    --_button-font-size: 12px;
    --_button-font-weight: 600;
    --_button-font-variant: normal;
    --_button-line-height: calc(13 / 12);
    --_button-letter-spacing: 0;
    --_button-height: auto;
    --_button-padding-y: 11px;
    --_button-padding-x: 19px;
    --_button-border-width: 2px;
    --_button-border-color: var(--color-green);
    --_button-border-color-hover: var(--color-green);
    --_button-border-color-disabled: rgba(67, 146, 76, 0.5);
    --_button-radius: 3px;
    --_button-gap: 9px;
    --_button-bg: transparent;
    --_button-bg-hover: var(--color-green);
    --_button-bg-disabled: transparent;
    --_button-shadow: none;
    --_button-shadow-focus: 0 0 0 2px rgba(67, 146, 76, 0.5);
    --_button-color: #555;
    --_button-color-hover: #fff;
    --_button-color-disabled: var(--color-green-dark);
    /*--_button-icon-color: inherit;*/
    /*--_button-shadow: 0px 4px 7px rgba(0, 0, 0, 0.1);*/
    /*--_button-hover-shadow: none;*/

    /* check */
    --_check-size: 20px;
    --_check-gap: 12px;
    --_check-border-width: 1px;
    --_check-border-color: #e6e6e6;
    --_check-border-color-focus: var(--color-gray-500);
    --_check-border-color-checked: transparent;
    --_check-border-color-error: var(--color-red);
    --_check-border-color-disabled: #e6e6e6;
    --_check-border-color-checked-disabled: transparent;
    --_check-border-radius: 2px;
    --_check-bg: var(--color-gray-0);
    --_check-bg-checked: var(--color-green-dark);
    --_check-bg-checked-hover: var(--color-green);
    --_check-bg-checked-focus: var(--color-green-dark);
    --_check-bg-disabled: var(--color-gray-0);
    --_check-bg-checked-disabled: var(--color-green-light);
    --_check-icon-color: #fff;
    --_check-icon-width: 16px;
    --_check-icon-height: 16px;
    --_check-icon-img: url("/layout/images/icons.svg#check-view");
    --_check-color: inherit;
    --_check-disabled-color: var(--color-gray-500);
    --_check-disabled-checked-color: #5F697C;

    --_radio-size: 20px;
    --_radio-gap: 12px;
    --_radio-border-width: 1px;
    --_radio-border-color: var(--color-gray-500);
    --_check-border-color-focus: var(--color-green-dark);
    --_radio-border-color-checked: #E6E6E6;
    --_radio-border-color-error: var(--color-red);
    --_radio-border-color-disabled: var(--color-green-light);
    --_radio-border-color-checked-disabled: #E6E6E6;
    --_radio-bg: #F9FBFF;
    --_radio-bg-checked: var(--_radio-bg);
    --_radio-bg-checked-hover: var(--_radio-bg);
    --_radio-bg-checked-focus: var(--_radio-bg);
    --_radio-bg-disabled: #fff;
    --_radio-bg-checked-disabled: var(--_radio-bg-disabled);
    --_radio-icon-color: var(--color-green-dark);
    --_radio-icon-color-disabled: var(--color-green-light);
    --_radio-color: inherit;
    --_radio-disabled-color: #5F697C;
    --_radio-disabled-checked-color: #5F697C;

    --_h1-font-size-min: 24;
    --_h1-font-size-max: 48;

    --_h2-font-size-min: 24;
    --_h2-font-size-max: 38;

    --_h3-font-size-min: 20;
    --_h3-font-size-max: 32;

    --_h4-font-size-min: 18;
    --_h4-font-size-max: 28;


    --ratio-375to576: calc((100vw - 375px) / (576 - 375));
    --ratio-375to768: calc((100vw - 375px) / (768 - 375));
    --ratio-375to992: calc((100vw - 375px) / (992 - 375));
    --ratio-375to1280: calc((100vw - 375px) / (1280 - 375));
    --ratio-375to1440: calc((100vw - 375px) / (1440 - 375));

    --ratio-576to768: calc((100vw - 576px) / (768 - 576));
    --ratio-576to992: calc((100vw - 576px) / (992 - 576));
    --ratio-576to1280: calc((100vw - 576px) / (1280 - 576));
    --ratio-576to1440: calc((100vw - 576px) / (1440 - 576));

    --ratio-768to992: calc((100vw - 768px) / (992 - 768));
    --ratio-768to1280: calc((100vw - 768px) / (1280 - 768));
    --ratio-768to1440: calc((100vw - 768px) / (1440 - 768));

    --ratio-992to1280: calc((100vw - 992px) / (1280 - 992));
    --ratio-992to1440: calc((100vw - 992px) / (1440 - 992));

    --ratio-1280to1440: calc((100vw - 1280px) / (1440 - 1280));
}
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --light: var(--OFF);
        --dark: var(--ON);
    }
}
@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;
    }
}

@media (min-width: 576px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1280px) {}
@media (min-width: 1440px) {}
@media (min-width: 1920px) {}