﻿#navbarUserDropdown {
    right: 0;
    left: auto;
}

#scrollToTopBtn {
    position: fixed;
    bottom: 3.5em;
    right: 2em;
    z-index: 500;
    display: none;
    background-color: #233454;
    color: #eeeeee;
}

.text-black {
    color: #212529;
}

.textAlignCenter {
    text-align: center;
}

.textAlignLeft {
    text-align: left;
}

.textAlignRight {
    text-align: right;
}

.headerLead {
    width: 0.8em;
    background-color: #4d85ea;
    margin-right: 0.2em;
}

.custom-scrollbar-css::-webkit-scrollbar {
    width: 5px;
}

/* scrollbar track */
.custom-scrollbar-css::-webkit-scrollbar-track {
    background: #eee;
}

/* scrollbar handle */
.custom-scrollbar-css::-webkit-scrollbar-thumb {
    border-radius: 1rem;
    background-color: #00d2ff;
    background-image: linear-gradient(to top, #00d2ff 0%, #3a7bd5 100%);
}

#footerBuffer {
    margin-top: 2em;
}


.cornflowerBackground {
    background-color: rgba(51, 90, 161, 1) !important;
    /*background-color: rgba(100, 149, 237, 1) !important; cornflower*/
}

    .cornflowerBackground .navbar-brand {
        color: #eeeeee !important;
    }

    .cornflowerBackground .navbar-toggler {
        color: #eeeeee !important;
    }

    .cornflowerBackground .nav-link {
        color: #eeeeee !important;
    }


/* width */
::-webkit-scrollbar {
    width: 0.2em;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0.1em grey;
    border-radius: 0.08em;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #6495ed;
    border-radius: 0.08em;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #1f66e5;
        width: 0.3em;
    }

/*.wrapper {
    display: flex;
    align-items: stretch;
}*/

@media (min-width: 768px) {
    .max-grid-height {
        height: calc(70vh);
    }
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
.classificationBanner
{
    height: 1.5em;
    font-size: calc(.2vw + .5em);
    z-index: 9999;
    position: fixed;
    top: 0px;
    color: #fff;
    text-align: center;
    width: 100%;
    overflow-x: hidden;
}

.classificationFooter {
    height: 1.5em;
    font-size: calc(0.2vw + 0.5em);
    z-index: 100;
    position: relative;
    bottom: 0;
    color: #fff;
    text-align: center;
    width: 100%;
}

.footerItem
{
    color: white;
}

.footerLink {
    text-decoration: none;
}

.footerLink:hover
{
    color: #CCC;
}




.requiredLabel:after {
    font-size: 0.8em;
    color: red;
    content: " *";
}

footer {
    font-size: 0.8em;
}

/* ---------------------------------------------------
    Loading Spinner
----------------------------------------------------- */
.loader14 {
    width: 90px;
    height: 90px;
    margin: 40px auto
}

    .loader14 .loader-inner {
        width: 60px;
        height: 60px;
        position: relative;
        margin: 0 auto
    }

        .loader14 .loader-inner div {
            content: "";
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #335AA1;
            position: absolute;
            top: 10px;
            left: 10px;
            transform-origin: 20px 20px;
            -webkit-animation: loading-14 2s infinite cubic-bezier(.5,0,.5,1);
            animation: loading-14 2s infinite cubic-bezier(.5,0,.5,1)
        }

        .loader14 .loader-inner .box-2 {
            top: 10px;
            left: auto;
            right: 10px;
            transform-origin: -4px 20px;
            -webkit-animation: loading-142 2s infinite cubic-bezier(.5,0,.5,1);
            animation: loading-142 2s infinite cubic-bezier(.5,0,.5,1)
        }

        .loader14 .loader-inner .box-3 {
            top: auto;
            left: auto;
            right: 10px;
            bottom: 10px;
            transform-origin: -4px -4px;
            -webkit-animation: loading-143 2s infinite cubic-bezier(.5,0,.5,1);
            animation: loading-143 2s infinite cubic-bezier(.5,0,.5,1)
        }

        .loader14 .loader-inner .box-4 {
            top: auto;
            bottom: 10px;
            transform-origin: 20px -4px;
            -webkit-animation: loading-144 2s infinite cubic-bezier(.5,0,.5,1);
            animation: loading-144 2s infinite cubic-bezier(.5,0,.5,1)
        }

    .loader14 .text {
        display: block;
        font-size: 12px;
        color: #335AA1;
        text-align: center
    }

@-webkit-keyframes loading-14 {
    0% {
        transform: rotate(90deg)
    }

    50% {
        transform: rotate(180deg)
    }

    75% {
        transform: rotate(270deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes loading-14 {
    0% {
        transform: rotate(90deg)
    }

    50% {
        transform: rotate(180deg)
    }

    75% {
        transform: rotate(270deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@-webkit-keyframes loading-142 {
    0%,25% {
        transform: rotate(90deg)
    }

    25% {
        transform: rotate(180deg)
    }

    75% {
        transform: rotate(270deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes loading-142 {
    0%,25% {
        transform: rotate(90deg)
    }

    25% {
        transform: rotate(180deg)
    }

    75% {
        transform: rotate(270deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@-webkit-keyframes loading-143 {
    0%,25% {
        transform: rotate(90deg)
    }

    50% {
        transform: rotate(270deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes loading-143 {
    0%,25% {
        transform: rotate(90deg)
    }

    50% {
        transform: rotate(270deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@-webkit-keyframes loading-144 {
    0%,25% {
        transform: rotate(90deg)
    }

    50% {
        transform: rotate(180deg)
    }

    100%,75% {
        transform: rotate(360deg)
    }
}

@keyframes loading-144 {
    0%,25% {
        transform: rotate(90deg)
    }

    50% {
        transform: rotate(180deg)
    }

    100%,75% {
        transform: rotate(360deg)
    }
}
