/* Fonts */
@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/Lato-Medium.woff2") format("woff2");
}
@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/Lato-Regular.woff2") format("woff2");
}
/* Variables */
:root {
    /* General */
    --border-radius: 8px;
    --gutter-x: 0.5rem;
    --gutter-y: 1rem;
    --link-text-color: #222;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --whitespace-color: #fff;
    /*--site-background-color: hsl(0, 0%, 99%);*/
    --site-background-color: hsl(0, 0%, 100%);
    --sidebar-width: 300px;
    /* Important Notice */
    --important-notice-background-color: #222;
    --important-notice-text-color: #fff;
    --header-background-color: transparent;
    --header-text-color: var(--default-text-color);
    /* Cookie Notice */
    --cookie-notice-background-color: rgba(45, 45, 56, 0.75);
    --cookie-notice-text-color: #fff;
    /* Navigation */
    --navigation-background-color: #d7dae3;
    --navigation-background-color-hover: rgba(0, 0, 0, 0.05);
    --navigation-background-color-active: rgba(0, 0, 0, 0.15);
    --navigation-text-color: #222;
    --navigation-text-color-hover: var(--navigation-text-color);
    --navigation-text-color-active: var(--navigation-text-color);
    /* Navigation */
    --offcanvas-background-color: var(--navigation-background-color);
    --offcanvas-text-color: var(--navigation-text-color);
    /* Defaults */
    --default-background-color: #f1f1f1;
    --default-border-color: #efeff9;
    --default-line-height: 1.3333;
    --default-text-font: "Asap", Arial, "Helvetica Neue", Helvetica, sans-serif;
    --default-text-color: #222;
    --default-text-size: 15px;
    /* Buttons */
    --default-button-background-color: #f9f9f9;
    --default-button-background-color-hover: #f3f3f3;
    --default-button-background-color-active: #f3f3f3;
    --default-button-border-color: rgba(0, 0, 0, 0.075);
    --default-button-text-color: #333;
    --primary-button-background-color: #2e9cd4;
    --primary-button-background-color-hover: #ddd;
    --primary-button-background-color-active: #bdbdbd;
    --primary-button-border-color: rgba(0, 0, 0, 0.075);
    --primary-button-text-color: #fff;
    --success-button-background-color: #98cc34;
    --success-button-background-color-hover: #9dcf3e;
    --success-button-background-color-active: #89b82e;
    --success-button-border-color: rgba(0, 0, 0, 0.075);
    --success-button-text-color: #fff;
    --warning-button-background-color: #f0ad4e;
    --warning-button-background-color-hover: #f2b866;
    --warning-button-background-color-active: #f1b25a;
    --warning-button-border-color: rgba(0, 0, 0, 0.1);
    --warning-button-text-color: #aa0000;
    --danger-button-background-color: #d9534f;
    --danger-button-background-color-hover: #de6764;
    --danger-button-background-color-active: #db5d59;
    --danger-button-border-color: rgba(0, 0, 0, 0.1);
    --danger-button-text-color: #fff;
    /* Notices */
    --default-notice-background-color: #e6e8ed;
    --default-notice-text-color: #000;
    --default-notice-border-color: #e6e8ed;
    --primary-notice-background-color: #3ba5c6;
    --primary-notice-text-color: #fff;
    --primary-notice-border-color: #3ba5c6;
    --success-notice-background-color: #98cc34;
    --success-notice-text-color: #fff;
    --success-notice-border-color: #98cc34;
    --warning-notice-background-color: #ffcc66;
    --warning-notice-text-color: #aa0000;
    --warning-notice-border-color: #ffcc66;
    --danger-notice-background-color: #d9534f;
    --danger-notice-text-color: #fff;
    --danger-notice-border-color: #d9534f;
    /* Breadcrumbs */
    --breadcrumbs-background-color: #ededf1;
    --breadcrumbs-text-color: #555;
    --breadcrumbs-border-color: transparent;
    /* Cards */
    --card-background-color: #fff;
    --card-text-color: var(--default-text-color);
    --card-border-color: var(--default-border-color);
    --card-header-background-color: transparent;
    --card-header-text-color: var(--card-text-color);
    --card-body-background-color: transparent;
    --card-footer-background-color: #fbfbfd;
    /* Input */
    --input-background-color: #fafafc;
    --input-padding-x: 1.5em;
    --input-padding-y: 0.5em;
    --input-text-color: #000;
    --input-border-radius: 1em;
    /* Pills */
    --pills-background-color: transparent;
    --pills-background-color-active: #d7dae3;
    --pills-background-color-hover: #f1f3f7;
    --pills-text-color: var(--default-text-color);
    --pills-text-color-active: #222;
    /* Tabs */
    --tabs-pane-background-color: #eff2f5;
    --tabs-pane-border-color: var(--tabs-pane-background-color);
    --tabs-background-color: #e8e8eb;
    --tabs-background-color-active: #fff;
    --tabs-text-color: #333;
    --tabs-text-color-active: var(--tabs-text-color);
    --tabs-border-color: var(--tabs-background-color);
    --tabs-border-color-active: var(--tabs-background-color-active);
    --tabs-content-background-color: #fff;
    /* Dropdowns */
    --dropdown-menu-background-color: #fff;
    --dropdown-menu-item-background-color: var(
        --dropdown-menu-background-color
    );
    --dropdown-menu-item-text-color: var(--default-text-color);
    /* Tables */
    --table-striped-row-background-odd: #f5f6f9;
    --table-striped-row-background-even: #fff;
    --table-row-hover-background: #ececec;
    /* Pagination */
    --pagination-background-color: var(--default-background-color);
    --pagination-background-color-active: #d7dae3;
    --pagination-background-color-hover: #e7e8ed;
    --pagination-text-color: var(--default-text-color);
    --pagination-text-color-active: var(--default-text-color);
    --pagination-text-color-hover: var(--default-text-color);
    --pagination-border-color: var(--default-border-color);
    /* Footer */
    --footer-background-color: #ededf1;
    --footer-title-color: var(--default-text-color);
    --footer-text-color: var(--default-text-color);
    /* Copyright */
    --copyright-background-color: #e2e2e7;
    --copyright-text-color: var(--default-text-color);
}
@media (min-width: 768px) {
    :root {
        --gutter-x: 1rem;
        --gutter-y: 1rem;
    }
}
@media (min-width: 992px) {
    :root {
        --gutter-x: 1.5rem;
        --gutter-y: 1.5rem;
    }
}
@media (min-width: 1200px) {
    :root {
        --gutter-x: 2rem;
        --gutter-y: 2rem;
    }
}