/* MAIN LAYOUT */
@import url('../fonts/open-iconic/font/css/open-iconic-bootstrap.min.css');

@font-face {
    font-family: TT Norms;
    src: url('../fonts/open-iconic/font/fonts/ttnorms_regular.otf');
}

@font-face {
    font-family: Boing;
    src: url('../fonts/open-iconic/font/fonts/boing_regular.otf');
}

:root {
    --ppp-pink: rgb(231 30 112);
    --cherry: rgb(93,0,42);
    --dark-grey: rgb(58, 61, 71);
    --yellow: rgb(250, 222,0);
    --light-pink: rgb(246, 186, 200);
    --light-grey: rgb(214, 214, 219);
}

* {
    font-family: TT Norms;
    font-feature-settings: 'liga' off;
}

html, body {
    height: 100%;
    margin: 0;
    color: var(--dark-grey);
}

h1, h2, h3, h4, h5, h6 {
    font-family: Boing;
}

#page-wrapper {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "header" "main" "footer";
    grid-gap: 30px;
    grid-template-rows: auto 1fr auto;
}

header {
    grid-area: header; 
}

main {
    grid-area: main;
    padding: 0 5%;
}

footer {
    grid-area: footer;
    font-size: 14px;
    line-height: 32px;
    background-color: var(--light-grey);
    text-align: center;
    color: var(--dark-grey);
}

#menu-header {
    display: flex;
    background-color: var(--ppp-pink);
}

#menu-bar {
    display: flex;
    width: 100%;
    margin-left: 2em;
    margin-top: 2em;
}

    #menu-bar > #user-greeting {
        margin-left: auto;
        padding: 1em;
        color: white;
    }

    #menu-bar > #logout-link {
        padding: 1em;
        color: white;
    }

    #menu-bar .nav-item:hover, #menu-bar .nav-item:visited {
        text-decoration: none;
    }

#logo-container {
    padding: 10px;
}

#menu-logo {
    width: 9em;
}

#nav-bar {
    display: flex;
}

    #nav-bar .nav-item {
        margin: 0 0.5em;
        color: white;
        padding: 0.5em;
        font-size: 1.2em;
    }

        #nav-bar .nav-item:hover, #nav-bar .nav-item:visited {
            text-decoration: none;
        }

.centered-notification-parent {
    /* center this element on the screen, no matter the page scroll offset */
    position: fixed;
    left: 100%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1234; /* depends on other z-indexes on the page */
}

.custom-positioned-notifications {
    position: relative; /* force the individual notifications respect the position of their parent */
    flex-wrap: nowrap !important; /* display the individual notifications in a single column */
}

/* UI for Blazor 3.0+ */
.k-filter-menu-container > span:nth-child(n+3) {
    display: none;
}

/* UI for Blazor 2.30- */
.k-filter-menu-container > div > :nth-child(n+3) {
    display: none;
}

/* GLOBAL CLASSES */

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.width50 {
    width: 50%;
}

.alert-light {
    background-color: #f1f4f7;
}

.k-grid {
    font-size: 14px;
}

    .k-grid tr.k-alt.k-state-selected td, .k-grid tr.k-state-selected > td {
        background-color: unset;
    }