:root {
    --aba-background-color: #012240;
    --aba-dark-red-bg: #260101;
    --aba-orange-text: #f2b05e;
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    /*position: relative;*/
    /*min-height: 100%;*/
}

body {
    /*margin-bottom: 60px;*/
    /*padding-top: 60px;*/
    padding-bottom: 20px;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12pt !important;
}


/* Set padding to keep content from hitting the edges */
.body-content {
    padding-top: 10px;
    padding-left: 15px;
    padding-right: 15px;
}

/* 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: 280px;
}

table {
    color: antiquewhite !important;
}

hr {
    background-color: var(--aba-dark-red-bg) !important;
}

/*********************************** UI *****************************************/
.backgroundAdmin {
    background: url(/images/background-11.jpg) no-repeat center center fixed;
    background-size: cover;
}

.backgroundPublic {
    background: url(/images/backgroundPublic.jpg) no-repeat center center fixed;
    background-size: cover;
    background-color: black;
}

.backgroundGallery {
    background: url(/images/backgroundGallery.jpg) no-repeat center center fixed;
    background-size: cover;
}

.aba-main {
    background-color: #0e4073;
    color: #f2cf66;
    padding-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    color: antiquewhite;
    border-radius: 10px;
}

.aba-panel {
    color: #f2cf66;
    background-color: #0e4073;
    padding-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-radius: 7px;
}

.aba-footer {
    background-color: #ff922e;
    background-color: #591202;
    color: #a68B03;
    height: 30px;
}

.aba-shadow {
    box-shadow: 5px 5px 20px 10px rgba(0, 0, 0, 0.4);
}

.aba-container {
    background-color: transparent !important;
}

.aba-navbar {
    background-color: var(--aba-background-color) !important;
    border: 0px none transparent;
    height: 56px;
    z-index: 999;
    height: auto !important; /* Ensures the height adjusts to fit all the links */
    overflow: visible !important; /* Prevents clipping of the content */
}

.aba-navbar-admin {
    background-color: var(--aba-background-color) !important;
    border: 0px none transparent;
    z-index: 999;
    padding: 5px;
}

.aba-menu-background {
    background-color: var(--aba-background-color) !important;
    padding-left: 5px;
}

.aba-header-margin-top {
    margin-top: 4px !important;
}

.aba-launch-button {
    background-color: #01619e !important;
}

.aba-required {
    font-size: larger;
    color: red;
}

/************************ Bread Crumb ************************************/
.bread-crumb {
    margin: 10px 0 10px 0;
    padding: 3px 6px 3px 6px;
    background-color: #0e40aa;
    border-radius: 3px;
    font-size: small;
    font-weight: bold;
    border: 1px solid black;
    box-shadow: rgba(0,0,0,0.25) 2px 2px 3px 1px;
}

a.bread-crumb-link {
    color: #f2cf66;
    color: darkorange;
    text-decoration: none;
    cursor: pointer;
}

    a.bread-crumb-link:visited {
        color: #f2cf66;
        color: darkorange;
    }

    a.bread-crumb-link:current {
        color: #f2cf66;
    }

    a.bread-crumb-link:hover {
        color: #f2cf00;
        color: darkgoldenrod;
    }



/*********************************** Dashboard *************************************/
.aba-splash {
    /*background: url(/Content/Images/SplashPage.jpg) no-repeat center center fixed;*/
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.training-dashboard {
    background-color: #4d8bc8;
}

.comingSoon {
    background-color: #FFFFFF;
    background-color: #191E53;
    background-color: #01619e;
    color: maroon;
    color: white;
    font-size: 20pt;
    padding: 20px;
    border: 1px solid black;
    margin: 5px;
    text-align: center;
    font-weight: bold;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    opacity: 0.93;
    box-shadow: rgba(0,0,0,0.4) 3px 3px 3px 1px;
    border-radius: 2px 15px 2px 15px;
}

/*********************** File Browser ***************************/
.abaFileBrowserGalleryItem {
}

.abaFileBrowserGalleryFileItem {
    /*    background-color: lightgrey;
*/ /*    width: 10rem;
    height: 2rem;
*/
    font-size: 6.5pt;
    /*    padding: 1px;
    border: 1px solid black;
    margin: 1px;
*/
    cursor: pointer;
    /*    vertical-align: middle;
    text-align: center;
*/
}

/***********************************************************/
.dragDropItem {
    cursor: move;
}

.dragDropContainer {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
}

    .dragDropContainer.over {
        border: 3px dotted #666;
    }

.slideInfo {
    font-size: larger;
}

.moduleIncomplete {
    list-style-type: square;
}

.moduleComplete {
    list-style-type: circle;
}

.aba-card {
    width: 10.5rem;
    height: 11rem;
    margin: 5px;
    box-shadow: rgba(0,0,0,0.4) 2px 2px 3px 3px;
    background-color: #f2dea2;
    background-color: #f2e9ce;
}

    .aba-card:hover {
        top: 1px;
        left: 1px;
        box-shadow: rgba(0,0,0,0.4) 1px 1px 2px 2px;
    }

.aba-card-font {
    font-size: medium;
    font-weight: bold !important;
}

.aba-card-header {
    background-color: var(--aba-dark-red-bg) !important;
    color: var(--aba-orange-text) !important;
}

.aba-card-button {
    width: 150px;
    height: 38px;
    background-color: var(--aba-dark-red-bg) !important;
    color: var(--aba-orange-text) !important;
    border: 1px solid white;
}


.aba-report-card {
    width: 14rem;
    margin: 7px;
    box-shadow: rgba(0,0,0,0.4) 2px 2px 3px 3px;
}

    .aba-report-card:hover {
        top: 1px;
        left: 1px;
        box-shadow: rgba(0,0,0,0.4) 1px 1px 2px 2px;
    }


.aba-record {
    border: 1px solid black;
    padding-left: 10px;
    background-color: antiquewhite;
    color: black;
    margin: 10px 0 0 0;
    border-radius: 3px;
}

.aba-button {
    width: 7rem;
}

.aba-button-small {
    width: 5rem;
}

.aba-tiny-font {
    font-size: 6pt;
}

.aba-small-font {
    font-size: 7pt;
}

.aba-medium-font {
    font-size: 9pt;
}

.aba-large-font {
    font-size: 12pt;
}

.aba-menu-button {
    width: 25rem;
    height: 3rem;
}

.aba-page-header-row {
    background-color: var(--aba-dark-red-bg) !important;
    color: var(--aba-orange-text) !important;
    padding-top: 2px;
    border-radius: 5px;
}

.aba-page-header-left {
    background-color: var(--aba-dark-red-bg) !important;
    color: var(--aba-orange-text) !important;
    padding-top: 2px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.aba-page-header {
    background-color: var(--aba-dark-red-bg) !important;
    color: var(--aba-orange-text) !important;
    padding-top: 2px;
}

.aba-page-header-right {
    background-color: var(--aba-dark-red-bg) !important;
    color: var(--aba-orange-text) !important;
    padding-top: 2px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.show-just-mine {
    /*border: 1px solid white;*/
    display: inline-block;
    background-color: #007bff;
    color: #f8f9fa;
    border-radius: 3px;
    white-space: nowrap;
    width: 9rem;
    height: 39px;
    padding-right: 6px;
    /*padding-left: 8px;*/
}

.aba-form-label {
    font-weight: 400;
}

.aba-detail-label {
    color: var(--aba-orange-text) !important;
    font-weight: bold;
}

.aba-form-control {
    max-width: inherit;
    background-color: antiquewhite;
}

.aba-search-box {
    max-width: 8rem;
    background-color: antiquewhite;
}


.aba-form-image {
    max-width: 240px;
    max-height: 240px;
}

.aba-row-clickable {
    cursor: pointer;
}

    .aba-row-clickable:hover {
        background-color: var(--aba-dark-red-bg) !important;
    }

.aba-row-highlight {
    cursor: default;
}

    .aba-row-highlight:hover {
        background-color: var(--aba-dark-red-bg) !important;
    }

.aba-row-not-owned {
    /*background-color: #3e4073 !important;*/
    background-color: #705000 !important;
    /*color: black !important;*/
    /*background-color: transparent !important;*/
}

.aba-row-ownit {
    /*background-color: #3e4073 !important;*/
    /*background-color: #f29e18 !important;*/
    /*color: black !important;*/
    /*background-color: transparent !important;*/
}

.aba-row-not-ownit {
    /*background-color: #3e4073 !important;*/
    /*background-color: #f29e18 !important;*/
    /*color: black !important;*/
    /*background-color: transparent !important;*/
}

.aba-overlay-icon {
    position: absolute;
    display: block;
    top: 0;
    right: 15px;
    width: 1.8em;
    height: 1.8em;
    border: 1px solid black;
    background-color: white;
    padding-top: 2px;
    padding-left: 2px;
    box-shadow: rgba(0,0,0,0.3) 1px 1px 2px 2px;
    cursor: pointer;
}

.aba-overlay-toolbar {
    position: absolute;
    display: block;
    top: -10px;
    right: -5px;
    /*    width: 4em;
    height: 1.8em;*/
    border: 1px solid black;
    background-color: white;
    padding-top: 2px;
    padding-left: 2px;
    box-shadow: rgba(0,0,0,0.3) 1px 1px 2px 2px;
}

.aba-checkbox-mine {
    width: 1.2rem;
    height: 1.2rem;
    cursor: pointer;
}

.aba-checkbox {
    width: 1.6rem;
    height: 1.6rem;
    cursor: pointer;
}

.aba-checkbox-label {
    cursor: pointer;
    font-weight: 400;
}

.aba-radio-button {
    width: 1.4rem;
    height: 1.4rem;
    cursor: pointer;
}

a.aba-link {
    color: white;
}

    a.aba-link:hover {
        color: yellow;
    }

    a.aba-link:active {
        color: grey;
    }

    a.aba-link:visited {
        color: white;
    }


.aba-carousel {
    width: 600px;
    background-color: var(--aba-background-color) !important;
    box-shadow: rgba(0,0,0,0.5) 5px 5px 5px 5px;
    margin: 0 auto;
    padding: 10px 10px;
}
@media only screen and (min-width: 800px) and (max-width: 899px) {
    .aba-carousel {
        width: 600px;
    }
}
@media only screen and (min-width: 700px) and (max-width: 799px) {
    .aba-carousel {
        width: 600px;
    }
}
@media only screen and (min-width: 600px) and (max-width: 699px) {
    .aba-carousel {
        width: 600px;
    }
}
@media only screen and (min-width: 500px) and (max-width: 599px) {
    .aba-carousel {
        width: 500px;
    }
}
@media only screen and (min-width: 400px) and (max-width: 499px) {
    .aba-carousel {
        width: 400px;
    }
}
@media only screen and (min-width: 300px) and (max-width: 399px) {
    .aba-carousel {
        width: 300px;
    }
}


.isDisabled {
    pointer-events: none;
    color: currentColor;
    cursor: not-allowed;
    text-decoration: none;
}

.seperator {
    display: inline;
    font-weight: bold;
}

.page-instruction {
    margin: 10px 0 10px 25px;
    font-size: small;
}

.svgCommandIcon {
    width: 1.4em;
    height: 1.4em;
    filter: invert(29%) sepia(86%) saturate(1869%) hue-rotate(199deg) brightness(103%) contrast(110%);
}

.svgDeleteIcon {
    width: 1.4em;
    height: 1.4em;
    filter: invert(33%) sepia(23%) saturate(3098%) hue-rotate(317deg) brightness(97%) contrast(114%);
}

.svgButtonIcon {
    width: 1.4em;
    height: 1.4em;
    filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(151deg) brightness(115%) contrast(102%);
}

.svgDisabledCommandIcon {
    width: 1.4em;
    height: 1.4em;
    filter: invert(77%) sepia(7%) saturate(8%) hue-rotate(346deg) brightness(89%) contrast(85%);
}

.svgIcon {
    width: 36px;
    height: 36px;
    filter: invert(98%) sepia(87%) saturate(414%) hue-rotate(179deg) brightness(104%) contrast(96%);
}

.svgDashboard {
    width: 90%;
    height: 90%;
    /*filter: invert(23%) sepia(0%) saturate(0%) hue-rotate(188deg) brightness(90%) contrast(87%);*/
    /*filter: invert(19%) sepia(99%) saturate(2306%) hue-rotate(23deg) brightness(100%) contrast(98%);*/
    /*filter: invert(15%) sepia(14%) saturate(4003%) hue-rotate(56deg) brightness(96%) contrast(98%);*/
    filter: invert(10%) sepia(6%) saturate(1389%) hue-rotate(169deg) brightness(93%) contrast(87%);
    /*filter: invert(0%) sepia(42%) saturate(2085%) hue-rotate(237deg) brightness(106%) contrast(95%);*/
}

.svgDashboardPortal {
    width: 100%;
    height: 100%;
    filter: invert(23%) sepia(0%) saturate(0%) hue-rotate(188deg) brightness(90%) contrast(87%);
}

.svgDashboardTraining {
    width: 100%;
    height: 100%;
    filter: invert(23%) sepia(0%) saturate(0%) hue-rotate(188deg) brightness(90%) contrast(87%);
}

.svgDashboardReports {
    width: 100%;
    height: 100%;
}

.svgDefault {
    filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(151deg) brightness(115%) contrast(102%);
}

.svgDark {
    filter: invert(10%) sepia(6%) saturate(1389%) hue-rotate(169deg) brightness(93%) contrast(87%);
}

.svgLight {
    filter: invert(98%) sepia(87%) saturate(414%) hue-rotate(179deg) brightness(104%) contrast(96%);
}

.svgInfo {
    filter: invert(43%) sepia(79%) saturate(469%) hue-rotate(140deg) brightness(104%) contrast(93%);
}

.svgPrimary {
    filter: invert(38%) sepia(82%) saturate(5679%) hue-rotate(203deg) brightness(109%) contrast(102%);
}

.svgSuccess {
    filter: invert(52%) sepia(11%) saturate(2650%) hue-rotate(81deg) brightness(97%) contrast(98%);
}

.svgSecondary {
    filter: invert(47%) sepia(3%) saturate(1233%) hue-rotate(167deg) brightness(95%) contrast(87%);
}

.svgWarning {
    filter: invert(79%) sepia(71%) saturate(1738%) hue-rotate(349deg) brightness(99%) contrast(106%);
}

.svgDanger {
    filter: invert(33%) sepia(23%) saturate(3098%) hue-rotate(317deg) brightness(97%) contrast(114%);
}

.svgWhite {
    filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(151deg) brightness(115%) contrast(102%);
}

.svgBlack {
    filter: invert(0%) sepia(42%) saturate(2085%) hue-rotate(237deg) brightness(106%) contrast(95%);
}

a.linkDashboard {
    color: black;
    text-decoration: none;
}
/******************************** Reports ****************************************/
.svgReportIcon {
    width: 1.5rem;
    height: 1.5rem;
}

.reportExpiryDate {
    font-size: x-small;
}

.aba-table {
    width: 100%;
}

.aba-cell-success {
    background-color: #28a745 !important;
}

.aba-cell-warning {
    background-color: #ffc107 !important;
}

.aba-cell-danger {
    background-color: #dc3545 !important;
}

.aba-table-header {
    background-color: var(--aba-background-color) !important;
    color: antiquewhite;
}

.aba-table-subheader {
    font-weight: bold;
}

.aba-table-group-header {
    /*    background-color: #07366f !important;
    color: #00ffff; */
    background-color: #23272B !important;
    color: #F8F9FA !important;
    font-size: medium !important;
}

.aba-table-group-footer {
    background-color: var(--aba-orange-text) !important;
    color: #000 !important;
    font-size: medium !important;
}

.aba-table-group-subheader {
    background-color: #cccccc !important;
    color: #222222 !important;
    font-size: medium !important;
}

aba-table-row-sererator {
}

.aba-report-label {
    font-weight: 600;
}


.aba-pass {
    /*    background-color: green;
    color: white;
*/
}

.aba-inTraining {
    background-color: orange !important;
    color: black;
}

.aba-fail {
    background-color: darkred !important;
    color: white;
}


/******************************** Articulate Player ******************************/
.articulateFrame {
    width: 960px;
    max-width: 960px;
    height: 658px;
    max-height: 658px;
    border: 0;
}

@media only screen and (min-width: 800px) and (max-width: 899px) {
    .articulateFrame {
        width: 800px;
        max-width: 800px;
        height: 548px;
        max-height: 548px;
    }
}

@media only screen and (min-width: 700px) and (max-width: 799px) {
    .articulateFrame {
        width: 700px;
        max-width: 700px;
        height: 480px;
        max-height: 480px;
    }
}

@media only screen and (min-width: 600px) and (max-width: 699px) {
    .articulateFrame {
        width: 600px;
        max-width: 600px;
        height: 411px;
        max-height: 411px;
    }
}

@media only screen and (min-width: 500px) and (max-width: 599px) {
    .articulateFrame {
        width: 500px;
        max-width: 500px;
        height: 342px;
        max-height: 342px;
    }
}

@media only screen and (min-width: 400px) and (max-width: 499px) {
    .articulateFrame {
        width: 400px;
        max-width: 400px;
        height: 274px;
        max-height: 274px;
    }
}

@media only screen and (min-width: 300px) and (max-width: 399px) {
    .articulateFrame {
        width: 300px;
        max-width: 300px;
        height: 205px;
        max-height: 205px;
    }
}

@media print {
    #ReportTable tr td {
        color: black !important;
        background-color: white !important;
    }

    body * {
        visibility: hidden;
    }

    #print-area * {
        visibility: visible;
        color: black;
    }

    #print-area {
        position: absolute;
        left: 0;
        top: 0;
        padding: 3px;
    }

        #print-area td {
            color: black !important;
            background-color: white !important;
        }

        #print-area .aba-print-hide {
            display: none !important;
        }

        #print-area img {
            width: 220px !important;
        }

        #print-area .aba-overlay-toolbar {
            display: none !important;
        }

    #report-print-title {
        visibility: visible;
        display: block;
    }
}


/************************************* DataTables ****************************************/
div.dataTables_wrapper {
    /*background-color: #719ba7;*/
}

div.dataTables_length {
    float: left;
    text-align: left;
    color: white !important;
    /*background-color: red;*/
}

    div.dataTables_length select {
        color: white !important;
        /*background-color: black !important;*/
        background-color: var(--aba-background-color) !important;
    }

div.dataTables_filter {
    float: right;
    text-align: right;
    color: white !important;
}

    div.dataTables_filter input {
        color: white !important;
        /*background-color: black !important;*/
        background-color: var(--aba-background-color) !important;
    }

div.dataTables_info {
    float: left;
    color: white !important;
    /*background-color: blue;*/
}

div.dataTables_paginate {
    float: right;
    color: white !important;
    /*background-color: yellow;*/
}

div.dataTables_length,
div.dataTables_filter,
div.dataTables_paginate,
div.dataTables_info {
    padding: 6px;
}

table.pretty {
    clear: both;
}

/* Self clearing - */
div.dataTables_wrapper:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

html[xmlns] .dataTables_wrapper {
    display: block;
}

* html .dataTables_wrapper {
    height: 1%;
}

table.pretty {
    width: 100%;
    clear: both;
}

    table.pretty td,
    table.pretty th {
        padding: 5px;
        border: 1px solid #fff;
    }

    table.pretty thead th {
        text-align: center;
        background: #66a9bd;
    }

    table.pretty tbody th {
        text-align: left;
        background: #91c5d4;
    }

    table.pretty tbody td {
        text-align: center;
        background: #d5eaf0;
    }

    table.pretty tbody tr.odd td {
        background: #bcd9e1;
    }

    table.pretty tfoot th {
        background: #b0cc7f;
        text-align: left;
    }

    table.pretty tfoot td {
        background: #d7e1c5;
        text-align: center;
        font-weight: bold;
    }



.dataTables_filter input[type="search"] {
    width: 10rem !important;
    float: right;
}

a.paginate_button,
a.paginate_active {
    display: inline-block;
    background-color: #608995;
    /*padding: 2px 6px;*/
    padding: 0;
    margin-left: 2px;
    cursor: pointer;
    color: white !important;
    text-align: center;
    font-size: smaller;
}

a.paginate_active {
    background-color: white !important;
    border: 1px solid black;
}

a.paginate_button_disabled {
    color: #3d6672;
}

.paging_full_numbers a:active {
    color: blue !important;
    outline: none
}

.paging_full_numbers a:hover {
    text-decoration: none;
}

div.dataTables_paginate span > a {
    /*width: 27px;*/
    text-align: center;
}

.paginate_button {
    /*width: 27px;*/
    text-align: center;
}

div.dataTables_info {
    padding: 9px 6px 6px 6px;
}


.bio-container {
    position: relative;
    max-height: 70px;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
}

    .bio-container::after {
    }

.bio-reveal-button {
    border-radius: 3px;
    cursor: pointer;
}