:root {
    --font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    --font-size-xs: 10px;
    --font-size-sm: 12px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --line-height-xs: 1.25;
    --line-height-sm: 1.4;
    --line-height-md: 1.55;
    --border-radius-sm: 2px;
    --border-radius-md: 4px;
    --border-radius-lg: 10px;

    --main-background: #f6f6f6;
    --menu-background: #171717;
    --menu-color: #fff;
    --menu-color-hover: #088786;
    --font-color: #171717;
    --link-color: #03605F;
    --link-color-hover: #004B4E;

    --alert-background: #e62a69;
    --alert-color: #fdf6f8;

    --border: 1px solid var(--eagles-light-color);
    --menu-border: 4px solid var(--eagles-light-color);

    --shadow-sm: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    --shadow-md: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    --shadow-lg: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;

    --white: #fff;
    --black: #000;

    --eagles-white: #FFFFFF;
    --eagles-main-color: #03605F;
    --eagles-dark-color: #004B4E;
    --eagles-light-color: #088786;
    --eagles-gray: #A89FA0;
    --eagles-black: #171717;
}

/* ========================= Main elements ========================= */

.eagles, .eagles.disabled {
    background: var(--eagles-main-color);
}

.eagles:hover, .eagles.disabled:hover {
    background: var(--eagles-dark-color);
}

.eagles:active, .eagles:focus,
.eagles.disabled:active, .eagles.disabled:focus {
    background: var(--eagles-light-color);
}