:root {
    --ki-border-radius-scale: 1;

    --ki-base-text-color: #1F2023;
    --ki-color-primary: #FF881A;
    --ki-color-primary-100: #FFF3E8;
    --ki-color-primary-150: #FFDBBA;
    --ki-color-primary-200: #FFDBBA;
    --ki-color-primary-300: #FFC38C;
    --ki-color-primary-400: #D3722B;
    --ki-color-primary-500: #B96324;
    --ki-color-primary-10: #FFF3E8;
    --ki-color-primary-50: #ffc494;
    --ki-color-primary-opacity-10: #FF881A1A;
    --ki-color-primary-opacity-50: #FF881A80;
    --ki-color-secondary-300: #FFC38C;
    --ki-color-gray-100: #EAEAEA;
    --ki-color-gray-200: #9A9A9A;
    --ki-color-gray-300: #636367;
    --ki-color-white: #FFFFFF;
    --ki-color-dark-grey: #3f454a;
    --ki-color-light-gray: #CCD5DD;
    --ki-color-lighter-gray: #F3F7F9;
    --ki-icon-base-color: #1F2023;
    --ki-color-red: #f03e3e;
    --ki-color-bright-red: #D43333;
    --ki-color-light-red: #F75656;
    --ki-main-backgroud-color: var(--ki-color-primary-10);
    --ki-color-uplifting-green: #35C04C;
    --ki-color-dark-green: #00A01A;
    --ki-color-pre-dark-green: #34B64A;
    --ki-color-alert-green: #3EBA59;

    --base-size: 10px;

    --ki-font-size: calc(var(--base-size) * 1.4);
    --ki-font-weight: 400;
    --ki-line-height: calc(var(--base-size) * 2.1);

    --ki-border-radius: calc(var(--base-size) * 0.4);
    --ki-gap: calc(var(--base-size) * 0.8);
    --ki-padding: calc(var(--base-size) * 0.4);
    --ki-min-height: calc(var(--base-size) * 3);

    --ki-button-action-active-background-color: #C55E00;
    --ki-button-action-active-border-color: #C55E00;
    --ki-button-action-color: var(--ki-color-primary-10);
    --ki-button-action-disabled: var(--ki-color-lighter-gray);
    --ki-button-action-hover-color: var(--ki-color-primary-50);
    --ki-button-action-text-color: var(--ki-base-text-color);
    --ki-button-danger-active-background: var(--ki-color-bright-red);
    --ki-button-danger-background: var(--ki-color-light-red);
    --ki-button-danger-hover-background: var(--ki-color-red);
    --ki-button-danger-color: var(--ki-color-white);
    --ki-button-default-border-width: calc(var(--base-size) * 0.1);
    --ki-button-default-border-color: var(--ki-color-gray-100);
    --ki-button-default-color: var(--ki-color-white);
    --ki-button-default-disabled-color: var(--ki-color-lighter-gray);
    --ki-button-default-disabled-background: var(--ki-color-lighter-gray);
    --ki-button-default-hover-color: var(--ki-color-gray-100);
    --ki-button-default-text-color: var(--ki-base-text-color);
    --ki-button-font-weight: 400;
    --ki-button-line-height: calc(var(--base-size) * 1.9);
    --ki-button-padding-start: calc(var(--ki-padding) * 4);
    --ki-button-padding-end: calc(var(--ki-padding) * 4);
    --ki-button-padding-top: var(--ki-padding);
    --ki-button-padding-bottom: var(--ki-padding);
    --ki-button-success-active-background: var(--ki-color-dark-green);
    --ki-button-success-background: var(--ki-color-uplifting-green);
    --ki-button-success-hover-background: var(--ki-color-pre-dark-green);
    --ki-button-success-color: var(--ki-color-white);

    --ki-button-gap: calc(var(--base-size) * 0.8);

    --ki-button-primary-background-hover: #D3722B;
    --ki-button-primary-background-active: #C4641E;

    --ki-button-large-height: calc(var(--base-size) * 7.5);
    --ki-button-large-padding: calc(var(--base-size) * 2.4);
    --ki-button-large-border-radius: calc(var(--base-size) * 2.4);
    --ki-button-large-font-size: calc(var(--base-size) * 1.8);
    --ki-button-large-line-height: calc(27 / 18);

    --ki-button-small-height: calc(var(--base-size) * 5.6);
    --ki-button-small-padding: calc(var(--base-size) * 1.6);
    --ki-button-small-border-radius: calc(var(--base-size) * 1.6);
    --ki-button-small-font-size: calc(var(--base-size) * 1.6);
    --ki-button-small-line-height: calc(24 / 16);

    --ki-button-xs-padding: calc(var(--base-size) * 0.8) calc(var(--base-size) * 0.7);
    --ki-button-xs-height: calc(var(--base-size) * 4);
    --ki-button-xs-width: calc(var(--base-size) * 4);
    --ki-button-xs-border-radius: calc(var(--base-size) * 0.8);

    --ki-checkbox-border: calc(var(--base-size) * 0.1) solid var(--ki-color-gray-100);
    --ki-checkbox-border-disabled: calc(var(--base-size) * 0.1) solid var(--ki-color-gray-100);
    --ki-checkbox-border-radius: calc(var(--base-size) * 0.4);
    --ki-checkbox-check-background-color: #FF9A02;
    --ki-checkbox-check-border-color: #FF9A02;
    --ki-checkbox-font-size: calc(var(--base-size) * 1.2);
    --ki-checkbox-hover-background-color: var(--ki-color-lighter-gray);
    --ki-checkbox-icon-font-size: calc(var(--base-size) * 1.4);
    --ki-checkbox-input-offset: calc(var(--base-size) * 0.1);
    --ki-checkbox-height: calc(var(--base-size) * 1.8);
    --ki-checkbox-line-height: calc(var(--base-size) * 1.9);
    --ki-checkbox-width: calc(var(--base-size) * 1.8);

    --ki-collapse-border: calc(var(--base-size) * 0.1) solid var(--ki-color-gray-100);
    --ki-collapse-item-border-radius: calc(var(--base-size) * 0.5) calc(var(--base-size) * 0.5) 0 0;
    --ki-collapse-item-padding: var(--base-size);

    --ki-content-border-radius: 0;
    --ki-content-margin: 0 auto;
    --ki-content-padding: 0;
    --ki-content-width: calc(var(--base-size) * 118);

    --ki-course-card-border-radius: calc(var(--base-size) * 0.4);
    --ki-course-card-color: var(--ki-color-gray-200);
    --ki-course-card-divider-content: "";
    --ki-course-card-font-size: calc(var(--base-size) * 1.2);
    --ki-course-card-gap: calc(var(--base-size) * 2);
    --ki-course-card-image-width: calc(var(--base-size) * 29.3);
    --ki-course-card-image-height: calc(var(--base-size) * 16.5);
    --ki-course-card-line-height: calc(var(--base-size) * 2.1);
    --ki-course-card-title-margin-bottom: calc(var(--base-size) * 0.5);

    --ki-header-gap: 16px;
    --ki-header-margin: 0;
    --ki-header-padding: var(--ki-padding);
    --ki-header-width: auto;
    --ki-header-logo-margin: 0 40px 0 0;

    --ki-header-z-index: 10;
    --ki-header-desktop-height: calc(var(--base-size) * 8.8);
    --ki-header-tablet-height: calc(var(--base-size) * 10.4);
    --ki-header-mobile-height: calc(var(--base-size) * 7.2);
    --ki-header-border-radius: 0 0 calc(var(--base-size) * 3.2) calc(var(--base-size) * 3.2);
    --ki-header-desktop-padding: calc(var(--base-size) * 1.55) calc(var(--base-size) * 2.4);
    --ki-header-tablet-padding: calc(var(--base-size) * 1.2) calc(var(--base-size) * 2.4);
    --ki-header-mobile-padding: calc(var(--base-size) * 0.8) calc(var(--base-size) * 1.6);
    --ki-header-background: white;
    --ki-header-inner-box-max-width: calc(var(--base-size) * 163.2);

    --ki-input-border-width: calc(var(--base-size) * 0.1);
    --ki-input-border-radius: calc(var(--base-size) * 0.4);
    --ki-input-disabled-color: var(--ki-color-gray-100);
    --ki-input-disabled-background: var(--ki-color-lighter-gray);
    --ki-input-disabled-border-color: var(--ki-color-gray-100);
    --ki-input-error-color: var(--ki-color-red);
    --ki-input-error-font-size: calc(var(--base-size) * 1.2);
    --ki-input-error-line-height: calc(18 / 12);
    --ki-input-hover-background: var(--ki-color-lighter-gray);
    --ki-input-height: calc(var(--base-size) * 3);

    --ki-popover-width: max-content;
    --ki-popover-max-height: calc(var(--base-size) * 30);
    --ki-popover-background-color: var(--ki-color-white);
    --ki-popover-border-radius: calc(var(--base-size) * 0.5);
    --ki-popover-boxshadow: 0 calc(var(--base-size) * 0.4) calc(var(--base-size) * 0.6) calc(var(--base-size) * -0.4) #0000001f, 0 calc(var(--base-size) * 0.6) calc(var(--base-size) * 1.6) #00000014, 0 calc(var(--base-size) * 0.9) calc(var(--base-size) * 2.8) calc(var(--base-size) * 0.8) #0000000d;
    --ki-popover-padding-top: calc(var(--base-size) * 0.4);
    --ki-popover-sharp-angle-radius: calc(var(--base-size) * 0.5);
    --ki-popover-padding-left: 0;

    --ki-search-input-height: calc(var(--base-size) * 5.6);
    --ki-search-input-padding: calc(var(--base-size) * 0.8);
    --ki-search-input-border-radius: calc(var(--base-size) * 1.6);

    --ki-select-active-border-color: var(--ki-color-gray-200);
    --ki-select-arrow-color: var(--ki-color-gray-200);
    --ki-select-background-color: var(--ki-color-white);
    --ki-select-border-width: calc(var(--base-size) * 0.1);
    --ki-select-gap: calc(var(--base-size) * 1.4);
    --ki-select-hover-background-color: var(--ki-color-lighter-gray);
    --ki-select-icon-divider-content: "";
    --ki-select-icon-divider-left: calc(var(--base-size) * 2.9);
    --ki-select-icon-divider-height: calc(var(--base-size) * 2);
    --ki-select-item-border-radius: 0;
    --ki-select-item-padding-top: calc(var(--base-size) * 0.9);
    --ki-select-item-padding-left: var(--base-size);
    --ki-select-item-selected-color: var(--ki-color-lighter-gray);
    --ki-select-padding-top: calc(var(--base-size) * 0.4);
    --ki-select-padding-left: calc(var(--base-size) * 0.8);
    --ki-select-placeholder-color: var(--ki-color-gray-200);

    --ki-skeleton-background: var(--ki-color-gray-100);
    --ki-skeleton-border-radius: var(--ki-border-radius);
    --ki-skeleton-height: var(--base-size);

    --ki-spinner-height: calc(var(--base-size) * 4.8);
    --ki-spinner-width: calc(var(--base-size) * 4.8);

    --ki-switch-checked-color: var(--ki-color-primary);
    --ki-switch-color: var(--ki-color-gray-100);
    --ki-switch-disabled-color: var(--ki-color-gray-100);
    --ki-switch-disabled-title-color: var(--ki-color-lighter-gray);
    --ki-switch-gap: calc(var(--base-size) * 0.8);
    --ki-switch-title-color: var(--ki-base-text-color);

    --ki-tab-active-color: #FF9A02;
    --ki-tab-color: var(--ki-base-text-color);
    --ki-tab-disabled-color: var(--ki-color-gray-100);
    --ki-tab-gap: calc(var(--base-size) * 2.4);
    --ki-tab-padding: 0 0 var(--base-size) 0;
    --ki-tab-panel-gap: calc(var(--base-size) * 2);

    --ki-custom-button-gap: calc(var(--base-size) * 0.8);
    --ki-custom-min-height: calc(var(--base-size) * 3);
    --ki-custom-button-border-radius: calc(var(--base-size) * 0.8);
    --ki-custom-button-font-size: calc(var(--base-size) * 1.4);

    --ki-outline: none;
    --ki-outline-offset: calc(var(--base-size) * -0.4);
    --ki-modal-window-max-width: calc(var(--base-size) * 54.4);
}

@media only screen and (max-width: 1340px) {
    :host,
    .portal2,
    :root {
        --base-size: 0.746vw;
    }
}

@media only screen and (max-width: 1024px) {
    :host,
    .portal2,
    :root {
        --base-size: 1.302vw;
    }
}

@media only screen and (max-width: 430px) {
    :host,
    .portal2,
    :root {
        --base-size: 2.667vw;
    }
}