@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');


html {
    font-size: 16px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    font-family: 'Open Sans', sans-serif;
    color: #3d3e40;
    background: #f9f9f9 url('../img/star-ball-bg.png') no-repeat 100% 95px;
    background-attachment: fixed;
}

main {
    padding-bottom: calc(5.5rem + 5px);
}

a {
    transition: 0.2s;
    color: #002d74;
}

    a:hover {
        color: #1B365D;
    }

    a.disabled {
        color: var(--ocl-color-disabled);
    }

hr {
    margin: 1rem 0 2rem;
    color: #D7282F;
    border: 0;
    border-top: 1px solid;
    opacity: 1;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Bitter', serif;
    color: #1B365D;
    font-weight: 400;
    line-height: 1;
    margin: 0 0 1rem;
}

h1 {
    font-size: 2.25rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.25rem;
}

h4 {
    font-size: 1.125rem;
}

h5 {
    font-size: 1rem;
}

h6 {
    font-size: .875rem;
}

.marginTop10 {
    margin-top: 10px;
}

/***** Fonts/Text *****/


@font-face {
    font-family: 'tngov-icons';
    src: url('../fonts/tngov-icons.woff') format('woff');
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.text-justify {
    text-align: justify;
}

.text-nowrap {
    white-space: nowrap;
}

.text-lowercase {
    text-transform: lowercase;
}

.text-uppercase {
    text-transform: uppercase;
}

.text-capitalize {
    text-transform: capitalize;
}

.text-underline-none {
    text-decoration: none;
}

.bIcon {
    font-size: 1.25rem;
}

/***** Header *****/
.header-top {
    padding: 1rem 0;
    background: #445c7c url('../img/header-background.jpg') top center;
    background-size: cover;
    color: #fff;
}

.logo {
    /*    height: 128px;
*/
}

.logoHeader {
    color: white;
    text-decoration: none;
    position: relative;
}

    .logoHeader .logoText,
    .logoHeader .logoTextBig {
        position: absolute;
    }

.logoText {
    font-family: var(--ocl-font-family-main);
    font-size: var(--ocl-font-size-small);
    bottom: 35%;
}

.logoTextBig {
    font-family: var(--ocl-font-family-main);
    font-size: var(--ocl-font-size-largest);
    bottom: 0;
}

.tn-icon-title {
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 128px;
}

nav {
    background-color: #ffffff;
    box-shadow: 0px 2px 0px #EEEEEE;
    -moz-box-shadow: 0px 2px 0px #EEEEEE;
    -webkit-box-shadow: 0px 2px 0px #EEEEEE;
    margin-bottom: 2rem;
    min-height: 2rem;
    position: sticky;
    top: 0;
    z-index: 99;
}

ul.nav-items {
    margin-bottom: 0;
}

.nav-items li {
    padding: 0.75rem 0;
    line-height: 1;
}

    .nav-items li a {
        padding: calc(0.75rem - 3px) 1rem;
        line-height: 1;
        font-family: 'Open Sans', sans-serif;
        font-weight: 600;
        font-size: 1rem;
        color: #1B365D;
        text-decoration: none;
    }

.nav-items a:hover {
    box-shadow: inset 0px 5px 0px #D7282F;
    -moz-box-shadow: inset 0px 5px 0px #D7282F;
    -webkit-box-shadow: inset 0px 5px 0px #D7282F;
    color: #ee3524;
}

.menu a {
    background-color: white !important;
    padding: calc(0.75rem - 3px) 1rem;
    line-height: 1;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: #1B365D !important;
    text-decoration: none;
}

    .menu a.dropdown-item {
        font-weight: normal;
    }

    .menu a:hover {
        box-shadow: inset 0px 5px 0px #D7282F;
        -moz-box-shadow: inset 0px 5px 0px #D7282F;
        -webkit-box-shadow: inset 0px 5px 0px #D7282F;
        background-color: white;
        color: #ee3524;
    }

    .menu a.dropdown-item:hover {
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        /*background-color: white;*/
        color: red !important;
    }

.currentMenu {
    box-shadow: inset 0px 5px 0px #D7282F;
    -moz-box-shadow: inset 0px 5px 0px #D7282F;
    -webkit-box-shadow: inset 0px 5px 0px #D7282F;
    background-color: white;
    color: #ee3524;
}

a.currentSubMenu {
    color: var(--ocl-color-secondary) !important;
}

.header-top-right {
    position: relative;
}

.header-top a.tn-link {
    color: #ffffff;
    opacity: 0.6;
    text-decoration: none;
    position: absolute;
    top: 0;
    right: 0;
    display: block;
}

    .header-top a.tn-link:hover {
        opacity: 1;
        text-decoration: none;
    }

.divEnvironment {
    color: #F5CB91;
    font-weight: bold;
    font-size: 18px;
    position: absolute;
    top: -2px;
    left: 0;
}

.logged-in {
    background-color: rgb(85 105 130 / 75%);
    padding: 0.5rem 0;
    box-shadow: inset 0px 5px 0px #d7282f;
    -moz-box-shadow: inset 0px 5px 0px #D7282F;
    -webkit-box-shadow: inset 0px 5px 0px #d7282f;
    position: absolute;
    bottom: 0;
    right: 0;
    display: block;
}

    .logged-in:hover {
        cursor: pointer;
        background: #556982;
    }

    .logged-in.icon-user:before {
        margin: 0 .25rem 0 0;
    }

    .logged-in .icon-down-dir:after {
        margin: 0 0 0 0.25rem;
    }

    .logged-in .btn-secondary.dropdown-toggle {
        background-color: transparent;
    }

.btnLogout {
    padding: 0 !important;
    color: #212529 !important;
    background-color: transparent !important;
    width: 100%;
    text-align: left;
}

.form-inline {
    margin: 0.25rem 0 0.25rem 0;
}

/*To align the dropdown on the right*/
.dropdown-menu-right {
    right: 0 !important;
    left: auto !important;
}

/*To display the menu on hover instead of click*/
.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
}

/***** Footer *****/
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: normal !important;
    line-height: 1.5 !important;
}

.footer-upper {
    background: #FFFFFF;
    box-shadow: 0px -4px 0px #EEEEEE;
    height: 1rem;
    text-align: center;
}

img.starball {
    margin: -1rem 0 0;
}

.footer-lower {
    background: #1B365D;
    min-height: 2.5rem;
}

    .footer-lower .row div {
        min-height: 2.5rem;
        padding: 0.5rem 0 0.5rem 2rem;
    }

.support-email {
    font-size: .75rem;
    color: #ffffff;
    margin: 0;
}

.footer .support-email a {
    color: #ffffff;
}

    .footer .support-email a:hover {
        color: #666666;
    }

/***** Forms *****/
form {
    margin: 0 0 1rem;
}

label {
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    color: #131E29;
}

    label[required]:after {
        content: "*";
        color: #D7282F;
        padding-left: 0.25rem;
    }

.form-control, .form-select {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #131E29;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #EEEEEE;
    box-shadow: inset 3px 3px 3px rgba(204, 204, 204, 0.5);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

form *:focus {
    background-color: #ffffff;
    border-color: rgb(27 54 93 / 50%) !important;
    box-shadow: inset 3px 3px 3px rgb(27 54 93 / 25%) !important;
    outline: 0;
}

form a:focus {
    background-color: transparent;
    border-color: rgb(27 54 93 / 50%) !important;
    box-shadow: none !important;
    outline: 0;
}

/*.form-control, .form-select {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #131E29;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #EEEEEE;
    box-shadow: inset 3px 3px 3px rgb(204 204 204 / 50%);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}*/

.form-select {
    background-image: url('../img/caret-down.svg') !important;
    background-size: 10px 6px;
    padding-right: 1.75rem;
}

.form-check-input:checked {
    background-color: #1B365D;
    border-color: #1B365D;
}

input.form-check-input[type="checkbox"][disabled]:checked,
input.form-check-input[type="radio"][disabled]:checked {
    background-color: var(--ocl-color-gray-five) !important;
}

.form-check-label {
    font-weight: 400;
}

label + .form-check-inline {
    margin-left: 1rem;
}

.label-description {
    font-weight: 400;
    font-size: 0.875rem;
    color: #666666;
}

.label-text {
    font-weight: 400;
}

.col-auto {
    width: auto !important;
}

.row.form-check-row {
    padding-left: calc(var(--bs-gutter-x) * .5);
    padding-right: calc(var(--bs-gutter-x) * .5);
}

*:disabled {
    background-color: #EEEEEE !important;
}

.center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.required::after {
    content: "*";
    font-family: var(--ocl-font-family-main);
    font-size: var(--ocl-font-size-small);
    font-weight: 700;
    color: var(--ocl-color-red);
    padding-left: .5rem;
}

.error-box {
    background-color: var(--ocl-color-light);
    color: var(--ocl-color-error);
    border-radius: var(--ocl-border-radius);
    font-size: var(--ocl-font-size-small);
    letter-spacing: normal;
    white-space: normal;
    font-weight: normal;
    padding: var(--ocl-padding-thin);
    border: 1px solid;
    display: table;
    margin: .25rem 0 0;
}

.msgInfo {
    font-family: var(--ocl-font-family-main);
    font-size: var(--ocl-font-size-small);
    color: var(--ocl-color-red);
}

.txtSmall {
    font-size: var(--ocl-font-size-small);
}

.txtBold {
    font-weight: 700;
}

.txtJustify {
    text-align: justify;
}

/***** Buttons *****/
.btn, .ui-widget button, .btn:focus, input[type=file]::file-selector-button {
    border-radius: 0;
    background-color: #1B365D;
    border: 0;
    padding: .5rem 1rem;
    line-height: 1;
    color: #fff;
    transition: 0.2s;
}

    .btn:hover {
        background-color: #666666;
        color: #ffffff;
    }

.form-control:hover::-webkit-file-upload-button {
    background-color: #666666 !important;
    color: #ffffff;
}

.form-control:disabled::file-selector-button {
    background-color: #666666;
    color: #ffffff;
}

.btn-red {
    background-color: #D7282F !important;
}

.btn.disabled, .btn:disabled {
    color: #1B365D;
}

.btnDeleteApprovalForm {
    padding: 0.25rem 1rem !important;
}

    .btnDeleteApprovalForm:focus {
        box-shadow: none !important;
    }

.btnEdit, .btnDelete {
    /*padding:0.5rem 0.25rem;*/
    font-size: 0.8rem;
}

.active {
    background-color: #666666;
}

/***** Lists *****/
ul.inline-list li {
    list-style: none;
    display: inline-block;
}

/***** Tables *****/
table {
    width: 100%;
    background-color: #ffffff;
    border-collapse: collapse;
    border-width: 1px;
    border-color: #b9b9b9;
    border-style: solid;
    color: #002d74;
    table-layout: fixed;
}

td, th {
    border-width: 1px;
    border-color: #b9b9b9;
    border-style: solid;
    padding: .5rem;
}

/*table tr th {
    font-family: var(--ocl-font-family-main);
    letter-spacing: var(--ocl-letter-spacing-tight);
    background: var(--ocl-header-background-color);
    color: var(--ocl-header-font-color);
    text-align: left;
    font-weight: bold;
    white-space: normal;
    vertical-align: bottom;
}*/

thead, th {
    background-color: var(--ocl-header-background-color) !important;
    font-family: var(--ocl-font-family-main);
    font-weight: 700;
    font-size: 1rem;
    color: var(--ocl-header-font-color);
    line-height: 1.25;
}

.table-striped > tbody > tr:nth-child(even) {
    background-color: #f7f7f7;
}

thead input {
    width: 100%;
    padding: 3px;
    box-sizing: border-box;
}

/*.tblConcentrations {
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: 2rem;
    width: 95%;
}*/

/*.tblOCL .dataTables_scrollBody {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}*/

.tblOCL {
    width: 99.5% !important;
    overflow-wrap: break-word;
}

    .tblOCL, .tblOCL th {
        /*font-size: var(--ocl-font-size-small);*/
        font-size: .8rem;
    }

.tblOclInventory, .tblOclInventory th {
    font-size: .75rem;
    overflow-wrap: break-word;
}

.columnSearch {
    min-width: 50px;
    margin-top: 10px;
}

/***** Pages *****/
.framed {
    background: #ffffff;
    padding: 2rem;
    box-shadow: 1px 1px 4px rgba(61, 62, 64, 0.2);
    -moz-box-shadow: 1px 1px 4px rgba(61, 62, 64, 0.2);
    -webkit-box-shadow: 1px 1px 4px rgba(61, 62, 64, 0.2);
}

.highlightedRow {
    background-color: #E0E0E0 !important;
}

.icon-export {
    font-size: 0.75rem;
}

.historyAction {
    height: 20px;
}

.Inactive:before {
    content: "";
    width: 0.75rem;
    height: 0.75rem;
    background-color: #EA9396;
    display: inline-block;
    margin-right: .25rem;
}

.Inactive-row, .Inactive-row td {
    background-color: #EA9396 !important;
}

/***** Login *****/

.container.login-page {
    max-width: 400px;
    margin: 0 auto;
}

/***** Dashboard *****/

.hidden {
    display: none;
}

.hiddenRow {
    padding: 0 !important;
}

.accordion-toggle:not(.collapsed):before {
    content: '\e81f';
}

.accordion-toggle.collapsed:before {
    content: '\e820';
}

/* expand link icon */
.expand-link::after {
    content: '\e800';
    font-family: 'tngov-icons';
    font-size: 120%;
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: none;
    width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: 0.2em;
    transition: transform .2s ease-in-out;
}

.expand-link:not(.collapsed)::after {
    transform: rotate( 180deg);
}

/***** Approval Form *****/
#approvalFormHeader {
    text-align: center;
    width: calc(100% + 4rem);
    padding: 2rem 2rem 0;
    margin: -2rem 0 2rem -2rem;
    background: rgb(255 255 255 / 80%);
    position: sticky;
    top: 1.5rem;
    z-index: 9;
}

    #approvalFormHeader hr {
        width: calc(100% + 4rem);
        margin-left: -2rem;
    }

#approvalFormSections {
    text-align: center;
}

.approvalFormSection {
    margin-bottom: 4rem;
}

ul#off-campus-locations {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.lstApiPrograms {
    height: 450px;
    font-size: var(--ocl-font-size-small);
}

    .lstApiPrograms option {
        text-wrap: wrap;
    }

        .lstApiPrograms option:hover {
            background: #EEEEEE;
        }

.checkboxContainer {
    overflow-y: auto;
    height: 150px;
}

/***** Run Report *****/
/*input:invalid {
    background-color: red;
}*/

.reports a {
    text-decoration: none;
    color: var(--ocl-color-main);
}


/***** UI Dialog *****/
.ui-dialog {
    max-width: 100%;
    min-width: 400px;
    max-height: 100%;
    box-shadow: 10px 10px 10px var(--ocl-color-border);
}

    .ui-dialog .ui-dialog-titlebar {
        background-color: var(--ocl-header-background-color);
        color: var(--ocl-header-font-color);
        font-size: 1.5rem;
        font-weight: normal;
        text-align: left;
        padding: 0.25rem 1rem;
        border-radius: 0px;
        margin-bottom: 1rem;
        font-family: var(--ocl-font-family-accent);
    }

    .ui-dialog .ui-dialog-title {
        font-size: var(--ocl-font-size-large);
        font-weight: normal;
        letter-spacing: var(--ocl-letter-spacing);
    }

.ui-dialog-content div.ui-dialog-icon {
    position: absolute;
    height: 100%;
    top: auto;
    bottom: auto;
}

.ui-dialog .ui-dialog-content {
    padding: var(--ocl-padding);
}

.ui-dialog .ui-dialog-buttonpane {
    border: none;
    padding: var(--ocl-padding);
    margin-top: 0;
    margin-bottom: var(--ocl-margin-y);
}

    .ui-dialog .ui-dialog-buttonpane button {
        margin: 0;
        margin-left: var(--ocl-margin-thin-x);
    }

.ui-dialog .ui-dialog-icon {
    position: absolute;
    margin-top: var(--ocl-margin-thin-y);
}

.ui-dialog-icon .ui-icon {
    vertical-align: middle;
    position: unset;
}

.ui-dialog-icon + .ui-dialog-content {
    padding-left: 50px;
}

.ui-corner-all {
    border-radius: 0px;
}

.no-close .ui-dialog-titlebar-close {
    display: none;
}

.no-close .wait-dialog-content {
    display: block;
    text-align: center;
}

.ui-widget-overlay.wait-dialog-open {
    background: var(--ocl-color-disabled);
    opacity: .5;
    filter: Alpha(Opacity=50); /* support: IE8 */
}

.ui-dialog {
    z-index: calc(var(--ocl-menu-z-index) * 2) !important;
}

.ui-button:hover,
.ui-button:focus {
    border: none !important;
}

.ui-button:focus {
    background-color: var(--ocl-color-main) !important;
}




/***** UI Tab *****/
/*#divMajorProgramTabs.ui-tabs {*/
/*border: 0;*/
/*}

#divMajorProgramTabs .ui-tabs-active {
    border: 0;
    border-radius:0;
    background:none;
}

#divMajorProgramTabs .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, a.ui-button, a:link.ui-button, a:visited.ui-button, .ui-button {
    color: white;
}*/



/***** User Profile *****/
.nav-pills .nav-link {
    color: var(--ocl-color-gray-six);
}

    .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
        background-color: var(--ocl-color-main-secondary);
    }


.columnList_2 {
    column-count: 2;
}
