:root {
    --darkest-blue: #05193d;
    --dark-blue: #294e85;
    --blue: #3767b1;
    --light-blue: #cbd6ec;
    --lightest-blue: #e5ebf6;
    --alternating-blue: #ecf1f5;
    --filter-blue: #809ed0;
    --yellow: #ffc82f;
    --red: #f15d67;
    --light-grey: #212121;
    --dark-accent: #000000;
    --light-text: #fff;
    --light-red: #f7d2d2;
    --light-green: #b1d5a5;
}

html, body {
    height: 100%;
}


body {
    padding: 0 0 20px 0;
    font-family: Roboto, sans-serif;
    font-weight: 300;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0;
    color: var(--darkest-blue);
    background: url("../Content/Images/watermark.png") no-repeat top right fixed;
    background-color: var(--light-blue);
}

a, a:link, a:active, a:visited {
    color: var(--blue);
    text-decoration: none;
}

    a:hover {
        color: var(--darkest-blue);
        text-decoration: underline;
    }

button:focus {
    outline: none;
    color: var(--dark-accent) !important;
}

.help-button {
    cursor: pointer;
}

    .help-button:hover, .help-button:focus {
        color: var(--blue);
    }

.btn-primary {
    color: #fff !important;
    background-color: var(--blue);
    border-color: var(--dark-blue);
}

.test-badge {
    background: var(--light-blue);
    border-radius: 12px;
    line-height: 24px;
    font-size: 14px;
    padding: 0 10px;
    display: inline-block;
    height: 24px;
    margin: 5px 10px;
}

.row .g-0 {
    margin-left: 0;
    margin-right: 0;
}
/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 40px;
}

    .body-content h1 {
        font-size: 36px;
        font-weight: 100;
    }

div.display-container {
    background-color: var(--lightest-blue);
    margin-top: 20px;
    margin-bottom: 20px;
}

    div.display-container div.header {
        background-color: var(--dark-blue);
        font-weight: 100;
        text-align: left;
        color: var(--light-text);
        padding: 20px;
        position: relative;
    }

        div.display-container div.header h2 {
            font-size: 28px;
            padding: 0;
            margin: 0;
        }

        div.display-container div.header h3 {
            font-size: 24px;
            padding: 0;
            margin: 0;
        }

.display-container .header .counter {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    font-weight: bold;
}


.counter-total {
    background-color: #cccccc;
}

.counter-incomplete {
    background-color: #aaaaaa;
}

.counter-inprogress {
    background-color: #d96d00;
}

.counter-complete {
    background-color: #698c00;
}

div.display-container div.header div.close-button {
    position: absolute;
    top: 30px;
    right: 40px;
}

    div.display-container div.header div.close-button a {
        font-size: 30px;
        color: #fff;
    }

        div.display-container div.header div.close-button a:hover {
            opacity: 0.5;
        }



div.display-container div.section-header {
    background-color: #666666;
    flex-direction: row;
    display: inline-flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
}

    div.display-container div.section-header div.header-icon {
        display: inline-block;
        background-color: #444444;
        width: 60px;
        height: 60px;
        color: #ffffff;
        flex: 0 1 60px;
        padding: 10px;
    }

    div.display-container div.section-header div.header-content {
        display: inline-block;
        color: #ffffff;
        flex: 0 1 auto;
    }

        div.display-container div.section-header div.header-content h3 {
            padding: 0 20px;
            margin: 0;
            line-height: 60px;
        }

div.display-container div.sub-navigation {
    background-color: #888888;
    height: 45px;
}

    div.display-container div.sub-navigation a {
        font-size: 16px;
        text-transform: uppercase;
        color: #cccccc;
        font-weight: 400;
        padding: 0 20px;
    }

        div.display-container div.sub-navigation a:hover {
            color: #000000;
            text-decoration: none;
        }

div.display-container div.content {
    padding: 20px;
}

    div.display-container .content h3, div.display-container div.content h4 {
        padding-top: 10px;
    }

.col-sm-1.display-label {
    min-width: 150px;
    max-width: 150px;
    font-size: 16px;
    padding-bottom: 16px;
    padding-right: 16px;
    text-align: left;
}


div.display-container .content-filter {
    background-color: var(--filter-blue);
    padding: 5px 10px 10px;
}

    div.display-container .content-filter .col, div.display-container .content-filter .col-lg-1 {
        padding: 0 10px 10px;
    }

    div.display-container .content-filter label, div.display-container .content-filter h4 {
        color: #ddd;
    }

    div.display-container .content-filter h4 {
        padding-top: 20px;
    }

.filter-container {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.multiselect-container .multiselect-all .form-check-label, .multiselect-container .multiselect-all.dropdown-item, .multiselect-container .multiselect-all.dropdown-toggle, .multiselect-container .multiselect-group .form-check-label, .multiselect-container .multiselect-group.dropdown-item, .multiselect-container .multiselect-group.dropdown-toggle, .multiselect-container .multiselect-option .form-check-label, .multiselect-container .multiselect-option.dropdown-item, .multiselect-container .multiselect-option.dropdown-toggle {
    color: #212529;
}

.form-check-input {
    margin-top: 8px;
    min-height: auto;
}

div.display-container .content-footer {
    background-color: #555555;
    padding: 20px;
    position: relative;
}

    div.display-container .content-footer .dock-left {
        position: absolute;
        left: 30px;
    }

    div.display-container .content-footer .dock-right {
        position: absolute;
        right: 30px;
    }

.footer-button {
    text-transform: uppercase;
    font-size: 24px;
    color: #ffffff !important;
}

    .footer-button:hover {
        text-decoration: none;
        color: #ffffff;
        opacity: 0.5;
    }

    .footer-button span {
        vertical-align: top;
        line-height: 72px;
        font-size: 24px;
        font-weight: 300;
    }

button.footer-button {
    border: none;
    background: none;
    cursor: pointer;
}

div.display-container .content .stats-container {
    border: solid 1px #ccc;
    padding: 20px;
    border-radius: 10px;
    background-color: #ccc;
    opacity: 0.6;
    font-size: 12px;
    margin: 20px 0;
    width: 100%;
}

    div.display-container .content .stats-container .caption {
        text-transform: uppercase;
        text-align: right;
        padding-right: 20px;
    }

.content-footer a.nav-button, .content-footer button.nav-button, .content-filter button.nav-button {
    text-decoration: none;
    color: #ffffff;
    font-size: 20px;
    font-weight: 100;
    text-transform: uppercase;
    line-height: 45px;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    border: none;
    background-color: transparent;
    font-family: Roboto, sans-serif;
    height: 45px;
    display: inline-block;
}

.nav-button > span {
    vertical-align: super;
    margin-left: 10px;
}

.content-filter button.nav-button {
    color: #ccc;
    margin-top: 15px;
}

    .content-filter button.nav-button:hover {
        opacity: 0.8;
        color: #000000;
    }

.content-footer .pagination a {
    display: inline-block;
    width: 45px;
    height: 30px;
    border: none;
    background-color: #888888;
    border-radius: 15px;
    text-align: center;
    margin-right: 10px;
    line-height: 30px;
    color: #545454;
}

    .content-footer .pagination a:hover {
        background-color: #000000;
        opacity: 0.8;
        text-decoration: none;
        color: #ffffff;
    }

.content-footer .pagination .disabled.PagedList-ellipses a {
    background-color: transparent;
    color: #cccccc;
}

.content-footer .pagination .active a {
    background-color: #ffffff;
    color: #000000;
}

.content-footer .nav-pages {
    color: #ffffff;
    font-weight: 400;
    font-size: 20px;
}

.content-footer ul.pagination {
    margin-bottom: 0;
}

footer {
    background-color: #333;
    padding: 5px 0;
    color: #cacaca;
    font-size: 14px;
    font-weight: 300;
    position: fixed;
    bottom: 0;
    width: 100%;
}

    footer:hover {
        bottom: 0;
    }

    footer .footer-links i {
        font-size: 16px;
        padding: 0 10px;
    }

    footer .footer-links a {
        color: #AAA;
    }

        footer .footer-links a:hover {
            text-decoration: none;
            color: #777;
        }

.content-table {
    padding-top: 5px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
/*input,
select,
textarea {
    max-width: 480px;
    min-height: 45px;
}

    

    input.medium {
        max-width: 250px;
    }

    input.small {
        max-width: 150px;
    }
    */
input[type="text"].required, input[type="email"].required, input[type=password].required, input[required="required"], textarea[required="required"], input[data-val=true] {
    border-left: solid 6px #888888;
}

.input-validation-error {
    border: solid 3px #ff0000;
}

::-webkit-input-placeholder {
    color: #cccccc !important;
    opacity: 1;
}

::-moz-placeholder {
    color: #cccccc !important;
}

::placeholder {
    color: #cccccc !important;
}

label {
    font-size: 14px;
    font-weight: 300;
    margin-bottom: 0;
}

.align-right {
    float: right;
}

.text-align-right {
    text-align: right;
}

.align-left {
    float: left;
}

.align-center {
    text-align: center;
}

a.button, input.button, button.button {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background-color: #0C71AE;
    color: #fff;
    text-align: center;
    padding: 12px;
    font-size: 20px;
    border: none;
    margin-right: 10px;
    cursor: pointer;
}

    a.button:hover, input.button:hover, button.button:hover {
        background-color: #444;
        color: #fff;
    }

.button.save {
    background-color: #468C00;
}

.button.cancel {
    background-color: #888888;
}

textarea {
    display: block;
    width: 100%;
    min-height: 250px;
    /*max-width: 480px;*/
    padding: 6px 12px;
    font-size: 16px;
    line-height: 1.428571429;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.form-horizontal {
    margin-top: 40px;
    margin-bottom: 40px;
}

#loginForm .form-horizontal {
    margin-top: 0;
    margin-bottom: 0;
}

.form-horizontal .no-margins {
    margin-top: 0;
    margin-bottom: 0;
}

.table-header {
    background-color: #bbb;
}

tr.sub-header th {
    background-color: #ddd;
}

tr:hover {
    background-color: #eee;
}

tr.tr-new-action:hover {
    background-color: transparent !important;
}

tr.table-header:hover {
    background-color: #bbb;
}

.alert {
    margin-top: 2rem;
}

.form-text {
    font-size: 14px;
}

#accordion, #accordion1 {
    width: 100%;
}

    #accordion h5 span, #accordion1 h5 span {
        font-size: 16px;
        font-weight: bold;
        color: #888888;
    }

.clickable-card-container {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}

.clickable-card {
    margin: 20px;
    position: relative;
    background-color: var(--blue);
    display: inline-block;
    width: 300px;
    height: 215px;
}

.clickable-card-empty {
    margin: 20px;
    position: relative;
    background-color: var(--light-red);
    display: inline-block;
    width: 300px;
    height: 120px;
    padding: 30px 20px 0;
    text-align: center;
    color: var(--dark-blue)
}

.clickable-card a {
    display: block;
    width: 300px;
    height: 175px;
    text-align: center;
}

    .clickable-card a:hover {
        opacity: 0.5;
        text-decoration: none;
    }

    .clickable-card a img {
        height: 100px;
        margin: 25px auto;
    }

.clickable-card-text {
    position: absolute;
    display: block;
    width: 300px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    bottom: 40px;
    text-align: center;
}

.clickable-card-heading {
    position: relative;
    width: 300px;
    height: 70px;
    padding: 10px 20px;
    font-size: 16px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    color: #fff;
    display: block;
}

.clickable-card-subtext {
    font-size: 14px;
    color: #fff;
    text-align: center;
    position: relative;
    display: block;
    text-decoration: none;
    margin-bottom: 10px;
    padding: 0 10px;
}

.clickable-card-category {
    background-color: var(--light-blue);
    padding: 5px 10px;
    border-radius: 30px;
    font-size: 12px;
    margin-top: 20px;
    text-transform: uppercase;
}

.clickable-card-instructions {
    position: absolute;
    display: block;
    width: 300px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: #fff;
    text-decoration: none;
    text-transform: none;
    bottom: 0;
    text-align: center;
    background: rgb(255,255,255,0.5);
}

/* 
    ====================================================================================================================================================
    Reports 
    ====================================================================================================================================================
*/
table.report-table {
    width: 100%;
}

.report-table th, .report-table td {
    font-size: 14px;
    padding: 4px;
}

.report-table tr {
    border-bottom: solid 1px #c2cfe7;
}

    .report-table tr:hover {
        background-color: rgba(0, 0, 0, .075) !important;
    }

.report-table thead tr, .report-table thead tr:hover {
    background-color: #bbb;
}

.report-table tbody tr:nth-child(odd) {
    background-color: var(--alternating-blue);
}



.report-table td.highlight-line {
    padding: 4px;
    border: solid 4px #ccc;
    background-color: #0C71AE;
    color: #fff;
    font-weight: 400;
}

.report-table td.normal-line {
    padding: 4px;
    border: solid 4px #ccc;
    background-color: #fff;
}

    .report-table td.normal-line.align-center {
        text-align: center;
    }

.report-table td.caption.normal-line {
    background-color: #ccc;
}

    .report-table td.caption.normal-line.selected {
        color: #fff;
        background-color: #000;
    }

.report-table th.normal-line {
    padding: 4px;
    border: solid 4px #ccc;
    background-color: #888888;
    color: #fff;
    font-weight: 400;
}

tr.deleted {
    background-color: var(--light-red) !important;
}

tr.updated {
    background-color: var(--light-green) !important;
}

.width-100 {
    width: 100px;
}

.service-A span.badge {
    background-color: #555555;
    color: #fff;
    font-size: 90%;
    font-weight: normal;
}

.service-I span.badge {
    background-color: #999;
    color: #fff;
    font-size: 90%;
    font-weight: normal;
}

.service-N span.badge {
    background-color: #bbbbbb;
    color: #fff;
    font-size: 90%;
    font-weight: normal;
}

.service-P span.badge {
    background-color: #00698C;
    color: #fff;
    font-size: 90%;
    font-weight: normal;
}

span.status-active {
    background: #336633;
    display: inline-block;
    width: 20px;
    height: 25px;
    margin-right: 10px;
    border-radius: 10px 0 0 10px;
    margin-bottom: -7px;
}

span.status-inactive {
    background: #999999;
    display: inline-block;
    width: 20px;
    height: 25px;
    margin-right: 10px;
    border-radius: 10px 0 0 10px;
    margin-bottom: -7px;
}

.indicator-complete, .indicator-inprogress, .indicator-notstarted {
    padding: 4px;
    border: solid 4px #ccc;
}

#spinner {
    width: 100%;
    background-color: #fff;
    height: 300px;
    border: solid 4px #ccc;
}

.spinner {
    position: absolute;
    left: 45%;
    top: 40%;
    height: 60px;
    width: 60px;
    margin: 0px auto;
    -webkit-animation: rotation .6s infinite linear;
    -moz-animation: rotation .6s infinite linear;
    -o-animation: rotation .6s infinite linear;
    animation: rotation .6s infinite linear;
    border-left: 6px solid rgba(0,174,239,.15);
    border-right: 6px solid rgba(0,174,239,.15);
    border-bottom: 6px solid rgba(0,174,239,.15);
    border-top: 6px solid rgba(0,174,239,.8);
    border-radius: 100%;
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(359deg);
    }
}

@-moz-keyframes rotation {
    from {
        -moz-transform: rotate(0deg);
    }

    to {
        -moz-transform: rotate(359deg);
    }
}

@-o-keyframes rotation {
    from {
        -o-transform: rotate(0deg);
    }

    to {
        -o-transform: rotate(359deg);
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}
/* 
    ====================================================================================================================================================
    Typography 
    ====================================================================================================================================================
*/
h1, h2, h3, h4, h5, h6 {
    font-weight: 100;
    font-family: Roboto, sans-serif;
}

    h2 button.accordion-button {
        font-size: 20px;
        font-weight: 100;
    }

.intro-text {
    font-size: 30px;
    font-weight: 100;
    line-height: 1.4;
}



.text-danger {
    font-size: 14px;
}

.form-horizontal .form-label {
    padding-top: 0;
}
/*
    ====================================================================================================================================================
    Navigation Bar
    ====================================================================================================================================================
*/
.navbar-brand {
    display: inline-block;
    width: 180px;
    height: 40px;
    background: url("../Content/Images/logo.png") no-repeat;
    direction: ltr;
    text-indent: -9999px; /* hides the link text */
    margin-left: 0;
    margin-right: 20px;
    margin-top: 5px;
}

.navbar {
    background-color: var(--dark-blue);
    border-color: transparent;
    border-bottom: none;
}



.navbar-nav a, .navbar-dark .navbar-nav .nav-link {
    font-size: 16px;
    color: #ffffff;
    padding-top: 5px;
}

    .navbar-nav a:hover, .navbar-dark .navbar-nav .nav-link:hover {
        opacity: 1;
        text-decoration: none;
        color: #fff;
    }

.navbar-nav .dropdown-menu {
    padding: 20px;
    width: 100%;
    min-width: 300px;
}

    .navbar-nav .dropdown-item, .navbar-nav .dropdown-menu a {
        color: #212529;
    }

        .navbar-nav .dropdown-item.active, .navbar-nav .dropdown-item:active {
            color: #fff;
            background-color: var(--dark-blue);
        }


li.nav-item > a {
    color: #fff;
    font-size: 18px;
    padding: 0 20px;
}

li.nav-item:last-child > a {
    padding-right: 0;
}

li.nav-item > a:hover {
    text-decoration: none;
    opacity: 0.5;
}
/*
    ====================================================================================================================================================
    Tabs Bar
    ====================================================================================================================================================
*/
.nav-tabs {
    border-bottom: none;
}

    .nav-tabs .nav-item {
        margin-bottom: 0;
    }

    .nav-tabs .nav-link {
        margin-top: 5px;
        margin-left: 10px;
        text-transform: uppercase;
        font-size: 16px;
        color: #ccc;
    }

        .nav-tabs .nav-link.active {
            background-color: #eeeeee;
            border-color: transparent;
        }




/*
    ====================================================================================================================================================
    Landing Page 
    ====================================================================================================================================================
*/
#hero-section {
    background-color: rgba(128, 158, 208, 0.5);
}

.hero-container {
    padding: 72px 0;
    color: #ffffff;
    text-align: center;
}

    .hero-container h1 {
        font-weight: 400;
        font-size: 45px;
        color: var(--darkest-blue);
    }

@media screen and (max-width: 500px) {
    .hero-container {
        padding: 72px 30px;
    }

        .hero-container h1 {
            font-size: 30px;
        }
}

.hero-container .intro-text {
    font-weight: 300;
    line-height: 1.2;
    font-size: 28px;
    color: var(--dark-blue);
}

.hero-container #scroll-down {
    margin: 40px;
    display: inline-block;
    outline: hidden;
    cursor: pointer;
    text-decoration: none;
}

    .hero-container #scroll-down:hover {
        opacity: 0.8;
    }

    .hero-container #scroll-down i {
        color: #ffffff;
        font-size: 40px;
    }

div.option-boxes {
    position: relative;
    padding: 20px;
}

    div.option-boxes div.header h3 {
        padding-left: 75px;
    }

    div.option-boxes div.icon {
        position: absolute;
        top: 5px;
        left: 0px;
    }

@media screen and (max-width: 500px) {
    div.option-boxes div.icon {
        top: 8px;
        left: 0;
    }

        div.option-boxes div.icon img {
            width: 90px;
        }

    div.option-boxes div.display-container {
        border-top-left-radius: 50px;
    }

    div.option-boxes div.header {
        border-radius: 50px 0 0 50px;
    }
}

div.option-boxes div.content {
    min-height: 300px;
}

/* 
    ====================================================================================================================================================
    Dashboard Page 
    ====================================================================================================================================================
*/
a.navigation-block {
    display: inline-block;
    width: 100px;
    height: 100px;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    font-size: 12px;
}

    a.navigation-block:hover {
        opacity: 0.8;
        text-decoration: none;
    }

    a.navigation-block span.icon {
        display: inline-block;
        width: 64px;
        height: 64px;
        padding-top: 10px;
        margin-bottom: 5px;
    }
/* 
    ====================================================================================================================================================
    Landing Page - Training Section 
    ====================================================================================================================================================
*/

#training-section {
    background-color: rgba(200, 215, 238, 0.78);
}

    #training-section .container {
        padding: 60px 15px 20px;
    }

        #training-section .container h2 {
            margin-bottom: 40px;
        }

.training-card {
    display: inline-block;
    width: 100%;
    height: 170px;
    background: var(--lightest-blue);
    margin: 0 20px 20px 0;
    min-width: 250px;
    max-width: 350px;
}

    .training-card .body-content .training-card-module {
        font-size: 20px;
        font-weight: 400;
        line-height: 40px;
    }

    .training-card .body-content .training-card-details {
        font-size: 15px;
    }

@media screen and (max-width: 500px) {
    .training-card {
        margin-right: 0;
        max-width: 100%;
        width: 100%;
        height: 120px;
    }
}

.training-card .header, div.display-container .training-card div.header {
    background-color: var(--dark-blue);
    color: #ffffff;
    font-weight: 400;
    text-align: center;
    line-height: 40px;
    font-size: 25px;
    padding: 0;
}

.training-card .body-content a {
    float: right;
    margin-right: 0;
}

/* Reset styling if Training used in display-container */

.display-container #training-section {
    background-color: transparent;
    padding: 0;
}
/* 
    ====================================================================================================================================================
    Administration Section 
    ==================================================================================================================================================== 
*/
.card-container {
    display: inline-block;
    width: 100%;
    background-color: #cccccc;
    height: 170px;
    position: relative;
    margin-top: 20px;
}

    .card-container.with-service-status {
        height: 190px;
    }

.card-row-container {
    display: inline-block;
    width: 100%;
    background-color: #cccccc;
    height: 80px;
    position: relative;
    margin-top: 10px;
    margin-bottom: 20px;
}

.card-status-ind {
    width: 15px;
    height: 170px;
    float: left;
}

    .card-status-ind.active {
        background-color: #336633;
    }

    .card-status-ind.inactive {
        background-color: #666666;
    }

    .card-status-ind.overdue, label.btn.btn-secondary.OVERDUE {
        background-color: #b20000;
    }

    .card-status-ind.incomplete, label.btn.btn-secondary.DUE {
        background-color: #aaaaaa;
    }

    .card-status-ind.inprogress, label.btn.btn-secondary.INPROGRESS {
        background-color: #d96d00;
    }

    .card-status-ind.complete, label.btn.btn-secondary.DONE {
        background-color: #698c00;
    }

label.btn.btn-secondary {
    border: solid 3px transparent;
}

    label.btn.btn-secondary.active {
        border: solid 3px #555;
    }

.card-service-status-ind {
    width: 100%;
    height: 20px;
    float: left;
    font-size: 12px;
    line-height: 20px;
    padding-left: 20px;
    color: #ffffff;
}

    .card-service-status-ind.active {
        background-color: #555555;
    }

    .card-service-status-ind.inactive {
        background-color: #999;
    }

    .card-service-status-ind.non-service {
        background-color: #bbbbbb;
    }

    .card-service-status-ind.pending {
        background-color: #00698C;
    }

.card-content {
    width: calc(100% - 15px);
    height: 170px;
    display: flex;
    flex-direction: column;
}

.card-category {
    background-color: #bbbbbb;
    font-size: 14px;
    font-weight: 300;
    text-transform: capitalize;
    line-height: 30px;
    height: 30px;
    padding-left: 10px;
    width: calc(100% - 100px);
}

.card-category-full {
    background-color: #bbbbbb;
    font-size: 14px;
    font-weight: 300;
    text-transform: capitalize;
    line-height: 30px;
    height: 30px;
    padding-left: 10px;
    width: 100%;
}

.card-id {
    background-color: #999999;
    font-size: 16px;
    color: #ffffff;
    text-align: center;
    height: 30px;
    line-height: 30px;
    text-transform: uppercase;
    width: 100px;
}

.card-heading {
    line-height: 40px;
    font-size: 18px;
    font-weight: 400;
    padding-left: 10px;
    position: relative;
}



.card-sub-heading {
    line-height: 40px;
    font-size: 14px;
    font-weight: 400;
}

.sales-call-card, .service-card {
    position: absolute;
    right: 0px;
    top: 0px;
    color: #00698C;
    background-color: #fff;
    padding: 5px 15px;
    border-radius: 0 0 0 10px;
}

.sales-call-card {
    color: #62a143;
}

.service-card {
    color: #0085b2;
}

.card-info {
    font-weight: 300;
    font-size: 13px;
    padding: 0 10px !important;
    line-height: 1.5;
}

.card-logo {
    width: 100px;
    height: 180px;
    vertical-align: middle;
    padding: 20px 5px;
    text-align: center;
}

    .card-logo img {
        width: 80px;
        padding: 10px;
    }

    .card-logo span {
        text-align: center;
        width: 80px;
        display: inline-block;
        font-weight: 400;
    }

.card-logo-container {
    width: 160px;
    height: 100px;
    padding: 10px;
    background-color: #fff;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    border: solid 4px #ccc;
}

    .card-logo-container img {
        max-width: 100%;
    }

.card-details {
    display: inline-block;
    width: 200px;
    padding: 10px 0 0 10px !important;
}

    .card-details .caption {
        font-size: 12px;
        font-weight: 200;
    }

    .card-details p.card-text {
        margin-bottom: 10px;
        font-weight: 500;
    }

label.card-label {
    width: 100%;
    font-size: 12px;
    font-weight: 300;
    color: #666;
}

.card-buttons {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    position: absolute;
    bottom: -5px;
    right: -22px;
    align-items: flex-end;
}

a.card-button, button.card-button {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    color: #fff;
    text-align: center;
    padding: 8px;
    font-size: 20px;
    border: none;
    margin-right: 5px;
    cursor: pointer;
}

    a.card-button.large {
        width: 60px;
        height: 60px;
    }

    a.card-button.edit, button.card-button.edit {
        background-color: var(--yellow);
    }

    a.card-button.delete, button.card-button.delete {
        background-color: var(--red);
    }

    a.card-button.preview {
        background-color: #0C71AE;
    }

    a.card-button.display {
        background-color: var(--blue);
    }

        a.card-button.edit:hover, a.card-button.preview:hover, a.card-button.delete:hover, button.card-button.delete:hover, a.card-button.display:hover, button.card-button.edit:hover {
            opacity: 0.8;
            background-color: #000;
        }



    a.card-button.new {
        font-size: 60px;
        display: inline-block;
        width: 100%;
        line-height: 160px;
        height: 170px;
        opacity: 0.7;
    }

        a.card-button.new:hover {
            opacity: 0.4;
        }

button.table-button {
    display: inline-block;
    width: 100%;
    height: 80px;
    margin-top: 10px;
    margin-bottom: 20px;
    background-color: #cccccc;
    border: none;
    color: #ffffff !important;
    cursor: pointer;
}

    button.table-button:hover {
        opacity: 0.8;
    }

a.card-button.narrow {
    font-size: 20px;
    display: inline-block;
    width: 100%;
    line-height: 45px;
    height: 60px;
    opacity: 0.7;
}

    a.card-button.narrow:hover {
        text-decoration: none;
        background-color: #000;
    }

form.delete-form {
    display: inline-block;
}

.card-row-container a.card-button.new {
    font-size: 60px;
    display: inline-block;
    width: 100%;
    line-height: 60px;
    height: 80px;
    opacity: 0.7;
}

    .card-row-container a.card-button.new:hover {
        opacity: 0.4;
    }

div.input-form {
    background-color: #00000020;
    padding: 0 20px 20px;
}

/* Service Specific Styling */
table.display-table {
    border: 2px solid #cccccc;
    width: 100%;
    background-color: #fff;
}

    table.display-table th {
        padding: 4px;
        font-size: 18px;
        background-color: #888888;
        color: #fff;
        font-weight: 300;
    }

    table.display-table td {
        padding: 4px;
        font-size: 16px;
        border: solid 1px #ccc;
    }

        table.display-table td.label {
            font-size: 14px;
            text-align: right;
            width: 150px;
            background-color: #eeeeee;
        }

.operation-card {
    display: inline-block;
    width: 320px;
    height: 170px;
    background-color: #ffffff;
    padding: 20px;
    position: relative;
}

    .operation-card .operation-header {
        display: table-cell;
        width: 200px;
        text-align: center;
        height: 60px;
        vertical-align: middle;
        font-size: 18px;
    }

    .operation-card.bg-color-red .operation-header, .operation-card.bg-color-green .operation-header, .operation-card.bg-color-grey .operation-header {
        color: #ffffff;
    }

    .operation-card .operation-menu {
        position: absolute;
        top: 0;
        left: 0;
    }

        .operation-card .operation-menu:hover {
            background: #000;
            color: #fff;
        }

        .operation-card .operation-menu li.nav-item > a {
            padding: 5px 10px;
            color: #888888;
        }

    .operation-card.bg-color-green .operation-menu li.nav-item > a, .operation-card.bg-color-grey .operation-menu li.nav-item > a, .operation-card.bg-color-red .operation-menu li.nav-item > a {
        padding: 5px 10px;
        color: #fff;
    }

    .operation-card .operation-menu a.dropdown-item {
        color: #000000;
    }

    .operation-card .operation-actions {
        text-align: center;
        display: block;
        width: 200px;
    }

        .operation-card .operation-actions button.operation-button, button.operation-button {
            width: 60px;
            height: 60px;
            text-align: center;
            cursor: pointer;
        }

            .operation-card .operation-actions button.operation-button.active, button.operation-button.active {
                background-color: #000000;
                color: #ffffff;
            }

    .operation-card.display-only {
        width: 300px;
    }

        .operation-card.display-only .operation-header {
            width: 260px;
        }

        .operation-card.display-only .operation-actions {
            text-align: center;
            display: block;
            width: 260px;
        }

            .operation-card.display-only .operation-actions button.operation-button {
                cursor: default;
            }

.operation-photos {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 80px;
    height: 170px;
    background: #fff;
}

.operation-photos-preservice, .operation-photos-postservice {
    display: block;
    width: 60px;
    background: #fff;
    margin: auto;
    height: 70px;
    margin-top: 10px;
    border: solid 1px #888888;
    border-radius: 5px;
    cursor: pointer;
}

    .operation-photos-preservice:hover, .operation-photos-postservice:hover {
        background: #ccc;
    }

.operation-photos-heading {
    font-size: 12px;
    text-align: center;
}

.bg-color-green > div.operation-photos-heading, .bg-color-red > div.operation-photos-heading {
    color: #fff;
}

.photos-optional.bg-color-red {
    background-color: #888888;
}

.operation-photos-icon {
    display: block;
    width: 60px;
    height: 60px;
    text-align: center;
}

.bg-color-green > div.operation-photos-icon, .bg-color-red > div.operation-photos-icon {
    color: #fff;
}

.operation-photos-count {
    background-color: #000000;
    font-size: 10px;
    position: absolute;
    border-radius: 10px;
    top: -5px;
    right: -5px;
    display: block;
    width: 20px;
    height: 20px;
    color: var(--light-text);
    line-height: 20px;
    text-align: center;
}

.photo-container {
    padding: 10px;
    border: solid 1px #888888;
    background-color: #cccccc;
    display: block;
    width: calc(256px + 20px);
    height: calc(192px + 40px);
    position: relative;
    margin-bottom: 10px;
}

    .photo-container.primary {
        border: solid 3px var(--dark-blue);
        background-color: var(--light-blue);
    }

    .photo-container a img {
        max-width: 256px;
        max-height: 192px;
    }

    .photo-container .card-button.preview {
        position: absolute;
        right: 45px;
        bottom: 5px;
    }

    .photo-container .card-button.delete {
        position: absolute;
        right: 0;
        bottom: 5px;
    }

.photo-container-thumbnail {
    padding: 5px;
    border: solid 1px #888888;
    background-color: #cccccc;
    display: inline-block;
    width: calc(128px + 15px);
    height: calc(96px + 15px);
    position: relative;
    margin-bottom: 5px;
}

    .photo-container-thumbnail.primary {
        border: solid 3px var(--dark-blue);
        background-color: var(--light-blue);
    }

    .photo-container-thumbnail a img {
        max-width: 128px;
        max-height: 96px;
    }

.operation-comments {
    display: inline-block;
    margin-bottom: 20px;
    background-color: #ccc;
    width: 320px;
    vertical-align: top;
}

    .operation-comments .comments {
        font-size: 14px;
        line-height: 1;
        padding: 5px;
    }

    .operation-comments.display-only {
        width: 300px;
    }

.operation-photos-preservice, .operation-photos-postservice {
    position: relative;
}

    .operation-photos-preservice.photos-hidden, .operation-photos-postservice.photos-hidden {
        display: none;
    }

/* Collapse Panels */
#accordion .card-header, #accordion1 .card-header {
    flex-direction: row;
    display: inline-flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
}

    #accordion .card-header .content, #accordion1 .card-header .content {
        padding: 0;
        flex: 1 1 auto;
    }

        #accordion .card-header .content h5, #accordion1 .card-header .content h5 {
            margin-bottom: 0;
            line-height: 46px;
        }

    #accordion .card-header .content-button, #accordion1 .card-header .content-button {
        flex: 0 1 60px;
    }

/* Service Schedule */
.monthContainer {
    display: inline-block;
    width: 100%;
    height: 120px;
    background-color: #ffffff;
    border: solid 1px #cccccc;
    margin-bottom: 20px;
}

.monthHeader {
    display: inline-block;
    line-height: 40px;
    width: 100%;
    background: #808080;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
}

.monthContent .col {
    text-align: center;
}

.edit-block-large {
    display: inline-block;
    width: 130px;
    height: 100px;
    text-align: center;
}

    .edit-block-large:hover {
        background-color: #000;
    }

    .edit-block-large i {
        color: #ffffff;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .edit-block-large span {
        text-decoration: none;
        color: #ffffff;
        font-size: 14px;
        display: inline-block;
        width: 120px;
        height: auto;
        line-height: 1.1;
    }

.edit-block {
    display: inline-block;
    width: 74px;
    height: 74px;
    text-align: center;
}

    .edit-block .icon {
        display: inline-block;
        width: 74px;
        height: 40px;
        margin-top: 5px;
    }

        .edit-block .icon i {
            color: #ffffff;
        }

    .edit-block span {
        text-decoration: none;
        color: #ffffff;
        font-size: 14px;
        display: inline-block;
        width: 74px;
        height: auto;
    }

    .edit-block.bg-color-blue:hover {
        background-color: #000;
    }

.google-map-block {
    text-align: center;
    vertical-align: middle;
    margin-top: 20px;
}

/*
    ====================================================================================================================================================
    Training Section 
    ====================================================================================================================================================
*/
section.training-container {
    margin: 40px auto;
    background: #ffffff;
    max-width: 970px;
    min-width: 970px;
    position: relative;
}

    section.training-container .row {
        margin-left: 0;
        margin-right: 0;
    }

.training-container a, .training-container a:hover {
    text-decoration: none;
}

.training-header {
    background: #00698C;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
}

#TrainingHeader {
    font-size: 52px;
    color: #ffffff;
    font-weight: 300;
    margin: 0;
    padding: 0;
    line-height: 70px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.training-title, .training-close-button {
    flex-grow: 0;
    width: auto;
}

    .training-close-button a {
        font-size: 30px;
        color: #fff;
    }

        .training-close-button a:hover {
            opacity: 0.5;
        }

.training-nav {
    height: 50px;
    padding: 12px 25px;
    background: #555;
    text-align: center;
}

.training-content {
    background: #ddd;
}

    .training-content h2 {
        font-size: 30px;
        font-weight: 400;
        color: #000000;
        margin-bottom: 20px;
    }

    .training-content p {
        font-size: 20px;
        color: #525252;
        font-weight: 300;
    }

    .training-content .col-training-content {
        float: left;
        width: 100%;
        max-width: 660px;
        min-width: 350px;
        padding: 15px 25px 0;
    }

        .training-content .col-training-content tr:hover {
            background-color: inherit;
        }

        .training-content .col-training-content td {
            vertical-align: top;
            padding: 2px;
        }

            .training-content .col-training-content td p {
                font-size: 18px;
                padding: 0;
                margin: 0;
            }

        .training-content .col-training-content table.full-size td {
            vertical-align: middle;
            padding: 5px;
        }

            .training-content .col-training-content table.full-size td:first-child {
                vertical-align: top;
                padding: 5px;
            }

            .training-content .col-training-content table.full-size td p {
                font-size: 20px;
                padding: 0;
                margin: 0;
            }

        .training-content .col-training-content .inline-icon {
            float: left;
            margin-right: 20px;
            margin-bottom: 20px;
        }

    .training-content .col-training-content-full {
        float: left;
        width: 100%;
        max-width: 970px;
        min-width: 350px;
        padding: 0 25px;
    }

        .training-content .col-training-content-full img.full-width-slide, td img.full-width-slide {
            width: 100%;
            margin-bottom: 25px;
        }

    .training-content .col-training-support {
        background: url("../Content/Images/training-more-container.png") no-repeat top right #ddd;
        float: right;
        width: 100%;
        max-width: 309px;
        min-height: 470px;
        text-align: right;
        padding: 25px 25px 25px 0;
        display: table;
    }

        .training-content .col-training-support .col-training-support-content {
            display: table-cell;
            vertical-align: middle;
        }

            .training-content .col-training-support .col-training-support-content p {
                color: #fff;
                text-align: right;
            }

            .training-content .col-training-support .col-training-support-content img.stretch-image {
                margin: 130px 25px 200px 0;
            }

.training-question-container {
    display: flex;
    margin: 0;
    padding: 0;
}

    .training-question-container #alert-message {
        bottom: 40px;
        position: absolute;
        right: 80px;
    }

        .training-question-container #alert-message button {
            margin-left: 20px;
        }

.training-question {
    display: table;
    min-height: 100px;
    background-color: #bbb;
    float: left;
    width: 420px;
    color: #000;
    font-size: 22px;
    font-weight: 300;
    padding-left: 20px;
}

    .training-question .training-question-text {
        display: table-cell;
        vertical-align: middle;
    }

.fas.fa-check.list-icon, .fas.fa-times.list-icon {
    font-size: 30px;
    color: #ccc;
    margin-right: 10px;
    display: inline-block;
    width: 30px;
}

i.fas.fa-check.list-icon-circle {
    font-size: 30px;
    color: #ccc;
    margin-right: 10px;
    display: inline-block;
    padding: 10px;
    background-color: #00698C;
    border-radius: 50%;
}

.notification-icon {
    top: -20px;
    position: absolute;
    right: 0;
    z-index: 1;
}

    .notification-icon a {
        color: #777777;
    }

        .notification-icon a:hover {
            color: #333;
        }

.training-anwers {
    display: table;
    min-height: 100px;
    background-color: #bbb;
    width: 450px;
    float: left;
    padding-right: 40px;
}

    .training-anwers .training-answers-text {
        text-align: right;
        display: table-cell;
        vertical-align: middle;
    }

        .training-anwers .training-answers-text label {
            font-size: 16px;
            vertical-align: top;
            margin-top: 10px;
            margin-left: 0;
        }

.training-answer-check {
    display: inline-block;
    width: 100px;
    min-height: 100px;
    background-color: #444444;
}

    .training-answer-check button.check-answer, .training-answer-check button.check-answer:active, .training-answer-check button.check-answer:focus, .training-answer-check button.check-answer:visited {
        width: 100px;
        height: 100px;
        background-color: #333333;
        color: #ffffff !important;
        border: none;
    }

        .training-answer-check button.check-answer:hover {
            background-color: #111111;
        }

        .training-answer-check button.check-answer.incorrect-answer:hover {
            background-color: #8C0000;
        }

        .training-answer-check button.check-answer.correct-answer {
            background-color: #698C00;
        }

            .training-answer-check button.check-answer.correct-answer[disabled="disabled"] {
                background-color: #698C00;
                cursor: default;
            }

button.check-answer.incorrect-answer {
    background-color: #8C0000;
}

.training-answer-check button.check-answer div {
    font-size: 11px;
    line-height: 1;
    text-transform: uppercase;
    padding-bottom: 10px;
}

.training-answer-check button.check-answer i {
    font-size: 40px;
}

.training-actionbar {
    height: 87px;
    background: #555555;
    font-size: 28px;
    color: #ffffff;
    font-weight: 300;
    padding: 0 30px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

    .training-actionbar .dock-left {
        flex-grow: 0;
        width: auto;
    }

    .training-actionbar .dock-right {
        flex-grow: 0;
        width: auto;
    }

    .training-actionbar a {
        color: #ffffff;
    }

        .training-actionbar a:hover {
            opacity: 0.8;
        }

    .training-actionbar .finish-button {
        display: inline-block;
        line-height: 87px;
    }

a.pager-button, span.pager-button {
    display: inline-block;
    width: 40px;
    font-size: 18px;
    font-weight: 400;
    color: #555555;
    background-color: #888888;
    border-radius: 20px;
    text-align: center;
    margin-right: 8px;
}

    a.pager-button:last-child, span.pager-button:last-child {
        margin-right: 0;
    }

.pager-button.active {
    background-color: #fff;
}

a.pager-button.done, span.pager-button.done {
    background-color: #698C00;
}

a.pager-button:hover {
    opacity: 0.5;
}



.radio {
    -webkit-appearance: button;
    -moz-appearance: button;
    /*appearance: button;*/
    border: 4px solid #545454;
    background: #545454;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    max-width: 45px;
    display: inline-block;
    margin-left: 10px;
    margin-right: 5px;
    cursor: pointer;
}

    .radio:checked {
        border: 8px solid #545454;
        background: #ccc;
    }

    .radio:hover {
        border-color: #222222;
    }

    .radio:focus {
        outline: none;
    }

.check {
    width: 40px;
    height: 40px;
    display: inline-block;
    border-radius: 10px;
    margin-top: 20px;
    margin-right: 5px;
    cursor: pointer;
}

.small-check {
    width: 40px;
    height: 40px;
    display: inline-block;
    border-radius: 10px;
    cursor: pointer;
}

.smallest-check {
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 5px;
    cursor: pointer;
    min-height: 30px;
}

.schedule-checkbox.check {
    margin: 0;
}

.checkbox label {
    vertical-align: top;
    margin-top: 24px;
    line-height: 40px;
    font-size: 16px;
}

.service-week-container {
    font-size: 18px;
    padding: 5px 20px;
    border: solid 1px #ffffff70;
    border-radius: 5px;
    background: #ffffff50;
    margin-top: 5px;
    margin-bottom: 5px;
}
/* 
    ====================================================================================================================================================
    Colours 
    ====================================================================================================================================================
*/
.bg-color-green, .indicator-complete {
    background-color: #468C00;
}

.bg-color-teal {
    background-color: #00B2B2;
}

.bg-color-yellow {
    background-color: #D9A300;
}

.bg-color-grey, .indicator-notstarted {
    background-color: #888888;
}

.bg-color-blue {
    background-color: #0085B2;
}

.bg-color-purple {
    background-color: #46008C;
}

.bg-color-brown {
    background-color: #B25900;
}

.bg-color-orange, .indicator-inprogress {
    background-color: #d96d00;
}

.bg-color-lightgreen {
    background-color: #62a143;
}

.bg-color-red {
    background-color: #8c0000;
}

.overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000;
    bottom: 0;
    opacity: 0.6;
}

.spinner {
    position: absolute;
    left: 45%;
    top: 50%;
    height: 60px;
    width: 60px;
    margin: 0px auto;
    -webkit-animation: rotation .6s infinite linear;
    -moz-animation: rotation .6s infinite linear;
    -o-animation: rotation .6s infinite linear;
    animation: rotation .6s infinite linear;
    border-left: 6px solid rgba(0,174,239,.15);
    border-right: 6px solid rgba(0,174,239,.15);
    border-bottom: 6px solid rgba(0,174,239,.15);
    border-top: 6px solid rgba(0,174,239,.8);
    border-radius: 100%;
}

/* Calendar Input */
.gj-datepicker-bootstrap button[role=right-icon] {
    width: 2.5rem;
    position: absolute;
    right: 0;
    height: 100%;
}

.gj-datepicker.gj-datepicker-bootstrap.gj-unselectable.input-group.mb-3 {
    margin-bottom: 0 !important;
}
/* 
    ====================================================================================================================================================
    Media Queries 
    ====================================================================================================================================================
*/
@media (min-width: 992px) {
    section .training-container {
        margin-top: 15px;
    }

    .pager-spacer {
        display: none;
    }
}

@media screen and (max-width:1400px) {
    .body-content {
        padding-bottom: 80px;
    }
}

@media screen and (max-width: 768px) {
    .body-content {
        max-width: 768px;
    }

    section.training-container {
        max-width: 768px;
        min-width: 768px;
        margin-bottom: 0;
    }

    .pager-spacer {
        display: none;
    }

    .training-nav {
        padding: 12px 20px;
        font-size: 16px;
    }

    a.pager-button, span.pager-button {
        width: 30px;
    }

    .training-content {
        padding-top: 20px;
    }

        .training-content .col-training-content {
            width: 100%;
            max-width: 100%;
            padding-bottom: 20px;
        }

        .training-content .col-training-support {
            background: url(../Content/Images/alt-background-support.png) repeat 0 0 transparent;
            float: none;
            width: 100%;
            max-width: 100%;
            min-height: inherit;
            text-align: center;
            padding: 25px;
        }

            .training-content .col-training-support .col-training-support-content p {
                text-align: center;
                font-size: 22px;
            }

    .training-question {
        width: 100%;
        text-align: center;
    }

    .training-anwers {
        width: calc(100% - 100px);
    }

    p.mobile-display img {
        width: 100%;
    }

    .training-content .col-training-support .col-training-support-content img.stretch-image {
        margin: 0;
    }

    div.option-boxes div.content {
        min-height: inherit;
    }

    #navbarNavDropdown {
        margin-top: 40px;
        margin-bottom: 20px;
    }

    li.nav-item {
        padding-top: 20px;
        padding-bottom: 20px;
        border-top: solid 1px #aaa;
    }

    .navbar-toggler:focus, .navbar-toggler:hover {
        background-color: #999;
    }

    .col-md-7 {
        width: 100%;
        max-width: 100%;
        flex: none;
    }

    .training-card .body-content a {
        position: absolute;
        right: 20px;
        bottom: 25px;
    }

    footer {
        padding: 20px 0;
        position: relative;
    }

        footer .container .row > .col, footer .container .row > .col-5 {
            flex: none;
            width: 100%;
            max-width: 100%;
        }

        footer > .container > .row > .col.footer-links {
            position: absolute;
            width: 300px;
            right: 20px;
            max-width: 300px;
            top: 20px;
        }

            footer > .container > .row > .col.footer-links .col.text-align-right {
                text-align: inherit;
                padding: 10px 0;
                width: 50%;
            }
}

@media screen and (max-width: 500px) {
    .body-content {
        padding: 0;
    }

    div.display-container div.content {
        padding: 15px;
    }

    div.display-container .content-footer {
        padding: 20px 0;
    }

    .row {
        display: inline-block;
        width: 100%;
        margin: 0;
    }

        .row .col, .row .col-md-7 {
            margin: 0;
        }



    section.training-container {
        min-width: 350px;
        margin-bottom: 0;
    }

    .training-actionbar {
        display: flex;
    }

    .training-question-container {
        display: flex;
        flex-direction: column;
    }

    a.pager-button.done.mobile-hide, span.pager-button.mobile-hide, span.pager-spacer.mobile-hide {
        display: none;
    }

    .desktop-nav {
        margin: 0 auto;
    }

    div.display-container {
        margin-top: 15px;
        margin-bottom: 15px;
    }

    #TrainingHeader {
        font-size: 32px;
        line-height: 30px;
    }

    a.pager-button, span.pager-button {
        width: 40px;
        height: 30px;
        line-height: 30px;
        font-weight: 300;
        color: #000000;
        margin-right: 4px;
        font-size: 16px;
    }

    .pager-spacer {
        display: inline-block;
        color: #ccc;
        padding-left: 20px;
        padding-right: 20px;
    }

    i.fas.fa-check.list-icon-circle {
        font-size: 20px;
    }

    .training-content p {
        font-size: 18px;
    }

    .training-content .col-training-content {
        padding: 0 25px 25px;
    }

    .training-content .col-training-support {
        float: none;
        width: 100%;
        max-width: 100%;
        min-height: inherit;
        text-align: center;
        padding: 25px;
    }

        .training-content .col-training-support .col-training-support-content p {
            text-align: center;
            font-size: 20px;
        }

        .training-content .col-training-support .col-training-support-content img.stretch-image {
            margin: 0 auto;
        }

    div .training-question {
        width: 100%;
        min-height: inherit;
        padding: 20px;
    }

    .training-question .training-question-text {
        text-align: center;
    }

    .training-anwers {
        width: 100%;
        padding: 0 0 20px;
        min-height: inherit;
    }

        .training-anwers .training-answers-text {
            text-align: center;
        }

            .training-anwers .training-answers-text label {
                font-size: 16px;
                vertical-align: top;
                margin-top: 10px;
                margin-left: 0;
            }

    .training-answer-check, .training-answer-check button.check-answer, .training-answer-check button.check-answer:active, .training-answer-check button.check-answer:focus {
        width: 100%;
        color: #fff;
    }

    .training-question-container #alert-message {
        bottom: 76px;
        position: absolute;
        right: 10px;
        margin-left: 10px;
    }

    .training-actionbar {
        padding: 0 20px;
    }

    footer div.col-md-4 div.col-xs-6 {
        width: 100%;
        float: none;
        padding: 10px 0 0 0;
    }

        footer div.col-md-4 div.col-xs-6.text-align-right {
            text-align: left;
        }

    footer > .container > .row > .col.footer-links {
        position: absolute;
        width: 150px;
        right: 20px;
        max-width: 300px;
        top: 65px;
    }

    footer > .container > .row > .col-5.footer-links .col, footer > .container > .row > .col-5.footer-links .col-5 {
        width: 100%;
    }

    footer > .container > .row > .col-5.footer-links .text-center {
        text-align: left;
        padding: 10px 0;
        width: 100%;
    }

    footer > .container > .row > .col.footer-links .col.text-align-right {
        width: 100%;
    }
}

@media screen and (max-width: 400px) {
    #TrainingHeader {
        font-size: 28px;
        line-height: 30px;
    }

    .mobile-display {
        float: none;
    }

        .mobile-display img {
            max-width: 400px;
            width: 100%;
            margin: 20px auto;
        }

    a.pager-button, span.pager-button {
        width: 30px;
    }

    section.training-container {
        max-width: 100%;
        min-width: 100%;
        width: 100%;
    }
}

@media screen and (max-width: 360px) {
    .body-content, section.training-container {
        max-width: 360px;
    }
}

@media (min-width: 900px) {
    .modal-dialog {
        max-width: 900px;
        margin: 1.75rem auto;
    }
}