@media (max-width: 991px) {
    #nav-bar {
        padding: 1rem 0.5rem !important;
    }

    #user-account {
        width: 100% !important;
    }

    #navbarSupportedContent {
        background-color: #2f2e38;
    }

    #main-menu .nav-item, #username {
        margin: unset;
        padding: 0.5rem 0.2rem 0.5rem 1rem;
    }

    .dropdown-item {
        background-color: #65646d;
    }

    .dropdown-item:hover {
        background-color: #4f4e58;
    }

    #main-menu .nav-item:hover a {
        color: #fff !important;
    }

    #user-account .nav-item {
        margin: unset;
    }

    #user-account-dropdown {
        text-align: left;
        border: unset;
        margin: unset;
        padding: 0.8rem 0;
        background-color: #65646d;
        color: #fff;
    }

    #user-account-dropdown .dropdown-divider {
        display: none;
    }
}

#left-nav {
    width: 250px;
    max-width: 250px;
    background-color: #152e4d;
    color: #fff;
    position: fixed;
    top: 0;
    bottom: 0;
}

#nav-bar {
    background-color: #223;
    box-shadow: 0 5px 9px 0 #4456;
}

nav .icon {
    margin-right: 0.55rem;
    position: relative;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}

.dropdown-menu .icon-submenu {
    float: right;
    font-size: 0.8rem;
    color: #777;
    top: 0.25rem;
    margin-right: 0;
}

.dropdown-menu img {
    position: relative;
    margin-right: 0.6rem;
    bottom: 0.1rem;
}

#user-account-dropdown {
    left: -185px;
}

.nav-user-icon {
    font-size: 1rem;
    position: relative;
    top: 0.1rem;
}

.page-header {
    cursor: default;
    margin-top: 76px;
    position: sticky;
    left: 0;
}

#page-title {
    border-bottom: 1px solid #d5dadf;
}

.breadcrumb a {
    color: #35526b;
}

.breadcrumb a:hover {
    color: #6ba7e8;
}

.breadcrumb-active {
    color: #9db1c2;
    cursor: default;
}

#user-account-dropdown img {
    width: 33px;
    position: relative;
    bottom: 2px;
}

/* ------------------------                          ------------------------ */
/* ------------------------   DROPDOWN MENU EFFECTS  ------------------------ */
/* ------------------------                          ------------------------ */

.navbar-nav .dropdown > .dropdown-menu{
    -webkit-animation: fadein-slideup 0.3s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein-slideup 0.3s; /* Firefox < 16 */
    -ms-animation: fadein-slideup 0.3s; /* Internet Explorer */
    -o-animation: fadein-slideup 0.3s; /* Opera < 12.1 */
    animation: fadein-slideup 0.3s;
}

@keyframes fadein-slideup {
    from { opacity: 0; top: 130% }
    to   { opacity: 1; top: 100% }
}

/* Firefox < 16 */
@-moz-keyframes fadein-slideup {
    from { opacity: 0; top: 130% }
    to   { opacity: 1; top: 100% }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein-slideup {
    from { opacity: 0; top: 130% }
    to   { opacity: 1; top: 100% }
}

/* Internet Explorer */
@-ms-keyframes fadein-slideup {
    from { opacity: 0; top: 130% }
    to   { opacity: 1; top: 100% }
}

/* Opera < 12.1 */
@-o-keyframes fadein-slideup {
    from { opacity: 0; top: 130% }
    to   { opacity: 1; top: 100% }
}

.navbar-nav .dropdown-submenu > .dropdown-menu {
    -webkit-animation: fadein-slideright 0.3s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein-slideright 0.3s; /* Firefox < 16 */
    -ms-animation: fadein-slideright 0.3s; /* Internet Explorer */
    -o-animation: fadein-slideright 0.3s; /* Opera < 12.1 */
    animation: fadein-slideright 0.3s;
}

@keyframes fadein-slideright {
    from { opacity: 0; left: 130% }
    to   { opacity: 1; left: 100% }
}

/* Firefox < 16 */
@-moz-keyframes fadein-slideright {
    from { opacity: 0; top: 80px }
    to   { opacity: 1; top: 67px }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein-slideright {
    from { opacity: 0; top: 80px }
    to   { opacity: 1; top: 67px }
}

/* Internet Explorer */
@-ms-keyframes fadein-slideright {
    from { opacity: 0; top: 80px }
    to   { opacity: 1; top: 67px }
}

/* Opera < 12.1 */
@-o-keyframes fadein-slideright {
    from { opacity: 0; top: 80px }
    to   { opacity: 1; top: 67px }
}

/* ------------------------                 ------------------------ */
/* ------------------------   TABLE THEMES  ------------------------ */
/* ------------------------                 ------------------------ */

.table-theme-1 {
    font-size: 0.75rem;
    white-space: nowrap;
    text-align: center;
}

.table-theme-1 thead {
    background-color: #e5eaef;
}

.table-theme-1 tbody tr:nth-child(even) {
    background-color: #f5f8fb;
}

.table-theme-2 {
    font-size: 0.9rem;
    white-space: nowrap;
    text-align: center;
    width: 100%;
}

.table-theme-2 thead {
    background-color: #35526b;
    border: 1px solid #35526b;
    color: #fff;
}

.table-theme-2 th {
    font-weight: 500;
}

.table-theme-2 th, .table-theme-2 td {
    padding: 5px 0;
}

.table-theme-2 td {
    border: 1px solid #e0e5ea;
}

.table-theme-2 tbody {
    background-color: #fff;
}

.table-theme-2 tbody tr:nth-child(even) {
    background-color: #f5f8fb;
}

.table-theme-3 {
    font-size: 0.9rem;
    white-space: nowrap;
    text-align: center;
    width: 100%;
    border: 1px solid #ddd;
}

.table-theme-3 thead {
    background-color: #134475;
    border: 1px solid #336495;
    color: #fff;
}

.table-theme-3 th {
    font-weight: 300;
}

.table-theme-3 th, .table-theme-3 td {
    padding: 5px 0;
}

.table-theme-3 tbody {
    /* background-color: #fff; */
}

.table-theme-3 tbody tr:nth-child(even) {
    background-color: #f5f8fb;
}

.cursor-pointer {
    cursor: pointer;
}

.beint-btn {
    background-color: #714b94;
    color: #fff;
    cursor: pointer;
    border: 1px solid #714b94;
}

.beint-btn:hover {
    background-color: #815ba4;
}

/* ------------------------                 ------------------------ */
/* ------------------------ LOADING OVERLAY ------------------------ */
/* ------------------------                 ------------------------ */
#loading {
    color: #a986cf;
    font-size: 90px;
    text-indent: -9999em;
    overflow: hidden;
    width: 0.93em;
    height: 0.93em;
    border-radius: 50%;
    margin: 72px auto;
    position: fixed;
    top: calc(60px + 20%);
    left: 0;
    bottom: 0;
    right: 0;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
    animation: load6 1.7s infinite ease, round 1.7s infinite ease;
    z-index: 9999999;
    display: none;
}

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    z-index: 9999998;
}

#overlay:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.4);
    z-index: 9999998;
}

/* ------------------------                ------------------------ */
/* ------------------------ LOADING EFFECT ------------------------ */
/* ------------------------                ------------------------ */


@-webkit-keyframes load6 {
    0% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    5%,
    95% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    10%,
    59% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }
    20% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
    }
    38% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
    }
    100% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
}
@keyframes load6 {
    0% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    5%,
    95% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    10%,
    59% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }
    20% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
    }
    38% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
    }
    100% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
}
@-webkit-keyframes round {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes round {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}