@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

:root {
    --primary-color: #00377A;
    --primary-color-rgb: 74, 82, 88;

    --secondary-color: #ff9100;
    --secondary-color-rgb: 255, 145, 0;

    --tertiary-color: #50555a;
    --tertiary-color-rgb: 80, 85, 90;

    --primary-font-color: #50555a;
    --secondary-font-color: #ffffff;
    --tertiary-font-color: #9BA5AE;

    --content-background: #f8fbfc;

    --alternative-background: #ffffff;
    --alternative-background-rgb: 255, 255, 255;

    --hover-color: #D97B00;

    --shadow-color: rgba(250, 169, 50, 0.4);

    --light-color: #eaeef0;

    --status-yellow: #FCCE0F;
    --status-green: #00BF85;
    --status-red: #EA124C;
    --status-orange: #FF9100;
    --status-blue: #269CF4;
}

body {
    background: var(--content-background);
    overflow-y: scroll;
}

body .loading-container {
    position: fixed;
}

html {
    min-height: 100vh;
}

::-webkit-scrollbar {
    width: 4px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--light-color);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--hover-color);
}

.middle-page {
    display: grid;
    grid-gap: .5%;
    grid-template-columns: 12% repeat(12, 6%) 12%;
    width: 100%;
    background: var(--content-background);
}

.middle-page {
    min-height: 100vh;
}

.sidenav {
    height: 110%;
}

body .header-wrapper .header .profile-container .profile-pic {
    /*display: none;*/
}

@media screen and (max-width: 415px) {
    .middle-page {
        grid-template-columns: 8.5% repeat(4, 20%) 8.5%;
    }
}

.footer-container {
    margin-top: 54px;
}