@import url('https://fonts.googleapis.com/css2?family=Teko:wght@300..700&display=swap');

:root {
    --color-primary: #10284C;
    --color-primary-tint30: rgba(16,40,76,0.3);
    --color-accent: #EF3644;
    --color-light: #ffffff;
    --color-club-primary: #10284C !important;
    --color-club-primary-tint30: rgba(16,40,76,0.3);
    --color-club-accent: #EF3644;
    --color-club-light: #ffffff;
    --color-grey1: #F8F6F6;
    --color-grey2: #D4D7DB;
    --color-grey3: #6D727F;
    --color-grey4: #394150;
    --color-grey5: #272F3E;
    --color-dark: #272F3E;
    --color-green: rgb(45, 210, 100);
    --color-orange: hsl(36, 90%, 52%);
    --color-red: hsl(3, 85%, 52%);
    --color-blue: hsl(240, 100%, 65%);
    --color-yellow: hsl(56.4, 100%, 57.6%);
    --background-color: rgb(231, 234, 237);
    --shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    --shadow-4: 0px 0px 4px 1px rgba(0,0,0,0.12);
    --shadow-16: 0px 0px 12px rgba(0, 0, 0, 0.16);
    --xs: 600px;
    --sm: 600px;
    --md: 768px;
    --lg: 992px;
    --xl: 1200px;
    --border-radius: 10px;
    --layout-padding: 10rem;
    --container-width: 1200px;
    --font-head: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --font-body: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --font-link: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --h1: 20px;
    --h2: 16px;
    --h3: 14px;
    --h4: 12px;
    --h5: 8px;
    --header-footer-height: 0rem;
    --index-widget-height: 32rem;
    --index-grid-gap: var(--m3);
    --side-nav-width: 13.33% !important;
}

html, body {
    /*font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";*/
    font-family: teko;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}


/* ===  Components  === */

/* == contents == 
    nav-menu
    side-nav
    */

.page-layout {
    background-color: var(--background-color);
}

/* = nav menu = */

.page-header{
    --background-color: none !important;
}
.page-header::before{
    display: none;
    background: unset !important;
}

.page-header.side-nav .background-image{
    display: none;
}


/* = side nav = */
.side-bar .logo-wrapper{
     /*height: 200px;*/
     margin-inline: auto;
     margin-top: 10%;
}
.side-bar .logo-wrapper img {
    /*padding: 10%;*/
}


.home-navigation{
    align-items: start;
    margin-inline: 10%;
}

    .home-navigation .tile.dashboard.side-nav {
        background: none;
        min-width: 100%;
        width: 100%;
        max-width: unset;
        border: 2px solid transparent !important;
    }

    .home-navigation .tile.dashboard.side-nav:hover {
        border: 2px solid var(--color-light) !important;
        cursor: pointer !important;
    }

.home-navigation .tile.dashboard.side-nav svg{
    display: none;
}

    .home-navigation .tile.dashboard.side-nav h2 {
        text-align: start;
        /*font-size: 24px !important;*/
        font-family: teko;
        color: var(--color-light);
        margin-top: 4px;
        margin-inline: 10px;
    }

    .home-navigation .tile.dashboard.side-nav.active {
        background: var(--color-light) !important;
    }

        .home-navigation .tile.dashboard.side-nav.active h2 {
            color: var(--color-primary);
        }