:root {
    /* colors */
    --ocl-color-background: #f9f9f9;
    --ocl-color-body-font: #3D3E40;
    --ocl-color-main: #1b365d;
    --ocl-color-main-dark: #131e29;
    --ocl-color-main-light: #7686af;
    --ocl-color-main-secondary: #174A7C;
    --ocl-color-secondary: #6e7073;
    --ocl-color-secondary-dark: #373839;
    --ocl-color-secondary-light: #e0e0e0;
    --ocl-color-highlight: #e6e8f5;
    --ocl-color-highlight-dark: #c6c8d5;
    --ocl-color-focus: #cdddf4;
    --ocl-color-red: #ee3524;
    --ocl-color-hover: #ee3524;
    --ocl-color-active: #ee3524;
    --ocl-color-disabled: #F1F1F2;
    --ocl-color-error: #ff0000;
    --ocl-color-error-text: #ffffff;
    --ocl-color-warning: #ee5500;
    --ocl-color-warning-text: #000000;
    --ocl-color-info: #0055ee;
    --ocl-color-info-text: #000000;
    --ocl-color-success: #669966;
    --ocl-color-success-text: #000000;
    --ocl-color-border-light: #eee;
    --ocl-color-border: #d1d3d4;
    --ocl-color-border-dark: #a7a8ab;
    --ocl-color-light: #ffffff;
    --ocl-color-dark: #132742;
    --ocl-color-tooltip: #fefeef;
    --ocl-color-tooltip-dark: #fafae0;
    --ocl-color-row-odd: #f9f9f9;
    --ocl-color-row-even: #ffffff;
    --ocl-color-row-selected-odd: #d6d9ea;
    --ocl-color-row-selected-even: #e6e9fa;
    --ocl-color-row-group-header: #e1e3e6;
    --ocl-color-row-group-footer: #d1d3d6;
    --ocl-color-gray-one: #eeeeee;
    --ocl-color-gray-two: #F1F1F2;
    --ocl-color-gray-three: #E0E0E0;
    --ocl-color-gray-four: #D1D3D4;
    --ocl-color-gray-five: #A7A9AC;
    --ocl-color-gray-six: #3D3E40;
    /* unit */
    --ocl-unit-spacing: 1rem;
    --ocl-unit-duration: 1000ms;
    /* spacing */
    --ocl-spacing-x: calc(var(--ocl-unit-spacing) * 1.5);
    --ocl-spacing-y: calc(var(--ocl-unit-spacing) * 1);
    --ocl-spacing-half-x: calc(var(--ocl-spacing-x) * .5);
    --ocl-spacing-half-y: calc(var(--ocl-spacing-y) * .5);
    --ocl-padding-x: var(--ocl-spacing-half-x);
    --ocl-padding-y: calc(var(--ocl-spacing-y) * .3);
    --ocl-padding: var(--ocl-padding-y) var(--ocl-padding-x);
    --ocl-padding-thin-x: calc(var(--ocl-padding-x) * .5);
    --ocl-padding-thin-y: calc(var(--ocl-padding-y) * .5);
    --ocl-padding-thin: var(--ocl-padding-thin-y) var(--ocl-padding-thin-x);
    --ocl-padding-thick-x: calc(var(--ocl-padding-x) * 2);
    --ocl-padding-thick-y: calc(var(--ocl-padding-y) * 2);
    --ocl-padding-thick: var(--ocl-padding-thick-y) var(--ocl-padding-thick-x);
    --ocl-margin-x: var(--ocl-spacing-half-x);
    --ocl-margin-y: calc(var(--ocl-spacing-y) * .3);
    --ocl-margin: var(--ocl-margin-y) var(--ocl-margin-x);
    --ocl-margin-thin-x: calc(var(--ocl-margin-x) * .5);
    --ocl-margin-thin-y: calc(var(--ocl-margin-y) * .5);
    --ocl-margin-thin: var(--ocl-margin-thin-y) var(--ocl-margin-thin-x);
    --ocl-margin-thick-x: calc(var(--ocl-margin-x) * 2);
    --ocl-margin-thick-y: calc(var(--ocl-margin-y) * 2);
    --ocl-margin-thick: var(--ocl-margin-thick-y) var(--ocl-margin-thick-x);
    /* page */
    --ocl-page-background-color: var(--ocl-color-background);
    --ocl-page-footer-height: 40px;
    --ocl-page-footer-background-color: var(--ocl-color-light);
    --ocl-page-footer-background: linear-gradient(0deg, var(--ocl-color-main) 0 45%, var(--ocl-color-light) 75% 100%);
    /* font */
    --ocl-font-family-main: 'Open Sans', sans-serif;
    --ocl-font-family-accent: 'Bitter', serif;
    --ocl-font-size-largest: 2rem;
    --ocl-font-size-larger: 1.75rem;
    --ocl-font-size-large: 1.5rem;
    --ocl-font-size-medium: 1.25rem;
    --ocl-font-size: 1rem;
    --ocl-font-size-small: .875rem;
    --ocl-font-size-smaller: .67rem;
    --ocl-font-size-smallest: .5rem;
    --ocl-letter-spacing: 0;
    --ocl-letter-spacing-tight: -0.075rem;
    --ocl-letter-spacing-loose: 0.04rem;
    /* menu */
    --ocl-menu-z-index: 1000;
    --ocl-menu-height: 50px;
    --ocl-menu-background-color: var(--ocl-color-light);
    --ocl-menu-font-family: var(--ocl-font-family-main);
    --ocl-menu-font-color: var(--ocl-color-dark);
    --ocl-menu-font-size: var(--ocl-font-size-small);
    --ocl-menu-padding: .5rem;
    --ocl-menu-border-bottom: 2px solid var(--ocl-color-border-light);
    --ocl-menu-border-top: none;
    --ocl-menu-item-hover-color: var(--ocl-color-secondary);
    --ocl-menu-item-active-color: var(--ocl-color-hover);
    /* form */
    --ocl-form-background-color: var(--ocl-color-background);
    --ocl-form-font-color: var(--ocl-color-dark);
    --ocl-form-checkbox-size: 21px;
    --ocl-form-radio-size: 21px;
    --ocl-form-control-font-size: 1rem;
    --ocl-form-control-height: 2rem;
    --ocl-form-control-border: 1px solid var(--ocl-color-border);
    --ocl-form-control-box-shadow: 2px 2px 7px -3px var(--ocl-color-border);
    /* misc */
    --ocl-header-background-color: var(--ocl-color-main-secondary);
    --ocl-header-font-color: #ffffff;
    --ocl-disabled-opacity: 1;
    --ocl-animation-time: calc(var(--ocl-unit-duration) * .3);
    --ocl-animation-time-slow: calc(var(--ocl-unit-duration) * 1);
    --ocl-animation-time-quick: calc(var(--ocl-unit-duration) * .15);
    --ocl-container-max-width: 1200px;
    --ocl-box-shadow: 2px 2px 0px 0px rgb(224 224 224 / 50%);
    --ocl-box-shadow-left: 2px 2px 0px 0px rgb(224 224 224 / 50%);
    --ocl-border-radius: 0.25rem;
    /* image */
    --ocl-image-background: url('../images/star-ball-bg.png');
    --ocl-image-logo-small: url('../images/tn-logo.svg');
    --ocl-image-footer: url('../images/footer-starball.png');
}