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

a { text-decoration: none;font-weight:500; }
    a:hover, a:active { color: #003460; text-decoration: none; }
    a:focus { outline-width: 1px; outline-style: dotted; outline-color: inherit; color: #003460; text-decoration: none; }

/*table td:not(.ck-editor__editable) { background-color: #eeeeee !important; }*/
table thead th:not(.ck-editor__editable) { background-color:whitesmoke !important;  }
thead th { border-top-width:1px; }
td.auto-width { white-space: nowrap; width: 1%; }
table.dataTable td { padding: 0.4rem; }
/*table-grouping tr.odd td:first-child, .table-grouping tr.even td:first-child { padding-left: 1.1em; }*/
/*.table.dataTable td.dt-control:before { border: none !important; }
table.dataTable tr.dt-hasChild td.dt-control:before { background-color: gray !important; }*/
table.dataTable span.dt-column-order:before { line-height: 0.7rem !important; }  /* the space between the sort arrow icons for tables */
table.dataTable th:before { line-height: 0.8rem !important; } /* datatable 1.3 the space between the sort arrow icons for tables */

hr { border-top: 1px solid #c2c2c2; margin-top: 15px; margin-bottom: 15px; }
mark { padding: 0; background: orange; color: black; }
label { font-weight: bold; }

.table thead th:first-child { border-top-left-radius: 0.375rem; border-left-width: 1px; }
.table thead th:last-child { border-top-right-radius: 0.375rem; border-right-width:1px; }
table.dataTable tbody tr.selected > * { box-shadow: inset 0 0 0 9999px whitesmoke !important; color: #000 !important; }

.px-2-5 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.nav-tabs .nav-link { color: #003460 !important; }
.navbar-nav .nav-link.active { font-weight: bold; color: #0d6efd !important; }
.accordion-button { background-color: #f5f5f5; }
    .accordion-button:not(.collapsed) { color: #212529; background-color: #f5f5f5; }
    .accordion-button:focus { box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.125); }

@media (max-width: 992px) {
    /*.row-flex, .row-flex > div[class*='col-'] { display: block; flex: none; }*/
    .navbar-collapse .navbar-nav > .vr { display: none; }
}

div.dataTables_processing > div:last-child > div { background-color: #003460 !important; }

.hidden-input-control { visibility: hidden; width: 0; height: 0; }

::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #c2c2c2; font-style: italic; }
::-moz-placeholder { /* Firefox 19+ */ color: #c2c2c2; font-style: italic; }
:-ms-input-placeholder { /* IE 10+ */ color: #c2c2c2; font-style: italic; }
:-moz-placeholder { /* Firefox 18- */ color: #c2c2c2; font-style: italic; }

.bi ~ span { vertical-align: middle; display: inline-block; }

/* buttons */
.btn, button { color: #ffffff; }
    .btn:active, button:active { transform: translateY(2px); }
    .btn.btn-default, button { background-color: #0d6efd; }
        .btn.btn-default:hover { background-color: #003260; color: #ffffff; }
        button:focus { box-shadow: 0px 0px 0px 4px rgba(0,0,0,0.4); color: #ffffff; }
    .btn.btn-danger:focus { box-shadow: 0px 0px 0px 4px rgba(225, 83, 97,0.4); color: #ffffff; }
    .btn.btn-default:focus { box-shadow: 0px 0px 0px 4px rgba(18, 154, 251,0.4); color: #ffffff; background-color: #003260; }
    .btn.btn-lg { width: 100%; }

    button:disabled, button[disabled] { background-color: #E4E4E4; border-color: #E4E4E4; }

.menu_icon { background-repeat: no-repeat; display: block; padding: 0 25px !important; height: 100%; text-indent: -9999px; height: 70px; background-position: center; }
#app-dropdown-menu { max-height: calc(100vh - 56px); overflow: auto; overflow-x: hidden; }

.vr > .navbar-brand .navbar-toggler.collapsed { display: none; }

/* Footer*/
.footer { padding: 21px 0; font-size: 13px; font-weight: 500; border-color: #129afb !important; }
    .footer a { text-decoration: underline; }
.modal-footer { border-top: 0 none; }

/* Dashboard */
.border-sm-right { border-right: 1px solid #dee2e6; }

.dropdown-toggle.user-dropdown-link:after { margin-left: 0; }
.dropdown-hover:hover .dropdown-menu { display: block; margin-top: 0; }

@media (max-width: 991px) {
    .border-sm-right { border: none; border-bottom: 1px solid #dee2e6; margin-bottom: 20px; }
    .carousel-caption h2 { margin: 0; padding: 0; font-size: 24px; }
}

/* Login */
#loginForm .validation-summary-errors ul { padding-left: 0; list-style-position: inside; }
.login, .login body { height: 100%; }
    .login .login_leftside { background-image: url('/images/login_banner.png'); background-size: cover; background-color: black; }

.tealsLogin { background-color: #444444; }

.course-item { margin: 0; background: #f5f5f5; min-height: 130px; }

.launch-btn { width: 84px; height: 84px; font-weight:500; }
.fade-anchor { color: black; text-decoration: underline; }

.steps-progressbar { counter-reset: step; }
    .steps-progressbar li { list-style-type: none; width: 50%; float: left; position: relative; text-align: center; color: #7d7d7d; }
        .steps-progressbar li:before { width: 30px; height: 30px; content: counter(step); counter-increment: step; border: 2px solid #7d7d7d; display: block; text-align: center; margin: 0 auto 10px auto; border-radius: 50%; background-color: white; }
        .steps-progressbar li:after { width: 100%; height: 2px; content: ''; position: absolute; background-color: #7d7d7d; top: 15px; left: -50%; z-index: -1; }
        .steps-progressbar li:first-child:after { content: none; }
        .steps-progressbar li.active { color: green; }
            .steps-progressbar li.active:before { border-color: #55b776; }
            .steps-progressbar li.active + li:after { background-color: #55b776; }

.form-top { overflow: hidden; padding: 0 25px 0px 25px; background: #fff; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; text-align: left; }
.form-top-left { float: left; width: 75%; padding-top: 25px; }
    .form-top-left h3 { margin-top: 0; }
.form-top-right { float: left; width: 25%; padding-top: 5px; font-size: 66px; color: #ddd; line-height: 100px; text-align: right; }
.form-bottom { padding: 25px 25px 30px 25px; background: #eee; -moz-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; text-align: left; }
    .form-bottom form textarea { height: 100px; }
    .form-bottom form button.btn { width: 100%; }
    .form-bottom form .input-error { border-color: #19b9e7; }

.form-check-input { border-width: 2px !important; }

.middle-border { margin-top: 25px; }
.middle-line { position: absolute; z-index: -1; min-height: 320px; width: 25px; border-right: 1px solid lightgray; }
.middle-or { margin-top: 140px; width: 50px; background-color: white; color: black; padding: 5px; border: 1px solid lightgray; }

.skeleton-card .skeleton-title { height: 20px; width: 60%; background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%); border-radius: 4px; margin-bottom: 16px; animation: skeleton-loading 1.2s infinite; }
.skeleton-card .skeleton-chart { height: 185px; width: 100%; background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%); border-radius: 8px; animation: skeleton-loading 1.2s infinite; }

@keyframes skeleton-loading {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

@media only screen and (max-width:480px) {
    /* expand the "Manage Account" menu in thin mode (email: a few UI improvements for e-LearningCourses Thu 8/30/2018 8:34 AM */
    /*.dropdown-menu { display: block; border: 0 none; box-shadow: none; margin-top: 0; position: static; width: 100%; }*/

    #app-dropdown-menu { max-height: none; white-space: normal; }
        #app-dropdown-menu li a { white-space: normal; }
}

@media (max-width: 767px) {
    .middle-border { margin: 15px; }
    .middle-line { border-right: 0; left: 0px; min-height: 22px; margin-top: 0px; width: 100%; border-bottom: 1px solid lightgray; }
    .middle-or { margin-top: 0px; margin-left: 42%; }
}