:root, html.light-style {
    --font-size-base: 1rem;
    --font-size-10: var(--font-size-base);
    --font-size-13: calc(var(--font-size-base) * 1.3);
    --font-size-15: calc(var(--font-size-base) * 1.5);
    --font-size-16: calc(var(--font-size-base) * 1.6);
    --font-size-18: calc(var(--font-size-base) * 1.8);
    --font-size-20: calc(var(--font-size-base) * 2);
    --font-size-22: calc(var(--font-size-base) * 2.2);
    --font-size-30: calc(var(--font-size-base) * 3);
    --font-size-32: calc(var(--font-size-base) * 3.2);
    --font-size-36: calc(var(--font-size-base) * 3.6);
    --font-family-default: AESFont, sans-serif;
    --font-family-headings: AESFont, sans-serif;
    --h1-font-size: calc(var(--font-size-base) * 3.2);
    --h2-font-size: calc(var(--font-size-base) * 2.6);
    --h3-font-size: calc(var(--font-size-base) * 2.2);
    --h4-font-size: calc(var(--font-size-base) * 2);
    --h5-font-size: calc(var(--font-size-base) * 1.8);
    --h6-font-size: calc(var(--font-size-base) * 1.6);
    --bg-body: #F5F5F5;
    --bg-content: #FFFFFF;
    --padding-content-x: 3rem;
    --padding-content-y: 3rem;
    --padding-content-middle-x: 4rem;
    --padding-content-middle-y: 4rem;
    --padding-content-wide-x: 5rem;
    --padding-content-wide-y: 5rem;
    --margin-content-y: 4rem;
    --radius-content-wide: 2rem;
    --radius-content: 1rem;
    --radius-cart-content: 1.5rem;
    --course-parts-padding: 0 0 0 5rem;
    --order-item-padding: 3rem 4rem;
    --color-logo: #1a76ff;
    --color-icon: #1a76ff;
    --color-icon-grey: #5B6B7B;
    --color-icon-close: var(--color-text-grey);
    --color-icon-close-hover: var(--color-black);
    --dropdown-bg: #fff;
    --dropdown-item-color: #656E7C;
    --dropdown-item-bg-hover: #1a76ff;
    --dropdown-item-color-hover: #fff;
    --color-box-shadow-rgba: rgba(114, 173, 206, .3);
    --color-card-shadow-rgba: rgba(114, 173, 206, .3);
    --color-white: #fff;
    --color-black: #000;
    --color-red: #FF4B4B;
    --color-green: #00C974;
    --color-yellow: #ffc107;
    --color-blue-premium: #ffc107;
    --color-blue-premium2: #ffc1077b;
    --color-grey-stroke: #C3CCD5;
    --color-headings: #fff;
    --color-text: #656E7C;
    --color-text-grey: #95A3B1;
    --color-text-dark-grey: #656E7C;
    --color-text-blue: #1A76FF;
    --color-text-green: var(--color-green);
    --color-text-yellow: var(--color-yellow);
    --color-text-black-white: #000;
    --color-links: #1a76ff;
    --page-style-switcher-round-bg: var(--color-blue-premium);
    --page-style-switcher-bg-left: #c0dffa;
    --page-style-switcher-bg-right: #588ef8;
    --project-logo-height: 40px;
    --btn-font-size: 15px;
    --btn-padding: 1rem 1.5rem;
    --btn-blue-bg: var(--color-blue-premium);
    --btn-blue-bg-hover: #005DEA;
    --btn-grey-bg: #F5F5F5;
    --btn-grey-color: #000;
    --btn-red-bg: var(--color-red);
    --btn-red-bg-hover: #ff6363;
    --btn-green-bg: var(--color-green);
    --btn-green-bg-hover: #01b368;
    --btn-height: 5rem;
    --btn-entering-color: #303B44;
    --input-font-size: var(--font-size-15);
    --input-color: var(--color-text-dark-grey);
    --placeholder-color: var(--color-text-grey);
    --input-text-height: 4rem;
    --input-border-color: #C3CCD5;
    --input-border-bottom-color: #292929;
    --input-border-color-focus: var(--color-blue-premium);
    --input-error-message-bg: #FF5B5B;
    --input-info-color: var(--color-text-grey);
    --select-option-hover: #C3CCD5;
    --select-option-focus: var(--color-blue-premium);
    --menu-round-color: #EAEAEA;
    --menu-round-line-color: #EAEAEA;
    --menu-round-passed-color: var(--color-green);
    --menu-round-current-color: var(--color-icon);
    --menu-round-current-bg: #fff;
    --menu-lesson-number-color: var(--color-text-dark-grey);
    --menu-lesson-name-color: var(--color-text-dark-grey);
    --menu-lesson-time-color: var(--color-text-dark-grey);
    --menu-item-icon-bg: var(--color-text-dark-grey);
    --menu-item-active-icon-bg: var(--color-text-dark-grey);
    --menu-item-passed-icon-bg: var(--color-green);
    --menu-item-declined-icon-bg: var(--color-red);
    --menu-item-disabled-icon-bg: var(--color-text-dark-grey);
    --menu-course-inner-width: 340px;
    --comment-text-area-bg: transparent;
    --comment-text-area-color: var(--color-text);
    --comment-stroke-color: #eef0f3;
    --comment-body-bg-moderator: #fcfdff;
    --comment-body-bg-author: #fefff9;
    --comment-sc-dotted-hover-bg: #EFF5FB;
    --comment-border-radius: 1rem;
    --progress-bar-bg: #EFF5FB;
    --progress-bar-bg-2: #fff;
    --progress-bar-progress-bg: var(--color-green);
    --file-preview-bg: #F5F5F5;
    --file-preview-icon-color: #599CFF;
    --audio-message-seek-slider-track-before: #1a76ff;
    --audio-message-seek-slider-track-bg-left: rgba(26, 118, 255, .6);
    --audio-message-seek-slider-track-bg-right: rgba(26, 118, 255, .2);
    --audio-message-seek-slider-thumb-bg: var(--bg-content);
    --audio-message-seek-slider-thumb-color: #1A76FF;
    --audio-message-volume-slider-track-before: #86c059;
    --audio-message-volume-slider-track-bg: rgba(134, 192, 89, .2);
    --audio-message-volume-slider-thumb-bg: var(--bg-content);
    --audio-message-volume-slider-thumb-color: #86c059;
    --audio-message-volume-slider-bg: var(--bg-body);
    --audio-message-text-color: #000;
    --audio-message-icon-color: #1A76FF;
    --audio-message-stroke: var(--color-grey-stroke);
    --report-status-border-width: 0;
    --report-status-title-color: #000;
    --report-status-aproved-bg: #EEF7E7;
    --report-status-aproved-color: var(--color-green);
    --report-status-declined-bg: #FFEDE9;
    --report-status-declined-color: #FE8046;
    --report-status-new-bg: #EBF3FF;
    --report-status-new-color: #599CFF;
    --rating-star-color: #FFC700;
    --alert-success-bg: #EEF7E7;
    --alert-success-color: #86C059;
    --alert-success-border-width: 0;
    --tooltip-bg: #fff;
    --tooltip-shadow-rgba: rgba(0, 0, 0, .2);
    --tooltip-icon-color: #599CFF;
    --certificate-shadow-rgba: rgba(0, 0, 0, .1);
    --course-card-mix-layer-2-bg: #688FC9;
    --course-card-mix-layer-1-bg: #ffffff;
    --blocking-blend-layeer-color: #599CFF;
    --curator-menu-item-link-odd-bg: #F8F8F8;
    --curator-menu-item-link-even-bg: var(--bg-content);
    --curator-menu-item-link-active-bg: #599CFF;
    --datepicker-today-color: #1A76FF;
    --datepicker-main-bg: var(--bg-content);
    --datepicker-main-color: var(--color-text-black-white);
    --datepicker-main-border-color: var(--color-grey-stroke);
    --datepicker-cell-hover-color: #73879c;
    --datepicker-cell-hover-bg: #f3f9fe;
    --datepicker-cell-active-color: #fff;
    --datepicker-cell-active-bg: #1A76FF;
    --datepicker-cell-not-current-month-color: #ccc;
    --col-avatar-client-size: 200px /* 150px */
}

html.night-style {
    --color-headings: #E3E3E3;
    --color-text: #A8ADB4;
    --color-text-grey: #A8ADB4;
    --color-text-dark-grey: #A8ADB4;
    --color-text-blue: #599CFF;
    --color-text-black-white: #fff;
    --color-links: #599CFF;
    --bg-body: #1E1E1E;
    --bg-content: #252525;
    --color-logo: #599CFF;
    --color-icon: #599CFF;
    --color-icon-grey: #95A3B1;
    --color-icon-close: var(--color-text-grey);
    --color-icon-close-hover: var(--color-white);
    --dropdown-bg: #252525;
    --dropdown-item-color: #A8ADB4;
    --dropdown-item-bg-hover: #599CFF;
    --dropdown-item-color-hover: #252525;
    --color-box-shadow-rgba: rgba(0, 0, 0, .3);
    --color-card-shadow-rgba: rgba(0, 0, 0, .5);
    --color-white: #fff;
    --color-red: #FF4B4B;
    --color-blue-premium: #ffc107;
    --color-blue-premium2: #ffc1077b;
    --color-grey-stroke: #444B53;
    --page-style-switcher-round-bg: #A8ADB4;
    --page-style-switcher-bg-left: #8d64c4;
    --page-style-switcher-bg-right: #4a3185;
    --btn-font-size: var(--font-size-15);
    --btn-padding: 1rem 1.5rem;
    --btn-blue-color: #fff;
    --btn-blue-bg: var(--color-blue-premium);
    --btn-grey-bg: #4a4a4a;
    --btn-grey-color: #fff;
    --btn-entering-color: #fff;
    --input-font-size: var(--font-size-15);
    --input-color: var(--color-white);
    --input-text-height: 4rem;
    --input-border-color: #C3CCD5;
    --input-border-bottom-color: #fff;
    --input-border-color-focus: var(--color-blue-premium);
    --input-error-message-bg: #ff5b5b;
    --input-info-color: var(--color-text-grey);
    --select-option-hover: #4a4a4a;
    --select-option-focus: var(--color-blue-premium);
    --menu-round-color: #A8ADB4;
    --menu-round-line-color: #A8ADB4;
    --menu-round-passed-color: var(--color-green);
    --menu-round-current-color: var(--color-icon);
    --menu-round-current-bg: #fff;
    --menu-lesson-number-color: var(--color-text-dark-grey);
    --menu-lesson-name-color: var(--color-text-dark-grey);
    --menu-lesson-time-color: var(--color-text-dark-grey);
    --menu-item-icon-bg: var(--color-text-dark-grey);
    --menu-item-active-icon-bg: var(--color-text-dark-grey);
    --menu-item-passed-icon-bg: var(--color-green);
    --menu-item-declined-icon-bg: var(--color-red);
    --comment-text-area-bg: transparent;
    --comment-text-area-color: #f6f8f9;
    --comment-stroke-color: var(--color-grey-stroke);
    --comment-body-bg-moderator: #2d303d;
    --comment-body-bg-author: #2d303d;
    --comment-sc-dotted-hover-bg: #1E1E1E;
    --progress-bar-bg: #1E1E1E;
    --progress-bar-bg-2: #252525;
    --progress-bar-progress-bg: var(--color-green);
    --file-preview-bg: #599CFF;
    --file-preview-icon-color: #fff;
    --audio-message-seek-slider-track-before: #1a76ff;
    --audio-message-seek-slider-track-bg-left: rgba(26, 118, 255, .6);
    --audio-message-seek-slider-track-bg-right: rgba(26, 118, 255, .2);
    --audio-message-seek-slider-thumb-bg: var(--bg-content);
    --audio-message-seek-slider-thumb-color: #1A76FF;
    --audio-message-volume-slider-track-before: #86c059;
    --audio-message-volume-slider-track-bg: rgba(134, 192, 89, .2);
    --audio-message-volume-slider-thumb-bg: var(--bg-content);
    --audio-message-volume-slider-thumb-color: #86c059;
    --audio-message-volume-slider-bg: var(--bg-body);
    --audio-message-text-color: #fff;
    --audio-message-icon-color: #fff;
    --audio-message-stroke: var(--color-grey-stroke);
    --report-status-title-color: #A8ADB4;
    --report-status-border-width: 1px;
    --report-status-aproved-bg: transparent;
    --report-status-declined-bg: transparent;
    --report-status-new-bg: transparent;
    --alert-success-bg: transparent;
    --alert-success-color: #86C059;
    --alert-success-border-width: 1px;
    --tooltip-bg: #252525;
    --tooltip-shadow-rgba: rgba(255, 255, 255, .2);
    --tooltip-icon-color: #599CFF;
    --certificate-shadow-rgba: rgba(255, 255, 255, .1);
    --course-card-mix-layer-2-bg: #2D3C51;
    --course-card-mix-layer-1-bg: #252525;
    --blocking-blend-layeer-color: #272727;
    --curator-menu-item-link-odd-bg: #2d303d;
    --curator-menu-item-link-even-bg: var(--bg-content);
    --curator-menu-item-link-active-bg: #599CFF;
    --datepicker-today-color: #1A76FF;
    --datepicker-main-bg: var(--bg-content);
    --datepicker-main-color: var(--color-text-black-white);
    --datepicker-main-border-color: var(--color-grey-stroke);
    --datepicker-cell-hover-color: #000;
    --datepicker-cell-hover-bg: #fff;
    --datepicker-cell-active-color: #fff;
    --datepicker-cell-active-bg: #1A76FF;
    --datepicker-cell-not-current-month-color: #ccc
}

:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: AESFont, Roboto, Arial, sans-serif;
    --font-family-monospace: AESFont, monospace
}

.red {
    color: var(--color-red)
}

.green {
    color: var(--color-text-green)
}

.yellow {
    color: var(--color-text-yellow)
}

.bold {
    font-weight: 700
}