:root {
    --white: #fff;
    --black: #000;
    --primary-red: #b9132f;
    --cool-gray: #97999b;
    --cool-gray-20: #ccc;
    --wet-asphalt: #34495e;
    --stormy-sky: #768692;
    --test-yellow: #f1c40f;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
}

.bg-wet-asphalt {
    background-color: var(--wet-asphalt);
}

.text-hidden {
    display: none;
}

.text-cool-gray {
    color: var(--cool-gray);
}

.text-cool-gray-20 {
    color: var(--cool-gray-20);
}

[v-cloak] {
    display: none;
}

/* Navigation */
.navbar-nav .RadMenu ul li a.rmLink {
    cursor: pointer;
}

.navbar .RightMenu .RadMenu .rmRootGroup li .rmExpandDown {
    background: transparent !important;
    width: 21px;
    height: 21px;
    cursor: pointer;
    position: relative;
}

    .navbar .RightMenu .RadMenu .rmRootGroup li .rmExpandDown::before {
        position: absolute;
        font-family: FontAwesome, sans-serif;
        font-size: 21px;
        content: "\f0c9";
        color: #fff;
    }

/* Test system */
.TestSystem {
    background-color: var(--test-yellow);
}

    .TestSystem .navbar-nav .RadMenu ul li a.rmLink span.rmText,
    .TestSystem .RightMenu .lbl-username span,
    .TestSystem .RightMenu .RadMenu .rmRootGroup li .rmExpandDown::before {
        color: #444;
    }

    .TestSystem .navbar-nav .RadMenu ul li a.rmLink:hover span.rmText {
        color: var(--black);
    }

/* Branding */
.el-nav-logo {
    width: 60px;
    height: 60px;
    background: url("images/logo.svg") no-repeat top center;
    background-size: contain;
}

.el-nav-logo-sm {
    float: left;
    position: absolute;
    height: 46px;
    width: 46px;
    background: url("images/logo.svg") no-repeat top center;
    background-size: contain;
}

.el-slogan {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: .214rem;
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-weight: 300;
}

/* Breadcrumbs */
.BreadcrumbContainer .fa {
    margin: 0 5px 0 9px;
    display: inline-block;
    color: var(--cool-gray-20);
}

/* Forms */
.btn-light {
    padding: .25rem .5rem !important;
    font-size: .875rem !important;
    color: #212529 !important;
    background-color: #f8f9fa !important;
    border-color: #f8f9fa !important;
}

.form-control {
    width: 100% !important;
    font-size: 1rem !important;
    padding: .375rem .75rem !important;
    border: 1px solid #ced4da !important;
}

    .form-control:focus {
        box-shadow: 0 0 0 .2rem rgba(118, 134, 146, .25);
    }

    .form-control::-webkit-input-placeholder {
        color: var(--cool-gray);
    }

    .form-control:-moz-placeholder {
        color: var(--cool-gray-20);
    }

    .form-control::-moz-placeholder {
        color: var(--cool-gray-20);
    }

    .form-control:-ms-input-placeholder {
        color: var(--cool-gray-20);
    }

    .form-control::-ms-input-placeholder {
        color: var(--cool-gray-20);
    }

    .form-control:-webkit-autofill,
    .form-control:-webkit-autofill:first-line,
    .form-control:-webkit-autofill:hover,
    .form-control:-webkit-autofill:focus,
    .form-control:-webkit-autofill:active {
        font-size: 1rem !important;
    }

/* Breadcrumb */
.breadcrumb {
    font-family: 'Roboto', sans-serif;
    font-size: .88rem;
}

.breadcrumb-item::before {
    font-family: FontAwesome, sans-serif;
    content: "\f054" !important;
    color: #ddd !important;
}

.breadcrumb-item:first-child::before {
    display: none !important;
}

.breadcrumb a {
    color: #424242;
    text-decoration: none;
}

    .breadcrumb a:hover {
        color: var(--black);
    }

.breadcrumb .active {
    color: #999;
}

/* Pagination */
#pagination .page-item span {
    cursor: pointer;
}

.pagination .page-item .page-link {
    border-color: var(--wet-asphalt);
    color: var(--wet-asphalt);
}

.pagination .page-item.active .page-link {
    background-color: var(--wet-asphalt);
    color: var(--white);
}

/* Loader */
.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
}

    .lds-ellipsis div {
        position: absolute;
        top: 27px;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: #ccc;
        animation-timing-function: cubic-bezier(0, 1, 1, 0);
    }

        .lds-ellipsis div:nth-child(1) {
            left: 6px;
            animation: lds-ellipsis1 .6s infinite;
        }

        .lds-ellipsis div:nth-child(2) {
            left: 6px;
            animation: lds-ellipsis2 .6s infinite;
        }

        .lds-ellipsis div:nth-child(3) {
            left: 26px;
            animation: lds-ellipsis2 .6s infinite;
        }

        .lds-ellipsis div:nth-child(4) {
            left: 45px;
            animation: lds-ellipsis3 .6s infinite;
        }

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(19px, 0);
    }
}

.lds-ring {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
}

    .lds-ring div {
        box-sizing: border-box;
        display: block;
        position: absolute;
        width: 51px;
        height: 51px;
        margin: 6px;
        border: 6px solid;
        border-radius: 50%;
        animation: lds-ring 1.2s cubic-bezier(.5, 0, .5, 1) infinite;
        border-color: var(--white) transparent transparent transparent;
    }

        .lds-ring div:nth-child(1) {
            animation-delay: -.45s;
        }

        .lds-ring div:nth-child(2) {
            animation-delay: -.3s;
        }

        .lds-ring div:nth-child(3) {
            animation-delay: -.15s;
        }

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}