.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: rgb(51, 51, 51); /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 0px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}


body {
    font-family: Noto Sans,sans-serif;
    font-size: 10pt;
    margin: 0 2px;
    color: #000;
}
hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgba(0,0,0,.1);
}

header, footer, nav, section {
    display: block;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    margin: 0;
    vertical-align: top;
}


    /* The navigation menu links */
    .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }

        /* When you mouse over the navigation links, change their color */
        .sidenav a:hover {
            color: #f1f1f1;
        }

    /* Position and style the close button (top right corner) */
    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
}

.icon-bar {
    width: 40px; /* Set a specific width */
    height: 45px;
    background-color: #cc0c2f; /* Dark-grey background */
}

    .icon-bar a {
        display: block; /* Make the links appear below each other instead of side-by-side */
        text-align: center; /* Center-align text */
        padding: 0px; /* Add some padding */
        transition: all 0.3s ease; /* Add transition for hover effects */
        color: white; /* White text color */
        font-size: 36px; /* Increased font-size */
    }

/*.icon-bar a:hover {
                    background-color: #333333; /* Add a hover color */
/*}*/



/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
/*media screen and (max-height: 450px) {
            .sidenav {padding-top: 15px;}
            .sidenav a {font-size: 18px;}
            }*/

/*Custom Bootstrap styling
--------------------------------------------------------------------------*/

/*List items*/
.list-group-item-psu-primary {
    color: #FFF;
    background-color: #cc0c2f;
}

    .list-group-item-psu-primary.list-group-item-action:hover, .list-group-item-psu-primary.list-group-item-action:focus {
        color: #FFF;
        background-color: #bc0b2b;
    }


.list-group-item-psu-tertiary {
    color: #000;
    background-color: #FFF;
}

    .list-group-item-psu-tertiary.list-group-item-action:hover, .list-group-item-psu-tertiary.list-group-item-action:focus {
        color: #000;
        background-color: #F4F4F4;
    }

.list-group-item-psu-secondary {
    background-color: #354665;
    color: #FFF;
}

    .list-group-item-psu-secondary.list-group-item-action:hover, .list-group-item-psu-secondary.list-group-item-action:focus {
        color: #FFF;
        background-color: #273c62;
    }

.list-group-item-psu-gray {
    color: #FFF;
    background-color: #686868;
}

    .list-group-item-psu-gray.list-group-item-action:hover, .list-group-item-psu-gray.list-group-item-action:focus {
        color: #FFF;
        background-color: #5e5e5e;
    }
/*Badges*/
.badge-psu-primary {
    background-color: #cc0c2f;
    color: #FFF;
}

    .badge-psu-primary:active, .badge-psu-primary:hover {
        color: #FFF;
        text-decoration: none;
    }

.badge-psu-secondary {
    background-color: #354665;
    color: #FFF;
}

    .badge-psu-secondary:active, .badge-psu-secondary:hover {
        color: #FFF;
        text-decoration: none;
    }

.badge-orange {
    color: orange;
    font-size: 15px;
}

    .badge-orange:active, .badge-orange:hover {
        color: orange;
        text-decoration: none;
    }

/*Buttons*/
.btn-psu-primary, .btn-psu-primary-toggle.collapsed {
    color: #FFF;
    background-color: #cc0c2f;
}

    .btn-psu-primary:active, .btn-psu-primary:hover, .btn-psu-primary-toggle.collapsed:active, .btn-psu-primary-toggle.collapsed:hover {
        color: #FFF;
        background-color: #bc0b2b;
    }

.btn-psu-secondary, .btn-psu-primary-toggle {
    /*color: #cc0c2f;
    background-color: #FFF;
    border: 2px solid #cc0c2f;*/
    color: #FFF;
    background-color: #354665;
}

    .btn-psu-secondary:active, .btn-psu-secondary:hover, .btn-psu-primary-toggle:active, .btn-psu-primary-toggle:hover {
        color: #FFF;
        background-color: #273c62;
    }

/*Misc*/
.text-psu-red {
    color: #cc0c2f !important;
}

.collapsed .psu-toggle-close {
    display: none;
}

.psu-toggle-close {
    display: inline-block;
}

.collapsed .psu-toggle-open {
    display: inline-block !important;
}

.psu-toggle-open {
    display: none !important;
}

.grabbing {
    cursor: -webkit-grabbing !important;
}


.grab:hover {
    cursor: -webkit-grab;
    cursor: grab;
}
/*Width*/
@media (min-width: 768px) {
    .w-50-md {
        width: 50% !important;
    }
    .w-75-md {
        width: 75% !important;
    }
}

/*Table*/
.table-psu-primary,
.table-psu-primary > th,
.table-psu-primary > td {
    color: #FFF;
    background-color: #cc0c2f;
}

.table-hover .table-psu-primary:hover > td,
.table-hover .table-psu-primary:hover > th {
    background-color: #bc0b2b;
}


.table-psu-secondary,
.table-psu-secondary > th,
.table-psu-secondary > td {
    color: #FFF;
    background-color: #354665;
}

.table-hover .table-psu-secondary:hover > td,
.table-hover .table-psu-secondary:hover > th {
    background-color: #273c62;
}

.psuLookUpTable td {
    vertical-align: middle !important;
}


.nav-pills {
    .nav-link{
    @include border-radius($nav-pills-border-radius);
}

.nav-link.active,
.show > .nav-link {
    color: $nav-pills-link-active-color;
    background-color: $nav-pills-link-active-bg;
}
}

/*.material .snotify-confirm {
    background-color: #fff;
}

    .material .snotify-confirm .snotifyToast__title {
        color: #000;
    }

    .material .snotify-confirm .snotifyToast__body {
        color: #000;
    }

.material .snotifyToast__buttons button {
    color: #000;
}*/

.snotify-confirm {
    background-color: #354665;
}

/*Progress Bar*/
.bg-psu-secondary {
    background-color: #354665;
}

.bg-psu-primary {
    background-color: #cc0c2f;
}


/*Skeleton Loader*/
.ph-item {
    direction: ltr;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

    .ph-item, .ph-item *,
    .ph-item ::after, .ph-item ::before {
        box-sizing: border-box;
    }

        .ph-item::before {
            content: " ";
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 50%;
            z-index: 1;
            width: 500%;
            margin-left: -250%;
            -webkit-animation: phAnimation 0.8s linear infinite;
            animation: phAnimation 0.8s linear infinite;
            background: linear-gradient(to right, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 54%) 50% 50%;
        }

        .ph-item > * {
            flex: 1 1 auto;
            display: flex;
            flex-flow: column;
            padding-right: 15px;
            padding-left: 15px;
        }

.ph-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 7.5px;
}

    .ph-row div {
        height: 10px;
        margin-bottom: 7.5px;
        background-color: #ced4da;
    }

    .ph-row .big,
    .ph-row.big div {
        height: 20px;
        margin-bottom: 15px;
    }

    .ph-row .empty {
        background-color: rgba(255, 255, 255, 0);
    }

.ph-col-2 {
    flex: 0 0 16.66667%;
}

.ph-col-4 {
    flex: 0 0 33.33333%;
}

.ph-col-6 {
    flex: 0 0 50%;
}

.ph-col-8 {
    flex: 0 0 66.66667%;
}

.ph-col-10 {
    flex: 0 0 83.33333%;
}

.ph-col-12 {
    flex: 0 0 100%;
}

.ph-avatar {
    position: relative;
    width: 100%;
    min-width: 60px;
    background-color: #ced4da;
    margin-bottom: 15px;
    border-radius: 50%;
    overflow: hidden;
}

    .ph-avatar::before {
        content: " ";
        display: block;
        padding-top: 100%;
    }

.ph-picture {
    width: 100%;
    height: 120px;
    background-color: #ced4da;
}

@-webkit-keyframes phAnimation {
    0% {
        transform: translate3d(-30%, 0, 0);
    }

    100% {
        transform: translate3d(30%, 0, 0);
    }
}

@keyframes phAnimation {
    0% {
        transform: translate3d(-30%, 0, 0);
    }

    100% {
        transform: translate3d(30%, 0, 0);
    }
}

.bg-psu-secondary {
    background-color: #354665;
}

.fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
}

.list-complete-item {
    transition: all 1s;
}

.list-complete-enter, .list-complete-leave-to
/* .list-complete-leave-active below version 2.1.8 */ {
    opacity: 0;
    transform: translateX(30px);
}

.list-complete-leave-active {
    position: absolute;
}

.flip-list-move {
    transition: transform 1s;
}



/*General styles
----------------------------------------------------------------------*/
body {
    font-family: Noto Sans,sans-serif;
    font-size: 10pt;
    margin: 0 2px;
    color: #000;
}

header, footer, nav, section {
    display: block;
}

    header.main-header {
        background-color: #cc0c2f;
        border-color: #8f3128;
    }

        header.main-header .navbar-brand {
            color: #FFF;
            font-size: 2rem;
            font-family: Georgia, 'Times New Roman', Times, serif;
        }

@media(max-width:991px) {
    header.main-header .navbar-brand {
        color: #FFF;
        font-size: 1.3rem;
        font-family: Georgia, 'Times New Roman', Times, serif;
    }
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    margin: 0;
    vertical-align: top;
}

*:focus {
    outline: 2px solid rgb(0, 162, 255) !important;
    /*box-shadow: 0 .4rem 0.5rem rgba(0,0,0,.3) !important;*/
}

/*Specific styles
----------------------------------------------------------------------*/

.navbar-brand {
    white-space: normal;
    line-height: 1em;
}

    .navbar-brand img {
        max-height: 40px;
    }

/*List items*/
.list-group-item-psu-primary {
    color: #FFF;
    background-color: #cc0c2f;
}

    .list-group-item-psu-primary.list-group-item-action:hover, .list-group-item-psu-primary.list-group-item-action:focus {
        color: #FFF;
        background-color: #bc0b2b;
    }

.list-group-item-psu-tertiary {
    color: #000;
    background-color: #FFF;
}

    .list-group-item-psu-tertiary.list-group-item-action:hover, .list-group-item-psu-tertiary.list-group-item-action:focus {
        color: #000;
        background-color: #F4F4F4;
    }

/*Dropwdown items*/
.dropdown-item-psu:active {
    background-color: #cc0c2f
}

/*Buttons*/
.btn-psu-primary,
.btn-psu-primary:hover,
.btn-psu-primary:active,
.btn-psu-primary-flat,
.btn-psu-primary-flat:hover,
.btn-psu-primary-flat:active,
.btn-psu-primary-toggle,
.btn-psu-primary-toggle:hover,
.btn-psu-primary-toggle:active,
.btn-psu-secondary,
.btn-psu-secondary:hover,
.btn-psu-secondary:active {
    color: #FFF;
}

.btn.btn-psu-primary,
.btn.btn-psu-primary-toggle,
.btn.btn-psu-secondary {
    box-shadow: 0 .4rem 0.5rem rgba(0,0,0,.3);
}

.btn-psu-primary,
.btn-psu-primary-toggle.collapsed {
    background-color: #cc0c2f;
}

    .btn-psu-primary:active,
    .btn-psu-primary:hover,
    .btn-psu-primary-toggle.collapsed:active,
    .btn-psu-primary-toggle.collapsed:hover {
        background-color: #bc0b2b;
    }

.btn-psu-secondary,
.btn-psu-primary-toggle {
    background-color: #354665;
}

    .btn-psu-secondary:active,
    .btn-psu-secondary:hover,
    .btn-psu-primary-toggle:active,
    .btn-psu-primary-toggle:hover {
        background-color: #273c62;
    }

/*Table*/
.psu-table-primary,
.psu-table-primary > th,
.psu-table-primary > td {
    color: #FFF;
    background-color: #cc0c2f;
}

.psu-table-hover .psu-table-primary:hover > td,
.psu-table-hover .psu-table-primary:hover > th {
    background-color: #bc0b2b;
}


.psu-table-secondary,
.psu-table-secondary > th,
.psu-table-secondary > td {
    color: #FFF;
    background-color: #354665;
}

.psu-table-hover .psu-table-secondary:hover > td,
.psu-table-hover .psu-table-secondary:hover > th {
    background-color: #273c62;
}

/*Icons*/
.psu-nav-icon {
    font-size: 21pt;
}

@media (max-width: 768px) {
    .psu-nav-icon {
        font-size: 32pt;
    }
}

/*Badges*/
.badge {
    /*Adjustment from its default of 75%*/
    font-size: 100%;
}

.badge-psu-info {
    color: #FFF;
    background-color: #117888;
}

/* Styles for basic forms
-----------------------------------------------------------*/
fieldset {
    border: 1px solid #ddd;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
}

legend {
    font-size: 1.5em;
    width: auto;
    padding: 0 0.25em;
    font-family: Georgia, 'Times New Roman', Times, serif;
}