@charset "UTF-8";
*, *:before, *:after {
  box-sizing: border-box;
}

html, body, div, span, object, iframe, figure, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, strike, strong, sub, sup, tt, b, u, i, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, main, canvas, embed, footer, header, nav, section, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
          text-size-adjust: none;
}

footer, header, nav, section, main {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

input {
  -webkit-appearance: none;
  border-radius: 0;
}

.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.bgw {
  background-color: white;
}

.bglg {
  background-color: #EEE;
}

.bgeb {
  background-color: #0089e8;
}

.rc {
  border-radius: 5px;
}

.copy {
  clear: both;
  display: block;
  overflow: hidden;
  font-size: 20px;
  line-height: 1.5;
  margin: 10px 30px 20px;
  color: #666;
  line-height: 1.2;
  font-size: 18px;
}
.copy strong {
  display: block;
  font-size: 22px;
  margin-bottom: 0;
}

h2.page_title {
  font-size: 24px;
  display: block;
  padding: 5px;
  margin: 20px 0 0 0;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  color: #666;
  text-align: center;
}

.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
@font-face {
  font-family: CharisSILW;
  src: url(../../font/CharisSIL-Regular.woff);
}
body {
  font-family: Arial, Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6, p {
  color: #555;
}

h1, h2, h3, h4, h5, h6 {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5em;
  font-weight: bold;
}

h1 {
  text-align: center;
  margin: 1rem 1em 0.5em;
}

h2 {
  font-size: 1.75em;
}

h3 {
  font-size: 1.17em;
}

h4 {
  font-size: 1em;
}

h5 {
  font-size: 0.83em;
}

h6 {
  font-size: 0.67em;
}

.dotvvm-bp-primitive_text, .dotvvm-bp-text, .dotvvm-bp-text-view {
  color: #555;
}

@media screen and (max-width: 767px) {
  h1, h2, h3, h4, h5, h6 {
    font-size: 2em;
  }
}
@media screen and (max-height: 767px) and (orientation: landscape) {
  h1, h2, h3, h4, h5, h6 {
    font-size: 2em;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .content_title {
    padding: 0.2rem 0;
  }
}
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
button, input {
  z-index: 0 !important;
  position: relative;
  border: none;
  margin: 5px auto 0;
  padding: 0;
  border-radius: var(--bp-border-radius);
  width: 100%;
  font-size: 1.5em;
  max-width: 606px;
}
button:hover, input:hover {
  transition: 0.2s background-color;
}

.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.select {
  display: block;
  text-align: center;
  border: none;
  color: white;
  background-color: #0089e8;
  margin-bottom: 25px;
  cursor: pointer;
  min-height: 49px;
  font-size: 21px;
  font-weight: 400;
  border-radius: 5px;
}
.select a {
  display: block;
  color: white;
  text-decoration: none;
  vertical-align: middle;
  line-height: 1.2;
  padding: 0.25em;
  font-size: 21px;
}
.select:hover {
  text-decoration: none;
  border: 0 none !important;
  background-color: #0398ff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  transition: background-color 0.2s;
}
.select:disabled {
  background-color: #EEE;
  cursor: default;
}
.select.alt, .select.resumebutton {
  background-color: #4ead1f;
}
.select.alt:hover, .select.resumebutton:hover {
  background-color: #58c323;
}
.select.resumebutton {
  line-height: 1.8em;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 394px) {
  .select.resumebutton {
    line-height: 1.7;
  }
}
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
button, input {
  z-index: 0 !important;
  position: relative;
  border: none;
  margin: 5px auto 0;
  padding: 0;
  border-radius: var(--bp-border-radius);
  width: 100%;
  font-size: 1.5em;
  max-width: 606px;
}
button:hover, input:hover {
  transition: 0.2s background-color;
}

.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.dotvvm-bp-drop-down-list {
  --bp-form-item_width: 100%;
  --bp-font-color: $formText !important;
  height: 49px;
}
.dotvvm-bp-drop-down-list > .dotvvm-bp-primitive_value > .dotvvm-bp-primitive_text, .dotvvm-bp-drop-down-list > .dotvvm-bp-primitive_value > .dotvvm-bp-text, .dotvvm-bp-drop-down-list > .dotvvm-bp-primitive_value > .dotvvm-bp-text-view {
  font-size: 21px;
}
.dotvvm-bp-drop-down-list .dotvvm-bp-primitive_list > .dotvvm-bp-primitive_item.dotvvm-bp-state_active, .dotvvm-bp-drop-down-list .dotvvm-bp-primitive_list > .dotvvm-bp-primitive_item.dotvvm-bp-state_selected {
  background-color: #0089e8;
  border-color: #0089e8;
  color: white;
}
.dotvvm-bp-drop-down-list .dotvvm-bp-primitive_list > .dotvvm-bp-primitive_item {
  font-size: 21px;
}
.dotvvm-bp-drop-down-list > .dotvvm-bp-primitive_value {
  display: flex;
  align-items: center;
}
.dotvvm-bp-drop-down-list .dotvvm-bp-primitive_button {
  transition: 0.2s;
}

.dotvvm-bp-date-picker .dotvvm-bp-primitive_button {
  transition: 0.2s;
}

.dotvvm-bp-primitive_popup {
  width: 100%;
}

@media screen and (max-width: 991px) {
  .dotvvm-bp-primitive_contents.dotvvm-bp-primitive_text {
    font-weight: bolder;
  }
}
@media screen and (max-width: 767px) {
  .dotvvm-bp-primitive_picker {
    position: relative;
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    width: var(--bp-form-item_width);
    background-color: var(--bp-form-item_background);
    border: var(--bp-border-width) solid var(--bp-border-color);
    border-radius: var(--bp-border-radius);
    color: var(--bp-font-color);
    text-align: left;
    vertical-align: middle;
  }
}
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
#gameContainer {
  display: grid;
}

.gameboard {
  display: grid;
  overflow: hidden;
  place-content: center;
  grid-template-columns: 450px 350px;
  grid-template-rows: 60px 50px 50px auto auto;
  grid-template-areas: "sns ct" "hints vowelgrid" "timer vowelgrid" "response vowelgrid" "gameinfo vowelgrid" "proceed proceed";
  font-weight: bolder;
  color: #0089e8;
  grid-column-gap: 25px;
  grid-row-gap: 10px;
  margin: 0 auto;
  cursor: default;
}

.sgbtnStartNewSession {
  grid-area: sns;
  margin-top: 0;
}

.sgbtnColourToggle {
  grid-area: ct;
  margin-top: 0;
}

.hints {
  display: grid;
  grid-template-columns: 49% minmax(0, 1fr);
  grid-template-rows: 1fr;
  place-content: center;
  grid-area: hints;
  border-radius: 5px;
  gap: 2%;
  height: 49px;
}
.hints .hintswitch {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.6;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
}
.hints .hintSwitchOn:before {
  content: "Keywords On";
}
.hints .hintSwitchOff:before {
  content: "Keywords Off";
}
.hints .hintbox {
  width: 100%;
  background-color: #f6f6f6;
  border-radius: inherit;
  font-size: 1.5em;
  text-align: right;
  padding: 0.35em 1em 0 0;
}

.timer {
  display: grid;
  grid-template-columns: 49% minmax(0, 1fr);
  grid-template-rows: 1fr;
  place-content: center;
  grid-area: timer;
  border-radius: 5px;
  gap: 2%;
  height: 49px;
}
.timer .pausebutton {
  min-height: 100%;
  max-height: 100%;
  margin: 0;
  margin-bottom: 0;
}
.timer #runner {
  display: grid;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
  border-radius: inherit;
  font-size: 21px;
  text-align: right;
  padding: 0 1em;
}

.response {
  grid-area: response;
  min-height: 110px;
}

.recordpanel {
  grid-area: 4/1/5/2;
  grid-template-columns: 25% 25% 25% 25%;
  place-content: center;
  gap: 10px;
  padding: 0 35px;
  background-color: #f6f6f6;
  border-radius: 5px;
  position: relative;
}

.gameinfo {
  grid-area: gameinfo;
  margin-bottom: 0;
}

.proceed {
  grid-area: proceed;
  margin-bottom: 20px;
  cursor: default;
}
.proceed .proceed {
  cursor: pointer;
}
.proceed .select {
  background-color: #4ead1f;
  /*margin: 0.2em 0 0 0;
  max-width: 100%;*/
  margin-top: 10px;
}
.proceed .select:hover {
  background-color: #58c323;
}

.gameinfo .level {
  display: block;
  font-size: 21px;
  padding-bottom: 0.35em;
}

.progressbar {
  height: 70px;
  width: 100%;
  padding: 4px 2%;
  background: #e0e0e0;
  border-radius: 5px;
  background-color: #f6f6f6;
}
.progressbar .progresstext {
  height: 35px;
  font-size: 21px;
}
.progressbar .bluebar_bg {
  background-color: white;
}
.progressbar .bluebar_bg .bluebar {
  background-color: #0089e8;
}

/* record panel */
#recordPromptToolTip {
  display: none;
  width: 100%;
  position: absolute;
  top: -59px;
  left: 0;
  background: #e80026;
  border-radius: 5px;
  z-index: 1;
  padding: 0.28em 2em;
  margin: 0;
}

#recordPromptToolTip p {
  color: #fff;
  margin: 10px auto;
}

.rcp, #rec_goto_next {
  background-color: #0089e8;
  font-weight: 400;
  font-size: 21px;
  color: #FFF;
  transition: background-color 0.2s linear;
  -webkit-transition: background-color 0.2s linear;
  border-radius: 5px;
  height: 2.5em;
  margin: 0 !important;
}

.rcp:hover, #rec_goto_next {
  background-color: #0398ff;
  cursor: pointer;
}

#rec_goto_next {
  background-color: #4ead1f;
}

#rec_goto_next:hover {
  background-color: #58c323;
}

#rec_rec {
  background-color: #e80026;
  border-radius: 10px;
  transition: background-color 0.2s linear;
  -webkit-transition: background-color 0.2s linear;
}

#rec_rec.recording {
  background-color: white;
  transition: background-size 2s linear;
  background-position: bottom left;
  border: 5px solid #e80026;
  border-radius: 10px;
  color: #000;
}

#rec_rec.after_rec {
  background-color: #e80026;
  transition: background-color 0.2s linear;
  transition: background-image 0.2s linear;
  -webkit-transition: background-image 0.2s linear;
  background-image: none;
}

#rec_play_rec.playDisabled {
  background-color: #CCC;
  cursor: default;
}

.response {
  display: flex !important;
  place-content: center;
  align-items: center;
  background-color: #f6f6f6;
  border-radius: 10px;
}
.response .msgbubble {
  display: grid;
  align-content: center;
  place-content: center;
  line-height: 2.15em;
  width: 100%;
  height: 100%;
  font-weight: 800;
  text-align: center;
  border-radius: 10px;
  border: 10px solid;
  background-color: white;
  line-height: clamp(1rem, 4.5vw, 1.25rem);
  padding: 0.1em 0 0.2em;
  border-width: 2px;
  font-size: 1.5em;
  align-items: center;
}
.response .msgbubble:before {
  display: grid;
  align-items: center;
  height: 100%;
  padding: 0;
  line-height: 1.25rem;
  font-size: 25px;
}
.response .msgbubble#wrongBubble:before {
  line-height: clamp(2.25rem, 4.5vw, 2.5rem);
  font-size: clamp(2rem, 4.5vw, 2.25rem);
  height: unset;
}
.response .msgbubble#wrongBubble:after {
  line-height: clamp(1.5rem, 4.5vw, 1.75rem);
  font-size: clamp(1rem, 3.5vw, 1.05rem);
}
.response #welcomeBubble {
  border-color: #0089e8;
  color: #0089e8;
}
.response #welcomeBubble:before {
  content: "Welcome!";
}
.response #correctBubble {
  border-color: #51c213;
  color: #51c213;
}
.response #correctBubble:before {
  content: "Correct!";
}
.response #wrongBubble {
  border-color: red;
  color: red;
}
.response #wrongBubble:before {
  display: block;
  content: "Incorrect";
}
.response #wrongBubble:after {
  display: block;
  content: "Click the correct symbol to continue";
}
.response #retryBubble {
  border-color: orange;
  color: orange;
}
.response #retryBubble:before {
  content: "Try Again";
}

#overlay {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.95;
  background-color: #0089e8;
  z-index: 10000;
}

#resumeWrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2em;
}
#resumeWrap .resumetext {
  color: white;
  font-size: 25px;
  font-weight: 600;
  margin-bottom: 1em;
  text-align: center;
}

@media screen and (max-width: 991px) {
  .gameboard {
    display: grid;
    overflow: hidden;
    place-content: center;
    grid-template-columns: 90%;
    grid-template-rows: 49px auto 49px auto auto auto auto;
    grid-template-areas: "sns" "ct" "timer" "vowelgrid" "proceed" "response" "gameinfo";
    font-weight: bolder;
    color: #0089e8;
    grid-column-gap: 25px;
    grid-row-gap: 20px;
    margin: 0 auto;
    width: 100%;
    max-width: 606px;
  }
  .gameboard .select {
    justify-self: center;
    margin: 0;
  }
  .gameboard .vowel_panel.game {
    margin: 0 auto -20px;
  }
  .gameboard .recordpanel {
    grid-area: 6/1/7/2;
    grid-template-columns: 25% 25% 25% 25%;
  }
  .gameboard .hints {
    display: none;
  }
  .gameboard .timer, .gameboard .response, .gameboard .recordpanel, .gameboard .gameinfo, .gameboard .proceed {
    justify-self: center;
    width: 100%;
    max-width: 606px;
  }
  .gameboard .timer .pausebutton, .gameboard .response .pausebutton, .gameboard .recordpanel .pausebutton, .gameboard .gameinfo .pausebutton, .gameboard .proceed .pausebutton {
    height: 49px;
    padding: 0;
  }
  .gameboard .timer #runner, .gameboard .response #runner, .gameboard .recordpanel #runner, .gameboard .gameinfo #runner, .gameboard .proceed #runner {
    width: 100%;
    height: 49px;
  }
  .gameboard .proceed {
    max-height: 49px;
  }
  .gameboard .response {
    min-height: 75px;
  }
  .gameboard .response .msgbubble#wrongBubble:before {
    line-height: clamp(2rem, 4.5vw, 2rem);
    font-size: clamp(25px, 1.5vw, 2rem);
    height: unset;
  }
  .gameboard .response .msgbubble#wrongBubble:after {
    line-height: clamp(1.5rem, 4.5vw, 1.25rem);
    font-size: clamp(1rem, 3.5vw, 1.05rem);
  }
}
@media screen and (max-width: 767px) {
  .gameboard .recordpanel {
    grid-column-gap: 15px;
    padding: 0 40px;
  }
  .gameboard .rcp {
    font-size: clamp(1rem, 4.5vw, 1.25rem) !important;
  }
}
@media screen and (max-width: 479px) {
  .gameboard {
    grid-template-rows: 49px 49px 49px 350px auto auto auto;
    grid-row-gap: 20px;
  }
  .gameboard .vowel_panel.game {
    align-self: center;
    justify-self: center;
  }
  .gameboard .gameinfo {
    margin-bottom: 0;
  }
  .gameboard .timer {
    display: grid;
    grid-template-columns: 35% minmax(0, 65%);
  }
  .gameboard .timer #runner {
    width: 100%;
  }
  .gameboard .recordpanel {
    margin: -20px 0 0 0;
  }
  .gameinfo .level {
    overflow-y: scroll;
    height: 43px;
    white-space: nowrap;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .gameboard {
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas: "sns sns" "ct vowelgrid" "proceed vowelgrid" "timer vowelgrid" "response vowelgrid" "gameinfo vowelgrid";
    grid-column-gap: 1.5%;
    grid-row-gap: 10px;
    padding: 0 25px 0 50px;
  }
  .gameboard .select, .gameboard .proceed, .gameboard .timer, .gameboard .response, .gameboard .recordpanel, .gameboard .gameinfo {
    width: 100%;
    max-width: 100% !important;
    justify-self: center;
  }
  .gameboard .select {
    margin: 0;
  }
  .gameboard .timer {
    height: 49px;
    margin: -10px 0 0 !important;
  }
  .gameboard .proceed {
    margin: 0 0 5px 0;
  }
  .gameboard.consonants .consonants_panel.game {
    padding: 5px;
  }
  .gameboard.consonants .consonants_panel.game button:before {
    line-height: clamp(2rem, 4.5vw, 2rem);
    font-size: clamp(1.75rem, 4.5vw, 2rem);
  }
  .gameboard .response {
    min-height: 50px;
  }
  .gameboard .response .msgbubble {
    font-size: 1.75em;
    line-height: 1.25em !important;
    padding: 5px 10px 10px;
  }
  .gameboard .response .msgbubble#wrongBubble:before {
    line-height: clamp(1.85rem, 4.5vw, 2rem);
    font-size: clamp(1.5rem, 4.5vw, 2rem);
    height: unset;
  }
  .gameboard .response .msgbubble#wrongBubble:after {
    line-height: clamp(0.5rem, 2.75vw, 1.25rem);
    font-size: clamp(0.5rem, 2.5vw, 1.05rem);
  }
  .recordpanel {
    grid-area: 5/1/6/2;
    grid-template-columns: 22% 22% 31% 25%;
    gap: 3.5%;
    padding: 0 5%;
    background-color: white;
  }
  .recordpanel .rcp {
    width: 100%;
    font-size: 1.5em;
    font-weight: bold;
  }
  .recordpanel .rcp#rec_goto_next {
    font-weight: bold;
  }
  .sgbtnStartNewSession {
    margin-bottom: -10px;
  }
  .hints {
    display: none;
  }
}
@media screen and (max-height: 394px) and (orientation: landscape) {
  .gameboard {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas: "sns sns" "ct ct" "proceed vowelgrid" "timer vowelgrid" "response vowelgrid" "gameinfo vowelgrid";
    grid-column-gap: 1.5%;
    grid-row-gap: 10px;
    padding: 1em;
  }
  .gameboard .vowel_panel.game button:before {
    line-height: 0.75;
  }
  .gameboard .response {
    min-height: 75px;
  }
  .gameboard .response .msgbubble {
    font-size: 1.75em;
    line-height: 1.25em !important;
  }
  .gameboard .timer {
    display: grid;
    grid-template-columns: 35% minmax(0, 65%);
  }
  .gameboard .timer .pausebutton {
    font-size: 1.25rem;
  }
  .gameboard .timer #runner {
    width: 100%;
    line-height: 3rem;
    font-size: 1.5rem;
    padding: 0;
    text-align: center;
  }
  .gameboard .recordpanel {
    grid-area: 5/1/6/2;
    grid-template-columns: 22% 22% 31% 25%;
    gap: 3.5%;
    padding: 0 5%;
    background-color: white;
  }
  .gameboard .recordpanel .rcp {
    width: 100%;
    font-size: 1.5em;
    font-weight: bold;
  }
  .gameboard .recordpanel .rcp#rec_goto_next {
    font-weight: bold;
  }
  .gameboard .select, .gameboard .proceed, .gameboard .timer, .gameboard .response, .gameboard .recordpanel, .gameboard .gameinfo {
    max-width: 350px;
  }
  .gameboard .select.sgbtnColourToggle {
    margin: 10px 0 0;
  }
  .gameboard .sgbtnStartNewSession {
    margin-bottom: -10px;
    max-height: 25px;
  }
  .gameboard .proceed {
    margin: 0 !important;
  }
  .gameboard .timer {
    margin: 0 !important;
    grid-area: 3/1/4/2;
  }
  .gameboard .response {
    margin: 0 !important;
    grid-area: 4/1/5/2;
  }
  .gameboard .gameinfo {
    margin: 0 !important;
    grid-area: 5/1/6/2;
  }
}
@media screen and (max-width: 394px) {
  .gameboard {
    grid-template-rows: 49px 49px 49px auto auto auto auto;
    grid-row-gap: 10px;
  }
  .gameboard .response {
    min-height: 40px;
    margin-top: 10px;
  }
  .gameboard .response .msgbubble {
    padding: 0.1em 0;
  }
  .gameboard .response .msgbubble:before {
    display: grid;
    align-items: center;
    height: 100%;
    padding: 0;
    line-height: 1.25rem;
    font-size: 1.75rem;
  }
  .gameboard .response .msgbubble#wrongBubble:before {
    line-height: clamp(1rem, 4.5vw, 2.25rem);
    font-size: clamp(0.75rem, 4.5vw, 2.25rem);
    height: unset;
  }
  .gameboard .response .msgbubble#wrongBubble:after {
    line-height: clamp(0.5rem, 4.5vw, 1.25rem);
    font-size: clamp(0.25rem, 3.5vw, 1.25rem);
  }
  .gameboard .timer .pausebutton {
    font-size: clamp(0.75em, 1.5em, 21px);
    font-weight: normal;
  }
  .gameboard .timer #runner {
    line-height: 1.87;
    font-size: 1.5em;
    font-weight: bold;
  }
  .gameboard .vowel_panel.game {
    padding: 3%;
    margin: 0 0 -20px 0;
    align-self: center;
  }
  .gameboard .recordpanel {
    padding: 10px 40px;
  }
}
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.eac_report {
  display: grid;
  place-content: center;
  grid-template-columns: minmax(0, 55%) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  grid-template-areas: "report-header report-header" "grid overall" "bottombar bottombar";
  grid-row-gap: 25px;
  grid-column-gap: 25px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 1.25em;
  color: #0089e8;
  margin: 0 25px;
}

#v_grid_report {
  grid-area: grid;
}

.report_white, .report_blue, .report_green, .report_yellow, .report_red {
  border-radius: 5px;
}

div#disp_date div {
  line-height: 1.38em;
}

.overall_vowels {
  grid-area: overall;
}

a {
  line-height: 1.4;
  text-decoration: none;
}
a#daft_track_progress, a#daft_reportcards {
  margin: 0 0 0.75rem 0;
}
a .select {
  margin: 0;
  padding: 0.25em 1em;
  line-height: 1em;
  max-height: unset;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eac_report_extra_header {
  grid-area: report-header;
  display: grid;
  grid-template-columns: 31% 37% 32%;
  grid-template-rows: auto auto;
  grid-template-areas: "username level date" "itemsplayed leveldesc date";
  color: #0089e8;
  padding: 15px 25px 10px;
  border-radius: 5px;
  border: 1px solid #EEE;
}
.eac_report_extra_header .ipa_symbol, .eac_report_extra_header p.inline, .eac_report_extra_header #disp_level {
  font-size: 21px;
  font-style: normal;
  justify-self: center;
  margin: 3px 0;
}
.eac_report_extra_header .ipa_symbol {
  font-size: 1.5em;
}

#disp_username {
  grid-area: username;
  font-size: 21px;
  font-style: normal;
}

#disp_items_played {
  grid-area: itemsplayed;
  font-size: 21px;
  font-style: normal;
  margin: 0.35em 0;
}

#disp_level {
  grid-area: level;
}

#eac_report_extra_header .visible {
  grid-area: leveldesc;
}

#disp_date {
  grid-area: date;
  font-size: 21px;
  font-style: normal;
  justify-self: center;
}

.percentage {
  grid-area: percent;
  align-self: start;
  display: block;
  clear: both;
  color: white;
  text-align: center;
  font-size: clamp(0.25em, 2.2vw, 0.6em);
  margin: clamp(6px, 1.4vw, 7px);
}

#vowel1Div, #vowel7Div {
  /*.percentage {
      line-height: clamp(12px, 1.5vw, 18px);
  }*/
}

.average_label, .average_score, .timer_label, .timer_container, .legend {
  display: block;
  margin: 5px auto 0;
  color: #0089e8;
  font-size: 21px;
  font-weight: 600;
  width: 100%;
}

.eac_report_extra_header .visible {
  color: #2B82C7;
  padding: 0 1em 0.5em;
  display: flex !important;
  flex-wrap: wrap;
  -moz-column-gap: 0.5em;
       column-gap: 0.5em;
  justify-content: center;
  align-items: center;
}
.eac_report_extra_header .visible p.inline {
  padding: 2px 0 0 0;
  align-items: center;
}

.report_white, .report_blue, .report_green, .report_yellow, .report_red {
  display: grid;
  align-items: start;
  grid-template-rows: 43% 40%;
  grid-template-columns: 100%;
  grid-template-areas: "symbol" "percent";
  gap: 5%;
}

.report_white {
  background-color: #f6f6f6;
}

.report_white span.percentage {
  visibility: hidden;
}

.report_blue {
  background-color: #0089e8;
}

.report_green {
  background-color: #4ead1f;
}

.report_yellow {
  background-color: #f1c122;
}

.report_red {
  background-color: red;
}

.average_label {
  grid-area: average-label;
}

.average_score {
  grid-area: average-score;
}

.timer_label {
  grid-area: timer-label;
}

.timer_container {
  grid-area: timer-container;
}

.legend {
  grid-area: legend;
  display: grid;
  grid-template-columns: 15% 85%;
  grid-template-rows: auto auto auto;
  grid-row-gap: 0.2rem;
  align-items: center;
  margin: 0.75em 0;
}

.legend_mastered {
  grid-area: lm;
}

.legend_satisfact {
  grid-area: ls;
}

.legend_needs_practice {
  grid-area: lnp;
}

.legend_mastered, .legend_satisfact, .legend_needs_practice {
  align-items: center;
  text-align: left;
  padding-right: 1em;
}
.legend_mastered p, .legend_mastered div, .legend_satisfact p, .legend_satisfact div, .legend_needs_practice p, .legend_needs_practice div {
  float: left;
}

.mclr, .sclr, .nmpclr {
  width: 25px;
  height: 25px;
  margin: 0 1em 0 0;
  border-radius: 3px;
}

.mclr {
  background-color: #4ead1f;
}

.sclr {
  background-color: #f1c122;
}

.nmpclr {
  background-color: red;
}

@media screen and (max-width: 767px) {
  a .select {
    font-size: clamp(1.5em, 3.5vw, 1.75em);
  }
  #disp_username {
    grid-area: username;
    font-size: 1.5em;
    font-style: normal;
  }
  #disp_items_played {
    grid-area: itemsplayed;
    font-size: 1.5em;
    font-style: normal;
    margin: 0.35em 0;
  }
  .eac_report_extra_header #disp_level {
    grid-area: level;
    font-size: 1.5em;
  }
  .eac_report_extra_header p.inline {
    font-size: 1.5em;
  }
  #eac_report_extra_header .visible {
    grid-area: leveldesc;
  }
  #disp_date {
    grid-area: date;
    font-size: 1.5em;
    font-style: normal;
    justify-self: center;
  }
  .eac_report {
    display: grid;
    place-content: center;
    grid-template-columns: 100%;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "report-header" "grid" "overall" "bottombar";
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 1.25em;
    color: #0089e8;
    grid-row-gap: 10px;
    margin: 0 auto 12px;
  }
  .percentage {
    font-size: clamp(0.25rem, 4.2vw, 21px);
    line-height: clamp(0.25rem, 3.4vw, 2rem);
    margin-top: clamp(0.4rem, 0.7vw, 2rem);
  }
  .eac_report_extra_header {
    grid-area: report-header;
    display: grid;
    justify-content: center;
    grid-template-columns: 100%;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas: "username" "itemsplayed" "date" "level" "leveldesc";
    grid-row-gap: 10px;
    color: #0089e8;
    padding: 15px 25px 10px;
    border-radius: 5px;
    border: 1px solid #EEE;
    width: 87%;
    justify-self: center;
    max-width: 606px;
    margin: 0 0 15px 0;
  }
  #disp_username, #disp_items_played, #disp_date {
    justify-self: center;
    margin: 0;
    text-align: center;
  }
  .average_label, .average_score, .timer_label, .timer_container, .legend {
    display: block;
    margin: 5px auto 0;
    color: #0089e8;
    font-size: 1.875rem;
    font-weight: 600;
    width: 100%;
  }
  .legend {
    display: grid;
    grid-template-columns: 40px 1fr;
    margin: 20px 0;
  }
}
@media screen and (max-width: 479px) {
  .eac_report_extra_header .visible {
    padding: 0.5em 0;
  }
  .average_label, .average_score, .timer_label, .timer_container, .legend {
    font-size: clamp(28px, 4.3vw, 30px);
  }
  .timer_container {
    overflow-wrap: break-word;
  }
  .eac_report_extra_header {
    width: 100%;
  }
  a#daft_track_progress, a#daft_reportcards {
    width: 100% !important;
  }
}
@media screen and (max-width: 394px) {
  .average_label, .average_score, .timer_label, .timer_container, .legend {
    font-size: 27px;
  }
}
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.control-panel {
  overflow: hidden;
}

.rCol {
  grid-column: 2;
}

#oopsSwitch {
  grid-row: 1;
  padding: 0 0.75em;
  align-self: flex-end;
}

#record_select {
  width: 100%;
  max-width: 606px;
  margin: 0 auto 30px;
}
#record_select .record_label {
  color: #0089e8 !important;
  font-size: 21px;
  font-weight: 600;
}
#record_select button#recordSwitch {
  -webkit-tap-highlight-color: transparent;
}

@media screen and (max-width: 991px) {
  #oopsSwitch {
    grid-column-start: auto;
    grid-column-end: auto;
    grid-row-start: auto;
    grid-row-end: auto;
    margin-top: 0;
    min-height: 49px;
    max-height: 100%;
  }
}
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.consonants_panel.game {
  grid-area: consonantsgrid;
}

.consonants.gameboard {
  display: grid;
  overflow: hidden;
  place-content: center;
  grid-template-columns: minmax(0, 450px) 490px;
  grid-template-rows: 60px 50px 50px auto auto;
  grid-template-areas: "sns sns" "hints consonantsgrid" "timer consonantsgrid" "response consonantsgrid" "gameinfo consonantsgrid" "proceed proceed";
  font-weight: bolder;
  grid-column-gap: 25px;
  grid-row-gap: 10px;
  margin: 0 auto;
  padding: 0 25px;
}
.consonants.gameboard .recordpanel {
  grid-area: 4/1/5/2;
  grid-template-columns: 25% 25% 25% 25%;
}

@media screen and (max-width: 991px) {
  .consonants.gameboard {
    display: grid;
    overflow: hidden;
    place-content: center;
    grid-template-columns: 90%;
    grid-template-rows: 49px 49px auto auto auto auto;
    grid-template-areas: "sns" "timer" "consonantsgrid" "response" "gameinfo";
    font-weight: bolder;
    color: #0089e8;
    grid-column-gap: 25px;
    grid-row-gap: 20px;
    width: 100%;
  }
  .consonants.gameboard .proceed {
    grid-area: 2/1/span 2/span 1;
  }
  .consonants.gameboard .recordpanel {
    grid-area: 4/1/5/2;
    grid-template-columns: 25% 25% 25% 25%;
    margin: 0;
  }
  .consonants.gameboard .consonants_panel.game {
    margin: 0;
    cursor: default;
  }
}
@media screen and (max-width: 767px) {
  .consonants.gameboard {
    margin: 0 auto;
    padding: 0;
  }
}
@media screen and (max-width: 479px) {
  .consonants.gameboard {
    grid-template-rows: 49px 49px auto auto auto auto;
    grid-row-gap: 10px;
    margin: 0 auto;
    grid-template-columns: 100%;
  }
  .consonants.gameboard .response {
    margin: 10px 0 0;
  }
  .consonants.gameboard .proceed {
    grid-area: 2/1/span 2/span 1;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .cons_select_table {
    padding: 0 !important;
  }
  .consonants_panel {
    grid-template-rows: minmax(0, 60px) minmax(0, 60px) minmax(0, 60px) minmax(0, 60px) !important;
    grid-column-gap: 5px !important;
    max-height: 150px;
    margin: 5px 15px;
  }
  .consonants_panel .vcButton {
    width: 100% !important;
    height: 100% !important;
  }
  .consonants_panel .vcButton:before {
    display: grid;
    align-items: center;
    line-height: clamp(1.5rem, 4.5vw, 2rem);
    font-size: clamp(1.5rem, 4.5vw, 2rem);
  }
  .consonants.gameboard {
    grid-template-columns: minmax(0, 50%) minmax(0, 500px);
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas: "sns sns" "timer consonantsgrid" "response consonantsgrid" "gameinfo consonantsgrid";
    grid-column-gap: 1.5%;
    grid-row-gap: 10px;
  }
  .consonants.gameboard .consonants_panel.game {
    align-self: start;
  }
  .consonants.gameboard .select, .consonants.gameboard .proceed, .consonants.gameboard .timer, .consonants.gameboard .response, .consonants.gameboard .recordpanel, .consonants.gameboard .gameinfo {
    width: 100%;
    justify-self: end;
  }
  .consonants.gameboard .timer {
    height: 49px;
    margin: 0 !important;
  }
  .consonants.gameboard .proceed {
    margin: 0;
    grid-area: 2/1/3/2;
  }
  .consonants.gameboard .response {
    min-height: 78px;
  }
  .consonants.gameboard .response .msgbubble {
    font-size: 1.75em;
    line-height: 1.25em !important;
    padding: 0;
  }
  .consonants.gameboard .response .msgbubble:before {
    font-size: 1.5rem;
  }
  .consonants.gameboard .response .msgbubble#wrongBubble:before {
    line-height: clamp(1.5rem, 4.5vw, 2rem);
    font-size: clamp(1.5rem, 4.5vw, 2rem);
    height: unset;
  }
  .consonants.gameboard .response .msgbubble#wrongBubble:after {
    line-height: clamp(1.25rem, 2vw, 1.25rem);
    font-size: clamp(0.5rem, 2vw, 1.05rem);
  }
  .consonants.gameboard .recordpanel {
    grid-area: 3/1/4/2;
    height: 100%;
  }
  .consonants.gameboard .recordpanel .rcp {
    line-height: clamp(1.15rem, 2.5vw, 1.25rem) !important;
    font-size: clamp(1.15rem, 2.5vw, 1.05rem) !important;
  }
}
@media screen and (max-height: 394px) and (orientation: landscape) {
  .consonants.gameboard {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas: "sns sns" "proceed consonantsgrid" "timer consonantsgrid" "response consonantsgrid" "gameinfo consonantsgrid";
    grid-column-gap: 1.5%;
    grid-row-gap: 10px;
    padding: 0;
  }
  .consonants.gameboard .select, .consonants.gameboard .proceed, .consonants.gameboard .timer, .consonants.gameboard .response, .consonants.gameboard .recordpanel, .consonants.gameboard .gameinfo {
    width: 100%;
    justify-self: center;
  }
  .consonants.gameboard .sgbtnStartNewSession.select {
    margin-bottom: 0;
    max-width: 100%;
  }
  .consonants.gameboard .proceed {
    margin: 0 !important;
  }
  .consonants.gameboard .timer {
    margin: 0 !important;
    grid-area: 2/1/3/2;
  }
  .consonants.gameboard .response {
    min-height: 60px;
    margin: 0 !important;
    grid-area: 3/1/4/2;
  }
  .consonants.gameboard .gameinfo {
    margin: 0 !important;
    grid-area: 4/1/5/2;
  }
  #eacContentInner {
    padding: 0 !important;
  }
}
@media screen and (max-width: 394px) {
  .consonants.gameboard .response {
    margin: 0;
  }
}
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.consonants_panel, .consonants_selection_panel {
  display: grid;
  justify-items: center;
  justify-content: center;
  grid-template-columns: repeat(14, minmax(0, 30px));
  grid-template-rows: 60px 60px 60px 60px;
  font-weight: bolder;
  color: #0089e8;
  grid-row-gap: 4px;
  grid-column-gap: 2.5px;
}
.consonants_panel .vcButton, .consonants_panel .spacer, .consonants_selection_panel .vcButton, .consonants_selection_panel .spacer {
  width: 60px;
  height: 60px;
  background-color: #FFF;
  transition: background-color 0.2s;
  border-radius: 5px;
}
.consonants_panel .vcButton, .consonants_selection_panel .vcButton {
  line-height: 50px !important;
  text-align: center;
  color: #0089e8;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 3em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
}
@media (hover: hover) {
  .consonants_panel .vcButton:hover, .consonants_selection_panel .vcButton:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
.consonants_panel .vcButton.c2, .consonants_panel .vcButton.c3, .consonants_panel .vcButton.c4, .consonants_panel .vcButton.c5, .consonants_panel .vcButton.c7, .consonants_panel .vcButton.c9, .consonants_panel .vcButton.c10, .consonants_panel .vcButton.c11, .consonants_panel .vcButton.c17, .consonants_selection_panel .vcButton.c2, .consonants_selection_panel .vcButton.c3, .consonants_selection_panel .vcButton.c4, .consonants_selection_panel .vcButton.c5, .consonants_selection_panel .vcButton.c7, .consonants_selection_panel .vcButton.c9, .consonants_selection_panel .vcButton.c10, .consonants_selection_panel .vcButton.c11, .consonants_selection_panel .vcButton.c17 {
  line-height: 50px !important;
}
.consonants_panel .vcButton.c15, .consonants_panel .vcButton.c15fade, .consonants_selection_panel .vcButton.c15, .consonants_selection_panel .vcButton.c15fade {
  line-height: 50px !important;
}
.consonants_panel .vcButton.c22, .consonants_panel .vcButton.c22fade, .consonants_selection_panel .vcButton.c22, .consonants_selection_panel .vcButton.c22fade {
  line-height: 50px !important;
}
.consonants_panel .spacer, .consonants_selection_panel .spacer {
  opacity: 60%;
}
.consonants_panel .vcButton.c1, .consonants_selection_panel .vcButton.c1 {
  grid-row: 1/2;
  grid-column: 2/4;
}
.consonants_panel .vcButton.c1:before, .consonants_selection_panel .vcButton.c1:before {
  content: "p";
}
.consonants_panel .vcButton.c1_select, .consonants_selection_panel .vcButton.c1_select {
  color: white;
  background-color: #0089e8;
}
.consonants_panel .c1btn, .consonants_panel .c1dis, .consonants_panel .c1fade, .consonants_panel .c1high, .consonants_panel .c1_record_highlight, .consonants_selection_panel .c1btn, .consonants_selection_panel .c1dis, .consonants_selection_panel .c1fade, .consonants_selection_panel .c1high, .consonants_selection_panel .c1_record_highlight {
  width: 60px;
  height: 60px;
  background-color: white;
  transition: background-color 0.2s;
  line-height: 50px !important;
  text-align: center;
  border-radius: 5px;
  color: #0089e8;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 3em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  padding: 0 0 13px 0;
  margin: 0 auto 0 !important;
  grid-row: 1/2;
  grid-column: 2/4;
}
@media (hover: hover) {
  .consonants_panel .c1btn:hover, .consonants_panel .c1dis:hover, .consonants_panel .c1fade:hover, .consonants_panel .c1high:hover, .consonants_panel .c1_record_highlight:hover, .consonants_selection_panel .c1btn:hover, .consonants_selection_panel .c1dis:hover, .consonants_selection_panel .c1fade:hover, .consonants_selection_panel .c1high:hover, .consonants_selection_panel .c1_record_highlight:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
@media (hover: none) {
  .consonants_panel .c1btn, .consonants_panel .c1dis, .consonants_panel .c1fade, .consonants_panel .c1high, .consonants_panel .c1_record_highlight, .consonants_selection_panel .c1btn, .consonants_selection_panel .c1dis, .consonants_selection_panel .c1fade, .consonants_selection_panel .c1high, .consonants_selection_panel .c1_record_highlight {
    padding: 0 0 7px 0;
  }
}
.consonants_panel .c1btn:before, .consonants_panel .c1dis:before, .consonants_panel .c1fade:before, .consonants_panel .c1high:before, .consonants_panel .c1_record_highlight:before, .consonants_selection_panel .c1btn:before, .consonants_selection_panel .c1dis:before, .consonants_selection_panel .c1fade:before, .consonants_selection_panel .c1high:before, .consonants_selection_panel .c1_record_highlight:before {
  content: "p";
}
.consonants_panel .c1dis, .consonants_selection_panel .c1dis {
  color: #fafafa;
  background-color: #fafafa;
}
@media (hover: hover) {
  .consonants_panel .c1dis:hover, .consonants_selection_panel .c1dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
.consonants_panel .c1fade, .consonants_selection_panel .c1fade {
  color: #6ec0f9;
  background-color: white;
}
@media (hover: hover) {
  .consonants_panel .c1fade:hover, .consonants_selection_panel .c1fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
.consonants_panel .c1high, .consonants_selection_panel .c1high {
  color: white;
  background-color: green;
}
@media (hover: hover) {
  .consonants_panel .c1high:hover, .consonants_selection_panel .c1high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.consonants_panel .c1_record_highlight, .consonants_selection_panel .c1_record_highlight {
  color: white;
  background-color: #0089e8;
  cursor: default !important;
}
.consonants_panel .vcButton.c2, .consonants_selection_panel .vcButton.c2 {
  grid-row: 1/2;
  grid-column: 4/6;
}
.consonants_panel .vcButton.c2:before, .consonants_selection_panel .vcButton.c2:before {
  content: "b";
}
.consonants_panel .vcButton.c2_select, .consonants_selection_panel .vcButton.c2_select {
  color: white;
  background-color: #0089e8;
}
.consonants_panel .c2btn, .consonants_panel .c2dis, .consonants_panel .c2fade, .consonants_panel .c2high, .consonants_panel .c2_record_highlight, .consonants_selection_panel .c2btn, .consonants_selection_panel .c2dis, .consonants_selection_panel .c2fade, .consonants_selection_panel .c2high, .consonants_selection_panel .c2_record_highlight {
  width: 60px;
  height: 60px;
  background-color: white;
  transition: background-color 0.2s;
  line-height: 50px !important;
  text-align: center;
  border-radius: 5px;
  color: #0089e8;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 3em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  padding: 0 0 13px 0;
  margin: 0 auto 0 !important;
  grid-row: 1/2;
  grid-column: 4/6;
}
@media (hover: hover) {
  .consonants_panel .c2btn:hover, .consonants_panel .c2dis:hover, .consonants_panel .c2fade:hover, .consonants_panel .c2high:hover, .consonants_panel .c2_record_highlight:hover, .consonants_selection_panel .c2btn:hover, .consonants_selection_panel .c2dis:hover, .consonants_selection_panel .c2fade:hover, .consonants_selection_panel .c2high:hover, .consonants_selection_panel .c2_record_highlight:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
@media (hover: none) {
  .consonants_panel .c2btn, .consonants_panel .c2dis, .consonants_panel .c2fade, .consonants_panel .c2high, .consonants_panel .c2_record_highlight, .consonants_selection_panel .c2btn, .consonants_selection_panel .c2dis, .consonants_selection_panel .c2fade, .consonants_selection_panel .c2high, .consonants_selection_panel .c2_record_highlight {
    padding: 0 0 7px 0;
  }
}
.consonants_panel .c2btn:before, .consonants_panel .c2dis:before, .consonants_panel .c2fade:before, .consonants_panel .c2high:before, .consonants_panel .c2_record_highlight:before, .consonants_selection_panel .c2btn:before, .consonants_selection_panel .c2dis:before, .consonants_selection_panel .c2fade:before, .consonants_selection_panel .c2high:before, .consonants_selection_panel .c2_record_highlight:before {
  content: "b";
}
.consonants_panel .c2dis, .consonants_selection_panel .c2dis {
  color: #fafafa;
  background-color: #fafafa;
}
@media (hover: hover) {
  .consonants_panel .c2dis:hover, .consonants_selection_panel .c2dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
.consonants_panel .c2fade, .consonants_selection_panel .c2fade {
  color: #6ec0f9;
  background-color: white;
}
@media (hover: hover) {
  .consonants_panel .c2fade:hover, .consonants_selection_panel .c2fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
.consonants_panel .c2high, .consonants_selection_panel .c2high {
  color: white;
  background-color: green;
}
@media (hover: hover) {
  .consonants_panel .c2high:hover, .consonants_selection_panel .c2high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.consonants_panel .c2_record_highlight, .consonants_selection_panel .c2_record_highlight {
  color: white;
  background-color: #0089e8;
  cursor: default !important;
}
.consonants_panel .vcButton.c3, .consonants_selection_panel .vcButton.c3 {
  grid-row: 1/2;
  grid-column: 6/8;
}
.consonants_panel .vcButton.c3:before, .consonants_selection_panel .vcButton.c3:before {
  content: "t";
}
.consonants_panel .vcButton.c3_select, .consonants_selection_panel .vcButton.c3_select {
  color: white;
  background-color: #0089e8;
}
.consonants_panel .c3btn, .consonants_panel .c3dis, .consonants_panel .c3fade, .consonants_panel .c3high, .consonants_panel .c3_record_highlight, .consonants_selection_panel .c3btn, .consonants_selection_panel .c3dis, .consonants_selection_panel .c3fade, .consonants_selection_panel .c3high, .consonants_selection_panel .c3_record_highlight {
  width: 60px;
  height: 60px;
  background-color: white;
  transition: background-color 0.2s;
  line-height: 50px !important;
  text-align: center;
  border-radius: 5px;
  color: #0089e8;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 3em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  padding: 0 0 13px 0;
  margin: 0 auto 0 !important;
  grid-row: 1/2;
  grid-column: 6/8;
}
@media (hover: hover) {
  .consonants_panel .c3btn:hover, .consonants_panel .c3dis:hover, .consonants_panel .c3fade:hover, .consonants_panel .c3high:hover, .consonants_panel .c3_record_highlight:hover, .consonants_selection_panel .c3btn:hover, .consonants_selection_panel .c3dis:hover, .consonants_selection_panel .c3fade:hover, .consonants_selection_panel .c3high:hover, .consonants_selection_panel .c3_record_highlight:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
@media (hover: none) {
  .consonants_panel .c3btn, .consonants_panel .c3dis, .consonants_panel .c3fade, .consonants_panel .c3high, .consonants_panel .c3_record_highlight, .consonants_selection_panel .c3btn, .consonants_selection_panel .c3dis, .consonants_selection_panel .c3fade, .consonants_selection_panel .c3high, .consonants_selection_panel .c3_record_highlight {
    padding: 0 0 7px 0;
  }
}
.consonants_panel .c3btn:before, .consonants_panel .c3dis:before, .consonants_panel .c3fade:before, .consonants_panel .c3high:before, .consonants_panel .c3_record_highlight:before, .consonants_selection_panel .c3btn:before, .consonants_selection_panel .c3dis:before, .consonants_selection_panel .c3fade:before, .consonants_selection_panel .c3high:before, .consonants_selection_panel .c3_record_highlight:before {
  content: "t";
}
.consonants_panel .c3dis, .consonants_selection_panel .c3dis {
  color: #fafafa;
  background-color: #fafafa;
}
@media (hover: hover) {
  .consonants_panel .c3dis:hover, .consonants_selection_panel .c3dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
.consonants_panel .c3fade, .consonants_selection_panel .c3fade {
  color: #6ec0f9;
  background-color: white;
}
@media (hover: hover) {
  .consonants_panel .c3fade:hover, .consonants_selection_panel .c3fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
.consonants_panel .c3high, .consonants_selection_panel .c3high {
  color: white;
  background-color: green;
}
@media (hover: hover) {
  .consonants_panel .c3high:hover, .consonants_selection_panel .c3high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.consonants_panel .c3_record_highlight, .consonants_selection_panel .c3_record_highlight {
  color: white;
  background-color: #0089e8;
  cursor: default !important;
}
.consonants_panel .vcButton.c4, .consonants_selection_panel .vcButton.c4 {
  grid-row: 1/2;
  grid-column: 8/10;
}
.consonants_panel .vcButton.c4:before, .consonants_selection_panel .vcButton.c4:before {
  content: "d";
}
.consonants_panel .vcButton.c4_select, .consonants_selection_panel .vcButton.c4_select {
  color: white;
  background-color: #0089e8;
}
.consonants_panel .c4btn, .consonants_panel .c4dis, .consonants_panel .c4fade, .consonants_panel .c4high, .consonants_panel .c4_record_highlight, .consonants_selection_panel .c4btn, .consonants_selection_panel .c4dis, .consonants_selection_panel .c4fade, .consonants_selection_panel .c4high, .consonants_selection_panel .c4_record_highlight {
  width: 60px;
  height: 60px;
  background-color: white;
  transition: background-color 0.2s;
  line-height: 50px !important;
  text-align: center;
  border-radius: 5px;
  color: #0089e8;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 3em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  padding: 0 0 13px 0;
  margin: 0 auto 0 !important;
  grid-row: 1/2;
  grid-column: 8/10;
}
@media (hover: hover) {
  .consonants_panel .c4btn:hover, .consonants_panel .c4dis:hover, .consonants_panel .c4fade:hover, .consonants_panel .c4high:hover, .consonants_panel .c4_record_highlight:hover, .consonants_selection_panel .c4btn:hover, .consonants_selection_panel .c4dis:hover, .consonants_selection_panel .c4fade:hover, .consonants_selection_panel .c4high:hover, .consonants_selection_panel .c4_record_highlight:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
@media (hover: none) {
  .consonants_panel .c4btn, .consonants_panel .c4dis, .consonants_panel .c4fade, .consonants_panel .c4high, .consonants_panel .c4_record_highlight, .consonants_selection_panel .c4btn, .consonants_selection_panel .c4dis, .consonants_selection_panel .c4fade, .consonants_selection_panel .c4high, .consonants_selection_panel .c4_record_highlight {
    padding: 0 0 7px 0;
  }
}
.consonants_panel .c4btn:before, .consonants_panel .c4dis:before, .consonants_panel .c4fade:before, .consonants_panel .c4high:before, .consonants_panel .c4_record_highlight:before, .consonants_selection_panel .c4btn:before, .consonants_selection_panel .c4dis:before, .consonants_selection_panel .c4fade:before, .consonants_selection_panel .c4high:before, .consonants_selection_panel .c4_record_highlight:before {
  content: "d";
}
.consonants_panel .c4dis, .consonants_selection_panel .c4dis {
  color: #fafafa;
  background-color: #fafafa;
}
@media (hover: hover) {
  .consonants_panel .c4dis:hover, .consonants_selection_panel .c4dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
.consonants_panel .c4fade, .consonants_selection_panel .c4fade {
  color: #6ec0f9;
  background-color: white;
}
@media (hover: hover) {
  .consonants_panel .c4fade:hover, .consonants_selection_panel .c4fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
.consonants_panel .c4high, .consonants_selection_panel .c4high {
  color: white;
  background-color: green;
}
@media (hover: hover) {
  .consonants_panel .c4high:hover, .consonants_selection_panel .c4high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.consonants_panel .c4_record_highlight, .consonants_selection_panel .c4_record_highlight {
  color: white;
  background-color: #0089e8;
  cursor: default !important;
}
.consonants_panel .vcButton.c5, .consonants_selection_panel .vcButton.c5 {
  grid-row: 1/2;
  grid-column: 10/12;
}
.consonants_panel .vcButton.c5:before, .consonants_selection_panel .vcButton.c5:before {
  content: "k";
}
.consonants_panel .vcButton.c5_select, .consonants_selection_panel .vcButton.c5_select {
  color: white;
  background-color: #0089e8;
}
.consonants_panel .c5btn, .consonants_panel .c5dis, .consonants_panel .c5fade, .consonants_panel .c5high, .consonants_panel .c5_record_highlight, .consonants_selection_panel .c5btn, .consonants_selection_panel .c5dis, .consonants_selection_panel .c5fade, .consonants_selection_panel .c5high, .consonants_selection_panel .c5_record_highlight {
  width: 60px;
  height: 60px;
  background-color: white;
  transition: background-color 0.2s;
  line-height: 50px !important;
  text-align: center;
  border-radius: 5px;
  color: #0089e8;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 3em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  padding: 0 0 13px 0;
  margin: 0 auto 0 !important;
  grid-row: 1/2;
  grid-column: 10/12;
}
@media (hover: hover) {
  .consonants_panel .c5btn:hover, .consonants_panel .c5dis:hover, .consonants_panel .c5fade:hover, .consonants_panel .c5high:hover, .consonants_panel .c5_record_highlight:hover, .consonants_selection_panel .c5btn:hover, .consonants_selection_panel .c5dis:hover, .consonants_selection_panel .c5fade:hover, .consonants_selection_panel .c5high:hover, .consonants_selection_panel .c5_record_highlight:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
@media (hover: none) {
  .consonants_panel .c5btn, .consonants_panel .c5dis, .consonants_panel .c5fade, .consonants_panel .c5high, .consonants_panel .c5_record_highlight, .consonants_selection_panel .c5btn, .consonants_selection_panel .c5dis, .consonants_selection_panel .c5fade, .consonants_selection_panel .c5high, .consonants_selection_panel .c5_record_highlight {
    padding: 0 0 7px 0;
  }
}
.consonants_panel .c5btn:before, .consonants_panel .c5dis:before, .consonants_panel .c5fade:before, .consonants_panel .c5high:before, .consonants_panel .c5_record_highlight:before, .consonants_selection_panel .c5btn:before, .consonants_selection_panel .c5dis:before, .consonants_selection_panel .c5fade:before, .consonants_selection_panel .c5high:before, .consonants_selection_panel .c5_record_highlight:before {
  content: "k";
}
.consonants_panel .c5dis, .consonants_selection_panel .c5dis {
  color: #fafafa;
  background-color: #fafafa;
}
@media (hover: hover) {
  .consonants_panel .c5dis:hover, .consonants_selection_panel .c5dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
.consonants_panel .c5fade, .consonants_selection_panel .c5fade {
  color: #6ec0f9;
  background-color: white;
}
@media (hover: hover) {
  .consonants_panel .c5fade:hover, .consonants_selection_panel .c5fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
.consonants_panel .c5high, .consonants_selection_panel .c5high {
  color: white;
  background-color: green;
}
@media (hover: hover) {
  .consonants_panel .c5high:hover, .consonants_selection_panel .c5high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.consonants_panel .c5_record_highlight, .consonants_selection_panel .c5_record_highlight {
  color: white;
  background-color: #0089e8;
  cursor: default !important;
}
.consonants_panel .vcButton.c6, .consonants_selection_panel .vcButton.c6 {
  grid-row: 1/2;
  grid-column: 12/14;
}
.consonants_panel .vcButton.c6:before, .consonants_selection_panel .vcButton.c6:before {
  content: "g";
}
.consonants_panel .vcButton.c6_select, .consonants_selection_panel .vcButton.c6_select {
  color: white;
  background-color: #0089e8;
}
.consonants_panel .c6btn, .consonants_panel .c6dis, .consonants_panel .c6fade, .consonants_panel .c6high, .consonants_panel .c6_record_highlight, .consonants_selection_panel .c6btn, .consonants_selection_panel .c6dis, .consonants_selection_panel .c6fade, .consonants_selection_panel .c6high, .consonants_selection_panel .c6_record_highlight {
  width: 60px;
  height: 60px;
  background-color: white;
  transition: background-color 0.2s;
  line-height: 50px !important;
  text-align: center;
  border-radius: 5px;
  color: #0089e8;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 3em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  padding: 0 0 13px 0;
  margin: 0 auto 0 !important;
  grid-row: 1/2;
  grid-column: 12/14;
}
@media (hover: hover) {
  .consonants_panel .c6btn:hover, .consonants_panel .c6dis:hover, .consonants_panel .c6fade:hover, .consonants_panel .c6high:hover, .consonants_panel .c6_record_highlight:hover, .consonants_selection_panel .c6btn:hover, .consonants_selection_panel .c6dis:hover, .consonants_selection_panel .c6fade:hover, .consonants_selection_panel .c6high:hover, .consonants_selection_panel .c6_record_highlight:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
@media (hover: none) {
  .consonants_panel .c6btn, .consonants_panel .c6dis, .consonants_panel .c6fade, .consonants_panel .c6high, .consonants_panel .c6_record_highlight, .consonants_selection_panel .c6btn, .consonants_selection_panel .c6dis, .consonants_selection_panel .c6fade, .consonants_selection_panel .c6high, .consonants_selection_panel .c6_record_highlight {
    padding: 0 0 7px 0;
  }
}
.consonants_panel .c6btn:before, .consonants_panel .c6dis:before, .consonants_panel .c6fade:before, .consonants_panel .c6high:before, .consonants_panel .c6_record_highlight:before, .consonants_selection_panel .c6btn:before, .consonants_selection_panel .c6dis:before, .consonants_selection_panel .c6fade:before, .consonants_selection_panel .c6high:before, .consonants_selection_panel .c6_record_highlight:before {
  content: "g";
}
.consonants_panel .c6dis, .consonants_selection_panel .c6dis {
  color: #fafafa;
  background-color: #fafafa;
}
@media (hover: hover) {
  .consonants_panel .c6dis:hover, .consonants_selection_panel .c6dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
.consonants_panel .c6fade, .consonants_selection_panel .c6fade {
  color: #6ec0f9;
  background-color: white;
}
@media (hover: hover) {
  .consonants_panel .c6fade:hover, .consonants_selection_panel .c6fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
.consonants_panel .c6high, .consonants_selection_panel .c6high {
  color: white;
  background-color: green;
}
@media (hover: hover) {
  .consonants_panel .c6high:hover, .consonants_selection_panel .c6high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.consonants_panel .c6_record_highlight, .consonants_selection_panel .c6_record_highlight {
  color: white;
  background-color: #0089e8;
  cursor: default !important;
}
.consonants_panel .vcButton.c7, .consonants_selection_panel .vcButton.c7 {
  grid-row: 2/3;
  grid-column: 1/3;
}
.consonants_panel .vcButton.c7:before, .consonants_selection_panel .vcButton.c7:before {
  content: "f";
}
.consonants_panel .vcButton.c7_select, .consonants_selection_panel .vcButton.c7_select {
  color: white;
  background-color: #0089e8;
}
.consonants_panel .c7btn, .consonants_panel .c7dis, .consonants_panel .c7fade, .consonants_panel .c7high, .consonants_panel .c7_record_highlight, .consonants_selection_panel .c7btn, .consonants_selection_panel .c7dis, .consonants_selection_panel .c7fade, .consonants_selection_panel .c7high, .consonants_selection_panel .c7_record_highlight {
  width: 60px;
  height: 60px;
  background-color: white;
  transition: background-color 0.2s;
  line-height: 50px !important;
  text-align: center;
  border-radius: 5px;
  color: #0089e8;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 3em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  padding: 0 0 13px 0;
  margin: 0 auto 0 !important;
  grid-row: 2/3;
  grid-column: 1/3;
}
@media (hover: hover) {
  .consonants_panel .c7btn:hover, .consonants_panel .c7dis:hover, .consonants_panel .c7fade:hover, .consonants_panel .c7high:hover, .consonants_panel .c7_record_highlight:hover, .consonants_selection_panel .c7btn:hover, .consonants_selection_panel .c7dis:hover, .consonants_selection_panel .c7fade:hover, .consonants_selection_panel .c7high:hover, .consonants_selection_panel .c7_record_highlight:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
@media (hover: none) {
  .consonants_panel .c7btn, .consonants_panel .c7dis, .consonants_panel .c7fade, .consonants_panel .c7high, .consonants_panel .c7_record_highlight, .consonants_selection_panel .c7btn, .consonants_selection_panel .c7dis, .consonants_selection_panel .c7fade, .consonants_selection_panel .c7high, .consonants_selection_panel .c7_record_highlight {
    padding: 0 0 7px 0;
  }
}
.consonants_panel .c7btn:before, .consonants_panel .c7dis:before, .consonants_panel .c7fade:before, .consonants_panel .c7high:before, .consonants_panel .c7_record_highlight:before, .consonants_selection_panel .c7btn:before, .consonants_selection_panel .c7dis:before, .consonants_selection_panel .c7fade:before, .consonants_selection_panel .c7high:before, .consonants_selection_panel .c7_record_highlight:before {
  content: "f";
}
.consonants_panel .c7dis, .consonants_selection_panel .c7dis {
  color: #fafafa;
  background-color: #fafafa;
}
@media (hover: hover) {
  .consonants_panel .c7dis:hover, .consonants_selection_panel .c7dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
.consonants_panel .c7fade, .consonants_selection_panel .c7fade {
  color: #6ec0f9;
  background-color: white;
}
@media (hover: hover) {
  .consonants_panel .c7fade:hover, .consonants_selection_panel .c7fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
.consonants_panel .c7high, .consonants_selection_panel .c7high {
  color: white;
  background-color: green;
}
@media (hover: hover) {
  .consonants_panel .c7high:hover, .consonants_selection_panel .c7high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.consonants_panel .c7_record_highlight, .consonants_selection_panel .c7_record_highlight {
  color: white;
  background-color: #0089e8;
  cursor: default !important;
}
.consonants_panel .vcButton.c8, .consonants_selection_panel .vcButton.c8 {
  grid-row: 2/3;
  grid-column: 3/5;
}
.consonants_panel .vcButton.c8:before, .consonants_selection_panel .vcButton.c8:before {
  content: "v";
}
.consonants_panel .vcButton.c8_select, .consonants_selection_panel .vcButton.c8_select {
  color: white;
  background-color: #0089e8;
}
.consonants_panel .c8btn, .consonants_panel .c8dis, .consonants_panel .c8fade, .consonants_panel .c8high, .consonants_panel .c8_record_highlight, .consonants_selection_panel .c8btn, .consonants_selection_panel .c8dis, .consonants_selection_panel .c8fade, .consonants_selection_panel .c8high, .consonants_selection_panel .c8_record_highlight {
  width: 60px;
  height: 60px;
  background-color: white;
  transition: background-color 0.2s;
  line-height: 50px !important;
  text-align: center;
  border-radius: 5px;
  color: #0089e8;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 3em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  padding: 0 0 13px 0;
  margin: 0 auto 0 !important;
  grid-row: 2/3;
  grid-column: 3/5;
}
@media (hover: hover) {
  .consonants_panel .c8btn:hover, .consonants_panel .c8dis:hover, .consonants_panel .c8fade:hover, .consonants_panel .c8high:hover, .consonants_panel .c8_record_highlight:hover, .consonants_selection_panel .c8btn:hover, .consonants_selection_panel .c8dis:hover, .consonants_selection_panel .c8fade:hover, .consonants_selection_panel .c8high:hover, .consonants_selection_panel .c8_record_highlight:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
@media (hover: none) {
  .consonants_panel .c8btn, .consonants_panel .c8dis, .consonants_panel .c8fade, .consonants_panel .c8high, .consonants_panel .c8_record_highlight, .consonants_selection_panel .c8btn, .consonants_selection_panel .c8dis, .consonants_selection_panel .c8fade, .consonants_selection_panel .c8high, .consonants_selection_panel .c8_record_highlight {
    padding: 0 0 7px 0;
  }
}
.consonants_panel .c8btn:before, .consonants_panel .c8dis:before, .consonants_panel .c8fade:before, .consonants_panel .c8high:before, .consonants_panel .c8_record_highlight:before, .consonants_selection_panel .c8btn:before, .consonants_selection_panel .c8dis:before, .consonants_selection_panel .c8fade:before, .consonants_selection_panel .c8high:before, .consonants_selection_panel .c8_record_highlight:before {
  content: "v";
}
.consonants_panel .c8dis, .consonants_selection_panel .c8dis {
  color: #fafafa;
  background-color: #fafafa;
}
@media (hover: hover) {
  .consonants_panel .c8dis:hover, .consonants_selection_panel .c8dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
.consonants_panel .c8fade, .consonants_selection_panel .c8fade {
  color: #6ec0f9;
  background-color: white;
}
@media (hover: hover) {
  .consonants_panel .c8fade:hover, .consonants_selection_panel .c8fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
.consonants_panel .c8high, .consonants_selection_panel .c8high {
  color: white;
  background-color: green;
}
@media (hover: hover) {
  .consonants_panel .c8high:hover, .consonants_selection_panel .c8high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.consonants_panel .c8_record_highlight, .consonants_selection_panel .c8_record_highlight {
  color: white;
  background-color: #0089e8;
  cursor: default !important;
}
.consonants_panel .vcButton.c9, .consonants_selection_panel .vcButton.c9 {
  grid-row: 2/3;
  grid-column: 13/15;
}
.consonants_panel .vcButton.c9:before, .consonants_selection_panel .vcButton.c9:before {
  content: "h";
}
.consonants_panel .vcButton.c9_select, .consonants_selection_panel .vcButton.c9_select {
  color: white;
  background-color: #0089e8;
}
.consonants_panel .c9btn, .consonants_panel .c9dis, .consonants_panel .c9fade, .consonants_panel .c9high, .consonants_panel .c9_record_highlight, .consonants_selection_panel .c9btn, .consonants_selection_panel .c9dis, .consonants_selection_panel .c9fade, .consonants_selection_panel .c9high, .consonants_selection_panel .c9_record_highlight {
  width: 60px;
  height: 60px;
  background-color: white;
  transition: background-color 0.2s;
  line-height: 50px !important;
  text-align: center;
  border-radius: 5px;
  color: #0089e8;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 3em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  padding: 0 0 13px 0;
  margin: 0 auto 0 !important;
  grid-row: 2/3;
  grid-column: 13/15;
}
@media (hover: hover) {
  .consonants_panel .c9btn:hover, .consonants_panel .c9dis:hover, .consonants_panel .c9fade:hover, .consonants_panel .c9high:hover, .consonants_panel .c9_record_highlight:hover, .consonants_selection_panel .c9btn:hover, .consonants_selection_panel .c9dis:hover, .consonants_selection_panel .c9fade:hover, .consonants_selection_panel .c9high:hover, .consonants_selection_panel .c9_record_highlight:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
@media (hover: none) {
  .consonants_panel .c9btn, .consonants_panel .c9dis, .consonants_panel .c9fade, .consonants_panel .c9high, .consonants_panel .c9_record_highlight, .consonants_selection_panel .c9btn, .consonants_selection_panel .c9dis, .consonants_selection_panel .c9fade, .consonants_selection_panel .c9high, .consonants_selection_panel .c9_record_highlight {
    padding: 0 0 7px 0;
  }
}
.consonants_panel .c9btn:before, .consonants_panel .c9dis:before, .consonants_panel .c9fade:before, .consonants_panel .c9high:before, .consonants_panel .c9_record_highlight:before, .consonants_selection_panel .c9btn:before, .consonants_selection_panel .c9dis:before, .consonants_selection_panel .c9fade:before, .consonants_selection_panel .c9high:before, .consonants_selection_panel .c9_record_highlight:before {
  content: "h";
}
.consonants_panel .c9dis, .consonants_selection_panel .c9dis {
  color: #fafafa;
  background-color: #fafafa;
}
@media (hover: hover) {
  .consonants_panel .c9dis:hover, .consonants_selection_panel .c9dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
.consonants_panel .c9fade, .consonants_selection_panel .c9fade {
  color: #6ec0f9;
  background-color: white;
}
@media (hover: hover) {
  .consonants_panel .c9fade:hover, .consonants_selection_panel .c9fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
.consonants_panel .c9high, .consonants_selection_panel .c9high {
  color: white;
  background-color: green;
}
@media (hover: hover) {
  .consonants_panel .c9high:hover, .consonants_selection_panel .c9high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.consonants_panel .c9_record_highlight, .consonants_selection_panel .c9_record_highlight {
  color: white;
  background-color: #0089e8;
  cursor: default !important;
}
.consonants_panel .vcButton.c10, .consonants_selection_panel .vcButton.c10 {
  grid-row: 2/3;
  grid-column: 5/7;
}
.consonants_panel .vcButton.c10:before, .consonants_selection_panel .vcButton.c10:before {
  content: "θ";
}
.consonants_panel .vcButton.c10_select, .consonants_selection_panel .vcButton.c10_select {
  color: white;
  background-color: #0089e8;
}
.consonants_panel .c10btn, .consonants_panel .c10dis, .consonants_panel .c10fade, .consonants_panel .c10high, .consonants_panel .c10_record_highlight, .consonants_selection_panel .c10btn, .consonants_selection_panel .c10dis, .consonants_selection_panel .c10fade, .consonants_selection_panel .c10high, .consonants_selection_panel .c10_record_highlight {
  width: 60px;
  height: 60px;
  background-color: white;
  transition: background-color 0.2s;
  line-height: 50px !important;
  text-align: center;
  border-radius: 5px;
  color: #0089e8;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 3em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  padding: 0 0 13px 0;
  margin: 0 auto 0 !important;
  grid-row: 2/3;
  grid-column: 5/7;
}
@media (hover: hover) {
  .consonants_panel .c10btn:hover, .consonants_panel .c10dis:hover, .consonants_panel .c10fade:hover, .consonants_panel .c10high:hover, .consonants_panel .c10_record_highlight:hover, .consonants_selection_panel .c10btn:hover, .consonants_selection_panel .c10dis:hover, .consonants_selection_panel .c10fade:hover, .consonants_selection_panel .c10high:hover, .consonants_selection_panel .c10_record_highlight:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
@media (hover: none) {
  .consonants_panel .c10btn, .consonants_panel .c10dis, .consonants_panel .c10fade, .consonants_panel .c10high, .consonants_panel .c10_record_highlight, .consonants_selection_panel .c10btn, .consonants_selection_panel .c10dis, .consonants_selection_panel .c10fade, .consonants_selection_panel .c10high, .consonants_selection_panel .c10_record_highlight {
    padding: 0 0 7px 0;
  }
}
.consonants_panel .c10btn:before, .consonants_panel .c10dis:before, .consonants_panel .c10fade:before, .consonants_panel .c10high:before, .consonants_panel .c10_record_highlight:before, .consonants_selection_panel .c10btn:before, .consonants_selection_panel .c10dis:before, .consonants_selection_panel .c10fade:before, .consonants_selection_panel .c10high:before, .consonants_selection_panel .c10_record_highlight:before {
  content: "θ";
}
.consonants_panel .c10dis, .consonants_selection_panel .c10dis {
  color: #fafafa;
  background-color: #fafafa;
}
@media (hover: hover) {
  .consonants_panel .c10dis:hover, .consonants_selection_panel .c10dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
.consonants_panel .c10fade, .consonants_selection_panel .c10fade {
  color: #6ec0f9;
  background-color: white;
}
@media (hover: hover) {
  .consonants_panel .c10fade:hover, .consonants_selection_panel .c10fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
.consonants_panel .c10high, .consonants_selection_panel .c10high {
  color: white;
  background-color: green;
}
@media (hover: hover) {
  .consonants_panel .c10high:hover, .consonants_selection_panel .c10high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.consonants_panel .c10_record_highlight, .consonants_selection_panel .c10_record_highlight {
  color: white;
  background-color: #0089e8;
  cursor: default !important;
}
.consonants_panel .vcButton.c11, .consonants_selection_panel .vcButton.c11 {
  grid-row: 2/3;
  grid-column: 7/9;
}
.consonants_panel .vcButton.c11:before, .consonants_selection_panel .vcButton.c11:before {
  content: "ð";
}
.consonants_panel .vcButton.c11_select, .consonants_selection_panel .vcButton.c11_select {
  color: white;
  background-color: #0089e8;
}
.consonants_panel .c11btn, .consonants_panel .c11dis, .consonants_panel .c11fade, .consonants_panel .c11high, .consonants_panel .c11_record_highlight, .consonants_selection_panel .c11btn, .consonants_selection_panel .c11dis, .consonants_selection_panel .c11fade, .consonants_selection_panel .c11high, .consonants_selection_panel .c11_record_highlight {
  width: 60px;
  height: 60px;
  background-color: white;
  transition: background-color 0.2s;
  line-height: 50px !important;
  text-align: center;
  border-radius: 5px;
  color: #0089e8;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 3em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  padding: 0 0 13px 0;
  margin: 0 auto 0 !important;
  grid-row: 2/3;
  grid-column: 7/9;
}
@media (hover: hover) {
  .consonants_panel .c11btn:hover, .consonants_panel .c11dis:hover, .consonants_panel .c11fade:hover, .consonants_panel .c11high:hover, .consonants_panel .c11_record_highlight:hover, .consonants_selection_panel .c11btn:hover, .consonants_selection_panel .c11dis:hover, .consonants_selection_panel .c11fade:hover, .consonants_selection_panel .c11high:hover, .consonants_selection_panel .c11_record_highlight:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
@media (hover: none) {
  .consonants_panel .c11btn, .consonants_panel .c11dis, .consonants_panel .c11fade, .consonants_panel .c11high, .consonants_panel .c11_record_highlight, .consonants_selection_panel .c11btn, .consonants_selection_panel .c11dis, .consonants_selection_panel .c11fade, .consonants_selection_panel .c11high, .consonants_selection_panel .c11_record_highlight {
    padding: 0 0 7px 0;
  }
}
.consonants_panel .c11btn:before, .consonants_panel .c11dis:before, .consonants_panel .c11fade:before, .consonants_panel .c11high:before, .consonants_panel .c11_record_highlight:before, .consonants_selection_panel .c11btn:before, .consonants_selection_panel .c11dis:before, .consonants_selection_panel .c11fade:before, .consonants_selection_panel .c11high:before, .consonants_selection_panel .c11_record_highlight:before {
  content: "ð";
}
.consonants_panel .c11dis, .consonants_selection_panel .c11dis {
  color: #fafafa;
  background-color: #fafafa;
}
@media (hover: hover) {
  .consonants_panel .c11dis:hover, .consonants_selection_panel .c11dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
.consonants_panel .c11fade, .consonants_selection_panel .c11fade {
  color: #6ec0f9;
  background-color: white;
}
@media (hover: hover) {
  .consonants_panel .c11fade:hover, .consonants_selection_panel .c11fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
.consonants_panel .c11high, .consonants_selection_panel .c11high {
  color: white;
  background-color: green;
}
@media (hover: hover) {
  .consonants_panel .c11high:hover, .consonants_selection_panel .c11high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.consonants_panel .c11_record_highlight, .consonants_selection_panel .c11_record_highlight {
  color: white;
  background-color: #0089e8;
  cursor: default !important;
}
.consonants_panel .vcButton.c12, .consonants_selection_panel .vcButton.c12 {
  grid-row: 2/3;
  grid-column: 9/11;
}
.consonants_panel .vcButton.c12:before, .consonants_selection_panel .vcButton.c12:before {
  content: "s";
}
.consonants_panel .vcButton.c12_select, .consonants_selection_panel .vcButton.c12_select {
  color: white;
  background-color: #0089e8;
}
.consonants_panel .c12btn, .consonants_panel .c12dis, .consonants_panel .c12fade, .consonants_panel .c12high, .consonants_panel .c12_record_highlight, .consonants_selection_panel .c12btn, .consonants_selection_panel .c12dis, .consonants_selection_panel .c12fade, .consonants_selection_panel .c12high, .consonants_selection_panel .c12_record_highlight {
  width: 60px;
  height: 60px;
  background-color: white;
  transition: background-color 0.2s;
  line-height: 50px !important;
  text-align: center;
  border-radius: 5px;
  color: #0089e8;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 3em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  padding: 0 0 13px 0;
  margin: 0 auto 0 !important;
  grid-row: 2/3;
  grid-column: 9/11;
}
@media (hover: hover) {
  .consonants_panel .c12btn:hover, .consonants_panel .c12dis:hover, .consonants_panel .c12fade:hover, .consonants_panel .c12high:hover, .consonants_panel .c12_record_highlight:hover, .consonants_selection_panel .c12btn:hover, .consonants_selection_panel .c12dis:hover, .consonants_selection_panel .c12fade:hover, .consonants_selection_panel .c12high:hover, .consonants_selection_panel .c12_record_highlight:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
@media (hover: none) {
  .consonants_panel .c12btn, .consonants_panel .c12dis, .consonants_panel .c12fade, .consonants_panel .c12high, .consonants_panel .c12_record_highlight, .consonants_selection_panel .c12btn, .consonants_selection_panel .c12dis, .consonants_selection_panel .c12fade, .consonants_selection_panel .c12high, .consonants_selection_panel .c12_record_highlight {
    padding: 0 0 7px 0;
  }
}
.consonants_panel .c12btn:before, .consonants_panel .c12dis:before, .consonants_panel .c12fade:before, .consonants_panel .c12high:before, .consonants_panel .c12_record_highlight:before, .consonants_selection_panel .c12btn:before, .consonants_selection_panel .c12dis:before, .consonants_selection_panel .c12fade:before, .consonants_selection_panel .c12high:before, .consonants_selection_panel .c12_record_highlight:before {
  content: "s";
}
.consonants_panel .c12dis, .consonants_selection_panel .c12dis {
  color: #fafafa;
  background-color: #fafafa;
}
@media (hover: hover) {
  .consonants_panel .c12dis:hover, .consonants_selection_panel .c12dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
.consonants_panel .c12fade, .consonants_selection_panel .c12fade {
  color: #6ec0f9;
  background-color: white;
}
@media (hover: hover) {
  .consonants_panel .c12fade:hover, .consonants_selection_panel .c12fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
.consonants_panel .c12high, .consonants_selection_panel .c12high {
  color: white;
  background-color: green;
}
@media (hover: hover) {
  .consonants_panel .c12high:hover, .consonants_selection_panel .c12high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.consonants_panel .c12_record_highlight, .consonants_selection_panel .c12_record_highlight {
  color: white;
  background-color: #0089e8;
  cursor: default !important;
}
.consonants_panel .vcButton.c13, .consonants_selection_panel .vcButton.c13 {
  grid-row: 2/3;
  grid-column: 11/13;
}
.consonants_panel .vcButton.c13:before, .consonants_selection_panel .vcButton.c13:before {
  content: "z";
}
.consonants_panel .vcButton.c13_select, .consonants_selection_panel .vcButton.c13_select {
  color: white;
  background-color: #0089e8;
}
.consonants_panel .c13btn, .consonants_panel .c13dis, .consonants_panel .c13fade, .consonants_panel .c13high, .consonants_panel .c13_record_highlight, .consonants_selection_panel .c13btn, .consonants_selection_panel .c13dis, .consonants_selection_panel .c13fade, .consonants_selection_panel .c13high, .consonants_selection_panel .c13_record_highlight {
  width: 60px;
  height: 60px;
  background-color: white;
  transition: background-color 0.2s;
  line-height: 50px !important;
  text-align: center;
  border-radius: 5px;
  color: #0089e8;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 3em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  padding: 0 0 13px 0;
  margin: 0 auto 0 !important;
  grid-row: 2/3;
  grid-column: 11/13;
}
@media (hover: hover) {
  .consonants_panel .c13btn:hover, .consonants_panel .c13dis:hover, .consonants_panel .c13fade:hover, .consonants_panel .c13high:hover, .consonants_panel .c13_record_highlight:hover, .consonants_selection_panel .c13btn:hover, .consonants_selection_panel .c13dis:hover, .consonants_selection_panel .c13fade:hover, .consonants_selection_panel .c13high:hover, .consonants_selection_panel .c13_record_highlight:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
@media (hover: none) {
  .consonants_panel .c13btn, .consonants_panel .c13dis, .consonants_panel .c13fade, .consonants_panel .c13high, .consonants_panel .c13_record_highlight, .consonants_selection_panel .c13btn, .consonants_selection_panel .c13dis, .consonants_selection_panel .c13fade, .consonants_selection_panel .c13high, .consonants_selection_panel .c13_record_highlight {
    padding: 0 0 7px 0;
  }
}
.consonants_panel .c13btn:before, .consonants_panel .c13dis:before, .consonants_panel .c13fade:before, .consonants_panel .c13high:before, .consonants_panel .c13_record_highlight:before, .consonants_selection_panel .c13btn:before, .consonants_selection_panel .c13dis:before, .consonants_selection_panel .c13fade:before, .consonants_selection_panel .c13high:before, .consonants_selection_panel .c13_record_highlight:before {
  content: "z";
}
.consonants_panel .c13dis, .consonants_selection_panel .c13dis {
  color: #fafafa;
  background-color: #fafafa;
}
@media (hover: hover) {
  .consonants_panel .c13dis:hover, .consonants_selection_panel .c13dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
.consonants_panel .c13fade, .consonants_selection_panel .c13fade {
  color: #6ec0f9;
  background-color: white;
}
@media (hover: hover) {
  .consonants_panel .c13fade:hover, .consonants_selection_panel .c13fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
.consonants_panel .c13high, .consonants_selection_panel .c13high {
  color: white;
  background-color: green;
}
@media (hover: hover) {
  .consonants_panel .c13high:hover, .consonants_selection_panel .c13high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.consonants_panel .c13_record_highlight, .consonants_selection_panel .c13_record_highlight {
  color: white;
  background-color: #0089e8;
  cursor: default !important;
}
.consonants_panel .vcButton.c14, .consonants_selection_panel .vcButton.c14 {
  grid-row: 3/4;
  grid-column: 7/9;
}
.consonants_panel .vcButton.c14:before, .consonants_selection_panel .vcButton.c14:before {
  content: "ʃ";
}
.consonants_panel .vcButton.c14_select, .consonants_selection_panel .vcButton.c14_select {
  color: white;
  background-color: #0089e8;
}
.consonants_panel .c14btn, .consonants_panel .c14dis, .consonants_panel .c14fade, .consonants_panel .c14high, .consonants_panel .c14_record_highlight, .consonants_selection_panel .c14btn, .consonants_selection_panel .c14dis, .consonants_selection_panel .c14fade, .consonants_selection_panel .c14high, .consonants_selection_panel .c14_record_highlight {
  width: 60px;
  height: 60px;
  background-color: white;
  transition: background-color 0.2s;
  line-height: 50px !important;
  text-align: center;
  border-radius: 5px;
  color: #0089e8;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 3em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  padding: 0 0 13px 0;
  margin: 0 auto 0 !important;
  grid-row: 3/4;
  grid-column: 7/9;
}
@media (hover: hover) {
  .consonants_panel .c14btn:hover, .consonants_panel .c14dis:hover, .consonants_panel .c14fade:hover, .consonants_panel .c14high:hover, .consonants_panel .c14_record_highlight:hover, .consonants_selection_panel .c14btn:hover, .consonants_selection_panel .c14dis:hover, .consonants_selection_panel .c14fade:hover, .consonants_selection_panel .c14high:hover, .consonants_selection_panel .c14_record_highlight:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
@media (hover: none) {
  .consonants_panel .c14btn, .consonants_panel .c14dis, .consonants_panel .c14fade, .consonants_panel .c14high, .consonants_panel .c14_record_highlight, .consonants_selection_panel .c14btn, .consonants_selection_panel .c14dis, .consonants_selection_panel .c14fade, .consonants_selection_panel .c14high, .consonants_selection_panel .c14_record_highlight {
    padding: 0 0 7px 0;
  }
}
.consonants_panel .c14btn:before, .consonants_panel .c14dis:before, .consonants_panel .c14fade:before, .consonants_panel .c14high:before, .consonants_panel .c14_record_highlight:before, .consonants_selection_panel .c14btn:before, .consonants_selection_panel .c14dis:before, .consonants_selection_panel .c14fade:before, .consonants_selection_panel .c14high:before, .consonants_selection_panel .c14_record_highlight:before {
  content: "ʃ";
}
.consonants_panel .c14dis, .consonants_selection_panel .c14dis {
  color: #fafafa;
  background-color: #fafafa;
}
@media (hover: hover) {
  .consonants_panel .c14dis:hover, .consonants_selection_panel .c14dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
.consonants_panel .c14fade, .consonants_selection_panel .c14fade {
  color: #6ec0f9;
  background-color: white;
}
@media (hover: hover) {
  .consonants_panel .c14fade:hover, .consonants_selection_panel .c14fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
.consonants_panel .c14high, .consonants_selection_panel .c14high {
  color: white;
  background-color: green;
}
@media (hover: hover) {
  .consonants_panel .c14high:hover, .consonants_selection_panel .c14high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.consonants_panel .c14_record_highlight, .consonants_selection_panel .c14_record_highlight {
  color: white;
  background-color: #0089e8;
  cursor: default !important;
}
.consonants_panel .vcButton.c15, .consonants_selection_panel .vcButton.c15 {
  grid-row: 3/4;
  grid-column: 9/11;
}
.consonants_panel .vcButton.c15:before, .consonants_selection_panel .vcButton.c15:before {
  content: "ʒ";
}
.consonants_panel .vcButton.c15_select, .consonants_selection_panel .vcButton.c15_select {
  color: white;
  background-color: #0089e8;
}
.consonants_panel .c15btn, .consonants_panel .c15dis, .consonants_panel .c15fade, .consonants_panel .c15high, .consonants_panel .c15_record_highlight, .consonants_selection_panel .c15btn, .consonants_selection_panel .c15dis, .consonants_selection_panel .c15fade, .consonants_selection_panel .c15high, .consonants_selection_panel .c15_record_highlight {
  width: 60px;
  height: 60px;
  background-color: white;
  transition: background-color 0.2s;
  line-height: 50px !important;
  text-align: center;
  border-radius: 5px;
  color: #0089e8;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 3em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  padding: 0 0 13px 0;
  margin: 0 auto 0 !important;
  grid-row: 3/4;
  grid-column: 9/11;
}
@media (hover: hover) {
  .consonants_panel .c15btn:hover, .consonants_panel .c15dis:hover, .consonants_panel .c15fade:hover, .consonants_panel .c15high:hover, .consonants_panel .c15_record_highlight:hover, .consonants_selection_panel .c15btn:hover, .consonants_selection_panel .c15dis:hover, .consonants_selection_panel .c15fade:hover, .consonants_selection_panel .c15high:hover, .consonants_selection_panel .c15_record_highlight:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
@media (hover: none) {
  .consonants_panel .c15btn, .consonants_panel .c15dis, .consonants_panel .c15fade, .consonants_panel .c15high, .consonants_panel .c15_record_highlight, .consonants_selection_panel .c15btn, .consonants_selection_panel .c15dis, .consonants_selection_panel .c15fade, .consonants_selection_panel .c15high, .consonants_selection_panel .c15_record_highlight {
    padding: 0 0 7px 0;
  }
}
.consonants_panel .c15btn:before, .consonants_panel .c15dis:before, .consonants_panel .c15fade:before, .consonants_panel .c15high:before, .consonants_panel .c15_record_highlight:before, .consonants_selection_panel .c15btn:before, .consonants_selection_panel .c15dis:before, .consonants_selection_panel .c15fade:before, .consonants_selection_panel .c15high:before, .consonants_selection_panel .c15_record_highlight:before {
  content: "ʒ";
}
.consonants_panel .c15dis, .consonants_selection_panel .c15dis {
  color: #fafafa;
  background-color: #fafafa;
}
@media (hover: hover) {
  .consonants_panel .c15dis:hover, .consonants_selection_panel .c15dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
.consonants_panel .c15fade, .consonants_selection_panel .c15fade {
  color: #6ec0f9;
  background-color: white;
}
@media (hover: hover) {
  .consonants_panel .c15fade:hover, .consonants_selection_panel .c15fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
.consonants_panel .c15high, .consonants_selection_panel .c15high {
  color: white;
  background-color: green;
}
@media (hover: hover) {
  .consonants_panel .c15high:hover, .consonants_selection_panel .c15high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.consonants_panel .c15_record_highlight, .consonants_selection_panel .c15_record_highlight {
  color: white;
  background-color: #0089e8;
  cursor: default !important;
}
.consonants_panel .vcButton.c16, .consonants_selection_panel .vcButton.c16 {
  grid-row: 4/5;
  grid-column: 10/12;
}
.consonants_panel .vcButton.c16:before, .consonants_selection_panel .vcButton.c16:before {
  content: "r";
}
.consonants_panel .vcButton.c16_select, .consonants_selection_panel .vcButton.c16_select {
  color: white;
  background-color: #0089e8;
}
.consonants_panel .c16btn, .consonants_panel .c16dis, .consonants_panel .c16fade, .consonants_panel .c16high, .consonants_panel .c16_record_highlight, .consonants_selection_panel .c16btn, .consonants_selection_panel .c16dis, .consonants_selection_panel .c16fade, .consonants_selection_panel .c16high, .consonants_selection_panel .c16_record_highlight {
  width: 60px;
  height: 60px;
  background-color: white;
  transition: background-color 0.2s;
  line-height: 50px !important;
  text-align: center;
  border-radius: 5px;
  color: #0089e8;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 3em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  padding: 0 0 13px 0;
  margin: 0 auto 0 !important;
  grid-row: 4/5;
  grid-column: 10/12;
}
@media (hover: hover) {
  .consonants_panel .c16btn:hover, .consonants_panel .c16dis:hover, .consonants_panel .c16fade:hover, .consonants_panel .c16high:hover, .consonants_panel .c16_record_highlight:hover, .consonants_selection_panel .c16btn:hover, .consonants_selection_panel .c16dis:hover, .consonants_selection_panel .c16fade:hover, .consonants_selection_panel .c16high:hover, .consonants_selection_panel .c16_record_highlight:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
@media (hover: none) {
  .consonants_panel .c16btn, .consonants_panel .c16dis, .consonants_panel .c16fade, .consonants_panel .c16high, .consonants_panel .c16_record_highlight, .consonants_selection_panel .c16btn, .consonants_selection_panel .c16dis, .consonants_selection_panel .c16fade, .consonants_selection_panel .c16high, .consonants_selection_panel .c16_record_highlight {
    padding: 0 0 7px 0;
  }
}
.consonants_panel .c16btn:before, .consonants_panel .c16dis:before, .consonants_panel .c16fade:before, .consonants_panel .c16high:before, .consonants_panel .c16_record_highlight:before, .consonants_selection_panel .c16btn:before, .consonants_selection_panel .c16dis:before, .consonants_selection_panel .c16fade:before, .consonants_selection_panel .c16high:before, .consonants_selection_panel .c16_record_highlight:before {
  content: "r";
}
.consonants_panel .c16dis, .consonants_selection_panel .c16dis {
  color: #fafafa;
  background-color: #fafafa;
}
@media (hover: hover) {
  .consonants_panel .c16dis:hover, .consonants_selection_panel .c16dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
.consonants_panel .c16fade, .consonants_selection_panel .c16fade {
  color: #6ec0f9;
  background-color: white;
}
@media (hover: hover) {
  .consonants_panel .c16fade:hover, .consonants_selection_panel .c16fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
.consonants_panel .c16high, .consonants_selection_panel .c16high {
  color: white;
  background-color: green;
}
@media (hover: hover) {
  .consonants_panel .c16high:hover, .consonants_selection_panel .c16high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.consonants_panel .c16_record_highlight, .consonants_selection_panel .c16_record_highlight {
  color: white;
  background-color: #0089e8;
  cursor: default !important;
}
.consonants_panel .vcButton.c17, .consonants_selection_panel .vcButton.c17 {
  grid-row: 4/5;
  grid-column: 8/10;
}
.consonants_panel .vcButton.c17:before, .consonants_selection_panel .vcButton.c17:before {
  content: "l";
}
.consonants_panel .vcButton.c17_select, .consonants_selection_panel .vcButton.c17_select {
  color: white;
  background-color: #0089e8;
}
.consonants_panel .c17btn, .consonants_panel .c17dis, .consonants_panel .c17fade, .consonants_panel .c17high, .consonants_panel .c17_record_highlight, .consonants_selection_panel .c17btn, .consonants_selection_panel .c17dis, .consonants_selection_panel .c17fade, .consonants_selection_panel .c17high, .consonants_selection_panel .c17_record_highlight {
  width: 60px;
  height: 60px;
  background-color: white;
  transition: background-color 0.2s;
  line-height: 50px !important;
  text-align: center;
  border-radius: 5px;
  color: #0089e8;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 3em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  padding: 0 0 13px 0;
  margin: 0 auto 0 !important;
  grid-row: 4/5;
  grid-column: 8/10;
}
@media (hover: hover) {
  .consonants_panel .c17btn:hover, .consonants_panel .c17dis:hover, .consonants_panel .c17fade:hover, .consonants_panel .c17high:hover, .consonants_panel .c17_record_highlight:hover, .consonants_selection_panel .c17btn:hover, .consonants_selection_panel .c17dis:hover, .consonants_selection_panel .c17fade:hover, .consonants_selection_panel .c17high:hover, .consonants_selection_panel .c17_record_highlight:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
@media (hover: none) {
  .consonants_panel .c17btn, .consonants_panel .c17dis, .consonants_panel .c17fade, .consonants_panel .c17high, .consonants_panel .c17_record_highlight, .consonants_selection_panel .c17btn, .consonants_selection_panel .c17dis, .consonants_selection_panel .c17fade, .consonants_selection_panel .c17high, .consonants_selection_panel .c17_record_highlight {
    padding: 0 0 7px 0;
  }
}
.consonants_panel .c17btn:before, .consonants_panel .c17dis:before, .consonants_panel .c17fade:before, .consonants_panel .c17high:before, .consonants_panel .c17_record_highlight:before, .consonants_selection_panel .c17btn:before, .consonants_selection_panel .c17dis:before, .consonants_selection_panel .c17fade:before, .consonants_selection_panel .c17high:before, .consonants_selection_panel .c17_record_highlight:before {
  content: "l";
}
.consonants_panel .c17dis, .consonants_selection_panel .c17dis {
  color: #fafafa;
  background-color: #fafafa;
}
@media (hover: hover) {
  .consonants_panel .c17dis:hover, .consonants_selection_panel .c17dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
.consonants_panel .c17fade, .consonants_selection_panel .c17fade {
  color: #6ec0f9;
  background-color: white;
}
@media (hover: hover) {
  .consonants_panel .c17fade:hover, .consonants_selection_panel .c17fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
.consonants_panel .c17high, .consonants_selection_panel .c17high {
  color: white;
  background-color: green;
}
@media (hover: hover) {
  .consonants_panel .c17high:hover, .consonants_selection_panel .c17high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.consonants_panel .c17_record_highlight, .consonants_selection_panel .c17_record_highlight {
  color: white;
  background-color: #0089e8;
  cursor: default !important;
}
.consonants_panel .vcButton.c18, .consonants_selection_panel .vcButton.c18 {
  grid-row: 4/5;
  grid-column: 6/8;
}
.consonants_panel .vcButton.c18:before, .consonants_selection_panel .vcButton.c18:before {
  content: "j";
}
.consonants_panel .vcButton.c18_select, .consonants_selection_panel .vcButton.c18_select {
  color: white;
  background-color: #0089e8;
}
.consonants_panel .c18btn, .consonants_panel .c18dis, .consonants_panel .c18fade, .consonants_panel .c18high, .consonants_panel .c18_record_highlight, .consonants_selection_panel .c18btn, .consonants_selection_panel .c18dis, .consonants_selection_panel .c18fade, .consonants_selection_panel .c18high, .consonants_selection_panel .c18_record_highlight {
  width: 60px;
  height: 60px;
  background-color: white;
  transition: background-color 0.2s;
  line-height: 50px !important;
  text-align: center;
  border-radius: 5px;
  color: #0089e8;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 3em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  padding: 0 0 13px 0;
  margin: 0 auto 0 !important;
  grid-row: 4/5;
  grid-column: 6/8;
}
@media (hover: hover) {
  .consonants_panel .c18btn:hover, .consonants_panel .c18dis:hover, .consonants_panel .c18fade:hover, .consonants_panel .c18high:hover, .consonants_panel .c18_record_highlight:hover, .consonants_selection_panel .c18btn:hover, .consonants_selection_panel .c18dis:hover, .consonants_selection_panel .c18fade:hover, .consonants_selection_panel .c18high:hover, .consonants_selection_panel .c18_record_highlight:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
@media (hover: none) {
  .consonants_panel .c18btn, .consonants_panel .c18dis, .consonants_panel .c18fade, .consonants_panel .c18high, .consonants_panel .c18_record_highlight, .consonants_selection_panel .c18btn, .consonants_selection_panel .c18dis, .consonants_selection_panel .c18fade, .consonants_selection_panel .c18high, .consonants_selection_panel .c18_record_highlight {
    padding: 0 0 7px 0;
  }
}
.consonants_panel .c18btn:before, .consonants_panel .c18dis:before, .consonants_panel .c18fade:before, .consonants_panel .c18high:before, .consonants_panel .c18_record_highlight:before, .consonants_selection_panel .c18btn:before, .consonants_selection_panel .c18dis:before, .consonants_selection_panel .c18fade:before, .consonants_selection_panel .c18high:before, .consonants_selection_panel .c18_record_highlight:before {
  content: "j";
}
.consonants_panel .c18dis, .consonants_selection_panel .c18dis {
  color: #fafafa;
  background-color: #fafafa;
}
@media (hover: hover) {
  .consonants_panel .c18dis:hover, .consonants_selection_panel .c18dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
.consonants_panel .c18fade, .consonants_selection_panel .c18fade {
  color: #6ec0f9;
  background-color: white;
}
@media (hover: hover) {
  .consonants_panel .c18fade:hover, .consonants_selection_panel .c18fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
.consonants_panel .c18high, .consonants_selection_panel .c18high {
  color: white;
  background-color: green;
}
@media (hover: hover) {
  .consonants_panel .c18high:hover, .consonants_selection_panel .c18high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.consonants_panel .c18_record_highlight, .consonants_selection_panel .c18_record_highlight {
  color: white;
  background-color: #0089e8;
  cursor: default !important;
}
.consonants_panel .vcButton.c19, .consonants_selection_panel .vcButton.c19 {
  grid-row: 4/5;
  grid-column: 4/6;
}
.consonants_panel .vcButton.c19:before, .consonants_selection_panel .vcButton.c19:before {
  content: "w";
}
.consonants_panel .vcButton.c19_select, .consonants_selection_panel .vcButton.c19_select {
  color: white;
  background-color: #0089e8;
}
.consonants_panel .c19btn, .consonants_panel .c19dis, .consonants_panel .c19fade, .consonants_panel .c19high, .consonants_panel .c19_record_highlight, .consonants_selection_panel .c19btn, .consonants_selection_panel .c19dis, .consonants_selection_panel .c19fade, .consonants_selection_panel .c19high, .consonants_selection_panel .c19_record_highlight {
  width: 60px;
  height: 60px;
  background-color: white;
  transition: background-color 0.2s;
  line-height: 50px !important;
  text-align: center;
  border-radius: 5px;
  color: #0089e8;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 3em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  padding: 0 0 13px 0;
  margin: 0 auto 0 !important;
  grid-row: 4/5;
  grid-column: 4/6;
}
@media (hover: hover) {
  .consonants_panel .c19btn:hover, .consonants_panel .c19dis:hover, .consonants_panel .c19fade:hover, .consonants_panel .c19high:hover, .consonants_panel .c19_record_highlight:hover, .consonants_selection_panel .c19btn:hover, .consonants_selection_panel .c19dis:hover, .consonants_selection_panel .c19fade:hover, .consonants_selection_panel .c19high:hover, .consonants_selection_panel .c19_record_highlight:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
@media (hover: none) {
  .consonants_panel .c19btn, .consonants_panel .c19dis, .consonants_panel .c19fade, .consonants_panel .c19high, .consonants_panel .c19_record_highlight, .consonants_selection_panel .c19btn, .consonants_selection_panel .c19dis, .consonants_selection_panel .c19fade, .consonants_selection_panel .c19high, .consonants_selection_panel .c19_record_highlight {
    padding: 0 0 7px 0;
  }
}
.consonants_panel .c19btn:before, .consonants_panel .c19dis:before, .consonants_panel .c19fade:before, .consonants_panel .c19high:before, .consonants_panel .c19_record_highlight:before, .consonants_selection_panel .c19btn:before, .consonants_selection_panel .c19dis:before, .consonants_selection_panel .c19fade:before, .consonants_selection_panel .c19high:before, .consonants_selection_panel .c19_record_highlight:before {
  content: "w";
}
.consonants_panel .c19dis, .consonants_selection_panel .c19dis {
  color: #fafafa;
  background-color: #fafafa;
}
@media (hover: hover) {
  .consonants_panel .c19dis:hover, .consonants_selection_panel .c19dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
.consonants_panel .c19fade, .consonants_selection_panel .c19fade {
  color: #6ec0f9;
  background-color: white;
}
@media (hover: hover) {
  .consonants_panel .c19fade:hover, .consonants_selection_panel .c19fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
.consonants_panel .c19high, .consonants_selection_panel .c19high {
  color: white;
  background-color: green;
}
@media (hover: hover) {
  .consonants_panel .c19high:hover, .consonants_selection_panel .c19high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.consonants_panel .c19_record_highlight, .consonants_selection_panel .c19_record_highlight {
  color: white;
  background-color: #0089e8;
  cursor: default !important;
}
.consonants_panel .vcButton.c20, .consonants_selection_panel .vcButton.c20 {
  grid-row: 3/4;
  grid-column: 3/5;
}
.consonants_panel .vcButton.c20:before, .consonants_selection_panel .vcButton.c20:before {
  content: "n";
}
.consonants_panel .vcButton.c20_select, .consonants_selection_panel .vcButton.c20_select {
  color: white;
  background-color: #0089e8;
}
.consonants_panel .c20btn, .consonants_panel .c20dis, .consonants_panel .c20fade, .consonants_panel .c20high, .consonants_panel .c20_record_highlight, .consonants_selection_panel .c20btn, .consonants_selection_panel .c20dis, .consonants_selection_panel .c20fade, .consonants_selection_panel .c20high, .consonants_selection_panel .c20_record_highlight {
  width: 60px;
  height: 60px;
  background-color: white;
  transition: background-color 0.2s;
  line-height: 50px !important;
  text-align: center;
  border-radius: 5px;
  color: #0089e8;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 3em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  padding: 0 0 13px 0;
  margin: 0 auto 0 !important;
  grid-row: 3/4;
  grid-column: 3/5;
}
@media (hover: hover) {
  .consonants_panel .c20btn:hover, .consonants_panel .c20dis:hover, .consonants_panel .c20fade:hover, .consonants_panel .c20high:hover, .consonants_panel .c20_record_highlight:hover, .consonants_selection_panel .c20btn:hover, .consonants_selection_panel .c20dis:hover, .consonants_selection_panel .c20fade:hover, .consonants_selection_panel .c20high:hover, .consonants_selection_panel .c20_record_highlight:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
@media (hover: none) {
  .consonants_panel .c20btn, .consonants_panel .c20dis, .consonants_panel .c20fade, .consonants_panel .c20high, .consonants_panel .c20_record_highlight, .consonants_selection_panel .c20btn, .consonants_selection_panel .c20dis, .consonants_selection_panel .c20fade, .consonants_selection_panel .c20high, .consonants_selection_panel .c20_record_highlight {
    padding: 0 0 7px 0;
  }
}
.consonants_panel .c20btn:before, .consonants_panel .c20dis:before, .consonants_panel .c20fade:before, .consonants_panel .c20high:before, .consonants_panel .c20_record_highlight:before, .consonants_selection_panel .c20btn:before, .consonants_selection_panel .c20dis:before, .consonants_selection_panel .c20fade:before, .consonants_selection_panel .c20high:before, .consonants_selection_panel .c20_record_highlight:before {
  content: "n";
}
.consonants_panel .c20dis, .consonants_selection_panel .c20dis {
  color: #fafafa;
  background-color: #fafafa;
}
@media (hover: hover) {
  .consonants_panel .c20dis:hover, .consonants_selection_panel .c20dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
.consonants_panel .c20fade, .consonants_selection_panel .c20fade {
  color: #6ec0f9;
  background-color: white;
}
@media (hover: hover) {
  .consonants_panel .c20fade:hover, .consonants_selection_panel .c20fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
.consonants_panel .c20high, .consonants_selection_panel .c20high {
  color: white;
  background-color: green;
}
@media (hover: hover) {
  .consonants_panel .c20high:hover, .consonants_selection_panel .c20high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.consonants_panel .c20_record_highlight, .consonants_selection_panel .c20_record_highlight {
  color: white;
  background-color: #0089e8;
  cursor: default !important;
}
.consonants_panel .vcButton.c21, .consonants_selection_panel .vcButton.c21 {
  grid-row: 3/4;
  grid-column: 1/3;
}
.consonants_panel .vcButton.c21:before, .consonants_selection_panel .vcButton.c21:before {
  content: "m";
}
.consonants_panel .vcButton.c21_select, .consonants_selection_panel .vcButton.c21_select {
  color: white;
  background-color: #0089e8;
}
.consonants_panel .c21btn, .consonants_panel .c21dis, .consonants_panel .c21fade, .consonants_panel .c21high, .consonants_panel .c21_record_highlight, .consonants_selection_panel .c21btn, .consonants_selection_panel .c21dis, .consonants_selection_panel .c21fade, .consonants_selection_panel .c21high, .consonants_selection_panel .c21_record_highlight {
  width: 60px;
  height: 60px;
  background-color: white;
  transition: background-color 0.2s;
  line-height: 50px !important;
  text-align: center;
  border-radius: 5px;
  color: #0089e8;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 3em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  padding: 0 0 13px 0;
  margin: 0 auto 0 !important;
  grid-row: 3/4;
  grid-column: 1/3;
}
@media (hover: hover) {
  .consonants_panel .c21btn:hover, .consonants_panel .c21dis:hover, .consonants_panel .c21fade:hover, .consonants_panel .c21high:hover, .consonants_panel .c21_record_highlight:hover, .consonants_selection_panel .c21btn:hover, .consonants_selection_panel .c21dis:hover, .consonants_selection_panel .c21fade:hover, .consonants_selection_panel .c21high:hover, .consonants_selection_panel .c21_record_highlight:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
@media (hover: none) {
  .consonants_panel .c21btn, .consonants_panel .c21dis, .consonants_panel .c21fade, .consonants_panel .c21high, .consonants_panel .c21_record_highlight, .consonants_selection_panel .c21btn, .consonants_selection_panel .c21dis, .consonants_selection_panel .c21fade, .consonants_selection_panel .c21high, .consonants_selection_panel .c21_record_highlight {
    padding: 0 0 7px 0;
  }
}
.consonants_panel .c21btn:before, .consonants_panel .c21dis:before, .consonants_panel .c21fade:before, .consonants_panel .c21high:before, .consonants_panel .c21_record_highlight:before, .consonants_selection_panel .c21btn:before, .consonants_selection_panel .c21dis:before, .consonants_selection_panel .c21fade:before, .consonants_selection_panel .c21high:before, .consonants_selection_panel .c21_record_highlight:before {
  content: "m";
}
.consonants_panel .c21dis, .consonants_selection_panel .c21dis {
  color: #fafafa;
  background-color: #fafafa;
}
@media (hover: hover) {
  .consonants_panel .c21dis:hover, .consonants_selection_panel .c21dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
.consonants_panel .c21fade, .consonants_selection_panel .c21fade {
  color: #6ec0f9;
  background-color: white;
}
@media (hover: hover) {
  .consonants_panel .c21fade:hover, .consonants_selection_panel .c21fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
.consonants_panel .c21high, .consonants_selection_panel .c21high {
  color: white;
  background-color: green;
}
@media (hover: hover) {
  .consonants_panel .c21high:hover, .consonants_selection_panel .c21high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.consonants_panel .c21_record_highlight, .consonants_selection_panel .c21_record_highlight {
  color: white;
  background-color: #0089e8;
  cursor: default !important;
}
.consonants_panel .vcButton.c22, .consonants_selection_panel .vcButton.c22 {
  grid-row: 3/4;
  grid-column: 5/7;
}
.consonants_panel .vcButton.c22:before, .consonants_selection_panel .vcButton.c22:before {
  content: "ŋ";
}
.consonants_panel .vcButton.c22_select, .consonants_selection_panel .vcButton.c22_select {
  color: white;
  background-color: #0089e8;
}
.consonants_panel .c22btn, .consonants_panel .c22dis, .consonants_panel .c22fade, .consonants_panel .c22high, .consonants_panel .c22_record_highlight, .consonants_selection_panel .c22btn, .consonants_selection_panel .c22dis, .consonants_selection_panel .c22fade, .consonants_selection_panel .c22high, .consonants_selection_panel .c22_record_highlight {
  width: 60px;
  height: 60px;
  background-color: white;
  transition: background-color 0.2s;
  line-height: 50px !important;
  text-align: center;
  border-radius: 5px;
  color: #0089e8;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 3em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  padding: 0 0 13px 0;
  margin: 0 auto 0 !important;
  grid-row: 3/4;
  grid-column: 5/7;
}
@media (hover: hover) {
  .consonants_panel .c22btn:hover, .consonants_panel .c22dis:hover, .consonants_panel .c22fade:hover, .consonants_panel .c22high:hover, .consonants_panel .c22_record_highlight:hover, .consonants_selection_panel .c22btn:hover, .consonants_selection_panel .c22dis:hover, .consonants_selection_panel .c22fade:hover, .consonants_selection_panel .c22high:hover, .consonants_selection_panel .c22_record_highlight:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
@media (hover: none) {
  .consonants_panel .c22btn, .consonants_panel .c22dis, .consonants_panel .c22fade, .consonants_panel .c22high, .consonants_panel .c22_record_highlight, .consonants_selection_panel .c22btn, .consonants_selection_panel .c22dis, .consonants_selection_panel .c22fade, .consonants_selection_panel .c22high, .consonants_selection_panel .c22_record_highlight {
    padding: 0 0 7px 0;
  }
}
.consonants_panel .c22btn:before, .consonants_panel .c22dis:before, .consonants_panel .c22fade:before, .consonants_panel .c22high:before, .consonants_panel .c22_record_highlight:before, .consonants_selection_panel .c22btn:before, .consonants_selection_panel .c22dis:before, .consonants_selection_panel .c22fade:before, .consonants_selection_panel .c22high:before, .consonants_selection_panel .c22_record_highlight:before {
  content: "ŋ";
}
.consonants_panel .c22dis, .consonants_selection_panel .c22dis {
  color: #fafafa;
  background-color: #fafafa;
}
@media (hover: hover) {
  .consonants_panel .c22dis:hover, .consonants_selection_panel .c22dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
.consonants_panel .c22fade, .consonants_selection_panel .c22fade {
  color: #6ec0f9;
  background-color: white;
}
@media (hover: hover) {
  .consonants_panel .c22fade:hover, .consonants_selection_panel .c22fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
.consonants_panel .c22high, .consonants_selection_panel .c22high {
  color: white;
  background-color: green;
}
@media (hover: hover) {
  .consonants_panel .c22high:hover, .consonants_selection_panel .c22high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.consonants_panel .c22_record_highlight, .consonants_selection_panel .c22_record_highlight {
  color: white;
  background-color: #0089e8;
  cursor: default !important;
}
.consonants_panel .vcButton.c23, .consonants_selection_panel .vcButton.c23 {
  grid-row: 3/4;
  grid-column: 13/15;
}
.consonants_panel .vcButton.c23:before, .consonants_selection_panel .vcButton.c23:before {
  content: "ʤ";
}
.consonants_panel .vcButton.c23_select, .consonants_selection_panel .vcButton.c23_select {
  color: white;
  background-color: #0089e8;
}
.consonants_panel .c23btn, .consonants_panel .c23dis, .consonants_panel .c23fade, .consonants_panel .c23high, .consonants_panel .c23_record_highlight, .consonants_selection_panel .c23btn, .consonants_selection_panel .c23dis, .consonants_selection_panel .c23fade, .consonants_selection_panel .c23high, .consonants_selection_panel .c23_record_highlight {
  width: 60px;
  height: 60px;
  background-color: white;
  transition: background-color 0.2s;
  line-height: 50px !important;
  text-align: center;
  border-radius: 5px;
  color: #0089e8;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 3em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  padding: 0 0 13px 0;
  margin: 0 auto 0 !important;
  grid-row: 3/4;
  grid-column: 13/15;
}
@media (hover: hover) {
  .consonants_panel .c23btn:hover, .consonants_panel .c23dis:hover, .consonants_panel .c23fade:hover, .consonants_panel .c23high:hover, .consonants_panel .c23_record_highlight:hover, .consonants_selection_panel .c23btn:hover, .consonants_selection_panel .c23dis:hover, .consonants_selection_panel .c23fade:hover, .consonants_selection_panel .c23high:hover, .consonants_selection_panel .c23_record_highlight:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
@media (hover: none) {
  .consonants_panel .c23btn, .consonants_panel .c23dis, .consonants_panel .c23fade, .consonants_panel .c23high, .consonants_panel .c23_record_highlight, .consonants_selection_panel .c23btn, .consonants_selection_panel .c23dis, .consonants_selection_panel .c23fade, .consonants_selection_panel .c23high, .consonants_selection_panel .c23_record_highlight {
    padding: 0 0 7px 0;
  }
}
.consonants_panel .c23btn:before, .consonants_panel .c23dis:before, .consonants_panel .c23fade:before, .consonants_panel .c23high:before, .consonants_panel .c23_record_highlight:before, .consonants_selection_panel .c23btn:before, .consonants_selection_panel .c23dis:before, .consonants_selection_panel .c23fade:before, .consonants_selection_panel .c23high:before, .consonants_selection_panel .c23_record_highlight:before {
  content: "ʤ";
}
.consonants_panel .c23dis, .consonants_selection_panel .c23dis {
  color: #fafafa;
  background-color: #fafafa;
}
@media (hover: hover) {
  .consonants_panel .c23dis:hover, .consonants_selection_panel .c23dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
.consonants_panel .c23fade, .consonants_selection_panel .c23fade {
  color: #6ec0f9;
  background-color: white;
}
@media (hover: hover) {
  .consonants_panel .c23fade:hover, .consonants_selection_panel .c23fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
.consonants_panel .c23high, .consonants_selection_panel .c23high {
  color: white;
  background-color: green;
}
@media (hover: hover) {
  .consonants_panel .c23high:hover, .consonants_selection_panel .c23high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.consonants_panel .c23_record_highlight, .consonants_selection_panel .c23_record_highlight {
  color: white;
  background-color: #0089e8;
  cursor: default !important;
}
.consonants_panel .vcButton.c24, .consonants_selection_panel .vcButton.c24 {
  grid-row: 3/4;
  grid-column: 11/13;
}
.consonants_panel .vcButton.c24:before, .consonants_selection_panel .vcButton.c24:before {
  content: "ʧ";
}
.consonants_panel .vcButton.c24_select, .consonants_selection_panel .vcButton.c24_select {
  color: white;
  background-color: #0089e8;
}
.consonants_panel .c24btn, .consonants_panel .c24dis, .consonants_panel .c24fade, .consonants_panel .c24high, .consonants_panel .c24_record_highlight, .consonants_selection_panel .c24btn, .consonants_selection_panel .c24dis, .consonants_selection_panel .c24fade, .consonants_selection_panel .c24high, .consonants_selection_panel .c24_record_highlight {
  width: 60px;
  height: 60px;
  background-color: white;
  transition: background-color 0.2s;
  line-height: 50px !important;
  text-align: center;
  border-radius: 5px;
  color: #0089e8;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 3em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  padding: 0 0 13px 0;
  margin: 0 auto 0 !important;
  grid-row: 3/4;
  grid-column: 11/13;
}
@media (hover: hover) {
  .consonants_panel .c24btn:hover, .consonants_panel .c24dis:hover, .consonants_panel .c24fade:hover, .consonants_panel .c24high:hover, .consonants_panel .c24_record_highlight:hover, .consonants_selection_panel .c24btn:hover, .consonants_selection_panel .c24dis:hover, .consonants_selection_panel .c24fade:hover, .consonants_selection_panel .c24high:hover, .consonants_selection_panel .c24_record_highlight:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
@media (hover: none) {
  .consonants_panel .c24btn, .consonants_panel .c24dis, .consonants_panel .c24fade, .consonants_panel .c24high, .consonants_panel .c24_record_highlight, .consonants_selection_panel .c24btn, .consonants_selection_panel .c24dis, .consonants_selection_panel .c24fade, .consonants_selection_panel .c24high, .consonants_selection_panel .c24_record_highlight {
    padding: 0 0 7px 0;
  }
}
.consonants_panel .c24btn:before, .consonants_panel .c24dis:before, .consonants_panel .c24fade:before, .consonants_panel .c24high:before, .consonants_panel .c24_record_highlight:before, .consonants_selection_panel .c24btn:before, .consonants_selection_panel .c24dis:before, .consonants_selection_panel .c24fade:before, .consonants_selection_panel .c24high:before, .consonants_selection_panel .c24_record_highlight:before {
  content: "ʧ";
}
.consonants_panel .c24dis, .consonants_selection_panel .c24dis {
  color: #fafafa;
  background-color: #fafafa;
}
@media (hover: hover) {
  .consonants_panel .c24dis:hover, .consonants_selection_panel .c24dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
.consonants_panel .c24fade, .consonants_selection_panel .c24fade {
  color: #6ec0f9;
  background-color: white;
}
@media (hover: hover) {
  .consonants_panel .c24fade:hover, .consonants_selection_panel .c24fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
.consonants_panel .c24high, .consonants_selection_panel .c24high {
  color: white;
  background-color: green;
}
@media (hover: hover) {
  .consonants_panel .c24high:hover, .consonants_selection_panel .c24high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.consonants_panel .c24_record_highlight, .consonants_selection_panel .c24_record_highlight {
  color: white;
  background-color: #0089e8;
  cursor: default !important;
}
.consonants_panel.game, .consonants_selection_panel.game {
  padding: 20px;
  border-radius: 5px;
  max-width: 606px;
  min-height: 292px;
  background-color: #f6f6f6;
  margin: 0 auto;
  align-self: center;
  align-content: center;
  height: 100%;
}
.consonants_panel.game .spacer, .consonants_selection_panel.game .spacer {
  opacity: 65%;
  border-radius: 5px;
}

@media screen and (max-width: 579px) {
  .consonants_panel, .consonants_selection_panel {
    grid-row-gap: 4px;
    grid-column-gap: 2px;
  }
  .consonants_panel.game, .consonants_selection_panel.game {
    min-height: 271px;
    grid-column-gap: 4px;
  }
  .consonants_panel.game .c1btn, .consonants_panel.game .c1dis, .consonants_panel.game .c1fade, .consonants_panel.game .c1high, .consonants_panel.game .c1_record_highlight, .consonants_selection_panel.game .c1btn, .consonants_selection_panel.game .c1dis, .consonants_selection_panel.game .c1fade, .consonants_selection_panel.game .c1high, .consonants_selection_panel.game .c1_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel.game .c2btn, .consonants_panel.game .c2dis, .consonants_panel.game .c2fade, .consonants_panel.game .c2high, .consonants_panel.game .c2_record_highlight, .consonants_selection_panel.game .c2btn, .consonants_selection_panel.game .c2dis, .consonants_selection_panel.game .c2fade, .consonants_selection_panel.game .c2high, .consonants_selection_panel.game .c2_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel.game .c3btn, .consonants_panel.game .c3dis, .consonants_panel.game .c3fade, .consonants_panel.game .c3high, .consonants_panel.game .c3_record_highlight, .consonants_selection_panel.game .c3btn, .consonants_selection_panel.game .c3dis, .consonants_selection_panel.game .c3fade, .consonants_selection_panel.game .c3high, .consonants_selection_panel.game .c3_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel.game .c4btn, .consonants_panel.game .c4dis, .consonants_panel.game .c4fade, .consonants_panel.game .c4high, .consonants_panel.game .c4_record_highlight, .consonants_selection_panel.game .c4btn, .consonants_selection_panel.game .c4dis, .consonants_selection_panel.game .c4fade, .consonants_selection_panel.game .c4high, .consonants_selection_panel.game .c4_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel.game .c5btn, .consonants_panel.game .c5dis, .consonants_panel.game .c5fade, .consonants_panel.game .c5high, .consonants_panel.game .c5_record_highlight, .consonants_selection_panel.game .c5btn, .consonants_selection_panel.game .c5dis, .consonants_selection_panel.game .c5fade, .consonants_selection_panel.game .c5high, .consonants_selection_panel.game .c5_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel.game .c6btn, .consonants_panel.game .c6dis, .consonants_panel.game .c6fade, .consonants_panel.game .c6high, .consonants_panel.game .c6_record_highlight, .consonants_selection_panel.game .c6btn, .consonants_selection_panel.game .c6dis, .consonants_selection_panel.game .c6fade, .consonants_selection_panel.game .c6high, .consonants_selection_panel.game .c6_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel.game .c7btn, .consonants_panel.game .c7dis, .consonants_panel.game .c7fade, .consonants_panel.game .c7high, .consonants_panel.game .c7_record_highlight, .consonants_selection_panel.game .c7btn, .consonants_selection_panel.game .c7dis, .consonants_selection_panel.game .c7fade, .consonants_selection_panel.game .c7high, .consonants_selection_panel.game .c7_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel.game .c8btn, .consonants_panel.game .c8dis, .consonants_panel.game .c8fade, .consonants_panel.game .c8high, .consonants_panel.game .c8_record_highlight, .consonants_selection_panel.game .c8btn, .consonants_selection_panel.game .c8dis, .consonants_selection_panel.game .c8fade, .consonants_selection_panel.game .c8high, .consonants_selection_panel.game .c8_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel.game .c9btn, .consonants_panel.game .c9dis, .consonants_panel.game .c9fade, .consonants_panel.game .c9high, .consonants_panel.game .c9_record_highlight, .consonants_selection_panel.game .c9btn, .consonants_selection_panel.game .c9dis, .consonants_selection_panel.game .c9fade, .consonants_selection_panel.game .c9high, .consonants_selection_panel.game .c9_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel.game .c10btn, .consonants_panel.game .c10dis, .consonants_panel.game .c10fade, .consonants_panel.game .c10high, .consonants_panel.game .c10_record_highlight, .consonants_selection_panel.game .c10btn, .consonants_selection_panel.game .c10dis, .consonants_selection_panel.game .c10fade, .consonants_selection_panel.game .c10high, .consonants_selection_panel.game .c10_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel.game .c11btn, .consonants_panel.game .c11dis, .consonants_panel.game .c11fade, .consonants_panel.game .c11high, .consonants_panel.game .c11_record_highlight, .consonants_selection_panel.game .c11btn, .consonants_selection_panel.game .c11dis, .consonants_selection_panel.game .c11fade, .consonants_selection_panel.game .c11high, .consonants_selection_panel.game .c11_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel.game .c12btn, .consonants_panel.game .c12dis, .consonants_panel.game .c12fade, .consonants_panel.game .c12high, .consonants_panel.game .c12_record_highlight, .consonants_selection_panel.game .c12btn, .consonants_selection_panel.game .c12dis, .consonants_selection_panel.game .c12fade, .consonants_selection_panel.game .c12high, .consonants_selection_panel.game .c12_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel.game .c13btn, .consonants_panel.game .c13dis, .consonants_panel.game .c13fade, .consonants_panel.game .c13high, .consonants_panel.game .c13_record_highlight, .consonants_selection_panel.game .c13btn, .consonants_selection_panel.game .c13dis, .consonants_selection_panel.game .c13fade, .consonants_selection_panel.game .c13high, .consonants_selection_panel.game .c13_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel.game .c14btn, .consonants_panel.game .c14dis, .consonants_panel.game .c14fade, .consonants_panel.game .c14high, .consonants_panel.game .c14_record_highlight, .consonants_selection_panel.game .c14btn, .consonants_selection_panel.game .c14dis, .consonants_selection_panel.game .c14fade, .consonants_selection_panel.game .c14high, .consonants_selection_panel.game .c14_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel.game .c15btn, .consonants_panel.game .c15dis, .consonants_panel.game .c15fade, .consonants_panel.game .c15high, .consonants_panel.game .c15_record_highlight, .consonants_selection_panel.game .c15btn, .consonants_selection_panel.game .c15dis, .consonants_selection_panel.game .c15fade, .consonants_selection_panel.game .c15high, .consonants_selection_panel.game .c15_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel.game .c16btn, .consonants_panel.game .c16dis, .consonants_panel.game .c16fade, .consonants_panel.game .c16high, .consonants_panel.game .c16_record_highlight, .consonants_selection_panel.game .c16btn, .consonants_selection_panel.game .c16dis, .consonants_selection_panel.game .c16fade, .consonants_selection_panel.game .c16high, .consonants_selection_panel.game .c16_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel.game .c17btn, .consonants_panel.game .c17dis, .consonants_panel.game .c17fade, .consonants_panel.game .c17high, .consonants_panel.game .c17_record_highlight, .consonants_selection_panel.game .c17btn, .consonants_selection_panel.game .c17dis, .consonants_selection_panel.game .c17fade, .consonants_selection_panel.game .c17high, .consonants_selection_panel.game .c17_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel.game .c18btn, .consonants_panel.game .c18dis, .consonants_panel.game .c18fade, .consonants_panel.game .c18high, .consonants_panel.game .c18_record_highlight, .consonants_selection_panel.game .c18btn, .consonants_selection_panel.game .c18dis, .consonants_selection_panel.game .c18fade, .consonants_selection_panel.game .c18high, .consonants_selection_panel.game .c18_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel.game .c19btn, .consonants_panel.game .c19dis, .consonants_panel.game .c19fade, .consonants_panel.game .c19high, .consonants_panel.game .c19_record_highlight, .consonants_selection_panel.game .c19btn, .consonants_selection_panel.game .c19dis, .consonants_selection_panel.game .c19fade, .consonants_selection_panel.game .c19high, .consonants_selection_panel.game .c19_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel.game .c20btn, .consonants_panel.game .c20dis, .consonants_panel.game .c20fade, .consonants_panel.game .c20high, .consonants_panel.game .c20_record_highlight, .consonants_selection_panel.game .c20btn, .consonants_selection_panel.game .c20dis, .consonants_selection_panel.game .c20fade, .consonants_selection_panel.game .c20high, .consonants_selection_panel.game .c20_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel.game .c21btn, .consonants_panel.game .c21dis, .consonants_panel.game .c21fade, .consonants_panel.game .c21high, .consonants_panel.game .c21_record_highlight, .consonants_selection_panel.game .c21btn, .consonants_selection_panel.game .c21dis, .consonants_selection_panel.game .c21fade, .consonants_selection_panel.game .c21high, .consonants_selection_panel.game .c21_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel.game .c22btn, .consonants_panel.game .c22dis, .consonants_panel.game .c22fade, .consonants_panel.game .c22high, .consonants_panel.game .c22_record_highlight, .consonants_selection_panel.game .c22btn, .consonants_selection_panel.game .c22dis, .consonants_selection_panel.game .c22fade, .consonants_selection_panel.game .c22high, .consonants_selection_panel.game .c22_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel.game .c23btn, .consonants_panel.game .c23dis, .consonants_panel.game .c23fade, .consonants_panel.game .c23high, .consonants_panel.game .c23_record_highlight, .consonants_selection_panel.game .c23btn, .consonants_selection_panel.game .c23dis, .consonants_selection_panel.game .c23fade, .consonants_selection_panel.game .c23high, .consonants_selection_panel.game .c23_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel.game .c24btn, .consonants_panel.game .c24dis, .consonants_panel.game .c24fade, .consonants_panel.game .c24high, .consonants_panel.game .c24_record_highlight, .consonants_selection_panel.game .c24btn, .consonants_selection_panel.game .c24dis, .consonants_selection_panel.game .c24fade, .consonants_selection_panel.game .c24high, .consonants_selection_panel.game .c24_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c1btn, .consonants_panel .c1dis, .consonants_panel .c1fade, .consonants_panel .c1high, .consonants_panel .c1_record_highlight, .consonants_selection_panel .c1btn, .consonants_selection_panel .c1dis, .consonants_selection_panel .c1fade, .consonants_selection_panel .c1high, .consonants_selection_panel .c1_record_highlight {
    width: 60px;
    height: 60px;
    font-size: clamp(3rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c1dis, .consonants_selection_panel .c1dis {
    color: #fafafa;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c1dis:hover, .consonants_selection_panel .c1dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c1fade, .consonants_selection_panel .c1fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c1fade:hover, .consonants_selection_panel .c1fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c1high, .consonants_selection_panel .c1high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c1high:hover, .consonants_selection_panel .c1high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c1_record_highlight, .consonants_selection_panel .c1_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c2btn, .consonants_panel .c2dis, .consonants_panel .c2fade, .consonants_panel .c2high, .consonants_panel .c2_record_highlight, .consonants_selection_panel .c2btn, .consonants_selection_panel .c2dis, .consonants_selection_panel .c2fade, .consonants_selection_panel .c2high, .consonants_selection_panel .c2_record_highlight {
    width: 60px;
    height: 60px;
    font-size: clamp(3rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c2dis, .consonants_selection_panel .c2dis {
    color: #fafafa;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c2dis:hover, .consonants_selection_panel .c2dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c2fade, .consonants_selection_panel .c2fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c2fade:hover, .consonants_selection_panel .c2fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c2high, .consonants_selection_panel .c2high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c2high:hover, .consonants_selection_panel .c2high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c2_record_highlight, .consonants_selection_panel .c2_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c3btn, .consonants_panel .c3dis, .consonants_panel .c3fade, .consonants_panel .c3high, .consonants_panel .c3_record_highlight, .consonants_selection_panel .c3btn, .consonants_selection_panel .c3dis, .consonants_selection_panel .c3fade, .consonants_selection_panel .c3high, .consonants_selection_panel .c3_record_highlight {
    width: 60px;
    height: 60px;
    font-size: clamp(3rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c3dis, .consonants_selection_panel .c3dis {
    color: #fafafa;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c3dis:hover, .consonants_selection_panel .c3dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c3fade, .consonants_selection_panel .c3fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c3fade:hover, .consonants_selection_panel .c3fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c3high, .consonants_selection_panel .c3high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c3high:hover, .consonants_selection_panel .c3high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c3_record_highlight, .consonants_selection_panel .c3_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c4btn, .consonants_panel .c4dis, .consonants_panel .c4fade, .consonants_panel .c4high, .consonants_panel .c4_record_highlight, .consonants_selection_panel .c4btn, .consonants_selection_panel .c4dis, .consonants_selection_panel .c4fade, .consonants_selection_panel .c4high, .consonants_selection_panel .c4_record_highlight {
    width: 60px;
    height: 60px;
    font-size: clamp(3rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c4dis, .consonants_selection_panel .c4dis {
    color: #fafafa;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c4dis:hover, .consonants_selection_panel .c4dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c4fade, .consonants_selection_panel .c4fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c4fade:hover, .consonants_selection_panel .c4fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c4high, .consonants_selection_panel .c4high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c4high:hover, .consonants_selection_panel .c4high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c4_record_highlight, .consonants_selection_panel .c4_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c5btn, .consonants_panel .c5dis, .consonants_panel .c5fade, .consonants_panel .c5high, .consonants_panel .c5_record_highlight, .consonants_selection_panel .c5btn, .consonants_selection_panel .c5dis, .consonants_selection_panel .c5fade, .consonants_selection_panel .c5high, .consonants_selection_panel .c5_record_highlight {
    width: 60px;
    height: 60px;
    font-size: clamp(3rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c5dis, .consonants_selection_panel .c5dis {
    color: #fafafa;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c5dis:hover, .consonants_selection_panel .c5dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c5fade, .consonants_selection_panel .c5fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c5fade:hover, .consonants_selection_panel .c5fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c5high, .consonants_selection_panel .c5high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c5high:hover, .consonants_selection_panel .c5high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c5_record_highlight, .consonants_selection_panel .c5_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c6btn, .consonants_panel .c6dis, .consonants_panel .c6fade, .consonants_panel .c6high, .consonants_panel .c6_record_highlight, .consonants_selection_panel .c6btn, .consonants_selection_panel .c6dis, .consonants_selection_panel .c6fade, .consonants_selection_panel .c6high, .consonants_selection_panel .c6_record_highlight {
    width: 60px;
    height: 60px;
    font-size: clamp(3rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c6dis, .consonants_selection_panel .c6dis {
    color: #fafafa;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c6dis:hover, .consonants_selection_panel .c6dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c6fade, .consonants_selection_panel .c6fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c6fade:hover, .consonants_selection_panel .c6fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c6high, .consonants_selection_panel .c6high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c6high:hover, .consonants_selection_panel .c6high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c6_record_highlight, .consonants_selection_panel .c6_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c7btn, .consonants_panel .c7dis, .consonants_panel .c7fade, .consonants_panel .c7high, .consonants_panel .c7_record_highlight, .consonants_selection_panel .c7btn, .consonants_selection_panel .c7dis, .consonants_selection_panel .c7fade, .consonants_selection_panel .c7high, .consonants_selection_panel .c7_record_highlight {
    width: 60px;
    height: 60px;
    font-size: clamp(3rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c7dis, .consonants_selection_panel .c7dis {
    color: #fafafa;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c7dis:hover, .consonants_selection_panel .c7dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c7fade, .consonants_selection_panel .c7fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c7fade:hover, .consonants_selection_panel .c7fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c7high, .consonants_selection_panel .c7high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c7high:hover, .consonants_selection_panel .c7high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c7_record_highlight, .consonants_selection_panel .c7_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c8btn, .consonants_panel .c8dis, .consonants_panel .c8fade, .consonants_panel .c8high, .consonants_panel .c8_record_highlight, .consonants_selection_panel .c8btn, .consonants_selection_panel .c8dis, .consonants_selection_panel .c8fade, .consonants_selection_panel .c8high, .consonants_selection_panel .c8_record_highlight {
    width: 60px;
    height: 60px;
    font-size: clamp(3rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c8dis, .consonants_selection_panel .c8dis {
    color: #fafafa;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c8dis:hover, .consonants_selection_panel .c8dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c8fade, .consonants_selection_panel .c8fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c8fade:hover, .consonants_selection_panel .c8fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c8high, .consonants_selection_panel .c8high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c8high:hover, .consonants_selection_panel .c8high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c8_record_highlight, .consonants_selection_panel .c8_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c9btn, .consonants_panel .c9dis, .consonants_panel .c9fade, .consonants_panel .c9high, .consonants_panel .c9_record_highlight, .consonants_selection_panel .c9btn, .consonants_selection_panel .c9dis, .consonants_selection_panel .c9fade, .consonants_selection_panel .c9high, .consonants_selection_panel .c9_record_highlight {
    width: 60px;
    height: 60px;
    font-size: clamp(3rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c9dis, .consonants_selection_panel .c9dis {
    color: #fafafa;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c9dis:hover, .consonants_selection_panel .c9dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c9fade, .consonants_selection_panel .c9fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c9fade:hover, .consonants_selection_panel .c9fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c9high, .consonants_selection_panel .c9high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c9high:hover, .consonants_selection_panel .c9high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c9_record_highlight, .consonants_selection_panel .c9_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c10btn, .consonants_panel .c10dis, .consonants_panel .c10fade, .consonants_panel .c10high, .consonants_panel .c10_record_highlight, .consonants_selection_panel .c10btn, .consonants_selection_panel .c10dis, .consonants_selection_panel .c10fade, .consonants_selection_panel .c10high, .consonants_selection_panel .c10_record_highlight {
    width: 60px;
    height: 60px;
    font-size: clamp(3rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c10dis, .consonants_selection_panel .c10dis {
    color: #fafafa;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c10dis:hover, .consonants_selection_panel .c10dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c10fade, .consonants_selection_panel .c10fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c10fade:hover, .consonants_selection_panel .c10fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c10high, .consonants_selection_panel .c10high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c10high:hover, .consonants_selection_panel .c10high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c10_record_highlight, .consonants_selection_panel .c10_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c11btn, .consonants_panel .c11dis, .consonants_panel .c11fade, .consonants_panel .c11high, .consonants_panel .c11_record_highlight, .consonants_selection_panel .c11btn, .consonants_selection_panel .c11dis, .consonants_selection_panel .c11fade, .consonants_selection_panel .c11high, .consonants_selection_panel .c11_record_highlight {
    width: 60px;
    height: 60px;
    font-size: clamp(3rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c11dis, .consonants_selection_panel .c11dis {
    color: #fafafa;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c11dis:hover, .consonants_selection_panel .c11dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c11fade, .consonants_selection_panel .c11fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c11fade:hover, .consonants_selection_panel .c11fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c11high, .consonants_selection_panel .c11high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c11high:hover, .consonants_selection_panel .c11high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c11_record_highlight, .consonants_selection_panel .c11_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c12btn, .consonants_panel .c12dis, .consonants_panel .c12fade, .consonants_panel .c12high, .consonants_panel .c12_record_highlight, .consonants_selection_panel .c12btn, .consonants_selection_panel .c12dis, .consonants_selection_panel .c12fade, .consonants_selection_panel .c12high, .consonants_selection_panel .c12_record_highlight {
    width: 60px;
    height: 60px;
    font-size: clamp(3rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c12dis, .consonants_selection_panel .c12dis {
    color: #fafafa;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c12dis:hover, .consonants_selection_panel .c12dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c12fade, .consonants_selection_panel .c12fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c12fade:hover, .consonants_selection_panel .c12fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c12high, .consonants_selection_panel .c12high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c12high:hover, .consonants_selection_panel .c12high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c12_record_highlight, .consonants_selection_panel .c12_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c13btn, .consonants_panel .c13dis, .consonants_panel .c13fade, .consonants_panel .c13high, .consonants_panel .c13_record_highlight, .consonants_selection_panel .c13btn, .consonants_selection_panel .c13dis, .consonants_selection_panel .c13fade, .consonants_selection_panel .c13high, .consonants_selection_panel .c13_record_highlight {
    width: 60px;
    height: 60px;
    font-size: clamp(3rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c13dis, .consonants_selection_panel .c13dis {
    color: #fafafa;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c13dis:hover, .consonants_selection_panel .c13dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c13fade, .consonants_selection_panel .c13fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c13fade:hover, .consonants_selection_panel .c13fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c13high, .consonants_selection_panel .c13high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c13high:hover, .consonants_selection_panel .c13high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c13_record_highlight, .consonants_selection_panel .c13_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c14btn, .consonants_panel .c14dis, .consonants_panel .c14fade, .consonants_panel .c14high, .consonants_panel .c14_record_highlight, .consonants_selection_panel .c14btn, .consonants_selection_panel .c14dis, .consonants_selection_panel .c14fade, .consonants_selection_panel .c14high, .consonants_selection_panel .c14_record_highlight {
    width: 60px;
    height: 60px;
    font-size: clamp(3rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c14dis, .consonants_selection_panel .c14dis {
    color: #fafafa;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c14dis:hover, .consonants_selection_panel .c14dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c14fade, .consonants_selection_panel .c14fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c14fade:hover, .consonants_selection_panel .c14fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c14high, .consonants_selection_panel .c14high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c14high:hover, .consonants_selection_panel .c14high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c14_record_highlight, .consonants_selection_panel .c14_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c15btn, .consonants_panel .c15dis, .consonants_panel .c15fade, .consonants_panel .c15high, .consonants_panel .c15_record_highlight, .consonants_selection_panel .c15btn, .consonants_selection_panel .c15dis, .consonants_selection_panel .c15fade, .consonants_selection_panel .c15high, .consonants_selection_panel .c15_record_highlight {
    width: 60px;
    height: 60px;
    font-size: clamp(3rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c15dis, .consonants_selection_panel .c15dis {
    color: #fafafa;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c15dis:hover, .consonants_selection_panel .c15dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c15fade, .consonants_selection_panel .c15fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c15fade:hover, .consonants_selection_panel .c15fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c15high, .consonants_selection_panel .c15high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c15high:hover, .consonants_selection_panel .c15high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c15_record_highlight, .consonants_selection_panel .c15_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c16btn, .consonants_panel .c16dis, .consonants_panel .c16fade, .consonants_panel .c16high, .consonants_panel .c16_record_highlight, .consonants_selection_panel .c16btn, .consonants_selection_panel .c16dis, .consonants_selection_panel .c16fade, .consonants_selection_panel .c16high, .consonants_selection_panel .c16_record_highlight {
    width: 60px;
    height: 60px;
    font-size: clamp(3rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c16dis, .consonants_selection_panel .c16dis {
    color: #fafafa;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c16dis:hover, .consonants_selection_panel .c16dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c16fade, .consonants_selection_panel .c16fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c16fade:hover, .consonants_selection_panel .c16fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c16high, .consonants_selection_panel .c16high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c16high:hover, .consonants_selection_panel .c16high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c16_record_highlight, .consonants_selection_panel .c16_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c17btn, .consonants_panel .c17dis, .consonants_panel .c17fade, .consonants_panel .c17high, .consonants_panel .c17_record_highlight, .consonants_selection_panel .c17btn, .consonants_selection_panel .c17dis, .consonants_selection_panel .c17fade, .consonants_selection_panel .c17high, .consonants_selection_panel .c17_record_highlight {
    width: 60px;
    height: 60px;
    font-size: clamp(3rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c17dis, .consonants_selection_panel .c17dis {
    color: #fafafa;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c17dis:hover, .consonants_selection_panel .c17dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c17fade, .consonants_selection_panel .c17fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c17fade:hover, .consonants_selection_panel .c17fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c17high, .consonants_selection_panel .c17high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c17high:hover, .consonants_selection_panel .c17high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c17_record_highlight, .consonants_selection_panel .c17_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c18btn, .consonants_panel .c18dis, .consonants_panel .c18fade, .consonants_panel .c18high, .consonants_panel .c18_record_highlight, .consonants_selection_panel .c18btn, .consonants_selection_panel .c18dis, .consonants_selection_panel .c18fade, .consonants_selection_panel .c18high, .consonants_selection_panel .c18_record_highlight {
    width: 60px;
    height: 60px;
    font-size: clamp(3rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c18dis, .consonants_selection_panel .c18dis {
    color: #fafafa;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c18dis:hover, .consonants_selection_panel .c18dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c18fade, .consonants_selection_panel .c18fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c18fade:hover, .consonants_selection_panel .c18fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c18high, .consonants_selection_panel .c18high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c18high:hover, .consonants_selection_panel .c18high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c18_record_highlight, .consonants_selection_panel .c18_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c19btn, .consonants_panel .c19dis, .consonants_panel .c19fade, .consonants_panel .c19high, .consonants_panel .c19_record_highlight, .consonants_selection_panel .c19btn, .consonants_selection_panel .c19dis, .consonants_selection_panel .c19fade, .consonants_selection_panel .c19high, .consonants_selection_panel .c19_record_highlight {
    width: 60px;
    height: 60px;
    font-size: clamp(3rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c19dis, .consonants_selection_panel .c19dis {
    color: #fafafa;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c19dis:hover, .consonants_selection_panel .c19dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c19fade, .consonants_selection_panel .c19fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c19fade:hover, .consonants_selection_panel .c19fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c19high, .consonants_selection_panel .c19high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c19high:hover, .consonants_selection_panel .c19high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c19_record_highlight, .consonants_selection_panel .c19_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c20btn, .consonants_panel .c20dis, .consonants_panel .c20fade, .consonants_panel .c20high, .consonants_panel .c20_record_highlight, .consonants_selection_panel .c20btn, .consonants_selection_panel .c20dis, .consonants_selection_panel .c20fade, .consonants_selection_panel .c20high, .consonants_selection_panel .c20_record_highlight {
    width: 60px;
    height: 60px;
    font-size: clamp(3rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c20dis, .consonants_selection_panel .c20dis {
    color: #fafafa;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c20dis:hover, .consonants_selection_panel .c20dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c20fade, .consonants_selection_panel .c20fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c20fade:hover, .consonants_selection_panel .c20fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c20high, .consonants_selection_panel .c20high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c20high:hover, .consonants_selection_panel .c20high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c20_record_highlight, .consonants_selection_panel .c20_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c21btn, .consonants_panel .c21dis, .consonants_panel .c21fade, .consonants_panel .c21high, .consonants_panel .c21_record_highlight, .consonants_selection_panel .c21btn, .consonants_selection_panel .c21dis, .consonants_selection_panel .c21fade, .consonants_selection_panel .c21high, .consonants_selection_panel .c21_record_highlight {
    width: 60px;
    height: 60px;
    font-size: clamp(3rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c21dis, .consonants_selection_panel .c21dis {
    color: #fafafa;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c21dis:hover, .consonants_selection_panel .c21dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c21fade, .consonants_selection_panel .c21fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c21fade:hover, .consonants_selection_panel .c21fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c21high, .consonants_selection_panel .c21high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c21high:hover, .consonants_selection_panel .c21high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c21_record_highlight, .consonants_selection_panel .c21_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c22btn, .consonants_panel .c22dis, .consonants_panel .c22fade, .consonants_panel .c22high, .consonants_panel .c22_record_highlight, .consonants_selection_panel .c22btn, .consonants_selection_panel .c22dis, .consonants_selection_panel .c22fade, .consonants_selection_panel .c22high, .consonants_selection_panel .c22_record_highlight {
    width: 60px;
    height: 60px;
    font-size: clamp(3rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c22dis, .consonants_selection_panel .c22dis {
    color: #fafafa;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c22dis:hover, .consonants_selection_panel .c22dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c22fade, .consonants_selection_panel .c22fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c22fade:hover, .consonants_selection_panel .c22fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c22high, .consonants_selection_panel .c22high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c22high:hover, .consonants_selection_panel .c22high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c22_record_highlight, .consonants_selection_panel .c22_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c23btn, .consonants_panel .c23dis, .consonants_panel .c23fade, .consonants_panel .c23high, .consonants_panel .c23_record_highlight, .consonants_selection_panel .c23btn, .consonants_selection_panel .c23dis, .consonants_selection_panel .c23fade, .consonants_selection_panel .c23high, .consonants_selection_panel .c23_record_highlight {
    width: 60px;
    height: 60px;
    font-size: clamp(3rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c23dis, .consonants_selection_panel .c23dis {
    color: #fafafa;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c23dis:hover, .consonants_selection_panel .c23dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c23fade, .consonants_selection_panel .c23fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c23fade:hover, .consonants_selection_panel .c23fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c23high, .consonants_selection_panel .c23high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c23high:hover, .consonants_selection_panel .c23high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c23_record_highlight, .consonants_selection_panel .c23_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c24btn, .consonants_panel .c24dis, .consonants_panel .c24fade, .consonants_panel .c24high, .consonants_panel .c24_record_highlight, .consonants_selection_panel .c24btn, .consonants_selection_panel .c24dis, .consonants_selection_panel .c24fade, .consonants_selection_panel .c24high, .consonants_selection_panel .c24_record_highlight {
    width: 60px;
    height: 60px;
    font-size: clamp(3rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c24dis, .consonants_selection_panel .c24dis {
    color: #fafafa;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c24dis:hover, .consonants_selection_panel .c24dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c24fade, .consonants_selection_panel .c24fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c24fade:hover, .consonants_selection_panel .c24fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c24high, .consonants_selection_panel .c24high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 579px) and (hover: hover) {
  .consonants_panel .c24high:hover, .consonants_selection_panel .c24high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 579px) {
  .consonants_panel .c24_record_highlight, .consonants_selection_panel .c24_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel, .consonants_selection_panel {
    line-height: 45px !important;
    text-align: center;
    color: #0089e8;
    font: 900 1rem "CharisSILW", "Times New Roman";
    font-size: 0.75rem;
    cursor: pointer;
    grid-template-rows: 55px 55px 55px 55px;
    grid-row-gap: 4px;
    grid-column-gap: 4px;
    -webkit-tap-highlight-color: transparent;
  }
  .consonants_panel .vcButton, .consonants_panel .spacer, .consonants_selection_panel .vcButton, .consonants_selection_panel .spacer {
    width: 12vw;
    height: 55px;
    background-color: #FFF;
    transition: background-color 0.2s;
    border-radius: 5px;
  }
  .consonants_panel .vcButton, .consonants_selection_panel .vcButton {
    line-height: 48px !important;
    text-align: center;
    color: #0089e8;
    font: 900 1rem "CharisSILW", "Times New Roman";
    font-size: 3em;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    overflow: hidden;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .vcButton:hover, .consonants_selection_panel .vcButton:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .vcButton.c2, .consonants_panel .vcButton.c3, .consonants_panel .vcButton.c4, .consonants_panel .vcButton.c5, .consonants_panel .vcButton.c7, .consonants_panel .vcButton.c9, .consonants_panel .vcButton.c10, .consonants_panel .vcButton.c11, .consonants_panel .vcButton.c17, .consonants_panel .vcButton.c15, .consonants_panel .vcButton.c15fade, .consonants_panel .vcButton.c22, .consonants_panel .vcButton.c22fade, .consonants_selection_panel .vcButton.c2, .consonants_selection_panel .vcButton.c3, .consonants_selection_panel .vcButton.c4, .consonants_selection_panel .vcButton.c5, .consonants_selection_panel .vcButton.c7, .consonants_selection_panel .vcButton.c9, .consonants_selection_panel .vcButton.c10, .consonants_selection_panel .vcButton.c11, .consonants_selection_panel .vcButton.c17, .consonants_selection_panel .vcButton.c15, .consonants_selection_panel .vcButton.c15fade, .consonants_selection_panel .vcButton.c22, .consonants_selection_panel .vcButton.c22fade {
    line-height: 48px !important;
  }
  .consonants_panel .c1btn, .consonants_panel .c1dis, .consonants_panel .c1fade, .consonants_panel .c1high, .consonants_panel .c1_record_highlight, .consonants_selection_panel .c1btn, .consonants_selection_panel .c1dis, .consonants_selection_panel .c1fade, .consonants_selection_panel .c1high, .consonants_selection_panel .c1_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2.25rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c1dis, .consonants_selection_panel .c1dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c1dis:hover, .consonants_selection_panel .c1dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c1fade, .consonants_selection_panel .c1fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c1fade:hover, .consonants_selection_panel .c1fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c1high, .consonants_selection_panel .c1high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c1high:hover, .consonants_selection_panel .c1high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c1_record_highlight, .consonants_selection_panel .c1_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c2btn, .consonants_panel .c2dis, .consonants_panel .c2fade, .consonants_panel .c2high, .consonants_panel .c2_record_highlight, .consonants_selection_panel .c2btn, .consonants_selection_panel .c2dis, .consonants_selection_panel .c2fade, .consonants_selection_panel .c2high, .consonants_selection_panel .c2_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2.25rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c2dis, .consonants_selection_panel .c2dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c2dis:hover, .consonants_selection_panel .c2dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c2fade, .consonants_selection_panel .c2fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c2fade:hover, .consonants_selection_panel .c2fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c2high, .consonants_selection_panel .c2high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c2high:hover, .consonants_selection_panel .c2high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c2_record_highlight, .consonants_selection_panel .c2_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c3btn, .consonants_panel .c3dis, .consonants_panel .c3fade, .consonants_panel .c3high, .consonants_panel .c3_record_highlight, .consonants_selection_panel .c3btn, .consonants_selection_panel .c3dis, .consonants_selection_panel .c3fade, .consonants_selection_panel .c3high, .consonants_selection_panel .c3_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2.25rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c3dis, .consonants_selection_panel .c3dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c3dis:hover, .consonants_selection_panel .c3dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c3fade, .consonants_selection_panel .c3fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c3fade:hover, .consonants_selection_panel .c3fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c3high, .consonants_selection_panel .c3high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c3high:hover, .consonants_selection_panel .c3high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c3_record_highlight, .consonants_selection_panel .c3_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c4btn, .consonants_panel .c4dis, .consonants_panel .c4fade, .consonants_panel .c4high, .consonants_panel .c4_record_highlight, .consonants_selection_panel .c4btn, .consonants_selection_panel .c4dis, .consonants_selection_panel .c4fade, .consonants_selection_panel .c4high, .consonants_selection_panel .c4_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2.25rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c4dis, .consonants_selection_panel .c4dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c4dis:hover, .consonants_selection_panel .c4dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c4fade, .consonants_selection_panel .c4fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c4fade:hover, .consonants_selection_panel .c4fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c4high, .consonants_selection_panel .c4high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c4high:hover, .consonants_selection_panel .c4high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c4_record_highlight, .consonants_selection_panel .c4_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c5btn, .consonants_panel .c5dis, .consonants_panel .c5fade, .consonants_panel .c5high, .consonants_panel .c5_record_highlight, .consonants_selection_panel .c5btn, .consonants_selection_panel .c5dis, .consonants_selection_panel .c5fade, .consonants_selection_panel .c5high, .consonants_selection_panel .c5_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2.25rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c5dis, .consonants_selection_panel .c5dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c5dis:hover, .consonants_selection_panel .c5dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c5fade, .consonants_selection_panel .c5fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c5fade:hover, .consonants_selection_panel .c5fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c5high, .consonants_selection_panel .c5high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c5high:hover, .consonants_selection_panel .c5high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c5_record_highlight, .consonants_selection_panel .c5_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c6btn, .consonants_panel .c6dis, .consonants_panel .c6fade, .consonants_panel .c6high, .consonants_panel .c6_record_highlight, .consonants_selection_panel .c6btn, .consonants_selection_panel .c6dis, .consonants_selection_panel .c6fade, .consonants_selection_panel .c6high, .consonants_selection_panel .c6_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2.25rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c6dis, .consonants_selection_panel .c6dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c6dis:hover, .consonants_selection_panel .c6dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c6fade, .consonants_selection_panel .c6fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c6fade:hover, .consonants_selection_panel .c6fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c6high, .consonants_selection_panel .c6high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c6high:hover, .consonants_selection_panel .c6high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c6_record_highlight, .consonants_selection_panel .c6_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c7btn, .consonants_panel .c7dis, .consonants_panel .c7fade, .consonants_panel .c7high, .consonants_panel .c7_record_highlight, .consonants_selection_panel .c7btn, .consonants_selection_panel .c7dis, .consonants_selection_panel .c7fade, .consonants_selection_panel .c7high, .consonants_selection_panel .c7_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2.25rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c7dis, .consonants_selection_panel .c7dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c7dis:hover, .consonants_selection_panel .c7dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c7fade, .consonants_selection_panel .c7fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c7fade:hover, .consonants_selection_panel .c7fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c7high, .consonants_selection_panel .c7high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c7high:hover, .consonants_selection_panel .c7high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c7_record_highlight, .consonants_selection_panel .c7_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c8btn, .consonants_panel .c8dis, .consonants_panel .c8fade, .consonants_panel .c8high, .consonants_panel .c8_record_highlight, .consonants_selection_panel .c8btn, .consonants_selection_panel .c8dis, .consonants_selection_panel .c8fade, .consonants_selection_panel .c8high, .consonants_selection_panel .c8_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2.25rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c8dis, .consonants_selection_panel .c8dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c8dis:hover, .consonants_selection_panel .c8dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c8fade, .consonants_selection_panel .c8fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c8fade:hover, .consonants_selection_panel .c8fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c8high, .consonants_selection_panel .c8high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c8high:hover, .consonants_selection_panel .c8high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c8_record_highlight, .consonants_selection_panel .c8_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c9btn, .consonants_panel .c9dis, .consonants_panel .c9fade, .consonants_panel .c9high, .consonants_panel .c9_record_highlight, .consonants_selection_panel .c9btn, .consonants_selection_panel .c9dis, .consonants_selection_panel .c9fade, .consonants_selection_panel .c9high, .consonants_selection_panel .c9_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2.25rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c9dis, .consonants_selection_panel .c9dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c9dis:hover, .consonants_selection_panel .c9dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c9fade, .consonants_selection_panel .c9fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c9fade:hover, .consonants_selection_panel .c9fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c9high, .consonants_selection_panel .c9high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c9high:hover, .consonants_selection_panel .c9high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c9_record_highlight, .consonants_selection_panel .c9_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c10btn, .consonants_panel .c10dis, .consonants_panel .c10fade, .consonants_panel .c10high, .consonants_panel .c10_record_highlight, .consonants_selection_panel .c10btn, .consonants_selection_panel .c10dis, .consonants_selection_panel .c10fade, .consonants_selection_panel .c10high, .consonants_selection_panel .c10_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2.25rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c10dis, .consonants_selection_panel .c10dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c10dis:hover, .consonants_selection_panel .c10dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c10fade, .consonants_selection_panel .c10fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c10fade:hover, .consonants_selection_panel .c10fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c10high, .consonants_selection_panel .c10high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c10high:hover, .consonants_selection_panel .c10high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c10_record_highlight, .consonants_selection_panel .c10_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c11btn, .consonants_panel .c11dis, .consonants_panel .c11fade, .consonants_panel .c11high, .consonants_panel .c11_record_highlight, .consonants_selection_panel .c11btn, .consonants_selection_panel .c11dis, .consonants_selection_panel .c11fade, .consonants_selection_panel .c11high, .consonants_selection_panel .c11_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2.25rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c11dis, .consonants_selection_panel .c11dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c11dis:hover, .consonants_selection_panel .c11dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c11fade, .consonants_selection_panel .c11fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c11fade:hover, .consonants_selection_panel .c11fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c11high, .consonants_selection_panel .c11high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c11high:hover, .consonants_selection_panel .c11high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c11_record_highlight, .consonants_selection_panel .c11_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c12btn, .consonants_panel .c12dis, .consonants_panel .c12fade, .consonants_panel .c12high, .consonants_panel .c12_record_highlight, .consonants_selection_panel .c12btn, .consonants_selection_panel .c12dis, .consonants_selection_panel .c12fade, .consonants_selection_panel .c12high, .consonants_selection_panel .c12_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2.25rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c12dis, .consonants_selection_panel .c12dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c12dis:hover, .consonants_selection_panel .c12dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c12fade, .consonants_selection_panel .c12fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c12fade:hover, .consonants_selection_panel .c12fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c12high, .consonants_selection_panel .c12high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c12high:hover, .consonants_selection_panel .c12high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c12_record_highlight, .consonants_selection_panel .c12_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c13btn, .consonants_panel .c13dis, .consonants_panel .c13fade, .consonants_panel .c13high, .consonants_panel .c13_record_highlight, .consonants_selection_panel .c13btn, .consonants_selection_panel .c13dis, .consonants_selection_panel .c13fade, .consonants_selection_panel .c13high, .consonants_selection_panel .c13_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2.25rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c13dis, .consonants_selection_panel .c13dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c13dis:hover, .consonants_selection_panel .c13dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c13fade, .consonants_selection_panel .c13fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c13fade:hover, .consonants_selection_panel .c13fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c13high, .consonants_selection_panel .c13high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c13high:hover, .consonants_selection_panel .c13high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c13_record_highlight, .consonants_selection_panel .c13_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c14btn, .consonants_panel .c14dis, .consonants_panel .c14fade, .consonants_panel .c14high, .consonants_panel .c14_record_highlight, .consonants_selection_panel .c14btn, .consonants_selection_panel .c14dis, .consonants_selection_panel .c14fade, .consonants_selection_panel .c14high, .consonants_selection_panel .c14_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2.25rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c14dis, .consonants_selection_panel .c14dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c14dis:hover, .consonants_selection_panel .c14dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c14fade, .consonants_selection_panel .c14fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c14fade:hover, .consonants_selection_panel .c14fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c14high, .consonants_selection_panel .c14high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c14high:hover, .consonants_selection_panel .c14high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c14_record_highlight, .consonants_selection_panel .c14_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c15btn, .consonants_panel .c15dis, .consonants_panel .c15fade, .consonants_panel .c15high, .consonants_panel .c15_record_highlight, .consonants_selection_panel .c15btn, .consonants_selection_panel .c15dis, .consonants_selection_panel .c15fade, .consonants_selection_panel .c15high, .consonants_selection_panel .c15_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2.25rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c15dis, .consonants_selection_panel .c15dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c15dis:hover, .consonants_selection_panel .c15dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c15fade, .consonants_selection_panel .c15fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c15fade:hover, .consonants_selection_panel .c15fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c15high, .consonants_selection_panel .c15high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c15high:hover, .consonants_selection_panel .c15high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c15_record_highlight, .consonants_selection_panel .c15_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c16btn, .consonants_panel .c16dis, .consonants_panel .c16fade, .consonants_panel .c16high, .consonants_panel .c16_record_highlight, .consonants_selection_panel .c16btn, .consonants_selection_panel .c16dis, .consonants_selection_panel .c16fade, .consonants_selection_panel .c16high, .consonants_selection_panel .c16_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2.25rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c16dis, .consonants_selection_panel .c16dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c16dis:hover, .consonants_selection_panel .c16dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c16fade, .consonants_selection_panel .c16fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c16fade:hover, .consonants_selection_panel .c16fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c16high, .consonants_selection_panel .c16high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c16high:hover, .consonants_selection_panel .c16high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c16_record_highlight, .consonants_selection_panel .c16_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c17btn, .consonants_panel .c17dis, .consonants_panel .c17fade, .consonants_panel .c17high, .consonants_panel .c17_record_highlight, .consonants_selection_panel .c17btn, .consonants_selection_panel .c17dis, .consonants_selection_panel .c17fade, .consonants_selection_panel .c17high, .consonants_selection_panel .c17_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2.25rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c17dis, .consonants_selection_panel .c17dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c17dis:hover, .consonants_selection_panel .c17dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c17fade, .consonants_selection_panel .c17fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c17fade:hover, .consonants_selection_panel .c17fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c17high, .consonants_selection_panel .c17high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c17high:hover, .consonants_selection_panel .c17high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c17_record_highlight, .consonants_selection_panel .c17_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c18btn, .consonants_panel .c18dis, .consonants_panel .c18fade, .consonants_panel .c18high, .consonants_panel .c18_record_highlight, .consonants_selection_panel .c18btn, .consonants_selection_panel .c18dis, .consonants_selection_panel .c18fade, .consonants_selection_panel .c18high, .consonants_selection_panel .c18_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2.25rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c18dis, .consonants_selection_panel .c18dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c18dis:hover, .consonants_selection_panel .c18dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c18fade, .consonants_selection_panel .c18fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c18fade:hover, .consonants_selection_panel .c18fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c18high, .consonants_selection_panel .c18high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c18high:hover, .consonants_selection_panel .c18high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c18_record_highlight, .consonants_selection_panel .c18_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c19btn, .consonants_panel .c19dis, .consonants_panel .c19fade, .consonants_panel .c19high, .consonants_panel .c19_record_highlight, .consonants_selection_panel .c19btn, .consonants_selection_panel .c19dis, .consonants_selection_panel .c19fade, .consonants_selection_panel .c19high, .consonants_selection_panel .c19_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2.25rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c19dis, .consonants_selection_panel .c19dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c19dis:hover, .consonants_selection_panel .c19dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c19fade, .consonants_selection_panel .c19fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c19fade:hover, .consonants_selection_panel .c19fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c19high, .consonants_selection_panel .c19high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c19high:hover, .consonants_selection_panel .c19high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c19_record_highlight, .consonants_selection_panel .c19_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c20btn, .consonants_panel .c20dis, .consonants_panel .c20fade, .consonants_panel .c20high, .consonants_panel .c20_record_highlight, .consonants_selection_panel .c20btn, .consonants_selection_panel .c20dis, .consonants_selection_panel .c20fade, .consonants_selection_panel .c20high, .consonants_selection_panel .c20_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2.25rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c20dis, .consonants_selection_panel .c20dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c20dis:hover, .consonants_selection_panel .c20dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c20fade, .consonants_selection_panel .c20fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c20fade:hover, .consonants_selection_panel .c20fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c20high, .consonants_selection_panel .c20high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c20high:hover, .consonants_selection_panel .c20high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c20_record_highlight, .consonants_selection_panel .c20_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c21btn, .consonants_panel .c21dis, .consonants_panel .c21fade, .consonants_panel .c21high, .consonants_panel .c21_record_highlight, .consonants_selection_panel .c21btn, .consonants_selection_panel .c21dis, .consonants_selection_panel .c21fade, .consonants_selection_panel .c21high, .consonants_selection_panel .c21_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2.25rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c21dis, .consonants_selection_panel .c21dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c21dis:hover, .consonants_selection_panel .c21dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c21fade, .consonants_selection_panel .c21fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c21fade:hover, .consonants_selection_panel .c21fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c21high, .consonants_selection_panel .c21high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c21high:hover, .consonants_selection_panel .c21high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c21_record_highlight, .consonants_selection_panel .c21_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c22btn, .consonants_panel .c22dis, .consonants_panel .c22fade, .consonants_panel .c22high, .consonants_panel .c22_record_highlight, .consonants_selection_panel .c22btn, .consonants_selection_panel .c22dis, .consonants_selection_panel .c22fade, .consonants_selection_panel .c22high, .consonants_selection_panel .c22_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2.25rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c22dis, .consonants_selection_panel .c22dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c22dis:hover, .consonants_selection_panel .c22dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c22fade, .consonants_selection_panel .c22fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c22fade:hover, .consonants_selection_panel .c22fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c22high, .consonants_selection_panel .c22high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c22high:hover, .consonants_selection_panel .c22high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c22_record_highlight, .consonants_selection_panel .c22_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c23btn, .consonants_panel .c23dis, .consonants_panel .c23fade, .consonants_panel .c23high, .consonants_panel .c23_record_highlight, .consonants_selection_panel .c23btn, .consonants_selection_panel .c23dis, .consonants_selection_panel .c23fade, .consonants_selection_panel .c23high, .consonants_selection_panel .c23_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2.25rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c23dis, .consonants_selection_panel .c23dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c23dis:hover, .consonants_selection_panel .c23dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c23fade, .consonants_selection_panel .c23fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c23fade:hover, .consonants_selection_panel .c23fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c23high, .consonants_selection_panel .c23high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c23high:hover, .consonants_selection_panel .c23high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c23_record_highlight, .consonants_selection_panel .c23_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c24btn, .consonants_panel .c24dis, .consonants_panel .c24fade, .consonants_panel .c24high, .consonants_panel .c24_record_highlight, .consonants_selection_panel .c24btn, .consonants_selection_panel .c24dis, .consonants_selection_panel .c24fade, .consonants_selection_panel .c24high, .consonants_selection_panel .c24_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2.25rem, 8vw, 3rem);
    line-height: clamp(2rem, 17vw, 2.75rem) !important;
    padding: 0 0 2vw 0;
  }
  .consonants_panel .c24dis, .consonants_selection_panel .c24dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c24dis:hover, .consonants_selection_panel .c24dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c24fade, .consonants_selection_panel .c24fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c24fade:hover, .consonants_selection_panel .c24fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c24high, .consonants_selection_panel .c24high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-width: 479px) and (hover: hover) {
  .consonants_panel .c24high:hover, .consonants_selection_panel .c24high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-width: 479px) {
  .consonants_panel .c24_record_highlight, .consonants_selection_panel .c24_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel, .consonants_selection_panel {
    align-content: start;
  }
  .consonants_panel .c1btn, .consonants_panel .c1dis, .consonants_panel .c1fade, .consonants_panel .c1high, .consonants_panel .c1_record_highlight, .consonants_selection_panel .c1btn, .consonants_selection_panel .c1dis, .consonants_selection_panel .c1fade, .consonants_selection_panel .c1high, .consonants_selection_panel .c1_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 2.5rem);
    line-height: clamp(2rem, 11vw, 2.5rem) !important;
  }
  .consonants_panel .c1dis, .consonants_selection_panel .c1dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c1dis:hover, .consonants_selection_panel .c1dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c1fade, .consonants_selection_panel .c1fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c1fade:hover, .consonants_selection_panel .c1fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c1high, .consonants_selection_panel .c1high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c1high:hover, .consonants_selection_panel .c1high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c1_record_highlight, .consonants_selection_panel .c1_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c2btn, .consonants_panel .c2dis, .consonants_panel .c2fade, .consonants_panel .c2high, .consonants_panel .c2_record_highlight, .consonants_selection_panel .c2btn, .consonants_selection_panel .c2dis, .consonants_selection_panel .c2fade, .consonants_selection_panel .c2high, .consonants_selection_panel .c2_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 2.5rem);
    line-height: clamp(2rem, 11vw, 2.5rem) !important;
  }
  .consonants_panel .c2dis, .consonants_selection_panel .c2dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c2dis:hover, .consonants_selection_panel .c2dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c2fade, .consonants_selection_panel .c2fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c2fade:hover, .consonants_selection_panel .c2fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c2high, .consonants_selection_panel .c2high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c2high:hover, .consonants_selection_panel .c2high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c2_record_highlight, .consonants_selection_panel .c2_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c3btn, .consonants_panel .c3dis, .consonants_panel .c3fade, .consonants_panel .c3high, .consonants_panel .c3_record_highlight, .consonants_selection_panel .c3btn, .consonants_selection_panel .c3dis, .consonants_selection_panel .c3fade, .consonants_selection_panel .c3high, .consonants_selection_panel .c3_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 2.5rem);
    line-height: clamp(2rem, 11vw, 2.5rem) !important;
  }
  .consonants_panel .c3dis, .consonants_selection_panel .c3dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c3dis:hover, .consonants_selection_panel .c3dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c3fade, .consonants_selection_panel .c3fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c3fade:hover, .consonants_selection_panel .c3fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c3high, .consonants_selection_panel .c3high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c3high:hover, .consonants_selection_panel .c3high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c3_record_highlight, .consonants_selection_panel .c3_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c4btn, .consonants_panel .c4dis, .consonants_panel .c4fade, .consonants_panel .c4high, .consonants_panel .c4_record_highlight, .consonants_selection_panel .c4btn, .consonants_selection_panel .c4dis, .consonants_selection_panel .c4fade, .consonants_selection_panel .c4high, .consonants_selection_panel .c4_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 2.5rem);
    line-height: clamp(2rem, 11vw, 2.5rem) !important;
  }
  .consonants_panel .c4dis, .consonants_selection_panel .c4dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c4dis:hover, .consonants_selection_panel .c4dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c4fade, .consonants_selection_panel .c4fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c4fade:hover, .consonants_selection_panel .c4fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c4high, .consonants_selection_panel .c4high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c4high:hover, .consonants_selection_panel .c4high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c4_record_highlight, .consonants_selection_panel .c4_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c5btn, .consonants_panel .c5dis, .consonants_panel .c5fade, .consonants_panel .c5high, .consonants_panel .c5_record_highlight, .consonants_selection_panel .c5btn, .consonants_selection_panel .c5dis, .consonants_selection_panel .c5fade, .consonants_selection_panel .c5high, .consonants_selection_panel .c5_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 2.5rem);
    line-height: clamp(2rem, 11vw, 2.5rem) !important;
  }
  .consonants_panel .c5dis, .consonants_selection_panel .c5dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c5dis:hover, .consonants_selection_panel .c5dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c5fade, .consonants_selection_panel .c5fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c5fade:hover, .consonants_selection_panel .c5fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c5high, .consonants_selection_panel .c5high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c5high:hover, .consonants_selection_panel .c5high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c5_record_highlight, .consonants_selection_panel .c5_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c6btn, .consonants_panel .c6dis, .consonants_panel .c6fade, .consonants_panel .c6high, .consonants_panel .c6_record_highlight, .consonants_selection_panel .c6btn, .consonants_selection_panel .c6dis, .consonants_selection_panel .c6fade, .consonants_selection_panel .c6high, .consonants_selection_panel .c6_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 2.5rem);
    line-height: clamp(2rem, 11vw, 2.5rem) !important;
  }
  .consonants_panel .c6dis, .consonants_selection_panel .c6dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c6dis:hover, .consonants_selection_panel .c6dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c6fade, .consonants_selection_panel .c6fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c6fade:hover, .consonants_selection_panel .c6fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c6high, .consonants_selection_panel .c6high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c6high:hover, .consonants_selection_panel .c6high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c6_record_highlight, .consonants_selection_panel .c6_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c7btn, .consonants_panel .c7dis, .consonants_panel .c7fade, .consonants_panel .c7high, .consonants_panel .c7_record_highlight, .consonants_selection_panel .c7btn, .consonants_selection_panel .c7dis, .consonants_selection_panel .c7fade, .consonants_selection_panel .c7high, .consonants_selection_panel .c7_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 2.5rem);
    line-height: clamp(2rem, 11vw, 2.5rem) !important;
  }
  .consonants_panel .c7dis, .consonants_selection_panel .c7dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c7dis:hover, .consonants_selection_panel .c7dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c7fade, .consonants_selection_panel .c7fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c7fade:hover, .consonants_selection_panel .c7fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c7high, .consonants_selection_panel .c7high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c7high:hover, .consonants_selection_panel .c7high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c7_record_highlight, .consonants_selection_panel .c7_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c8btn, .consonants_panel .c8dis, .consonants_panel .c8fade, .consonants_panel .c8high, .consonants_panel .c8_record_highlight, .consonants_selection_panel .c8btn, .consonants_selection_panel .c8dis, .consonants_selection_panel .c8fade, .consonants_selection_panel .c8high, .consonants_selection_panel .c8_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 2.5rem);
    line-height: clamp(2rem, 11vw, 2.5rem) !important;
  }
  .consonants_panel .c8dis, .consonants_selection_panel .c8dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c8dis:hover, .consonants_selection_panel .c8dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c8fade, .consonants_selection_panel .c8fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c8fade:hover, .consonants_selection_panel .c8fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c8high, .consonants_selection_panel .c8high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c8high:hover, .consonants_selection_panel .c8high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c8_record_highlight, .consonants_selection_panel .c8_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c9btn, .consonants_panel .c9dis, .consonants_panel .c9fade, .consonants_panel .c9high, .consonants_panel .c9_record_highlight, .consonants_selection_panel .c9btn, .consonants_selection_panel .c9dis, .consonants_selection_panel .c9fade, .consonants_selection_panel .c9high, .consonants_selection_panel .c9_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 2.5rem);
    line-height: clamp(2rem, 11vw, 2.5rem) !important;
  }
  .consonants_panel .c9dis, .consonants_selection_panel .c9dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c9dis:hover, .consonants_selection_panel .c9dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c9fade, .consonants_selection_panel .c9fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c9fade:hover, .consonants_selection_panel .c9fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c9high, .consonants_selection_panel .c9high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c9high:hover, .consonants_selection_panel .c9high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c9_record_highlight, .consonants_selection_panel .c9_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c10btn, .consonants_panel .c10dis, .consonants_panel .c10fade, .consonants_panel .c10high, .consonants_panel .c10_record_highlight, .consonants_selection_panel .c10btn, .consonants_selection_panel .c10dis, .consonants_selection_panel .c10fade, .consonants_selection_panel .c10high, .consonants_selection_panel .c10_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 2.5rem);
    line-height: clamp(2rem, 11vw, 2.5rem) !important;
  }
  .consonants_panel .c10dis, .consonants_selection_panel .c10dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c10dis:hover, .consonants_selection_panel .c10dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c10fade, .consonants_selection_panel .c10fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c10fade:hover, .consonants_selection_panel .c10fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c10high, .consonants_selection_panel .c10high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c10high:hover, .consonants_selection_panel .c10high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c10_record_highlight, .consonants_selection_panel .c10_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c11btn, .consonants_panel .c11dis, .consonants_panel .c11fade, .consonants_panel .c11high, .consonants_panel .c11_record_highlight, .consonants_selection_panel .c11btn, .consonants_selection_panel .c11dis, .consonants_selection_panel .c11fade, .consonants_selection_panel .c11high, .consonants_selection_panel .c11_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 2.5rem);
    line-height: clamp(2rem, 11vw, 2.5rem) !important;
  }
  .consonants_panel .c11dis, .consonants_selection_panel .c11dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c11dis:hover, .consonants_selection_panel .c11dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c11fade, .consonants_selection_panel .c11fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c11fade:hover, .consonants_selection_panel .c11fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c11high, .consonants_selection_panel .c11high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c11high:hover, .consonants_selection_panel .c11high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c11_record_highlight, .consonants_selection_panel .c11_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c12btn, .consonants_panel .c12dis, .consonants_panel .c12fade, .consonants_panel .c12high, .consonants_panel .c12_record_highlight, .consonants_selection_panel .c12btn, .consonants_selection_panel .c12dis, .consonants_selection_panel .c12fade, .consonants_selection_panel .c12high, .consonants_selection_panel .c12_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 2.5rem);
    line-height: clamp(2rem, 11vw, 2.5rem) !important;
  }
  .consonants_panel .c12dis, .consonants_selection_panel .c12dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c12dis:hover, .consonants_selection_panel .c12dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c12fade, .consonants_selection_panel .c12fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c12fade:hover, .consonants_selection_panel .c12fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c12high, .consonants_selection_panel .c12high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c12high:hover, .consonants_selection_panel .c12high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c12_record_highlight, .consonants_selection_panel .c12_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c13btn, .consonants_panel .c13dis, .consonants_panel .c13fade, .consonants_panel .c13high, .consonants_panel .c13_record_highlight, .consonants_selection_panel .c13btn, .consonants_selection_panel .c13dis, .consonants_selection_panel .c13fade, .consonants_selection_panel .c13high, .consonants_selection_panel .c13_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 2.5rem);
    line-height: clamp(2rem, 11vw, 2.5rem) !important;
  }
  .consonants_panel .c13dis, .consonants_selection_panel .c13dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c13dis:hover, .consonants_selection_panel .c13dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c13fade, .consonants_selection_panel .c13fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c13fade:hover, .consonants_selection_panel .c13fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c13high, .consonants_selection_panel .c13high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c13high:hover, .consonants_selection_panel .c13high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c13_record_highlight, .consonants_selection_panel .c13_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c14btn, .consonants_panel .c14dis, .consonants_panel .c14fade, .consonants_panel .c14high, .consonants_panel .c14_record_highlight, .consonants_selection_panel .c14btn, .consonants_selection_panel .c14dis, .consonants_selection_panel .c14fade, .consonants_selection_panel .c14high, .consonants_selection_panel .c14_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 2.5rem);
    line-height: clamp(2rem, 11vw, 2.5rem) !important;
  }
  .consonants_panel .c14dis, .consonants_selection_panel .c14dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c14dis:hover, .consonants_selection_panel .c14dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c14fade, .consonants_selection_panel .c14fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c14fade:hover, .consonants_selection_panel .c14fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c14high, .consonants_selection_panel .c14high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c14high:hover, .consonants_selection_panel .c14high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c14_record_highlight, .consonants_selection_panel .c14_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c15btn, .consonants_panel .c15dis, .consonants_panel .c15fade, .consonants_panel .c15high, .consonants_panel .c15_record_highlight, .consonants_selection_panel .c15btn, .consonants_selection_panel .c15dis, .consonants_selection_panel .c15fade, .consonants_selection_panel .c15high, .consonants_selection_panel .c15_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 2.5rem);
    line-height: clamp(2rem, 11vw, 2.5rem) !important;
  }
  .consonants_panel .c15dis, .consonants_selection_panel .c15dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c15dis:hover, .consonants_selection_panel .c15dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c15fade, .consonants_selection_panel .c15fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c15fade:hover, .consonants_selection_panel .c15fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c15high, .consonants_selection_panel .c15high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c15high:hover, .consonants_selection_panel .c15high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c15_record_highlight, .consonants_selection_panel .c15_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c16btn, .consonants_panel .c16dis, .consonants_panel .c16fade, .consonants_panel .c16high, .consonants_panel .c16_record_highlight, .consonants_selection_panel .c16btn, .consonants_selection_panel .c16dis, .consonants_selection_panel .c16fade, .consonants_selection_panel .c16high, .consonants_selection_panel .c16_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 2.5rem);
    line-height: clamp(2rem, 11vw, 2.5rem) !important;
  }
  .consonants_panel .c16dis, .consonants_selection_panel .c16dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c16dis:hover, .consonants_selection_panel .c16dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c16fade, .consonants_selection_panel .c16fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c16fade:hover, .consonants_selection_panel .c16fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c16high, .consonants_selection_panel .c16high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c16high:hover, .consonants_selection_panel .c16high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c16_record_highlight, .consonants_selection_panel .c16_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c17btn, .consonants_panel .c17dis, .consonants_panel .c17fade, .consonants_panel .c17high, .consonants_panel .c17_record_highlight, .consonants_selection_panel .c17btn, .consonants_selection_panel .c17dis, .consonants_selection_panel .c17fade, .consonants_selection_panel .c17high, .consonants_selection_panel .c17_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 2.5rem);
    line-height: clamp(2rem, 11vw, 2.5rem) !important;
  }
  .consonants_panel .c17dis, .consonants_selection_panel .c17dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c17dis:hover, .consonants_selection_panel .c17dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c17fade, .consonants_selection_panel .c17fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c17fade:hover, .consonants_selection_panel .c17fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c17high, .consonants_selection_panel .c17high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c17high:hover, .consonants_selection_panel .c17high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c17_record_highlight, .consonants_selection_panel .c17_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c18btn, .consonants_panel .c18dis, .consonants_panel .c18fade, .consonants_panel .c18high, .consonants_panel .c18_record_highlight, .consonants_selection_panel .c18btn, .consonants_selection_panel .c18dis, .consonants_selection_panel .c18fade, .consonants_selection_panel .c18high, .consonants_selection_panel .c18_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 2.5rem);
    line-height: clamp(2rem, 11vw, 2.5rem) !important;
  }
  .consonants_panel .c18dis, .consonants_selection_panel .c18dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c18dis:hover, .consonants_selection_panel .c18dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c18fade, .consonants_selection_panel .c18fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c18fade:hover, .consonants_selection_panel .c18fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c18high, .consonants_selection_panel .c18high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c18high:hover, .consonants_selection_panel .c18high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c18_record_highlight, .consonants_selection_panel .c18_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c19btn, .consonants_panel .c19dis, .consonants_panel .c19fade, .consonants_panel .c19high, .consonants_panel .c19_record_highlight, .consonants_selection_panel .c19btn, .consonants_selection_panel .c19dis, .consonants_selection_panel .c19fade, .consonants_selection_panel .c19high, .consonants_selection_panel .c19_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 2.5rem);
    line-height: clamp(2rem, 11vw, 2.5rem) !important;
  }
  .consonants_panel .c19dis, .consonants_selection_panel .c19dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c19dis:hover, .consonants_selection_panel .c19dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c19fade, .consonants_selection_panel .c19fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c19fade:hover, .consonants_selection_panel .c19fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c19high, .consonants_selection_panel .c19high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c19high:hover, .consonants_selection_panel .c19high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c19_record_highlight, .consonants_selection_panel .c19_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c20btn, .consonants_panel .c20dis, .consonants_panel .c20fade, .consonants_panel .c20high, .consonants_panel .c20_record_highlight, .consonants_selection_panel .c20btn, .consonants_selection_panel .c20dis, .consonants_selection_panel .c20fade, .consonants_selection_panel .c20high, .consonants_selection_panel .c20_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 2.5rem);
    line-height: clamp(2rem, 11vw, 2.5rem) !important;
  }
  .consonants_panel .c20dis, .consonants_selection_panel .c20dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c20dis:hover, .consonants_selection_panel .c20dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c20fade, .consonants_selection_panel .c20fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c20fade:hover, .consonants_selection_panel .c20fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c20high, .consonants_selection_panel .c20high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c20high:hover, .consonants_selection_panel .c20high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c20_record_highlight, .consonants_selection_panel .c20_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c21btn, .consonants_panel .c21dis, .consonants_panel .c21fade, .consonants_panel .c21high, .consonants_panel .c21_record_highlight, .consonants_selection_panel .c21btn, .consonants_selection_panel .c21dis, .consonants_selection_panel .c21fade, .consonants_selection_panel .c21high, .consonants_selection_panel .c21_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 2.5rem);
    line-height: clamp(2rem, 11vw, 2.5rem) !important;
  }
  .consonants_panel .c21dis, .consonants_selection_panel .c21dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c21dis:hover, .consonants_selection_panel .c21dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c21fade, .consonants_selection_panel .c21fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c21fade:hover, .consonants_selection_panel .c21fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c21high, .consonants_selection_panel .c21high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c21high:hover, .consonants_selection_panel .c21high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c21_record_highlight, .consonants_selection_panel .c21_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c22btn, .consonants_panel .c22dis, .consonants_panel .c22fade, .consonants_panel .c22high, .consonants_panel .c22_record_highlight, .consonants_selection_panel .c22btn, .consonants_selection_panel .c22dis, .consonants_selection_panel .c22fade, .consonants_selection_panel .c22high, .consonants_selection_panel .c22_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 2.5rem);
    line-height: clamp(2rem, 11vw, 2.5rem) !important;
  }
  .consonants_panel .c22dis, .consonants_selection_panel .c22dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c22dis:hover, .consonants_selection_panel .c22dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c22fade, .consonants_selection_panel .c22fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c22fade:hover, .consonants_selection_panel .c22fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c22high, .consonants_selection_panel .c22high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c22high:hover, .consonants_selection_panel .c22high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c22_record_highlight, .consonants_selection_panel .c22_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c23btn, .consonants_panel .c23dis, .consonants_panel .c23fade, .consonants_panel .c23high, .consonants_panel .c23_record_highlight, .consonants_selection_panel .c23btn, .consonants_selection_panel .c23dis, .consonants_selection_panel .c23fade, .consonants_selection_panel .c23high, .consonants_selection_panel .c23_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 2.5rem);
    line-height: clamp(2rem, 11vw, 2.5rem) !important;
  }
  .consonants_panel .c23dis, .consonants_selection_panel .c23dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c23dis:hover, .consonants_selection_panel .c23dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c23fade, .consonants_selection_panel .c23fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c23fade:hover, .consonants_selection_panel .c23fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c23high, .consonants_selection_panel .c23high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c23high:hover, .consonants_selection_panel .c23high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c23_record_highlight, .consonants_selection_panel .c23_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
  .consonants_panel .c24btn, .consonants_panel .c24dis, .consonants_panel .c24fade, .consonants_panel .c24high, .consonants_panel .c24_record_highlight, .consonants_selection_panel .c24btn, .consonants_selection_panel .c24dis, .consonants_selection_panel .c24fade, .consonants_selection_panel .c24high, .consonants_selection_panel .c24_record_highlight {
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 2.5rem);
    line-height: clamp(2rem, 11vw, 2.5rem) !important;
  }
  .consonants_panel .c24dis, .consonants_selection_panel .c24dis {
    color: #fafafa;
    background-color: #fafafa;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c24dis:hover, .consonants_selection_panel .c24dis:hover {
    color: #fafafa;
    background-color: #fafafa;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c24fade, .consonants_selection_panel .c24fade {
    color: #6ec0f9;
    background-color: white;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c24fade:hover, .consonants_selection_panel .c24fade:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c24high, .consonants_selection_panel .c24high {
    color: white;
    background-color: green;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (hover: hover) {
  .consonants_panel .c24high:hover, .consonants_selection_panel .c24high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants_panel .c24_record_highlight, .consonants_selection_panel .c24_record_highlight {
    color: white;
    background-color: #0089e8;
    cursor: default !important;
  }
}
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.eac_report.consonants {
  display: grid;
  place-content: center;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  grid-template-areas: "report-header-cons report-header-cons" "grid-cons grid-cons" "overall-cons game-buttons-cons" "account-buttons-cons account-buttons-cons";
  grid-row-gap: 25px;
  grid-column-gap: 25px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 1.25em;
  color: #0089e8;
  margin: 0 25px;
}
.eac_report.consonants .eac_report_extra_header {
  grid-area: report-header-cons;
  margin: 0 0 5px 0;
}
.eac_report.consonants #c_grid_report {
  display: grid;
  grid-area: grid-cons;
  grid-template-columns: repeat(14, 38px);
  grid-template-rows: repeat(4, 80px);
  grid-gap: 4px;
  font-size: 1.75em;
  align-self: start;
  justify-self: center;
}
.eac_report.consonants #c_grid_report .report_white, .eac_report.consonants #c_grid_report .report_blue, .eac_report.consonants #c_grid_report .report_green, .eac_report.consonants #c_grid_report .report_yellow, .eac_report.consonants #c_grid_report .report_red {
  width: 100%;
  grid-template-rows: 54% 38%;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 2.25rem;
}
.eac_report.consonants #c_grid_report .report_white:before, .eac_report.consonants #c_grid_report .report_blue:before, .eac_report.consonants #c_grid_report .report_green:before, .eac_report.consonants #c_grid_report .report_yellow:before, .eac_report.consonants #c_grid_report .report_red:before {
  line-height: 1.5 !important;
  height: 100%;
  justify-self: center;
}
.eac_report.consonants #c_grid_report .percentage {
  grid-area: percent;
  align-self: start;
  display: block;
  clear: both;
  color: white;
  text-align: center;
  font-size: clamp(0.25rem, 3.3vw, 21px);
  margin: clamp(4px, 0.5vw, 7px);
  line-height: clamp(0.25rem, 3.4vw, 2rem);
  margin-top: clamp(0.4rem, 0.7vw, 2rem);
  align-self: center;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
}
.eac_report.consonants .overall_cons {
  display: grid;
  grid-area: overall-cons;
  place-content: start;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  grid-template-rows: auto auto 125px auto auto auto;
  grid-template-areas: "average-label average-score" "timer-label timer-container" "legend legend" "advice advice" "retry retry" "get-pdf get-pdf";
  grid-column-gap: 25px;
  width: 100%;
  justify-content: center;
  justify-self: center;
  padding: 0 0 0 25px;
}
.eac_report.consonants .overall_cons .average_label {
  grid-area: average-label;
}
.eac_report.consonants .overall_cons .average_score {
  grid-area: average-score;
}
.eac_report.consonants .overall_cons .timer_label {
  grid-area: timer-label;
}
.eac_report.consonants .overall_cons .timer_container {
  grid-area: timer-container;
}
.eac_report.consonants .overall_cons .legend {
  grid-area: legend;
  display: grid;
  grid-template-columns: 15% 85%;
  grid-row-gap: 0.2rem;
  align-items: center;
  margin: 1.5rem 0 0;
}
.eac_report.consonants .overall_cons .legend_mastered {
  grid-area: lm;
}
.eac_report.consonants .overall_cons .legend_satisfact {
  grid-area: ls;
}
.eac_report.consonants .overall_cons .legend_needs_practice {
  grid-area: lnp;
}
.eac_report.consonants .overall_cons .legend_mastered, .eac_report.consonants .overall_cons .legend_satisfact, .eac_report.consonants .overall_cons .legend_needs_practice {
  align-items: center;
  text-align: left;
  padding-right: 1em;
}
.eac_report.consonants .overall_cons .legend_mastered p, .eac_report.consonants .overall_cons .legend_mastered div, .eac_report.consonants .overall_cons .legend_satisfact p, .eac_report.consonants .overall_cons .legend_satisfact div, .eac_report.consonants .overall_cons .legend_needs_practice p, .eac_report.consonants .overall_cons .legend_needs_practice div {
  float: left;
}
.eac_report.consonants .overall_cons .mclr, .eac_report.consonants .overall_cons .sclr, .eac_report.consonants .overall_cons .nmpclr {
  width: 25px;
  height: 25px;
  margin: 0 1em 0 0;
  border-radius: 3px;
}
.eac_report.consonants .overall_cons .mclr {
  background-color: #4ead1f;
}
.eac_report.consonants .overall_cons .sclr {
  background-color: #f1c122;
}
.eac_report.consonants .overall_cons .nmpclr {
  background-color: red;
}
.eac_report.consonants .game-buttons {
  grid-area: game-buttons-cons;
  display: flex;
  flex-direction: column;
}
.eac_report.consonants .account-buttons {
  grid-area: account-buttons-cons;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto;
  grid-column-gap: 25px;
}
.eac_report.consonants .recc_popup_click {
  grid-area: advice-btn-cons;
}
.eac_report.consonants .recc {
  background-color: white;
  opacity: 0.97;
  grid-area: 1/1/span 3/span 2;
}
.eac_report.consonants .retryButton {
  grid-area: retry-btn-cons;
}
.eac_report.consonants .get_pdf {
  grid-area: pdf-btn-cons;
}

#cons1Div {
  color: white;
  line-height: 0.8em;
  font-size: 40px;
  grid-area: symbol;
  align-self: center;
  max-width: 80px;
  max-height: 80px;
  width: 80px;
  height: 80px;
  grid-row: 1/2;
  grid-column: 2/4;
}
#cons1Div:before {
  line-height: 1.1em;
}
#cons1Div:before {
  content: "p";
}

#cons2Div {
  color: white;
  line-height: 0.8em;
  font-size: 40px;
  grid-area: symbol;
  align-self: center;
  max-width: 80px;
  max-height: 80px;
  width: 80px;
  height: 80px;
  grid-row: 1/2;
  grid-column: 4/6;
}
#cons2Div:before {
  line-height: 1.1em;
}
#cons2Div:before {
  content: "b";
}

#cons3Div {
  color: white;
  line-height: 0.8em;
  font-size: 40px;
  grid-area: symbol;
  align-self: center;
  max-width: 80px;
  max-height: 80px;
  width: 80px;
  height: 80px;
  grid-row: 1/2;
  grid-column: 6/8;
}
#cons3Div:before {
  line-height: 1.1em;
}
#cons3Div:before {
  content: "t";
}

#cons4Div {
  color: white;
  line-height: 0.8em;
  font-size: 40px;
  grid-area: symbol;
  align-self: center;
  max-width: 80px;
  max-height: 80px;
  width: 80px;
  height: 80px;
  grid-row: 1/2;
  grid-column: 8/10;
}
#cons4Div:before {
  line-height: 1.1em;
}
#cons4Div:before {
  content: "d";
}

#cons5Div {
  color: white;
  line-height: 0.8em;
  font-size: 40px;
  grid-area: symbol;
  align-self: center;
  max-width: 80px;
  max-height: 80px;
  width: 80px;
  height: 80px;
  grid-row: 1/2;
  grid-column: 10/12;
}
#cons5Div:before {
  line-height: 1.1em;
}
#cons5Div:before {
  content: "k";
}

#cons6Div {
  color: white;
  line-height: 0.8em;
  font-size: 40px;
  grid-area: symbol;
  align-self: center;
  max-width: 80px;
  max-height: 80px;
  width: 80px;
  height: 80px;
  grid-row: 1/2;
  grid-column: 12/14;
}
#cons6Div:before {
  line-height: 1.1em;
}
#cons6Div:before {
  content: "g";
}

#cons7Div {
  color: white;
  line-height: 0.8em;
  font-size: 40px;
  grid-area: symbol;
  align-self: center;
  max-width: 80px;
  max-height: 80px;
  width: 80px;
  height: 80px;
  grid-row: 2/3;
  grid-column: 1/3;
}
#cons7Div:before {
  line-height: 1.1em;
}
#cons7Div:before {
  content: "f";
}

#cons8Div {
  color: white;
  line-height: 0.8em;
  font-size: 40px;
  grid-area: symbol;
  align-self: center;
  max-width: 80px;
  max-height: 80px;
  width: 80px;
  height: 80px;
  grid-row: 2/3;
  grid-column: 3/5;
}
#cons8Div:before {
  line-height: 1.1em;
}
#cons8Div:before {
  content: "v";
}

#cons9Div {
  color: white;
  line-height: 0.8em;
  font-size: 40px;
  grid-area: symbol;
  align-self: center;
  max-width: 80px;
  max-height: 80px;
  width: 80px;
  height: 80px;
  grid-row: 2/3;
  grid-column: 13/15;
}
#cons9Div:before {
  line-height: 1.1em;
}
#cons9Div:before {
  content: "h";
}

#cons10Div {
  color: white;
  line-height: 0.8em;
  font-size: 40px;
  grid-area: symbol;
  align-self: center;
  max-width: 80px;
  max-height: 80px;
  width: 80px;
  height: 80px;
  grid-row: 2/3;
  grid-column: 5/7;
}
#cons10Div:before {
  line-height: 1.1em;
}
#cons10Div:before {
  content: "θ";
}

#cons11Div {
  color: white;
  line-height: 0.8em;
  font-size: 40px;
  grid-area: symbol;
  align-self: center;
  max-width: 80px;
  max-height: 80px;
  width: 80px;
  height: 80px;
  grid-row: 2/3;
  grid-column: 7/9;
}
#cons11Div:before {
  line-height: 1.1em;
}
#cons11Div:before {
  content: "ð";
}

#cons12Div {
  color: white;
  line-height: 0.8em;
  font-size: 40px;
  grid-area: symbol;
  align-self: center;
  max-width: 80px;
  max-height: 80px;
  width: 80px;
  height: 80px;
  grid-row: 2/3;
  grid-column: 9/11;
}
#cons12Div:before {
  line-height: 1.1em;
}
#cons12Div:before {
  content: "s";
}

#cons13Div {
  color: white;
  line-height: 0.8em;
  font-size: 40px;
  grid-area: symbol;
  align-self: center;
  max-width: 80px;
  max-height: 80px;
  width: 80px;
  height: 80px;
  grid-row: 2/3;
  grid-column: 11/13;
}
#cons13Div:before {
  line-height: 1.1em;
}
#cons13Div:before {
  content: "z";
}

#cons14Div {
  color: white;
  line-height: 0.8em;
  font-size: 40px;
  grid-area: symbol;
  align-self: center;
  max-width: 80px;
  max-height: 80px;
  width: 80px;
  height: 80px;
  grid-row: 3/4;
  grid-column: 7/9;
}
#cons14Div:before {
  line-height: 1.1em;
}
#cons14Div:before {
  content: "ʃ";
}

#cons15Div {
  color: white;
  line-height: 0.8em;
  font-size: 40px;
  grid-area: symbol;
  align-self: center;
  max-width: 80px;
  max-height: 80px;
  width: 80px;
  height: 80px;
  grid-row: 3/4;
  grid-column: 9/11;
}
#cons15Div:before {
  line-height: 1.1em;
}
#cons15Div:before {
  content: "ʒ";
}

#cons16Div {
  color: white;
  line-height: 0.8em;
  font-size: 40px;
  grid-area: symbol;
  align-self: center;
  max-width: 80px;
  max-height: 80px;
  width: 80px;
  height: 80px;
  grid-row: 4/5;
  grid-column: 10/12;
}
#cons16Div:before {
  line-height: 1.1em;
}
#cons16Div:before {
  content: "r";
}

#cons17Div {
  color: white;
  line-height: 0.8em;
  font-size: 40px;
  grid-area: symbol;
  align-self: center;
  max-width: 80px;
  max-height: 80px;
  width: 80px;
  height: 80px;
  grid-row: 4/5;
  grid-column: 8/10;
}
#cons17Div:before {
  line-height: 1.1em;
}
#cons17Div:before {
  content: "l";
}

#cons18Div {
  color: white;
  line-height: 0.8em;
  font-size: 40px;
  grid-area: symbol;
  align-self: center;
  max-width: 80px;
  max-height: 80px;
  width: 80px;
  height: 80px;
  grid-row: 4/5;
  grid-column: 6/8;
}
#cons18Div:before {
  line-height: 1.1em;
}
#cons18Div:before {
  content: "j";
}

#cons19Div {
  color: white;
  line-height: 0.8em;
  font-size: 40px;
  grid-area: symbol;
  align-self: center;
  max-width: 80px;
  max-height: 80px;
  width: 80px;
  height: 80px;
  grid-row: 4/5;
  grid-column: 4/6;
}
#cons19Div:before {
  line-height: 1.1em;
}
#cons19Div:before {
  content: "w";
}

#cons20Div {
  color: white;
  line-height: 0.8em;
  font-size: 40px;
  grid-area: symbol;
  align-self: center;
  max-width: 80px;
  max-height: 80px;
  width: 80px;
  height: 80px;
  grid-row: 3/4;
  grid-column: 3/5;
}
#cons20Div:before {
  line-height: 1.1em;
}
#cons20Div:before {
  content: "n";
}

#cons21Div {
  color: white;
  line-height: 0.8em;
  font-size: 40px;
  grid-area: symbol;
  align-self: center;
  max-width: 80px;
  max-height: 80px;
  width: 80px;
  height: 80px;
  grid-row: 3/4;
  grid-column: 1/3;
}
#cons21Div:before {
  line-height: 1.1em;
}
#cons21Div:before {
  content: "m";
}

#cons22Div {
  color: white;
  line-height: 0.8em;
  font-size: 40px;
  grid-area: symbol;
  align-self: center;
  max-width: 80px;
  max-height: 80px;
  width: 80px;
  height: 80px;
  grid-row: 3/4;
  grid-column: 5/7;
}
#cons22Div:before {
  line-height: 1.1em;
}
#cons22Div:before {
  content: "ŋ";
}

#cons23Div {
  color: white;
  line-height: 0.8em;
  font-size: 40px;
  grid-area: symbol;
  align-self: center;
  max-width: 80px;
  max-height: 80px;
  width: 80px;
  height: 80px;
  grid-row: 3/4;
  grid-column: 13/15;
}
#cons23Div:before {
  line-height: 1.1em;
}
#cons23Div:before {
  content: "ʤ";
}

#cons24Div {
  color: white;
  line-height: 0.8em;
  font-size: 40px;
  grid-area: symbol;
  align-self: center;
  max-width: 80px;
  max-height: 80px;
  width: 80px;
  height: 80px;
  grid-row: 3/4;
  grid-column: 11/13;
}
#cons24Div:before {
  line-height: 1.1em;
}
#cons24Div:before {
  content: "ʧ";
}

@media screen and (max-width: 767px) {
  .eac_report.consonants {
    display: grid;
    place-content: center;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(5, auto);
    grid-template-areas: "report-header-cons" "grid-cons" "overall-cons" "game-buttons-cons" "account-buttons-cons";
    grid-row-gap: 25px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 1.25em;
    color: #0089e8;
    margin: 0 25px;
  }
  .eac_report.consonants .overall_cons {
    grid-template-rows: auto auto 145px auto auto auto;
  }
  .eac_report.consonants .recc_popup_click, .eac_report.consonants .retryButton, .eac_report.consonants .get_pdf {
    justify-self: center;
    margin: 5px 0;
    font-size: clamp(1.5em, 3.5vw, 1.75em);
  }
  .eac_report.consonants .eac_report_extra_header {
    width: 100%;
  }
  .eac_report.consonants #c_grid_report {
    display: grid;
    grid-area: grid-cons;
    grid-template-columns: repeat(14, minmax(0, 38px));
    grid-template-rows: repeat(4, minmax(0, 80px));
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    font-size: 1.75em;
    align-self: start;
    justify-self: center;
  }
  .eac_report.consonants #c_grid_report .report_white, .eac_report.consonants #c_grid_report .report_blue, .eac_report.consonants #c_grid_report .report_green, .eac_report.consonants #c_grid_report .report_yellow, .eac_report.consonants #c_grid_report .report_red {
    width: 100%;
  }
  .eac_report.consonants #c_grid_report .report_white:before, .eac_report.consonants #c_grid_report .report_blue:before, .eac_report.consonants #c_grid_report .report_green:before, .eac_report.consonants #c_grid_report .report_yellow:before, .eac_report.consonants #c_grid_report .report_red:before {
    align-self: center;
  }
  .eac_report.consonants .percentage {
    grid-area: percent;
    align-self: start;
    display: block;
    clear: both;
    color: white;
    text-align: center;
    font-size: clamp(0.25rem, 3.5vw, 21px);
    margin: clamp(4px, 0.5vw, 7px);
    line-height: clamp(0.25rem, 3.4vw, 2rem);
    margin-top: clamp(0.4rem, 0.7vw, 2rem);
  }
  .eac_report.consonants .overall_cons {
    grid-template-areas: "average-label average-score" "timer-label timer-container" "legend legend" "advice advice" "retry retry" "get-pdf get-pdf";
    max-width: 606px;
    padding: 0;
  }
  .eac_report.consonants .game-buttons {
    align-items: center;
  }
  .eac_report.consonants .account-buttons {
    grid-template-columns: minmax(0, 1fr);
    grid-row-gap: 10px;
    margin-top: -15px;
    margin-bottom: 12px;
  }
  .eac_report.consonants .account-buttons a#daft_track_progress, .eac_report.consonants .account-buttons a#daft_reportcards {
    margin: 0;
    justify-self: center;
    max-width: 606px;
    width: 100%;
  }
}
@media screen and (max-width: 479px) {
  .eac_report.consonants {
    margin: 0;
  }
  .eac_report.consonants .overall_cons .legend {
    margin: 1.25rem 0 0;
  }
}
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.cons_select_table {
  display: grid;
  align-content: start;
  justify-content: center;
  grid-template-columns: 47.5% 47.5%;
  grid-template-rows: repeat(5, auto);
  grid-column-gap: 5%;
  margin: 0 9%;
  padding: 0.5em 1em;
}

#level_select_cons_desc {
  grid-row: 2;
  align-self: center;
  display: block;
  font-size: 1.75em;
  margin-bottom: 0;
  padding-top: 4px;
}
#level_select_cons_desc > div.visible {
  display: flex !important;
  flex-wrap: wrap;
  -moz-column-gap: 0.3em;
       column-gap: 0.3em;
  row-gap: 0.3em;
  width: 100%;
  margin: 0 auto;
  max-width: 606px;
}
#level_select_cons_desc > div.visible p {
  align-self: center;
  margin-top: -0.13em;
  font-size: 21px;
  font-weight: 600;
}

#cons_s_contain {
  max-width: 606px;
  margin: 5px auto;
  display: flex !important;
  flex-wrap: wrap;
  -moz-column-gap: 0.55em;
       column-gap: 0.55em;
  row-gap: 0.55em;
  width: 100%;
  margin: 0 auto;
  max-width: 606px;
}
#cons_s_contain > .cons_s {
  font-size: 1.75em;
  color: white;
}
#cons_s_contain > .cons_s.cons_s_other {
  font-size: 21px;
  color: #0089e8;
}

@supports (-webkit-touch-callout: none) {
  #cons_s_contain {
    -moz-column-gap: 0.3em;
         column-gap: 0.3em;
    row-gap: 0.3em;
  }
}
@media screen and (max-width: 991px) {
  .cons_select_table {
    grid-template-columns: 100%;
    grid-template-rows: 1fr;
    grid-column-gap: 0;
    margin: 0;
  }
  #level_select_cons_desc {
    grid-column-start: auto;
    grid-column-end: auto;
    grid-row-start: auto;
    grid-row-end: auto;
    margin-top: 0;
    margin-bottom: 25px;
  }
  #level_select_cons_desc {
    grid-row-start: auto;
    grid-row-end: auto;
  }
}
@media screen and (max-width: 479px) {
  .cons_select_table {
    padding: 0;
  }
}
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
#pnl_echo_game {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "echo-controls echo-gameboard";
  grid-gap: 25px;
  width: 100%;
  padding: 5px 25px;
}

#echo_controls.controls {
  grid-area: echo-controls;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "echo-score echo-score" "echo-sequence echo-sequence" "echo-new echo-timer" "echo-restart echo-timer";
  grid-gap: 10px;
}
#echo_controls.controls .echo-score, #echo_controls.controls .echo-sequence, #echo_controls.controls .echo-timer {
  width: 100%;
  background-color: #EEE;
  margin: 0;
  padding: 20px;
  border-radius: 5px;
  color: #000;
  font-size: 2rem;
}
#echo_controls.controls .echo-score, #echo_controls.controls .echo-sequence {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
#echo_controls.controls .echo-score {
  grid-area: echo-score;
}
#echo_controls.controls .echo-score #echo_score_left {
  justify-self: left;
}
#echo_controls.controls .echo-score #lbl_score {
  justify-self: right;
}
#echo_controls.controls .echo-sequence {
  grid-area: echo-sequence;
}
#echo_controls.controls .echo-sequence #echo_sequence_left {
  justify-self: left;
}
#echo_controls.controls .echo-sequence #lbl_sequence {
  justify-self: right;
}
#echo_controls.controls .echo-new, #echo_controls.controls .echo-restart {
  height: 100%;
  margin: 0;
}
#echo_controls.controls .echo-new {
  grid-area: echo-new;
}
#echo_controls.controls .echo-restart {
  grid-area: echo-restart;
}
#echo_controls.controls .echo-start {
  grid-area: 4/1/5/2;
  background-color: #4ead1f;
  height: 100%;
  margin: 0;
}
#echo_controls.controls .echo-start:hover {
  background-color: #58c323;
}
#echo_controls.controls .echo-timer {
  grid-area: echo-timer;
  display: grid;
  align-items: center;
  justify-content: center;
}

#echo_board {
  display: grid;
  align-content: center;
  justify-content: center;
}
#echo_board .echo-gameboard {
  grid-area: echo-gameboard;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-gap: 40px;
  width: 340px;
  background-image: url(../images/echo_logo.svg);
  background-repeat: no-repeat;
  background-position: 120px 121px;
  background-size: 29%;
  aspect-ratio: 1;
}

.echo_b1_dim, .echo_b2_dim, .echo_b3_dim, .echo_b4_dim, .echo_b1_lit, .echo_b2_lit, .echo_b3_lit, .echo_b4_lit {
  display: grid;
  align-items: center;
  justify-content: center;
  background: url(../images/echo_game_sprite.svg);
  background-size: 150px 1235px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-color: transparent;
}

.echo_b1_lit {
  width: 150px;
  height: 150px;
  background-size: cover;
  aspect-ratio: 1;
  background-position: 0 0;
}
.echo_b1_lit:hover {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: none;
}

.echo_b2_lit {
  width: 150px;
  height: 150px;
  background-size: cover;
  aspect-ratio: 1;
  background-position: 0 -155px;
}
.echo_b2_lit:hover {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: none;
}

.echo_b3_lit {
  width: 150px;
  height: 150px;
  background-size: cover;
  aspect-ratio: 1;
  background-position: 0 -310px;
}
.echo_b3_lit:hover {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: none;
}

.echo_b4_lit {
  width: 150px;
  height: 150px;
  background-size: cover;
  aspect-ratio: 1;
  background-position: 0 -465px;
}
.echo_b4_lit:hover {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: none;
}

.echo_b1_dim {
  width: 150px;
  height: 150px;
  background-size: 100%;
  aspect-ratio: 1;
  background-position: 0 -620px;
}
.echo_b1_dim:hover {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: none;
}

.echo_b2_dim {
  width: 150px;
  height: 150px;
  background-size: 100%;
  aspect-ratio: 1;
  background-position: 0 -775px;
}
.echo_b2_dim:hover {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: none;
}

.echo_b3_dim {
  width: 150px;
  height: 150px;
  background-size: 100%;
  aspect-ratio: 1;
  background-position: 0 -930px;
}
.echo_b3_dim:hover {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: none;
}

.echo_b4_dim {
  width: 150px;
  height: 150px;
  background-size: 100%;
  aspect-ratio: 1;
  background-position: 0 -1085px;
}
.echo_b4_dim:hover {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: none;
}

/* Vowel Symbols */
.echo_symbol_v1 {
  background: none;
  width: 150px;
  height: 150px;
  margin: 0 !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.echo_symbol_v1:hover {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.echo_symbol_v1:before {
  font-size: 62px;
  font: 900 3.25rem "CharisSILW", "Times New Roman";
  color: white;
  line-height: 20px;
}
.echo_symbol_v1:before {
  content: "i";
}

.echo_symbol_v2 {
  background: none;
  width: 150px;
  height: 150px;
  margin: 0 !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.echo_symbol_v2:hover {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.echo_symbol_v2:before {
  font-size: 62px;
  font: 900 3.25rem "CharisSILW", "Times New Roman";
  color: white;
  line-height: 20px;
}
.echo_symbol_v2:before {
  content: "ɪ";
}

.echo_symbol_v3 {
  background: none;
  width: 150px;
  height: 150px;
  margin: 0 !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.echo_symbol_v3:hover {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.echo_symbol_v3:before {
  font-size: 62px;
  font: 900 3.25rem "CharisSILW", "Times New Roman";
  color: white;
  line-height: 20px;
}
.echo_symbol_v3:before {
  content: "e";
}

.echo_symbol_v4 {
  background: none;
  width: 150px;
  height: 150px;
  margin: 0 !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.echo_symbol_v4:hover {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.echo_symbol_v4:before {
  font-size: 62px;
  font: 900 3.25rem "CharisSILW", "Times New Roman";
  color: white;
  line-height: 20px;
}
.echo_symbol_v4:before {
  content: "ɛ";
}

.echo_symbol_v5 {
  background: none;
  width: 150px;
  height: 150px;
  margin: 0 !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.echo_symbol_v5:hover {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.echo_symbol_v5:before {
  font-size: 62px;
  font: 900 3.25rem "CharisSILW", "Times New Roman";
  color: white;
  line-height: 20px;
}
.echo_symbol_v5:before {
  content: "æ";
}

.echo_symbol_v6 {
  background: none;
  width: 150px;
  height: 150px;
  margin: 0 !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.echo_symbol_v6:hover {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.echo_symbol_v6:before {
  font-size: 62px;
  font: 900 3.25rem "CharisSILW", "Times New Roman";
  color: white;
  line-height: 20px;
}
.echo_symbol_v6:before {
  content: "ɑ";
}

.echo_symbol_v7 {
  background: none;
  width: 150px;
  height: 150px;
  margin: 0 !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.echo_symbol_v7:hover {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.echo_symbol_v7:before {
  font-size: 62px;
  font: 900 3.25rem "CharisSILW", "Times New Roman";
  color: white;
  line-height: 20px;
}
.echo_symbol_v7:before {
  content: "Ʌ";
  font-size: 2.75rem;
  line-height: 52px;
}

.echo_symbol_v8 {
  background: none;
  width: 150px;
  height: 150px;
  margin: 0 !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.echo_symbol_v8:hover {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.echo_symbol_v8:before {
  font-size: 62px;
  font: 900 3.25rem "CharisSILW", "Times New Roman";
  color: white;
  line-height: 20px;
}
.echo_symbol_v8:before {
  content: "o";
}

.echo_symbol_v9 {
  background: none;
  width: 150px;
  height: 150px;
  margin: 0 !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.echo_symbol_v9:hover {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.echo_symbol_v9:before {
  font-size: 62px;
  font: 900 3.25rem "CharisSILW", "Times New Roman";
  color: white;
  line-height: 20px;
}
.echo_symbol_v9:before {
  content: "ʊ";
}

.echo_symbol_v10 {
  background: none;
  width: 150px;
  height: 150px;
  margin: 0 !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.echo_symbol_v10:hover {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.echo_symbol_v10:before {
  font-size: 62px;
  font: 900 3.25rem "CharisSILW", "Times New Roman";
  color: white;
  line-height: 20px;
}
.echo_symbol_v10:before {
  content: "u";
}

/* Consonant Symbols */
.echo_symbol_c1 {
  background: none;
  width: 150px;
  height: 150px;
  margin: 0 !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  grid-row: 1/2;
  grid-column: 2/4;
}
.echo_symbol_c1:hover {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.echo_symbol_c1:before {
  font-size: 62px;
  font: 900 3.25rem "CharisSILW", "Times New Roman";
  color: white;
  line-height: 20px;
}
.echo_symbol_c1:before {
  content: "p";
}

.echo_symbol_c2 {
  background: none;
  width: 150px;
  height: 150px;
  margin: 0 !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  grid-row: 1/2;
  grid-column: 4/6;
}
.echo_symbol_c2:hover {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.echo_symbol_c2:before {
  font-size: 62px;
  font: 900 3.25rem "CharisSILW", "Times New Roman";
  color: white;
  line-height: 20px;
}
.echo_symbol_c2:before {
  content: "b";
}

.echo_symbol_c3 {
  background: none;
  width: 150px;
  height: 150px;
  margin: 0 !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  grid-row: 1/2;
  grid-column: 6/8;
}
.echo_symbol_c3:hover {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.echo_symbol_c3:before {
  font-size: 62px;
  font: 900 3.25rem "CharisSILW", "Times New Roman";
  color: white;
  line-height: 20px;
}
.echo_symbol_c3:before {
  content: "t";
}

.echo_symbol_c4 {
  background: none;
  width: 150px;
  height: 150px;
  margin: 0 !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  grid-row: 1/2;
  grid-column: 8/10;
}
.echo_symbol_c4:hover {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.echo_symbol_c4:before {
  font-size: 62px;
  font: 900 3.25rem "CharisSILW", "Times New Roman";
  color: white;
  line-height: 20px;
}
.echo_symbol_c4:before {
  content: "d";
}

.echo_symbol_c5 {
  background: none;
  width: 150px;
  height: 150px;
  margin: 0 !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  grid-row: 1/2;
  grid-column: 10/12;
}
.echo_symbol_c5:hover {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.echo_symbol_c5:before {
  font-size: 62px;
  font: 900 3.25rem "CharisSILW", "Times New Roman";
  color: white;
  line-height: 20px;
}
.echo_symbol_c5:before {
  content: "k";
}

.echo_symbol_c6 {
  background: none;
  width: 150px;
  height: 150px;
  margin: 0 !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  grid-row: 1/2;
  grid-column: 12/14;
}
.echo_symbol_c6:hover {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.echo_symbol_c6:before {
  font-size: 62px;
  font: 900 3.25rem "CharisSILW", "Times New Roman";
  color: white;
  line-height: 20px;
}
.echo_symbol_c6:before {
  content: "g";
}

.echo_symbol_c7 {
  background: none;
  width: 150px;
  height: 150px;
  margin: 0 !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  grid-row: 2/3;
  grid-column: 1/3;
}
.echo_symbol_c7:hover {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.echo_symbol_c7:before {
  font-size: 62px;
  font: 900 3.25rem "CharisSILW", "Times New Roman";
  color: white;
  line-height: 20px;
}
.echo_symbol_c7:before {
  content: "f";
}

.echo_symbol_c8 {
  background: none;
  width: 150px;
  height: 150px;
  margin: 0 !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  grid-row: 2/3;
  grid-column: 3/5;
}
.echo_symbol_c8:hover {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.echo_symbol_c8:before {
  font-size: 62px;
  font: 900 3.25rem "CharisSILW", "Times New Roman";
  color: white;
  line-height: 20px;
}
.echo_symbol_c8:before {
  content: "v";
}

.echo_symbol_c9 {
  background: none;
  width: 150px;
  height: 150px;
  margin: 0 !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  grid-row: 2/3;
  grid-column: 13/15;
}
.echo_symbol_c9:hover {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.echo_symbol_c9:before {
  font-size: 62px;
  font: 900 3.25rem "CharisSILW", "Times New Roman";
  color: white;
  line-height: 20px;
}
.echo_symbol_c9:before {
  content: "h";
}

.echo_symbol_c10 {
  background: none;
  width: 150px;
  height: 150px;
  margin: 0 !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  grid-row: 2/3;
  grid-column: 5/7;
}
.echo_symbol_c10:hover {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.echo_symbol_c10:before {
  font-size: 62px;
  font: 900 3.25rem "CharisSILW", "Times New Roman";
  color: white;
  line-height: 20px;
}
.echo_symbol_c10:before {
  content: "ϴ";
}

.echo_symbol_c11 {
  background: none;
  width: 150px;
  height: 150px;
  margin: 0 !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  grid-row: 2/3;
  grid-column: 7/9;
}
.echo_symbol_c11:hover {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.echo_symbol_c11:before {
  font-size: 62px;
  font: 900 3.25rem "CharisSILW", "Times New Roman";
  color: white;
  line-height: 20px;
}
.echo_symbol_c11:before {
  content: "ð";
}

.echo_symbol_c12 {
  background: none;
  width: 150px;
  height: 150px;
  margin: 0 !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  grid-row: 2/3;
  grid-column: 9/11;
}
.echo_symbol_c12:hover {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.echo_symbol_c12:before {
  font-size: 62px;
  font: 900 3.25rem "CharisSILW", "Times New Roman";
  color: white;
  line-height: 20px;
}
.echo_symbol_c12:before {
  content: "s";
}

.echo_symbol_c13 {
  background: none;
  width: 150px;
  height: 150px;
  margin: 0 !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  grid-row: 2/3;
  grid-column: 11/13;
}
.echo_symbol_c13:hover {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.echo_symbol_c13:before {
  font-size: 62px;
  font: 900 3.25rem "CharisSILW", "Times New Roman";
  color: white;
  line-height: 20px;
}
.echo_symbol_c13:before {
  content: "z";
}

.echo_symbol_c14 {
  background: none;
  width: 150px;
  height: 150px;
  margin: 0 !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  grid-row: 3/4;
  grid-column: 7/9;
}
.echo_symbol_c14:hover {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.echo_symbol_c14:before {
  font-size: 62px;
  font: 900 3.25rem "CharisSILW", "Times New Roman";
  color: white;
  line-height: 20px;
}
.echo_symbol_c14:before {
  content: "ʃ";
}

.echo_symbol_c15 {
  background: none;
  width: 150px;
  height: 150px;
  margin: 0 !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  grid-row: 3/4;
  grid-column: 9/11;
}
.echo_symbol_c15:hover {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.echo_symbol_c15:before {
  font-size: 62px;
  font: 900 3.25rem "CharisSILW", "Times New Roman";
  color: white;
  line-height: 20px;
}
.echo_symbol_c15:before {
  content: "ʒ";
}

.echo_symbol_c16 {
  background: none;
  width: 150px;
  height: 150px;
  margin: 0 !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  grid-row: 4/5;
  grid-column: 10/12;
}
.echo_symbol_c16:hover {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.echo_symbol_c16:before {
  font-size: 62px;
  font: 900 3.25rem "CharisSILW", "Times New Roman";
  color: white;
  line-height: 20px;
}
.echo_symbol_c16:before {
  content: "r";
}

.echo_symbol_c17 {
  background: none;
  width: 150px;
  height: 150px;
  margin: 0 !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  grid-row: 4/5;
  grid-column: 8/10;
}
.echo_symbol_c17:hover {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.echo_symbol_c17:before {
  font-size: 62px;
  font: 900 3.25rem "CharisSILW", "Times New Roman";
  color: white;
  line-height: 20px;
}
.echo_symbol_c17:before {
  content: "l";
}

.echo_symbol_c18 {
  background: none;
  width: 150px;
  height: 150px;
  margin: 0 !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  grid-row: 4/5;
  grid-column: 6/8;
}
.echo_symbol_c18:hover {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.echo_symbol_c18:before {
  font-size: 62px;
  font: 900 3.25rem "CharisSILW", "Times New Roman";
  color: white;
  line-height: 20px;
}
.echo_symbol_c18:before {
  content: "j";
}

.echo_symbol_c19 {
  background: none;
  width: 150px;
  height: 150px;
  margin: 0 !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  grid-row: 4/5;
  grid-column: 4/6;
}
.echo_symbol_c19:hover {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.echo_symbol_c19:before {
  font-size: 62px;
  font: 900 3.25rem "CharisSILW", "Times New Roman";
  color: white;
  line-height: 20px;
}
.echo_symbol_c19:before {
  content: "w";
}

.echo_symbol_c20 {
  background: none;
  width: 150px;
  height: 150px;
  margin: 0 !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  grid-row: 3/4;
  grid-column: 3/5;
}
.echo_symbol_c20:hover {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.echo_symbol_c20:before {
  font-size: 62px;
  font: 900 3.25rem "CharisSILW", "Times New Roman";
  color: white;
  line-height: 20px;
}
.echo_symbol_c20:before {
  content: "n";
}

.echo_symbol_c21 {
  background: none;
  width: 150px;
  height: 150px;
  margin: 0 !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  grid-row: 3/4;
  grid-column: 1/3;
}
.echo_symbol_c21:hover {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.echo_symbol_c21:before {
  font-size: 62px;
  font: 900 3.25rem "CharisSILW", "Times New Roman";
  color: white;
  line-height: 20px;
}
.echo_symbol_c21:before {
  content: "m";
}

.echo_symbol_c22 {
  background: none;
  width: 150px;
  height: 150px;
  margin: 0 !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  grid-row: 3/4;
  grid-column: 5/7;
}
.echo_symbol_c22:hover {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.echo_symbol_c22:before {
  font-size: 62px;
  font: 900 3.25rem "CharisSILW", "Times New Roman";
  color: white;
  line-height: 20px;
}
.echo_symbol_c22:before {
  content: "ŋ";
}

.echo_symbol_c23 {
  background: none;
  width: 150px;
  height: 150px;
  margin: 0 !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  grid-row: 3/4;
  grid-column: 13/15;
}
.echo_symbol_c23:hover {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.echo_symbol_c23:before {
  font-size: 62px;
  font: 900 3.25rem "CharisSILW", "Times New Roman";
  color: white;
  line-height: 20px;
}
.echo_symbol_c23:before {
  content: "ʤ";
}

.echo_symbol_c24 {
  background: none;
  width: 150px;
  height: 150px;
  margin: 0 !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  grid-row: 3/4;
  grid-column: 11/13;
}
.echo_symbol_c24:hover {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.echo_symbol_c24:before {
  font-size: 62px;
  font: 900 3.25rem "CharisSILW", "Times New Roman";
  color: white;
  line-height: 20px;
}
.echo_symbol_c24:before {
  content: "ʧ";
}

.ios-user-allow {
  display: none;
  width: 100%;
  margin: 0 25px;
  height: 49px;
  position: relative;
}

@media screen and (max-width: 767px) {
  #pnl_echo_game {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "echo-controls" "echo-gameboard";
    grid-gap: 25px;
    width: 100%;
    padding: 5px 25px;
  }
  #echo_controls.controls {
    grid-area: echo-controls;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "echo-score echo-score" "echo-sequence echo-sequence" "echo-new echo-timer" "echo-restart echo-timer";
    grid-gap: 10px;
  }
  #echo_controls.controls .echo-score, #echo_controls.controls .echo-sequence, #echo_controls.controls .echo-timer {
    width: 100%;
    background-color: #EEE;
    margin: 0;
    padding: 20px;
    border-radius: 5px;
    color: #000;
    font-size: 2rem;
  }
  #echo_controls.controls .echo-score, #echo_controls.controls .echo-sequence {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }
  #echo_controls.controls .echo-score {
    grid-area: echo-score;
  }
  #echo_controls.controls .echo-score #echo_score_left {
    justify-self: left;
  }
  #echo_controls.controls .echo-score #lbl_score {
    justify-self: right;
  }
  #echo_controls.controls .echo-sequence {
    grid-area: echo-sequence;
  }
  #echo_controls.controls .echo-sequence #echo_sequence_left {
    justify-self: left;
  }
  #echo_controls.controls .echo-sequence #lbl_sequence {
    justify-self: right;
  }
  #echo_controls.controls .echo-new, #echo_controls.controls .echo-restart {
    height: 100%;
    margin: 0;
  }
  #echo_controls.controls .echo-new {
    grid-area: echo-new;
  }
  #echo_controls.controls .echo-restart {
    grid-area: echo-restart;
  }
  #echo_controls.controls .echo-timer {
    grid-area: echo-timer;
    display: grid;
    align-items: center;
    justify-content: center;
  }
}
@media screen and (max-width: 479px) {
  #pnl_echo_game {
    grid-gap: 15px;
    padding: 0;
  }
}
@media screen and (max-width: 423px) {
  #pnl_echo_game {
    grid-gap: 0px;
  }
  .echo-gameboard {
    scale: 92%;
  }
}
@media screen and (max-width: 394px) {
  .echo-gameboard {
    scale: 91%;
  }
}
@media screen and (max-width: 344px) {
  .echo-gameboard {
    scale: 84%;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  #pnl_echo_game {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "echo-controls" "echo-gameboard";
    grid-gap: 25px;
    width: 100%;
    padding: 5px 18px 5px 10px;
  }
}
@media screen and (max-height: 394px) and (orientation: landscape) {
  #pnl_echo_game {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "echo-controls echo-gameboard";
    grid-gap: 25px;
    width: 100%;
    padding: 5px 18px 5px 10px;
  }
}
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
#selection.mcc .echo_colour_blue {
  background-color: #0078d1;
}
#selection.mcc .echo_colour_yellow {
  background-color: #eedb00;
}
#selection.mcc .echo_colour_green {
  background-color: #07ac12;
}
#selection.mcc .echo_colour_red {
  background-color: #f6000e;
}

.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
#eacContentInnerEcho {
  max-width: 1050px;
  border-radius: 5px;
}

.echo-report {
  display: grid;
  grid-template-rows: repeat(4, minmax(0, auto)) minmax(0, auto);
  grid-template-columns: minmax(0, auto);
  grid-template-areas: "game" "score" "time" "topscore" "erb";
  grid-row-gap: 10px;
  padding: 5px 25px;
  max-width: 606px;
}
.echo-report .echo-report-game, .echo-report .echo-report-score, .echo-report .echo-report-time, .echo-report .echo-new-topscore {
  width: 100%;
  max-width: 606px;
  background-color: #EEE;
  margin: 0;
  padding: 20px;
  border-radius: 5px;
  color: #000;
  font-size: 2rem;
  align-self: center;
  justify-self: center;
  text-align: center;
}
.echo-report .echo-report-game p, .echo-report .echo-report-game #disp_game, .echo-report .echo-report-score p, .echo-report .echo-report-score #disp_game, .echo-report .echo-report-time p, .echo-report .echo-report-time #disp_game, .echo-report .echo-new-topscore p, .echo-report .echo-new-topscore #disp_game {
  color: #000;
  padding-bottom: 5px;
}
.echo-report .echo-report-game {
  grid-area: game;
}
.echo-report .echo-report-score {
  grid-area: score;
}
.echo-report .echo-report-time {
  grid-area: time;
}
.echo-report .echo-new-topscore {
  grid-area: topscore;
  margin-bottom: 10px;
}
.echo-report .echo-report-buttons {
  grid-area: erb;
  display: grid;
  grid-template-rows: minmax(0, auto);
  grid-template-columns: repeat(3, minmax(0, auto));
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  width: 100%;
  justify-self: center;
}
.echo-report .echo-report-buttons .select {
  margin: 0 !important;
  padding: 0 1em;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 767px) {
  .echo-report {
    display: grid;
    grid-template-rows: repeat(5, minmax(0, auto));
    grid-template-columns: minmax(0, auto);
    grid-row-gap: 10px;
    padding: 5px 25px;
    width: 100%;
  }
  .echo-report .echo-report-buttons {
    grid-area: erb;
    display: grid;
    grid-template-rows: repeat(3, minmax(0, auto));
    grid-template-columns: minmax(0, auto);
    grid-row-gap: 10px;
    grid-column-gap: 25px;
    width: 100%;
    justify-self: center;
    margin-top: 10px;
  }
  .echo-report .echo-report-buttons .select {
    justify-self: center;
    margin: 0 !important;
  }
}
@media screen and (max-width: 479px) {
  .echo-report {
    padding: 0;
  }
}
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.echo.select_table {
  display: grid;
  align-content: start;
  justify-content: center;
  grid-template-columns: 47.5% 47.5%;
  grid-template-rows: repeat(7, auto);
  grid-column-gap: 5%;
  margin: 0 9%;
  padding: 0.5em 1em;
}
.echo.select_table .form-group-desc {
  min-height: 30px;
  align-self: center;
  font-size: 21px;
  font-weight: 600;
  margin: 10px 0 0 0;
}
.echo.select_table .form-group-desc.sound-desc {
  min-height: 49px;
  margin: 4px 0 25px;
  font-size: unset;
  display: flex;
  align-items: center;
}
.echo.select_table .form-group-desc.level-difficulty {
  font-size: 21px;
}
.echo.select_table #level_select_desc {
  grid-row: unset;
  font-size: 1.75em;
  display: flex;
  align-items: center;
  height: 100%;
  margin-bottom: 0;
  justify-content: center;
}
.echo.select_table #level_select_desc > div.visible {
  display: flex !important;
  flex-wrap: wrap;
  -moz-column-gap: 0.3em;
       column-gap: 0.3em;
  row-gap: 0.3em;
  width: 100%;
  margin: 0 auto;
  max-width: 606px;
}
.echo.select_table #level_select_desc > div.visible p {
  align-self: center;
  margin-top: -0.13em;
  font-size: 21px;
  font-weight: 600;
}
.echo.select_table .sound-desc #vowel_s_contain, .echo.select_table .sound-desc #cons_s_contain {
  margin: 2px auto 0;
}
.echo.select_table .sound-desc #vowel_s_contain .echo_colour_blue, .echo.select_table .sound-desc #cons_s_contain .echo_colour_blue {
  background-color: #0078d1;
}
.echo.select_table .sound-desc #vowel_s_contain .echo_colour_yellow, .echo.select_table .sound-desc #cons_s_contain .echo_colour_yellow {
  background-color: #eedb00;
}
.echo.select_table .sound-desc #vowel_s_contain .echo_colour_green, .echo.select_table .sound-desc #cons_s_contain .echo_colour_green {
  background-color: #07ac12;
}
.echo.select_table .sound-desc #vowel_s_contain .echo_colour_red, .echo.select_table .sound-desc #cons_s_contain .echo_colour_red {
  background-color: #f6000e;
}
.echo.select_table .sound-desc #vowel_s_contain .vowel_s_other, .echo.select_table .sound-desc #cons_s_contain .vowel_s_other {
  margin-top: -2px;
}
.echo.select_table .sound-desc #vowel_s_contain .cons_s_other, .echo.select_table .sound-desc #cons_s_contain .cons_s_other {
  margin-top: -4px;
}
.echo.select_table #cmd_select {
  grid-area: 6/1/7/span 2;
  margin-top: 25px;
}
.echo.select_table #lbl_warning {
  grid-area: 7/1/8/span 2;
  font-size: 1.75rem;
  color: red;
  margin: 0 0 5px 0;
}

.panel_btn_contain.echo {
  justify-content: center;
}
.panel_btn_contain.echo .panel_btn {
  width: 100%;
}

@media screen and (max-width: 991px) {
  .control-panel.echo {
    padding: 3px 25px;
  }
  .echo.select_table {
    display: grid;
    align-content: unset;
    justify-content: unset;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(12, auto);
    grid-row-gap: 25px;
    max-width: 606px;
    margin: 0 auto;
    padding: unset;
  }
  .echo.select_table #echo_desc_typeface {
    margin-bottom: 5px;
  }
  .echo.select_table .form-group, .echo.select_table .form-group-desc {
    margin: 0 auto;
  }
  .echo.select_table .form-group.difficulty, .echo.select_table .form-group-desc.difficulty {
    margin-top: 5px;
  }
  .echo.select_table #cmd_select {
    grid-area: unset;
    margin-top: 25px;
    margin-bottom: 0;
  }
  .echo.select_table #lbl_warning {
    grid-area: unset;
    font-size: 1.75rem;
    color: red;
  }
  .echo.select_table #level_select_desc {
    margin-top: 0;
    margin-bottom: 10px;
  }
  .echo.select_table #vowel-choose {
    margin-bottom: 0;
  }
  .echo.select_table .sound-desc #vowel_s_contain, .echo.select_table .sound-desc #cons_s_contain {
    margin: 0 auto;
  }
  .echo.select_table .sound-desc #vowel_s_contain .vowel_s_other, .echo.select_table .sound-desc #cons_s_contain .vowel_s_other {
    margin-top: -4px;
  }
  .echo.select_table .sound-desc #vowel_s_contain .cons_s_other, .echo.select_table .sound-desc #cons_s_contain .cons_s_other {
    margin-top: -4px;
  }
}
@media screen and (max-width: 479px) {
  .control-panel.echo {
    padding: 0;
  }
}
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.vowel_panel {
  display: grid;
  place-content: center;
  grid-template-columns: minmax(0, 60px) minmax(0, 60px) minmax(0, 60px) minmax(0, 60px) minmax(0, 60px);
  grid-template-rows: minmax(0, 60px) minmax(0, 60px) minmax(0, 60px) minmax(0, 60px) minmax(0, 60px);
  font-weight: bolder;
  color: #0089e8;
  gap: 4px;
  /* ----- Start of additional vowel symbol configurations ----- */
  /* ----------------------------------------------- */
  /* ------------------- Colours ------------------- */
  /* ----------------------------------------------- */
  /* ----------------------------------------------- */
  /* ------------------- Numbers ------------------- */
  /* ----------------------------------------------- */
  /* ------------------------------------------------- */
  /* ------------------- All Black ------------------- */
  /* ------------------------------------------------- */
  /* ----- End of additional vowel symbol configurations ----- */
  /* ----- Start of additional vowel symbol configurations ----- */
  /* ----------------------------------------------- */
  /* ------------------- Colours ------------------- */
  /* ----------------------------------------------- */
  /* ----------------------------------------------- */
  /* ------------------- Numbers ------------------- */
  /* ----------------------------------------------- */
  /* ------------------------------------------------- */
  /* ------------------- All Black ------------------- */
  /* ------------------------------------------------- */
  /* ----- End of additional vowel symbol configurations ----- */
  /* ----- Start of additional vowel symbol configurations ----- */
  /* ----------------------------------------------- */
  /* ------------------- Colours ------------------- */
  /* ----------------------------------------------- */
  /* ----------------------------------------------- */
  /* ------------------- Numbers ------------------- */
  /* ----------------------------------------------- */
  /* ------------------------------------------------- */
  /* ------------------- All Black ------------------- */
  /* ------------------------------------------------- */
  /* ----- End of additional vowel symbol configurations ----- */
  /* ----- Start of additional vowel symbol configurations ----- */
  /* ----------------------------------------------- */
  /* ------------------- Colours ------------------- */
  /* ----------------------------------------------- */
  /* ----------------------------------------------- */
  /* ------------------- Numbers ------------------- */
  /* ----------------------------------------------- */
  /* ------------------------------------------------- */
  /* ------------------- All Black ------------------- */
  /* ------------------------------------------------- */
  /* ----- End of additional vowel symbol configurations ----- */
  /* ----- Start of additional vowel symbol configurations ----- */
  /* ----------------------------------------------- */
  /* ------------------- Colours ------------------- */
  /* ----------------------------------------------- */
  /* ----------------------------------------------- */
  /* ------------------- Numbers ------------------- */
  /* ----------------------------------------------- */
  /* ------------------------------------------------- */
  /* ------------------- All Black ------------------- */
  /* ------------------------------------------------- */
  /* ----- End of additional vowel symbol configurations ----- */
  /* ----- Start of additional vowel symbol configurations ----- */
  /* ----------------------------------------------- */
  /* ------------------- Colours ------------------- */
  /* ----------------------------------------------- */
  /* ----------------------------------------------- */
  /* ------------------- Numbers ------------------- */
  /* ----------------------------------------------- */
  /* ------------------------------------------------- */
  /* ------------------- All Black ------------------- */
  /* ------------------------------------------------- */
  /* ----- End of additional vowel symbol configurations ----- */
  /* ----- Start of additional vowel symbol configurations ----- */
  /* ----------------------------------------------- */
  /* ------------------- Colours ------------------- */
  /* ----------------------------------------------- */
  /* ----------------------------------------------- */
  /* ------------------- Numbers ------------------- */
  /* ----------------------------------------------- */
  /* ------------------------------------------------- */
  /* ------------------- All Black ------------------- */
  /* ------------------------------------------------- */
  /* ----- End of additional vowel symbol configurations ----- */
  /* ----- Start of additional vowel symbol configurations ----- */
  /* ----------------------------------------------- */
  /* ------------------- Colours ------------------- */
  /* ----------------------------------------------- */
  /* ----------------------------------------------- */
  /* ------------------- Numbers ------------------- */
  /* ----------------------------------------------- */
  /* ------------------------------------------------- */
  /* ------------------- All Black ------------------- */
  /* ------------------------------------------------- */
  /* ----- End of additional vowel symbol configurations ----- */
  /* ----- Start of additional vowel symbol configurations ----- */
  /* ----------------------------------------------- */
  /* ------------------- Colours ------------------- */
  /* ----------------------------------------------- */
  /* ----------------------------------------------- */
  /* ------------------- Numbers ------------------- */
  /* ----------------------------------------------- */
  /* ------------------------------------------------- */
  /* ------------------- All Black ------------------- */
  /* ------------------------------------------------- */
  /* ----- End of additional vowel symbol configurations ----- */
  /* ----- Start of additional vowel symbol configurations ----- */
  /* ----------------------------------------------- */
  /* ------------------- Colours ------------------- */
  /* ----------------------------------------------- */
  /* ----------------------------------------------- */
  /* ------------------- Numbers ------------------- */
  /* ----------------------------------------------- */
  /* ------------------------------------------------- */
  /* ------------------- All Black ------------------- */
  /* ------------------------------------------------- */
  /* ----- End of additional vowel symbol configurations ----- */
  /*.v1btn, .v7btn, .v1dis, .v7dis, .v1high, .v7high {
      padding: 1px 0 0 0;
  }*/
}
.vowel_panel .vcButton, .vowel_panel .spacer {
  width: 100%;
  height: 100%;
  background-color: #FFF;
  transition: background-color 0.2s;
  border-radius: 5px;
}
.vowel_panel .vcButton {
  line-height: 45px !important;
  text-align: center;
  color: #0089e8;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 3em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  /*        &.v1, &.v7 {
      line-height: 54px !important;
  }*/
}
@media (hover: hover) {
  .vowel_panel .vcButton:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
.vowel_panel .spacer {
  opacity: 60%;
}
.vowel_panel .vcButton.v1:before {
  line-height: 50px;
}
.vowel_panel .vcButton.v1:before {
  content: "i";
}
.vowel_panel .vcButton.v1_select {
  color: white;
  background-color: #0089e8;
}
.vowel_panel .v1btn, .vowel_panel .v1dis, .vowel_panel .v1high, .vowel_panel .v1_record_highlight, .vowel_panel .v1btn_colour, .vowel_panel .v1dis_colour, .vowel_panel .v1high_colour, .vowel_panel .v1btn_colour_record_highlight, .vowel_panel .v1btn_numbers, .vowel_panel .v1dis_numbers, .vowel_panel .v1high_numbers, .vowel_panel .v1btn_numbers_record_highlight, .vowel_panel .v1btn_black, .vowel_panel .v1dis_black, .vowel_panel .v1high_black, .vowel_panel .v1btn_numbers_record_black {
  width: 100%;
  height: 100%;
  background-color: white;
  transition: background-color 0.2s;
  line-height: 45px !important;
  text-align: center;
  border-radius: 5px;
  color: #0089e8;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 3em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  padding: 0 0 9px 0;
  margin: 0 auto 0 !important;
}
@media (hover: none) {
  .vowel_panel .v1btn, .vowel_panel .v1dis, .vowel_panel .v1high, .vowel_panel .v1_record_highlight, .vowel_panel .v1btn_colour, .vowel_panel .v1dis_colour, .vowel_panel .v1high_colour, .vowel_panel .v1btn_colour_record_highlight, .vowel_panel .v1btn_numbers, .vowel_panel .v1dis_numbers, .vowel_panel .v1high_numbers, .vowel_panel .v1btn_numbers_record_highlight, .vowel_panel .v1btn_black, .vowel_panel .v1dis_black, .vowel_panel .v1high_black, .vowel_panel .v1btn_numbers_record_black {
    padding: 0 0 7px 0;
  }
}
@media (hover: hover) {
  .vowel_panel .v1btn:hover, .vowel_panel .v1dis:hover, .vowel_panel .v1high:hover, .vowel_panel .v1_record_highlight:hover, .vowel_panel .v1btn_colour:hover, .vowel_panel .v1dis_colour:hover, .vowel_panel .v1high_colour:hover, .vowel_panel .v1btn_colour_record_highlight:hover, .vowel_panel .v1btn_numbers:hover, .vowel_panel .v1dis_numbers:hover, .vowel_panel .v1high_numbers:hover, .vowel_panel .v1btn_numbers_record_highlight:hover, .vowel_panel .v1btn_black:hover, .vowel_panel .v1dis_black:hover, .vowel_panel .v1high_black:hover, .vowel_panel .v1btn_numbers_record_black:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
.vowel_panel .v1btn:before, .vowel_panel .v1dis:before, .vowel_panel .v1high:before, .vowel_panel .v1_record_highlight:before, .vowel_panel .v1btn_colour:before, .vowel_panel .v1dis_colour:before, .vowel_panel .v1high_colour:before, .vowel_panel .v1btn_colour_record_highlight:before, .vowel_panel .v1btn_numbers:before, .vowel_panel .v1dis_numbers:before, .vowel_panel .v1high_numbers:before, .vowel_panel .v1btn_numbers_record_highlight:before, .vowel_panel .v1btn_black:before, .vowel_panel .v1dis_black:before, .vowel_panel .v1high_black:before, .vowel_panel .v1btn_numbers_record_black:before {
  line-height: 50px;
}
.vowel_panel .v1btn:before, .vowel_panel .v1dis:before, .vowel_panel .v1high:before, .vowel_panel .v1_record_highlight:before, .vowel_panel .v1btn_colour:before, .vowel_panel .v1dis_colour:before, .vowel_panel .v1high_colour:before, .vowel_panel .v1btn_colour_record_highlight:before, .vowel_panel .v1btn_numbers:before, .vowel_panel .v1dis_numbers:before, .vowel_panel .v1high_numbers:before, .vowel_panel .v1btn_numbers_record_highlight:before, .vowel_panel .v1btn_black:before, .vowel_panel .v1dis_black:before, .vowel_panel .v1high_black:before, .vowel_panel .v1btn_numbers_record_black:before {
  content: "i";
}
.vowel_panel .v1dis {
  color: #6ec0f9;
}
@media (hover: hover) {
  .vowel_panel .v1dis:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
.vowel_panel .v1high {
  color: white;
  background-color: green;
}
@media (hover: hover) {
  .vowel_panel .v1high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v1_record_highlight {
  color: white;
  background-color: #0089e8;
  cursor: default !important;
}
.vowel_panel .v1btn_colour {
  background-color: #25cb3b;
}
@media (hover: hover) {
  .vowel_panel .v1btn_colour:hover {
    color: #25cb3b;
    border: 3px solid #25cb3b !important;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v1high_colour {
  color: #25cb3b;
  background-color: white;
  border: 3px solid #25cb3b !important;
  line-height: 0.3 !important;
  padding: 0 0 11px 0;
}
.vowel_panel .v1high_colour:before {
  margin-top: -7px;
}
@media (hover: hover) {
  .vowel_panel .v1high_colour:hover {
    color: #30d947;
    background-color: white;
    border: 3px solid #30d947 !important;
    transition: all 0.2s;
    cursor: pointer;
  }
}
.vowel_panel .v1btn_colour_record_highlight {
  color: #25cb3b;
  background-color: white;
  border: 3px solid #25cb3b !important;
}
@media (hover: hover) {
  .vowel_panel .v1btn_colour_record_highlight:hover {
    color: #25cb3b;
    background-color: white;
    border: 3px solid #25cb3b !important;
    cursor: default !important;
  }
}
.vowel_panel .v1dis_colour {
  cursor: default !important;
  background-color: #f7fdf8 !important;
}
.vowel_panel .v1btn_colour:before, .vowel_panel .v1dis_colour:before, .vowel_panel .v1btn_colour_record_highlight:before {
  content: none;
}
.vowel_panel .v1high_colour:before {
  content: "x";
  line-height: 43px;
}
.vowel_panel .v1btn_numbers {
  padding: unset;
  color: #006bb5;
  background-color: white;
  color: #006bb5;
  background-color: white;
}
.vowel_panel .v1btn_numbers:before {
  color: #006bb5;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
}
.vowel_panel .v1btn_numbers:hover:before {
  color: white;
  background-color: #006bb5;
}
.vowel_panel .v1btn_numbers:before {
  content: "1";
}
@media (hover: hover) {
  .vowel_panel .v1btn_numbers:hover {
    color: white;
    background-color: #006bb5;
    cursor: pointer;
  }
}
.vowel_panel .v1high_numbers {
  color: white;
  background-color: green;
  padding: 0px;
}
.vowel_panel .v1high_numbers:before {
  height: 100%;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
  line-height: 1;
}
@media (hover: hover) {
  .vowel_panel .v1high_numbers:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v1high_numbers:before {
  content: "1";
}
.vowel_panel .v1btn_numbers_record_highlight {
  background-color: #006bb5;
  padding: unset;
  cursor: default !important;
  margin-top: -7px;
}
.vowel_panel .v1btn_numbers_record_highlight:before {
  color: white;
  height: 100%;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
  line-height: 1;
}
.vowel_panel .v1btn_numbers_record_highlight:hover {
  background-color: #006bb5;
}
.vowel_panel .v1btn_numbers_record_highlight:before {
  content: "1";
}
.vowel_panel .v1dis_numbers {
  padding: 0px;
  cursor: default !important;
}
.vowel_panel .v1dis_numbers:before {
  color: rgba(0, 107, 181, 0.3803921569);
  background-color: white;
  height: 100%;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
  line-height: 1;
}
.vowel_panel .v1dis_numbers:before {
  content: "1";
}
.vowel_panel .v1btn_black {
  background-color: #000;
}
@media (hover: hover) {
  .vowel_panel .v1btn_black:hover {
    background-color: white;
    border: 3px solid #000 !important;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v1high_black {
  color: #000;
  background-color: white;
  border: 3px solid #000 !important;
  line-height: 0.3 !important;
  padding: 0 0 11px 0;
}
.vowel_panel .v1high_black:before {
  margin-top: -7px;
}
@media (hover: hover) {
  .vowel_panel .v1high_black:hover {
    color: #464646;
    background-color: white;
    border: 3px solid #464646 !important;
    transition: all 0.2s;
    cursor: pointer;
  }
}
.vowel_panel .v1btn_black_record_highlight {
  color: #000;
  background-color: white;
  border: 3px solid #000 !important;
  margin: 0;
}
.vowel_panel .v1dis_black {
  cursor: default !important;
  background-color: #EEE;
}
.vowel_panel .v1dis_black:hover {
  background-color: #EEE;
}
.vowel_panel .v1btn_black:before, .vowel_panel .v1dis_black:before, .vowel_panel .v1btn_black_record_highlight:before {
  content: none;
}
.vowel_panel .v1high_black:before {
  content: "x";
  line-height: 43px;
}
.vowel_panel .vcButton.v2:before {
  line-height: 50px;
}
.vowel_panel .vcButton.v2:before {
  content: "ɪ";
}
.vowel_panel .vcButton.v2_select {
  color: white;
  background-color: #0089e8;
}
.vowel_panel .v2btn, .vowel_panel .v2dis, .vowel_panel .v2high, .vowel_panel .v2_record_highlight, .vowel_panel .v2btn_colour, .vowel_panel .v2dis_colour, .vowel_panel .v2high_colour, .vowel_panel .v2btn_colour_record_highlight, .vowel_panel .v2btn_numbers, .vowel_panel .v2dis_numbers, .vowel_panel .v2high_numbers, .vowel_panel .v2btn_numbers_record_highlight, .vowel_panel .v2btn_black, .vowel_panel .v2dis_black, .vowel_panel .v2high_black, .vowel_panel .v2btn_numbers_record_black {
  width: 100%;
  height: 100%;
  background-color: white;
  transition: background-color 0.2s;
  line-height: 45px !important;
  text-align: center;
  border-radius: 5px;
  color: #0089e8;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 3em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  padding: 0 0 9px 0;
  margin: 0 auto 0 !important;
}
@media (hover: none) {
  .vowel_panel .v2btn, .vowel_panel .v2dis, .vowel_panel .v2high, .vowel_panel .v2_record_highlight, .vowel_panel .v2btn_colour, .vowel_panel .v2dis_colour, .vowel_panel .v2high_colour, .vowel_panel .v2btn_colour_record_highlight, .vowel_panel .v2btn_numbers, .vowel_panel .v2dis_numbers, .vowel_panel .v2high_numbers, .vowel_panel .v2btn_numbers_record_highlight, .vowel_panel .v2btn_black, .vowel_panel .v2dis_black, .vowel_panel .v2high_black, .vowel_panel .v2btn_numbers_record_black {
    padding: 0 0 7px 0;
  }
}
@media (hover: hover) {
  .vowel_panel .v2btn:hover, .vowel_panel .v2dis:hover, .vowel_panel .v2high:hover, .vowel_panel .v2_record_highlight:hover, .vowel_panel .v2btn_colour:hover, .vowel_panel .v2dis_colour:hover, .vowel_panel .v2high_colour:hover, .vowel_panel .v2btn_colour_record_highlight:hover, .vowel_panel .v2btn_numbers:hover, .vowel_panel .v2dis_numbers:hover, .vowel_panel .v2high_numbers:hover, .vowel_panel .v2btn_numbers_record_highlight:hover, .vowel_panel .v2btn_black:hover, .vowel_panel .v2dis_black:hover, .vowel_panel .v2high_black:hover, .vowel_panel .v2btn_numbers_record_black:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
.vowel_panel .v2btn:before, .vowel_panel .v2dis:before, .vowel_panel .v2high:before, .vowel_panel .v2_record_highlight:before, .vowel_panel .v2btn_colour:before, .vowel_panel .v2dis_colour:before, .vowel_panel .v2high_colour:before, .vowel_panel .v2btn_colour_record_highlight:before, .vowel_panel .v2btn_numbers:before, .vowel_panel .v2dis_numbers:before, .vowel_panel .v2high_numbers:before, .vowel_panel .v2btn_numbers_record_highlight:before, .vowel_panel .v2btn_black:before, .vowel_panel .v2dis_black:before, .vowel_panel .v2high_black:before, .vowel_panel .v2btn_numbers_record_black:before {
  line-height: 50px;
}
.vowel_panel .v2btn:before, .vowel_panel .v2dis:before, .vowel_panel .v2high:before, .vowel_panel .v2_record_highlight:before, .vowel_panel .v2btn_colour:before, .vowel_panel .v2dis_colour:before, .vowel_panel .v2high_colour:before, .vowel_panel .v2btn_colour_record_highlight:before, .vowel_panel .v2btn_numbers:before, .vowel_panel .v2dis_numbers:before, .vowel_panel .v2high_numbers:before, .vowel_panel .v2btn_numbers_record_highlight:before, .vowel_panel .v2btn_black:before, .vowel_panel .v2dis_black:before, .vowel_panel .v2high_black:before, .vowel_panel .v2btn_numbers_record_black:before {
  content: "ɪ";
}
.vowel_panel .v2dis {
  color: #6ec0f9;
}
@media (hover: hover) {
  .vowel_panel .v2dis:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
.vowel_panel .v2high {
  color: white;
  background-color: green;
}
@media (hover: hover) {
  .vowel_panel .v2high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v2_record_highlight {
  color: white;
  background-color: #0089e8;
  cursor: default !important;
}
.vowel_panel .v2btn_colour {
  background-color: #aef5bf;
}
@media (hover: hover) {
  .vowel_panel .v2btn_colour:hover {
    color: #aef5bf;
    border: 3px solid #aef5bf !important;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v2high_colour {
  color: #aef5bf;
  background-color: white;
  border: 3px solid #aef5bf !important;
  line-height: 0.3 !important;
  padding: 0 0 11px 0;
}
.vowel_panel .v2high_colour:before {
  margin-top: -7px;
}
@media (hover: hover) {
  .vowel_panel .v2high_colour:hover {
    color: #c5f8d1;
    background-color: white;
    border: 3px solid #c5f8d1 !important;
    transition: all 0.2s;
    cursor: pointer;
  }
}
.vowel_panel .v2btn_colour_record_highlight {
  color: #aef5bf;
  background-color: white;
  border: 3px solid #aef5bf !important;
}
@media (hover: hover) {
  .vowel_panel .v2btn_colour_record_highlight:hover {
    color: #aef5bf;
    background-color: white;
    border: 3px solid #aef5bf !important;
    cursor: default !important;
  }
}
.vowel_panel .v2dis_colour {
  cursor: default !important;
  background-color: #effbf1 !important;
}
.vowel_panel .v2btn_colour:before, .vowel_panel .v2dis_colour:before, .vowel_panel .v2btn_colour_record_highlight:before {
  content: none;
}
.vowel_panel .v2high_colour:before {
  content: "x";
  line-height: 43px;
}
.vowel_panel .v2btn_numbers {
  padding: unset;
  color: #006bb5;
  background-color: white;
  color: #006bb5;
  background-color: white;
}
.vowel_panel .v2btn_numbers:before {
  color: #006bb5;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
}
.vowel_panel .v2btn_numbers:hover:before {
  color: white;
  background-color: #006bb5;
}
.vowel_panel .v2btn_numbers:before {
  content: "2";
}
@media (hover: hover) {
  .vowel_panel .v2btn_numbers:hover {
    color: white;
    background-color: #006bb5;
    cursor: pointer;
  }
}
.vowel_panel .v2high_numbers {
  color: white;
  background-color: green;
  padding: 0px;
}
.vowel_panel .v2high_numbers:before {
  height: 100%;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
  line-height: 1;
}
@media (hover: hover) {
  .vowel_panel .v2high_numbers:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v2high_numbers:before {
  content: "2";
}
.vowel_panel .v2btn_numbers_record_highlight {
  background-color: #006bb5;
  padding: unset;
  cursor: default !important;
  margin-top: -7px;
}
.vowel_panel .v2btn_numbers_record_highlight:before {
  color: white;
  height: 100%;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
  line-height: 1;
}
.vowel_panel .v2btn_numbers_record_highlight:hover {
  background-color: #006bb5;
}
.vowel_panel .v2btn_numbers_record_highlight:before {
  content: "2";
}
.vowel_panel .v2dis_numbers {
  padding: 0px;
  cursor: default !important;
}
.vowel_panel .v2dis_numbers:before {
  color: rgba(0, 107, 181, 0.3803921569);
  background-color: white;
  height: 100%;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
  line-height: 1;
}
.vowel_panel .v2dis_numbers:before {
  content: "2";
}
.vowel_panel .v2btn_black {
  background-color: #000;
}
@media (hover: hover) {
  .vowel_panel .v2btn_black:hover {
    background-color: white;
    border: 3px solid #000 !important;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v2high_black {
  color: #000;
  background-color: white;
  border: 3px solid #000 !important;
  line-height: 0.3 !important;
  padding: 0 0 11px 0;
}
.vowel_panel .v2high_black:before {
  margin-top: -7px;
}
@media (hover: hover) {
  .vowel_panel .v2high_black:hover {
    color: #464646;
    background-color: white;
    border: 3px solid #464646 !important;
    transition: all 0.2s;
    cursor: pointer;
  }
}
.vowel_panel .v2btn_black_record_highlight {
  color: #000;
  background-color: white;
  border: 3px solid #000 !important;
  margin: 0;
}
.vowel_panel .v2dis_black {
  cursor: default !important;
  background-color: #EEE;
}
.vowel_panel .v2dis_black:hover {
  background-color: #EEE;
}
.vowel_panel .v2btn_black:before, .vowel_panel .v2dis_black:before, .vowel_panel .v2btn_black_record_highlight:before {
  content: none;
}
.vowel_panel .v2high_black:before {
  content: "x";
  line-height: 43px;
}
.vowel_panel .vcButton.v3:before {
  line-height: 50px;
}
.vowel_panel .vcButton.v3:before {
  content: "e";
}
.vowel_panel .vcButton.v3_select {
  color: white;
  background-color: #0089e8;
}
.vowel_panel .v3btn, .vowel_panel .v3dis, .vowel_panel .v3high, .vowel_panel .v3_record_highlight, .vowel_panel .v3btn_colour, .vowel_panel .v3dis_colour, .vowel_panel .v3high_colour, .vowel_panel .v3btn_colour_record_highlight, .vowel_panel .v3btn_numbers, .vowel_panel .v3dis_numbers, .vowel_panel .v3high_numbers, .vowel_panel .v3btn_numbers_record_highlight, .vowel_panel .v3btn_black, .vowel_panel .v3dis_black, .vowel_panel .v3high_black, .vowel_panel .v3btn_numbers_record_black {
  width: 100%;
  height: 100%;
  background-color: white;
  transition: background-color 0.2s;
  line-height: 45px !important;
  text-align: center;
  border-radius: 5px;
  color: #0089e8;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 3em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  padding: 0 0 9px 0;
  margin: 0 auto 0 !important;
}
@media (hover: none) {
  .vowel_panel .v3btn, .vowel_panel .v3dis, .vowel_panel .v3high, .vowel_panel .v3_record_highlight, .vowel_panel .v3btn_colour, .vowel_panel .v3dis_colour, .vowel_panel .v3high_colour, .vowel_panel .v3btn_colour_record_highlight, .vowel_panel .v3btn_numbers, .vowel_panel .v3dis_numbers, .vowel_panel .v3high_numbers, .vowel_panel .v3btn_numbers_record_highlight, .vowel_panel .v3btn_black, .vowel_panel .v3dis_black, .vowel_panel .v3high_black, .vowel_panel .v3btn_numbers_record_black {
    padding: 0 0 7px 0;
  }
}
@media (hover: hover) {
  .vowel_panel .v3btn:hover, .vowel_panel .v3dis:hover, .vowel_panel .v3high:hover, .vowel_panel .v3_record_highlight:hover, .vowel_panel .v3btn_colour:hover, .vowel_panel .v3dis_colour:hover, .vowel_panel .v3high_colour:hover, .vowel_panel .v3btn_colour_record_highlight:hover, .vowel_panel .v3btn_numbers:hover, .vowel_panel .v3dis_numbers:hover, .vowel_panel .v3high_numbers:hover, .vowel_panel .v3btn_numbers_record_highlight:hover, .vowel_panel .v3btn_black:hover, .vowel_panel .v3dis_black:hover, .vowel_panel .v3high_black:hover, .vowel_panel .v3btn_numbers_record_black:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
.vowel_panel .v3btn:before, .vowel_panel .v3dis:before, .vowel_panel .v3high:before, .vowel_panel .v3_record_highlight:before, .vowel_panel .v3btn_colour:before, .vowel_panel .v3dis_colour:before, .vowel_panel .v3high_colour:before, .vowel_panel .v3btn_colour_record_highlight:before, .vowel_panel .v3btn_numbers:before, .vowel_panel .v3dis_numbers:before, .vowel_panel .v3high_numbers:before, .vowel_panel .v3btn_numbers_record_highlight:before, .vowel_panel .v3btn_black:before, .vowel_panel .v3dis_black:before, .vowel_panel .v3high_black:before, .vowel_panel .v3btn_numbers_record_black:before {
  line-height: 50px;
}
.vowel_panel .v3btn:before, .vowel_panel .v3dis:before, .vowel_panel .v3high:before, .vowel_panel .v3_record_highlight:before, .vowel_panel .v3btn_colour:before, .vowel_panel .v3dis_colour:before, .vowel_panel .v3high_colour:before, .vowel_panel .v3btn_colour_record_highlight:before, .vowel_panel .v3btn_numbers:before, .vowel_panel .v3dis_numbers:before, .vowel_panel .v3high_numbers:before, .vowel_panel .v3btn_numbers_record_highlight:before, .vowel_panel .v3btn_black:before, .vowel_panel .v3dis_black:before, .vowel_panel .v3high_black:before, .vowel_panel .v3btn_numbers_record_black:before {
  content: "e";
}
.vowel_panel .v3dis {
  color: #6ec0f9;
}
@media (hover: hover) {
  .vowel_panel .v3dis:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
.vowel_panel .v3high {
  color: white;
  background-color: green;
}
@media (hover: hover) {
  .vowel_panel .v3high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v3_record_highlight {
  color: white;
  background-color: #0089e8;
  cursor: default !important;
}
.vowel_panel .v3btn_colour {
  background-color: #afafaf;
}
@media (hover: hover) {
  .vowel_panel .v3btn_colour:hover {
    color: #afafaf;
    border: 3px solid #afafaf !important;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v3high_colour {
  color: #afafaf;
  background-color: white;
  border: 3px solid #afafaf !important;
  line-height: 0.3 !important;
  padding: 0 0 11px 0;
}
.vowel_panel .v3high_colour:before {
  margin-top: -7px;
}
@media (hover: hover) {
  .vowel_panel .v3high_colour:hover {
    color: #bcbcbc;
    background-color: white;
    border: 3px solid #bcbcbc !important;
    transition: all 0.2s;
    cursor: pointer;
  }
}
.vowel_panel .v3btn_colour_record_highlight {
  color: #afafaf;
  background-color: white;
  border: 3px solid #afafaf !important;
}
@media (hover: hover) {
  .vowel_panel .v3btn_colour_record_highlight:hover {
    color: #afafaf;
    background-color: white;
    border: 3px solid #afafaf !important;
    cursor: default !important;
  }
}
.vowel_panel .v3dis_colour {
  cursor: default !important;
  background-color: #f8f8f8 !important;
}
.vowel_panel .v3btn_colour:before, .vowel_panel .v3dis_colour:before, .vowel_panel .v3btn_colour_record_highlight:before {
  content: none;
}
.vowel_panel .v3high_colour:before {
  content: "x";
  line-height: 43px;
}
.vowel_panel .v3btn_numbers {
  padding: unset;
  color: #006bb5;
  background-color: white;
  color: #006bb5;
  background-color: white;
}
.vowel_panel .v3btn_numbers:before {
  color: #006bb5;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
}
.vowel_panel .v3btn_numbers:hover:before {
  color: white;
  background-color: #006bb5;
}
.vowel_panel .v3btn_numbers:before {
  content: "3";
}
@media (hover: hover) {
  .vowel_panel .v3btn_numbers:hover {
    color: white;
    background-color: #006bb5;
    cursor: pointer;
  }
}
.vowel_panel .v3high_numbers {
  color: white;
  background-color: green;
  padding: 0px;
}
.vowel_panel .v3high_numbers:before {
  height: 100%;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
  line-height: 1;
}
@media (hover: hover) {
  .vowel_panel .v3high_numbers:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v3high_numbers:before {
  content: "3";
}
.vowel_panel .v3btn_numbers_record_highlight {
  background-color: #006bb5;
  padding: unset;
  cursor: default !important;
  margin-top: -7px;
}
.vowel_panel .v3btn_numbers_record_highlight:before {
  color: white;
  height: 100%;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
  line-height: 1;
}
.vowel_panel .v3btn_numbers_record_highlight:hover {
  background-color: #006bb5;
}
.vowel_panel .v3btn_numbers_record_highlight:before {
  content: "3";
}
.vowel_panel .v3dis_numbers {
  padding: 0px;
  cursor: default !important;
}
.vowel_panel .v3dis_numbers:before {
  color: rgba(0, 107, 181, 0.3803921569);
  background-color: white;
  height: 100%;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
  line-height: 1;
}
.vowel_panel .v3dis_numbers:before {
  content: "3";
}
.vowel_panel .v3btn_black {
  background-color: #000;
}
@media (hover: hover) {
  .vowel_panel .v3btn_black:hover {
    background-color: white;
    border: 3px solid #000 !important;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v3high_black {
  color: #000;
  background-color: white;
  border: 3px solid #000 !important;
  line-height: 0.3 !important;
  padding: 0 0 11px 0;
}
.vowel_panel .v3high_black:before {
  margin-top: -7px;
}
@media (hover: hover) {
  .vowel_panel .v3high_black:hover {
    color: #464646;
    background-color: white;
    border: 3px solid #464646 !important;
    transition: all 0.2s;
    cursor: pointer;
  }
}
.vowel_panel .v3btn_black_record_highlight {
  color: #000;
  background-color: white;
  border: 3px solid #000 !important;
  margin: 0;
}
.vowel_panel .v3dis_black {
  cursor: default !important;
  background-color: #EEE;
}
.vowel_panel .v3dis_black:hover {
  background-color: #EEE;
}
.vowel_panel .v3btn_black:before, .vowel_panel .v3dis_black:before, .vowel_panel .v3btn_black_record_highlight:before {
  content: none;
}
.vowel_panel .v3high_black:before {
  content: "x";
  line-height: 43px;
}
.vowel_panel .vcButton.v4:before {
  line-height: 50px;
}
.vowel_panel .vcButton.v4:before {
  content: "ɛ";
}
.vowel_panel .vcButton.v4_select {
  color: white;
  background-color: #0089e8;
}
.vowel_panel .v4btn, .vowel_panel .v4dis, .vowel_panel .v4high, .vowel_panel .v4_record_highlight, .vowel_panel .v4btn_colour, .vowel_panel .v4dis_colour, .vowel_panel .v4high_colour, .vowel_panel .v4btn_colour_record_highlight, .vowel_panel .v4btn_numbers, .vowel_panel .v4dis_numbers, .vowel_panel .v4high_numbers, .vowel_panel .v4btn_numbers_record_highlight, .vowel_panel .v4btn_black, .vowel_panel .v4dis_black, .vowel_panel .v4high_black, .vowel_panel .v4btn_numbers_record_black {
  width: 100%;
  height: 100%;
  background-color: white;
  transition: background-color 0.2s;
  line-height: 45px !important;
  text-align: center;
  border-radius: 5px;
  color: #0089e8;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 3em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  padding: 0 0 9px 0;
  margin: 0 auto 0 !important;
}
@media (hover: none) {
  .vowel_panel .v4btn, .vowel_panel .v4dis, .vowel_panel .v4high, .vowel_panel .v4_record_highlight, .vowel_panel .v4btn_colour, .vowel_panel .v4dis_colour, .vowel_panel .v4high_colour, .vowel_panel .v4btn_colour_record_highlight, .vowel_panel .v4btn_numbers, .vowel_panel .v4dis_numbers, .vowel_panel .v4high_numbers, .vowel_panel .v4btn_numbers_record_highlight, .vowel_panel .v4btn_black, .vowel_panel .v4dis_black, .vowel_panel .v4high_black, .vowel_panel .v4btn_numbers_record_black {
    padding: 0 0 7px 0;
  }
}
@media (hover: hover) {
  .vowel_panel .v4btn:hover, .vowel_panel .v4dis:hover, .vowel_panel .v4high:hover, .vowel_panel .v4_record_highlight:hover, .vowel_panel .v4btn_colour:hover, .vowel_panel .v4dis_colour:hover, .vowel_panel .v4high_colour:hover, .vowel_panel .v4btn_colour_record_highlight:hover, .vowel_panel .v4btn_numbers:hover, .vowel_panel .v4dis_numbers:hover, .vowel_panel .v4high_numbers:hover, .vowel_panel .v4btn_numbers_record_highlight:hover, .vowel_panel .v4btn_black:hover, .vowel_panel .v4dis_black:hover, .vowel_panel .v4high_black:hover, .vowel_panel .v4btn_numbers_record_black:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
.vowel_panel .v4btn:before, .vowel_panel .v4dis:before, .vowel_panel .v4high:before, .vowel_panel .v4_record_highlight:before, .vowel_panel .v4btn_colour:before, .vowel_panel .v4dis_colour:before, .vowel_panel .v4high_colour:before, .vowel_panel .v4btn_colour_record_highlight:before, .vowel_panel .v4btn_numbers:before, .vowel_panel .v4dis_numbers:before, .vowel_panel .v4high_numbers:before, .vowel_panel .v4btn_numbers_record_highlight:before, .vowel_panel .v4btn_black:before, .vowel_panel .v4dis_black:before, .vowel_panel .v4high_black:before, .vowel_panel .v4btn_numbers_record_black:before {
  line-height: 50px;
}
.vowel_panel .v4btn:before, .vowel_panel .v4dis:before, .vowel_panel .v4high:before, .vowel_panel .v4_record_highlight:before, .vowel_panel .v4btn_colour:before, .vowel_panel .v4dis_colour:before, .vowel_panel .v4high_colour:before, .vowel_panel .v4btn_colour_record_highlight:before, .vowel_panel .v4btn_numbers:before, .vowel_panel .v4dis_numbers:before, .vowel_panel .v4high_numbers:before, .vowel_panel .v4btn_numbers_record_highlight:before, .vowel_panel .v4btn_black:before, .vowel_panel .v4dis_black:before, .vowel_panel .v4high_black:before, .vowel_panel .v4btn_numbers_record_black:before {
  content: "ɛ";
}
.vowel_panel .v4dis {
  color: #6ec0f9;
}
@media (hover: hover) {
  .vowel_panel .v4dis:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
.vowel_panel .v4high {
  color: white;
  background-color: green;
}
@media (hover: hover) {
  .vowel_panel .v4high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v4_record_highlight {
  color: white;
  background-color: #0089e8;
  cursor: default !important;
}
.vowel_panel .v4btn_colour {
  background-color: #e13531;
}
@media (hover: hover) {
  .vowel_panel .v4btn_colour:hover {
    color: #e13531;
    border: 3px solid #e13531 !important;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v4high_colour {
  color: #e13531;
  background-color: white;
  border: 3px solid #e13531 !important;
  line-height: 0.3 !important;
  padding: 0 0 11px 0;
}
.vowel_panel .v4high_colour:before {
  margin-top: -7px;
}
@media (hover: hover) {
  .vowel_panel .v4high_colour:hover {
    color: #e44b47;
    background-color: white;
    border: 3px solid #e44b47 !important;
    transition: all 0.2s;
    cursor: pointer;
  }
}
.vowel_panel .v4btn_colour_record_highlight {
  color: #e13531;
  background-color: white;
  border: 3px solid #e13531 !important;
}
@media (hover: hover) {
  .vowel_panel .v4btn_colour_record_highlight:hover {
    color: #e13531;
    background-color: white;
    border: 3px solid #e13531 !important;
    cursor: default !important;
  }
}
.vowel_panel .v4dis_colour {
  cursor: default !important;
  background-color: #fbefef !important;
}
.vowel_panel .v4btn_colour:before, .vowel_panel .v4dis_colour:before, .vowel_panel .v4btn_colour_record_highlight:before {
  content: none;
}
.vowel_panel .v4high_colour:before {
  content: "x";
  line-height: 43px;
}
.vowel_panel .v4btn_numbers {
  padding: unset;
  color: #006bb5;
  background-color: white;
  color: #006bb5;
  background-color: white;
}
.vowel_panel .v4btn_numbers:before {
  color: #006bb5;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
}
.vowel_panel .v4btn_numbers:hover:before {
  color: white;
  background-color: #006bb5;
}
.vowel_panel .v4btn_numbers:before {
  content: "4";
}
@media (hover: hover) {
  .vowel_panel .v4btn_numbers:hover {
    color: white;
    background-color: #006bb5;
    cursor: pointer;
  }
}
.vowel_panel .v4high_numbers {
  color: white;
  background-color: green;
  padding: 0px;
}
.vowel_panel .v4high_numbers:before {
  height: 100%;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
  line-height: 1;
}
@media (hover: hover) {
  .vowel_panel .v4high_numbers:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v4high_numbers:before {
  content: "4";
}
.vowel_panel .v4btn_numbers_record_highlight {
  background-color: #006bb5;
  padding: unset;
  cursor: default !important;
  margin-top: -7px;
}
.vowel_panel .v4btn_numbers_record_highlight:before {
  color: white;
  height: 100%;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
  line-height: 1;
}
.vowel_panel .v4btn_numbers_record_highlight:hover {
  background-color: #006bb5;
}
.vowel_panel .v4btn_numbers_record_highlight:before {
  content: "4";
}
.vowel_panel .v4dis_numbers {
  padding: 0px;
  cursor: default !important;
}
.vowel_panel .v4dis_numbers:before {
  color: rgba(0, 107, 181, 0.3803921569);
  background-color: white;
  height: 100%;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
  line-height: 1;
}
.vowel_panel .v4dis_numbers:before {
  content: "4";
}
.vowel_panel .v4btn_black {
  background-color: #000;
}
@media (hover: hover) {
  .vowel_panel .v4btn_black:hover {
    background-color: white;
    border: 3px solid #000 !important;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v4high_black {
  color: #000;
  background-color: white;
  border: 3px solid #000 !important;
  line-height: 0.3 !important;
  padding: 0 0 11px 0;
}
.vowel_panel .v4high_black:before {
  margin-top: -7px;
}
@media (hover: hover) {
  .vowel_panel .v4high_black:hover {
    color: #464646;
    background-color: white;
    border: 3px solid #464646 !important;
    transition: all 0.2s;
    cursor: pointer;
  }
}
.vowel_panel .v4btn_black_record_highlight {
  color: #000;
  background-color: white;
  border: 3px solid #000 !important;
  margin: 0;
}
.vowel_panel .v4dis_black {
  cursor: default !important;
  background-color: #EEE;
}
.vowel_panel .v4dis_black:hover {
  background-color: #EEE;
}
.vowel_panel .v4btn_black:before, .vowel_panel .v4dis_black:before, .vowel_panel .v4btn_black_record_highlight:before {
  content: none;
}
.vowel_panel .v4high_black:before {
  content: "x";
  line-height: 43px;
}
.vowel_panel .vcButton.v5:before {
  line-height: 50px;
}
.vowel_panel .vcButton.v5:before {
  content: "æ";
}
.vowel_panel .vcButton.v5_select {
  color: white;
  background-color: #0089e8;
}
.vowel_panel .v5btn, .vowel_panel .v5dis, .vowel_panel .v5high, .vowel_panel .v5_record_highlight, .vowel_panel .v5btn_colour, .vowel_panel .v5dis_colour, .vowel_panel .v5high_colour, .vowel_panel .v5btn_colour_record_highlight, .vowel_panel .v5btn_numbers, .vowel_panel .v5dis_numbers, .vowel_panel .v5high_numbers, .vowel_panel .v5btn_numbers_record_highlight, .vowel_panel .v5btn_black, .vowel_panel .v5dis_black, .vowel_panel .v5high_black, .vowel_panel .v5btn_numbers_record_black {
  width: 100%;
  height: 100%;
  background-color: white;
  transition: background-color 0.2s;
  line-height: 45px !important;
  text-align: center;
  border-radius: 5px;
  color: #0089e8;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 3em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  padding: 0 0 9px 0;
  margin: 0 auto 0 !important;
}
@media (hover: none) {
  .vowel_panel .v5btn, .vowel_panel .v5dis, .vowel_panel .v5high, .vowel_panel .v5_record_highlight, .vowel_panel .v5btn_colour, .vowel_panel .v5dis_colour, .vowel_panel .v5high_colour, .vowel_panel .v5btn_colour_record_highlight, .vowel_panel .v5btn_numbers, .vowel_panel .v5dis_numbers, .vowel_panel .v5high_numbers, .vowel_panel .v5btn_numbers_record_highlight, .vowel_panel .v5btn_black, .vowel_panel .v5dis_black, .vowel_panel .v5high_black, .vowel_panel .v5btn_numbers_record_black {
    padding: 0 0 7px 0;
  }
}
@media (hover: hover) {
  .vowel_panel .v5btn:hover, .vowel_panel .v5dis:hover, .vowel_panel .v5high:hover, .vowel_panel .v5_record_highlight:hover, .vowel_panel .v5btn_colour:hover, .vowel_panel .v5dis_colour:hover, .vowel_panel .v5high_colour:hover, .vowel_panel .v5btn_colour_record_highlight:hover, .vowel_panel .v5btn_numbers:hover, .vowel_panel .v5dis_numbers:hover, .vowel_panel .v5high_numbers:hover, .vowel_panel .v5btn_numbers_record_highlight:hover, .vowel_panel .v5btn_black:hover, .vowel_panel .v5dis_black:hover, .vowel_panel .v5high_black:hover, .vowel_panel .v5btn_numbers_record_black:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
.vowel_panel .v5btn:before, .vowel_panel .v5dis:before, .vowel_panel .v5high:before, .vowel_panel .v5_record_highlight:before, .vowel_panel .v5btn_colour:before, .vowel_panel .v5dis_colour:before, .vowel_panel .v5high_colour:before, .vowel_panel .v5btn_colour_record_highlight:before, .vowel_panel .v5btn_numbers:before, .vowel_panel .v5dis_numbers:before, .vowel_panel .v5high_numbers:before, .vowel_panel .v5btn_numbers_record_highlight:before, .vowel_panel .v5btn_black:before, .vowel_panel .v5dis_black:before, .vowel_panel .v5high_black:before, .vowel_panel .v5btn_numbers_record_black:before {
  line-height: 50px;
}
.vowel_panel .v5btn:before, .vowel_panel .v5dis:before, .vowel_panel .v5high:before, .vowel_panel .v5_record_highlight:before, .vowel_panel .v5btn_colour:before, .vowel_panel .v5dis_colour:before, .vowel_panel .v5high_colour:before, .vowel_panel .v5btn_colour_record_highlight:before, .vowel_panel .v5btn_numbers:before, .vowel_panel .v5dis_numbers:before, .vowel_panel .v5high_numbers:before, .vowel_panel .v5btn_numbers_record_highlight:before, .vowel_panel .v5btn_black:before, .vowel_panel .v5dis_black:before, .vowel_panel .v5high_black:before, .vowel_panel .v5btn_numbers_record_black:before {
  content: "æ";
}
.vowel_panel .v5dis {
  color: #6ec0f9;
}
@media (hover: hover) {
  .vowel_panel .v5dis:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
.vowel_panel .v5high {
  color: white;
  background-color: green;
}
@media (hover: hover) {
  .vowel_panel .v5high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v5_record_highlight {
  color: white;
  background-color: #0089e8;
  cursor: default !important;
}
.vowel_panel .v5btn_colour {
  background-color: #383838;
}
@media (hover: hover) {
  .vowel_panel .v5btn_colour:hover {
    color: #383838;
    border: 3px solid #383838 !important;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v5high_colour {
  color: #383838;
  background-color: white;
  border: 3px solid #383838 !important;
  line-height: 0.3 !important;
  padding: 0 0 11px 0;
}
.vowel_panel .v5high_colour:before {
  margin-top: -7px;
}
@media (hover: hover) {
  .vowel_panel .v5high_colour:hover {
    color: #454545;
    background-color: white;
    border: 3px solid #454545 !important;
    transition: all 0.2s;
    cursor: pointer;
  }
}
.vowel_panel .v5btn_colour_record_highlight {
  color: #383838;
  background-color: white;
  border: 3px solid #383838 !important;
}
@media (hover: hover) {
  .vowel_panel .v5btn_colour_record_highlight:hover {
    color: #383838;
    background-color: white;
    border: 3px solid #383838 !important;
    cursor: default !important;
  }
}
.vowel_panel .v5dis_colour {
  cursor: default !important;
  background-color: #ebebeb !important;
}
.vowel_panel .v5btn_colour:before, .vowel_panel .v5dis_colour:before, .vowel_panel .v5btn_colour_record_highlight:before {
  content: none;
}
.vowel_panel .v5high_colour:before {
  content: "x";
  line-height: 43px;
}
.vowel_panel .v5btn_numbers {
  padding: unset;
  color: #006bb5;
  background-color: white;
  color: #006bb5;
  background-color: white;
}
.vowel_panel .v5btn_numbers:before {
  color: #006bb5;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
}
.vowel_panel .v5btn_numbers:hover:before {
  color: white;
  background-color: #006bb5;
}
.vowel_panel .v5btn_numbers:before {
  content: "5";
}
@media (hover: hover) {
  .vowel_panel .v5btn_numbers:hover {
    color: white;
    background-color: #006bb5;
    cursor: pointer;
  }
}
.vowel_panel .v5high_numbers {
  color: white;
  background-color: green;
  padding: 0px;
}
.vowel_panel .v5high_numbers:before {
  height: 100%;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
  line-height: 1;
}
@media (hover: hover) {
  .vowel_panel .v5high_numbers:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v5high_numbers:before {
  content: "5";
}
.vowel_panel .v5btn_numbers_record_highlight {
  background-color: #006bb5;
  padding: unset;
  cursor: default !important;
  margin-top: -7px;
}
.vowel_panel .v5btn_numbers_record_highlight:before {
  color: white;
  height: 100%;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
  line-height: 1;
}
.vowel_panel .v5btn_numbers_record_highlight:hover {
  background-color: #006bb5;
}
.vowel_panel .v5btn_numbers_record_highlight:before {
  content: "5";
}
.vowel_panel .v5dis_numbers {
  padding: 0px;
  cursor: default !important;
}
.vowel_panel .v5dis_numbers:before {
  color: rgba(0, 107, 181, 0.3803921569);
  background-color: white;
  height: 100%;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
  line-height: 1;
}
.vowel_panel .v5dis_numbers:before {
  content: "5";
}
.vowel_panel .v5btn_black {
  background-color: #000;
}
@media (hover: hover) {
  .vowel_panel .v5btn_black:hover {
    background-color: white;
    border: 3px solid #000 !important;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v5high_black {
  color: #000;
  background-color: white;
  border: 3px solid #000 !important;
  line-height: 0.3 !important;
  padding: 0 0 11px 0;
}
.vowel_panel .v5high_black:before {
  margin-top: -7px;
}
@media (hover: hover) {
  .vowel_panel .v5high_black:hover {
    color: #464646;
    background-color: white;
    border: 3px solid #464646 !important;
    transition: all 0.2s;
    cursor: pointer;
  }
}
.vowel_panel .v5btn_black_record_highlight {
  color: #000;
  background-color: white;
  border: 3px solid #000 !important;
  margin: 0;
}
.vowel_panel .v5dis_black {
  cursor: default !important;
  background-color: #EEE;
}
.vowel_panel .v5dis_black:hover {
  background-color: #EEE;
}
.vowel_panel .v5btn_black:before, .vowel_panel .v5dis_black:before, .vowel_panel .v5btn_black_record_highlight:before {
  content: none;
}
.vowel_panel .v5high_black:before {
  content: "x";
  line-height: 43px;
}
.vowel_panel .vcButton.v6:before {
  line-height: 50px;
}
.vowel_panel .vcButton.v6:before {
  content: "ɑ";
}
.vowel_panel .vcButton.v6_select {
  color: white;
  background-color: #0089e8;
}
.vowel_panel .v6btn, .vowel_panel .v6dis, .vowel_panel .v6high, .vowel_panel .v6_record_highlight, .vowel_panel .v6btn_colour, .vowel_panel .v6dis_colour, .vowel_panel .v6high_colour, .vowel_panel .v6btn_colour_record_highlight, .vowel_panel .v6btn_numbers, .vowel_panel .v6dis_numbers, .vowel_panel .v6high_numbers, .vowel_panel .v6btn_numbers_record_highlight, .vowel_panel .v6btn_black, .vowel_panel .v6dis_black, .vowel_panel .v6high_black, .vowel_panel .v6btn_numbers_record_black {
  width: 100%;
  height: 100%;
  background-color: white;
  transition: background-color 0.2s;
  line-height: 45px !important;
  text-align: center;
  border-radius: 5px;
  color: #0089e8;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 3em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  padding: 0 0 9px 0;
  margin: 0 auto 0 !important;
}
@media (hover: none) {
  .vowel_panel .v6btn, .vowel_panel .v6dis, .vowel_panel .v6high, .vowel_panel .v6_record_highlight, .vowel_panel .v6btn_colour, .vowel_panel .v6dis_colour, .vowel_panel .v6high_colour, .vowel_panel .v6btn_colour_record_highlight, .vowel_panel .v6btn_numbers, .vowel_panel .v6dis_numbers, .vowel_panel .v6high_numbers, .vowel_panel .v6btn_numbers_record_highlight, .vowel_panel .v6btn_black, .vowel_panel .v6dis_black, .vowel_panel .v6high_black, .vowel_panel .v6btn_numbers_record_black {
    padding: 0 0 7px 0;
  }
}
@media (hover: hover) {
  .vowel_panel .v6btn:hover, .vowel_panel .v6dis:hover, .vowel_panel .v6high:hover, .vowel_panel .v6_record_highlight:hover, .vowel_panel .v6btn_colour:hover, .vowel_panel .v6dis_colour:hover, .vowel_panel .v6high_colour:hover, .vowel_panel .v6btn_colour_record_highlight:hover, .vowel_panel .v6btn_numbers:hover, .vowel_panel .v6dis_numbers:hover, .vowel_panel .v6high_numbers:hover, .vowel_panel .v6btn_numbers_record_highlight:hover, .vowel_panel .v6btn_black:hover, .vowel_panel .v6dis_black:hover, .vowel_panel .v6high_black:hover, .vowel_panel .v6btn_numbers_record_black:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
.vowel_panel .v6btn:before, .vowel_panel .v6dis:before, .vowel_panel .v6high:before, .vowel_panel .v6_record_highlight:before, .vowel_panel .v6btn_colour:before, .vowel_panel .v6dis_colour:before, .vowel_panel .v6high_colour:before, .vowel_panel .v6btn_colour_record_highlight:before, .vowel_panel .v6btn_numbers:before, .vowel_panel .v6dis_numbers:before, .vowel_panel .v6high_numbers:before, .vowel_panel .v6btn_numbers_record_highlight:before, .vowel_panel .v6btn_black:before, .vowel_panel .v6dis_black:before, .vowel_panel .v6high_black:before, .vowel_panel .v6btn_numbers_record_black:before {
  line-height: 50px;
}
.vowel_panel .v6btn:before, .vowel_panel .v6dis:before, .vowel_panel .v6high:before, .vowel_panel .v6_record_highlight:before, .vowel_panel .v6btn_colour:before, .vowel_panel .v6dis_colour:before, .vowel_panel .v6high_colour:before, .vowel_panel .v6btn_colour_record_highlight:before, .vowel_panel .v6btn_numbers:before, .vowel_panel .v6dis_numbers:before, .vowel_panel .v6high_numbers:before, .vowel_panel .v6btn_numbers_record_highlight:before, .vowel_panel .v6btn_black:before, .vowel_panel .v6dis_black:before, .vowel_panel .v6high_black:before, .vowel_panel .v6btn_numbers_record_black:before {
  content: "ɑ";
}
.vowel_panel .v6dis {
  color: #6ec0f9;
}
@media (hover: hover) {
  .vowel_panel .v6dis:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
.vowel_panel .v6high {
  color: white;
  background-color: green;
}
@media (hover: hover) {
  .vowel_panel .v6high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v6_record_highlight {
  color: white;
  background-color: #0089e8;
  cursor: default !important;
}
.vowel_panel .v6btn_colour {
  background-color: #6c2114;
}
@media (hover: hover) {
  .vowel_panel .v6btn_colour:hover {
    color: #6c2114;
    border: 3px solid #6c2114 !important;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v6high_colour {
  color: #6c2114;
  background-color: white;
  border: 3px solid #6c2114 !important;
  line-height: 0.3 !important;
  padding: 0 0 11px 0;
}
.vowel_panel .v6high_colour:before {
  margin-top: -7px;
}
@media (hover: hover) {
  .vowel_panel .v6high_colour:hover {
    color: #822818;
    background-color: white;
    border: 3px solid #822818 !important;
    transition: all 0.2s;
    cursor: pointer;
  }
}
.vowel_panel .v6btn_colour_record_highlight {
  color: #6c2114;
  background-color: white;
  border: 3px solid #6c2114 !important;
}
@media (hover: hover) {
  .vowel_panel .v6btn_colour_record_highlight:hover {
    color: #6c2114;
    background-color: white;
    border: 3px solid #6c2114 !important;
    cursor: default !important;
  }
}
.vowel_panel .v6dis_colour {
  cursor: default !important;
  background-color: #f2eeed !important;
}
.vowel_panel .v6btn_colour:before, .vowel_panel .v6dis_colour:before, .vowel_panel .v6btn_colour_record_highlight:before {
  content: none;
}
.vowel_panel .v6high_colour:before {
  content: "x";
  line-height: 43px;
}
.vowel_panel .v6btn_numbers {
  padding: unset;
  color: #006bb5;
  background-color: white;
  color: #006bb5;
  background-color: white;
}
.vowel_panel .v6btn_numbers:before {
  color: #006bb5;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
}
.vowel_panel .v6btn_numbers:hover:before {
  color: white;
  background-color: #006bb5;
}
.vowel_panel .v6btn_numbers:before {
  content: "6";
}
@media (hover: hover) {
  .vowel_panel .v6btn_numbers:hover {
    color: white;
    background-color: #006bb5;
    cursor: pointer;
  }
}
.vowel_panel .v6high_numbers {
  color: white;
  background-color: green;
  padding: 0px;
}
.vowel_panel .v6high_numbers:before {
  height: 100%;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
  line-height: 1;
}
@media (hover: hover) {
  .vowel_panel .v6high_numbers:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v6high_numbers:before {
  content: "6";
}
.vowel_panel .v6btn_numbers_record_highlight {
  background-color: #006bb5;
  padding: unset;
  cursor: default !important;
  margin-top: -7px;
}
.vowel_panel .v6btn_numbers_record_highlight:before {
  color: white;
  height: 100%;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
  line-height: 1;
}
.vowel_panel .v6btn_numbers_record_highlight:hover {
  background-color: #006bb5;
}
.vowel_panel .v6btn_numbers_record_highlight:before {
  content: "6";
}
.vowel_panel .v6dis_numbers {
  padding: 0px;
  cursor: default !important;
}
.vowel_panel .v6dis_numbers:before {
  color: rgba(0, 107, 181, 0.3803921569);
  background-color: white;
  height: 100%;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
  line-height: 1;
}
.vowel_panel .v6dis_numbers:before {
  content: "6";
}
.vowel_panel .v6btn_black {
  background-color: #000;
}
@media (hover: hover) {
  .vowel_panel .v6btn_black:hover {
    background-color: white;
    border: 3px solid #000 !important;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v6high_black {
  color: #000;
  background-color: white;
  border: 3px solid #000 !important;
  line-height: 0.3 !important;
  padding: 0 0 11px 0;
}
.vowel_panel .v6high_black:before {
  margin-top: -7px;
}
@media (hover: hover) {
  .vowel_panel .v6high_black:hover {
    color: #464646;
    background-color: white;
    border: 3px solid #464646 !important;
    transition: all 0.2s;
    cursor: pointer;
  }
}
.vowel_panel .v6btn_black_record_highlight {
  color: #000;
  background-color: white;
  border: 3px solid #000 !important;
  margin: 0;
}
.vowel_panel .v6dis_black {
  cursor: default !important;
  background-color: #EEE;
}
.vowel_panel .v6dis_black:hover {
  background-color: #EEE;
}
.vowel_panel .v6btn_black:before, .vowel_panel .v6dis_black:before, .vowel_panel .v6btn_black_record_highlight:before {
  content: none;
}
.vowel_panel .v6high_black:before {
  content: "x";
  line-height: 43px;
}
.vowel_panel .vcButton.v7:before {
  line-height: 50px;
}
.vowel_panel .vcButton.v7:before {
  content: "ʌ";
}
.vowel_panel .vcButton.v7_select {
  color: white;
  background-color: #0089e8;
}
.vowel_panel .v7btn, .vowel_panel .v7dis, .vowel_panel .v7high, .vowel_panel .v7_record_highlight, .vowel_panel .v7btn_colour, .vowel_panel .v7dis_colour, .vowel_panel .v7high_colour, .vowel_panel .v7btn_colour_record_highlight, .vowel_panel .v7btn_numbers, .vowel_panel .v7dis_numbers, .vowel_panel .v7high_numbers, .vowel_panel .v7btn_numbers_record_highlight, .vowel_panel .v7btn_black, .vowel_panel .v7dis_black, .vowel_panel .v7high_black, .vowel_panel .v7btn_numbers_record_black {
  width: 100%;
  height: 100%;
  background-color: white;
  transition: background-color 0.2s;
  line-height: 45px !important;
  text-align: center;
  border-radius: 5px;
  color: #0089e8;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 3em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  padding: 0 0 9px 0;
  margin: 0 auto 0 !important;
}
@media (hover: none) {
  .vowel_panel .v7btn, .vowel_panel .v7dis, .vowel_panel .v7high, .vowel_panel .v7_record_highlight, .vowel_panel .v7btn_colour, .vowel_panel .v7dis_colour, .vowel_panel .v7high_colour, .vowel_panel .v7btn_colour_record_highlight, .vowel_panel .v7btn_numbers, .vowel_panel .v7dis_numbers, .vowel_panel .v7high_numbers, .vowel_panel .v7btn_numbers_record_highlight, .vowel_panel .v7btn_black, .vowel_panel .v7dis_black, .vowel_panel .v7high_black, .vowel_panel .v7btn_numbers_record_black {
    padding: 0 0 7px 0;
  }
}
@media (hover: hover) {
  .vowel_panel .v7btn:hover, .vowel_panel .v7dis:hover, .vowel_panel .v7high:hover, .vowel_panel .v7_record_highlight:hover, .vowel_panel .v7btn_colour:hover, .vowel_panel .v7dis_colour:hover, .vowel_panel .v7high_colour:hover, .vowel_panel .v7btn_colour_record_highlight:hover, .vowel_panel .v7btn_numbers:hover, .vowel_panel .v7dis_numbers:hover, .vowel_panel .v7high_numbers:hover, .vowel_panel .v7btn_numbers_record_highlight:hover, .vowel_panel .v7btn_black:hover, .vowel_panel .v7dis_black:hover, .vowel_panel .v7high_black:hover, .vowel_panel .v7btn_numbers_record_black:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
.vowel_panel .v7btn:before, .vowel_panel .v7dis:before, .vowel_panel .v7high:before, .vowel_panel .v7_record_highlight:before, .vowel_panel .v7btn_colour:before, .vowel_panel .v7dis_colour:before, .vowel_panel .v7high_colour:before, .vowel_panel .v7btn_colour_record_highlight:before, .vowel_panel .v7btn_numbers:before, .vowel_panel .v7dis_numbers:before, .vowel_panel .v7high_numbers:before, .vowel_panel .v7btn_numbers_record_highlight:before, .vowel_panel .v7btn_black:before, .vowel_panel .v7dis_black:before, .vowel_panel .v7high_black:before, .vowel_panel .v7btn_numbers_record_black:before {
  line-height: 50px;
}
.vowel_panel .v7btn:before, .vowel_panel .v7dis:before, .vowel_panel .v7high:before, .vowel_panel .v7_record_highlight:before, .vowel_panel .v7btn_colour:before, .vowel_panel .v7dis_colour:before, .vowel_panel .v7high_colour:before, .vowel_panel .v7btn_colour_record_highlight:before, .vowel_panel .v7btn_numbers:before, .vowel_panel .v7dis_numbers:before, .vowel_panel .v7high_numbers:before, .vowel_panel .v7btn_numbers_record_highlight:before, .vowel_panel .v7btn_black:before, .vowel_panel .v7dis_black:before, .vowel_panel .v7high_black:before, .vowel_panel .v7btn_numbers_record_black:before {
  content: "ʌ";
}
.vowel_panel .v7dis {
  color: #6ec0f9;
}
@media (hover: hover) {
  .vowel_panel .v7dis:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
.vowel_panel .v7high {
  color: white;
  background-color: green;
}
@media (hover: hover) {
  .vowel_panel .v7high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v7_record_highlight {
  color: white;
  background-color: #0089e8;
  cursor: default !important;
}
.vowel_panel .v7btn_colour {
  background-color: #e4bb2c;
}
@media (hover: hover) {
  .vowel_panel .v7btn_colour:hover {
    color: #e4bb2c;
    border: 3px solid #e4bb2c !important;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v7high_colour {
  color: #e4bb2c;
  background-color: white;
  border: 3px solid #e4bb2c !important;
  line-height: 0.3 !important;
  padding: 0 0 11px 0;
}
.vowel_panel .v7high_colour:before {
  margin-top: -7px;
}
@media (hover: hover) {
  .vowel_panel .v7high_colour:hover {
    color: #e7c243;
    background-color: white;
    border: 3px solid #e7c243 !important;
    transition: all 0.2s;
    cursor: pointer;
  }
}
.vowel_panel .v7btn_colour_record_highlight {
  color: #e4bb2c;
  background-color: white;
  border: 3px solid #e4bb2c !important;
}
@media (hover: hover) {
  .vowel_panel .v7btn_colour_record_highlight:hover {
    color: #e4bb2c;
    background-color: white;
    border: 3px solid #e4bb2c !important;
    cursor: default !important;
  }
}
.vowel_panel .v7dis_colour {
  cursor: default !important;
  background-color: #fbf5e1 !important;
}
.vowel_panel .v7btn_colour:before, .vowel_panel .v7dis_colour:before, .vowel_panel .v7btn_colour_record_highlight:before {
  content: none;
}
.vowel_panel .v7high_colour:before {
  content: "x";
  line-height: 43px;
}
.vowel_panel .v7btn_numbers {
  padding: unset;
  color: #006bb5;
  background-color: white;
  color: #006bb5;
  background-color: white;
}
.vowel_panel .v7btn_numbers:before {
  color: #006bb5;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
}
.vowel_panel .v7btn_numbers:hover:before {
  color: white;
  background-color: #006bb5;
}
.vowel_panel .v7btn_numbers:before {
  content: "7";
}
@media (hover: hover) {
  .vowel_panel .v7btn_numbers:hover {
    color: white;
    background-color: #006bb5;
    cursor: pointer;
  }
}
.vowel_panel .v7high_numbers {
  color: white;
  background-color: green;
  padding: 0px;
}
.vowel_panel .v7high_numbers:before {
  height: 100%;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
  line-height: 1;
}
@media (hover: hover) {
  .vowel_panel .v7high_numbers:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v7high_numbers:before {
  content: "7";
}
.vowel_panel .v7btn_numbers_record_highlight {
  background-color: #006bb5;
  padding: unset;
  cursor: default !important;
  margin-top: -7px;
}
.vowel_panel .v7btn_numbers_record_highlight:before {
  color: white;
  height: 100%;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
  line-height: 1;
}
.vowel_panel .v7btn_numbers_record_highlight:hover {
  background-color: #006bb5;
}
.vowel_panel .v7btn_numbers_record_highlight:before {
  content: "7";
}
.vowel_panel .v7dis_numbers {
  padding: 0px;
  cursor: default !important;
}
.vowel_panel .v7dis_numbers:before {
  color: rgba(0, 107, 181, 0.3803921569);
  background-color: white;
  height: 100%;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
  line-height: 1;
}
.vowel_panel .v7dis_numbers:before {
  content: "7";
}
.vowel_panel .v7btn_black {
  background-color: #000;
}
@media (hover: hover) {
  .vowel_panel .v7btn_black:hover {
    background-color: white;
    border: 3px solid #000 !important;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v7high_black {
  color: #000;
  background-color: white;
  border: 3px solid #000 !important;
  line-height: 0.3 !important;
  padding: 0 0 11px 0;
}
.vowel_panel .v7high_black:before {
  margin-top: -7px;
}
@media (hover: hover) {
  .vowel_panel .v7high_black:hover {
    color: #464646;
    background-color: white;
    border: 3px solid #464646 !important;
    transition: all 0.2s;
    cursor: pointer;
  }
}
.vowel_panel .v7btn_black_record_highlight {
  color: #000;
  background-color: white;
  border: 3px solid #000 !important;
  margin: 0;
}
.vowel_panel .v7dis_black {
  cursor: default !important;
  background-color: #EEE;
}
.vowel_panel .v7dis_black:hover {
  background-color: #EEE;
}
.vowel_panel .v7btn_black:before, .vowel_panel .v7dis_black:before, .vowel_panel .v7btn_black_record_highlight:before {
  content: none;
}
.vowel_panel .v7high_black:before {
  content: "x";
  line-height: 43px;
}
.vowel_panel .vcButton.v8:before {
  line-height: 50px;
}
.vowel_panel .vcButton.v8:before {
  content: "o";
}
.vowel_panel .vcButton.v8_select {
  color: white;
  background-color: #0089e8;
}
.vowel_panel .v8btn, .vowel_panel .v8dis, .vowel_panel .v8high, .vowel_panel .v8_record_highlight, .vowel_panel .v8btn_colour, .vowel_panel .v8dis_colour, .vowel_panel .v8high_colour, .vowel_panel .v8btn_colour_record_highlight, .vowel_panel .v8btn_numbers, .vowel_panel .v8dis_numbers, .vowel_panel .v8high_numbers, .vowel_panel .v8btn_numbers_record_highlight, .vowel_panel .v8btn_black, .vowel_panel .v8dis_black, .vowel_panel .v8high_black, .vowel_panel .v8btn_numbers_record_black {
  width: 100%;
  height: 100%;
  background-color: white;
  transition: background-color 0.2s;
  line-height: 45px !important;
  text-align: center;
  border-radius: 5px;
  color: #0089e8;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 3em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  padding: 0 0 9px 0;
  margin: 0 auto 0 !important;
}
@media (hover: none) {
  .vowel_panel .v8btn, .vowel_panel .v8dis, .vowel_panel .v8high, .vowel_panel .v8_record_highlight, .vowel_panel .v8btn_colour, .vowel_panel .v8dis_colour, .vowel_panel .v8high_colour, .vowel_panel .v8btn_colour_record_highlight, .vowel_panel .v8btn_numbers, .vowel_panel .v8dis_numbers, .vowel_panel .v8high_numbers, .vowel_panel .v8btn_numbers_record_highlight, .vowel_panel .v8btn_black, .vowel_panel .v8dis_black, .vowel_panel .v8high_black, .vowel_panel .v8btn_numbers_record_black {
    padding: 0 0 7px 0;
  }
}
@media (hover: hover) {
  .vowel_panel .v8btn:hover, .vowel_panel .v8dis:hover, .vowel_panel .v8high:hover, .vowel_panel .v8_record_highlight:hover, .vowel_panel .v8btn_colour:hover, .vowel_panel .v8dis_colour:hover, .vowel_panel .v8high_colour:hover, .vowel_panel .v8btn_colour_record_highlight:hover, .vowel_panel .v8btn_numbers:hover, .vowel_panel .v8dis_numbers:hover, .vowel_panel .v8high_numbers:hover, .vowel_panel .v8btn_numbers_record_highlight:hover, .vowel_panel .v8btn_black:hover, .vowel_panel .v8dis_black:hover, .vowel_panel .v8high_black:hover, .vowel_panel .v8btn_numbers_record_black:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
.vowel_panel .v8btn:before, .vowel_panel .v8dis:before, .vowel_panel .v8high:before, .vowel_panel .v8_record_highlight:before, .vowel_panel .v8btn_colour:before, .vowel_panel .v8dis_colour:before, .vowel_panel .v8high_colour:before, .vowel_panel .v8btn_colour_record_highlight:before, .vowel_panel .v8btn_numbers:before, .vowel_panel .v8dis_numbers:before, .vowel_panel .v8high_numbers:before, .vowel_panel .v8btn_numbers_record_highlight:before, .vowel_panel .v8btn_black:before, .vowel_panel .v8dis_black:before, .vowel_panel .v8high_black:before, .vowel_panel .v8btn_numbers_record_black:before {
  line-height: 50px;
}
.vowel_panel .v8btn:before, .vowel_panel .v8dis:before, .vowel_panel .v8high:before, .vowel_panel .v8_record_highlight:before, .vowel_panel .v8btn_colour:before, .vowel_panel .v8dis_colour:before, .vowel_panel .v8high_colour:before, .vowel_panel .v8btn_colour_record_highlight:before, .vowel_panel .v8btn_numbers:before, .vowel_panel .v8dis_numbers:before, .vowel_panel .v8high_numbers:before, .vowel_panel .v8btn_numbers_record_highlight:before, .vowel_panel .v8btn_black:before, .vowel_panel .v8dis_black:before, .vowel_panel .v8high_black:before, .vowel_panel .v8btn_numbers_record_black:before {
  content: "o";
}
.vowel_panel .v8dis {
  color: #6ec0f9;
}
@media (hover: hover) {
  .vowel_panel .v8dis:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
.vowel_panel .v8high {
  color: white;
  background-color: green;
}
@media (hover: hover) {
  .vowel_panel .v8high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v8_record_highlight {
  color: white;
  background-color: #0089e8;
  cursor: default !important;
}
.vowel_panel .v8btn_colour {
  background-color: #fea9df;
}
@media (hover: hover) {
  .vowel_panel .v8btn_colour:hover {
    color: #fea9df;
    border: 3px solid #fea9df !important;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v8high_colour {
  color: #fea9df;
  background-color: white;
  border: 3px solid #fea9df !important;
  line-height: 0.3 !important;
  padding: 0 0 11px 0;
}
.vowel_panel .v8high_colour:before {
  margin-top: -7px;
}
@media (hover: hover) {
  .vowel_panel .v8high_colour:hover {
    color: #fec2e8;
    background-color: white;
    border: 3px solid #fec2e8 !important;
    transition: all 0.2s;
    cursor: pointer;
  }
}
.vowel_panel .v8btn_colour_record_highlight {
  color: #fea9df;
  background-color: white;
  border: 3px solid #fea9df !important;
}
@media (hover: hover) {
  .vowel_panel .v8btn_colour_record_highlight:hover {
    color: #fea9df;
    background-color: white;
    border: 3px solid #fea9df !important;
    cursor: default !important;
  }
}
.vowel_panel .v8dis_colour {
  cursor: default !important;
  background-color: #fae9f4 !important;
}
.vowel_panel .v8btn_colour:before, .vowel_panel .v8dis_colour:before, .vowel_panel .v8btn_colour_record_highlight:before {
  content: none;
}
.vowel_panel .v8high_colour:before {
  content: "x";
  line-height: 43px;
}
.vowel_panel .v8btn_numbers {
  padding: unset;
  color: #006bb5;
  background-color: white;
  color: #006bb5;
  background-color: white;
}
.vowel_panel .v8btn_numbers:before {
  color: #006bb5;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
}
.vowel_panel .v8btn_numbers:hover:before {
  color: white;
  background-color: #006bb5;
}
.vowel_panel .v8btn_numbers:before {
  content: "8";
}
@media (hover: hover) {
  .vowel_panel .v8btn_numbers:hover {
    color: white;
    background-color: #006bb5;
    cursor: pointer;
  }
}
.vowel_panel .v8high_numbers {
  color: white;
  background-color: green;
  padding: 0px;
}
.vowel_panel .v8high_numbers:before {
  height: 100%;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
  line-height: 1;
}
@media (hover: hover) {
  .vowel_panel .v8high_numbers:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v8high_numbers:before {
  content: "8";
}
.vowel_panel .v8btn_numbers_record_highlight {
  background-color: #006bb5;
  padding: unset;
  cursor: default !important;
  margin-top: -7px;
}
.vowel_panel .v8btn_numbers_record_highlight:before {
  color: white;
  height: 100%;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
  line-height: 1;
}
.vowel_panel .v8btn_numbers_record_highlight:hover {
  background-color: #006bb5;
}
.vowel_panel .v8btn_numbers_record_highlight:before {
  content: "8";
}
.vowel_panel .v8dis_numbers {
  padding: 0px;
  cursor: default !important;
}
.vowel_panel .v8dis_numbers:before {
  color: rgba(0, 107, 181, 0.3803921569);
  background-color: white;
  height: 100%;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
  line-height: 1;
}
.vowel_panel .v8dis_numbers:before {
  content: "8";
}
.vowel_panel .v8btn_black {
  background-color: #000;
}
@media (hover: hover) {
  .vowel_panel .v8btn_black:hover {
    background-color: white;
    border: 3px solid #000 !important;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v8high_black {
  color: #000;
  background-color: white;
  border: 3px solid #000 !important;
  line-height: 0.3 !important;
  padding: 0 0 11px 0;
}
.vowel_panel .v8high_black:before {
  margin-top: -7px;
}
@media (hover: hover) {
  .vowel_panel .v8high_black:hover {
    color: #464646;
    background-color: white;
    border: 3px solid #464646 !important;
    transition: all 0.2s;
    cursor: pointer;
  }
}
.vowel_panel .v8btn_black_record_highlight {
  color: #000;
  background-color: white;
  border: 3px solid #000 !important;
  margin: 0;
}
.vowel_panel .v8dis_black {
  cursor: default !important;
  background-color: #EEE;
}
.vowel_panel .v8dis_black:hover {
  background-color: #EEE;
}
.vowel_panel .v8btn_black:before, .vowel_panel .v8dis_black:before, .vowel_panel .v8btn_black_record_highlight:before {
  content: none;
}
.vowel_panel .v8high_black:before {
  content: "x";
  line-height: 43px;
}
.vowel_panel .vcButton.v9:before {
  line-height: 50px;
}
.vowel_panel .vcButton.v9:before {
  content: "ʊ";
}
.vowel_panel .vcButton.v9_select {
  color: white;
  background-color: #0089e8;
}
.vowel_panel .v9btn, .vowel_panel .v9dis, .vowel_panel .v9high, .vowel_panel .v9_record_highlight, .vowel_panel .v9btn_colour, .vowel_panel .v9dis_colour, .vowel_panel .v9high_colour, .vowel_panel .v9btn_colour_record_highlight, .vowel_panel .v9btn_numbers, .vowel_panel .v9dis_numbers, .vowel_panel .v9high_numbers, .vowel_panel .v9btn_numbers_record_highlight, .vowel_panel .v9btn_black, .vowel_panel .v9dis_black, .vowel_panel .v9high_black, .vowel_panel .v9btn_numbers_record_black {
  width: 100%;
  height: 100%;
  background-color: white;
  transition: background-color 0.2s;
  line-height: 45px !important;
  text-align: center;
  border-radius: 5px;
  color: #0089e8;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 3em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  padding: 0 0 9px 0;
  margin: 0 auto 0 !important;
}
@media (hover: none) {
  .vowel_panel .v9btn, .vowel_panel .v9dis, .vowel_panel .v9high, .vowel_panel .v9_record_highlight, .vowel_panel .v9btn_colour, .vowel_panel .v9dis_colour, .vowel_panel .v9high_colour, .vowel_panel .v9btn_colour_record_highlight, .vowel_panel .v9btn_numbers, .vowel_panel .v9dis_numbers, .vowel_panel .v9high_numbers, .vowel_panel .v9btn_numbers_record_highlight, .vowel_panel .v9btn_black, .vowel_panel .v9dis_black, .vowel_panel .v9high_black, .vowel_panel .v9btn_numbers_record_black {
    padding: 0 0 7px 0;
  }
}
@media (hover: hover) {
  .vowel_panel .v9btn:hover, .vowel_panel .v9dis:hover, .vowel_panel .v9high:hover, .vowel_panel .v9_record_highlight:hover, .vowel_panel .v9btn_colour:hover, .vowel_panel .v9dis_colour:hover, .vowel_panel .v9high_colour:hover, .vowel_panel .v9btn_colour_record_highlight:hover, .vowel_panel .v9btn_numbers:hover, .vowel_panel .v9dis_numbers:hover, .vowel_panel .v9high_numbers:hover, .vowel_panel .v9btn_numbers_record_highlight:hover, .vowel_panel .v9btn_black:hover, .vowel_panel .v9dis_black:hover, .vowel_panel .v9high_black:hover, .vowel_panel .v9btn_numbers_record_black:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
.vowel_panel .v9btn:before, .vowel_panel .v9dis:before, .vowel_panel .v9high:before, .vowel_panel .v9_record_highlight:before, .vowel_panel .v9btn_colour:before, .vowel_panel .v9dis_colour:before, .vowel_panel .v9high_colour:before, .vowel_panel .v9btn_colour_record_highlight:before, .vowel_panel .v9btn_numbers:before, .vowel_panel .v9dis_numbers:before, .vowel_panel .v9high_numbers:before, .vowel_panel .v9btn_numbers_record_highlight:before, .vowel_panel .v9btn_black:before, .vowel_panel .v9dis_black:before, .vowel_panel .v9high_black:before, .vowel_panel .v9btn_numbers_record_black:before {
  line-height: 50px;
}
.vowel_panel .v9btn:before, .vowel_panel .v9dis:before, .vowel_panel .v9high:before, .vowel_panel .v9_record_highlight:before, .vowel_panel .v9btn_colour:before, .vowel_panel .v9dis_colour:before, .vowel_panel .v9high_colour:before, .vowel_panel .v9btn_colour_record_highlight:before, .vowel_panel .v9btn_numbers:before, .vowel_panel .v9dis_numbers:before, .vowel_panel .v9high_numbers:before, .vowel_panel .v9btn_numbers_record_highlight:before, .vowel_panel .v9btn_black:before, .vowel_panel .v9dis_black:before, .vowel_panel .v9high_black:before, .vowel_panel .v9btn_numbers_record_black:before {
  content: "ʊ";
}
.vowel_panel .v9dis {
  color: #6ec0f9;
}
@media (hover: hover) {
  .vowel_panel .v9dis:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
.vowel_panel .v9high {
  color: white;
  background-color: green;
}
@media (hover: hover) {
  .vowel_panel .v9high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v9_record_highlight {
  color: white;
  background-color: #0089e8;
  cursor: default !important;
}
.vowel_panel .v9btn_colour {
  background-image: repeating-radial-gradient(circle at 0 0, transparent 0, #d4c3a8 5px), repeating-linear-gradient(#b09a75, #b09c7d);
}
@media (hover: hover) {
  .vowel_panel .v9btn_colour:hover {
    color: #b09a75;
    border: 3px solid #b09a75 !important;
    background-image: none;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v9high_colour {
  color: #b09a75;
  background-color: white;
  border: 3px solid #b09a75 !important;
  line-height: 0.3 !important;
  padding: 0 0 11px 0;
}
.vowel_panel .v9high_colour:before {
  margin-top: -7px;
}
@media (hover: hover) {
  .vowel_panel .v9high_colour:hover {
    color: #b9a685;
    background-color: white;
    border: 3px solid #b9a685 !important;
    transition: all 0.2s;
    cursor: pointer;
  }
}
.vowel_panel .v9btn_colour_record_highlight {
  color: #b09a75;
  background-color: white;
  border: 3px solid #b09a75 !important;
}
@media (hover: hover) {
  .vowel_panel .v9btn_colour_record_highlight:hover {
    color: #b09a75;
    background-color: white;
    border: 3px solid #b09a75 !important;
    cursor: default !important;
  }
}
.vowel_panel .v9dis_colour {
  cursor: default !important;
  background-image: repeating-radial-gradient(circle at 0 0, transparent 0, #d4c3a8 5px), repeating-linear-gradient(#b09a75, #b09c7d);
  opacity: 0.3;
}
.vowel_panel .v9btn_colour:before, .vowel_panel .v9dis_colour:before, .vowel_panel .v9btn_colour_record_highlight:before {
  content: none;
}
.vowel_panel .v9high_colour:before {
  content: "x";
  line-height: 43px;
}
.vowel_panel .v9btn_numbers {
  padding: unset;
  color: #006bb5;
  background-color: white;
  color: #006bb5;
  background-color: white;
}
.vowel_panel .v9btn_numbers:before {
  color: #006bb5;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
}
.vowel_panel .v9btn_numbers:hover:before {
  color: white;
  background-color: #006bb5;
}
.vowel_panel .v9btn_numbers:before {
  content: "9";
}
@media (hover: hover) {
  .vowel_panel .v9btn_numbers:hover {
    color: white;
    background-color: #006bb5;
    cursor: pointer;
  }
}
.vowel_panel .v9high_numbers {
  color: white;
  background-color: green;
  padding: 0px;
}
.vowel_panel .v9high_numbers:before {
  height: 100%;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
  line-height: 1;
}
@media (hover: hover) {
  .vowel_panel .v9high_numbers:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v9high_numbers:before {
  content: "9";
}
.vowel_panel .v9btn_numbers_record_highlight {
  background-color: #006bb5;
  padding: unset;
  cursor: default !important;
  margin-top: -7px;
}
.vowel_panel .v9btn_numbers_record_highlight:before {
  color: white;
  height: 100%;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
  line-height: 1;
}
.vowel_panel .v9btn_numbers_record_highlight:hover {
  background-color: #006bb5;
}
.vowel_panel .v9btn_numbers_record_highlight:before {
  content: "9";
}
.vowel_panel .v9dis_numbers {
  padding: 0px;
  cursor: default !important;
}
.vowel_panel .v9dis_numbers:before {
  color: rgba(0, 107, 181, 0.3803921569);
  background-color: white;
  height: 100%;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
  line-height: 1;
}
.vowel_panel .v9dis_numbers:before {
  content: "9";
}
.vowel_panel .v9btn_black {
  background-color: #000;
}
@media (hover: hover) {
  .vowel_panel .v9btn_black:hover {
    background-color: white;
    border: 3px solid #000 !important;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v9high_black {
  color: #000;
  background-color: white;
  border: 3px solid #000 !important;
  line-height: 0.3 !important;
  padding: 0 0 11px 0;
}
.vowel_panel .v9high_black:before {
  margin-top: -7px;
}
@media (hover: hover) {
  .vowel_panel .v9high_black:hover {
    color: #464646;
    background-color: white;
    border: 3px solid #464646 !important;
    transition: all 0.2s;
    cursor: pointer;
  }
}
.vowel_panel .v9btn_black_record_highlight {
  color: #000;
  background-color: white;
  border: 3px solid #000 !important;
  margin: 0;
}
.vowel_panel .v9dis_black {
  cursor: default !important;
  background-color: #EEE;
}
.vowel_panel .v9dis_black:hover {
  background-color: #EEE;
}
.vowel_panel .v9btn_black:before, .vowel_panel .v9dis_black:before, .vowel_panel .v9btn_black_record_highlight:before {
  content: none;
}
.vowel_panel .v9high_black:before {
  content: "x";
  line-height: 43px;
}
.vowel_panel .vcButton.v10:before {
  line-height: 50px;
}
.vowel_panel .vcButton.v10:before {
  content: "u";
  line-height: 51px;
}
.vowel_panel .vcButton.v10_select {
  color: white;
  background-color: #0089e8;
}
.vowel_panel .v10btn, .vowel_panel .v10dis, .vowel_panel .v10high, .vowel_panel .v10_record_highlight, .vowel_panel .v10btn_colour, .vowel_panel .v10dis_colour, .vowel_panel .v10high_colour, .vowel_panel .v10btn_colour_record_highlight, .vowel_panel .v10btn_numbers, .vowel_panel .v10dis_numbers, .vowel_panel .v10high_numbers, .vowel_panel .v10btn_numbers_record_highlight, .vowel_panel .v10btn_black, .vowel_panel .v10dis_black, .vowel_panel .v10high_black, .vowel_panel .v10btn_numbers_record_black {
  width: 100%;
  height: 100%;
  background-color: white;
  transition: background-color 0.2s;
  line-height: 45px !important;
  text-align: center;
  border-radius: 5px;
  color: #0089e8;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 3em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  padding: 0 0 9px 0;
  margin: 0 auto 0 !important;
}
@media (hover: none) {
  .vowel_panel .v10btn, .vowel_panel .v10dis, .vowel_panel .v10high, .vowel_panel .v10_record_highlight, .vowel_panel .v10btn_colour, .vowel_panel .v10dis_colour, .vowel_panel .v10high_colour, .vowel_panel .v10btn_colour_record_highlight, .vowel_panel .v10btn_numbers, .vowel_panel .v10dis_numbers, .vowel_panel .v10high_numbers, .vowel_panel .v10btn_numbers_record_highlight, .vowel_panel .v10btn_black, .vowel_panel .v10dis_black, .vowel_panel .v10high_black, .vowel_panel .v10btn_numbers_record_black {
    padding: 0 0 7px 0;
  }
}
@media (hover: hover) {
  .vowel_panel .v10btn:hover, .vowel_panel .v10dis:hover, .vowel_panel .v10high:hover, .vowel_panel .v10_record_highlight:hover, .vowel_panel .v10btn_colour:hover, .vowel_panel .v10dis_colour:hover, .vowel_panel .v10high_colour:hover, .vowel_panel .v10btn_colour_record_highlight:hover, .vowel_panel .v10btn_numbers:hover, .vowel_panel .v10dis_numbers:hover, .vowel_panel .v10high_numbers:hover, .vowel_panel .v10btn_numbers_record_highlight:hover, .vowel_panel .v10btn_black:hover, .vowel_panel .v10dis_black:hover, .vowel_panel .v10high_black:hover, .vowel_panel .v10btn_numbers_record_black:hover {
    color: white;
    background-color: #0089e8;
    cursor: pointer;
  }
}
.vowel_panel .v10btn:before, .vowel_panel .v10dis:before, .vowel_panel .v10high:before, .vowel_panel .v10_record_highlight:before, .vowel_panel .v10btn_colour:before, .vowel_panel .v10dis_colour:before, .vowel_panel .v10high_colour:before, .vowel_panel .v10btn_colour_record_highlight:before, .vowel_panel .v10btn_numbers:before, .vowel_panel .v10dis_numbers:before, .vowel_panel .v10high_numbers:before, .vowel_panel .v10btn_numbers_record_highlight:before, .vowel_panel .v10btn_black:before, .vowel_panel .v10dis_black:before, .vowel_panel .v10high_black:before, .vowel_panel .v10btn_numbers_record_black:before {
  line-height: 50px;
}
.vowel_panel .v10btn:before, .vowel_panel .v10dis:before, .vowel_panel .v10high:before, .vowel_panel .v10_record_highlight:before, .vowel_panel .v10btn_colour:before, .vowel_panel .v10dis_colour:before, .vowel_panel .v10high_colour:before, .vowel_panel .v10btn_colour_record_highlight:before, .vowel_panel .v10btn_numbers:before, .vowel_panel .v10dis_numbers:before, .vowel_panel .v10high_numbers:before, .vowel_panel .v10btn_numbers_record_highlight:before, .vowel_panel .v10btn_black:before, .vowel_panel .v10dis_black:before, .vowel_panel .v10high_black:before, .vowel_panel .v10btn_numbers_record_black:before {
  content: "u";
  line-height: 51px;
}
.vowel_panel .v10dis {
  color: #6ec0f9;
}
@media (hover: hover) {
  .vowel_panel .v10dis:hover {
    color: #6ec0f9;
    background-color: white;
    cursor: default;
  }
}
.vowel_panel .v10high {
  color: white;
  background-color: green;
}
@media (hover: hover) {
  .vowel_panel .v10high:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v10_record_highlight {
  color: white;
  background-color: #0089e8;
  cursor: default !important;
}
.vowel_panel .v10btn_colour {
  background-color: #2178fa;
}
@media (hover: hover) {
  .vowel_panel .v10btn_colour:hover {
    color: #2178fa;
    border: 3px solid #2178fa !important;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v10high_colour {
  color: #2178fa;
  background-color: white;
  border: 3px solid #2178fa !important;
  line-height: 0.3 !important;
  padding: 0 0 11px 0;
}
.vowel_panel .v10high_colour:before {
  margin-top: -7px;
}
@media (hover: hover) {
  .vowel_panel .v10high_colour:hover {
    color: #3a87fb;
    background-color: white;
    border: 3px solid #3a87fb !important;
    transition: all 0.2s;
    cursor: pointer;
  }
}
.vowel_panel .v10btn_colour_record_highlight {
  color: #2178fa;
  background-color: white;
  border: 3px solid #2178fa !important;
}
@media (hover: hover) {
  .vowel_panel .v10btn_colour_record_highlight:hover {
    color: #2178fa;
    background-color: white;
    border: 3px solid #2178fa !important;
    cursor: default !important;
  }
}
.vowel_panel .v10dis_colour {
  cursor: default !important;
  background-color: #bcd6fc !important;
}
.vowel_panel .v10btn_colour:before, .vowel_panel .v10dis_colour:before, .vowel_panel .v10btn_colour_record_highlight:before {
  content: none;
}
.vowel_panel .v10high_colour:before {
  content: "x";
  line-height: 43px;
}
.vowel_panel .v10btn_numbers {
  padding: unset;
  color: #006bb5;
  background-color: white;
  color: #006bb5;
  background-color: white;
}
.vowel_panel .v10btn_numbers:before {
  color: #006bb5;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
}
.vowel_panel .v10btn_numbers:hover:before {
  color: white;
  background-color: #006bb5;
}
.vowel_panel .v10btn_numbers:before {
  content: "10";
  line-height: 51px;
}
@media (hover: hover) {
  .vowel_panel .v10btn_numbers:hover {
    color: white;
    background-color: #006bb5;
    cursor: pointer;
  }
}
.vowel_panel .v10high_numbers {
  color: white;
  background-color: green;
  padding: 0px;
}
.vowel_panel .v10high_numbers:before {
  height: 100%;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
  line-height: 1;
}
@media (hover: hover) {
  .vowel_panel .v10high_numbers:hover {
    color: green;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v10high_numbers:before {
  content: "10";
  line-height: 51px;
}
.vowel_panel .v10btn_numbers_record_highlight {
  background-color: #006bb5;
  padding: unset;
  cursor: default !important;
  margin-top: -7px;
}
.vowel_panel .v10btn_numbers_record_highlight:before {
  color: white;
  height: 100%;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
  line-height: 1;
}
.vowel_panel .v10btn_numbers_record_highlight:hover {
  background-color: #006bb5;
}
.vowel_panel .v10btn_numbers_record_highlight:before {
  content: "10";
  line-height: 51px;
}
.vowel_panel .v10dis_numbers {
  padding: 0px;
  cursor: default !important;
}
.vowel_panel .v10dis_numbers:before {
  color: rgba(0, 107, 181, 0.3803921569);
  background-color: white;
  height: 100%;
  font-size: 0.75em;
  justify-content: center;
  align-items: center;
  margin: unset;
  padding: unset;
  line-height: 1;
}
.vowel_panel .v10dis_numbers:before {
  content: "10";
  line-height: 51px;
}
.vowel_panel .v10btn_black {
  background-color: #000;
}
@media (hover: hover) {
  .vowel_panel .v10btn_black:hover {
    background-color: white;
    border: 3px solid #000 !important;
    background-color: white;
    cursor: pointer;
  }
}
.vowel_panel .v10high_black {
  color: #000;
  background-color: white;
  border: 3px solid #000 !important;
  line-height: 0.3 !important;
  padding: 0 0 11px 0;
}
.vowel_panel .v10high_black:before {
  margin-top: -7px;
}
@media (hover: hover) {
  .vowel_panel .v10high_black:hover {
    color: #464646;
    background-color: white;
    border: 3px solid #464646 !important;
    transition: all 0.2s;
    cursor: pointer;
  }
}
.vowel_panel .v10btn_black_record_highlight {
  color: #000;
  background-color: white;
  border: 3px solid #000 !important;
  margin: 0;
}
.vowel_panel .v10dis_black {
  cursor: default !important;
  background-color: #EEE;
}
.vowel_panel .v10dis_black:hover {
  background-color: #EEE;
}
.vowel_panel .v10btn_black:before, .vowel_panel .v10dis_black:before, .vowel_panel .v10btn_black_record_highlight:before {
  content: none;
}
.vowel_panel .v10high_black:before {
  content: "x";
  line-height: 43px;
}
.vowel_panel .v1btn, .vowel_panel .v1dis, .vowel_panel .v1high, .vowel_panel .v1_record_highlight, .vowel_panel .v1btn_colour, .vowel_panel .v1dis_colour, .vowel_panel .v1high_colour, .vowel_panel .v1btn_colour_record_highlight {
  padding: 0 0 5px 0;
}
.vowel_panel .v1high_colour {
  padding: 0 0 16px 0;
}
.vowel_panel.game {
  padding: 20px;
  border-radius: 5px;
  width: 100%;
  height: 350px;
  background-color: #f6f6f6;
  place-self: center;
  /* margin: 2px auto -20px !important;*/
}
.vowel_panel.game button:before {
  line-height: 1;
  display: grid;
  height: 100%;
}
.vowel_panel.game .spacer {
  opacity: 65%;
  border-radius: 5px;
}

@media screen and (max-width: 991px) {
  .gameboard .proceed {
    grid-area: 3/1/span 2/span 1;
  }
}
@media screen and (max-width: 479px) {
  .gameboard {
    grid-template-columns: 100%;
  }
  .gameboard .response {
    margin: -20px auto 0px;
  }
  .vowel_panel.game {
    width: 100%;
    height: 350px;
    margin: 0 auto 0 !important;
  }
  .vowel_panel.game .vp_row .vcButton, .vowel_panel.game .vp_row .spacer {
    width: 60px;
    height: 60px;
  }
}
@media screen and (max-width: 394px) {
  .vowel_panel.game {
    margin: 0 auto 10px !important;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .vowel_select_table, .gameboard {
    padding: 0 !important;
  }
  .gameboard .vowel_panel {
    align-content: start;
    scale: 95%;
  }
  .gameboard .vowel_panel.game {
    align-content: start;
    align-self: start;
    height: 100%;
    padding: 12px;
    scale: 100%;
  }
  .gameboard .vowel_panel.game button.v1high_colour {
    color: #25cb3b;
    background-color: white;
    border: 3px solid #25cb3b !important;
    line-height: 0.3 !important;
    padding: 0 0 11px 0;
  }
  .gameboard .vowel_panel.game button.v1high_colour:before {
    line-height: 1 !important;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
  .gameboard .vowel_panel.game button.v1high_colour {
    line-height: 0.96 !important;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .gameboard .vowel_panel.game button.v2high_colour {
    color: #aef5bf;
    background-color: white;
    border: 3px solid #aef5bf !important;
    line-height: 0.3 !important;
    padding: 0 0 11px 0;
  }
  .gameboard .vowel_panel.game button.v2high_colour:before {
    line-height: 1 !important;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
  .gameboard .vowel_panel.game button.v2high_colour {
    line-height: 0.96 !important;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .gameboard .vowel_panel.game button.v3high_colour {
    color: #afafaf;
    background-color: white;
    border: 3px solid #afafaf !important;
    line-height: 0.3 !important;
    padding: 0 0 11px 0;
  }
  .gameboard .vowel_panel.game button.v3high_colour:before {
    line-height: 1 !important;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
  .gameboard .vowel_panel.game button.v3high_colour {
    line-height: 0.96 !important;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .gameboard .vowel_panel.game button.v4high_colour {
    color: #e13531;
    background-color: white;
    border: 3px solid #e13531 !important;
    line-height: 0.3 !important;
    padding: 0 0 11px 0;
  }
  .gameboard .vowel_panel.game button.v4high_colour:before {
    line-height: 1 !important;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
  .gameboard .vowel_panel.game button.v4high_colour {
    line-height: 0.96 !important;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .gameboard .vowel_panel.game button.v5high_colour {
    color: #383838;
    background-color: white;
    border: 3px solid #383838 !important;
    line-height: 0.3 !important;
    padding: 0 0 11px 0;
  }
  .gameboard .vowel_panel.game button.v5high_colour:before {
    line-height: 1 !important;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
  .gameboard .vowel_panel.game button.v5high_colour {
    line-height: 0.96 !important;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .gameboard .vowel_panel.game button.v6high_colour {
    color: #6c2114;
    background-color: white;
    border: 3px solid #6c2114 !important;
    line-height: 0.3 !important;
    padding: 0 0 11px 0;
  }
  .gameboard .vowel_panel.game button.v6high_colour:before {
    line-height: 1 !important;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
  .gameboard .vowel_panel.game button.v6high_colour {
    line-height: 0.96 !important;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .gameboard .vowel_panel.game button.v7high_colour {
    color: #e4bb2c;
    background-color: white;
    border: 3px solid #e4bb2c !important;
    line-height: 0.3 !important;
    padding: 0 0 11px 0;
  }
  .gameboard .vowel_panel.game button.v7high_colour:before {
    line-height: 1 !important;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
  .gameboard .vowel_panel.game button.v7high_colour {
    line-height: 0.96 !important;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .gameboard .vowel_panel.game button.v8high_colour {
    color: #fea9df;
    background-color: white;
    border: 3px solid #fea9df !important;
    line-height: 0.3 !important;
    padding: 0 0 11px 0;
  }
  .gameboard .vowel_panel.game button.v8high_colour:before {
    line-height: 1 !important;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
  .gameboard .vowel_panel.game button.v8high_colour {
    line-height: 0.96 !important;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .gameboard .vowel_panel.game button.v9high_colour {
    color: #b09a75;
    background-color: white;
    border: 3px solid #b09a75 !important;
    line-height: 0.3 !important;
    padding: 0 0 11px 0;
  }
  .gameboard .vowel_panel.game button.v9high_colour:before {
    line-height: 1 !important;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
  .gameboard .vowel_panel.game button.v9high_colour {
    line-height: 0.96 !important;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .gameboard .vowel_panel.game button.v10high_colour {
    color: #2178fa;
    background-color: white;
    border: 3px solid #2178fa !important;
    line-height: 0.3 !important;
    padding: 0 0 11px 0;
  }
  .gameboard .vowel_panel.game button.v10high_colour:before {
    line-height: 1 !important;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
  .gameboard .vowel_panel.game button.v10high_colour {
    line-height: 0.96 !important;
  }
}
@media screen and (max-height: 394px) and (orientation: landscape) {
  .vowel_panel.game {
    align-self: start;
    scale: 100%;
    padding: 10px;
    height: 100%;
  }
  .vowel_panel.game button:before {
    line-height: 1.15 !important;
  }
}
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.vowel_panel.game {
  grid-area: vowelgrid;
}

@media screen and (max-height: 479px) and (orientation: landscape) {
  #eacContentInner {
    padding: 0px !important;
  }
  #gameContainer {
    display: grid;
  }
  .vowels.gameboard {
    width: 100%;
    justify-self: center;
    grid-template-rows: minmax(0, 49px) minmax(0, 49px) minmax(0, 49px) minmax(0, 100px) minmax(0, auto);
    grid-template-columns: minmax(0, 45%) minmax(0, 400px);
    grid-template-areas: "sns sns" "ct vowelgrid" "timer vowelgrid" "response vowelgrid" "gameinfo vowelgrid";
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .vowels.gameboard .vowel_panel.game {
    margin: 0 auto;
  }
  .vowels.gameboard .select.sgbtnColourToggle {
    margin: 0;
  }
  .vowels.gameboard .timer {
    margin: 0 !important;
    grid-template-columns: minmax(0, 32%) minmax(0, 68%);
  }
  .vowels.gameboard .timer #runner {
    height: inherit;
  }
  .vowels.gameboard .proceed {
    margin: 0;
    grid-area: 2/1/3/2;
  }
  .vowels.gameboard .response .msgbubble#wrongBubble:after {
    margin: 0.2em 0 -0.25em;
  }
  .vowels.gameboard .recordpanel {
    grid-area: 3/1/4/2;
    height: 100%;
  }
  .vowels.gameboard .recordpanel .rcp {
    line-height: clamp(1.15rem, 2.5vw, 1.25rem) !important;
    font-size: clamp(1.15rem, 2.5vw, 1.05rem) !important;
  }
}
@media screen and (max-height: 767px) and (orientation: landscape) {
  .vowels.gameboard .recordpanel {
    grid-area: 4/1/5/2;
    height: 100%;
  }
}
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
#v_grid_report {
  display: grid;
  grid-template-columns: min(80px, 9vw) min(80px, 9vw) min(80px, 9vw) min(80px, 9vw) min(80px, 9vw);
  grid-template-rows: min(80px, 9vw) min(80px, 9vw) min(80px, 9vw) min(80px, 9vw) min(80px, 9vw);
  gap: 5px;
  font-size: 1.75em;
  align-self: start;
  justify-self: center;
}

.v1trans {
  color: white;
  background: none;
  line-height: 0.8em;
  grid-area: symbol;
  align-self: center;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 2.25rem;
}
.v1trans:before {
  content: "i";
}

.v2trans {
  color: white;
  background: none;
  line-height: 0.8em;
  grid-area: symbol;
  align-self: center;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 2.25rem;
}
.v2trans:before {
  content: "ɪ";
}

.v3trans {
  color: white;
  background: none;
  line-height: 0.8em;
  grid-area: symbol;
  align-self: center;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 2.25rem;
}
.v3trans:before {
  content: "e";
}

.v4trans {
  color: white;
  background: none;
  line-height: 0.8em;
  grid-area: symbol;
  align-self: center;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 2.25rem;
}
.v4trans:before {
  content: "ɛ";
}

.v5trans {
  color: white;
  background: none;
  line-height: 0.8em;
  grid-area: symbol;
  align-self: center;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 2.25rem;
}
.v5trans:before {
  content: "æ";
}

.v6trans {
  color: white;
  background: none;
  line-height: 0.8em;
  grid-area: symbol;
  align-self: center;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 2.25rem;
}
.v6trans:before {
  content: "ɑ";
}

.v7trans {
  color: white;
  background: none;
  line-height: 0.8em;
  grid-area: symbol;
  align-self: center;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 2.25rem;
}
.v7trans:before {
  content: "ʌ";
}

.v8trans {
  color: white;
  background: none;
  line-height: 0.8em;
  grid-area: symbol;
  align-self: center;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 2.25rem;
}
.v8trans:before {
  content: "o";
}

.v9trans {
  color: white;
  background: none;
  line-height: 0.8em;
  grid-area: symbol;
  align-self: center;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 2.25rem;
}
.v9trans:before {
  content: "ʊ";
}

.v10trans {
  color: white;
  background: none;
  line-height: 0.8em;
  grid-area: symbol;
  align-self: center;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 2.25rem;
}
.v10trans:before {
  content: "u";
  line-height: 50px;
}

/*.v1trans, .v7trans {
    margin-top: 10px;
}*/
.overall_vowels_wrapper {
  display: table;
  height: 424px;
  overflow: hidden;
  border: 1px solid #EEE;
  margin-bottom: 5px;
}

.overall_vowels {
  display: grid;
  place-content: start;
  grid-template-columns: 65% 35%;
  grid-template-rows: auto auto 125px auto auto auto;
  grid-template-areas: "average-label average-score" "timer-label timer-container" "legend legend" "advice advice" "retry retry" "get-pdf get-pdf";
}

.recc_popup_click, .retryButton, .get_pdf {
  justify-self: left;
  margin: 5px 0;
  font-size: 21px;
}

.recc_popup_click {
  grid-area: advice;
}

.recc_popup {
  font-size: 21px;
  padding: 0.25em 1em 1em 0;
}

.recc {
  background-color: white;
  opacity: 0.97;
  grid-area: 1/1/span 3/span 2;
}

.retryButton {
  grid-area: retry;
}

.get_pdf {
  grid-area: get-pdf;
}

@media screen and (max-width: 991px) {
  .recc_popup {
    font-size: clamp(1.28rem, 3.5vw, 1.2rem);
    padding: 0.25em 1em 0 0;
  }
}
@media screen and (max-width: 767px) {
  #v_grid_report {
    display: grid;
    grid-template-columns: min(80px, 15vw) min(80px, 15vw) min(80px, 15vw) min(80px, 15vw) min(80px, 15vw);
    grid-template-rows: min(80px, 15vw) min(80px, 15vw) min(80px, 15vw) min(80px, 15vw) min(80px, 15vw);
    gap: 5px;
    font-size: 1.75em;
    align-self: start;
    justify-self: center;
  }
  .v1trans {
    font-size: clamp(25px, 6.5vw, 40px);
    line-height: clamp(20px, 6.5vw, 40px);
  }
  .v2trans {
    font-size: clamp(25px, 6.5vw, 40px);
    line-height: clamp(20px, 6.5vw, 40px);
  }
  .v3trans {
    font-size: clamp(25px, 6.5vw, 40px);
    line-height: clamp(20px, 6.5vw, 40px);
  }
  .v4trans {
    font-size: clamp(25px, 6.5vw, 40px);
    line-height: clamp(20px, 6.5vw, 40px);
  }
  .v5trans {
    font-size: clamp(25px, 6.5vw, 40px);
    line-height: clamp(20px, 6.5vw, 40px);
  }
  .v6trans {
    font-size: clamp(25px, 6.5vw, 40px);
    line-height: clamp(20px, 6.5vw, 40px);
  }
  .v7trans {
    font-size: clamp(25px, 6.5vw, 40px);
    line-height: clamp(20px, 6.5vw, 40px);
  }
  .v8trans {
    font-size: clamp(25px, 6.5vw, 40px);
    line-height: clamp(20px, 6.5vw, 40px);
  }
  .v9trans {
    font-size: clamp(25px, 6.5vw, 40px);
    line-height: clamp(20px, 6.5vw, 40px);
  }
  .v10trans {
    font-size: clamp(25px, 6.5vw, 40px);
    line-height: clamp(20px, 6.5vw, 40px);
  }
  /*.v1trans, .v7trans {
      font-size: clamp(30px, 5.5vw, 36px);
      line-height: clamp(20px, 7.25vw, 35px);
  }*/
  .recc_popup {
    font-size: clamp(1.4rem, 5.5vw, 1.6rem);
    padding: 0.25em 1em 0.75em 0;
  }
  .overall_vowels {
    display: grid;
    place-content: start;
    grid-template-columns: 65% 35%;
    grid-template-rows: auto auto 165px auto auto auto;
    grid-template-areas: "average-label average-score" "timer-label timer-container" "legend legend" "advice advice" "retry retry" "get-pdf get-pdf";
    margin: 7px 0 0;
    max-width: 606px;
    width: 87%;
    justify-self: center;
  }
  .overall_vowels .recc_popup_click, .overall_vowels .retryButton, .overall_vowels .get_pdf {
    justify-self: center;
    margin: 5px 0;
    font-size: clamp(1.5em, 3.5vw, 1.75em);
  }
  a#daft_track_progress, a#daft_reportcards {
    margin: 0;
    justify-self: center;
    max-width: 606px;
    width: 87%;
  }
  .get_pdf {
    margin: 5px 0 0 !important;
  }
}
@media screen and (max-width: 479px) {
  .overall_vowels {
    grid-template-columns: 62% 38%;
    width: 100%;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .overall_vowels {
    grid-template-rows: auto auto auto auto auto auto;
  }
}
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.vowel_select_table {
  display: grid;
  align-content: start;
  justify-content: center;
  grid-template-columns: 47.5% 47.5%;
  grid-template-rows: repeat(5, auto);
  grid-column-gap: 5%;
  margin: 0 9%;
  padding: 0.5em 1em;
}

#level_select_vowels_desc {
  grid-row: 2;
  align-self: center;
  display: block;
  font-size: 1.75em;
  margin-bottom: 0;
  padding-top: 4px;
}
#level_select_vowels_desc > div.visible {
  display: flex !important;
  flex-wrap: wrap;
  -moz-column-gap: 0.3em;
       column-gap: 0.3em;
  row-gap: 0.3em;
  width: 100%;
  margin: 0 auto;
  max-width: 606px;
}
#level_select_vowels_desc > div.visible p {
  align-self: center;
  margin-top: -0.13em;
  font-size: 21px;
  font-weight: 600;
}

#vowel_s_contain {
  max-width: 606px;
  margin: 5px auto;
  display: flex !important;
  flex-wrap: wrap;
  -moz-column-gap: 0.55em;
       column-gap: 0.55em;
  row-gap: 0.55em;
  width: 100%;
  margin: 0 auto;
  max-width: 606px;
}
#vowel_s_contain > .vowel_s {
  font-size: 1.75em;
  color: white;
  padding-top: 2px;
}
#vowel_s_contain > .vowel_s.vowel_s_other {
  font-size: 21px;
  color: #0089e8;
}

@supports (-webkit-touch-callout: none) {
  #vowel_s_contain {
    -moz-column-gap: 0.3em;
         column-gap: 0.3em;
    row-gap: 0.3em;
  }
}
@media screen and (max-width: 991px) {
  .vowel_select_table {
    grid-template-columns: 100%;
    grid-template-rows: 1fr;
    grid-column-gap: 0;
    margin: 0;
  }
  #oopsSwitch, #level_select_vowels_desc {
    grid-column-start: auto;
    grid-column-end: auto;
    grid-row-start: auto;
    grid-row-end: auto;
    margin-top: 0;
    margin-bottom: 25px;
  }
  #oopsSwitch {
    min-height: 49px;
    max-height: 100%;
  }
  #level_select_vowels_desc {
    grid-row-start: auto;
    grid-row-end: auto;
  }
}
@media screen and (max-width: 767px) {
  #vars td {
    padding: 7px;
    display: block;
    float: left;
    width: 100% !important;
  }
}
@media screen and (max-width: 479px) {
  .vowel_select_table {
    padding: 0;
  }
}
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.ipa_symbol {
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 1em;
  width: 1.15em;
  height: 1.15em;
  background-color: #0089e8;
  border-radius: 3px;
  padding: 0 0 0.25em;
  line-height: 0.75em;
  color: white;
}

.tall {
  padding-bottom: 0.15em;
}

@supports (-webkit-touch-callout: none) {
  .ipa_symbol {
    padding-left: 0.05em;
  }
}
.inline {
  min-width: 35px;
  min-height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

span.inline {
  max-width: 35px;
  max-height: 45px;
}

.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #FFF;
  opacity: 0.95;
  z-index: 100;
}

.mcc {
  display: none;
  flex-flow: column;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 105;
  row-gap: 1.25em;
  overflow-x: hidden;
  overflow-y: scroll;
  height: 95%;
  width: 90%;
  max-width: 606px;
  -ms-overflow-style: none;
  scrollbar-width: none;
  justify-content: center;
  align-items: center;
}
.mcc::-webkit-scrollbar {
  display: none;
}

@media screen and (max-width: 479px) {
  .mcc {
    width: 90%;
    max-width: 450px;
    grid-row-gap: 15px;
  }
}
@media screen and (max-height: 767px) and (orientation: landscape) {
  .mcc {
    width: 100%;
    max-width: 700px;
    grid-row-gap: 20px;
  }
}
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.selecter_heading {
  display: flex;
  justify-content: center;
  background: #FFF;
  padding: 1em;
  border: 1px solid #EEE;
  font-size: 16px;
  font-style: normal !important;
  color: #666;
  font: italic bold 21px Arial, Helvetica, sans-serif;
  color: #0089e8;
  width: 100%;
  max-width: 320px;
  text-align: center;
}

.panel_btn_contain {
  display: flex;
  width: 100%;
  max-width: 320px;
  overflow: hidden;
  justify-content: space-between;
  gap: 20px;
}

.panel_btn {
  width: 175px;
  margin: 0;
  padding: 10px;
}

#modal_overlay1 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #FFF;
  visibility: hidden;
  z-index: 4;
  background: #f7f7f7;
}

.consonants#selection {
  flex-flow: column;
  gap: 25px;
}
.consonants .selecter_heading {
  width: 100%;
  max-width: 385px;
  min-height: 45px;
  align-items: center;
  padding: 1em;
}
.consonants .panel_btn_contain {
  max-width: 350px;
  width: 100%;
  flex-flow: row;
  justify-content: center;
}

@media screen and (max-height: 479px) and (orientation: landscape) {
  #selection {
    top: 50%;
    width: 100%;
    flex-flow: row;
    justify-content: space-evenly;
    gap: 5px;
    padding: 10px;
  }
  .selecter_heading {
    width: 27%;
    font-size: 1.5em !important;
    padding: 0.83em;
    text-align: center;
  }
  .panel_btn_contain {
    width: 23%;
    flex-flow: column;
    justify-content: flex-start;
    gap: 15px;
  }
  .panel_btn_contain .panel_btn {
    width: 100%;
  }
  .consonants#selection {
    gap: 5px;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .consonants .selecter_heading {
    width: 390px;
    height: 100%;
    min-height: 45px;
    max-height: 40px;
    align-items: center;
    font-size: 1.25em !important;
  }
}
@media screen and (max-width: 479px) {
  .selecter_heading {
    padding: 10px;
    font-size: 1.35em;
  }
}
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.survey-grid {
  display: grid;
  grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 50%;
  grid-template-areas: "survey-title survey-title survey-title survey-title" "q1 q1 q1 q1" "q1radio q1radio q1text q1text" "q2 q2 q2 q2" "q2radio q2radio q2text q2text" "q3 q3 q3 q3" "q3radio q3radio q3text q3text" "q4 q4 q4 q4" "q4text q4text q4text q4text" "submit-survey-btn submit-survey-btn submit-survey-btn close-survey-btn" "do-not-show-survey do-not-show-survey do-not-show-survey do-not-show-survey" "fb-like fb-like fb-like fb-like" "fb-like-click fb-like-click fb-like-click fb-like-click";
  place-content: center;
  position: relative;
  padding: 1.75em 2em;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
}
.survey-grid .radio {
  color: white;
}
.survey-title {
  grid-area: survey-title;
  padding: 0.75em 0 0;
}
.survey-title h2 {
  color: #000;
}

.q1 {
  grid-area: q1;
  font-size: 1.5rem;
  padding: 0.5em 0 0;
}
.q1.radio {
  grid-area: q1radio;
  padding: 0;
  align-self: start;
}
.q1.text {
  grid-area: q1text;
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  min-height: 4em;
  max-height: 100%;
  font-size: 1.25rem;
  padding: 0.5em 0.75em;
  line-height: 1.25em;
}

.q2 {
  grid-area: q2;
  font-size: 1.5rem;
  padding: 0.5em 0 0;
}
.q2.radio {
  grid-area: q2radio;
  padding: 0;
  align-self: start;
}
.q2.text {
  grid-area: q2text;
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  min-height: 4em;
  max-height: 100%;
  font-size: 1.25rem;
  padding: 0.5em 0.75em;
  line-height: 1.25em;
}

.q3 {
  grid-area: q3;
  font-size: 1.5rem;
  padding: 0.5em 0 0;
}
.q3.radio {
  grid-area: q3radio;
  padding: 0;
  align-self: start;
}
.q3.text {
  grid-area: q3text;
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  min-height: 4em;
  max-height: 100%;
  font-size: 1.25rem;
  padding: 0.5em 0.75em;
  line-height: 1.25em;
}

.q4 {
  grid-area: q4;
  font-size: 1.5rem;
  padding: 0.5em 0 0;
}
.q4.radio {
  grid-area: q4radio;
  padding: 0;
  align-self: start;
}
.q4.text {
  grid-area: q4text;
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  min-height: 4em;
  max-height: 100%;
  font-size: 1.25rem;
  padding: 0.5em 0.75em;
  line-height: 1.25em;
}

.q5 {
  font-size: 1.5rem;
  padding: 0.5em 0 0;
}
.q5.radio {
  padding: 0;
  align-self: start;
}
.q5.text {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  min-height: 4em;
  max-height: 100%;
  font-size: 1.25rem;
  padding: 0.5em 0.75em;
  line-height: 1.25em;
}

.q6 {
  font-size: 1.5rem;
  padding: 0.5em 0 0;
}
.q6.radio {
  padding: 0;
  align-self: start;
}
.q6.text {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  min-height: 4em;
  max-height: 100%;
  font-size: 1.25rem;
  padding: 0.5em 0.75em;
  line-height: 1.25em;
}

.q7 {
  font-size: 1.5rem;
  padding: 0.5em 0 0;
}
.q7.radio {
  padding: 0;
  align-self: start;
}
.q7.text {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  min-height: 4em;
  max-height: 100%;
  font-size: 1.25rem;
  padding: 0.5em 0.75em;
  line-height: 1.25em;
}

.q8 {
  font-size: 1.5rem;
  padding: 0.5em 0 0;
}
.q8.radio {
  padding: 0;
  align-self: start;
}
.q8.text {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  min-height: 4em;
  max-height: 100%;
  font-size: 1.25rem;
  padding: 0.5em 0.75em;
  line-height: 1.25em;
}

.q4.text {
  width: 100%;
  max-width: 540px;
}

.submit-survey, .close-survey {
  margin: 0.5em 0 0.25em;
  font-size: 1.75rem;
  width: 98%;
  justify-self: center;
}

.submit-survey {
  grid-area: submit-survey-btn;
}

.close-survey {
  grid-area: close-survey-btn;
}

.do-not-show-survey {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "label input";
  grid-area: do-not-show-survey;
  margin: 0.25em auto;
}
.do-not-show-survey label {
  grid-area: input;
  margin: 10px 0 0;
  justify-self: left;
  width: 50%;
}
.do-not-show-survey .survey_chkbox_label {
  grid-area: label;
  font-size: 1.5rem;
  padding: 0 1em 0 0;
  color: #000;
}

.fb-like {
  grid-area: fb-like;
  font-size: 1.5rem;
  text-align: center;
  color: #0089e8;
}
.fb-like.click {
  grid-area: fb-like-click;
  width: 80px;
  justify-self: center;
}

.dotvvm-bp-check-box > .dotvvm-bp-primitive_contents, .dotvvm-bp-radio-button > .dotvvm-bp-primitive_contents {
  padding-left: var(--bp-padding-horizontal);
  padding-right: var(--bp-padding-horizontal);
  color: var(--bp-font-color);
}

.facebook_like_rc {
  display: grid;
  grid-template-rows: 50px;
  grid-template-columns: max-content 80px minmax(0, 1fr);
  justify-content: center;
  align-items: center;
  margin: 0 auto 20px;
  -moz-column-gap: 25px;
       column-gap: 25px;
  width: -moz-fit-content;
  width: fit-content;
}
.facebook_like_rc .facebook_like_text {
  color: #0089e8;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.1;
  vertical-align: middle;
  justify-self: right;
}
.facebook_like_rc .fb_contain_rc {
  width: 80px;
  height: 20px;
  margin: 2px 0 0 0;
}
.facebook_like_rc input.fb_rc_do_not_show_checkbox {
  width: 25px;
  height: 25px;
  border: 1px solid #ddd;
  margin: 0 auto 0;
}
.facebook_like_rc .fb_rc_do_not_show {
  justify-self: left;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
}
.facebook_like_rc .fb_rc_do_not_show span {
  margin: 0 0.5em 0 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 0;
  vertical-align: middle;
  color: #555;
}

@media screen and (max-width: 991px) {
  .facebook_like_rc {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: max-content 80px;
    grid-template-areas: "fb-like-text fb-like-btn" "fb-like-do-not-show fb-like-do-not-show";
    justify-content: center;
    align-items: center;
    margin: 5px auto 25px;
    grid-row-gap: 10px;
  }
  .facebook_like_rc .facebook_like_text {
    grid-area: fb-like-text;
    font-size: 21px;
    font-weight: 600;
  }
  .facebook_like_rc .fb_contain_rc {
    grid-area: fb-like-btn;
    justify-self: center;
    margin-top: 0px;
  }
  .facebook_like_rc .fb_rc_do_not_show {
    grid-area: fb-like-do-not-show;
    justify-self: center;
    margin-top: 0px;
  }
}
@media screen and (max-width: 767px) {
  .facebook_like_rc {
    display: grid;
    grid-template-rows: auto 25px auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "fb-like-text fb-like-text" "fb-like-btn fb-like-btn" "fb-like-do-not-show fb-like-do-not-show";
    grid-column-gap: unset;
    grid-row-gap: 25px;
    width: 87%;
  }
  .facebook_like_rc .facebook_like_text {
    grid-area: fb-like-text;
    line-height: unset;
    text-align: center;
    justify-self: center;
    font-size: 28px;
    font-weight: 600;
  }
  .facebook_like_rc .fb_contain_rc {
    grid-area: fb-like-btn;
    justify-self: center;
    margin: 5px 0 0 0;
  }
  .facebook_like_rc .fb_rc_do_not_show {
    grid-area: fb-like-do-not-show;
    justify-self: center;
  }
}
@media screen and (max-width: 479px) {
  .survey-grid {
    display: grid;
    grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 50%;
    grid-template-areas: "survey-title survey-title survey-title survey-title" "q1 q1 q1 q1" "q1radio q1radio q1radio q1radio" "q1text q1text q1text q1text" "q2 q2 q2 q2" "q2radio q2radio q2radio q2radio" "q2text q2text q2text q2text" "q3 q3 q3 q3" "q3radio q3radio q3radio q3radio" "q3text q3text q3text q3text" "q4 q4 q4 q4" "q4text q4text q4text q4text" "submit-survey-btn submit-survey-btn submit-survey-btn submit-survey-btn" "close-survey-btn close-survey-btn close-survey-btn close-survey-btn" "do-not-show-survey do-not-show-survey do-not-show-survey do-not-show-survey" "fb-like fb-like fb-like fb-like" "fb-like-click fb-like-click fb-like-click fb-like-click";
    place-content: center;
    position: relative;
    padding: 1.75em 2em;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
  }
  .submit-survey, .close-survey {
    margin: 0;
  }
  .q4.text {
    margin: 0 0 1em 0;
  }
  .do-not-show-survey {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 85% 1fr;
    grid-area: do-not-show-survey;
    justify-content: left;
    align-items: center;
  }
  .do-not-show-survey label {
    width: 10%;
    margin: 10px 0 0;
  }
  .do-not-show-survey input {
    justify-self: flex-end;
  }
  .do-not-show-survey .survey_chkbox_label {
    font-size: 1.5rem;
  }
  .fb-like {
    font-size: 1.5rem;
  }
  .facebook_like_rc .fb_contain_rc {
    justify-self: center;
    margin-top: 0px;
  }
  .facebook_like_rc .fb_rc_do_not_show {
    justify-self: center;
    margin-top: 0px;
  }
}
@media screen and (max-height: 767px) and (orientation: landscape) {
  .facebook_like_rc .fb_contain_rc {
    justify-self: center;
  }
  .facebook_like_rc .fb_rc_do_not_show {
    justify-self: center;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .facebook_like_rc {
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "fb-like-text" "fb-like-btn" "fb-like-do-not-show";
  }
  .facebook_like_rc .facebook_like_text {
    justify-self: center;
  }
  .facebook_like_rc .fb_contain_rc {
    justify-self: center;
    margin-top: 10px;
  }
  .facebook_like_rc .fb_rc_do_not_show {
    justify-self: center;
    margin-top: 10px;
  }
}
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.footer {
  position: relative;
  width: 60%;
  height: 100px;
  margin: 1.15em auto;
  display: block;
  overflow: hidden;
  text-align: left;
  z-index: 0;
}
.footer.c1r2 {
  justify-content: center;
  gap: 0.85em;
  width: 100%;
  height: auto;
  align-items: flex-start;
}
.footer .row1.c4r2 {
  grid-template-columns: repeat(4, auto);
  grid-template-areas: "x fb fb-like fb-like" "x fb fb-like fb-like";
  margin: 0;
  justify-content: center;
  grid-column-gap: 20px;
  grid-row-gap: 0px;
  height: 100%;
  align-items: center;
}
.footer .row1.c4r2 .x {
  display: flex;
  align-items: center;
  grid-area: x;
  margin: 0;
  -webkit-flex: 0;
  flex-shrink: 0;
  width: 66px;
}
.footer .row1.c4r2 .fb {
  display: flex;
  grid-area: fb;
  margin: 0;
  width: 34px;
  -webkit-flex: 0;
  flex-shrink: 0;
}
.footer .row1.c4r2 .fb a {
  display: block;
  width: 34px;
  height: 34px;
  background-image: url(../images/fb_icon.svg);
  background-position: 0 0;
  background-repeat: no-repeat;
}
.footer .row1.c4r2 .fb-like {
  display: flex;
  align-items: center;
  grid-area: fb-like;
  margin: 0;
  width: 395px;
}
.footer .row2 {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.footer .row2 p.copyright {
  display: block;
  float: left;
  margin: 0;
  font-size: 13px;
}

@media screen and (max-width: 767px) {
  .footer {
    width: 100%;
    height: 100px;
    margin: 0 auto;
    padding: 0 2em 2em;
  }
  .footer.c1r2 {
    grid-template-rows: auto auto;
  }
  .footer .row1.c4r2 {
    grid-template-columns: repeat(4, auto);
    grid-template-areas: "x x fb fb" "fb-like fb-like fb-like fb-like";
    margin: 0;
    grid-row-gap: 7px;
    justify-content: center;
    height: auto;
    align-items: center;
  }
  .footer .row1.c4r2 .x {
    display: flex;
    align-items: center;
    justify-self: right;
    grid-area: x;
    margin: 0;
  }
  .footer .row1.c4r2 .fb {
    grid-area: fb;
    margin: 0;
    justify-content: left;
  }
  .footer .row1.c4r2 .fb a {
    display: block;
    width: 34px;
    height: 34px;
    background-image: url(../images/fb_icon.svg);
    background-position: 0 0;
    background-repeat: no-repeat;
  }
  .footer .row1.c4r2 .fb-like {
    display: flex;
    align-items: center;
    grid-area: fb-like;
    margin: 0;
    width: 390px;
  }
  .footer .row2 p.copyright {
    padding: 0 2em 2em;
  }
}
@media screen and (max-width: 579px) {
  .footer .row1.c4r2 {
    grid-template-areas: "x fb fb-like fb-like" "x fb fb-like fb-like";
    grid-row-gap: 0;
  }
  .footer .row1.c4r2 .fb-like {
    display: flex;
    align-items: center;
    grid-area: fb-like;
    margin: 0;
    width: 112px;
    overflow: hidden;
  }
}
@media screen and (max-height: 767px) and (orientation: landscape) {
  .footer .row1.c4r2 .fb-like {
    width: 390px;
  }
}
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.form-group {
  margin: 0 0 25px;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  background: white;
  overflow: hidden;
}

.form-label {
  display: block;
  margin: 0 auto;
  width: 100%;
  color: #0089e8;
  text-align: left;
  font-size: 21px;
  font-weight: 600;
  max-width: 606px;
}

.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.heading {
  display: block;
}
.heading h1 {
  text-align: center;
  margin: 0.75rem 0;
}

.content {
  width: 100%;
  display: block;
}

#eacContent {
  position: relative;
  width: 100%;
  background-image: none;
}

.c1r1, .c1r2, .c1r3, .c2r1, .c2r2, .c2r3, .c3r1, .c3r2, .c3r3, .c4r1, .c4r2, .c5r1, .c6r1 {
  display: grid;
  padding: 0 1em;
  gap: 1em;
}

.c1r1 {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.c1r2 {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.c1r3 {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.c2r1 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
}

.c2r2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.c2r3 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.c3r1 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
}

.c3r2 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.c3r3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.c4r1 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
}

.c4r2 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.c5r1 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
}

.c6r1 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
}

.colleft, .colright {
  width: auto;
}

#eacContentInner {
  width: 100%;
  max-width: 1050px;
  border-radius: 5px;
}
#eacContentInner.c1r1, #eacContentInner .c1r1, #eacContentInner.c1r2, #eacContentInner .c1r2, #eacContentInner.c1r3, #eacContentInner .c1r3, #eacContentInner.c2r1, #eacContentInner .c2r1, #eacContentInner.c2r2, #eacContentInner .c2r2, #eacContentInner.c2r3, #eacContentInner .c2r3, #eacContentInner.c3r1, #eacContentInner .c3r1, #eacContentInner.c3r2, #eacContentInner .c3r2, #eacContentInner.c3r3, #eacContentInner .c3r3, #eacContentInner.c4r1, #eacContentInner .c4r1, #eacContentInner.c4r2, #eacContentInner .c4r2, #eacContentInner.c5r1, #eacContentInner .c5r1, #eacContentInner.c6r1, #eacContentInner .c6r1 {
  display: grid;
  padding-left: 1em;
  padding-right: 1em;
  gap: 1em;
}
#eacContentInner.c1r1, #eacContentInner .c1r1 {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
#eacContentInner.c1r2, #eacContentInner .c1r2 {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
#eacContentInner.c1r3, #eacContentInner .c1r3 {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
}
#eacContentInner.c2r1, #eacContentInner .c2r1 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
}
#eacContentInner.c2r2, #eacContentInner .c2r2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
#eacContentInner.c2r3, #eacContentInner .c2r3 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
}
#eacContentInner.c3r1, #eacContentInner .c3r1 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
}
#eacContentInner.c3r2, #eacContentInner .c3r2 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
#eacContentInner.c3r3, #eacContentInner .c3r3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
}
#eacContentInner.c4r1, #eacContentInner .c4r1 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
}
#eacContentInner.c4r2, #eacContentInner .c4r2 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
#eacContentInner.c5r1, #eacContentInner .c5r1 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
}
#eacContentInner.c6r1, #eacContentInner .c6r1 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
}

@media screen and (max-width: 767px) {
  .content {
    padding: 0 1em 1em;
  }
  #eacContentInner {
    border-radius: 5px;
  }
  #eacContentInner.tpw_c1r2, #eacContentInner .tpw_c1r2 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
}
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.header, .logo {
  display: block;
  position: relative;
  background-color: #0089e8;
  margin: 0 auto;
  padding: 0.75rem;
  width: 100%;
}
.header.mobile, .logo.mobile {
  display: none;
}

.header-wrap {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: 100%;
  max-width: 1050px;
  min-height: 50px;
  margin: 0 auto;
}

#headerlogo {
  display: block;
  background-repeat: no-repeat;
  align-self: center;
  justify-self: left;
  margin: 0.25em 0 0 2em;
  background: none;
  width: 200px;
  text-align: left;
  cursor: pointer;
}
#headerlogo img {
  width: 30vw;
  min-height: 50px;
  max-width: 200px;
}

#lbl_welcome {
  display: grid;
  margin: 0.5em 1.4em 0.5em 0;
  color: white;
  float: left;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 21px;
  font-weight: 400;
  text-align: right;
  line-height: 1.4em;
  align-items: center;
}

#menutab {
  height: 49px;
}

@media screen and (max-width: 767px) {
  .header {
    display: none;
  }
  .logo {
    padding: 0;
  }
  .logo.mobile {
    display: grid;
    grid-area: logoMobile;
    grid-template-rows: auto;
    grid-template-columns: 0 minmax(0, 1fr);
    grid-template-areas: ". logo";
    height: 70px;
  }
  .logo.mobile #logo {
    grid-area: logo;
    width: 127px;
    justify-self: left;
    text-align: center;
  }
  .logo.mobile.mobile-main-menu-active {
    grid-template-columns: 0 minmax(0, 1fr);
  }
  .logo .logo-btn {
    width: 100%;
    height: 100%;
    background: none;
    cursor: pointer;
    margin: 0;
  }
  .logo .logo-btn img {
    width: 60px;
    margin-top: 5px;
  }
  #lbl_welcome {
    font-size: clamp(1em, 2.3vw, 1.25em);
    float: right;
  }
}
@media screen and (max-width: 479px) {
  .logo.mobile #logo {
    width: 100%;
    justify-self: center;
  }
}
@media screen and (max-width: 412px) {
  .logo.mobile #logo {
    justify-self: left;
  }
}
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.main-navigation {
  width: 100%;
  padding: 0 1em;
}
.main-navigation .anchor {
  position: relative;
  max-width: 1050px;
  margin: 0 auto;
  min-height: 1px;
  background: none;
}

#menu {
  display: grid;
  grid-template-rows: 49px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "home tour play about faq login register";
  place-content: center;
  max-width: 1050px;
  border-radius: 0 0 5px 5px;
  margin: 0 auto;
}
#menu input:nth-child(2) {
  border-left: 1px solid hsl(0, 0%, 90%);
  border-radius: 0;
}
#menu input:nth-last-child(3) {
  border-radius: 0 0 5px 0;
}
#menu input#cmd_index {
  grid-area: home;
}
#menu input#cmd_about {
  grid-area: tour;
}
#menu input#cmd_play {
  grid-area: play;
}
#menu input#cmd_links {
  grid-area: about;
}
#menu input#cmd_contact {
  grid-area: faq;
}
#menu input#cmd_login {
  grid-area: login;
}
#menu input#cmd_register {
  grid-area: register;
}
#menu a#menutab {
  display: grid;
  grid-area: 1/6/2/8;
  align-content: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 21px;
  font-weight: 400;
  text-align: center;
  color: white;
  background-color: #006bb5;
  max-width: 100%;
  line-height: 1.8;
  border: none !important;
  border-left: 1px solid #006bb5 !important;
}
@media (hover: hover) {
  #menu a#menutab:hover, #menu a#menutab.hover {
    color: #006bb5;
    background-color: white;
    border-left: 1px solid #EEE !important;
    border-bottom: none;
  }
}

.topnav {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  background-color: white;
  overflow: hidden;
}
.topnav input {
  height: 49px;
  flex-grow: 1;
  max-width: 150px;
  float: left;
  margin: 0;
  color: #0089e8;
  text-align: center;
  text-decoration: none;
  font-size: 21px;
  box-shadow: none !important;
  cursor: pointer;
  text-decoration: none;
  border-radius: 0px;
  box-shadow: none;
  border-left: 1px solid hsl(0, 0%, 90%);
  line-height: 1;
}
.topnav input:hover {
  box-shadow: none !important;
  border: 1px solid #0089e8 !important;
  background: #0089e8 !important;
  color: white;
  transition: border 0.2s, background-color 0.2s;
  line-height: 1;
  z-index: 100 !important;
}
.topnav input.active {
  border: 1px solid #0089e8 !important;
  background-color: white;
  color: #0089e8;
  padding: 0.75% 1% !important;
}
.topnav input.menuFloat {
  background-color: white;
}
.topnav a.icon {
  display: none;
}
.topnav a.icon:hover {
  box-shadow: none !important;
  background: white !important;
  transition-duration: 0.2s;
  z-index: 100 !important;
}

.usermenu {
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  min-width: 299px;
  background-color: white;
  line-height: 25px;
  z-index: 100;
  padding: 0;
  color: #0089e8 !important;
  font-family: Arial, Arial, Helvetica, sans-serif;
  font-size: 1.875rem;
  font-weight: normal;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-right: none;
}
.usermenu input {
  display: block;
  border-top: 1px solid #EEE;
  height: 50px;
  padding: 0 1em;
  line-height: 1.65em;
  margin: 0;
  text-align: left;
  font-size: 1.75rem;
  color: #006bb5;
  border-radius: 0;
  font-size: 21px;
}
.usermenu input:last-child {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom: 1px solid #EEE;
}
.usermenu input:hover {
  color: white !important;
  background-color: #006bb5 !important;
  cursor: pointer;
  border-radius: 0;
  transition: background-color 0.2s, border 0.2s;
  border-left: none;
}
.usermenu input:hover:last-child {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom: 1px solid #006bb5;
}
.usermenu input:visited, .usermenu input:link, .usermenu input:active {
  color: #006bb5;
}

@media screen and (max-width: 767px) {
  .main-navigation {
    width: 100%;
    padding: 0;
  }
  .main-navigation #menu {
    display: flex;
    min-height: 70px;
    background-color: white;
    border-radius: 0;
  }
  .main-navigation #menu .mobile-user-menu-active i#mobileMainMenuBtn:hover {
    border-radius: 0;
  }
  .main-navigation #menu input:nth-child(2) {
    border-left: 1px solid hsl(0, 0%, 90%);
    border-radius: 0;
  }
  .main-navigation #menu input:nth-last-child(3) {
    border-radius: 0;
  }
  .main-navigation #menu #mobile-header {
    position: absolute;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: minmax(0, 1fr) 127px 127px;
    grid-template-areas: "logoMobile userMenuBtnMobile mainMenuBtnMobile";
    top: 0;
    height: 70px;
    overflow: hidden;
    width: 100%;
    background-color: #0089e8;
  }
  .main-navigation #menu #mobile-header.mobile-main-menu-active {
    right: 0;
  }
  .main-navigation #menu #mobile-header.mobile-main-menu-active a {
    border-radius: 0;
  }
  .main-navigation #menu #mobile-header #userMenuBtnMobile {
    grid-area: userMenuBtnMobile;
  }
  .main-navigation #menu #mobile-header #mainMenuBtnMobile {
    grid-area: mainMenuBtnMobile;
    border-radius: 0;
  }
}
@media screen and (max-width: 767px) and (hover: hover) {
  .main-navigation #menu #mobile-header #mainMenuBtnMobile:hover {
    transition: background-color 0.2s;
  }
}
@media screen and (max-width: 767px) {
  .main-navigation #menu a#menutab {
    display: none;
  }
  .topnav {
    justify-content: right;
    border-radius: 0;
  }
  .topnav input {
    flex-grow: 0;
    height: 60px !important;
    width: 150px;
    font-size: 1.75em;
    border-left: none;
  }
  .topnav input:not(:first-child) {
    display: none;
  }
  .topnav input#cmd_index {
    margin-right: auto;
  }
  .topnav a#userMenuBtnMobile {
    right: 4.52em;
  }
  .topnav #userMenuMobile a {
    display: none;
  }
  .topnav a.icon {
    display: block;
    width: 100%;
    height: 70px;
    overflow: hidden;
  }
  .topnav a i.fa-bars {
    font-size: 3.11em;
    color: white;
    padding: 0.2em 0.4em;
    background-color: #0089e8;
    border-radius: 0;
    width: 100%;
    height: 70px;
    text-align: center;
  }
}
@media screen and (max-width: 767px) and (hover: hover) {
  .topnav a i.fa-bars:hover {
    transition: color 0.2s, background-color 0.2s;
    color: #0089e8;
    background-color: white;
    border-radius: 0;
  }
}
@media screen and (max-width: 767px) {
  .topnav a i.fa-bars.mobile-main-menu-active {
    border-radius: 0;
  }
  .topnav a i.fa-user {
    font-size: 2.6em;
    color: white;
    padding: 0.35em 0.581em 0.33em;
    background-color: #006bb5;
    width: 100%;
    height: 70px;
    text-align: center;
  }
}
@media screen and (max-width: 767px) and (hover: hover) {
  .topnav a i.fa-user:hover {
    color: #006bb5;
    background-color: white;
    transition: color 0.2s, background-color 0.2s;
  }
}
@media screen and (max-width: 767px) {
  .topnav a #mobileUserMenuBtn.mobile-user-menu-active {
    color: #006bb5;
    background-color: white;
  }
  .topnav.responsive {
    position: relative;
    flex-flow: column;
    padding: 70px 0 0 0;
  }
  .topnav.responsive a #mobileMainMenuBtn.mobile-main-menu-active {
    color: #0089e8;
    background-color: white;
  }
  .topnav.responsive input {
    float: none;
    width: 100% !important;
    height: 60px !important;
    max-width: 100%;
    display: block;
    text-align: left;
    padding-left: 1.31em !important;
    border-bottom: 1px solid #EEE;
  }
  .topnav.responsive.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .usermenu {
    justify-content: right;
    display: none;
    padding: 0;
    top: 0;
    right: 0;
    border: none;
  }
  .usermenu a {
    flex-grow: 0;
    height: 60px !important;
    width: 150px;
    font-size: 1.75rem;
  }
  .usermenu.responsive {
    position: relative;
    flex-flow: column;
    transition-duration: 0.2s;
    width: 100%;
    background-color: white;
  }
  .usermenu.responsive input {
    float: none;
    width: 100% !important;
    height: 60px !important;
    max-width: 100%;
    display: block;
    text-align: left;
    border-radius: 0px;
    box-shadow: none;
    cursor: pointer;
    text-decoration: none;
    color: #0089e8;
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 2.15;
    padding: 0 25px;
    padding-left: 1.31em !important;
    color: #006bb5;
  }
  .usermenu.responsive input:hover {
    box-shadow: none !important;
    border: 1px solid #006bb5 !important;
    background: #006bb5 !important;
    color: white !important;
    transition: background-color 0.2s, border 0.2s;
    z-index: 100 !important;
  }
  .usermenu.responsive input:last-child {
    border-radius: 0;
  }
  .usermenu.responsive input a.icon.menu-active {
    grid-template-columns: 0 minmax(0, 560px);
  }
  .usermenu.responsive input {
    float: none;
    width: 100% !important;
    height: 60px !important;
    max-width: 100%;
    display: block;
    text-align: left;
    padding-left: 41px !important;
    border-bottom: 1px solid #EEE;
    padding-left: 1.31em !important;
    border-radius: 0;
    border-top: none;
  }
  .usermenu.responsive.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
}
@media screen and (max-width: 479px) {
  .main-navigation .gameboard {
    padding: 0;
  }
  .main-navigation .topnav {
    margin: 0 1em;
    /*            input {
                    border-left: 1px solid #eee !important;
                    border-right: 1px solid #eee;
                }*/
  }
  .main-navigation .topnav#menu #mobile-header {
    grid-template-columns: 33.33% minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
    border-radius: 0;
  }
  .main-navigation .topnav#menu #mobile-header #mainMenuBtnMobile {
    border-radius: 0;
  }
  .main-navigation .topnav#menu #mobile-header a.icon {
    display: block;
    width: 100%;
    height: 70px;
    overflow: hidden;
  }
  .main-navigation .topnav#menu #mobile-header a i.fa-bars {
    width: 100%;
    border-radius: 0;
  }
  .main-navigation .topnav#menu #mobile-header a i.fa-user {
    width: 100%;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .main-navigation {
    padding: 0;
  }
  #menu {
    border: 1px solid hsl(0, 0%, 90%);
    border-top: none;
  }
}
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
#eacContentInner.home.c1r2 {
  grid-template-rows: auto auto;
}
#eacContentInner.home .intro_description.c1r2 {
  grid-template-rows: auto minmax(0, 1fr);
  gap: unset;
}
#eacContentInner.home .intro_description.c1r2 h2.homeHeading {
  font-weight: 600;
}
#eacContentInner.home .intro_description.c1r2 p.copy {
  font-weight: 400;
}
#eacContentInner.home .scoreboard {
  background-color: #EEE;
  border-radius: 5px;
  padding: 0.5em;
}
#eacContentInner.home .scoreboard.c1r3 {
  grid-template-rows: 40px 200px 28px;
  gap: 7px;
  justify-content: center;
}
#eacContentInner.home .scoreboard .scoreboard_header_wrapper {
  display: flex;
  justify-content: center;
}
#eacContentInner.home .scoreboard #scoreboard_header {
  display: flex;
  align-items: center;
}
#eacContentInner.home .scoreboard #scoreboard_header .scoreboard_title {
  color: #0089e8;
  font-size: clamp(0.55rem, 2.35vw, 1.75rem);
}
#eacContentInner.home .scoreboard #scoreboard_header .scoreboard_logo {
  background-image: url(../images/asbc_logo.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  aspect-ratio: 1;
  width: 30px;
}
#eacContentInner.home .scoreboard #scoreboard_header.c2r1 {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 1em;
  padding: 0 1.25em;
}
#eacContentInner.home .scoreboard .scoreboard_data {
  background-color: white;
  color: #000;
  border-radius: 5px;
}
#eacContentInner.home .scoreboard .scoreboard_data.c2r2 {
  grid-template-rows: minmax(auto, 1fr) minmax(82%, 1fr);
  gap: unset;
}
#eacContentInner.home .scoreboard .scoreboard_data .vowels_header, #eacContentInner.home .scoreboard .scoreboard_data .consonants_header {
  font-size: 1.15rem;
  text-align: center;
  color: #0089e8;
  padding: 0.25em 0.25em 0em;
  border-bottom: 1px solid #EEE;
}
#eacContentInner.home .scoreboard .scoreboard_data .vowels_data, #eacContentInner.home .scoreboard .scoreboard_data .consonants_data {
  padding: 5px 0;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-CAN {
  background-image: url(../images/flags.png);
  background-position: -1188px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-AFG {
  background-image: url(../images/flags.png);
  background-position: -2754px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-ALA {
  background-image: url(../images/flags.png);
  background-position: -5633px 0px;
  width: 18.857px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-ALB {
  background-image: url(../images/flags.png);
  background-position: -2727px 0px;
  width: 16.5px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-DZA {
  background-image: url(../images/flags.png);
  background-position: -594px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-ASM {
  background-image: url(../images/flags.png);
  background-position: -4931px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-AND {
  background-image: url(../images/flags.png);
  background-position: -3186px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-AGO {
  background-image: url(../images/flags.png);
  background-position: -567px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-AIA {
  background-image: url(../images/flags.png);
  background-position: -3643px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-ATG {
  background-image: url(../images/flags.png);
  background-position: -3454px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-ARG {
  background-image: url(../images/flags.png);
  background-position: -3346px 0px;
  width: 18.857px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-ARM {
  background-image: url(../images/flags.png);
  background-position: -4850px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-ABW {
  background-image: url(../images/flags.png);
  background-position: -3670px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-AUS {
  background-image: url(../images/flags.png);
  background-position: -1296px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-AUT {
  background-image: url(../images/flags.png);
  background-position: -675px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-AZE {
  background-image: url(../images/flags.png);
  background-position: -486px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-BHS {
  background-image: url(../images/flags.png);
  background-position: -5390px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-BHR {
  background-image: url(../images/flags.png);
  background-position: -3078px 0px;
  width: 20.308px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-BGD {
  background-image: url(../images/flags.png);
  background-position: -4150px 0px;
  width: 20.308px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-BRB {
  background-image: url(../images/flags.png);
  background-position: -513px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-BLR {
  background-image: url(../images/flags.png);
  background-position: -5255px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-BEL {
  background-image: url(../images/flags.png);
  background-position: -756px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-BLZ {
  background-image: url(../images/flags.png);
  background-position: -945px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-BEN {
  background-image: url(../images/flags.png);
  background-position: -5093px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-BMU {
  background-image: url(../images/flags.png);
  background-position: -2943px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-BTN {
  background-image: url(../images/flags.png);
  background-position: -5120px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-BOL {
  background-image: url(../images/flags.png);
  background-position: -783px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-BES {
  background-image: url(../images/flags.png);
  background-position: -702px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-BIH {
  background-image: url(../images/flags.png);
  background-position: -864px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-BWA {
  background-image: url(../images/flags.png);
  background-position: -378px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-BVT {
  background-image: url(../images/flags.png);
  background-position: -4204px 0px;
  width: 16.5px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-BRA {
  background-image: url(../images/flags.png);
  background-position: -648px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-IOT {
  background-image: url(../images/flags.png);
  background-position: -2187px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-VGB {
  background-image: url(../images/flags.png);
  background-position: -1593px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-BRN {
  background-image: url(../images/flags.png);
  background-position: -2835px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-BGR {
  background-image: url(../images/flags.png);
  background-position: -5012px 0px;
  width: 20.308px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-BFA {
  background-image: url(../images/flags.png);
  background-position: -5066px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-BDI {
  background-image: url(../images/flags.png);
  background-position: -1620px 0px;
  width: 20.308px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-KHM {
  background-image: url(../images/flags.png);
  background-position: -3562px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-CMR {
  background-image: url(../images/flags.png);
  background-position: -4474px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-CPV {
  background-image: url(../images/flags.png);
  background-position: -1566px 0px;
  width: 20.308px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-CYM {
  background-image: url(../images/flags.png);
  background-position: -1701px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-CAF {
  background-image: url(../images/flags.png);
  background-position: -5039px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-TCD {
  background-image: url(../images/flags.png);
  background-position: 0px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-CHL {
  background-image: url(../images/flags.png);
  background-position: -4366px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-CHN {
  background-image: url(../images/flags.png);
  background-position: -1053px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-CXR {
  background-image: url(../images/flags.png);
  background-position: -27px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-CCK {
  background-image: url(../images/flags.png);
  background-position: -999px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-COL {
  background-image: url(../images/flags.png);
  background-position: -4688px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-COM {
  background-image: url(../images/flags.png);
  background-position: -4582px 0px;
  width: 20.308px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-COD {
  background-image: url(../images/flags.png);
  background-position: -1998px 0px;
  width: 15.529px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-COG {
  background-image: url(../images/flags.png);
  background-position: -891px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-COK {
  background-image: url(../images/flags.png);
  background-position: -1215px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-CRI {
  background-image: url(../images/flags.png);
  background-position: -4123px 0px;
  width: 20.308px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-CIV {
  background-image: url(../images/flags.png);
  background-position: -3051px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-HRV {
  background-image: url(../images/flags.png);
  background-position: -3400px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-CUB {
  background-image: url(../images/flags.png);
  background-position: -324px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-CUW {
  background-image: url(../images/flags.png);
  background-position: -5417px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-CYP {
  background-image: url(../images/flags.png);
  background-position: -2673px 0px;
  width: 20.308px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-CZE {
  background-image: url(../images/flags.png);
  background-position: -2295px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-DNK {
  background-image: url(../images/flags.png);
  background-position: -4985px 0px;
  width: 15.529px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-DJI {
  background-image: url(../images/flags.png);
  background-position: -54px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-DMA {
  background-image: url(../images/flags.png);
  background-position: -3826px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-DOM {
  background-image: url(../images/flags.png);
  background-position: -5849px 0px;
  width: 18.857px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-ECU {
  background-image: url(../images/flags.png);
  background-position: -6092px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-EGY {
  background-image: url(../images/flags.png);
  background-position: -6254px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-SLV {
  background-image: url(../images/flags.png);
  background-position: -2538px 0px;
  width: 22px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-ENG {
  background-image: url(../images/flags.png);
  background-position: -3961px 0px;
  width: 20.308px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-GNQ {
  background-image: url(../images/flags.png);
  background-position: -3853px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-ERI {
  background-image: url(../images/flags.png);
  background-position: -729px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-EST {
  background-image: url(../images/flags.png);
  background-position: -810px 0px;
  width: 18.857px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-ETH {
  background-image: url(../images/flags.png);
  background-position: -3240px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-FLK {
  background-image: url(../images/flags.png);
  background-position: -81px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-FRO {
  background-image: url(../images/flags.png);
  background-position: -1971px 0px;
  width: 16.5px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-FJI {
  background-image: url(../images/flags.png);
  background-position: -2592px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-FIN {
  background-image: url(../images/flags.png);
  background-position: -5606px 0px;
  width: 20.308px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-FRA {
  background-image: url(../images/flags.png);
  background-position: -6281px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-GUF {
  background-image: url(../images/flags.png);
  background-position: -6281px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-PYF {
  background-image: url(../images/flags.png);
  background-position: -6308px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-ATF {
  background-image: url(../images/flags.png);
  background-position: -1404px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-GAB {
  background-image: url(../images/flags.png);
  background-position: -1863px 0px;
  width: 15.529px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-GMB {
  background-image: url(../images/flags.png);
  background-position: -972px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-GEO {
  background-image: url(../images/flags.png);
  background-position: -3907px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-DEU {
  background-image: url(../images/flags.png);
  background-position: -2322px 0px;
  width: 20.308px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-GHA {
  background-image: url(../images/flags.png);
  background-position: -3751px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-GIB {
  background-image: url(../images/flags.png);
  background-position: -2808px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-GRC {
  background-image: url(../images/flags.png);
  background-position: -3934px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-GRL {
  background-image: url(../images/flags.png);
  background-position: -3724px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-GRD {
  background-image: url(../images/flags.png);
  background-position: -2565px 0px;
  width: 20.308px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-GLP {
  background-image: url(../images/flags.png);
  background-position: -6281px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-GUM {
  background-image: url(../images/flags.png);
  background-position: -4420px 0px;
  width: 22px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-GTM {
  background-image: url(../images/flags.png);
  background-position: -3988px 0px;
  width: 18.857px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-GGY {
  background-image: url(../images/flags.png);
  background-position: -4177px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-GIN {
  background-image: url(../images/flags.png);
  background-position: -3427px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-GNB {
  background-image: url(../images/flags.png);
  background-position: -2700px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-GUY {
  background-image: url(../images/flags.png);
  background-position: -243px 0px;
  width: 20.308px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-HTI {
  background-image: url(../images/flags.png);
  background-position: -4069px 0px;
  width: 20.308px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-HMD {
  background-image: url(../images/flags.png);
  background-position: -1296px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-HND {
  background-image: url(../images/flags.png);
  background-position: -3373px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-HKG {
  background-image: url(../images/flags.png);
  background-position: -3508px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-HUN {
  background-image: url(../images/flags.png);
  background-position: -3481px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-ISL {
  background-image: url(../images/flags.png);
  background-position: -4958px 0px;
  width: 16.5px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-IND {
  background-image: url(../images/flags.png);
  background-position: -3213px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-IDN {
  background-image: url(../images/flags.png);
  background-position: -297px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-IRN {
  background-image: url(../images/flags.png);
  background-position: -5903px 0px;
  width: 20.308px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-IRQ {
  background-image: url(../images/flags.png);
  background-position: -4742px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-IRL {
  background-image: url(../images/flags.png);
  background-position: -3294px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-IMN {
  background-image: url(../images/flags.png);
  background-position: -5363px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-ISR {
  background-image: url(../images/flags.png);
  background-position: -2646px 0px;
  width: 16.5px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-ITA {
  background-image: url(../images/flags.png);
  background-position: -162px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-JAM {
  background-image: url(../images/flags.png);
  background-position: -2970px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-JPN {
  background-image: url(../images/flags.png);
  background-position: -5579px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-JEY {
  background-image: url(../images/flags.png);
  background-position: -4015px 0px;
  width: 20.308px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-JOR {
  background-image: url(../images/flags.png);
  background-position: -2916px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-KAZ {
  background-image: url(../images/flags.png);
  background-position: -4096px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-KEN {
  background-image: url(../images/flags.png);
  background-position: -4715px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-KIR {
  background-image: url(../images/flags.png);
  background-position: -4312px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-PRK {
  background-image: url(../images/flags.png);
  background-position: -6011px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-KOR {
  background-image: url(../images/flags.png);
  background-position: -4339px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-KWT {
  background-image: url(../images/flags.png);
  background-position: -4258px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-KGZ {
  background-image: url(../images/flags.png);
  background-position: -2997px 0px;
  width: 20.308px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-LAO {
  background-image: url(../images/flags.png);
  background-position: -5687px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-LVA {
  background-image: url(../images/flags.png);
  background-position: -4285px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-LBN {
  background-image: url(../images/flags.png);
  background-position: -405px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-LSO {
  background-image: url(../images/flags.png);
  background-position: -351px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-LBR {
  background-image: url(../images/flags.png);
  background-position: -4769px 0px;
  width: 22px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-LBY {
  background-image: url(../images/flags.png);
  background-position: -270px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-LIE {
  background-image: url(../images/flags.png);
  background-position: -1242px 0px;
  width: 20.308px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-LTU {
  background-image: url(../images/flags.png);
  background-position: -2214px 0px;
  width: 20.308px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-LUX {
  background-image: url(../images/flags.png);
  background-position: -1944px 0px;
  width: 20.308px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-MAC {
  background-image: url(../images/flags.png);
  background-position: -4231px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-MKD {
  background-image: url(../images/flags.png);
  background-position: -2430px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-MDG {
  background-image: url(../images/flags.png);
  background-position: -3159px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-MWI {
  background-image: url(../images/flags.png);
  background-position: -4555px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-MYS {
  background-image: url(../images/flags.png);
  background-position: -6740px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-MDV {
  background-image: url(../images/flags.png);
  background-position: -4877px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-MLI {
  background-image: url(../images/flags.png);
  background-position: -4823px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-MLT {
  background-image: url(../images/flags.png);
  background-position: -1890px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-MHL {
  background-image: url(../images/flags.png);
  background-position: -1026px 0px;
  width: 22px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-MTQ {
  background-image: url(../images/flags.png);
  background-position: -6281px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-MRT {
  background-image: url(../images/flags.png);
  background-position: -1809px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-MUS {
  background-image: url(../images/flags.png);
  background-position: -2052px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-MYT {
  background-image: url(../images/flags.png);
  background-position: -6632px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-MEX {
  background-image: url(../images/flags.png);
  background-position: -6362px 0px;
  width: 20.308px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-FSM {
  background-image: url(../images/flags.png);
  background-position: -621px 0px;
  width: 22px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-MDA {
  background-image: url(../images/flags.png);
  background-position: -6227px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-MCO {
  background-image: url(../images/flags.png);
  background-position: -2079px 0px;
  width: 14.667px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-MNG {
  background-image: url(../images/flags.png);
  background-position: -6821px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-MNE {
  background-image: url(../images/flags.png);
  background-position: -6848px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-MSR {
  background-image: url(../images/flags.png);
  background-position: -6443px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-MAR {
  background-image: url(../images/flags.png);
  background-position: -6794px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-MOZ {
  background-image: url(../images/flags.png);
  background-position: -6578px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-MMR {
  background-image: url(../images/flags.png);
  background-position: -1674px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-NAM {
  background-image: url(../images/flags.png);
  background-position: -1728px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-NRU {
  background-image: url(../images/flags.png);
  background-position: -5876px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-NPL {
  background-image: url(../images/flags.png);
  background-position: -3778px 0px;
  width: 9.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-NLD {
  background-image: url(../images/flags.png);
  background-position: -702px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-NCL {
  background-image: url(../images/flags.png);
  background-position: -6767px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-NZL {
  background-image: url(../images/flags.png);
  background-position: -6956px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-NIC {
  background-image: url(../images/flags.png);
  background-position: -6902px 0px;
  width: 20.308px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-NER {
  background-image: url(../images/flags.png);
  background-position: -1782px 0px;
  width: 13.895px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-NGA {
  background-image: url(../images/flags.png);
  background-position: -6875px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-NIU {
  background-image: url(../images/flags.png);
  background-position: -6524px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-NFK {
  background-image: url(../images/flags.png);
  background-position: -6497px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-NIR {
  background-image: url(../images/flags.png);
  background-position: -4796px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-MNP {
  background-image: url(../images/flags.png);
  background-position: -216px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-NOR {
  background-image: url(../images/flags.png);
  background-position: -4204px 0px;
  width: 16.5px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-OMN {
  background-image: url(../images/flags.png);
  background-position: -6335px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-PAK {
  background-image: url(../images/flags.png);
  background-position: -2511px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-PLW {
  background-image: url(../images/flags.png);
  background-position: -6470px 0px;
  width: 18.857px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-PSE {
  background-image: url(../images/flags.png);
  background-position: -5930px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-PAN {
  background-image: url(../images/flags.png);
  background-position: -2889px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-PNG {
  background-image: url(../images/flags.png);
  background-position: -5201px 0px;
  width: 15.529px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-PRY {
  background-image: url(../images/flags.png);
  background-position: -5984px 0px;
  width: 20.308px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-PER {
  background-image: url(../images/flags.png);
  background-position: -2862px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-PHL {
  background-image: url(../images/flags.png);
  background-position: -4042px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-PCN {
  background-image: url(../images/flags.png);
  background-position: -837px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-POL {
  background-image: url(../images/flags.png);
  background-position: -6119px 0px;
  width: 18.857px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-PRT {
  background-image: url(../images/flags.png);
  background-position: -3024px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-PRI {
  background-image: url(../images/flags.png);
  background-position: -2349px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-QAT {
  background-image: url(../images/flags.png);
  background-position: -5714px 0px;
  width: 22px;
  height: 9px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-REU {
  background-image: url(../images/flags.png);
  background-position: -6281px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-ROU {
  background-image: url(../images/flags.png);
  background-position: -2403px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-RUS {
  background-image: url(../images/flags.png);
  background-position: -2268px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-RWA {
  background-image: url(../images/flags.png);
  background-position: -2376px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-BLM {
  background-image: url(../images/flags.png);
  background-position: -6281px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-SHN {
  background-image: url(../images/flags.png);
  background-position: -6686px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-KNA {
  background-image: url(../images/flags.png);
  background-position: -2457px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-LCA {
  background-image: url(../images/flags.png);
  background-position: -6416px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-MAF {
  background-image: url(../images/flags.png);
  background-position: -6281px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-SPM {
  background-image: url(../images/flags.png);
  background-position: -7010px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-VCT {
  background-image: url(../images/flags.png);
  background-position: -6983px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-WSM {
  background-image: url(../images/flags.png);
  background-position: -6065px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-SMR {
  background-image: url(../images/flags.png);
  background-position: -3535px 0px;
  width: 15.529px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-STP {
  background-image: url(../images/flags.png);
  background-position: -6551px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-SAU {
  background-image: url(../images/flags.png);
  background-position: -5822px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-SCO {
  background-image: url(../images/flags.png);
  background-position: -6929px 0px;
  width: 20.308px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-SEN {
  background-image: url(../images/flags.png);
  background-position: -7037px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-SRB {
  background-image: url(../images/flags.png);
  background-position: -2781px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-SYC {
  background-image: url(../images/flags.png);
  background-position: -4904px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-SLE {
  background-image: url(../images/flags.png);
  background-position: -1512px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-SGP {
  background-image: url(../images/flags.png);
  background-position: -1431px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-SXM {
  background-image: url(../images/flags.png);
  background-position: -1917px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-SVK {
  background-image: url(../images/flags.png);
  background-position: -2160px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-SVN {
  background-image: url(../images/flags.png);
  background-position: -5741px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-SLB {
  background-image: url(../images/flags.png);
  background-position: -3589px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-SOM {
  background-image: url(../images/flags.png);
  background-position: -1647px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-ZAF {
  background-image: url(../images/flags.png);
  background-position: -1539px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-SGS {
  background-image: url(../images/flags.png);
  background-position: -5471px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-SSD {
  background-image: url(../images/flags.png);
  background-position: -3697px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-ESP {
  background-image: url(../images/flags.png);
  background-position: -6200px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-LKA {
  background-image: url(../images/flags.png);
  background-position: -5795px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-SDN {
  background-image: url(../images/flags.png);
  background-position: -5336px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-SUR {
  background-image: url(../images/flags.png);
  background-position: -5957px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-SJM {
  background-image: url(../images/flags.png);
  background-position: -4204px 0px;
  width: 16.5px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-SWZ {
  background-image: url(../images/flags.png);
  background-position: -5444px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-SWE {
  background-image: url(../images/flags.png);
  background-position: -5525px 0px;
  width: 18.857px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-CHE {
  background-image: url(../images/flags.png);
  background-position: -3321px 0px;
  width: 12px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-SYR {
  background-image: url(../images/flags.png);
  background-position: -4634px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-TWN {
  background-image: url(../images/flags.png);
  background-position: -1269px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-TJK {
  background-image: url(../images/flags.png);
  background-position: -4501px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-TZA {
  background-image: url(../images/flags.png);
  background-position: -4393px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-THA {
  background-image: url(../images/flags.png);
  background-position: -5498px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-TLS {
  background-image: url(../images/flags.png);
  background-position: -3799px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-TGO {
  background-image: url(../images/flags.png);
  background-position: -4661px 0px;
  width: 18.857px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-TKL {
  background-image: url(../images/flags.png);
  background-position: -5309px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-TON {
  background-image: url(../images/flags.png);
  background-position: -5768px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-TTO {
  background-image: url(../images/flags.png);
  background-position: -6146px 0px;
  width: 20.308px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-TUN {
  background-image: url(../images/flags.png);
  background-position: -1836px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-TUR {
  background-image: url(../images/flags.png);
  background-position: -135px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-TKM {
  background-image: url(../images/flags.png);
  background-position: -6173px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-TCA {
  background-image: url(../images/flags.png);
  background-position: -3616px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-TUV {
  background-image: url(../images/flags.png);
  background-position: -540px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-UGA {
  background-image: url(../images/flags.png);
  background-position: -1107px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-UKR {
  background-image: url(../images/flags.png);
  background-position: -1080px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-ARE {
  background-image: url(../images/flags.png);
  background-position: -5174px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-GBR {
  background-image: url(../images/flags.png);
  background-position: -4528px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-USA {
  background-image: url(../images/flags.png);
  background-position: -1161px 0px;
  width: 22px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-UMI {
  background-image: url(../images/flags.png);
  background-position: -1161px 0px;
  width: 22px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-VIR {
  background-image: url(../images/flags.png);
  background-position: -1134px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-URY {
  background-image: url(../images/flags.png);
  background-position: -1377px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-UZB {
  background-image: url(../images/flags.png);
  background-position: -1755px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-VUT {
  background-image: url(../images/flags.png);
  background-position: -2133px 0px;
  width: 20.308px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-VAT {
  background-image: url(../images/flags.png);
  background-position: -4609px 0px;
  width: 12px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-VEN {
  background-image: url(../images/flags.png);
  background-position: -2106px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-VNM {
  background-image: url(../images/flags.png);
  background-position: -5228px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-WLS {
  background-image: url(../images/flags.png);
  background-position: -5282px 0px;
  width: 20.308px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-WLF {
  background-image: url(../images/flags.png);
  background-position: -6281px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-YEM {
  background-image: url(../images/flags.png);
  background-position: -6605px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-ZMB {
  background-image: url(../images/flags.png);
  background-position: -432px 0px;
  width: 17.6px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-ZWE {
  background-image: url(../images/flags.png);
  background-position: -3880px 0px;
  width: 22px;
  height: 11px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .scoreboard_data .flag-na {
  background-image: url(../images/flags.png);
  background-position: -1458px 0px;
  width: 20.308px;
  height: 12px;
  display: inline-block;
}
#eacContentInner.home .scoreboard .day_buttons.c6r1 {
  grid-template-columns: minmax(17%, 1fr) minmax(25%, 1fr) minmax(12%, 1fr) minmax(12%, 1fr) minmax(12%, 1fr) minmax(12%, 1fr);
  gap: 2%;
  padding: 0;
}
#eacContentInner.home .scoreboard .day_buttons.c6r1 .scoreboard_control {
  display: flex;
  padding: 2px;
  background-color: #DDD;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  font-size: clamp(0.35rem, 1.65vw, 1rem);
  align-items: center;
  justify-content: center;
}
#eacContentInner.home .scoreboard .day_buttons.c6r1 .scoreboard_control:hover, #eacContentInner.home .scoreboard .day_buttons.c6r1 .scoreboard_control.sb_selected {
  background-color: #BBB;
  transition: background-color 0.2s;
}

.homeHeading, .copy {
  margin: 0.5em 0;
}

.homeHeading {
  font-size: 24px;
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  color: #666;
}

#indexTourButton, #indexPlayButton, #indexAppButton {
  display: flex;
  clear: both;
  width: auto;
  height: 79px;
  background-color: #0089e8;
  border-radius: 5px;
  text-align: center;
  align-content: center;
  justify-content: center;
  margin-bottom: 1em;
}
#indexTourButton a, #indexPlayButton a, #indexAppButton a {
  display: flex;
  align-items: center;
  justify-content: center;
  font: 900 2.1rem Arial, Helvetica, sans-serif;
  color: white;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
#indexTourButton:hover, #indexPlayButton:hover, #indexAppButton:hover {
  background-color: #0398ff;
  transition: background-color 0.2s;
}

@media screen and (max-width: 767px) {
  #eacContentInner.home.tpw_c1r2, #eacContentInner.home .tpw_c1r2 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  #eacContentInner.home .intro_description.c1r2 h2.homeHeading {
    font-size: 21px;
  }
  #eacContentInner.home .intro_description.c1r2 p.copy {
    font-size: 21px;
  }
  #eacContentInner.home .scoreboard #scoreboard_header .scoreboard_title {
    color: #0089e8;
    font-size: clamp(0.55rem, 4.2vw, 1.75rem);
  }
  #eacContentInner.home .scoreboard .day_buttons.c6r1 .scoreboard_control {
    font-size: clamp(0.35rem, 3vw, 1rem);
  }
}
@media screen and (max-width: 479px) {
  #eacContentHeading_h1 {
    font-size: clamp(1.5rem, 6.6vw, 3.75rem);
  }
  #eacContentInner.home {
    padding: 0;
  }
  #eacContentInner.home #indexTourButton a, #eacContentInner.home #indexPlayButton a, #eacContentInner.home #indexAppButton a {
    font-size: clamp(1rem, 9.2vw, 2.1rem);
  }
  #eacContentInner.home.tpw_c1r2, #eacContentInner.home .tpw_c1r2 {
    padding: 0;
  }
  #eacContentInner.home .scoreboard #scoreboard_header.c2r1 {
    padding: 0.5em;
  }
  #eacContentInner.home .scoreboard #scoreboard_header .scoreboard_title {
    color: #0089e8;
    font-size: clamp(1rem, 5.2vw, 1.75rem);
  }
  #eacContentInner.home .scoreboard .scoreboard_data {
    font-size: clamp(0.55rem, 4.2vw, 1rem);
  }
  #eacContentInner.home .scoreboard .day_buttons.c6r1 .scoreboard_control {
    font-size: clamp(0.45rem, 3.59vw, 1rem);
  }
}
@media screen and (max-width: 344px) {
  #eacContentInner.home .scoreboard .scoreboard_data {
    padding-left: 0.5em;
    padding-right: 0.5em;
  }
  #eacContentInner.home .scoreboard .scoreboard_data .vowels_header, #eacContentInner.home .scoreboard .scoreboard_data .consonants_header {
    font-size: clamp(0.85rem, 5.2vw, 1.5rem);
    padding: 0;
    padding-top: clamp(0.35rem, 1.2vw, 0.5rem);
  }
}
@media screen and (max-height: 767px) and (orientation: landscape) {
  #eacContentInner.home .intro_description.c1r2 {
    padding: 0 32px;
  }
  #eacContentInner.home .intro_description.c1r2 h2.homeHeading {
    font-size: 21px;
  }
  #eacContentInner.home .intro_description.c1r2 p.copy {
    font-size: 21px;
  }
}
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
#eacContentHeading_h1.tourHeading {
  min-height: 36px;
}

#eacContentInner #tour-navigation {
  margin-bottom: 32px;
}
#eacContentInner #tour-navigation.c2r1 {
  background-color: white;
  grid-template-areas: "previous next";
  padding-left: 32px;
  padding-right: 32px;
}
#eacContentInner #tour-navigation .tour-next-button, #eacContentInner #tour-navigation .tour-previous-button {
  display: none;
  align-items: center;
  width: auto;
  background-color: #0089e8;
  color: white;
  height: 49px;
  cursor: pointer;
  transition: background-color 0.2s;
  border-radius: 5px;
  margin: 0;
  padding: 0 1em;
}
#eacContentInner #tour-navigation .tour-next-button.show, #eacContentInner #tour-navigation .tour-previous-button.show {
  display: flex !important;
}
#eacContentInner #tour-navigation .tour-next-button:hover, #eacContentInner #tour-navigation .tour-previous-button:hover {
  background-color: #0398ff;
}
#eacContentInner #tour-navigation .tour-next-button.visible, #eacContentInner #tour-navigation .tour-previous-button.visible {
  visibility: visible;
}
#eacContentInner #tour-navigation .tour-next-button {
  grid-area: next;
  justify-self: right;
  justify-content: right;
  display: none;
}
#eacContentInner #tour-navigation .tour-next-button:before {
  content: "Next";
}
#eacContentInner #tour-navigation .tour-next-button:after {
  content: "";
  background-image: url(../../images/tour_next.svg);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 20px 20px;
  width: 20px;
  height: 20px;
  margin-left: 10px;
}
#eacContentInner #tour-navigation .tour-previous-button {
  grid-area: previous;
  justify-self: left;
  justify-content: left;
}
#eacContentInner #tour-navigation .tour-previous-button:before {
  content: "";
  background-image: url(../../images/tour_previous.svg);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 20px 20px;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
#eacContentInner #tour-navigation .tour-previous-button:after {
  content: "Back";
}
#eacContentInner #tourSlider {
  visibility: hidden;
  overflow: hidden;
  height: auto;
  font-weight: 100;
  font-size: 18px;
  line-height: 1.3;
}
#eacContentInner #tourSlider .questionBubble {
  position: relative;
  padding: 20px;
  border: 8px solid #EEE;
  margin-bottom: 36px;
}
#eacContentInner #tourSlider .questionBubble h2.reportCard {
  margin-bottom: 0.4em;
  line-height: 1.1;
}
#eacContentInner #tourSlider .questionBubble .questionBubbleTip {
  position: absolute;
  top: 100%;
  left: 10%;
  display: block;
  width: 56px;
  height: 36px;
  background-image: url(../images/bubbleTip.png);
  background-repeat: no-repeat;
}
#eacContentInner #tourSlider .tour-grid {
  display: none !important;
  grid-template-columns: 40% 50%;
  grid-template-rows: repeat(4, minmax(auto, 1fr));
  grid-row-gap: 1em;
  grid-column-gap: 5%;
  width: 100% !important;
  max-width: 1050px !important;
  justify-self: center;
}
#eacContentInner #tourSlider .tour-grid#tourPageConsonants {
  grid-template-columns: auto auto;
}
#eacContentInner #tourSlider .tour-grid.show {
  display: grid !important;
}
#eacContentInner #tourSlider #tourPageIntro.tour-grid {
  grid-template-areas: "tour-pic-one eac-intro-1-callout" "tour-pic-one eac-intro-1-callout" "tour-pic-two eac-intro-1-callout" "tour-pic-two eac-intro-1-callout";
  grid-template-rows: 116px 85px 100px auto;
  grid-template-columns: minmax(0, 365px) minmax(0, 100%);
  justify-content: center;
  padding: 0 32px;
}
#eacContentInner #tourSlider #tourPageIntro #tourPicOne, #eacContentInner #tourSlider #tourPageIntro #tourPicTwo {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  justify-self: right;
}
#eacContentInner #tourSlider #tourPageIntro #tourPicOne {
  grid-area: tour-pic-one;
  max-width: 327px;
  height: 232px;
  background-image: url(../images/tourPicOne.jpg);
}
#eacContentInner #tourSlider #tourPageIntro #tourPicTwo {
  grid-area: tour-pic-two;
  max-width: 327px;
  height: 174px;
  background-image: url(../images/tourPicTwo.jpg);
  margin-top: 10px;
}
#eacContentInner #tourSlider #tourPageIntro #tourRight {
  grid-area: eac-intro-1-callout;
}
#eacContentInner #tourSlider #tourPageIntro #tourRight #descContainIntro {
  position: relative;
  display: block;
  width: 100%;
  padding-bottom: 20px;
  color: #666;
  font-size: 18px;
  line-height: 1.3;
  margin-bottom: 36px;
}
#eacContentInner #tourSlider #tourPageContd.tour-grid {
  grid-template-areas: "tour-pic-three eac-intro-2-callout" "tour-pic-three eac-intro-2-callout" "tour-pic-three eac-intro-2-callout" "tour-pic-three eac-intro-2-callout";
  grid-template-rows: 116px 85px 100px auto;
  grid-template-columns: minmax(0, 325px) minmax(0, 500px);
  justify-content: center;
  padding: 0 32px;
}
#eacContentInner #tourSlider #tourPageContd #tourPicThree {
  grid-area: tour-pic-three;
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  justify-self: right;
  max-width: 325px;
  height: auto;
  background-image: url(../images/tourIntro2.svg);
}
#eacContentInner #tourSlider #tourPageContd #tourRight {
  grid-area: eac-intro-2-callout;
}
#eacContentInner #tourSlider #tourPageVowels.tour-grid {
  grid-template-areas: "tour-left tour-right" "tour-left tour-right" "tour-left tour-right" "tour-left tour-right";
  grid-template-rows: repeat(3, minmax(25%, auto)) minmax(0, auto);
  grid-template-columns: minmax(0, 365px) minmax(0, 100%);
  margin-bottom: 0;
  justify-content: left;
  padding: 0 32px;
}
#eacContentInner #tourSlider #tourPageVowels #tourLeft {
  grid-area: tour-left;
  justify-self: left;
  width: 100%;
}
#eacContentInner #tourSlider #tourPageVowels #tourLeft .v_grid_tour {
  display: grid;
  grid-template-areas: "empty tongue-pos" "jaw-pos vowels-panel";
  grid-template-rows: 35px minmax(0, 316px);
  grid-template-columns: 35px minmax(0, 316px);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
  max-width: 370px;
  max-height: 370px;
  width: 100%;
  height: 100%;
  background-color: #EEE;
  padding: 0.25em 1em 1em 0.25em;
}
#eacContentInner #tourSlider #tourPageVowels #tourLeft .v_grid_tour .empty {
  grid-area: empty;
  height: 20px;
}
#eacContentInner #tourSlider #tourPageVowels #tourLeft .v_grid_tour .tongue_pos, #eacContentInner #tourSlider #tourPageVowels #tourLeft .v_grid_tour .jaw_pos {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
}
#eacContentInner #tourSlider #tourPageVowels #tourLeft .v_grid_tour .tongue_pos {
  grid-area: tongue-pos;
  height: 20px;
  background-image: url(../../images/tour_vowels_tongue_pos.svg);
  padding: 5px 0;
  align-self: center;
}
#eacContentInner #tourSlider #tourPageVowels #tourLeft .v_grid_tour .jaw_pos {
  grid-area: jaw-pos;
  width: 20px;
  background-image: url(../../images/tour_vowels_jaw_pos.svg);
  padding: 0 5px;
  justify-self: center;
}
#eacContentInner #tourSlider #tourPageVowels #tourLeft .v_grid_tour .vowel_panel {
  grid-area: vowels-panel;
  justify-self: left;
  align-self: start;
}
#eacContentInner #tourSlider #tourPageVowels #tourLeft .v_grid_tour .vowel_panel .vcButton {
  font-size: 48px;
}
#eacContentInner #tourSlider #tourPageVowels #tourLeft #directions_top, #eacContentInner #tourSlider #tourPageVowels #tourLeft #directions_bottom {
  padding: 1em;
  color: #0089e8;
  text-align: center;
  font-size: clamp(0.45rem, 2.2vw, 1.07em);
  font-weight: 600;
}
#eacContentInner #tourSlider #tourPageVowels #tourLeft #directions_top {
  display: none;
}
#eacContentInner #tourSlider #tourPageVowels #tourLeft #cmd_vowels {
  align-items: center;
  width: 100%;
  background-color: #0089e8;
  color: white;
  height: 49px;
  cursor: pointer;
  transition: background-color 0.2s;
  border-radius: 5px;
  margin: 0;
  padding: 0 1em;
  font: bold 16px/16px Arial, Helvetica, sans-serif;
  font-size: clamp(0.45rem, 2.2vw, 1.07em);
  display: flex;
  justify-content: center;
}
#eacContentInner #tourSlider #tourPageVowels #tourLeft #cmd_vowels:hover {
  background-color: #0398ff;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight {
  grid-area: tour-right;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight #descContain {
  position: relative;
  display: block;
  width: 100%;
  padding-bottom: 85px;
  color: #666;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight #descContain .vowel_s {
  display: inline-flex;
  min-width: 35px;
  min-height: 35px;
  max-width: 35px;
  max-height: 35px;
  font-size: 1.75em;
  color: white;
  padding-top: 2px;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight #descContain .vowel_s.vowel_s_7 {
  padding-top: 0px;
  font-size: 2.2rem;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight #descContain .vowel_s.vowel_s_other {
  color: #0089e8;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight #descContain #simpleDesc .vowel_s {
  font-size: 1.35em;
  min-width: 15px;
  min-height: 15px;
  margin: 3px 0 0;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight #descContain #simpleDesc .vowel_s.vowel_s_7 {
  padding-top: 0px;
  font-size: 1.5185rem;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight #descContain #simpleDesc .vowel_s.vowel_s_other {
  color: #0089e8;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight .summary {
  display: none;
  width: 100%;
  height: 49px;
  background-color: #0089e8;
  border-radius: 5px;
  text-align: center;
  align-items: center;
  justify-content: center;
  margin: 20px 0 0 0;
  color: white;
  font: bold 18px/18px Arial, Helvetica, sans-serif;
  font-size: clamp(0.45rem, 2.2vw, 1.07em);
}
#eacContentInner #tourSlider #tourPageVowels #tourRight .summary:hover {
  cursor: pointer;
  background-color: #0398ff;
  transition: background-color 0.2s;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight #summary p, #eacContentInner #tourSlider #tourPageVowels #tourRight #summary2 p, #eacContentInner #tourSlider #tourPageVowels #tourRight #summary3 p {
  letter-spacing: 0px;
  word-spacing: 3px;
  font-weight: 100;
  font-size: 18px;
  font-variant: normal;
  font-size-adjust: none;
  font-stretch: normal;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight #summNext, #eacContentInner #tourSlider #tourPageVowels #tourRight #summNext2 {
  display: inline-block;
  zoom: 1;
  *display: inline;
  width: 17px;
  height: 21px;
  margin: 0 0 0 10px;
  padding: 0 10px;
  font-size: 18px;
  background-image: url(../../images/tour_next_arrow.svg);
  background-repeat: no-repeat;
  background-position: 0 0;
  vertical-align: middle;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight #summNext:hover, #eacContentInner #tourSlider #tourPageVowels #tourRight #summNext2:hover {
  cursor: pointer;
  background-image: url(../../images/tour_next_arrow_hover.svg);
  transition: background-image 0.2s;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight .mouthDiagram {
  max-width: 332px;
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 12px;
  background-image: url(../images/mouth_diagram.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  max-height: 164px;
  justify-self: center;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight .rc_vowelDesc {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
}
#eacContentInner #tourSlider #tourPageVowels #tourRight .rc_vowelDesc#summary, #eacContentInner #tourSlider #tourPageVowels #tourRight .rc_vowelDesc#summary2, #eacContentInner #tourSlider #tourPageVowels #tourRight .rc_vowelDesc#summary3 {
  grid-template-columns: auto;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight .rc_vowelDesc #descLeft, #eacContentInner #tourSlider #tourPageVowels #tourRight .rc_vowelDesc #descRight {
  display: block;
  float: left;
  overflow: hidden;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight .rc_vowelDesc #descLeft img {
  vertical-align: top;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight .rc_vowelDesc #descRight {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: repeat(5, auto);
  grid-template-areas: "eh ed" "sh sh" "sd sd" "th th" "td td";
  margin-top: 8px;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight .rc_vowelDesc #descRight b {
  font-weight: bold;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight .rc_vowelDesc #descRight #exampleHeader {
  grid-area: eh;
  font-weight: 100;
  margin-right: 20px;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight .rc_vowelDesc #descRight #exampleList {
  grid-area: ed;
  font-weight: 100;
  font-style: italic;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight .rc_vowelDesc #descRight #simpleDescHeader {
  grid-area: sh;
  font-weight: bold;
  margin-bottom: 15px;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight .rc_vowelDesc #descRight #simpleDesc {
  grid-area: sd;
  font-weight: 100;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight .rc_vowelDesc #descRight #techDescHeader {
  grid-area: th;
  font-weight: bold;
  margin-bottom: 15px;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight .rc_vowelDesc #descRight #techDesc {
  grid-area: td;
  font-weight: 100;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight .rc_vowelDesc #descRight p img, #eacContentInner #tourSlider #tourPageVowels #tourRight .rc_vowelDesc #descRight #descBottom p img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight .rc_vowelDesc #descRight p {
  line-height: 1.3;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight .rc_vowelDesc #descRight u, #eacContentInner #tourSlider #tourPageVowels #tourRight .rc_vowelDesc #descRight b {
  color: #666;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight .rc_vowelDesc #descRight p img {
  vertical-align: middle;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight .rc_vowelDesc #simpleDescHeader {
  clear: both;
  margin: 15px 0 3px;
  font-weight: bold;
  color: #666;
  font-style: italic;
  width: 100%;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight .rc_vowelDesc #simpleDesc {
  clear: both;
  margin-bottom: 10px;
  width: 100%;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight .rc_vowelDesc #simpleDescCons {
  clear: both;
  margin: 0 0 10px;
  width: 100%;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight .rc_vowelDesc #exampleList {
  list-style: none;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight .rc_vowelDesc #exampleList li {
  line-height: 1;
  font-style: italic;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight .rc_vowelDesc #techDescHeader {
  display: block;
  float: left;
  clear: left;
  margin-top: 7px;
  margin-bottom: 3px;
  font-weight: bold;
  color: #666;
  font-style: italic;
  width: 100%;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight .rc_vowelDesc #techDesc {
  display: block;
  float: left;
  clear: left;
  width: 100%;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight .rc_vowelDesc .descBottom {
  display: block;
  float: left;
  clear: left;
  width: 100%;
  margin-top: 35px;
}
#eacContentInner #tourSlider #tourPageVowels #tourRight .rc_vowelDesc #descBottom p {
  line-height: 1.1;
}
#eacContentInner #tourSlider #tourPageConsonants.tour-grid {
  grid-template-areas: "tour-left tour-right" "tour-left tour-right" "tour-left tour-right" "tour-left tour-right";
  grid-template-rows: repeat(3, minmax(25%, auto)) minmax(0, auto);
  grid-template-columns: minmax(0, 47.5%) minmax(0, 47.5%);
  justify-content: left;
  padding: 0 32px;
}
#eacContentInner #tourSlider #tourPageConsonants #tourLeftCons {
  grid-area: tour-left;
  justify-self: left;
  width: 100%;
}
#eacContentInner #tourSlider #tourPageConsonants #tourLeftCons .cons_grid_tour {
  width: 100%;
  height: auto;
  background-color: #EEE;
  padding: 16px;
  border-radius: 5px;
}
#eacContentInner #tourSlider #tourPageConsonants #tourLeftCons .cons_grid_tour .consonants_panel {
  grid-column-gap: 4px;
}
#eacContentInner #tourSlider #tourPageConsonants #tourLeftCons .cons_grid_tour .consonants_panel .vcButton, #eacContentInner #tourSlider #tourPageConsonants #tourLeftCons .cons_grid_tour .consonants_panel .spacer {
  width: 100%;
}
#eacContentInner #tourSlider #tourPageConsonants #tourLeftCons .cons_grid_tour .consonants_panel .vcButton {
  font-size: clamp(2.5rem, 3.5vw, 2.5em);
}
#eacContentInner #tourSlider #tourPageConsonants #tourLeftCons #directions_top, #eacContentInner #tourSlider #tourPageConsonants #tourLeftCons #directions_bottom {
  padding: 1em;
  color: #0089e8;
  text-align: center;
  font-size: clamp(0.45rem, 2.2vw, 1.07em);
  font-weight: 600;
}
#eacContentInner #tourSlider #tourPageConsonants #tourLeftCons #directions_top {
  display: none;
}
#eacContentInner #tourSlider #tourPageConsonants #tourLeftCons #cmd_cons {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #0089e8;
  color: white;
  height: 49px;
  cursor: pointer;
  transition: background-color 0.2s;
  border-radius: 5px;
  margin: 0;
  padding: 0 1em;
  font: bold 16px/16px Arial, Helvetica, sans-serif;
  font-size: clamp(0.45rem, 2.2vw, 1.07em);
  justify-content: center;
}
#eacContentInner #tourSlider #tourPageConsonants #tourLeftCons #cmd_cons:hover {
  background-color: #0398ff;
}
#eacContentInner #tourSlider #tourPageConsonants #tourRight {
  grid-area: tour-right;
}
#eacContentInner #tourSlider #tourPageConsonants #tourRight #summaryC p, #eacContentInner #tourSlider #tourPageConsonants #tourRight #summaryC2 p {
  letter-spacing: 0px;
  word-spacing: 3px;
  font-weight: 100;
  font-size: 18px;
  font-variant: normal;
  font-size-adjust: none;
  font-stretch: normal;
}
#eacContentInner #tourSlider #tourPageConsonants #tourRight #summaryC p #summNextC, #eacContentInner #tourSlider #tourPageConsonants #tourRight #summaryC2 p #summNextC {
  display: inline-block;
  zoom: 1;
  *display: inline;
  width: 17px;
  height: 21px;
  margin: 0 0 0 10px;
  padding: 0 10px;
  font-size: 18px;
  background-image: url(../../images/tour_next_arrow.svg);
  background-repeat: no-repeat;
  background-position: 0 0;
  vertical-align: middle;
}
#eacContentInner #tourSlider #tourPageConsonants #tourRight #summaryC p #summNextC:hover, #eacContentInner #tourSlider #tourPageConsonants #tourRight #summaryC2 p #summNextC:hover {
  cursor: pointer;
  background-image: url(../../images/tour_next_arrow_hover.svg);
  transition: background-image 0.2s;
}
#eacContentInner #tourSlider #tourPageConsonants #tourRight #summaryC2 p {
  margin-bottom: 1em;
}
#eacContentInner #tourSlider #tourPageConsonants #tourRight .summaryCons {
  display: none;
  width: 100%;
  height: 49px;
  background-color: #0089e8;
  border-radius: 5px;
  text-align: center;
  align-items: center;
  justify-content: center;
  margin: 20px 0 0 0;
  color: white;
  font: bold 18px/18px Arial, Helvetica, sans-serif;
  font-size: clamp(0.45rem, 2.2vw, 1.07em);
}
#eacContentInner #tourSlider #tourPageConsonants #tourRight .summaryCons:hover {
  cursor: pointer;
  background-color: #0398ff;
  transition: background-color 0.2s;
}
#eacContentInner #tourSlider #tourPageConsonants #tourRight #descContainCons {
  position: relative;
  display: block;
  width: 100%;
  padding-bottom: 85px;
  color: #666;
}
#eacContentInner #tourSlider #tourPageConsonants #tourRight .rc_consDesc {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
}
#eacContentInner #tourSlider #tourPageConsonants #tourRight .rc_consDesc#summary, #eacContentInner #tourSlider #tourPageConsonants #tourRight .rc_consDesc#summary2, #eacContentInner #tourSlider #tourPageConsonants #tourRight .rc_consDesc#summary3 {
  grid-template-columns: auto;
}
#eacContentInner #tourSlider #tourPageConsonants #tourRight .rc_consDesc #descLeft, #eacContentInner #tourSlider #tourPageConsonants #tourRight .rc_consDesc #descRight {
  display: block;
  float: left;
  overflow: hidden;
}
#eacContentInner #tourSlider #tourPageConsonants #tourRight .rc_consDesc #descLeft img {
  vertical-align: top;
}
#eacContentInner #tourSlider #tourPageConsonants #tourRight .rc_consDesc #descLeft .cons_s {
  display: inline-flex;
  min-width: 35px;
  min-height: 35px;
  max-width: 35px;
  max-height: 35px;
  font-size: 1.5em;
  color: white;
  padding-top: 2px;
}
#eacContentInner #tourSlider #tourPageConsonants #tourRight .rc_consDesc #descRight {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: repeat(5, auto);
  grid-template-areas: "eh ed" "sh sh" "sd sd" "th th" "td td";
  margin-top: 8px;
  font-size: 18px;
}
#eacContentInner #tourSlider #tourPageConsonants #tourRight .rc_consDesc #descRight b {
  font-weight: bold;
}
#eacContentInner #tourSlider #tourPageConsonants #tourRight .rc_consDesc #descRight #exampleHeader {
  grid-area: eh;
  font-weight: 100;
  margin-right: 20px;
}
#eacContentInner #tourSlider #tourPageConsonants #tourRight .rc_consDesc #descRight #exampleList {
  grid-area: ed;
  font-weight: 100;
  font-style: italic;
}
#eacContentInner #tourSlider #tourPageConsonants #tourRight .rc_consDesc #descRight #simpleDescHeader {
  grid-area: sh;
  clear: both;
  margin: 15px 0 15px;
  font-weight: bold;
  color: #666;
  font-style: italic;
  width: 100%;
}
#eacContentInner #tourSlider #tourPageConsonants #tourRight .rc_consDesc #descRight #simpleDescCons {
  grid-area: sd;
  clear: both;
  margin: 0 0 10px;
  width: 100%;
  font-weight: 100;
}
#eacContentInner #tourSlider #tourPageConsonants #tourRight .rc_consDesc #descRight #simpleDescCons .cons_s, #eacContentInner #tourSlider #tourPageConsonants #tourRight .rc_consDesc #descRight #simpleDescCons .vowel_s {
  display: inline-flex;
  font-size: 1.35em;
  min-width: 15px;
  min-height: 15px;
  margin: 3px 0 0;
}
#eacContentInner #tourSlider #tourPageConsonants #tourRight .rc_consDesc #descRight #techDescHeader {
  grid-area: th;
  display: block;
  margin-top: 7px;
  margin-bottom: 15px;
  font-weight: bold;
  color: #666;
  font-style: italic;
  width: 100%;
}
#eacContentInner #tourSlider #tourPageConsonants #tourRight .rc_consDesc #descRight #techDesc {
  grid-area: td;
  display: block;
  width: 100%;
  font-weight: 100;
}
#eacContentInner #tourSlider #tourPageConsonants #tourRight .rc_consDesc #descRight .rc_consDesc #descRight {
  width: 190px;
  margin-left: 15px;
  color: #333;
}
#eacContentInner #tourSlider #tourPageConsonants #tourRight .rc_consDesc #descRight p {
  line-height: 1.3;
}
#eacContentInner #tourSlider #tourPageConsonants #tourRight .rc_consDesc #descRight p img {
  vertical-align: middle;
}
#eacContentInner #tourSlider #tourPageConsonants #tourRight .rc_consDesc #descRight p #exampleList {
  list-style: none;
}
#eacContentInner #tourSlider #tourPageConsonants #tourRight .rc_consDesc #descRight p #exampleList li {
  line-height: 1;
  font-style: italic;
  -webkit-hyphens: auto;
          hyphens: auto;
}
#eacContentInner #tourSlider #tourPageConsonants #tourRight .rc_consDesc #descRight u, #eacContentInner #tourSlider #tourPageConsonants #tourRight .rc_consDesc #descRight b {
  color: #666;
}
#eacContentInner #tourSlider #tourPageReportcard.tour-grid {
  grid-template-areas: "v-grid-report overall-vowels" "switch-report-cons switch-report-cons" "rc-desc-vowels rc-desc-vowels";
  grid-template-rows: 425px auto;
  grid-template-columns: 65%;
  grid-row-gap: 20px;
  justify-content: left;
  padding: 0 32px;
}
#eacContentInner #tourSlider #tourPageReportcard.tour-grid .percentage {
  font-size: 21px;
  font-weight: 600;
  margin-top: 5px;
}
#eacContentInner #tourSlider #tourPageReportcard.tour-grid #v_grid_report {
  grid-area: v-grid-report;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 80px));
  grid-template-rows: repeat(5, minmax(0, 80px));
  gap: 5px;
  font-size: 1.75em;
  align-self: center;
  justify-self: center;
}
#eacContentInner #tourSlider #tourPageReportcard.tour-grid #v_grid_report .report_white, #eacContentInner #tourSlider #tourPageReportcard.tour-grid #v_grid_report .report_blue, #eacContentInner #tourSlider #tourPageReportcard.tour-grid #v_grid_report .report_green, #eacContentInner #tourSlider #tourPageReportcard.tour-grid #v_grid_report .report_yellow, #eacContentInner #tourSlider #tourPageReportcard.tour-grid #v_grid_report .report_red {
  display: grid;
  align-items: start;
  grid-template-rows: 45% 50%;
  grid-template-columns: 100%;
  grid-template-areas: "symbol" "percent";
}
#eacContentInner #tourSlider #tourPageReportcard.tour-grid #c_grid_report {
  grid-area: 1/1/2/2;
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 38px));
  grid-template-rows: repeat(4, minmax(0, 80px));
  grid-gap: 4px;
  font-size: 1.75em;
  align-self: center;
  justify-self: center;
  text-align: center;
  margin: 0 auto;
}
#eacContentInner #tourSlider #tourPageReportcard.tour-grid #c_grid_report .percentage {
  grid-area: percent;
  align-self: start;
  display: block;
  clear: both;
  color: white;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: clamp(0.25rem, 3.5vw, 18px);
  margin: clamp(6px, 1.4vw, 7px);
}
#eacContentInner #tourSlider #tourPageReportcard.tour-grid #c_grid_report .report_white, #eacContentInner #tourSlider #tourPageReportcard.tour-grid #c_grid_report .report_blue, #eacContentInner #tourSlider #tourPageReportcard.tour-grid #c_grid_report .report_green, #eacContentInner #tourSlider #tourPageReportcard.tour-grid #c_grid_report .report_yellow, #eacContentInner #tourSlider #tourPageReportcard.tour-grid #c_grid_report .report_red {
  width: 100%;
  grid-template-rows: 50% 50%;
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-size: 2.25rem;
  padding-top: clamp(5px, 0.5vw, 3vw);
}
#eacContentInner #tourSlider #tourPageReportcard.tour-grid .overall_vowels .average_label, #eacContentInner #tourSlider #tourPageReportcard.tour-grid .overall_vowels .average_score, #eacContentInner #tourSlider #tourPageReportcard.tour-grid .overall_vowels .timer_label, #eacContentInner #tourSlider #tourPageReportcard.tour-grid .overall_vowels .timer_container, #eacContentInner #tourSlider #tourPageReportcard.tour-grid .overall_vowels .legend, #eacContentInner #tourSlider #tourPageReportcard.tour-grid .overall_cons .average_label, #eacContentInner #tourSlider #tourPageReportcard.tour-grid .overall_cons .average_score, #eacContentInner #tourSlider #tourPageReportcard.tour-grid .overall_cons .timer_label, #eacContentInner #tourSlider #tourPageReportcard.tour-grid .overall_cons .timer_container, #eacContentInner #tourSlider #tourPageReportcard.tour-grid .overall_cons .legend {
  margin: 5px auto 0;
  color: #0089e8;
  font-size: clamp(1.4rem, 3.1vw, 1.7rem);
  font-weight: 600;
}
#eacContentInner #tourSlider #tourPageReportcard.tour-grid .overall_vowels .legend, #eacContentInner #tourSlider #tourPageReportcard.tour-grid .overall_cons .legend {
  grid-area: legend;
  display: grid;
  grid-template-columns: 17% 83%;
  grid-template-rows: auto auto auto;
  align-items: center;
  margin: 0.75em 0;
}
#eacContentInner #tourSlider #tourPageReportcard.tour-grid .overall_vowels .legend .mclr, #eacContentInner #tourSlider #tourPageReportcard.tour-grid .overall_vowels .legend .sclr, #eacContentInner #tourSlider #tourPageReportcard.tour-grid .overall_vowels .legend .nmpclr, #eacContentInner #tourSlider #tourPageReportcard.tour-grid .overall_cons .legend .mclr, #eacContentInner #tourSlider #tourPageReportcard.tour-grid .overall_cons .legend .sclr, #eacContentInner #tourSlider #tourPageReportcard.tour-grid .overall_cons .legend .nmpclr {
  width: 25px;
  height: 25px;
  margin: 0;
  border-radius: 3px;
}
#eacContentInner #tourSlider #tourPageReportcard.tour-grid .overall_vowels, #eacContentInner #tourSlider #tourPageReportcard.tour-grid .overall_cons {
  grid-area: overall-vowels;
  display: grid;
  place-content: start;
  grid-template-columns: 65% 35%;
  grid-template-rows: auto auto 185px;
  grid-template-areas: "average-label average-score" "timer-label timer-container" "legend legend" "advice advice" "retry retry" "get-pdf get-pdf";
  align-self: center;
}
#eacContentInner #tourSlider #tourPageReportcard.tour-grid .overall_cons {
  grid-area: 1/2/2/3;
  align-self: center;
}
#eacContentInner #tourSlider #tourPageReportcard.tour-grid #switchReportCardVowels {
  grid-area: 2/1/3/3;
}
#eacContentInner #tourSlider #tourPageReportcard.tour-grid #switchReportCardCons {
  grid-area: switch-report-cons;
}
#eacContentInner #tourSlider #tourPageReportcard.tour-grid #switchReportCardCons, #eacContentInner #tourSlider #tourPageReportcard.tour-grid #switchReportCardVowels {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #0089e8;
  color: white;
  height: 49px;
  cursor: pointer;
  transition: background-color 0.2s;
  border-radius: 5px;
  margin: 0;
  padding: 0 1em;
  font: bold 16px/16px Arial, Helvetica, sans-serif;
  font-size: clamp(1.4rem, 2.2vw, 1.2em);
  justify-content: center;
}
#eacContentInner #tourSlider #tourPageReportcard.tour-grid #switchReportCardCons p, #eacContentInner #tourSlider #tourPageReportcard.tour-grid #switchReportCardVowels p {
  color: white;
}
#eacContentInner #tourSlider #tourPageReportcard.tour-grid #switchReportCardCons:hover, #eacContentInner #tourSlider #tourPageReportcard.tour-grid #switchReportCardVowels:hover {
  background-color: #0398ff;
}
#eacContentInner #tourSlider #tourPageReportcard.tour-grid #tour_rcDescVowels {
  grid-area: rc-desc-vowels;
}
#eacContentInner #tourSlider #tourPageReportcard.tour-grid #tour_rcDescCons {
  grid-area: 3/1/3/3;
}

@media screen and (max-width: 767px) {
  #eacContentInner #tourSlider .questionBubble p {
    font-weight: 400 !important;
    font-size: 21px !important;
  }
  #eacContentInner #tourSlider .questionBubble ul#exampleList li {
    font-weight: 400;
    font-size: 21px;
  }
  #eacContentInner #tourSlider #tourPageIntro.tour-grid {
    grid-template-areas: "tour-pic-one tour-pic-two" "eac-intro-1-callout eac-intro-1-callout";
    grid-template-rows: minmax(0, auto) minmax(50%, auto);
    grid-template-columns: repeat(2, minmax(0, auto));
  }
  #eacContentInner #tourSlider #tourPageIntro #tourPicOne {
    height: auto;
    max-height: 232px;
  }
  #eacContentInner #tourSlider #tourPageIntro #tourPicTwo {
    display: flex;
    height: auto;
    max-height: 174px;
    margin-top: 0;
    align-self: center;
  }
  #eacContentInner #tourSlider #tourPageContd.tour-grid {
    grid-template-areas: "tour-pic-three" "eac-intro-2-callout";
    grid-template-rows: auto;
    grid-template-columns: minmax(0, 100%);
    justify-content: center;
    padding: 0 32px;
  }
  #eacContentInner #tourSlider #tourPageContd #tourPicThree {
    max-width: 275px;
    justify-self: center;
  }
  #eacContentInner #tourSlider #tourPageContd #tourRight {
    grid-area: eac-intro-2-callout;
  }
  #eacContentInner #tourSlider #tourPageVowels.tour-grid {
    grid-template-areas: "tour-left" "tour-right";
    grid-template-rows: repeat(2, minmax(0, auto));
    grid-template-columns: minmax(0, 100%);
    justify-content: center;
  }
  #eacContentInner #tourSlider #tourPageVowels #tourLeft {
    display: grid;
    grid-template-areas: "play-vowels-btn" "directions" "v-grid-tour";
    grid-template-rows: repeat(3, minmax(0, auto));
    grid-template-columns: minmax(0, 100%);
    justify-content: center;
  }
  #eacContentInner #tourSlider #tourPageVowels #tourLeft .v_grid_tour {
    grid-area: v-grid-tour;
    justify-self: center;
  }
  #eacContentInner #tourSlider #tourPageVowels #tourLeft #cmd_vowels, #eacContentInner #tourSlider #tourPageVowels #tourLeft #directions_top {
    justify-self: center;
    font-size: clamp(0.65rem, 4.6vw, 1.23em);
  }
  #eacContentInner #tourSlider #tourPageVowels #tourLeft #directions_top {
    display: block;
    grid-area: directions;
    padding: 0 0 1em;
  }
  #eacContentInner #tourSlider #tourPageVowels #tourLeft #directions_bottom {
    display: none;
  }
  #eacContentInner #tourSlider #tourPageVowels #tourLeft #cmd_vowels {
    grid-area: play-vowels-btn;
    margin: 0 0 1em;
    max-width: 100%;
  }
  #eacContentInner #tourSlider #tourPageVowels #tourRight .summary {
    font-size: clamp(1.15rem, 4.2vw, 1.07em);
  }
  #eacContentInner #tourSlider #tourPageConsonants.tour-grid {
    grid-template-areas: "tour-left" "tour-right";
    grid-template-rows: repeat(2, minmax(0, auto));
    grid-template-columns: minmax(0, 100%);
    justify-content: center;
  }
  #eacContentInner #tourSlider #tourPageConsonants #tourLeftCons {
    display: grid;
    grid-template-areas: "play-cons-btn" "directions" "cons-grid-tour";
    grid-template-rows: repeat(3, minmax(0, auto));
    grid-template-columns: minmax(0, 100%);
    justify-content: center;
  }
  #eacContentInner #tourSlider #tourPageConsonants #tourLeftCons .cons_grid_tour {
    grid-area: cons-grid-tour;
    justify-self: center;
  }
  #eacContentInner #tourSlider #tourPageConsonants #tourLeftCons .cons_grid_tour .consonants_panel {
    grid-template-columns: repeat(14, minmax(0, 27px));
  }
  #eacContentInner #tourSlider #tourPageConsonants #tourLeftCons .cons_grid_tour .consonants_panel .vcButton {
    font-size: clamp(2.5rem, 6.25vw, 3em);
  }
  #eacContentInner #tourSlider #tourPageConsonants #tourLeftCons #cmd_cons, #eacContentInner #tourSlider #tourPageConsonants #tourLeftCons #directions_top {
    justify-self: center;
    font-size: clamp(0.65rem, 4.6vw, 1.23em);
  }
  #eacContentInner #tourSlider #tourPageConsonants #tourLeftCons #directions_top {
    display: block;
    grid-area: directions;
    padding: 0 0 1em;
  }
  #eacContentInner #tourSlider #tourPageConsonants #tourLeftCons #cmd_cons {
    grid-area: play-cons-btn;
    margin: 0 0 1em;
    max-width: 100%;
  }
  #eacContentInner #tourSlider #tourPageConsonants #tourLeftCons #directions_bottom {
    display: none;
  }
  #eacContentInner #tourSlider #tourPageConsonants #tourRight .summaryCons {
    font-size: clamp(1.15rem, 4.2vw, 1.07em);
  }
  #eacContentInner #tourSlider #tourPageReportcard.tour-grid {
    grid-template-areas: "v-grid-report" "overall-vowels" "switch-report-cons" "rc-desc-vowels";
    grid-template-rows: minmax(0, auto) auto;
    grid-template-columns: minmax(0, auto);
  }
  #eacContentInner #tourSlider #tourPageReportcard.tour-grid #v_grid_report .percentage, #eacContentInner #tourSlider #tourPageReportcard.tour-grid #c_grid_report .percentage {
    font-weight: 600;
    font-size: clamp(0.25rem, 3.3vw, 18px);
    line-height: clamp(0.25rem, 4.5vw, 1.5rem);
    margin-top: clamp(0.4rem, 0.7vw, 2rem);
  }
  #eacContentInner #tourSlider #tourPageReportcard.tour-grid #v_grid_report {
    grid-area: v-grid-report;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 80px));
    grid-template-rows: repeat(5, minmax(0, 80px));
    aspect-ratio: 1/1;
  }
  #eacContentInner #tourSlider #tourPageReportcard.tour-grid .overall_vowels {
    display: grid;
    place-content: start;
    grid-template-columns: 65% 35%;
    grid-template-rows: auto auto 150px;
    grid-template-areas: "average-label average-score" "timer-label timer-container" "legend legend" "advice advice" "retry retry" "get-pdf get-pdf";
    margin: 0;
    max-width: 606px;
    width: 87%;
    justify-self: center;
  }
  #eacContentInner #tourSlider #tourPageReportcard.tour-grid .overall_vowels .legend {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-rows: 40px 40px 40px;
    margin: 20px 0 0;
  }
  #eacContentInner #tourSlider #tourPageReportcard.tour-grid #c_grid_report {
    grid-area: 1/1/2/2;
  }
  #eacContentInner #tourSlider #tourPageReportcard.tour-grid .overall_cons {
    grid-area: 2/1/3/2;
    grid-template-rows: auto auto 150px;
    width: 87%;
    justify-self: center;
  }
  #eacContentInner #tourSlider #tourPageReportcard.tour-grid .overall_cons .legend {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-rows: 40px 40px 40px;
    margin: 20px 0 0;
  }
  #eacContentInner #tourSlider #tourPageReportcard.tour-grid #switchReportCardVowels {
    grid-area: 3/1/4/2;
  }
  #eacContentInner #tourSlider #tourPageReportcard.tour-grid #tour_rcDescCons {
    grid-area: 4/1/5/2;
  }
}
@media screen and (max-width: 479px) {
  #tour-navigation, .tour-grid {
    padding: 0 !important;
  }
  #eacContentHeading h1#eacContentHeading_h1 {
    margin: 1rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(28px, 6vw, 3.75rem);
    line-height: 1.25;
  }
  #eacContentInner #tourSlider .questionBubble p {
    font-weight: 400 !important;
    font-size: 25px !important;
  }
  #eacContentInner #tourSlider .questionBubble ul#exampleList li {
    font-weight: 400;
    font-size: 25px;
  }
  #eacContentInner #tourSlider #tourPageIntro.tour-grid {
    grid-template-areas: "tour-pic-one" "tour-pic-two" "eac-intro-1-callout";
    grid-template-rows: repeat(3, minmax(0, auto));
    grid-template-columns: minmax(0, auto);
  }
  #eacContentInner #tourSlider #tourPageIntro.tour-grid #tourPicOne, #eacContentInner #tourSlider #tourPageIntro.tour-grid #tourPicTwo {
    justify-self: center;
  }
  #eacContentInner #tourSlider #tourPageReportcard.tour-grid {
    grid-template-rows: 335px auto;
  }
  #eacContentInner #tourSlider #tourPageReportcard.tour-grid #v_grid_report {
    grid-template-columns: repeat(5, minmax(0, 62px));
    grid-template-rows: repeat(5, minmax(0, 62px));
  }
  #eacContentInner #tourSlider #tourPageReportcard.tour-grid #v_grid_report .percentage {
    font-size: 15px;
    font-weight: 600;
    margin-top: 5px;
  }
  #eacContentInner #tourSlider #tourPageReportcard.tour-grid #c_grid_report .percentage {
    font-size: clamp(0.25rem, 3.5vw, 21px);
  }
}
@media screen and (max-width: 344px) {
  #eacContentInner #tour-navigation .tour-next-button.show, #eacContentInner #tour-navigation .tour-previous-button.show {
    font-size: clamp(1.35rem, 2.2vw, 1.2em);
  }
}
@media screen and (max-width: 394px) {
  #eacContentInner #tourSlider #tourPageVowels.tour-grid #tourRight .rc_vowelDesc #descRight {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(6, auto);
    grid-template-areas: "eh eh" "ed ed" "sh sh" "sd sd" "th th" "td td";
  }
  #eacContentInner #tourSlider #tourPageVowels.tour-grid #tourRight .rc_vowelDesc #descRight #exampleHeader {
    margin-bottom: 15px;
  }
  #eacContentInner #tourSlider #tourPageVowels.tour-grid #tourRight .rc_vowelDesc #descRight #exampleList {
    margin-bottom: 8px;
  }
  #eacContentInner #tourSlider #tourPageConsonants.tour-grid #tourLeftCons .cons_grid_tour .consonants_panel .vcButton {
    font-size: clamp(2.1rem, 7.25vw, 3em);
  }
  #eacContentInner #tourSlider #tourPageConsonants.tour-grid #tourRight .rc_consDesc #descRight {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(6, auto);
    grid-template-areas: "eh eh" "ed ed" "sh sh" "sd sd" "th th" "td td";
  }
  #eacContentInner #tourSlider #tourPageConsonants.tour-grid #tourRight .rc_consDesc #descRight #exampleHeader {
    margin-bottom: 15px;
  }
  #eacContentInner #tourSlider #tourPageConsonants.tour-grid #tourRight .rc_consDesc #descRight #exampleList {
    margin-bottom: 8px;
  }
}
@media screen and (max-height: 767px) and (orientation: landscape) {
  #eacContentInner #tourSlider .questionBubble p {
    font-weight: 400 !important;
    font-size: 21px !important;
  }
  #eacContentInner #tourSlider .questionBubble ul#exampleList li {
    font-weight: 400;
    font-size: 21px;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  #eacContentInner #tourSlider #tourPageReportcard.tour-grid {
    grid-template-rows: 335px auto;
  }
  #eacContentInner #tourSlider #tourPageReportcard.tour-grid #v_grid_report {
    grid-template-columns: repeat(5, minmax(0, 62px));
    grid-template-rows: repeat(5, minmax(0, 62px));
  }
  #eacContentInner #tourSlider #tourPageReportcard.tour-grid #v_grid_report .percentage {
    font-size: 18px;
    font-weight: 600;
  }
  #eacContentInner #tourSlider .consonants_panel {
    max-height: unset;
  }
  #eacContentInner #tourSlider .consonants_panel .vcButton:before {
    display: inline;
  }
  #eacContentInner #tourSlider .questionBubble p {
    font-weight: 400 !important;
    font-size: 25px !important;
  }
  #eacContentInner #tourSlider .questionBubble ul#exampleList li {
    font-weight: 400;
    font-size: 25px;
  }
}
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
#eacContentInner.playPage {
  display: grid;
  grid-template-rows: repeat(5, minmax(49px, max-content)) minmax(min-content, max-content);
  grid-template-columns: 40% minmax(0, 1fr);
  grid-template-areas: "pvb desc" "pcb desc" "peb desc" "lv desc" "lc desc" "tour desc";
  grid-row-gap: 10px;
  grid-column-gap: 40px;
  margin: 0 auto;
  padding: 20px 32px;
}
#eacContentInner.playPage #playVowelsBtn {
  grid-area: pvb;
}
#eacContentInner.playPage #playConsBtn {
  grid-area: pcb;
}
#eacContentInner.playPage #playEchoBtn {
  grid-area: peb;
}
#eacContentInner.playPage #learnVowelsBtn {
  grid-area: lv;
}
#eacContentInner.playPage #learnConsBtn {
  grid-area: lc;
}
#eacContentInner.playPage #tourBtn {
  grid-area: tour;
  align-self: flex-start;
}
#eacContentInner.playPage .playPageBanner {
  grid-area: desc;
}
#eacContentInner.playPage a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 49px;
  background-image: none;
  background-color: #0089e8;
  color: white;
  border-radius: 5px;
  font-family: ArialArial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: clamp(1.15rem, 2.2vw, 21.6px);
  padding: 0 12px;
}
#eacContentInner.playPage a:hover {
  background-color: #0398ff;
  transition: background-color 0.2s;
}
#eacContentInner.playPage a.tourGreen {
  background-color: #4ead1f;
}
#eacContentInner.playPage a.tourGreen:hover {
  background-color: #58c323;
  transition: background-color 0.2s;
}
#eacContentInner.playPage a span.leftBtnText {
  width: 175px;
  font-size: 21px;
  line-height: 1.25;
}
#eacContentInner.playPage a .eacLogo, #eacContentInner.playPage a .echoLogo, #eacContentInner.playPage a .tourLogoGrad, #eacContentInner.playPage a .tourLogo {
  min-width: 55px;
}
#eacContentInner.playPage a .eacLogo:before, #eacContentInner.playPage a .echoLogo:before, #eacContentInner.playPage a .tourLogoGrad:before, #eacContentInner.playPage a .tourLogo:before {
  content: "";
  display: flex;
  height: 35px;
  width: 35px;
  background-repeat: no-repeat;
  background-position: center center;
  margin-right: 10px;
}
#eacContentInner.playPage a .eacLogo:before {
  background-size: 35px 35px;
  background-image: url(../../images/eac_icon.svg);
}
#eacContentInner.playPage a .echoLogo:before {
  background-size: 30px 30px;
  background-image: url(../../images/echo_logo_white.svg);
}
#eacContentInner.playPage a .tourLogoGrad:before {
  background-size: 39px 39px;
  background-image: url(../../images/tour_grad.svg);
}
#eacContentInner.playPage a .tourLogo:before {
  background-size: 33px 33px;
  background-image: url(../../images/tour_compass.svg);
}
#eacContentInner.playPage .playPageBanner {
  display: none;
  grid-template-rows: 80px auto auto minmax(49px, 100px);
  grid-template-columns: 55% minmax(0, 1fr);
  grid-template-areas: "hdg img-s" "dsc img-s" "dsc img-s" "lnk img-s";
  grid-column-gap: 40px;
  width: 100%;
  height: 100%;
}
#eacContentInner.playPage #playVowelsImage {
  display: grid;
}
#eacContentInner.playPage .image-spacer {
  grid-area: img-s;
  display: flex;
  align-items: center;
  padding: 20px;
  justify-content: center;
  border-radius: 5px;
}
#eacContentInner.playPage .image-spacer.vowelsImg, #eacContentInner.playPage .image-spacer.consonantsImg, #eacContentInner.playPage .image-spacer.echoImg, #eacContentInner.playPage .image-spacer.learnVowelsImg, #eacContentInner.playPage .image-spacer.learnConsonantsImg, #eacContentInner.playPage .image-spacer.tourImg {
  background-color: #fafafa;
}
#eacContentInner.playPage .image-spacer.vowelsImg img, #eacContentInner.playPage .image-spacer.consonantsImg img, #eacContentInner.playPage .image-spacer.echoImg img, #eacContentInner.playPage .image-spacer.learnVowelsImg img, #eacContentInner.playPage .image-spacer.learnConsonantsImg img, #eacContentInner.playPage .image-spacer.tourImg img {
  height: auto;
  width: 100%;
  max-height: 225px;
}
#eacContentInner.playPage .heading {
  grid-area: hdg;
  display: flex;
  align-items: center;
  height: 100%;
  font-size: clamp(1rem, 4.6vw, 2.5rem);
  color: #0089e8;
}
#eacContentInner.playPage .heading.learn {
  color: #4ead1f;
}
#eacContentInner.playPage .description {
  display: flex;
  align-self: flex-start;
  grid-area: dsc;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.25;
}
#eacContentInner.playPage .description.echo {
  grid-area: 2/1/5/2;
}
#eacContentInner.playPage .link {
  grid-area: lnk;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0089e8;
  border-radius: 5px;
  color: white;
  transition: background-color 0.2s;
  font-size: 21px;
  line-height: 1.25;
  font-weight: 400;
  margin-top: 27.813px;
}
#eacContentInner.playPage .link:hover {
  background-color: #0398ff;
}
#eacContentInner.playPage .link.learn {
  background-color: #4ead1f;
  text-align: center;
}
#eacContentInner.playPage .link.learn:hover {
  cursor: pointer;
  background-color: #58c323;
}
@media screen and (max-width: 767px) {
  #eacContentInner.playPage {
    min-height: 570px;
    grid-template-rows: repeat(5, minmax(75px, max-content)) minmax(min-content, max-content);
    grid-template-columns: 50% minmax(0, 1fr);
    grid-row-gap: 10px;
    padding: 20px;
    height: unset;
    align-items: flex-start;
  }
  #eacContentInner.playPage a.playPageLeft {
    align-self: flex-start;
    min-height: 75px;
    max-height: 92.5px;
    height: auto;
    padding: 20px 16px;
    cursor: pointer;
  }
  #eacContentInner.playPage .playPageBanner {
    grid-template-rows: repeat(4, minmax(0, max-content));
    grid-template-columns: minmax(0, 1fr);
    grid-column-gap: unset;
    grid-row-gap: 20px;
    width: 100%;
    height: 100%;
  }
  #eacContentInner.playPage .heading {
    grid-area: 1/1/2/2;
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    justify-self: center;
    margin-top: 5px;
  }
  #eacContentInner.playPage .description {
    grid-area: 2/1/3/2;
    font-size: 21px;
    line-height: 1.25;
  }
  #eacContentInner.playPage .link {
    grid-area: 3/1/4/2;
    margin: 10px 0 0;
    padding: 20px;
    text-align: center;
  }
  #eacContentInner.playPage .image-spacer {
    grid-area: 4/1/5/2;
  }
}
@media screen and (max-width: 579px) {
  #eacContentInner.playPage .link {
    margin: 0;
  }
}
@media screen and (max-width: 479px) {
  #eacContentInner.playPage {
    display: flex;
    flex-direction: column;
    padding: 0;
    min-height: unset;
    margin-bottom: 10px;
  }
  #eacContentInner.playPage a {
    height: 49px;
    justify-self: center;
  }
  #eacContentInner.playPage a.playPageLeft {
    min-height: 49px;
    padding: 0px 16px;
  }
  #eacContentInner.playPage a span {
    justify-self: center;
  }
  #eacContentInner.playPage a span.leftBtnText {
    width: 185px;
    font-size: 21px;
  }
  #eacContentInner.playPage .playPageBanner {
    grid-row-gap: 20px;
    margin-bottom: 10px;
  }
  #eacContentInner.playPage .heading {
    justify-content: center;
  }
  #eacContentInner.playPage .description {
    font-size: 21px;
    font-weight: 400;
    line-height: 1.25;
    padding: 0 20px;
  }
  #eacContentInner.playPage .link.learn {
    height: 49px;
  }
}
@media screen and (max-height: 767px) and (orientation: landscape) {
  #eacContentInner.playPage {
    min-height: 570px;
    grid-template-columns: 50% minmax(0, 1fr);
    padding: 20px !important;
    height: unset;
  }
  #eacContentInner.playPage a {
    height: auto;
    padding: 20px 16px;
    cursor: pointer;
  }
  #eacContentInner.playPage .playPageBanner {
    grid-template-rows: repeat(4, minmax(0, auto));
    grid-template-columns: minmax(0, 1fr);
    grid-column-gap: unset;
    grid-row-gap: 20px;
    width: 100%;
    height: 100%;
  }
  #eacContentInner.playPage .heading {
    grid-area: 1/1/2/2;
    font-size: clamp(1.5rem, 6vw, 2.5rem);
  }
  #eacContentInner.playPage .description {
    grid-area: 2/1/3/2;
  }
  #eacContentInner.playPage .link {
    grid-area: 3/1/4/2;
    margin: unset;
    padding: 20px;
  }
  #eacContentInner.playPage .image-spacer {
    grid-area: 4/1/5/2;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  #eacContentInner.playPage {
    min-height: unset;
    grid-template-columns: 40% minmax(0, 1fr);
  }
  #eacContentInner.playPage a {
    max-height: 49px;
  }
  #eacContentInner.playPage .playPageBanner {
    display: none;
    grid-template-rows: repeat(2, minmax(0, auto)) minmax(0, 1fr);
    grid-template-columns: 50% minmax(0, 1fr);
    grid-template-areas: revert;
    grid-row-gap: 10px;
    grid-column-gap: 40px;
    width: 100%;
    height: 100%;
  }
  #eacContentInner.playPage .heading {
    grid-area: 1/1/2/2;
    font-size: clamp(1.5rem, 6vw, 2rem);
  }
  #eacContentInner.playPage .description {
    grid-area: 2/1/3/2;
    font-size: 21px;
    line-height: 1.25;
    padding-top: 10px;
  }
  #eacContentInner.playPage .link {
    grid-area: 3/1/4/2;
    margin: 20px 0 0;
    padding: 10px;
  }
  #eacContentInner.playPage .image-spacer {
    grid-area: 1/2/4/3;
  }
}

.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
#eacContentInner #about-grid {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-row-gap: 15px;
  grid-column-gap: 3em;
  margin: 0 auto;
  padding: 1em 3em;
  max-width: 906px;
}
#eacContentInner #about-grid h2 {
  display: block;
}
#eacContentInner #about-grid #about-grid-left #credits {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, auto));
  grid-template-columns: minmax(0, 1fr);
  justify-content: left;
  row-gap: 25px;
  -moz-column-gap: 30px;
       column-gap: 30px;
}
#eacContentInner #about-grid #about-grid-left #credits h2 {
  margin-bottom: 0;
}
#eacContentInner #about-grid #about-grid-left #credits img.canada_logo {
  height: 45px;
}
#eacContentInner #about-grid #about-grid-left #credits .row3 {
  display: flex;
  flex-direction: row;
  -moz-column-gap: 30px;
       column-gap: 30px;
  row-gap: 22px;
}
#eacContentInner #about-grid #about-grid-left #credits .row3 a.brocku_logo {
  flex: 30%;
}
#eacContentInner #about-grid #about-grid-left #credits .row3 a.tm_logo {
  flex: 41%;
}
#eacContentInner #about-grid #about-grid-left #credits .row3 img {
  width: auto;
  max-height: 90px;
}
#eacContentInner #about-grid #about-grid-right {
  display: grid;
  grid-row-gap: 30px;
}
#eacContentInner #about-grid #about-grid-right h2, #eacContentInner #about-grid #about-grid-right p {
  float: left;
}
#eacContentInner #about-grid #about-grid-right p {
  font-size: 18px;
  font-weight: 400;
}
#eacContentInner #about-grid #about-grid-right p .name_role, #eacContentInner #about-grid #about-grid-right p .title {
  float: left;
  clear: both;
}
#eacContentInner #about-grid #about-grid-right p .name_role {
  margin-bottom: 5px;
}
#eacContentInner #about-grid #about-grid-right em {
  font-style: italic;
}
#eacContentInner #about-grid #about-grid-right #development_team, #eacContentInner #about-grid #about-grid-right #contact {
  display: grid;
  grid-template-rows: repeat(4, minmax(0, auto));
  grid-template-columns: minmax(0, 1fr);
  justify-content: left;
  row-gap: 20px;
  -moz-column-gap: 30px;
       column-gap: 30px;
}
#eacContentInner #about-grid #about-grid-right #contact {
  grid-template-rows: repeat(2, minmax(0, auto));
}
@media screen and (max-width: 767px) {
  #eacContentInner #about-grid {
    grid-template-rows: repeat(2, minmax(0, auto));
    grid-template-columns: minmax(0, 1fr);
    padding: 1em 12%;
  }
  #eacContentInner #about-grid p {
    font-size: 21px;
  }
  #eacContentInner #about-grid p .name_role, #eacContentInner #about-grid p .title {
    float: left;
  }
  #eacContentInner #about-grid p .name_role {
    margin-bottom: 5px;
  }
  #eacContentInner #about-grid #about-grid-left #credits .row3 {
    display: flex;
    flex-wrap: wrap;
    -moz-column-gap: 30px;
         column-gap: 30px;
    row-gap: 24px;
  }
  #eacContentInner #about-grid #about-grid-left #credits .row3 a.brocku_logo {
    flex: unset;
    flex-basis: auto;
  }
  #eacContentInner #about-grid #about-grid-left #credits .row3 a.brocku_logo img {
    min-width: 148.7px;
  }
  #eacContentInner #about-grid #about-grid-left #credits .row3 a.tm_logo {
    flex: unset;
  }
  #eacContentInner #about-grid #about-grid-left #credits .row3 a.tm_logo img {
    height: 90px;
  }
  #eacContentInner #about-grid #about-grid-left #credits .row3 img {
    width: auto;
    max-height: 90px;
  }
  #eacContentInner #about-grid #about-grid-right {
    margin-top: 20px;
  }
  #eacContentInner #about-grid #about-grid-right p {
    font-size: 21px;
    font-weight: 400;
  }
}
@media screen and (max-width: 579px) {
  #eacContentInner #about-grid {
    padding: 1em 9%;
  }
}
@media screen and (max-width: 479px) {
  #eacContentInner #about-grid {
    grid-template-rows: repeat(2, minmax(0, auto));
    padding: 1em 2em 2em;
  }
  #eacContentInner #about-grid #about-grid-left a {
    justify-self: center;
  }
  #eacContentInner #about-grid #about-grid-left #credits .row3 {
    justify-content: center;
  }
}
@media screen and (max-height: 767px) and (orientation: landscape) {
  #eacContentInner #about-grid #about-grid-right p {
    font-size: 21px;
  }
  #eacContentInner #about-grid #about-grid-right p .name_role, #eacContentInner #about-grid #about-grid-right p .title {
    float: left;
  }
  #eacContentInner #about-grid #about-grid-right p .name_role {
    margin-bottom: 5px;
  }
}

.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
#eacContentInner .faq {
  display: grid;
  grid-template-columns: 40% minmax(0, 1fr);
  grid-template-rows: auto;
  padding: 2em 10%;
  grid-column-gap: 40px;
}
#eacContentInner .faq dt, #eacContentInner .faq dd {
  clear: both;
  font-family: Arial, Arial, Helvetica, sans-serif;
  color: #555;
  line-height: 1.2;
}
#eacContentInner .faq dt {
  font-size: 21px;
  font-weight: 600;
  margin-bottom: 0.5em;
  text-indent: -1.12em;
}
#eacContentInner .faq dd {
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 1.75em;
}
#eacContentInner .faq dd:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  #eacContentInner .faq {
    grid-template-columns: minmax(0, 1fr);
    padding: 2em 3.5em 2em 5em;
  }
  #eacContentInner .faq dt {
    font-size: 24px;
    margin-bottom: 0.75em;
    text-indent: -1.12em;
  }
  #eacContentInner .faq dd {
    font-size: 21px;
    margin-bottom: 2em;
  }
}
@media screen and (max-width: 479px) {
  #eacContentInner .faq {
    padding: 0.5em 1em 2em 2.5em;
  }
}
@media screen and (max-height: 767px) and (orientation: landscape) {
  #eacContentInner .faq {
    padding: 0.5em 3.5em 2em 5em;
  }
  #eacContentInner .faq dt {
    font-size: 24px;
    margin-bottom: 0.75em;
    text-indent: -1.12em;
  }
  #eacContentInner .faq dd {
    font-size: 21px;
    margin-bottom: 2em;
  }
}

.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
#eacContentInner.logout_view, #eacContentInner.auto_logout {
  padding: 1em 2em;
}
#eacContentInner.logout_view p.loggedOut {
  text-align: center;
}
#eacContentInner p.loggedOut {
  margin: 20px auto;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #666;
  text-align: left;
  max-width: 606px;
}
@media screen and (max-width: 767px) {
  #eacContentInner p.loggedOut {
    font-size: 21px;
  }
}
@media screen and (max-width: 479px) {
  #eacContentInner.logout_view, #eacContentInner.auto_logout {
    padding: 0 1em;
  }
  #eacContentInner p.loggedOut {
    margin-top: 10px;
  }
}
@media screen and (max-height: 767px) and (orientation: landscape) {
  #eacContentInner p.loggedOut {
    font-size: 21px;
  }
}
#eacContentInner #loginPage {
  display: grid;
  grid-template-columns: 47% minmax(0, 47%);
  grid-template-rows: auto;
  padding: 2em 5%;
  grid-column-gap: 6%;
}
#eacContentInner #loginPage #lbl_quack, #eacContentInner #loginPage #lbl_duck {
  font-weight: 600;
  color: #0089e8;
}
#eacContentInner #loginPage input[type=text], #eacContentInner #loginPage input[type=password] {
  z-index: 0 !important;
  position: relative;
  border: 1px solid #AAA;
  padding: 0;
  border-radius: var(--bp-border-radius);
  width: 100%;
  font-size: clamp(21px, 2.2vw, 18px);
  max-width: 606px;
  height: 49px;
  padding: 0.5em;
  color: #666;
  margin-bottom: 10px;
  transition: border-color 0.5s;
}
#eacContentInner #loginPage input[type=text]:focus, #eacContentInner #loginPage input[type=password]:focus {
  border: 2px solid #0089e8;
}
#eacContentInner #loginPage input[type=password] {
  margin-bottom: 5px;
}
#eacContentInner #loginPage a, #eacContentInner #loginPage input {
  margin: unset;
}
#eacContentInner #loginPage a, #eacContentInner #loginPage input[type=submit], #eacContentInner #loginPage input[type=button] {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 49px;
  background-image: none;
  background-color: #0089e8;
  color: white;
  border-radius: 5px;
  font-family: ArialArial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: clamp(1.15rem, 2.2vw, 18px);
  padding: 0 12px;
}
#eacContentInner #loginPage a:hover, #eacContentInner #loginPage input[type=submit]:hover, #eacContentInner #loginPage input[type=button]:hover {
  background-color: #0398ff;
  transition: background-color 0.2s;
  cursor: pointer;
}
#eacContentInner #loginPage p {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: clamp(1.15rem, 2.2vw, 18px);
}
#eacContentInner #loginPage #loginPanelLeft form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  grid-row-gap: 10px;
}
#eacContentInner #loginPage #loginPanelLeft a {
  background-color: unset;
  height: unset;
  color: #0089e8;
  width: auto;
  margin: 0px auto 10px;
  transition: color 0.2s;
}
#eacContentInner #loginPage #loginPanelLeft a:hover {
  background-color: unset;
  color: #0398ff;
}
#eacContentInner #loginPage #loginPanelLeft #lbl_warning {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1.15rem, 2.2vw, 18px);
  font-weight: 400;
  line-height: 1.4;
  color: white;
  background-color: #ff6600;
  border-radius: 5px;
  margin: -5px 0 10px;
  padding: 0.5em 1em;
  min-height: 44px;
  text-align: left;
}
#eacContentInner #loginPage #loginPanelLeft #lbl_warning:empty {
  min-height: 0px;
  margin: 0;
  padding: 0;
}
#eacContentInner #loginPage #loginPanelRight {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 49px 49px minmax(0, 1fr);
  font-family: Arial, Helvetica, sans-serif;
  color: #0089e8;
  padding: 0;
  grid-row-gap: 25px;
}
#eacContentInner #loginPage #loginPanelRight .loginBanner {
  margin-bottom: 15px;
}
#eacContentInner #loginPage #loginPanelRight .loginBanner p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1.15rem, 4.2vw, 48px);
  color: #0089e8;
  font-weight: 600;
}
#eacContentInner #loginPage #loginPanelRight .loginBanner p.small {
  padding-top: 14px;
  font-size: clamp(1.2rem, 2.5vw, 25px);
}
#eacContentInner #loginPage #loginPanelRight .loginBanner p span.callToAction {
  display: block;
  font-size: clamp(0.85rem, 6.2vw, 55px);
  height: 1em;
}
#eacContentInner #loginPage #loginPanelRight .loginBanner p span.callToAction span.lowerCase {
  font-size: clamp(0.85rem, 3.5vw, 35px);
}
#eacContentInner #loginPage #loginPanelRight .loginFinePrint {
  margin-top: 20px;
  margin-left: 10px;
}
#eacContentInner #loginPage #loginPanelRight .loginFinePrint p {
  font-size: 18px;
  margin-bottom: 10px;
}
#eacContentInner #loginPage #loginPanelRight .loginFinePrint p#loginFinePrintA {
  text-indent: -0.6em;
}
#eacContentInner #loginPage #loginPanelRight .loginFinePrint p#loginFinePrintb {
  padding-left: 0.6em;
}
@media screen and (max-width: 767px) {
  #eacContentInner #loginPage {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    padding: 1em 5%;
  }
  #eacContentInner #loginPage p {
    font-size: 21px;
  }
  #eacContentInner #loginPage a, #eacContentInner #loginPage input[type=submit], #eacContentInner #loginPage input[type=button] {
    font-size: 21px;
  }
  #eacContentInner #loginPage #loginPanelLeft {
    width: 100%;
    max-width: 500px;
  }
  #eacContentInner #loginPage #loginPanelLeft #lbl_warning {
    font-size: 21px;
  }
  #eacContentInner #loginPage #loginPanelRight {
    width: 100%;
    max-width: 500px;
    margin-top: 2em;
  }
  #eacContentInner #loginPage #loginPanelRight .loginFinePrint p {
    font-size: 21px;
    margin-bottom: 10px;
  }
  #eacContentInner #loginPage #loginPanelRight .loginBanner {
    margin-bottom: 0;
    width: auto;
    margin: 0 auto;
  }
  #eacContentInner #loginPage #loginPanelRight .loginBanner p {
    font-size: clamp(1.15rem, 6.2vw, 48px);
  }
  #eacContentInner #loginPage #loginPanelRight .loginBanner p.small {
    padding-top: 10px;
    font-size: clamp(1.32rem, 4.2vw, 25px);
  }
  #eacContentInner #loginPage #loginPanelRight .loginBanner p span.callToAction {
    font-size: clamp(2.4rem, 9.2vw, 55px);
    line-height: 1;
  }
  #eacContentInner #loginPage #loginPanelRight .loginBanner p span.callToAction span.lowerCase {
    font-size: clamp(1.85rem, 3.5vw, 35px);
  }
}
@media screen and (max-width: 479px) {
  #eacContentInner #loginPage {
    padding: 0 5% 1em;
  }
}
@media screen and (max-height: 767px) and (orientation: landscape) {
  #eacContentInner #loginPage {
    padding: 0.5em 5%;
  }
  #eacContentInner #loginPage input[type=text], #eacContentInner #loginPage input[type=password] {
    font-size: 21px;
  }
  #eacContentInner #loginPage a, #eacContentInner #loginPage input[type=submit], #eacContentInner #loginPage input[type=button] {
    font-size: 21px;
  }
  #eacContentInner #loginPage p {
    font-size: 21px;
  }
  #eacContentInner #loginPage #loginPanelLeft #lbl_warning {
    font-size: 21px;
  }
  #eacContentInner #loginPage #loginPanelRight .loginBanner p {
    font-size: 21px;
  }
  #eacContentInner #loginPage #loginPanelRight .loginBanner p.small {
    font-size: 21px;
  }
  #eacContentInner #loginPage #loginPanelRight .loginFinePrint p {
    font-size: 21px;
  }
}

.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
#eacContentInner #pw_retrieval {
  display: flex;
  max-width: 606px;
  margin: 0 auto;
  flex-direction: column;
  padding: 1.5em 0 2em;
}
#eacContentInner #pw_retrieval .pw_panel {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
#eacContentInner #pw_retrieval .pw_panel p, #eacContentInner #pw_retrieval .pw_panel span, #eacContentInner #pw_retrieval .pw_panel .thankyou_message {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #666;
  line-height: 1.2;
}
#eacContentInner #pw_retrieval .pw_panel p, #eacContentInner #pw_retrieval .pw_panel .thankyou_message {
  font-weight: 400;
  margin-bottom: 0.5em;
}
#eacContentInner #pw_retrieval .pw_panel p.alternate {
  margin-top: 1.5em;
}
#eacContentInner #pw_retrieval .pw_panel span {
  color: #0089e8;
}
#eacContentInner #pw_retrieval .pw_panel input[type=text], #eacContentInner #pw_retrieval .pw_panel input[type=password] {
  position: relative;
  border: 1px solid #AAA;
  padding: 0;
  border-radius: var(--bp-border-radius);
  width: 100%;
  font-size: 18px;
  max-width: 606px;
  height: 49px;
  padding: 0.5em;
  color: #000;
  transition: border-color 0.5s;
}
#eacContentInner #pw_retrieval .pw_panel input[type=text]:focus, #eacContentInner #pw_retrieval .pw_panel input[type=password]:focus {
  border: 2px solid #0089e8;
}
#eacContentInner #pw_retrieval .pw_panel input, #eacContentInner #pw_retrieval .pw_panel button {
  margin: unset;
}
#eacContentInner #pw_retrieval .pw_panel input[type=submit], #eacContentInner #pw_retrieval .pw_panel input[type=button] {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 49px;
  background-image: none;
  background-color: #0089e8;
  color: white;
  border-radius: 5px;
  font-family: ArialArial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: clamp(1.15rem, 2.2vw, 18px);
  font-style: unset;
  margin: 0;
  padding: 0 12px;
}
#eacContentInner #pw_retrieval .pw_panel input[type=submit]:hover, #eacContentInner #pw_retrieval .pw_panel input[type=button]:hover {
  background-color: #0398ff;
  transition: background-color 0.2s;
  cursor: pointer;
}
#eacContentInner #pw_retrieval .pw_panel .fieldbadmsg {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1.15rem, 2.2vw, 18px);
  font-weight: 400;
  line-height: 1.4;
  color: white;
  background-color: #ff6600;
  border-radius: 5px;
  margin: -7px 0 0;
  padding: 0.5em 1em;
  min-height: 44px;
}
@media screen and (max-width: 767px) {
  #eacContentInner #pw_retrieval {
    padding: 1em 2em 1.5em;
  }
  #eacContentInner #pw_retrieval .pw_panel p, #eacContentInner #pw_retrieval .pw_panel span, #eacContentInner #pw_retrieval .pw_panel .thankyou_message {
    font-size: 21px;
  }
  #eacContentInner #pw_retrieval .pw_panel input[type=text], #eacContentInner #pw_retrieval .pw_panel input[type=password] {
    font-size: 21px;
  }
  #eacContentInner #pw_retrieval .pw_panel input[type=submit], #eacContentInner #pw_retrieval .pw_panel input[type=button] {
    font-size: 21px;
  }
  #eacContentInner #pw_retrieval .pw_panel .fieldbadmsg {
    font-size: 21px;
  }
}
@media screen and (max-width: 479px) {
  #eacContentInner #pw_retrieval {
    padding: 1em 1em 2em;
  }
}
@media screen and (max-width: 344px) {
  #eacContentInner #pw_retrieval {
    padding: 1em 0 2em;
  }
}
@media screen and (max-height: 767px) and (orientation: landscape) {
  #eacContentInner #pw_retrieval {
    padding: 1em 1em 2em;
  }
  #eacContentInner #pw_retrieval .pw_panel p, #eacContentInner #pw_retrieval .pw_panel span, #eacContentInner #pw_retrieval .pw_panel .thankyou_message {
    font-size: 21px;
  }
  #eacContentInner #pw_retrieval .pw_panel input[type=text], #eacContentInner #pw_retrieval .pw_panel input[type=password] {
    font-size: 21px;
  }
  #eacContentInner #pw_retrieval .pw_panel input[type=submit], #eacContentInner #pw_retrieval .pw_panel input[type=button] {
    font-size: 21px;
  }
  #eacContentInner #pw_retrieval .pw_panel .fieldbadmsg {
    font-size: 21px;
  }
}

.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
#eacContentInner .privacy {
  padding: 1em 3em;
  max-width: 780px;
  margin: 0 auto;
}
#eacContentInner .privacy h2, #eacContentInner .privacy p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 21px;
  font-weight: 600;
}
#eacContentInner .privacy h2 {
  margin-bottom: 1em;
}
#eacContentInner .privacy h2 span.url {
  word-break: break-all;
}
#eacContentInner .privacy p {
  font-size: 18px;
  font-weight: 400;
}
@media screen and (max-width: 767px) {
  #eacContentInner .privacy {
    padding: 1.5em 2em;
  }
  #eacContentInner .privacy h2, #eacContentInner .privacy p {
    font-size: 21px;
  }
}
@media screen and (max-width: 479px) {
  #eacContentInner .privacy {
    padding: 0.5em 1em 1.5em;
  }
}
@media screen and (max-height: 767px) and (orientation: landscape) {
  #eacContentInner .privacy {
    padding: 0.5em 1em 1em;
  }
  #eacContentInner .privacy h2, #eacContentInner .privacy p {
    font-size: 21px;
  }
}

.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
#eacContentInner #registerPanel {
  display: flex;
  flex-direction: column;
  max-width: 700px;
  margin: 0 auto;
  padding: 1em 2em;
}
#eacContentInner #registerPanel .r_row.c2r1 {
  grid-template-columns: 30% minmax(0, 1fr);
  grid-column-gap: 1.5em;
  margin-bottom: 1em;
}
#eacContentInner #registerPanel .r_row.c2r1.first_language {
  margin-bottom: 2em;
}
#eacContentInner #registerPanel .r_row.msg, #eacContentInner #registerPanel .r_row.submit {
  padding: 0 1em;
}
#eacContentInner #registerPanel .r_row .msg {
  background-color: #ff6600;
  border-radius: 5px;
  padding: 0.5em 1em;
  max-width: 606px;
  margin: 0 auto 1em;
  min-height: 44px;
  width: 100%;
}
#eacContentInner #registerPanel .r_row.submit {
  margin: 10px 0 1em;
}
#eacContentInner #registerPanel .dotvvm-bp-drop-down-list {
  height: 49px;
  background: none;
}
#eacContentInner #registerPanel .dotvvm-bp-list-view_display-mode-list .dotvvm-bp-primitive_item {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: black;
}
#eacContentInner #registerPanel .dotvvm-bp-list-view_display-mode-list .dotvvm-bp-primitive_item.dotvvm-bp-state_selected {
  color: white;
}
#eacContentInner #registerPanel .dotvvm-bp-primitive_picker > .dotvvm-bp-primitive_value {
  padding: 0 0 0 0.5em;
}
#eacContentInner #registerPanel .dotvvm-bp-primitive_placeholder {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #000;
  height: auto;
}
#eacContentInner #registerPanel #lbl_warning {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1.15rem, 2.2vw, 18px);
  font-weight: 400;
  line-height: 1.4;
  color: white;
  text-align: left;
  margin: 0 auto;
  width: -moz-fit-content;
  width: fit-content;
}
#eacContentInner #registerPanel button {
  border: 1px solid #AAA;
  height: 49px;
  background: none;
}
#eacContentInner #registerPanel button:focus, #eacContentInner #registerPanel button:focus-within, #eacContentInner #registerPanel button:target, #eacContentInner #registerPanel button:focus-visible {
  border: 1px solid #0089e8;
  height: 49px;
  outline-color: #0089e8;
  outline-width: 1px;
  outline-style: solid;
}
#eacContentInner #registerPanel button .dotvvm-bp-primitive_picker {
  border: none;
}
#eacContentInner #registerPanel button .dotvvm-bp-primitive_picker > .dotvvm-bp-primitive_button {
  align-self: stretch;
  height: 45px;
}
#eacContentInner #registerPanel button .dotvvm-bp-primitive_picker .dotvvm-bp-primitive_value {
  display: flex;
  align-items: center;
}
#eacContentInner #registerPanel button .dotvvm-bp-primitive_picker .dotvvm-bp-primitive_contents.dotvvm-bp-primitive_text, #eacContentInner #registerPanel button .dotvvm-bp-primitive_picker .dotvvm-bp-primitive_placeholder.dotvvm-bp-primitive_text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  color: #000;
}
#eacContentInner #registerPanel .c1 {
  display: flex;
  align-items: center;
  justify-content: right;
}
#eacContentInner #registerPanel .c1 span {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #0089e8;
  line-height: 1.2;
  text-align: right;
}
#eacContentInner #registerPanel .c2 {
  min-height: 49px;
  width: 100%;
}
#eacContentInner #registerPanel .c2 .fieldbadmsg {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  color: white;
  background-color: #0089e8;
  border-radius: 5px;
  margin: 10px 0 0;
  padding: 0.5em 1em;
  min-height: 44px;
}
#eacContentInner #registerPanel input[type=text], #eacContentInner #registerPanel input[type=password] {
  position: relative;
  border: 1px solid #AAA;
  padding: 0;
  border-radius: var(--bp-border-radius);
  width: 100%;
  font-size: 18px;
  max-width: 606px;
  height: 49px;
  padding: 0.5em;
  color: #000;
  transition: border-color 0.5s;
}
#eacContentInner #registerPanel input[type=text]:focus, #eacContentInner #registerPanel input[type=password]:focus {
  border: 2px solid #0089e8;
}
#eacContentInner #registerPanel input, #eacContentInner #registerPanel button {
  margin: unset;
}
#eacContentInner #registerPanel input[type=submit], #eacContentInner #registerPanel input[type=button] {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 49px;
  background-image: none;
  background-color: #0089e8;
  color: white;
  border-radius: 5px;
  font-family: ArialArial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: clamp(1.15rem, 2.2vw, 18px);
  margin: 0;
  padding: 0 12px;
}
#eacContentInner #registerPanel input[type=submit]:hover, #eacContentInner #registerPanel input[type=button]:hover {
  background-color: #0398ff;
  transition: background-color 0.2s;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  #eacContentInner #registerPanel .r_row.c2r1 {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 1.5em;
    justify-items: flex-start;
    grid-row-gap: 0.5em;
  }
  #eacContentInner #registerPanel .r_row.submit {
    margin-bottom: 1.6em;
  }
  #eacContentInner #registerPanel button .dotvvm-bp-primitive_picker .dotvvm-bp-primitive_contents.dotvvm-bp-primitive_text, #eacContentInner #registerPanel button .dotvvm-bp-primitive_picker .dotvvm-bp-primitive_placeholder.dotvvm-bp-primitive_text {
    font-size: 21px;
  }
  #eacContentInner #registerPanel .dotvvm-bp-list-view_display-mode-list .dotvvm-bp-primitive_item {
    font-size: 21px;
  }
  #eacContentInner #registerPanel .dotvvm-bp-primitive_placeholder {
    font-size: 21px;
  }
  #eacContentInner #registerPanel #lbl_warning {
    font-size: 21px;
  }
  #eacContentInner #registerPanel #cmd_cont {
    margin: 0 auto;
  }
  #eacContentInner #registerPanel .c1 span {
    font-size: 21px;
  }
  #eacContentInner #registerPanel .c2 .fieldbadmsg {
    font-size: 21px;
  }
  #eacContentInner #registerPanel input[type=text], #eacContentInner #registerPanel input[type=password], #eacContentInner #registerPanel input[type=submit], #eacContentInner #registerPanel input[type=button] {
    font-size: 21px;
  }
}
@media screen and (max-width: 479px) {
  #eacContentInner #registerPanel {
    padding: 0.5em 0 1em;
    width: 100%;
  }
  #eacContentInner #registerPanel .r_row {
    padding-left: 1em;
    padding-right: 1em;
  }
  #eacContentInner #registerPanel .c1 span {
    text-align: left;
  }
}
@media screen and (max-height: 767px) and (orientation: landscape) {
  #eacContentInner #registerPanel {
    max-width: 780px;
  }
  #eacContentInner #registerPanel .r_row.c2r1 {
    margin-bottom: 1.5em;
    justify-items: right;
    grid-row-gap: 0.5em;
  }
  #eacContentInner #registerPanel .r_row.msg, #eacContentInner #registerPanel .r_row .msg {
    max-width: 780px;
  }
  #eacContentInner #registerPanel .r_row.submit {
    margin-bottom: 1.6em;
  }
  #eacContentInner #registerPanel button .dotvvm-bp-primitive_picker .dotvvm-bp-primitive_contents.dotvvm-bp-primitive_text, #eacContentInner #registerPanel button .dotvvm-bp-primitive_picker .dotvvm-bp-primitive_placeholder.dotvvm-bp-primitive_text {
    font-size: 21px;
  }
  #eacContentInner #registerPanel .dotvvm-bp-list-view_display-mode-list .dotvvm-bp-primitive_item {
    font-size: 21px;
  }
  #eacContentInner #registerPanel .dotvvm-bp-primitive_placeholder {
    font-size: 21px;
  }
  #eacContentInner #registerPanel #lbl_warning {
    font-size: 21px;
  }
  #eacContentInner #registerPanel #cmd_cont {
    margin: 0 auto;
  }
  #eacContentInner #registerPanel .c1 span {
    font-size: 21px;
  }
  #eacContentInner #registerPanel .c2 .fieldbadmsg {
    font-size: 21px;
  }
  #eacContentInner #registerPanel input[type=text], #eacContentInner #registerPanel input[type=password], #eacContentInner #registerPanel input[type=submit], #eacContentInner #registerPanel input[type=button] {
    font-size: 21px;
  }
  #eacContentInner #registerPanel input[type=submit] {
    max-width: 780px;
  }
}

.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
#eacContentInner.register_success_content {
  padding: 1em 2em;
}
#eacContentInner.register_success_content p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 400;
}
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
#eacContentInner #delete {
  flex-direction: column;
  background-color: #fff;
  border: none;
  display: block;
  left: 0;
  overflow: hidden;
  padding: 2em;
  position: fixed;
  top: 0;
  visibility: hidden;
  width: 100%;
  z-index: 5;
  height: 100%;
  align-items: center;
  justify-content: center;
  background-color: #eee;
}
#eacContentInner #delete #delete_centered {
  max-width: 300px;
  background-color: white;
  padding: 2em;
  border-radius: 5px;
}
#eacContentInner #delete .delete_account_confirm_heading, #eacContentInner #delete .smalltext {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #0089e8;
}
#eacContentInner #delete .delete_account_confirm_heading {
  margin-bottom: 0.75em;
}
#eacContentInner #delete .smalltext {
  font-weight: 400;
}
#eacContentInner #delete .delete_account_confirm_btns {
  display: flex;
  margin-top: 1em;
  gap: 1em;
}
#eacContentInner #delete .delete_account_confirm_btns #cmd_delete, #eacContentInner #delete .delete_account_confirm_btns #cmd_delete_cancel {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 49px;
  background-image: none;
  background-color: #0089e8;
  color: white;
  border-radius: 5px;
  font-family: ArialArial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: clamp(1.15rem, 2.2vw, 21.6px);
  padding: 0 12px;
}
#eacContentInner #delete .delete_account_confirm_btns #cmd_delete:hover, #eacContentInner #delete .delete_account_confirm_btns #cmd_delete_cancel:hover {
  cursor: pointer;
  background-color: #0398ff;
  transition: background-color 0.2s;
}
#eacContentInner #registerPanel .r_row.c2r1.verify_pw {
  margin-bottom: 2em;
}
#eacContentInner #registerPanel .r_row.submit {
  margin: 0 0 1em;
}
#eacContentInner #registerPanel .acct_info_msg {
  color: #0089e8;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 400;
  margin: 0.5em 0 0;
}
#eacContentInner #registerPanel .acct_info_msg.acct_info_settings_msg {
  min-height: 30px;
  font-weight: 600;
}
#eacContentInner #registerPanel input[type=button]#cmd_display_delete {
  max-width: 780px;
}
@media screen and (max-width: 767px) {
  #eacContentInner #delete .delete_account_confirm_heading, #eacContentInner #delete .smalltext {
    font-size: 21px;
  }
  #eacContentInner #delete .delete_account_confirm_btns {
    margin-top: 1.25em;
  }
  #eacContentInner #delete .delete_account_confirm_btns #cmd_delete, #eacContentInner #delete .delete_account_confirm_btns #cmd_delete_cancel {
    font-size: 21px;
  }
  #eacContentInner #registerPanel .c2 {
    min-height: unset;
  }
  #eacContentInner #registerPanel .acct_info_pswd_msg {
    margin: 0;
    font-size: 21px;
  }
}
@media screen and (max-height: 767px) and (orientation: landscape) {
  #eacContentInner #delete .delete_account_confirm_heading, #eacContentInner #delete .smalltext {
    font-size: 21px;
  }
  #eacContentInner #delete .delete_account_confirm_btns {
    margin-top: 1.25em;
  }
  #eacContentInner #delete .delete_account_confirm_btns #cmd_delete, #eacContentInner #delete .delete_account_confirm_btns #cmd_delete_cancel {
    font-size: 21px;
  }
  #eacContentInner #registerPanel .c2 {
    min-height: unset;
  }
  #eacContentInner #registerPanel .acct_info_pswd_msg {
    margin: 0;
    font-size: 21px;
  }
}

.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
#eacContentInner.progress {
  z-index: 0;
}
#eacContentInner #progress_info {
  border: 1px solid #EEE;
  width: 606px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #0089e8;
  padding: 1em;
  border-radius: 5px;
}
#eacContentInner #progress_info #progress_info_wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
#eacContentInner #progress_info #progress_info_wrapper span {
  text-align: left;
}
#eacContentInner .resetZoom {
  border: 1px solid #EEE;
  margin-bottom: 5px;
}
#eacContentInner #graphcontrols {
  position: relative;
  float: left;
  padding: 0 10px 0;
  height: 100%;
}
#eacContentInner #vt, #eacContentInner #ct {
  display: block;
  width: 136px;
  height: 30px;
  clear: both;
  border: 1px solid #EEE;
  border-radius: 3px;
  text-align: center;
  margin: 5px 0 5px;
}
#eacContentInner .resetZoom:hover, #eacContentInner #vt:hover, #eacContentInner #ct:hover {
  cursor: pointer;
}
#eacContentInner #progress_container {
  display: grid;
  justify-content: center;
  padding: 0 2em;
}
#eacContentInner #progress_container #graphcontrols #echovowelsdiff, #eacContentInner #progress_container #graphcontrols #echoconsdiff {
  gap: 10px;
  width: 100%;
  max-width: 606px;
}
#eacContentInner #progress_container #graphcontrols input[type=button] {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 49px;
  background-image: none;
  background-color: #0089e8;
  color: white;
  border-radius: 5px;
  font-family: ArialArial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 18px;
  font-style: normal;
  padding: 0 1em;
  cursor: pointer;
  margin: 20px 0;
  border-radius: 5px;
}
#eacContentInner #progress_container #graphcontrols input[type=button]:hover {
  background-color: #0398ff;
  transition: background-color 0.2s;
}
#eacContentInner #progress_container #graphcontrols input[type=button].echovowels, #eacContentInner #progress_container #graphcontrols input[type=button].echocons {
  flex: 1 1 auto;
  margin: 0;
  margin-bottom: unset;
}
#eacContentInner #progress_container #graphcontrols button {
  background-color: #FFF;
  margin: 0 0 10px;
}
#eacContentInner #progress_container #graphcontrols .dotvvm-bp-drop-down-list > .dotvvm-bp-primitive_value > .dotvvm-bp-primitive_text, #eacContentInner #progress_container #graphcontrols .dotvvm-bp-drop-down-list > .dotvvm-bp-primitive_value > .dotvvm-bp-text, #eacContentInner #progress_container #graphcontrols .dotvvm-bp-drop-down-list > .dotvvm-bp-primitive_value > .dotvvm-bp-text-view {
  font-size: 18px;
  font-weight: 600;
}
#eacContentInner #progress_container #graphcontrols .dotvvm-bp-primitive_list > .dotvvm-bp-primitive_item.dotvvm-bp-state_active, #eacContentInner #progress_container #graphcontrols .dotvvm-bp-primitive_list > .dotvvm-bp-primitive_item.dotvvm-bp-state_selected {
  font-size: 18px;
  background-color: #0089e8;
  border-color: #0089e8;
  color: white;
}
#eacContentInner #progress_container #graphcontrols .dotvvm-bp-primitive_list > .dotvvm-bp-primitive_item {
  font-size: 18px;
}
#eacContentInner #progress_container #graphcontrols #indvowels, #eacContentInner #progress_container #graphcontrols #indcons {
  margin-left: unset;
  flex-wrap: wrap;
  max-width: 606px;
  margin: 5px auto;
  align-items: center;
  flex-wrap: wrap;
  -moz-column-gap: 0.55em;
       column-gap: 0.55em;
  row-gap: 0.55em;
  width: 100%;
  margin: 0 auto;
  max-width: 606px;
  cursor: pointer;
}
#eacContentInner #progress_container #graphcontrols #indvowels > #vt {
  font-size: 18px;
  border: 0;
}
#eacContentInner #progress_container #graphcontrols #indvowels > .vowels {
  display: flex;
  font-size: 1.75em;
  color: white;
  padding-top: 2px;
  height: 49px;
  max-height: 49px;
  margin: 0;
}
#eacContentInner #progress_container #graphcontrols #indvowels > .vowels:hover {
  background-color: #0398ff;
  transition: background-color 0.2s;
}
#eacContentInner #progress_container #graphcontrols #indcons > #ct {
  font-size: 18px;
  border: 0;
}
#eacContentInner #progress_container #graphcontrols #indcons > .cons {
  display: flex;
  font-size: 1.75em;
  color: white;
  padding-top: 2px;
  height: 49px;
  max-height: 49px;
  margin: 0;
}
#eacContentInner #progress_container #graphcontrols #indcons > .cons:hover {
  background-color: #0398ff;
  transition: background-color 0.2s;
}
#eacContentInner #progress_container #legendplaceholder {
  position: relative;
  float: left;
  width: 100%;
  max-width: 606px;
  overflow: hidden;
  border: 1px solid #EEEEEE;
  padding: 5px 5px 5px 20px;
  margin: 2em auto;
  text-align: center;
}
#eacContentInner #progress_container #legendplaceholder .legendColorBox, #eacContentInner #progress_container #legendplaceholder .legendLabel {
  padding: 0 5px;
}
#eacContentInner #progress_container #legendplaceholder .legendColorBox {
  padding: 0 5px 0 0;
}
#eacContentInner #progress_container #legendplaceholder .legendLabel {
  padding: 0 15px 0 0;
  font-size: 18px;
  font-weight: 600;
}
#eacContentInner #progress_container #placeholder {
  position: relative;
  float: left;
  width: 580px;
  height: 300px;
  margin: 0em auto 1em;
}
#eacContentInner #progress_container #progressTable {
  position: relative;
  float: left;
  width: 606px;
  border: 1px solid #EEE;
  padding: 5px 5px 5px 20px;
  margin: 25px 0;
  text-align: left;
  overflow-x: auto;
  white-space: nowrap;
}
#eacContentInner #progress_container #progressTable th {
  font: normal bold 18px Arial, Helvetica, sans-serif;
  color: #0089e8;
  padding: 0 5px 0 0;
  width: auto;
  border-bottom: 1px solid #EEE;
  padding-left: 10px;
}
#eacContentInner #progress_container #progressTable tr {
  font: bold 16px Arial, Helvetica, sans-serif;
  color: #666;
}
#eacContentInner #progress_container #progressTable td {
  border-right: 1px solid #EEEEEE;
  padding-left: 10px;
  font-size: 18px;
}
#eacContentInner #progress_container #progressTable td.legendLabel {
  font: bold 14px Arial, Helvetica, sans-serif;
  color: #666;
  padding-right: 15px;
}
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
#eacContentInner .dotvvm-bp-calendar_today {
  box-shadow: inset 0 0 0 calc(var(--bp-border-width) * 2) #0089e8;
}
#eacContentInner .dotvvm-bp-primitive_list > .dotvvm-bp-primitive_item.dotvvm-bp-state_active, #eacContentInner .dotvvm-bp-primitive_list > .dotvvm-bp-primitive_item.dotvvm-bp-state_selected {
  background-color: #0089e8;
  border-color: #0089e8;
  color: white;
}
#eacContentInner .dotvvm-bp-primitive_header [class*=dotvvm-bp-command_] {
  background-color: #0089e8;
  border-radius: 0;
}
#eacContentInner .dotvvm-bp-primitive_header [class*=dotvvm-bp-command_]:hover {
  background-color: #0398ff;
}
#eacContentInner.rc_list {
  display: grid;
  padding: 1em 2em;
  overflow: visible !important;
}
#eacContentInner #rc_selector {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-row-gap: 2em;
  max-width: 780px;
  margin: 1.5em auto;
  width: 100%;
}
#eacContentInner #rc_selector #select_date {
  display: flex;
  align-items: center;
  justify-content: center;
}
#eacContentInner #rc_selector #select_date #select_from_date, #eacContentInner #rc_selector #select_date #select_to_date {
  display: grid;
  grid-template-columns: 75px minmax(0, 1fr);
  align-items: center;
}
#eacContentInner #rc_selector #select_date .label {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #0089e8;
  margin: 0 1em;
  text-align: right;
}
#eacContentInner #rc_selector #select_date .label:first-of-type {
  margin: 0 1em 0 0;
}
#eacContentInner #rc_selector #select_date .dotvvm-bp-date-picker {
  max-width: 100%;
  min-width: 100px;
  height: 49px;
}
#eacContentInner #rc_selector #select_date .dotvvm-bp-date-picker.dotvvm-bp-primitive_picker > .dotvvm-bp-primitive_text-box {
  font-size: 18px;
  font-weight: 600;
  color: #666;
  height: auto;
  margin-top: 2px;
}
#eacContentInner #rc_selector #select_date .dotvvm-bp-date-picker.dotvvm-bp-primitive_picker > .dotvvm-bp-command_unselect {
  display: none;
}
#eacContentInner #rc_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup {
  max-width: -moz-fit-content !important;
  max-width: fit-content !important;
  height: auto !important;
}
#eacContentInner #rc_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-calendar .dotvvm-bp-calendar_decade-view, #eacContentInner #rc_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-calendar .dotvvm-bp-calendar_year-view {
  display: flex;
  width: 290px;
  height: 200px;
  font-size: var(--bp-font-size);
  flex-wrap: wrap;
}
#eacContentInner #rc_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-calendar .dotvvm-bp-primitive_item {
  align-self: center;
  justify-content: center;
  font-size: 18px !important;
  height: auto;
  padding: 0.25em 0;
}
#eacContentInner #rc_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-calendar .dotvvm-bp-primitive_header {
  background-color: #0089e8;
  color: white;
}
#eacContentInner #rc_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-calendar .dotvvm-bp-calendar_day:hover, #eacContentInner #rc_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-calendar .dotvvm-bp-calendar_month:hover, #eacContentInner #rc_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-calendar .dotvvm-bp-calendar_year:hover {
  background-color: #0398ff;
  color: white;
  cursor: pointer;
  transition: 0.1s;
}
#eacContentInner #rc_selector #select_game {
  display: flex;
  align-items: center;
  justify-content: center;
}
#eacContentInner #rc_selector #select_game .dotvvm-bp-primitive_text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #0089e8;
  margin: 0 1em 0 0;
}
#eacContentInner #rc_selector #select_game .dotvvm-bp-primitive_text:last-child {
  margin: 0;
}
#eacContentInner #rc_selector input.reportSearch {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 49px;
  background-image: none;
  background-color: #0089e8;
  color: white;
  border-radius: 5px;
  font-family: ArialArial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 18px;
  padding: 0 12px;
  margin: 0;
  justify-self: center;
}
#eacContentInner #rc_selector input.reportSearch:hover {
  background-color: #0398ff;
  transition: background-color 0.2s;
  cursor: pointer;
}
#eacContentInner #rc_selector #udp_rc_listings .dotvvm-bp-grid-view {
  overflow-x: hidden;
  overflow-y: auto;
  height: 353px;
  scroll-snap-type: y mandatory;
  scroll-padding: 27px;
}
#eacContentInner #rc_selector #udp_rc_listings .dotvvm-bp-grid-view > .dotvvm-bp-primitive_table {
  min-width: 100%;
  background-color: var(--bp-color_base);
  border: none;
  border-collapse: collapse;
  width: 100%;
  position: relative;
}
#eacContentInner #rc_selector #udp_rc_listings .dotvvm-bp-grid-view .dotvvm-bp-grid-view_header-value {
  font-size: 18px;
  font-weight: 600;
}
#eacContentInner #rc_selector #udp_rc_listings .dotvvm-bp-grid-view thead tr {
  scroll-snap-align: start;
}
#eacContentInner #rc_selector #udp_rc_listings .dotvvm-bp-grid-view thead tr th {
  position: sticky;
  top: 0;
  border: none;
  background-color: #dedede;
  padding-left: 0.25em;
}
#eacContentInner #rc_selector #udp_rc_listings .dotvvm-bp-grid-view thead tr th:nth-of-type(4) {
  padding-left: 0;
}
#eacContentInner #rc_selector #udp_rc_listings .dotvvm-bp-grid-view thead tr th .dotvvm-bp-grid-view_header-value {
  font-size: 18px;
  color: #666;
}
#eacContentInner #rc_selector #udp_rc_listings .dotvvm-bp-grid-view tbody .dotvvm-bp-primitive_text {
  font-size: 18px;
  font-weight: 400;
}
#eacContentInner #rc_selector #udp_rc_listings .dotvvm-bp-grid-view tbody tr {
  scroll-snap-align: start;
}
#eacContentInner #rc_selector #udp_rc_listings .dotvvm-bp-grid-view tbody tr td {
  border: none;
}
#eacContentInner #rc_selector #udp_rc_listings .dotvvm-bp-grid-view tbody tr td a.reportcard {
  font-weight: 400;
  text-decoration: underline;
  color: blue;
}
#eacContentInner #rc_selector #udp_rc_listings .dotvvm-bp-grid-view tbody tr td a.reportcard:active {
  color: red;
}
#eacContentInner #rc_selector #udp_rc_listings .dotvvm-bp-grid-view tbody tr td a.reportcard:visited {
  color: purple;
}
@media screen and (max-width: 767px) {
  #eacContentInner #rc_selector #select_date .label {
    font-size: 21px;
  }
  #eacContentInner #rc_selector #select_date .dotvvm-bp-date-picker.dotvvm-bp-primitive_picker > .dotvvm-bp-primitive_text-box {
    font-size: 21px;
  }
  #eacContentInner #rc_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup {
    background-color: white;
    left: 0px !important;
    width: 100%;
    height: 100%;
    max-width: 100% !important;
    max-height: 100% !important;
    display: grid;
    justify-items: center;
    overflow: hidden;
  }
  #eacContentInner #rc_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup #eacContentInner #rc_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-calendar .dotvvm-bp-primitive_item {
    align-self: center;
    justify-content: center;
    font-size: 21px !important;
    height: auto;
    padding: 0.25em 0;
  }
  #eacContentInner #rc_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup .dotvvm-bp-primitive_contents .dotvvm-bp-calendar .dotvvm-bp-primitive_header {
    background-color: #0089e8;
    color: white;
  }
  #eacContentInner #rc_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup .dotvvm-bp-primitive_contents .dotvvm-bp-calendar .dotvvm-bp-primitive_header .dotvvm-bp-primitive_button.dotvvm-bp-command_switch {
    font-size: 21px;
  }
  #eacContentInner #rc_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup .dotvvm-bp-primitive_contents .dotvvm-bp-calendar .dotvvm-bp-calendar_decade-view {
    display: flex;
    width: 100%;
    height: 100px;
    font-size: 21px;
    margin: 0 auto;
  }
  #eacContentInner #rc_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup .dotvvm-bp-primitive_contents .dotvvm-bp-calendar .dotvvm-bp-calendar_decade-view ul {
    flex-wrap: wrap;
    height: 100px;
    overflow: hidden;
  }
  #eacContentInner #rc_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup .dotvvm-bp-primitive_contents .dotvvm-bp-calendar .dotvvm-bp-calendar_decade-view ul li.dotvvm-bp-calendar_year {
    font-size: 21px !important;
    width: 16.6666666667vw;
  }
  #eacContentInner #rc_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup .dotvvm-bp-primitive_contents .dotvvm-bp-calendar .dotvvm-bp-calendar_year-view {
    display: flex;
    width: 100%;
    height: 100px;
    font-size: 21px;
  }
  #eacContentInner #rc_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup .dotvvm-bp-primitive_contents .dotvvm-bp-calendar .dotvvm-bp-calendar_year-view ul {
    flex-wrap: wrap;
    overflow: hidden;
  }
  #eacContentInner #rc_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup .dotvvm-bp-primitive_contents .dotvvm-bp-calendar .dotvvm-bp-calendar_year-view ul li.dotvvm-bp-calendar_month {
    font-size: 21px !important;
    width: 16.6666666667vw;
  }
  #eacContentInner #rc_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup .dotvvm-bp-primitive_contents .dotvvm-bp-calendar .dotvvm-bp-calendar_month-view {
    display: flex;
    width: 100%;
    font-size: 21px;
  }
  #eacContentInner #rc_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup .dotvvm-bp-primitive_contents .dotvvm-bp-calendar .dotvvm-bp-calendar_month-view ul li.dotvvm-bp-calendar_day-header, #eacContentInner #rc_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup .dotvvm-bp-primitive_contents .dotvvm-bp-calendar .dotvvm-bp-calendar_month-view ul li.dotvvm-bp-calendar_day {
    font-size: 21px !important;
    width: 14.2857142857vw;
  }
  #eacContentInner #rc_selector #select_game .dotvvm-bp-primitive_text {
    font-size: 21px;
  }
  #eacContentInner #rc_selector input.reportSearch {
    font-size: 21px;
  }
}
@media screen and (max-width: 579px) {
  #eacContentInner #rc_selector #select_date {
    flex-direction: column;
  }
  #eacContentInner #rc_selector #select_date #select_from_date {
    margin-bottom: 1em;
  }
  #eacContentInner #rc_selector #select_date .dotvvm-bp-date-picker {
    /* -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;*/
  }
  #eacContentInner #rc_selector #select_date .dotvvm-bp-date-picker.dotvvm-bp-primitive_picker > .dotvvm-bp-primitive_text-box {
    font-size: 21px;
  }
  #eacContentInner #rc_selector #select_game .dotvvm-bp-primitive_text {
    font-size: 21px;
  }
  #eacContentInner #rc_selector #udp_rc_listings {
    border: 1px solid #AAA;
  }
  #eacContentInner #rc_selector #udp_rc_listings .dotvvm-bp-grid-view {
    height: 290px;
    scroll-padding: 0px;
  }
  #eacContentInner #rc_selector #udp_rc_listings .dotvvm-bp-grid-view > .dotvvm-bp-primitive_table {
    border: none;
  }
  #eacContentInner #rc_selector #udp_rc_listings .dotvvm-bp-grid-view thead tr th {
    display: none;
  }
  #eacContentInner #rc_selector #udp_rc_listings .dotvvm-bp-grid-view tbody .dotvvm-bp-primitive_text {
    font-size: 21px;
    padding: 0;
  }
  #eacContentInner #rc_selector #udp_rc_listings .dotvvm-bp-grid-view tbody tr {
    padding: 1em;
    display: block;
  }
  #eacContentInner #rc_selector #udp_rc_listings .dotvvm-bp-grid-view tbody tr td {
    display: grid;
    border: none;
    color: #666;
    font-family: Arial, Helvetica, sans-serif;
    grid-template-columns: minmax(0, 1fr);
    font-size: 21px;
    font-weight: 400;
    padding: 5px 0;
  }
  #eacContentInner #rc_selector #udp_rc_listings .dotvvm-bp-grid-view tbody tr td:nth-of-type(1):before {
    content: "Date: ";
  }
  #eacContentInner #rc_selector #udp_rc_listings .dotvvm-bp-grid-view tbody tr td:nth-of-type(2):before {
    content: "Game: ";
  }
  #eacContentInner #rc_selector #udp_rc_listings .dotvvm-bp-grid-view tbody tr td:nth-of-type(3):before {
    content: "Level: ";
  }
  #eacContentInner #rc_selector #udp_rc_listings .dotvvm-bp-grid-view tbody tr td:nth-of-type(4):before {
    content: "Click to View: ";
  }
  #eacContentInner #rc_selector #udp_rc_listings .dotvvm-bp-grid-view tbody tr td a reportcard {
    line-height: 1;
  }
}
@media screen and (max-width: 479px) {
  #eacContentInner.rc_list {
    padding: 0;
  }
  #eacContentInner #rc_selector #select_game .dotvvm-bp-check-box-list, #eacContentInner #rc_selector #select_game .dotvvm-bp-radio-button-list {
    flex-direction: column;
  }
}
@media screen and (max-width: 423px) {
  #eacContentInner #rc_selector #select_game .dotvvm-bp-check-box-list, #eacContentInner #rc_selector #select_game .dotvvm-bp-radio-button-list {
    flex-direction: column;
  }
}
@media screen and (max-height: 767px) and (orientation: landscape) {
  #eacContentInner #rc_selector #select_date .label {
    font-size: 21px;
  }
  #eacContentInner #rc_selector #select_date .dotvvm-bp-date-picker.dotvvm-bp-primitive_picker > .dotvvm-bp-primitive_text-box {
    font-size: 21px;
  }
  #eacContentInner #rc_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup .dotvvm-bp-primitive_contents .dotvvm-bp-calendar .dotvvm-bp-primitive_header .dotvvm-bp-primitive_button.dotvvm-bp-command_switch {
    font-size: 21px;
  }
  #eacContentInner #rc_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup .dotvvm-bp-primitive_contents .dotvvm-bp-calendar .dotvvm-bp-calendar_decade-view {
    font-size: 21px;
  }
  #eacContentInner #rc_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup .dotvvm-bp-primitive_contents .dotvvm-bp-calendar .dotvvm-bp-calendar_year-view {
    font-size: 21px;
  }
  #eacContentInner #rc_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup .dotvvm-bp-primitive_contents .dotvvm-bp-calendar .dotvvm-bp-calendar_month-view {
    font-size: 21px;
  }
  #eacContentInner #rc_selector #select_game .dotvvm-bp-primitive_text {
    font-size: 21px;
  }
  #eacContentInner #rc_selector input.reportSearch {
    font-size: 21px;
  }
  #eacContentInner #rc_selector #udp_rc_listings .dotvvm-bp-grid-view tbody .dotvvm-bp-primitive_text, #eacContentInner #rc_selector #udp_rc_listings .dotvvm-bp-grid-view tbody .reportcard {
    font-size: 21px;
  }
}

.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
#eacContentInner .dotvvm-bp-calendar_today {
  box-shadow: inset 0 0 0 calc(var(--bp-border-width) * 2) #0089e8;
}
#eacContentInner .dotvvm-bp-primitive_list > .dotvvm-bp-primitive_item.dotvvm-bp-state_active, #eacContentInner .dotvvm-bp-primitive_list > .dotvvm-bp-primitive_item.dotvvm-bp-state_selected {
  background-color: #0089e8;
  border-color: #0089e8;
  color: white;
}
#eacContentInner .dotvvm-bp-primitive_header [class*=dotvvm-bp-command_] {
  background-color: #0089e8;
  border-radius: 0;
}
#eacContentInner .dotvvm-bp-primitive_header [class*=dotvvm-bp-command_]:hover {
  background-color: #0398ff;
}
#eacContentInner.rs_list {
  display: grid;
  padding: 1em 2em;
  overflow: visible !important;
}
#eacContentInner #rs_selector {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-row-gap: 2em;
  max-width: 780px;
  margin: 1.5em auto;
  width: 100%;
}
#eacContentInner #rs_selector input.reportSearch {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 49px;
  background-image: none;
  background-color: #0089e8;
  color: white;
  border-radius: 5px;
  font-family: ArialArial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 18px;
  padding: 0 12px;
  margin: 0;
  justify-self: center;
}
#eacContentInner #rs_selector input.reportSearch:hover {
  background-color: #0398ff;
  transition: background-color 0.2s;
  cursor: pointer;
}
#eacContentInner #rs_selector #udp_recording_storage .dotvvm-bp-grid-view {
  overflow-x: hidden;
  overflow-y: auto;
  height: 360px;
  scroll-snap-type: y mandatory;
  scroll-padding: 0px;
  max-width: 606px;
  margin: 0 auto;
}
#eacContentInner #rs_selector #udp_recording_storage .dotvvm-bp-grid-view > .dotvvm-bp-primitive_table {
  min-width: 100%;
  background-color: var(--bp-color_base);
  border: none;
  border-collapse: collapse;
  width: 100%;
  position: relative;
}
#eacContentInner #rs_selector #udp_recording_storage .dotvvm-bp-grid-view .dotvvm-bp-grid-view_header-value {
  font-size: 18px;
  font-weight: 600;
}
#eacContentInner #rs_selector #udp_recording_storage .dotvvm-bp-grid-view thead {
  display: none !important;
}
#eacContentInner #rs_selector #udp_recording_storage .dotvvm-bp-grid-view thead tr {
  scroll-snap-align: start;
}
#eacContentInner #rs_selector #udp_recording_storage .dotvvm-bp-grid-view thead tr th {
  position: sticky;
  top: 0;
  border: none;
  background-color: #dedede;
  padding-left: 0.25em;
}
#eacContentInner #rs_selector #udp_recording_storage .dotvvm-bp-grid-view thead tr th:nth-of-type(4) {
  padding-left: 0;
}
#eacContentInner #rs_selector #udp_recording_storage .dotvvm-bp-grid-view thead tr th .dotvvm-bp-grid-view_header-value {
  font-size: 18px;
  color: #666;
}
#eacContentInner #rs_selector #udp_recording_storage .dotvvm-bp-grid-view tbody .dotvvm-bp-primitive_text {
  font-size: 18px;
  font-weight: 400;
  margin-left: 1em;
}
#eacContentInner #rs_selector #udp_recording_storage .dotvvm-bp-grid-view tbody tr {
  scroll-snap-align: start;
  height: 49px;
}
#eacContentInner #rs_selector #udp_recording_storage .dotvvm-bp-grid-view tbody tr:nth-child(2n+0) {
  background-color: #fafafa;
}
#eacContentInner #rs_selector #udp_recording_storage .dotvvm-bp-grid-view tbody tr td {
  border: none;
}
#eacContentInner #rs_selector #udp_recording_storage .dotvvm-bp-grid-view tbody tr td button {
  padding: 4px 25px;
  margin-top: 0px;
}
#eacContentInner #rs_selector #udp_recording_storage .dotvvm-bp-grid-view tbody tr td a.reportcard {
  font-weight: 400;
  text-decoration: underline;
  color: blue;
}
#eacContentInner #rs_selector #udp_recording_storage .dotvvm-bp-grid-view tbody tr td a.reportcard:active {
  color: red;
}
#eacContentInner #rs_selector #udp_recording_storage .dotvvm-bp-grid-view tbody tr td a.reportcard:visited {
  color: purple;
}
@media screen and (max-width: 767px) {
  #eacContentInner #rs_selector {
    margin: 1.5em auto;
    width: 80vw;
  }
  #eacContentInner #rs_selector #select_date .label {
    font-size: 21px;
  }
  #eacContentInner #rs_selector #select_date .dotvvm-bp-date-picker.dotvvm-bp-primitive_picker > .dotvvm-bp-primitive_text-box {
    font-size: 21px;
  }
  #eacContentInner #rs_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup {
    background-color: white;
    left: 0px !important;
    width: 100%;
    height: 100%;
    max-width: 100% !important;
    max-height: 100% !important;
    display: grid;
    justify-items: center;
    overflow: hidden;
  }
  #eacContentInner #rs_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup #eacContentInner #rs_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-calendar .dotvvm-bp-primitive_item {
    align-self: center;
    justify-content: center;
    font-size: 21px !important;
    height: auto;
    padding: 0.25em 0;
  }
  #eacContentInner #rs_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup .dotvvm-bp-primitive_contents .dotvvm-bp-calendar .dotvvm-bp-primitive_header {
    background-color: #0089e8;
    color: white;
  }
  #eacContentInner #rs_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup .dotvvm-bp-primitive_contents .dotvvm-bp-calendar .dotvvm-bp-primitive_header .dotvvm-bp-primitive_button.dotvvm-bp-command_switch {
    font-size: 21px;
  }
  #eacContentInner #rs_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup .dotvvm-bp-primitive_contents .dotvvm-bp-calendar .dotvvm-bp-calendar_decade-view {
    display: flex;
    width: 100%;
    height: 100px;
    font-size: 21px;
    margin: 0 auto;
  }
  #eacContentInner #rs_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup .dotvvm-bp-primitive_contents .dotvvm-bp-calendar .dotvvm-bp-calendar_decade-view ul {
    flex-wrap: wrap;
    height: 100px;
    overflow: hidden;
  }
  #eacContentInner #rs_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup .dotvvm-bp-primitive_contents .dotvvm-bp-calendar .dotvvm-bp-calendar_decade-view ul li.dotvvm-bp-calendar_year {
    font-size: 21px !important;
    width: 16.6666666667vw;
  }
  #eacContentInner #rs_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup .dotvvm-bp-primitive_contents .dotvvm-bp-calendar .dotvvm-bp-calendar_year-view {
    display: flex;
    width: 100%;
    height: 100px;
    font-size: 21px;
  }
  #eacContentInner #rs_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup .dotvvm-bp-primitive_contents .dotvvm-bp-calendar .dotvvm-bp-calendar_year-view ul {
    flex-wrap: wrap;
    overflow: hidden;
  }
  #eacContentInner #rs_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup .dotvvm-bp-primitive_contents .dotvvm-bp-calendar .dotvvm-bp-calendar_year-view ul li.dotvvm-bp-calendar_month {
    font-size: 21px !important;
    width: 16.6666666667vw;
  }
  #eacContentInner #rs_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup .dotvvm-bp-primitive_contents .dotvvm-bp-calendar .dotvvm-bp-calendar_month-view {
    display: flex;
    width: 100%;
    font-size: 21px;
  }
  #eacContentInner #rs_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup .dotvvm-bp-primitive_contents .dotvvm-bp-calendar .dotvvm-bp-calendar_month-view ul li.dotvvm-bp-calendar_day-header, #eacContentInner #rs_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup .dotvvm-bp-primitive_contents .dotvvm-bp-calendar .dotvvm-bp-calendar_month-view ul li.dotvvm-bp-calendar_day {
    font-size: 21px !important;
    width: 14.2857142857vw;
  }
  #eacContentInner #rs_selector #select_game .dotvvm-bp-primitive_text {
    font-size: 21px;
  }
  #eacContentInner #rs_selector input.reportSearch {
    font-size: 21px;
  }
}
@media screen and (max-width: 579px) {
  #eacContentInner #rs_selector #select_date {
    flex-direction: column;
  }
  #eacContentInner #rs_selector #select_date #select_from_date {
    margin-bottom: 1em;
  }
  #eacContentInner #rs_selector #select_date .dotvvm-bp-date-picker {
    /* -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;*/
  }
  #eacContentInner #rs_selector #select_date .dotvvm-bp-date-picker.dotvvm-bp-primitive_picker > .dotvvm-bp-primitive_text-box {
    font-size: 21px;
  }
  #eacContentInner #rs_selector #select_game .dotvvm-bp-primitive_text {
    font-size: 21px;
  }
  #eacContentInner #rs_selector #udp_recording_storage {
    border: 1px solid #AAA;
  }
  #eacContentInner #rs_selector #udp_recording_storage .dotvvm-bp-grid-view {
    height: 400px;
    scroll-padding: 0px;
  }
  #eacContentInner #rs_selector #udp_recording_storage .dotvvm-bp-grid-view > .dotvvm-bp-primitive_table {
    border: none;
  }
  #eacContentInner #rs_selector #udp_recording_storage .dotvvm-bp-grid-view thead tr th {
    display: none;
  }
  #eacContentInner #rs_selector #udp_recording_storage .dotvvm-bp-grid-view tbody .dotvvm-bp-primitive_text {
    font-size: 21px;
    padding: 0;
  }
  #eacContentInner #rs_selector #udp_recording_storage .dotvvm-bp-grid-view tbody tr {
    padding: 1em;
    display: block;
    height: unset;
  }
  #eacContentInner #rs_selector #udp_recording_storage .dotvvm-bp-grid-view tbody tr td {
    display: grid;
    border: none;
    color: #666;
    font-family: Arial, Helvetica, sans-serif;
    grid-template-columns: minmax(0, 1fr);
    font-size: 21px;
    font-weight: 400;
    padding: 5px 0;
  }
  #eacContentInner #rs_selector #udp_recording_storage .dotvvm-bp-grid-view tbody tr td a reportcard {
    line-height: 1;
  }
}
@media screen and (max-width: 479px) {
  #eacContentInner.rs_list {
    padding: 0;
  }
  #eacContentInner #rs_selector {
    margin: 1.5em auto;
    width: 90vw;
  }
  #eacContentInner #rs_selector #udp_recording_storage .dotvvm-bp-grid-view tbody tr {
    height: 200px;
    padding: 0px;
  }
  #eacContentInner #rs_selector #udp_recording_storage .dotvvm-bp-grid-view tbody tr td {
    height: 100%;
    padding: 0px;
  }
  #eacContentInner #rs_selector #udp_recording_storage .dotvvm-bp-grid-view tbody tr td button {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 30px 45px;
  }
  #eacContentInner #rs_selector #udp_recording_storage .dotvvm-bp-grid-view tbody tr td button .dotvvm-bp-switch-button_toggle, #eacContentInner #rs_selector #udp_recording_storage .dotvvm-bp-grid-view tbody tr td button .dotvvm-bp-primitive_text {
    display: block;
    float: left;
    padding: 4px 0px;
  }
  #eacContentInner #rs_selector #udp_recording_storage .dotvvm-bp-grid-view tbody tr td button .dotvvm-bp-primitive_text {
    font-size: 32px;
    margin-left: 0px;
    text-align: left;
    overflow-x: auto;
  }
  #eacContentInner #rs_selector #select_game .dotvvm-bp-check-box-list, #eacContentInner #rs_selector #select_game .dotvvm-bp-radio-button-list {
    flex-direction: column;
  }
}
@media screen and (max-width: 423px) {
  #eacContentInner #rs_selector #select_game .dotvvm-bp-check-box-list, #eacContentInner #rs_selector #select_game .dotvvm-bp-radio-button-list {
    flex-direction: column;
  }
}
@media screen and (max-height: 767px) and (orientation: landscape) {
  #eacContentInner #rs_selector #select_date .label {
    font-size: 21px;
  }
  #eacContentInner #rs_selector #select_date .dotvvm-bp-date-picker.dotvvm-bp-primitive_picker > .dotvvm-bp-primitive_text-box {
    font-size: 21px;
  }
  #eacContentInner #rs_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup .dotvvm-bp-primitive_contents .dotvvm-bp-calendar .dotvvm-bp-primitive_header .dotvvm-bp-primitive_button.dotvvm-bp-command_switch {
    font-size: 21px;
  }
  #eacContentInner #rs_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup .dotvvm-bp-primitive_contents .dotvvm-bp-calendar .dotvvm-bp-calendar_decade-view {
    font-size: 21px;
  }
  #eacContentInner #rs_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup .dotvvm-bp-primitive_contents .dotvvm-bp-calendar .dotvvm-bp-calendar_year-view {
    font-size: 21px;
  }
  #eacContentInner #rs_selector #select_date .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup .dotvvm-bp-primitive_contents .dotvvm-bp-calendar .dotvvm-bp-calendar_month-view {
    font-size: 21px;
  }
  #eacContentInner #rs_selector #select_game .dotvvm-bp-primitive_text {
    font-size: 21px;
  }
  #eacContentInner #rs_selector input.reportSearch {
    font-size: 21px;
  }
  #eacContentInner #rs_selector #udp_recording_storage .dotvvm-bp-grid-view tbody .dotvvm-bp-primitive_text, #eacContentInner #rs_selector #udp_recording_storage .dotvvm-bp-grid-view tbody .reportcard {
    font-size: 21px;
  }
}

.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
#eacContentInnerEcho {
  display: grid !important;
  padding: 2em !important;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  grid-gap: 2em;
  justify-items: center;
}
#eacContentInnerEcho #echo_select {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  width: 100%;
  max-width: 606px;
  grid-gap: 10px;
}
#eacContentInnerEcho #echo_select #echo_hs_game_select, #eacContentInnerEcho #echo_select #echo_hs_diff_select {
  display: flex;
  gap: 10px;
}
#eacContentInnerEcho #echo_select #echoHSGameSelectLeft, #eacContentInnerEcho #echo_select #echoHSGameSelectRight, #eacContentInnerEcho #echo_select #echoHSDiffSelectLeft, #eacContentInnerEcho #echo_select #echoHSDiffSelectCenter, #eacContentInnerEcho #echo_select #echoHSDiffSelectRight {
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
  background-color: white;
  color: #666;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 600;
  border: 1px solid #CCC;
  border-radius: 5px;
  display: flex;
  padding: 0.5em;
  height: 49px;
  cursor: pointer;
  transition: background-color 0.2s;
}
#eacContentInnerEcho #echo_select #echoHSGameSelectLeft:hover, #eacContentInnerEcho #echo_select #echoHSGameSelectLeft.selected_game_left, #eacContentInnerEcho #echo_select #echoHSGameSelectLeft.selected_game_right, #eacContentInnerEcho #echo_select #echoHSGameSelectLeft.selected_left, #eacContentInnerEcho #echo_select #echoHSGameSelectLeft.selected_center, #eacContentInnerEcho #echo_select #echoHSGameSelectLeft.selected_right, #eacContentInnerEcho #echo_select #echoHSGameSelectRight:hover, #eacContentInnerEcho #echo_select #echoHSGameSelectRight.selected_game_left, #eacContentInnerEcho #echo_select #echoHSGameSelectRight.selected_game_right, #eacContentInnerEcho #echo_select #echoHSGameSelectRight.selected_left, #eacContentInnerEcho #echo_select #echoHSGameSelectRight.selected_center, #eacContentInnerEcho #echo_select #echoHSGameSelectRight.selected_right, #eacContentInnerEcho #echo_select #echoHSDiffSelectLeft:hover, #eacContentInnerEcho #echo_select #echoHSDiffSelectLeft.selected_game_left, #eacContentInnerEcho #echo_select #echoHSDiffSelectLeft.selected_game_right, #eacContentInnerEcho #echo_select #echoHSDiffSelectLeft.selected_left, #eacContentInnerEcho #echo_select #echoHSDiffSelectLeft.selected_center, #eacContentInnerEcho #echo_select #echoHSDiffSelectLeft.selected_right, #eacContentInnerEcho #echo_select #echoHSDiffSelectCenter:hover, #eacContentInnerEcho #echo_select #echoHSDiffSelectCenter.selected_game_left, #eacContentInnerEcho #echo_select #echoHSDiffSelectCenter.selected_game_right, #eacContentInnerEcho #echo_select #echoHSDiffSelectCenter.selected_left, #eacContentInnerEcho #echo_select #echoHSDiffSelectCenter.selected_center, #eacContentInnerEcho #echo_select #echoHSDiffSelectCenter.selected_right, #eacContentInnerEcho #echo_select #echoHSDiffSelectRight:hover, #eacContentInnerEcho #echo_select #echoHSDiffSelectRight.selected_game_left, #eacContentInnerEcho #echo_select #echoHSDiffSelectRight.selected_game_right, #eacContentInnerEcho #echo_select #echoHSDiffSelectRight.selected_left, #eacContentInnerEcho #echo_select #echoHSDiffSelectRight.selected_center, #eacContentInnerEcho #echo_select #echoHSDiffSelectRight.selected_right {
  border: 1px solid #0089e8;
  background-color: #0089e8;
  color: white;
}
#eacContentInnerEcho #echo_ve_table_wrap .echo_hs_table tbody tr, #eacContentInnerEcho #echo_vm_table_wrap .echo_hs_table tbody tr, #eacContentInnerEcho #echo_vh_table_wrap .echo_hs_table tbody tr, #eacContentInnerEcho #echo_ce_table_wrap .echo_hs_table tbody tr, #eacContentInnerEcho #echo_cm_table_wrap .echo_hs_table tbody tr, #eacContentInnerEcho #echo_ch_table_wrap .echo_hs_table tbody tr {
  display: grid;
  grid-template-columns: 42% minmax(50px, 130px) minmax(20px, 130px) minmax(20px, 130px);
  grid-column-gap: 10px;
}
#eacContentInnerEcho #echo_ve_table_wrap .echo_hs_table tbody tr:first-child, #eacContentInnerEcho #echo_vm_table_wrap .echo_hs_table tbody tr:first-child, #eacContentInnerEcho #echo_vh_table_wrap .echo_hs_table tbody tr:first-child, #eacContentInnerEcho #echo_ce_table_wrap .echo_hs_table tbody tr:first-child, #eacContentInnerEcho #echo_cm_table_wrap .echo_hs_table tbody tr:first-child, #eacContentInnerEcho #echo_ch_table_wrap .echo_hs_table tbody tr:first-child {
  background-color: white !important;
}
#eacContentInnerEcho #echo_ve_table_wrap .echo_hs_table tbody tr:nth-child(odd), #eacContentInnerEcho #echo_vm_table_wrap .echo_hs_table tbody tr:nth-child(odd), #eacContentInnerEcho #echo_vh_table_wrap .echo_hs_table tbody tr:nth-child(odd), #eacContentInnerEcho #echo_ce_table_wrap .echo_hs_table tbody tr:nth-child(odd), #eacContentInnerEcho #echo_cm_table_wrap .echo_hs_table tbody tr:nth-child(odd), #eacContentInnerEcho #echo_ch_table_wrap .echo_hs_table tbody tr:nth-child(odd) {
  background-color: #EEE;
}
#eacContentInnerEcho #echo_ve_table_wrap .echo_hs_table tbody tr td, #eacContentInnerEcho #echo_ve_table_wrap .echo_hs_table tbody tr th, #eacContentInnerEcho #echo_vm_table_wrap .echo_hs_table tbody tr td, #eacContentInnerEcho #echo_vm_table_wrap .echo_hs_table tbody tr th, #eacContentInnerEcho #echo_vh_table_wrap .echo_hs_table tbody tr td, #eacContentInnerEcho #echo_vh_table_wrap .echo_hs_table tbody tr th, #eacContentInnerEcho #echo_ce_table_wrap .echo_hs_table tbody tr td, #eacContentInnerEcho #echo_ce_table_wrap .echo_hs_table tbody tr th, #eacContentInnerEcho #echo_cm_table_wrap .echo_hs_table tbody tr td, #eacContentInnerEcho #echo_cm_table_wrap .echo_hs_table tbody tr th, #eacContentInnerEcho #echo_ch_table_wrap .echo_hs_table tbody tr td, #eacContentInnerEcho #echo_ch_table_wrap .echo_hs_table tbody tr th {
  display: flex;
  align-items: center;
  justify-content: left;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #666;
}
#eacContentInnerEcho #echo_ve_table_wrap .echo_hs_table tbody tr th, #eacContentInnerEcho #echo_vm_table_wrap .echo_hs_table tbody tr th, #eacContentInnerEcho #echo_vh_table_wrap .echo_hs_table tbody tr th, #eacContentInnerEcho #echo_ce_table_wrap .echo_hs_table tbody tr th, #eacContentInnerEcho #echo_cm_table_wrap .echo_hs_table tbody tr th, #eacContentInnerEcho #echo_ch_table_wrap .echo_hs_table tbody tr th {
  color: #0089e8;
  font-weight: 600;
}
#eacContentInnerEcho #echo_ve_table_wrap .echo_hs_table tbody tr td:nth-child(2), #eacContentInnerEcho #echo_vm_table_wrap .echo_hs_table tbody tr td:nth-child(2), #eacContentInnerEcho #echo_vh_table_wrap .echo_hs_table tbody tr td:nth-child(2), #eacContentInnerEcho #echo_ce_table_wrap .echo_hs_table tbody tr td:nth-child(2), #eacContentInnerEcho #echo_cm_table_wrap .echo_hs_table tbody tr td:nth-child(2), #eacContentInnerEcho #echo_ch_table_wrap .echo_hs_table tbody tr td:nth-child(2) {
  font: 900 1rem "CharisSILW", "Times New Roman";
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25;
  margin-top: -5px;
}
#eacContentInnerEcho #echo_hs_pagination {
  display: grid;
  grid-template-columns: 25px 25px auto 25px 25px;
  grid-column-gap: 10px;
  height: 25px;
  max-width: 606px;
}
#eacContentInnerEcho #echo_hs_pagination .pagination {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: #666;
}
#eacContentInnerEcho #echo_hs_pagination #echo_pagination_first, #eacContentInnerEcho #echo_hs_pagination #echo_pagination_previous, #eacContentInnerEcho #echo_hs_pagination #echo_pagination_next, #eacContentInnerEcho #echo_hs_pagination #echo_pagination_last {
  width: 25px;
  height: 25px;
  cursor: pointer;
  background-size: 50px 50px;
  background-position: -11px 0px;
}
#eacContentInnerEcho #echo_hs_pagination #echo_pagination_first:hover, #eacContentInnerEcho #echo_hs_pagination #echo_pagination_previous:hover, #eacContentInnerEcho #echo_hs_pagination #echo_pagination_next:hover, #eacContentInnerEcho #echo_hs_pagination #echo_pagination_last:hover {
  background-position: -11px -25px;
}
#eacContentInnerEcho #echo_hs_pagination #echo_pagination_first, #eacContentInnerEcho #echo_hs_pagination #echo_pagination_last {
  width: 29px;
}
#eacContentInnerEcho #echo_hs_pagination #echo_pagination_first {
  background-image: url(../images/echo_hs_first.svg);
}
#eacContentInnerEcho #echo_hs_pagination #echo_pagination_previous {
  background-image: url(../images/echo_hs_previous.svg);
}
#eacContentInnerEcho #echo_hs_pagination #echo_pagination_next {
  background-image: url(../images/echo_hs_next.svg);
}
#eacContentInnerEcho #echo_hs_pagination #echo_pagination_last {
  background-image: url(../images/echo_hs_last.svg);
}
#eacContentInnerEcho #echo_nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-column-gap: 10px;
  max-width: 606px;
  width: 100%;
}
#eacContentInnerEcho #echo_nav .echoNavLeft, #eacContentInnerEcho #echo_nav .echoNavCenter, #eacContentInnerEcho #echo_nav .echoNavRight {
  display: flex;
  align-items: center;
  background-color: #0089e8;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  padding: 0.5em;
  min-height: 49px;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.2s;
}
#eacContentInnerEcho #echo_nav .echoNavLeft:hover, #eacContentInnerEcho #echo_nav .echoNavCenter:hover, #eacContentInnerEcho #echo_nav .echoNavRight:hover {
  background-color: #0398ff;
}
@media screen and (max-width: 767px) {
  #eacContentInnerEcho #echo_select #echoHSGameSelectLeft, #eacContentInnerEcho #echo_select #echoHSGameSelectRight, #eacContentInnerEcho #echo_select #echoHSDiffSelectLeft, #eacContentInnerEcho #echo_select #echoHSDiffSelectCenter, #eacContentInnerEcho #echo_select #echoHSDiffSelectRight {
    font-size: 21px;
  }
  #eacContentInnerEcho #echo_ve_table_wrap, #eacContentInnerEcho #echo_vm_table_wrap, #eacContentInnerEcho #echo_vh_table_wrap, #eacContentInnerEcho #echo_ce_table_wrap, #eacContentInnerEcho #echo_cm_table_wrap, #eacContentInnerEcho #echo_ch_table_wrap {
    width: 100%;
    max-width: 606px;
  }
  #eacContentInnerEcho #echo_ve_table_wrap .echo_hs_table, #eacContentInnerEcho #echo_vm_table_wrap .echo_hs_table, #eacContentInnerEcho #echo_vh_table_wrap .echo_hs_table, #eacContentInnerEcho #echo_ce_table_wrap .echo_hs_table, #eacContentInnerEcho #echo_cm_table_wrap .echo_hs_table, #eacContentInnerEcho #echo_ch_table_wrap .echo_hs_table {
    width: 100%;
  }
  #eacContentInnerEcho #echo_ve_table_wrap .echo_hs_table tbody .dotvvm-bp-primitive_text, #eacContentInnerEcho #echo_vm_table_wrap .echo_hs_table tbody .dotvvm-bp-primitive_text, #eacContentInnerEcho #echo_vh_table_wrap .echo_hs_table tbody .dotvvm-bp-primitive_text, #eacContentInnerEcho #echo_ce_table_wrap .echo_hs_table tbody .dotvvm-bp-primitive_text, #eacContentInnerEcho #echo_cm_table_wrap .echo_hs_table tbody .dotvvm-bp-primitive_text, #eacContentInnerEcho #echo_ch_table_wrap .echo_hs_table tbody .dotvvm-bp-primitive_text {
    font-size: 21px;
  }
  #eacContentInnerEcho #echo_ve_table_wrap .echo_hs_table tbody tr, #eacContentInnerEcho #echo_vm_table_wrap .echo_hs_table tbody tr, #eacContentInnerEcho #echo_vh_table_wrap .echo_hs_table tbody tr, #eacContentInnerEcho #echo_ce_table_wrap .echo_hs_table tbody tr, #eacContentInnerEcho #echo_cm_table_wrap .echo_hs_table tbody tr, #eacContentInnerEcho #echo_ch_table_wrap .echo_hs_table tbody tr {
    grid-template-columns: 46% minmax(50px, 130px) minmax(10px, 60px) minmax(10px, 60px);
  }
  #eacContentInnerEcho #echo_ve_table_wrap .echo_hs_table tbody tr td, #eacContentInnerEcho #echo_ve_table_wrap .echo_hs_table tbody tr th, #eacContentInnerEcho #echo_vm_table_wrap .echo_hs_table tbody tr td, #eacContentInnerEcho #echo_vm_table_wrap .echo_hs_table tbody tr th, #eacContentInnerEcho #echo_vh_table_wrap .echo_hs_table tbody tr td, #eacContentInnerEcho #echo_vh_table_wrap .echo_hs_table tbody tr th, #eacContentInnerEcho #echo_ce_table_wrap .echo_hs_table tbody tr td, #eacContentInnerEcho #echo_ce_table_wrap .echo_hs_table tbody tr th, #eacContentInnerEcho #echo_cm_table_wrap .echo_hs_table tbody tr td, #eacContentInnerEcho #echo_cm_table_wrap .echo_hs_table tbody tr th, #eacContentInnerEcho #echo_ch_table_wrap .echo_hs_table tbody tr td, #eacContentInnerEcho #echo_ch_table_wrap .echo_hs_table tbody tr th {
    font-size: 21px;
  }
  #eacContentInnerEcho #echo_ve_table_wrap .echo_hs_table tbody tr td, #eacContentInnerEcho #echo_vm_table_wrap .echo_hs_table tbody tr td, #eacContentInnerEcho #echo_vh_table_wrap .echo_hs_table tbody tr td, #eacContentInnerEcho #echo_ce_table_wrap .echo_hs_table tbody tr td, #eacContentInnerEcho #echo_cm_table_wrap .echo_hs_table tbody tr td, #eacContentInnerEcho #echo_ch_table_wrap .echo_hs_table tbody tr td {
    font-size: 21px;
  }
  #eacContentInnerEcho #echo_ve_table_wrap .echo_hs_table tbody tr td:nth-child(2), #eacContentInnerEcho #echo_vm_table_wrap .echo_hs_table tbody tr td:nth-child(2), #eacContentInnerEcho #echo_vh_table_wrap .echo_hs_table tbody tr td:nth-child(2), #eacContentInnerEcho #echo_ce_table_wrap .echo_hs_table tbody tr td:nth-child(2), #eacContentInnerEcho #echo_cm_table_wrap .echo_hs_table tbody tr td:nth-child(2), #eacContentInnerEcho #echo_ch_table_wrap .echo_hs_table tbody tr td:nth-child(2) {
    font-size: 30px;
  }
  #eacContentInnerEcho #echo_hs_pagination .pagination {
    font-size: 21px;
    line-height: 1.35;
  }
  #eacContentInnerEcho #echo_nav .echoNavLeft, #eacContentInnerEcho #echo_nav .echoNavCenter, #eacContentInnerEcho #echo_nav .echoNavRight {
    font-size: 21px;
  }
}
@media screen and (max-width: 579px) {
  #eacContentInnerEcho #echo_ve_table_wrap, #eacContentInnerEcho #echo_vm_table_wrap, #eacContentInnerEcho #echo_vh_table_wrap, #eacContentInnerEcho #echo_ce_table_wrap, #eacContentInnerEcho #echo_cm_table_wrap, #eacContentInnerEcho #echo_ch_table_wrap {
    width: 100%;
    height: 252px;
    overflow: auto;
    border: 1px solid #CCC;
    scroll-snap-type: y mandatory;
    scroll-padding: 0px;
  }
  #eacContentInnerEcho #echo_ve_table_wrap .echo_hs_table, #eacContentInnerEcho #echo_vm_table_wrap .echo_hs_table, #eacContentInnerEcho #echo_vh_table_wrap .echo_hs_table, #eacContentInnerEcho #echo_ce_table_wrap .echo_hs_table, #eacContentInnerEcho #echo_cm_table_wrap .echo_hs_table, #eacContentInnerEcho #echo_ch_table_wrap .echo_hs_table {
    width: 100%;
  }
  #eacContentInnerEcho #echo_ve_table_wrap .echo_hs_table tbody tr, #eacContentInnerEcho #echo_vm_table_wrap .echo_hs_table tbody tr, #eacContentInnerEcho #echo_vh_table_wrap .echo_hs_table tbody tr, #eacContentInnerEcho #echo_ce_table_wrap .echo_hs_table tbody tr, #eacContentInnerEcho #echo_cm_table_wrap .echo_hs_table tbody tr, #eacContentInnerEcho #echo_ch_table_wrap .echo_hs_table tbody tr {
    padding: 1em;
    display: block;
    scroll-snap-align: start;
  }
  #eacContentInnerEcho #echo_ve_table_wrap .echo_hs_table tbody tr:first-child, #eacContentInnerEcho #echo_vm_table_wrap .echo_hs_table tbody tr:first-child, #eacContentInnerEcho #echo_vh_table_wrap .echo_hs_table tbody tr:first-child, #eacContentInnerEcho #echo_ce_table_wrap .echo_hs_table tbody tr:first-child, #eacContentInnerEcho #echo_cm_table_wrap .echo_hs_table tbody tr:first-child, #eacContentInnerEcho #echo_ch_table_wrap .echo_hs_table tbody tr:first-child {
    display: none;
  }
  #eacContentInnerEcho #echo_ve_table_wrap .echo_hs_table tbody tr td, #eacContentInnerEcho #echo_vm_table_wrap .echo_hs_table tbody tr td, #eacContentInnerEcho #echo_vh_table_wrap .echo_hs_table tbody tr td, #eacContentInnerEcho #echo_ce_table_wrap .echo_hs_table tbody tr td, #eacContentInnerEcho #echo_cm_table_wrap .echo_hs_table tbody tr td, #eacContentInnerEcho #echo_ch_table_wrap .echo_hs_table tbody tr td {
    display: grid;
    border: none;
    color: #666;
    font-family: Arial, Helvetica, sans-serif;
    grid-template-columns: 30% minmax(0, 1fr);
    padding: 2px;
    min-height: 52px;
  }
  #eacContentInnerEcho #echo_ve_table_wrap .echo_hs_table tbody tr td:nth-of-type(1):before, #eacContentInnerEcho #echo_vm_table_wrap .echo_hs_table tbody tr td:nth-of-type(1):before, #eacContentInnerEcho #echo_vh_table_wrap .echo_hs_table tbody tr td:nth-of-type(1):before, #eacContentInnerEcho #echo_ce_table_wrap .echo_hs_table tbody tr td:nth-of-type(1):before, #eacContentInnerEcho #echo_cm_table_wrap .echo_hs_table tbody tr td:nth-of-type(1):before, #eacContentInnerEcho #echo_ch_table_wrap .echo_hs_table tbody tr td:nth-of-type(1):before {
    content: "Date: ";
  }
  #eacContentInnerEcho #echo_ve_table_wrap .echo_hs_table tbody tr td:nth-of-type(2), #eacContentInnerEcho #echo_vm_table_wrap .echo_hs_table tbody tr td:nth-of-type(2), #eacContentInnerEcho #echo_vh_table_wrap .echo_hs_table tbody tr td:nth-of-type(2), #eacContentInnerEcho #echo_ce_table_wrap .echo_hs_table tbody tr td:nth-of-type(2), #eacContentInnerEcho #echo_cm_table_wrap .echo_hs_table tbody tr td:nth-of-type(2), #eacContentInnerEcho #echo_ch_table_wrap .echo_hs_table tbody tr td:nth-of-type(2) {
    line-height: 0.75;
    margin-top: -2px;
    margin-bottom: 4px;
  }
  #eacContentInnerEcho #echo_ve_table_wrap .echo_hs_table tbody tr td:nth-of-type(2):before, #eacContentInnerEcho #echo_vm_table_wrap .echo_hs_table tbody tr td:nth-of-type(2):before, #eacContentInnerEcho #echo_vh_table_wrap .echo_hs_table tbody tr td:nth-of-type(2):before, #eacContentInnerEcho #echo_ce_table_wrap .echo_hs_table tbody tr td:nth-of-type(2):before, #eacContentInnerEcho #echo_cm_table_wrap .echo_hs_table tbody tr td:nth-of-type(2):before, #eacContentInnerEcho #echo_ch_table_wrap .echo_hs_table tbody tr td:nth-of-type(2):before {
    content: "Played: ";
    font-family: Arial, Helvetica, sans-serif;
    font-size: 21px;
    padding-top: 5px;
  }
  #eacContentInnerEcho #echo_ve_table_wrap .echo_hs_table tbody tr td:nth-of-type(3):before, #eacContentInnerEcho #echo_vm_table_wrap .echo_hs_table tbody tr td:nth-of-type(3):before, #eacContentInnerEcho #echo_vh_table_wrap .echo_hs_table tbody tr td:nth-of-type(3):before, #eacContentInnerEcho #echo_ce_table_wrap .echo_hs_table tbody tr td:nth-of-type(3):before, #eacContentInnerEcho #echo_cm_table_wrap .echo_hs_table tbody tr td:nth-of-type(3):before, #eacContentInnerEcho #echo_ch_table_wrap .echo_hs_table tbody tr td:nth-of-type(3):before {
    content: "Time: ";
  }
  #eacContentInnerEcho #echo_ve_table_wrap .echo_hs_table tbody tr td:nth-of-type(4):before, #eacContentInnerEcho #echo_vm_table_wrap .echo_hs_table tbody tr td:nth-of-type(4):before, #eacContentInnerEcho #echo_vh_table_wrap .echo_hs_table tbody tr td:nth-of-type(4):before, #eacContentInnerEcho #echo_ce_table_wrap .echo_hs_table tbody tr td:nth-of-type(4):before, #eacContentInnerEcho #echo_cm_table_wrap .echo_hs_table tbody tr td:nth-of-type(4):before, #eacContentInnerEcho #echo_ch_table_wrap .echo_hs_table tbody tr td:nth-of-type(4):before {
    content: "Score: ";
  }
}
@media screen and (max-width: 479px) {
  #eacContentInnerEcho {
    padding: 0 0 2em !important;
  }
  #eacContentInnerEcho #echo_select #echo_hs_diff_select {
    margin-top: 10px;
  }
  #eacContentInnerEcho #echo_select #echo_hs_game_select, #eacContentInnerEcho #echo_select #echo_hs_diff_select {
    flex-direction: column;
  }
  #eacContentInnerEcho #echo_nav {
    grid-template-columns: minmax(0, 1fr);
    grid-row-gap: 10px;
  }
}
@media screen and (max-width: 394px) {
  #eacContentInnerEcho #echo_select #echo_hs_diff_select {
    margin-top: 10px;
  }
  #eacContentInnerEcho #echo_select #echo_hs_game_select, #eacContentInnerEcho #echo_select #echo_hs_diff_select {
    flex-direction: column;
  }
  #eacContentInnerEcho #echo_ve_table_wrap .echo_hs_table tbody tr td, #eacContentInnerEcho #echo_vm_table_wrap .echo_hs_table tbody tr td, #eacContentInnerEcho #echo_vh_table_wrap .echo_hs_table tbody tr td, #eacContentInnerEcho #echo_ce_table_wrap .echo_hs_table tbody tr td, #eacContentInnerEcho #echo_cm_table_wrap .echo_hs_table tbody tr td, #eacContentInnerEcho #echo_ch_table_wrap .echo_hs_table tbody tr td {
    grid-template-columns: minmax(0, 1fr);
  }
  #eacContentInnerEcho #echo_ve_table_wrap .echo_hs_table tbody tr td:nth-of-type(2), #eacContentInnerEcho #echo_vm_table_wrap .echo_hs_table tbody tr td:nth-of-type(2), #eacContentInnerEcho #echo_vh_table_wrap .echo_hs_table tbody tr td:nth-of-type(2), #eacContentInnerEcho #echo_ce_table_wrap .echo_hs_table tbody tr td:nth-of-type(2), #eacContentInnerEcho #echo_cm_table_wrap .echo_hs_table tbody tr td:nth-of-type(2), #eacContentInnerEcho #echo_ch_table_wrap .echo_hs_table tbody tr td:nth-of-type(2) {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-top: 2px;
    margin-bottom: 8px;
  }
  #eacContentInnerEcho #echo_nav {
    grid-template-columns: minmax(0, 1fr);
    grid-row-gap: 10px;
  }
}
@media screen and (max-height: 767px) and (orientation: landscape) {
  #eacContentInnerEcho {
    padding: 0.5em 2em 2em !important;
    grid-gap: 0.5em;
  }
  #eacContentInnerEcho #echo_select #echoHSGameSelectLeft, #eacContentInnerEcho #echo_select #echoHSGameSelectRight, #eacContentInnerEcho #echo_select #echoHSDiffSelectLeft, #eacContentInnerEcho #echo_select #echoHSDiffSelectCenter, #eacContentInnerEcho #echo_select #echoHSDiffSelectRight {
    height: 30px;
  }
  #eacContentInnerEcho #echo_ve_table_wrap .echo_hs_table tbody tr, #eacContentInnerEcho #echo_vm_table_wrap .echo_hs_table tbody tr, #eacContentInnerEcho #echo_vh_table_wrap .echo_hs_table tbody tr, #eacContentInnerEcho #echo_ce_table_wrap .echo_hs_table tbody tr, #eacContentInnerEcho #echo_cm_table_wrap .echo_hs_table tbody tr, #eacContentInnerEcho #echo_ch_table_wrap .echo_hs_table tbody tr {
    grid-template-columns: 40% minmax(50px, 130px) minmax(10px, 140px) minmax(10px, 130px);
  }
  #eacContentInnerEcho #echo_hs_pagination {
    margin-top: 0.5em;
    margin-bottom: 1em;
  }
}
@media screen and (max-height: 394px) and (orientation: landscape) {
  #eacContentInnerEcho #echo_ve_table_wrap, #eacContentInnerEcho #echo_vm_table_wrap, #eacContentInnerEcho #echo_vh_table_wrap, #eacContentInnerEcho #echo_ce_table_wrap, #eacContentInnerEcho #echo_cm_table_wrap, #eacContentInnerEcho #echo_ch_table_wrap {
    height: 160px;
    overflow-y: scroll;
    margin-top: 10px;
    scroll-snap-type: y mandatory;
    scroll-padding: 0px;
  }
  #eacContentInnerEcho #echo_ve_table_wrap tbody tr, #eacContentInnerEcho #echo_vm_table_wrap tbody tr, #eacContentInnerEcho #echo_vh_table_wrap tbody tr, #eacContentInnerEcho #echo_ce_table_wrap tbody tr, #eacContentInnerEcho #echo_cm_table_wrap tbody tr, #eacContentInnerEcho #echo_ch_table_wrap tbody tr {
    scroll-snap-align: start;
  }
}

.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
#eacContentInner.survey_results_content {
  padding: 1em 2em;
}
#eacContentInner.survey_results_content p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 400;
}
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
#eacContentInner.user_database_content {
  padding: 1em 2em;
}
#eacContentInner.user_database_content p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 400;
}
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
#eacContentInner.update_db_content button, #eacContentInner.update_db_content input[type=button], #eacContentInner.update_db_content #add_files {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 49px;
  background-image: none;
  background-color: #0089e8;
  color: white;
  border-radius: 5px;
  font-family: ArialArial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 18px;
  font-style: normal;
  padding: 0 1em;
  cursor: pointer;
  margin: 20px 10px;
  border-radius: 5px;
}
#eacContentInner.update_db_content button:hover, #eacContentInner.update_db_content input[type=button]:hover, #eacContentInner.update_db_content #add_files:hover {
  background-color: #0398ff;
  transition: background-color 0.2s;
  border: none;
}
#eacContentInner.update_db_content button.updatedb_close, #eacContentInner.update_db_content input[type=button].updatedb_close, #eacContentInner.update_db_content #add_files.updatedb_close {
  width: 25px;
  height: 25px;
  padding: 0;
  margin: 0 25px;
  border: 2px solid white;
}
#eacContentInner.update_db_content button span, #eacContentInner.update_db_content input[type=button] span, #eacContentInner.update_db_content #add_files span {
  font-size: 18px;
  color: white;
}
#eacContentInner.update_db_content #updatedb_grid #update_db_results input[type=button] {
  border-radius: 3px;
  padding: 0px 2px;
  margin: 3px 0;
  height: 25px;
  font-size: 14px;
  font-weight: 400;
}
#eacContentInner.update_db_content .dotvvm-bp-file-upload {
  margin: 1em 2em;
}
#eacContentInner.update_db_content .dotvvm-bp-file-upload > .dotvvm-bp-file-upload_panel {
  justify-content: center;
}
#eacContentInner.update_db_content .dotvvm-bp-file-upload > .dotvvm-bp-file-upload_panel button {
  max-width: 300px;
  border: none;
}
#eacContentInner.update_db_content .dotvvm-bp-file-upload > .dotvvm-bp-file-upload_panel button span {
  font-size: 18px;
  color: white;
  font-weight: 600;
}
#eacContentInner.update_db_content .dotvvm-bp-file-upload > .dotvvm-bp-file-upload_panel span {
  font-size: 18px;
  color: #666;
  font-weight: 400;
}
#eacContentInner.update_db_content #updatedb_grid .dotvvm-bp-grid-view {
  width: 985px;
}
#eacContentInner.update_db_content #updatedb_grid .dotvvm-bp-grid-view table.dotvvm-bp-primitive_table {
  table-layout: fixed;
}
#eacContentInner.update_db_content #updatedb_grid .dotvvm-bp-grid-view table.dotvvm-bp-primitive_table th, #eacContentInner.update_db_content #updatedb_grid .dotvvm-bp-grid-view table.dotvvm-bp-primitive_table td {
  width: 0;
}
#eacContentInner.update_db_content #updatedb_grid .dotvvm-bp-grid-view table.dotvvm-bp-primitive_table td > .dotvvm-bp-primitive_picker {
  height: 25px;
}
#eacContentInner.update_db_content #updatedb_grid .dotvvm-bp-grid-view table.dotvvm-bp-primitive_table td > .dotvvm-bp-primitive_picker .dotvvm-bp-command_unselect {
  display: none;
}
#eacContentInner.update_db_content #updatedb_grid .dotvvm-bp-grid-view table.dotvvm-bp-primitive_table td > .dotvvm-bp-primitive_picker .dotvvm-bp-primitive_button {
  width: 20px;
}
#eacContentInner.update_db_content #updatedb_grid .dotvvm-bp-grid-view table.dotvvm-bp-primitive_table td [id$=_update_db_save_btn], #eacContentInner.update_db_content #updatedb_grid .dotvvm-bp-grid-view table.dotvvm-bp-primitive_table td [id$=_update_db_cancel_btn] {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px !important;
  width: 52%;
  padding: 0 2px;
}
#eacContentInner.update_db_content #updatedb_grid .dotvvm-bp-grid-view table.dotvvm-bp-primitive_table td [id$=_update_db_save_btn] {
  width: 42%;
}
#eacContentInner.update_db_content #updatedb_grid .dotvvm-bp-list-view_display-mode-list .dotvvm-bp-primitive_item {
  flex: 0 0 auto;
  flex-direction: row;
  flex-wrap: wrap;
  font-size: 18px;
  font-family: "Charis SIL";
}
#eacContentInner.update_db_content #updatedb_grid a.dotvvm-bp-grid-view_header-value, #eacContentInner.update_db_content #updatedb_grid a.dotvvm-bp-grid-view_sort-button {
  color: #006bb5;
}
#eacContentInner.update_db_content #updatedb_grid a.dotvvm-bp-grid-view_header-value {
  font-size: 15px;
  font-weight: 600;
}
#eacContentInner.update_db_content #updatedb_grid .dotvvm-bp-grid-view td > .dotvvm-bp-primitive_text, #eacContentInner.update_db_content #updatedb_grid .dotvvm-bp-grid-view td > .dotvvm-bp-text, #eacContentInner.update_db_content #updatedb_grid .dotvvm-bp-grid-view td > .dotvvm-bp-text-view, #eacContentInner.update_db_content #updatedb_grid .dotvvm-bp-primitive_text {
  font-family: "Charis SIL";
  font-size: 18px;
}
#eacContentInner.update_db_content #updatedb_grid .dotvvm-bp-grid-view th, #eacContentInner.update_db_content #updatedb_grid .dotvvm-bp-grid-view td {
  height: auto;
  border: none;
  padding: 2px;
}
#eacContentInner.update_db_content #updatedb_msgs, #eacContentInner.update_db_content #updatedb_grid, #eacContentInner.update_db_content #add_files, #eacContentInner.update_db_content #delete_files, #eacContentInner.update_db_content #add_files_msg, #eacContentInner.update_db_content #delete_files_msg {
  display: block;
}
#eacContentInner.update_db_content #updatedb_msgs, #eacContentInner.update_db_content #updatedb_grid {
  float: left;
}
#eacContentInner.update_db_content #updatedb_grid {
  width: 100%;
  margin: 0.25em 2em 0.75em;
  max-width: 985px;
  height: 500px;
  overflow: auto;
  border: 1px solid #EEE;
  border-radius: 5px;
}
#eacContentInner.update_db_content #updatedb_msgs #msgs {
  font: 15px Arial, sans-serif;
  color: #2B82C7;
  padding-left: 0;
}
#eacContentInner.update_db_content .updatedb_notify {
  display: block;
  padding: 10px;
  background-color: #f5f5f5;
  border: 5px solid #56BBFF;
  text-align: center;
  margin: 0 2em 15px;
  border-radius: 5px;
}
#eacContentInner.update_db_content .updatedb_notify.deleted {
  border: 5px solid hsl(35, 84%, 62%);
}
#eacContentInner.update_db_content #add_files_msg, #eacContentInner.update_db_content #delete_files_msg, #eacContentInner.update_db_content .updatedb_msg span {
  display: inline-block;
  font: 18px arial, sans-serif;
}
#eacContentInner.update_db_content .updatedb_msg span {
  padding: 15px 25px;
  flex: 1 1 auto;
  font-size: 18px;
}
#eacContentInner.update_db_content #add_files, #eacContentInner.update_db_content #delete_files {
  display: inline-block;
  margin-left: 25px;
}
#eacContentInner.update_db_content .updatedb_msg {
  display: flex;
  align-items: center;
  background-color: #00b937;
  color: #FFF;
  margin: 0 2em 15px;
  border-radius: 5px;
}
#eacContentInner.update_db_content .updatedb_msg.error, #eacContentInner.update_db_content .updatedb_msg.error .updatedb_close {
  background-color: #fa8400;
}
#eacContentInner.update_db_content .updatedb_close {
  display: inline-block;
  color: #FFF;
  margin: 11px 11px 0px;
  background-color: #00b937;
  border: 2px solid #FFF;
  width: 25px;
  height: 25px;
  float: right;
}
#eacContentInner.update_db_content .updatedb_close:hover {
  cursor: pointer;
  color: #f1f1f1;
  border: 2px solid #f1f1f1;
}
#eacContentInner.update_db_content .row {
  z-index: 0;
  position: relative;
}
#eacContentInner.update_db_content .edit-row {
  z-index: 10;
  position: relative;
}
#eacContentInner.update_db_content .edit-row input {
  height: auto;
  max-height: 25px;
  font-size: 18px;
  font-family: "Charis SIL";
  font-weight: 600;
  margin-top: 0;
}
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
#eacContentInner.send_email_content {
  padding: 1em 2em;
}
#eacContentInner.send_email_content p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 400;
}
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
#eacContentInner.game_report {
  padding: 2em;
}
#eacContentInner.game_report #pnl_intro .label {
  font-size: 18px;
  font-weight: 600;
  color: #0089e8;
}
#eacContentInner.game_report #pnl_intro input[type=text], #eacContentInner.game_report #pnl_intro input[type=password] {
  z-index: 0 !important;
  position: relative;
  border: 1px solid #AAA;
  padding: 0;
  border-radius: var(--bp-border-radius);
  width: 100%;
  font-size: clamp(1.15rem, 2.2vw, 18px);
  max-width: 606px;
  height: 49px;
  padding: 0.5em;
  color: #666;
  margin-bottom: 10px;
  transition: border-color 0.5s;
}
#eacContentInner.game_report #pnl_intro input[type=text]:focus, #eacContentInner.game_report #pnl_intro input[type=password]:focus {
  border: 2px solid #0089e8;
}
#eacContentInner.game_report #pnl_intro input[type=text]#error_message, #eacContentInner.game_report #pnl_intro input[type=password]#error_message {
  min-width: 325px;
  text-align: center;
}
#eacContentInner.game_report #pnl_intro #dr_info {
  background-color: #FFFFFF;
  border: 1px solid #EEEEEE;
  border-radius: 5px 5px 5px 5px;
  color: #2B82C7;
  display: inherit;
  left: 371px;
  padding: 10px 15px;
  position: absolute;
  text-align: left;
  top: 117px;
  left: 314px;
  visibility: visible;
  width: 330px;
}
#eacContentInner.game_report #pnl_intro #part_info {
  background-color: #FFFFFF;
  border: 1px solid #EEEEEE;
  border-radius: 5px 5px 5px 5px;
  color: #2B82C7;
  display: inherit;
  left: 390px;
  padding: 10px 15px;
  position: absolute;
  text-align: left;
  top: 219px;
  left: 332px;
  visibility: visible;
  width: 330px;
}
#eacContentInner.game_report #pnl_intro #pnl_selectuser, #eacContentInner.game_report #pnl_intro #dateRange, #eacContentInner.game_report #pnl_intro #participant {
  border: none;
  width: 606px;
  padding: 1.25em;
  border: 1px solid #eee;
}
#eacContentInner.game_report #pnl_intro #dateRange, #eacContentInner.game_report #pnl_intro #participant {
  min-height: 60px;
  display: block;
}
#eacContentInner.game_report #pnl_intro .researcher_fieldlabel {
  float: left;
}
#eacContentInner.game_report #pnl_intro .dateRange_fieldlabel, #eacContentInner.game_report #pnl_intro .participant_fieldlabel {
  text-align: left;
  margin: 0 0 20px;
}
#eacContentInner.game_report #pnl_intro .gamereport_fromdate_fieldlabel, #eacContentInner.game_report #pnl_intro .gamereport_fromparticipant_fieldlabel, #eacContentInner.game_report #pnl_intro .gamereport_todate_fieldlabel, #eacContentInner.game_report #pnl_intro .gamereport_toparticipant_fieldlabel, #eacContentInner.game_report #pnl_intro .ui-datepicker-trigger, #eacContentInner.game_report #pnl_intro #dr_info_logo, #eacContentInner.game_report #pnl_intro #part_info_logo {
  float: left;
  cursor: pointer;
}
#eacContentInner.game_report #pnl_intro .gamereport_fromdate, #eacContentInner.game_report #pnl_intro .gamereport_todate, #eacContentInner.game_report #pnl_intro .gamereport_fromparticipant, #eacContentInner.game_report #pnl_intro .gamereport_toparticipant {
  width: 135px;
}
#eacContentInner.game_report #pnl_intro #dr_label, #eacContentInner.game_report #pnl_intro #dr_info, #eacContentInner.game_report #pnl_intro #dr_select, #eacContentInner.game_report #pnl_intro #part_label, #eacContentInner.game_report #pnl_intro #part_info, #eacContentInner.game_report #pnl_intro #part_select {
  display: flex;
  z-index: 1;
}
#eacContentInner.game_report #pnl_intro #dr_label div, #eacContentInner.game_report #pnl_intro #dr_info div, #eacContentInner.game_report #pnl_intro #dr_select div, #eacContentInner.game_report #pnl_intro #part_label div, #eacContentInner.game_report #pnl_intro #part_info div, #eacContentInner.game_report #pnl_intro #part_select div {
  flex: 1 1 auto;
}
#eacContentInner.game_report #pnl_intro #dr_select .dotvvm-bp-primitive_text-box {
  height: auto;
  margin: 0;
  padding: 0 0 0 10px;
  font-weight: 600;
}
#eacContentInner.game_report #pnl_intro #dateRange .ui-datepicker-trigger {
  margin-left: 10px;
  background: none;
  margin-top: 1px;
  cursor: pointer;
}
#eacContentInner.game_report #pnl_intro #dateRange #select_from_date, #eacContentInner.game_report #pnl_intro #dateRange #select_to_date {
  display: grid;
  grid-template-columns: 75px minmax(0, 1fr);
  align-items: center;
}
#eacContentInner.game_report #pnl_intro .ui-datepicker-trigger {
  margin-left: 10px;
}
#eacContentInner.game_report #pnl_intro .btnFont {
  font: italic bold 14px Arial, Helvetica, sans-serif;
  color: #2B82C7;
}
#eacContentInner.game_report #pnl_intro .paraFont {
  font: 18px Calibri, Arial, Helvetica, sans-serif;
  color: #666;
}
#eacContentInner.game_report #pnl_intro .paraMsg {
  margin: 0 auto;
  text-align: left;
  width: 600px;
}
#eacContentInner.game_report #pnl_intro .ReportGridViewFont {
  font: 16px Calibri, Arial, Helvetica, sans-serif;
  color: #666;
}
#eacContentInner.game_report #pnl_intro .ReportGridViewFont th a {
  color: #2B82C7;
  text-transform: capitalize;
  font-size: 15px;
}
#eacContentInner.game_report #pnl_intro .ReportGridViewFont th {
  text-align: left;
  padding-right: 10px;
}
#eacContentInner.game_report #pnl_intro .ReportGridViewFont td a {
  color: #2B82C7;
}
#eacContentInner.game_report #pnl_intro .ReportGridViewFont td {
  padding-right: 10px;
  font-size: 14px;
}
#eacContentInner.game_report #pnl_intro .game-report-validation-error {
  color: red;
  font: bold 12px arial, verdana;
  float: left;
  clear: both;
  margin: 10px 10px 10px 0;
}
#eacContentInner.game_report #pnl_intro #from_date_wrapper, #eacContentInner.game_report #pnl_intro #to_date_wrapper, #eacContentInner.game_report #pnl_intro #from_participant_wrapper, #eacContentInner.game_report #pnl_intro #to_participant_wrapper {
  display: block;
  min-height: 35px;
  float: left;
}
#eacContentInner.game_report #pnl_intro #from_date_wrapper .dotvvm-bp-date-picker, #eacContentInner.game_report #pnl_intro #to_date_wrapper .dotvvm-bp-date-picker, #eacContentInner.game_report #pnl_intro #from_participant_wrapper .dotvvm-bp-date-picker, #eacContentInner.game_report #pnl_intro #to_participant_wrapper .dotvvm-bp-date-picker {
  height: 49px;
  border: 1px solid #AAA;
  max-width: 100%;
  transition: border-color 0.5s;
}
#eacContentInner.game_report #pnl_intro #from_date_wrapper .dotvvm-bp-date-picker.dotvvm-bp-state_focused, #eacContentInner.game_report #pnl_intro #to_date_wrapper .dotvvm-bp-date-picker.dotvvm-bp-state_focused, #eacContentInner.game_report #pnl_intro #from_participant_wrapper .dotvvm-bp-date-picker.dotvvm-bp-state_focused, #eacContentInner.game_report #pnl_intro #to_participant_wrapper .dotvvm-bp-date-picker.dotvvm-bp-state_focused {
  border: 2px solid #0089e8;
}
#eacContentInner.game_report #pnl_intro #from_date_wrapper .dotvvm-bp-date-picker .dotvvm-bp-primitive_text-box, #eacContentInner.game_report #pnl_intro #to_date_wrapper .dotvvm-bp-date-picker .dotvvm-bp-primitive_text-box, #eacContentInner.game_report #pnl_intro #from_participant_wrapper .dotvvm-bp-date-picker .dotvvm-bp-primitive_text-box, #eacContentInner.game_report #pnl_intro #to_participant_wrapper .dotvvm-bp-date-picker .dotvvm-bp-primitive_text-box {
  border: none;
}
#eacContentInner.game_report #pnl_intro #from_date_wrapper .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup, #eacContentInner.game_report #pnl_intro #to_date_wrapper .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup, #eacContentInner.game_report #pnl_intro #from_participant_wrapper .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup, #eacContentInner.game_report #pnl_intro #to_participant_wrapper .dotvvm-bp-date-picker .dotvvm-bp-primitive_popup {
  max-width: -moz-fit-content !important;
  max-width: fit-content !important;
  height: auto !important;
}
#eacContentInner.game_report #pnl_intro #from_date_wrapper .dotvvm-bp-date-picker .dotvvm-bp-calendar .dotvvm-bp-calendar_decade-view, #eacContentInner.game_report #pnl_intro #from_date_wrapper .dotvvm-bp-date-picker .dotvvm-bp-calendar .dotvvm-bp-calendar_year-view, #eacContentInner.game_report #pnl_intro #to_date_wrapper .dotvvm-bp-date-picker .dotvvm-bp-calendar .dotvvm-bp-calendar_decade-view, #eacContentInner.game_report #pnl_intro #to_date_wrapper .dotvvm-bp-date-picker .dotvvm-bp-calendar .dotvvm-bp-calendar_year-view, #eacContentInner.game_report #pnl_intro #from_participant_wrapper .dotvvm-bp-date-picker .dotvvm-bp-calendar .dotvvm-bp-calendar_decade-view, #eacContentInner.game_report #pnl_intro #from_participant_wrapper .dotvvm-bp-date-picker .dotvvm-bp-calendar .dotvvm-bp-calendar_year-view, #eacContentInner.game_report #pnl_intro #to_participant_wrapper .dotvvm-bp-date-picker .dotvvm-bp-calendar .dotvvm-bp-calendar_decade-view, #eacContentInner.game_report #pnl_intro #to_participant_wrapper .dotvvm-bp-date-picker .dotvvm-bp-calendar .dotvvm-bp-calendar_year-view {
  display: flex;
  width: 290px;
  height: 200px;
  font-size: var(--bp-font-size);
  flex-wrap: wrap;
}
#eacContentInner.game_report #pnl_intro #from_date_wrapper .dotvvm-bp-date-picker .dotvvm-bp-calendar .dotvvm-bp-primitive_item, #eacContentInner.game_report #pnl_intro #to_date_wrapper .dotvvm-bp-date-picker .dotvvm-bp-calendar .dotvvm-bp-primitive_item, #eacContentInner.game_report #pnl_intro #from_participant_wrapper .dotvvm-bp-date-picker .dotvvm-bp-calendar .dotvvm-bp-primitive_item, #eacContentInner.game_report #pnl_intro #to_participant_wrapper .dotvvm-bp-date-picker .dotvvm-bp-calendar .dotvvm-bp-primitive_item {
  align-self: center;
  justify-content: center;
  font-size: 18px !important;
  height: auto;
  padding: 0.25em 0;
}
#eacContentInner.game_report #pnl_intro #from_date_wrapper .dotvvm-bp-primitive_picker > .dotvvm-bp-primitive_button.dotvvm-bp-command_unselect, #eacContentInner.game_report #pnl_intro #to_date_wrapper .dotvvm-bp-primitive_picker > .dotvvm-bp-primitive_button.dotvvm-bp-command_unselect, #eacContentInner.game_report #pnl_intro #from_participant_wrapper .dotvvm-bp-primitive_picker > .dotvvm-bp-primitive_button.dotvvm-bp-command_unselect, #eacContentInner.game_report #pnl_intro #to_participant_wrapper .dotvvm-bp-primitive_picker > .dotvvm-bp-primitive_button.dotvvm-bp-command_unselect {
  display: none;
}
#eacContentInner.game_report #pnl_intro #game_report_settings_form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 606px;
  margin: 0 auto;
}
#eacContentInner.game_report #pnl_intro #game_report_settings_form input.runReportBtn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 49px;
  background-image: none;
  background-color: #0089e8;
  color: white;
  border-radius: 5px;
  font-family: ArialArial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 18px;
  font-style: normal;
  padding: 0 12px;
  margin: 0;
  justify-self: center;
}
#eacContentInner.game_report #pnl_intro #game_report_settings_form input.runReportBtn:hover {
  background-color: #0398ff;
  transition: background-color 0.2s;
  cursor: pointer;
}
#eacContentInner.game_report #pnl_intro #pnl_intro #game_report_settings_form #errors #error_message {
  font: bold italic 16px calibri, arial, verdana !important;
  color: #2b82c7;
  width: 720px;
  height: 45px;
  border: none;
  text-align: center;
}
#eacContentInner.game_report #pnl_intro #pnl_intro_data_load_bar {
  display: none;
  width: 300px;
  height: 25px;
  background: url(../images/data_load_bar.gif) no-repeat 0 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -12.5px;
  margin-left: -150px;
  z-index: 10001;
}
#eacContentInner.game_report #pnl_intro #pnl_intro_load_overlay {
  display: none;
  width: 786px;
  height: 394px;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #FFF;
  z-index: 10000;
  opacity: 90%;
  border-radius: 5px;
  width: 100%;
  height: 100%;
}
#eacContentInner.game_report #pnl_report #game_report_buttons form {
  display: flex;
  padding: 1em 2em 2em;
}
#eacContentInner.game_report #pnl_report #game_report_buttons form .dotvvm-bp-command_unselect {
  display: none;
}
#eacContentInner.game_report #pnl_report #game_report_buttons form > div, #eacContentInner.game_report #pnl_report #game_report_buttons form > input {
  flex: 1 1 auto;
  font-size: 12px;
  height: 49px;
}
#eacContentInner.game_report #pnl_report #game_report_buttons form .dotvvm-bp-primitive_picker > .dotvvm-bp-primitive_value {
  display: flex;
  align-items: center;
}
#eacContentInner.game_report #pnl_report #game_report_buttons form .dotvvm-bp-drop-down-list > .dotvvm-bp-primitive_value > .dotvvm-bp-primitive_text, #eacContentInner.game_report #pnl_report #game_report_buttons form .dotvvm-bp-drop-down-list > .dotvvm-bp-primitive_value > .dotvvm-bp-text, #eacContentInner.game_report #pnl_report #game_report_buttons form .dotvvm-bp-drop-down-list > .dotvvm-bp-primitive_value > .dotvvm-bp-text-viewj, #eacContentInner.game_report #pnl_report #game_report_buttons form li {
  font-size: 18px;
}
#eacContentInner.game_report #pnl_report #game_report_buttons form input {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 49px;
  background-image: none;
  background-color: #0089e8;
  color: white;
  border-radius: 5px;
  font-family: ArialArial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 18px;
  font-style: normal;
  padding: 0 12px;
  margin: 0;
  justify-self: center;
}
#eacContentInner.game_report #pnl_report #game_report_buttons form input:hover {
  background-color: #0398ff;
  transition: background-color 0.2s;
  cursor: pointer;
}
#eacContentInner.game_report #pnl_report .dotvvm-bp-grid-view .dotvvm-bp-primitive_table .dotvvm-bp-grid-view_header-value, #eacContentInner.game_report #pnl_report .dotvvm-bp-grid-view .dotvvm-bp-primitive_table .dotvvm-bp-primitive_text {
  font-size: 15px;
  font-weight: 600;
}
#eacContentInner.game_report #pnl_report .dotvvm-bp-grid-view .dotvvm-bp-primitive_table a.dotvvm-bp-grid-view_header-value, #eacContentInner.game_report #pnl_report .dotvvm-bp-grid-view .dotvvm-bp-primitive_table a.dotvvm-bp-grid-view_sort-button {
  color: #006bb5;
}
#eacContentInner.game_report #pnl_report .dotvvm-bp-primitive_list > .dotvvm-bp-primitive_item.dotvvm-bp-state_active, #eacContentInner.game_report #pnl_report #eacContentInner .dotvvm-bp-primitive_list > .dotvvm-bp-primitive_item.dotvvm-bp-state_selected {
  background-color: #0089e8;
  border: 1px solid #EEE;
  color: white;
  align-self: center;
  border-radius: 0px;
}
#eacContentInner.game_report #pnl_report .dotvvm-bp-data-pager .dotvvm-bp-primitive_item > * {
  display: flex;
  align-self: center;
  border-radius: 0px;
  border: none;
}
#eacContentInner.game_report #pnl_report .dotvvm-bp-data-pager .dotvvm-bp-primitive_item + .dotvvm-bp-primitive_item {
  height: 35px;
  border-left: 1px solid #EEE;
  border-right: 1px solid #EEE;
  border-radius: 0px;
  border-collapse: collapse;
}
#eacContentInner.game_report #pnl_report .dotvvm-bp-data-pager .dotvvm-bp-primitive_item + .dotvvm-bp-primitive_item:hover {
  border-left: 1px solid #EEE;
  border-right: 1px solid #EEE;
  border-collapse: collapse;
}
#eacContentInner.game_report #pnl_report .dotvvm-bp-primitive_item {
  border-radius: 0px;
}
#eacContentInner.game_report #pnl_report .dotvvm-bp-grid-view + .dotvvm-bp-data-pager {
  margin: 1em auto;
}
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.mcc.custom_mcc {
  display: flex;
}

.modal.custom_modal {
  background-color: #EEE;
  opacity: 1;
}

#delete {
  flex-direction: column;
  padding: 2em;
  background-color: white;
  border-radius: 5px;
  height: -moz-fit-content;
  height: fit-content;
}
#delete .custom_aspx_header, #delete .deleteMessage {
  font-size: 18px;
  font-weight: 600;
  font-family: Arial, Helvetica, sans-serif;
  color: #0089e8;
}
#delete .custom_aspx_header #delname, #delete .deleteMessage #delname {
  font-style: italic;
}
#delete #cmd_delete, #delete #cmd_delete_cancel {
  margin-top: unset;
  margin-bottom: unset;
  margin: 0;
}

#save_as, #pnl_saveas_confirm {
  flex-direction: column;
  padding: 2em;
  background-color: white;
  border-radius: 5px;
  height: -moz-fit-content;
  height: fit-content;
}
#save_as .custom_aspx_header, #save_as #saveas_confirm_message, #pnl_saveas_confirm .custom_aspx_header, #pnl_saveas_confirm #saveas_confirm_message {
  font-size: 18px;
  font-weight: 600;
  font-family: Arial, Helvetica, sans-serif;
  color: #0089e8;
  margin-top: unset;
  margin-bottom: unset;
  margin: 0;
}
#save_as .saveName, #pnl_saveas_confirm .saveName {
  font-size: 18px;
  font-weight: 600;
  font-family: Arial, Helvetica, sans-serif;
  color: #0089e8;
  margin-top: unset;
  width: 606px;
  margin: 0 auto;
  text-align: left;
}
#save_as input[type=text], #pnl_saveas_confirm input[type=text] {
  border: 1px solid #AAA;
  margin-bottom: unset;
  margin: 0 auto;
  padding: 0 10px;
  transition: border-color 0.5s;
  font-size: 18px;
  font-weight: 400;
  color: #555;
  height: 49px;
  width: 100%;
}
#save_as input[type=text]:focus, #pnl_saveas_confirm input[type=text]:focus {
  border: 2px solid #0089e8;
}
#save_as #cmd_saveas, #save_as #cmd_saveas_cancel, #save_as #cmd_confirm_saveas, #save_as #cmd_confirm_cancel, #pnl_saveas_confirm #cmd_saveas, #pnl_saveas_confirm #cmd_saveas_cancel, #pnl_saveas_confirm #cmd_confirm_saveas, #pnl_saveas_confirm #cmd_confirm_cancel {
  margin-top: unset;
  margin-bottom: unset;
  margin: 0;
}

#vowel_selecter, #cons_selecter {
  flex-flow: column;
  gap: 25px;
}
#vowel_selecter .panel_btn_contain, #cons_selecter .panel_btn_contain {
  display: grid;
  grid-template-columns: 50% minmax(0, 1fr);
}
#vowel_selecter .panel_btn_contain.cons, #cons_selecter .panel_btn_contain.cons {
  grid-template-columns: minmax(0, 1fr) 33% minmax(0, 1fr);
}
#vowel_selecter .panel_btn_contain .panel_btn, #cons_selecter .panel_btn_contain .panel_btn {
  width: 100%;
}
#vowel_selecter .panel_btn_contain input[type=checkbox], #cons_selecter .panel_btn_contain input[type=checkbox] {
  -webkit-appearance: checkbox;
}
#vowel_selecter .panel_btn_contain .custom_vowels, #vowel_selecter .panel_btn_contain .custom_cons, #cons_selecter .panel_btn_contain .custom_vowels, #cons_selecter .panel_btn_contain .custom_cons {
  grid-area: auto/auto/span 1/span 2;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  grid-auto-flow: row;
  justify-items: center;
  min-height: 49px;
  background-color: #EEE;
  padding: 25px;
  border-radius: 5px;
}
#vowel_selecter .panel_btn_contain .custom_vowels .custom_checkbox, #vowel_selecter .panel_btn_contain .custom_cons .custom_checkbox, #cons_selecter .panel_btn_contain .custom_vowels .custom_checkbox, #cons_selecter .panel_btn_contain .custom_cons .custom_checkbox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  -moz-column-gap: 10px;
       column-gap: 10px;
}
#vowel_selecter .panel_btn_contain .custom_vowels input, #vowel_selecter .panel_btn_contain .custom_vowels label, #vowel_selecter .panel_btn_contain .custom_cons input, #vowel_selecter .panel_btn_contain .custom_cons label, #cons_selecter .panel_btn_contain .custom_vowels input, #cons_selecter .panel_btn_contain .custom_vowels label, #cons_selecter .panel_btn_contain .custom_cons input, #cons_selecter .panel_btn_contain .custom_cons label {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 15px;
  width: 15px;
  margin: 0;
}
#vowel_selecter .panel_btn_contain .custom_vowels input, #vowel_selecter .panel_btn_contain .custom_cons input, #cons_selecter .panel_btn_contain .custom_vowels input, #cons_selecter .panel_btn_contain .custom_cons input {
  justify-self: flex-end;
}
#vowel_selecter .panel_btn_contain .custom_cons, #cons_selecter .panel_btn_contain .custom_cons {
  grid-area: auto/auto/span 1/span 3;
  overflow: auto;
}

#eacContentInner.researcher {
  padding: 1.5em 1em;
  /*input[type=button] {
      font-size: 18px;
  }*/
}
#eacContentInner.researcher .dotvvm-bp-primitive_placeholder {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 400;
}
#eacContentInner.researcher .dotvvm-bp-primitive_picker > .dotvvm-bp-primitive_button.dotvvm-bp-command_unselect {
  display: none;
}
#eacContentInner.researcher #select_saved_game {
  display: block;
  margin: 0 auto 10px;
}
#eacContentInner.researcher #cmd_load {
  margin-top: 0px;
}
#eacContentInner.researcher #load_msgs {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 606px;
  min-height: 49px;
  margin: 10px auto 25px;
  color: white;
  font-size: 18px;
  font-weight: 400;
  font-family: Arial, Helvetica, sans-serif;
  background: #006bb5;
  border-radius: 5px;
  padding: 14px;
}
#eacContentInner.researcher #load_msgs:empty {
  display: none;
}
#eacContentInner.researcher input[type=text] {
  border: 1px solid #AAA;
  margin-bottom: 10px;
  padding: 0 10px;
  transition: border-color 0.5s;
  font-size: 18px;
  font-weight: 400;
  color: #555;
}
#eacContentInner.researcher input[type=text]:focus {
  border: 2px solid #0089e8;
}
#eacContentInner.researcher .select {
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  font-size: 18px;
  max-width: 606px;
}
#eacContentInner.researcher .dotvvm-bp-drop-down-list > .dotvvm-bp-primitive_value > .dotvvm-bp-primitive_text, #eacContentInner.researcher .dotvvm-bp-drop-down-list > .dotvvm-bp-primitive_value > .dotvvm-bp-text, #eacContentInner.researcher .dotvvm-bp-drop-down-list > .dotvvm-bp-primitive_value > .dotvvm-bp-text-view {
  font-size: 18px;
  font-weight: 400;
  color: #555;
}
#eacContentInner.researcher .dotvvm-bp-drop-down-list .dotvvm-bp-primitive_list > .dotvvm-bp-primitive_item {
  font-size: 18px;
  font-weight: 400;
  color: #555;
}
#eacContentInner.researcher .dotvvm-bp-drop-down-list .dotvvm-bp-primitive_list > .dotvvm-bp-primitive_item.dotvvm-bp-state_selected {
  background-color: #0089e8;
  border-color: #0089e8;
  color: white;
}
#eacContentInner.researcher .dotvvm-bp-primitive_list > .dotvvm-bp-primitive_item.dotvvm-bp-state_active, #eacContentInner.researcher #eacContentInner .dotvvm-bp-primitive_list > .dotvvm-bp-primitive_item .reveal_settings {
  max-width: 606px;
  margin: 0 auto;
}
#eacContentInner.researcher #custom_aspx_save_load #commands #show_toggle.visible_flex {
  display: flex;
}
#eacContentInner.researcher #custom_aspx_contain {
  margin: 25px auto;
  width: 100%;
  display: flex;
  justify-content: center;
}
#eacContentInner.researcher #custom_aspx_contain .cust_aspx_message {
  max-width: 606px;
  width: 100%;
}
#eacContentInner.researcher #custom_aspx_contain .cust_aspx_message .custom_aspx_label {
  font-size: 18px;
  font-weight: 600;
  font-family: Arial, Helvetica, sans-serif;
  color: #0089e8;
  margin-top: 10px;
}
#eacContentInner.researcher #custom_aspx_contain .cust_aspx_message .cust_aspx_vowels_1, #eacContentInner.researcher #custom_aspx_contain .cust_aspx_message .cust_aspx_vowels_2, #eacContentInner.researcher #custom_aspx_contain .cust_aspx_message .cust_aspx_cons_1, #eacContentInner.researcher #custom_aspx_contain .cust_aspx_message .cust_aspx_cons_2, #eacContentInner.researcher #custom_aspx_contain .cust_aspx_message .cust_aspx_cons_3 {
  display: grid;
  grid-template-columns: 50% minmax(0, 1fr);
  grid-template-rows: auto;
  grid-column-gap: 25px;
  align-items: center;
  width: 100%;
  margin: 25px auto;
}
#eacContentInner.researcher #custom_aspx_contain .cust_aspx_message .cust_aspx_vowels_1 .custom_aspx_label, #eacContentInner.researcher #custom_aspx_contain .cust_aspx_message .cust_aspx_vowels_2 .custom_aspx_label, #eacContentInner.researcher #custom_aspx_contain .cust_aspx_message .cust_aspx_cons_1 .custom_aspx_label, #eacContentInner.researcher #custom_aspx_contain .cust_aspx_message .cust_aspx_cons_2 .custom_aspx_label, #eacContentInner.researcher #custom_aspx_contain .cust_aspx_message .cust_aspx_cons_3 .custom_aspx_label {
  margin-top: 0;
}
#eacContentInner.researcher #custom_aspx_contain .cust_aspx_message .cust_aspx_vowels_1 .select, #eacContentInner.researcher #custom_aspx_contain .cust_aspx_message .cust_aspx_vowels_2 .select, #eacContentInner.researcher #custom_aspx_contain .cust_aspx_message .cust_aspx_cons_1 .select, #eacContentInner.researcher #custom_aspx_contain .cust_aspx_message .cust_aspx_cons_2 .select, #eacContentInner.researcher #custom_aspx_contain .cust_aspx_message .cust_aspx_cons_3 .select {
  margin: 0 auto;
}
#eacContentInner.researcher #msgs {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1.15rem, 2.2vw, 18px);
  font-weight: 400;
  line-height: 1.4;
  color: white;
  background-color: #ff6600;
  border-radius: 5px;
  margin: 0 0 10px;
  padding: 0px;
  min-height: 0px;
  text-align: left;
  border-width: 0px;
  width: 100%;
}
#eacContentInner.researcher #msgs div {
  padding: 10px 20px;
}
#eacContentInner.researcher #msgs div:empty {
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}
#eacContentInner.researcher #msgs div b {
  color: white !important;
  display: flex;
  align-items: center;
  text-align: left;
}
#eacContentInner.researcher #msgs:empty {
  width: 0px;
  min-height: 0px;
  margin: 0;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}
#eacContentInner.researcher #upd_selections button {
  margin-bottom: 10px;
}
#eacContentInner.researcher .dotvvm-bp-drop-down-list {
  transition: border-color 0.5s;
}
#eacContentInner.researcher .dotvvm-bp-drop-down-list:focus, #eacContentInner.researcher .dotvvm-bp-drop-down-list:focus-visible {
  border: 1px solid #0089e8;
  height: 49px;
  outline-color: #0089e8;
  outline-width: 1px;
  outline-style: solid;
}
#eacContentInner.researcher #soundlist {
  display: block;
  width: 100%;
  max-width: 606px;
  min-width: 606px;
  min-height: 100px;
  margin: 0 auto 25px;
  border: 1px solid #EEE;
  clear: left;
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 400;
  border-color: #AAA;
  transition: outline-color 0.2s;
}
#eacContentInner.researcher #soundlist:focus, #eacContentInner.researcher #soundlist:focus-visible {
  outline: 2px solid #0089e8;
  border-radius: 2px;
}
#eacContentInner.researcher #specific_voices {
  gap: 10px;
  margin: 0 auto 15px;
  width: 100%;
  overflow: hidden;
}
#eacContentInner.researcher #specific_voices label {
  margin: 5px 8px;
  width: 50px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
}
#eacContentInner.researcher #specific_voices label .dotvvm-bp-primitive_text {
  font-size: 18px;
  font-weight: 600;
  color: #555;
}
#eacContentInner.researcher .researcher_selection_panel {
  grid-area: auto/auto/span 1/span 2;
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: 10px;
       column-gap: 10px;
  background-color: #EEE;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
  padding: 0 10px;
}
#eacContentInner.researcher .researcher_selection_panel > .vowel_s {
  font-size: 1.75em;
  color: white;
  padding-top: 2px;
  margin: 10px 0;
}
#eacContentInner.researcher .researcher_selection_panel > .vowel_s.vowel_s_other {
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: #0089e8;
  padding-top: 0px;
}
#eacContentInner.researcher .researcher_selection_panel > .cons_s {
  font-size: 1.75em;
  color: white;
  padding-top: 2px;
  margin: 10px 0;
}
#eacContentInner.researcher .researcher_selection_panel > .cons_s.cons_s_other {
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: #0089e8;
  padding-top: 0px;
}
@media screen and (max-width: 479px) {
  #eacContentInner.researcher {
    padding: 0em;
  }
}

@media screen and (max-height: 767px) and (orientation: landscape) {
  .custom_mcc.consonants .selecter_heading {
    width: 100%;
    font-size: 21px !important;
  }
  .custom_mcc .selecter_heading {
    width: 27%;
    font-size: 1.5em !important;
    padding: 0.83em;
    text-align: center;
  }
  .custom_mcc#vowel_selecter {
    top: 50%;
    width: 100%;
    flex-flow: row;
    justify-content: space-evenly;
    gap: 5px;
    padding: 10px;
  }
  .custom_mcc#vowel_selecter .panel_btn_contain {
    grid-template-columns: none;
    grid-template-rows: repeat(2, minmax(0, 49px)) auto;
    width: 23%;
    max-height: 316px;
    gap: 15px;
  }
  .custom_mcc#vowel_selecter .panel_btn_contain .panel_btn {
    width: 100%;
    height: 49px;
  }
  .custom_mcc#vowel_selecter .panel_btn_contain .panel_btn#vowelall {
    grid-area: 1/1/2/3;
  }
  .custom_mcc#vowel_selecter .panel_btn_contain .panel_btn#vowelok {
    grid-area: 2/1/3/3;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  .custom_mcc.consonants#cons_selecter {
    display: grid;
    grid-template-columns: minmax(0, min-content) auto minmax(0, min-content);
    grid-template-rows: minmax(0, 1fr);
    gap: 10px;
  }
  .custom_mcc.consonants#cons_selecter .selecter_heading {
    height: -moz-max-content;
    height: max-content;
    max-height: unset;
    font-size: 21px !important;
  }
  .custom_mcc.consonants#cons_selecter .panel_btn_contain.cons {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, minmax(0, 49px)) auto;
    gap: 10px;
  }
  .custom_mcc.consonants#cons_selecter .panel_btn_contain.cons .panel_btn {
    width: 100%;
    height: 49px;
  }
  .custom_mcc.consonants#cons_selecter .panel_btn_contain.cons .panel_btn#consall {
    grid-area: 1/1/2/2;
  }
  .custom_mcc.consonants#cons_selecter .panel_btn_contain.cons .panel_btn#consnone {
    grid-area: 2/1/3/2;
  }
  .custom_mcc.consonants#cons_selecter .panel_btn_contain.cons .panel_btn#consok {
    grid-area: 3/1/4/2;
  }
  .custom_mcc.consonants#cons_selecter .panel_btn_contain.cons .custom_cons {
    height: 154px;
    padding: 10px 0px 0px 10px;
    width: 60px;
  }
}
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
#eacContentInner.logout_view, #eacContentInner.auto_logout {
  padding: 1em 2em;
}
#eacContentInner.logout_view p.loggedOut {
  text-align: center;
}
#eacContentInner p.loggedOut, #eacContentInner p#settings_login_msg {
  margin: 20px auto;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #666;
  text-align: center;
  max-width: 606px;
}
#eacContentInner #rsaLoginPage p#settings_login_msg {
  margin: 0 0 12px;
  font-size: 16px;
  text-align: left;
}
@media screen and (max-width: 767px) {
  #eacContentInner p.loggedOut {
    font-size: 21px;
  }
}
@media screen and (max-width: 479px) {
  #eacContentInner.logout_view, #eacContentInner.auto_logout {
    padding: 0 1em;
  }
  #eacContentInner p.loggedOut {
    margin-top: 10px;
  }
}
@media screen and (max-height: 767px) and (orientation: landscape) {
  #eacContentInner p.loggedOut {
    font-size: 21px;
  }
}
#eacContentInner #rsaLoginPage {
  display: grid;
  grid-template-columns: minmax(0, 500px);
  grid-template-rows: auto;
  padding: 2em 5%;
  grid-column-gap: 6%;
  justify-content: center;
}
#eacContentInner #rsaLoginPage #lbl_quack, #eacContentInner #rsaLoginPage #lbl_duck {
  font-weight: 600;
  color: #0089e8;
}
#eacContentInner #rsaLoginPage input[type=text], #eacContentInner #rsaLoginPage input[type=password] {
  z-index: 0 !important;
  position: relative;
  border: 1px solid #AAA;
  padding: 0;
  border-radius: var(--bp-border-radius);
  width: 100%;
  font-size: clamp(21px, 2.2vw, 18px);
  max-width: 606px;
  height: 49px;
  padding: 0.5em;
  color: #666;
  margin-bottom: 10px;
  transition: border-color 0.5s;
}
#eacContentInner #rsaLoginPage input[type=text]:focus, #eacContentInner #rsaLoginPage input[type=password]:focus {
  border: 2px solid #0089e8;
}
#eacContentInner #rsaLoginPage input[type=password] {
  margin-bottom: 5px;
}
#eacContentInner #rsaLoginPage a, #eacContentInner #rsaLoginPage input {
  margin: unset;
}
#eacContentInner #rsaLoginPage a, #eacContentInner #rsaLoginPage input[type=submit], #eacContentInner #rsaLoginPage input[type=button] {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 49px;
  background-image: none;
  background-color: #0089e8;
  color: white;
  border-radius: 5px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: clamp(1.15rem, 2.2vw, 18px);
  padding: 0 12px;
}
#eacContentInner #rsaLoginPage a:hover, #eacContentInner #rsaLoginPage input[type=submit]:hover, #eacContentInner #rsaLoginPage input[type=button]:hover {
  background-color: #0398ff;
  transition: background-color 0.2s;
  cursor: pointer;
}
#eacContentInner #rsaLoginPage a#forgotPWLink, #eacContentInner #rsaLoginPage input[type=submit]#forgotPWLink, #eacContentInner #rsaLoginPage input[type=button]#forgotPWLink {
  background-color: white;
  color: #0089e8;
  height: -moz-fit-content;
  height: fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 10px auto 0;
}
#eacContentInner #rsaLoginPage a#forgotPWLink:hover, #eacContentInner #rsaLoginPage input[type=submit]#forgotPWLink:hover, #eacContentInner #rsaLoginPage input[type=button]#forgotPWLink:hover {
  color: #0398ff;
  cursor: pointer;
}
#eacContentInner #rsaLoginPage p {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: clamp(1.15rem, 2.2vw, 18px);
}
#eacContentInner #rsaLoginPage #rsaLoginPanel form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  grid-row-gap: 10px;
}
#eacContentInner #rsaLoginPage #rsaLoginPanel a {
  background-color: unset;
  height: unset;
  color: #0089e8;
  width: auto;
  margin: 0px auto 10px;
  transition: color 0.2s;
}
#eacContentInner #rsaLoginPage #rsaLoginPanel a:hover {
  background-color: unset;
  color: #0398ff;
}
#eacContentInner #rsaLoginPage #rsaLoginPanel #lbl_warning {
  display: flex;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1.15rem, 2.2vw, 18px);
  font-weight: 400;
  line-height: 1.4;
  color: white;
  background-color: #ff6600;
  border-radius: 5px;
  margin: -7px 0 10px;
  padding: 0.5em 1em;
  min-height: 49px;
  text-align: left;
  align-items: center;
}
#eacContentInner #rsaLoginPage #rsaLoginPanel #lbl_warning:empty {
  min-height: 0px;
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 767px) {
  #eacContentInner #rsaLoginPage {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    padding: 1em 5%;
  }
  #eacContentInner #rsaLoginPage p {
    font-size: 21px;
  }
  #eacContentInner #rsaLoginPage p#settings_login_msg {
    font-size: 18px;
  }
  #eacContentInner #rsaLoginPage a, #eacContentInner #rsaLoginPage input[type=submit], #eacContentInner #rsaLoginPage input[type=button] {
    font-size: 21px;
  }
  #eacContentInner #rsaLoginPage #rsaLoginPanel {
    width: 100%;
    max-width: 500px;
  }
  #eacContentInner #rsaLoginPage #rsaLoginPanel #lbl_warning {
    font-size: 21px;
  }
}
@media screen and (max-width: 479px) {
  #eacContentInner #rsaLoginPage {
    padding: 0 5% 1em;
  }
}
@media screen and (max-height: 767px) and (orientation: landscape) {
  #eacContentInner #rsaLoginPage {
    padding: 0.5em 5%;
  }
  #eacContentInner #rsaLoginPage input[type=text], #eacContentInner #rsaLoginPage input[type=password] {
    font-size: 21px;
  }
  #eacContentInner #rsaLoginPage a, #eacContentInner #rsaLoginPage input[type=submit], #eacContentInner #rsaLoginPage input[type=button] {
    font-size: 21px;
  }
  #eacContentInner #rsaLoginPage p {
    font-size: 21px;
  }
  #eacContentInner #rsaLoginPage #rsaLoginPanel #lbl_warning {
    font-size: 21px;
  }
}

.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
#eacContentInner.verify_account {
  display: flex;
  margin: 0 auto;
  flex-direction: column;
  padding: 30px 32px 44px;
  align-items: center;
}
#eacContentInner.verify_account #pnl_noemail {
  display: flex;
  flex-direction: column;
  max-width: 606px;
}
#eacContentInner.verify_account #pnl_noemail p, #eacContentInner.verify_account #pnl_noemail span, #eacContentInner.verify_account #pnl_noemail .thankyou_message {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #666;
  line-height: 1.2;
}
#eacContentInner.verify_account #pnl_noemail p, #eacContentInner.verify_account #pnl_noemail .thankyou_message {
  font-weight: 400;
  margin-bottom: 0.5em;
}
#eacContentInner.verify_account #pnl_noemail p.alternate {
  margin-top: 1.5em;
}
#eacContentInner.verify_account #pnl_noemail span {
  color: #0089e8;
}
#eacContentInner.verify_account #pnl_noemail input[type=text], #eacContentInner.verify_account #pnl_noemail input[type=password] {
  position: relative;
  border: 1px solid #AAA;
  padding: 0;
  border-radius: var(--bp-border-radius);
  width: 100%;
  font-size: 18px;
  max-width: 606px;
  height: 49px;
  padding: 0.5em;
  color: #000;
  transition: border-color 0.5s;
}
#eacContentInner.verify_account #pnl_noemail input[type=text]:focus, #eacContentInner.verify_account #pnl_noemail input[type=password]:focus {
  border: 2px solid #0089e8;
}
#eacContentInner.verify_account #pnl_noemail input, #eacContentInner.verify_account #pnl_noemail button {
  margin: unset;
}
#eacContentInner.verify_account #pnl_noemail input[type=submit], #eacContentInner.verify_account #pnl_noemail input[type=button] {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 49px;
  background-image: none;
  background-color: #0089e8;
  color: white;
  border-radius: 5px;
  font-family: ArialArial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 18px;
  font-style: unset;
  margin: 0;
  padding: 0 12px;
}
#eacContentInner.verify_account #pnl_noemail input[type=submit]:hover, #eacContentInner.verify_account #pnl_noemail input[type=button]:hover {
  background-color: #0398ff;
  transition: background-color 0.2s;
  cursor: pointer;
}
#eacContentInner.verify_account #pnl_noemail #cmd_acctinfo {
  margin-bottom: 15px;
}
#eacContentInner.verify_account #pnl_noemail .fieldbadmsg {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  color: white;
  background-color: #0089e8;
  border-radius: 5px;
  margin: -7px 0 0;
  padding: 0.5em 1em;
  min-height: 44px;
}
#eacContentInner.verify_account #pnl_noemail #lbl_message {
  margin-top: 25px;
  padding: 20px;
}
#eacContentInner.verify_account #pnl_confirmed {
  font-size: 18px;
  font-weight: 400;
  margin: 0px;
}
#eacContentInner.verify_account #pnl_baduri, #eacContentInner.verify_account #pnl_alreadyverified {
  font-weight: 400;
  font-size: 18px;
}
@media screen and (max-width: 767px) {
  #eacContentInner.verify_account {
    padding: 0px;
  }
  #eacContentInner.verify_account #pnl_noemail {
    padding: 1em 2em 1.5em;
  }
  #eacContentInner.verify_account #pnl_noemail p, #eacContentInner.verify_account #pnl_noemail span, #eacContentInner.verify_account #pnl_noemail .thankyou_message {
    font-size: 21px;
  }
  #eacContentInner.verify_account #pnl_noemail input[type=text], #eacContentInner.verify_account #pnl_noemail input[type=password] {
    font-size: 21px;
  }
  #eacContentInner.verify_account #pnl_noemail input[type=submit], #eacContentInner.verify_account #pnl_noemail input[type=button] {
    font-size: 21px;
  }
  #eacContentInner.verify_account #pnl_noemail .fieldbadmsg {
    font-size: 21px;
  }
  #eacContentInner.verify_account #pnl_confirmed {
    font-size: 21px;
  }
  #eacContentInner.verify_account #pnl_baduri, #eacContentInner.verify_account #pnl_alreadyverified {
    font-weight: 400;
    font-size: 21px;
    padding: 40px;
  }
}
@media screen and (max-width: 479px) {
  #eacContentInner.verify_account #pnl_noemail {
    padding: 0 1em 2em;
  }
}
@media screen and (max-width: 344px) {
  #eacContentInner.verify_account #pnl_noemail {
    padding: 1em 0 2em;
  }
}
@media screen and (max-height: 767px) and (orientation: landscape) {
  #eacContentInner.verify_account #pnl_noemail p, #eacContentInner.verify_account #pnl_noemail span, #eacContentInner.verify_account #pnl_noemail .thankyou_message {
    font-size: 21px;
  }
  #eacContentInner.verify_account #pnl_noemail input[type=text], #eacContentInner.verify_account #pnl_noemail input[type=password] {
    font-size: 21px;
  }
  #eacContentInner.verify_account #pnl_noemail input[type=submit], #eacContentInner.verify_account #pnl_noemail input[type=button] {
    font-size: 21px;
  }
  #eacContentInner.verify_account #pnl_noemail .fieldbadmsg {
    font-size: 21px;
  }
  #eacContentInner.verify_account #pnl_confirmed {
    font-size: 21px;
  }
  #eacContentInner.verify_account #pnl_baduri {
    font-weight: 400;
    font-size: 21px;
  }
}

.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
.bp-override {
  --bp-hover: 0.7;
  --bp-active: 0.6;
  --bp-accent: .7;
  --bp-lighten: 1.55;
  --bp-color_primary: hsl(200, 99%, 51%);
  --bp-color_primary-contrast: hsl(200, 99%, 100%);
  --bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
  --bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
  --bp-color_primary-accent: hsl(206, 94%, 39%);
  --bp-color_primary-lighten: hsl(200, 99%, calc(1.5 * 51%));
  --bp-color_primary-disabled: hsl(200, 3%, 67%);
  --bp-color_base: hsl(0, 0%, 100%);
  --bp-color_base-contrast: hsl(0, 0%, 10%);
  --bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
  --bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
  --bp-color_base-accent: hsl(0, 0%, 95%);
  --bp-color_base-hover: hsl(0, 0%, 90%);
  --bp-color_base-disabled: hsl(0, 0%, calc(0.95 * 100%));
  --bp-color_base-overlay: rgba(165, 165, 165, .8);
  --bp-color_secondary: hsl(208, 7%, 46%);
  --bp-color_secondary-contrast: hsl(208, 7%, 100%);
  --bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
  --bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
  --bp-color_default: hsl(0, 0%, 86%);
  --bp-color_default-contrast: hsl(0, 0%, 0%);
  --bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
  --bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
  --bp-color_info: hsl(194, 66%, 61%);
  --bp-color_info-contrast: hsl(194, 66%, 100%);
  --bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
  --bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
  --bp-color_info--alert-bg: hsl(194, 66%, calc(1.55 * 61%));
  --bp-color_info--alert-text: hsl(194, 66%, calc(0.7 * 61%));
  --bp-color_warning: none;
  --bp-color_warning-contrast: hsl(35, 84%, 100%);
  --bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
  --bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
  --bp-color_warning--alert-bg: hsl(35, 84%, calc(1.55 * 62%));
  --bp-color_warning--alert-text: hsl(35, 84%, calc(0.7 * 62%));
  --bp-color_danger: hsl(2, 64%, 58%);
  --bp-color_danger-contrast: hsl(2, 64%, 100%);
  --bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
  --bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
  --bp-color_danger--alert-bg: hsl(2, 64%, calc(1.55 * 58%));
  --bp-color_danger--alert-text: hsl(2, 64%, calc(0.7 * 58%));
  --bp-color_success: hsl(130, 40%, 54%);
  --bp-color_success-contrast: hsl(130, 40%, 100%);
  --bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
  --bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
  --bp-color_success--alert-bg: hsl(130, 40%, calc(1.55 * 54%));
  --bp-color_success--alert-text: hsl(130, 40%, calc(0.7 * 54%));
  --bp-color_focus: none;
  --bp-color_error: hsl(2, 80%, 58%);
  --bp-font-color: var(--bp-color_base-contrast);
  --bp-font-color_active: var(--bp-color_base);
  --bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
  --bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
  --bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
  --bp-border-color: hsl(0, 0%, 64%);
  --bp-border-color_disabled: var(--bp-font-color_disabled);
  --bp-form-item_background: var(--bp-color_base);
  --bp-form-item_border-color: var(--bp-border-color);
  --bp-focus_box-shadow: none;
  --bp-error_box-shadow: 0 0 0 2px var(--bp-color_error);
  --bp-gap-s: 0.2em;
  --bp-gap-m: 0.4em;
  --bp-gap-xl: 1em;
  --bp-padding-horizontal: var(--bp-gap-m);
  --bp-padding-horizontal-large: var(--bp-gap-xl);
  --bp-padding-vertical: var(--bp-gap-s);
  --bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
  --bp-font-size_control: 1rem;
  --bp-font-size: 1.75em;
  --bp-font-family: $mainFont;
  --bp-line-height: 1.4;
  --bp-border-width: 1px;
  --bp-border-radius: 5px;
  --bp-form-item_width: 10em;
  --bp-popup_max-height: 20em;
  --bp-checkbox_size: 1.2em;
  --bp-calendar_item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
  --bp-popup_z-index: 100;
  --bp-modal_z-index: 1000;
}

/*:root {*/
/* state properties */
/*--bp-hover: .8;
--bp-active: .6;
--bp-accent: .7;
--bp-lighten: 1.55;
--bp-color_base: hsl(0, 0%, 100%);
--bp-color_base-contrast: hsl(0, 0%, 10%);
--bp-color_base-hover: hsl(0, 0%, calc(var(--bp-hover) * 100%));
--bp-color_base-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 100%));
--bp-color_base-active: hsl(0, 0%, calc(var(--bp-active) * 100%));
--bp-color_base-accent: hsl(0, 0%, calc(var(--bp-accent) * 100%));
--bp-color_base-disabled: hsl(0, 0%, 80%);
--bp-color_base-overlay: hsla(0, 0%, 65%, .8);
--bp-color_primary: hsl(200, 99%, 51%);
--bp-color_primary-contrast: hsl(200, 99%, 100%);
--bp-color_primary-hover: hsl(200, 99%, calc(var(--bp-hover) * 51%));
--bp-color_primary-lighten: hsl(200, 99%, calc(var(--bp-lighten) * 51%));
--bp-color_primary-active: hsl(200, 99%, calc(var(--bp-active) * 51%));
--bp-color_primary-accent: hsl(200, 99%, calc(var(--bp-accent) * 51%));
--bp-color_primary-disabled: hsl(0, 0%, 80%);
--bp-color_secondary: hsl(208, 7%, 46%);
--bp-color_secondary-contrast: hsl(208, 7%, 100%);
--bp-color_secondary-hover: hsl(208, 7%, calc(var(--bp-hover) * 46%));
--bp-color_secondary-lighten: hsl(208, 7%, calc(var(--bp-lighten) * 46%));
--bp-color_secondary-active: hsl(208, 7%, calc(var(--bp-active) * 46%));
--bp-color_secondary-accent: hsl(208, 7%, calc(var(--bp-accent) * 46%));
--bp-color_secondary-disabled: hsl(0, 0%, 80%);
--bp-color_default: hsl(0, 0%, 86%);
--bp-color_default-contrast: hsl(0, 0%, 0%);
--bp-color_default-hover: hsl(0, 0%, calc(var(--bp-hover) * 86%));
--bp-color_default-lighten: hsl(0, 0%, calc(var(--bp-lighten) * 86%));
--bp-color_default-active: hsl(0, 0%, calc(var(--bp-active) * 86%));
--bp-color_default-accent: hsl(0, 0%, calc(var(--bp-accent) * 86%));
--bp-color_default-disabled: hsl(0, 0%, 80%);
--bp-color_info: hsl(194, 66%, 61%);
--bp-color_info-contrast: hsl(194, 66%, 100%);
--bp-color_info-hover: hsl(194, 66%, calc(var(--bp-hover) * 61%));
--bp-color_info-lighten: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
--bp-color_info-active: hsl(194, 66%, calc(var(--bp-active) * 61%));
--bp-color_info-accent: hsl(194, 66%, calc(var(--bp-accent) * 61%));
--bp-color_info-disabled: hsl(0, 0%, 80%);
--bp-color_warning: hsl(35, 84%, 62%);
--bp-color_warning-contrast: hsl(35, 84%, 100%);
--bp-color_warning-hover: hsl(35, 84%, calc(var(--bp-hover) * 62%));
--bp-color_warning-lighten: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
--bp-color_warning-active: hsl(35, 84%, calc(var(--bp-active) * 62%));
--bp-color_warning-accent: hsl(35, 84%, calc(var(--bp-accent) * 62%));
--bp-color_warning-disabled: hsl(0, 0%, 80%);
--bp-color_danger: hsl(2, 64%, 58%);
--bp-color_danger-contrast: hsl(2, 64%, 100%);
--bp-color_danger-hover: hsl(2, 64%, calc(var(--bp-hover) * 58%));
--bp-color_danger-lighten: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
--bp-color_danger-active: hsl(2, 64%, calc(var(--bp-active) * 58%));
--bp-color_danger-accent: hsl(2, 64%, calc(var(--bp-accent) * 58%));
--bp-color_danger-disabled: hsl(0, 0%, 80%);
--bp-color_success: hsl(130, 40%, 54%);
--bp-color_success-contrast: hsl(130, 40%, 100%);
--bp-color_success-hover: hsl(130, 40%, calc(var(--bp-hover) * 54%));
--bp-color_success-lighten: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
--bp-color_success-active: hsl(130, 40%, calc(var(--bp-active) * 54%));
--bp-color_success-accent: hsl(130, 40%, calc(var(--bp-accent) * 54%));
--bp-color_success-disabled: hsl(0, 0%, 80%);
--bp-color_transparent: hsla(0, 0%, 0%, 0);
--bp-color_base-contrast: hsl(0, 0%, 0%);
--bp-color_focus: hsla(41, 95%, 54%, 1);
--bp-color_error: hsl(2, 80%, 58%);*/
/* global properties */
/*--bp-border-color: hsl(0, 0%, 64%);
--bp-border-color_disabled: var(--bp-font-color_disabled);
--bp-background-color: var(--bp-color_base);
--bp-background-color_hover: var(--bp-color_base-hover);
--bp-border-width: 1px;
--bp-border-radius: 0;
--bp-box-shadow_focus: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_focus);
--bp-box-shadow_error: 0 0 0 1px var(--bp-color_base), 0 0 0 3px var(--bp-color_error);
--bp-control-font-size: 1rem;
--bp-font-color: var(--bp-color_base-contrast);
--bp-font-color_active: var(--bp-color_base);
--bp-font-color_disabled: hsl(0, 0%, calc(0.5 * 100%));
--bp-font-color_disabled-active: hsl(0, 0%, calc(0.4 * 100%));
--bp-font-color_placeholder: hsl(0, 0%, calc(0.6 * 100%));
--bp-font-size: .8em;
--bp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--bp-gap-s: 0.2em;
--bp-gap-m: 0.4em;
--bp-gap-xl: 1em;
--bp-line-height: 1.4;
--bp-padding-horizontal: var(--bp-gap-m);
--bp-padding-horizontal_large: var(--bp-gap-xl);
--bp-padding-vertical: var(--bp-gap-s);
--bp-padding: var(--bp-padding-vertical) var(--bp-padding-horizontal);
--bp-text-decoration: none;*/
/* control-specific properties */
/*--bp-alert-background-color_info: hsl(194, 66%, calc(var(--bp-lighten) * 61%));
    --bp-alert-color_info: hsl(194, 66%, calc(0.7 * 61%));
    --bp-alert-background-color_warning: hsl(35, 84%, calc(var(--bp-lighten) * 62%));
    --bp-alert-color_warning: hsl(35, 84%, calc(0.7 * 62%));
    --bp-alert-background-color_danger: hsl(2, 64%, calc(var(--bp-lighten) * 58%));
    --bp-alert-color_danger: hsl(2, 64%, calc(0.7 * 58%));
    --bp-alert-background-color_success: hsl(130, 40%, calc(var(--bp-lighten) * 54%));
    --bp-alert-color_success: hsl(130, 40%, calc(0.7 * 54%));
    --bp-alert-border-left-width: .2em;
    --bp-alert-border-width: 0;
    --bp-calendar-item-size: calc((var(--bp-font-size) * 1.7) + (var(--bp-padding-horizontal) * 2));
    --bp-checkbox-size: 1.2em;
    --bp-data-pager_border-width: 0;
    --bp-form-item-border-color: var(--bp-border-color);
    --bp-form-item-width: 14em;
    --bp-footer_border-bottom-width: 0;
    --bp-grid-view_border-bottom-width: 0;
    --bp-header_border-bottom-width: 0;
    --bp-modal-z-index: 1000;
    --bp-picker-background-color: var(--bp-color_base);
    --bp-popup-max-height: 20em;
    --bp-popup-z-index: 100;
    --bp-slider-grip_width-multiplier: .4em;
    --bp-slider-grip_height-multiplier: 1em;
    --bp-tab-control-item_border-bottom-color: var(--bp-color_transparent);
    --bp-tab-control-item_border-width: 0;
    --bp-tab-control-nav_gap: var(--bp-gap-s);
    --bp-tab-control_border-bottom-multiplier: 2;
}*/
html, body {
  overflow-x: hidden !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar {
  display: none;
}
html::-moz-selection, body::-moz-selection {
  background-color: none;
}
html::selection, body::selection {
  background-color: none;
}

body {
  font: 900 1rem Arial, Helvetica, sans-serif;
  color: #000;
  overflow-x: hidden;
  background: none;
  background-color: #EEE;
  position: relative;
  min-height: 100vh;
}

div#ruler {
  height: 689px;
  position: absolute;
  right: 0;
  width: 10px;
  background-color: red;
  z-index: 10;
  margin: 0;
  padding: 0;
  border: none;
}

#eacContentHeading {
  text-align: center;
}

#eacContentInner, #eacContentInnerEcho {
  display: block;
  position: relative;
  margin: 0 auto;
  padding: 20px 0;
  background-color: #FFF;
  overflow: hidden;
  z-index: 1;
}

#update_viewport_size_btn {
  position: fixed;
  top: 75px;
  left: 20px;
  width: 200px;
  font-size: 1em;
  padding: 5px;
  z-index: 100 !important;
}

#viewport_size {
  position: fixed;
  bottom: 0;
  left: 0;
  /* margin: 5px; */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #000;
  z-index: 1000;
  line-height: 8px;
  background-color: #d2d2d2;
  padding: 5px;
}

@media screen and (max-width: 767px) {
  html, body {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
  html::-webkit-scrollbar, body::-webkit-scrollbar {
    display: none;
  }
  html, body {
    overflow-x: hidden;
  }
  body {
    position: relative !important;
  }
}
@media screen and (max-height: 394px) and (orientation: landscape) {
  body {
    background-color: white;
  }
}
@media screen and (max-height: 479px) and (orientation: landscape) {
  html, body {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
  html::-webkit-scrollbar, body::-webkit-scrollbar {
    display: none;
  }
  html, body {
    overflow-x: hidden;
  }
  body {
    position: relative !important;
    background-color: white;
  }
}
@media screen and (max-width: 479px) {
  body {
    background-color: #fff;
  }
  #eacContentInner, #eacContentInnerEcho {
    padding: 0;
  }
}
.visible {
  display: block !important;
}

.visible1 {
  display: inherit;
}

.visible_grid {
  display: grid !important;
}

.visible_flex:not(div#show_toggle) {
  display: flex !important;
}

#cbo_vlevel.visible, #cbo_clevel.visible {
  display: flex !important;
}

.invisible {
  display: none !important;
}

#lbl_warning {
  display: block;
  color: #F00;
  margin: 0 0 15px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

.vowel_select_table #lbl_warning, .cons_select_table #lbl_warning {
  grid-column: 1/3;
}

@media screen and (max-width: 991px) {
  .vowel_select_table #lbl_warning, .cons_select_table #lbl_warning {
    grid-column: 1/2;
  }
}
@media screen and (max-width: 767px) {
  #lbl_warning {
    font-size: 21px;
  }
}
/*# sourceMappingURL=maps/main.css.map */