/* Custom & Overriding CSS */


/*------------------------------------------------------------------------------------*/
/* General/Misc. */

body {
    background-color: black !important;
}

.caps {
    text-transform: uppercase;
    letter-spacing: .075em;
    font: 12px Arial;
}

.cursor-pointer {
    cursor: pointer !important;
}
.cursor-default {
    cursor: default !important;
}

.section-header {
    text-transform: uppercase !important;
    letter-spacing: .075em !important;
    font: 13px Arial !important;
    /*font-weight: 500 !important;*/
    font-style: italic !important;
    overflow: hidden;
    color: black;
    margin-bottom: 3rem;
    margin-top: 5rem;
    margin-right: 1.5rem;
}

.section-header:after {
    content: "";
    display: inline-block;
    height: 0.79rem;
    vertical-align: bottom;
    width: 100%;
    margin-right: -100%;
    margin-left: 0.5rem;
    border-top: 1px solid black;
}

.section-header:before {
    content: "";
    display: inline-block;
    height: 0.79rem;
    vertical-align: bottom;
    width: 1rem;
    margin-right: 0.5rem;
    /*border-top: 1px solid black;*/
    border: 0;
}
/*
.timecheck-container {
    text-align: center;
    margin-top: 1rem;
}

.timecheck-label {
    font-size: 14px;
    font-style: italic;
}

.timecheck-datetime {
    font-size: 11px;
    font-style: italic;
}
*/

.admin-zone-content {
    margin-right: 2rem !important;
    margin-left: 2rem !important;
}

.modal-footer {
    border-top: 0 !important;
}


/*------------------------------------------------------------------------------------*/
/* Markdown */

ul {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

li {
    margin-bottom: 0 !important;
}

p {
   margin-bottom: 0 !important;
   margin-top: 0.5rem !important;
}

code {
    font-size: 100%;
    color: #17a2b8;
    word-wrap: break-word;
}


/*------------------------------------------------------------------------------------*/
/* Backgrounds/Bodies */

.content {
    /*padding-top: 1rem;*/
    padding-bottom: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: whitesmoke;
    min-height: 100rem;
}

.footer {
    /*height: 3rem;*/
    background-color: black;
    border-top: 2px solid silver !important;
}

.footer-version {
    color: silver;
    font-family: monospace;
    color: black;
    user-select: none;
    padding-left: 1rem;
    font-size: large;
    width: 55rem;
}
.footer-version:hover {
    transition: 3s;
    color: silver;
}


/*------------------------------------------------------------------------------------*/
/* Site Title */

.logo-container {
    padding-top: 0.25rem;
    padding-left: 1rem;
}

.logo-mou-current {
    /*color: #17a2b8;*/
    color:  #cacaca;
    font-family: serif;
    font-family: Kanit, sans-serif;
    font-style: italic;
    font-size: 32px;
    letter-spacing: 0.3rem;
    line-height: 1;
    align-self: flex-end;
    /*margin-bottom: 0.25rem;*/
    /*margin-left: 1.5rem;*/
    display: flex;
    height: 3.5rem;
}


/*------------------------------------------------------------------------------------*/
/* Nav Bar Tabs */

.navbar {
    border-bottom: 2px solid black !important;
    padding: 0;
    user-select: none;
}

.nav-link {
    color: silver !important;
    text-decoration: none;
    letter-spacing: .05em;
    padding-left: 0rem; /* 0 because for lining up in collapsed menu */
    padding-right: 1.5rem;
}

.hover-bold:hover {
    color: #258835 !important;
    cursor: pointer;
    /* faux-bold -- don't shift when hovered */
    /* https://www.sitepoint.com/quick-tip-fixing-font-weight-problem-hover-states/ */
    text-shadow: 0 0 .04em #258835, 0 0 .04em #258835;
}

.active {
    color: #17a2b8 !important;
    /* use text shadow instead of bold, b/c .hover-bold:hover */
    text-shadow: 0 0 .04em #17a2b8, 0 0 .04em #17a2b8;
}

.navbar-uncollapsed {
    position: absolute;
    right: 0px;
    margin-top: 1.5rem;
    margin-right: 1rem;
}

.navbar-toggler {
    margin-right: 1rem;
}

.log-inout {
    letter-spacing: .05em;
    /* use text shadow instead of bold, b/c .hover-bold:hover */
    text-shadow: 0 0 .04em #17a2b8, 0 0 .04em #17a2b8;
    color: #17a2b8;
    padding-left: 0rem; /* 0 because for lining up in collapsed menu */
    padding-right: 0rem;
    text-decoration: none;
    font-style: italic;
}

.nav-seperator {
    padding-left: 1rem;
    padding-right: 2rem;
    color: silver !important;
}

.user {
    letter-spacing: .05em;
    color: silver !important;
    font-style: italic;
    padding-left: 0rem; /* 0 because for lining up in collapsed menu */
    padding-right: 1rem;
}

.tab-link {
    padding: 0 !important;
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: black !important;
    color: #aaaaaa !important;
    border: 0 !important;
}

.bottom-border {
    border-bottom: 1px solid black !important;
    /*border-top: 2px solid #aaaaaa !important;*/
    background-color: whitesmoke;  /*because when disabled, it's whitemsoke anyways*/
}

/*------------------------------------------------------------------------------------*/
/* Snapshot Info */

.make-snapshot {
    display: flex;
    justify-content: center;
}
/*
.sow-last-updated {
    position: absolute;
    right: 0px;
    color: gray;
    font-style: italic;
    font-size: 12px;
    text-align: right;
    margin-right: 2.5px;
}
*/
.button-icon-label {
    font-size: 1rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    /*line-height: 3 !important;*/
    /*height: 35.53px;*/
    /*display: block !important;*/
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    /*padding:  0 !important;*/
}
.button-icon-label > * {
    /*display: table-cell !important;*/
    /*vertical-align: middle !important;*/
    /*height: 25.53px;*/
    margin-top:  auto;
    margin-bottom:  auto;
}
/*
.button-icon-label:hover {
    background-color: #17a2b8;
    border-color: #17a2b8;
    color: whitesmoke;
}
*/
.snapshot-dropdown > .Select-control {
    width: 100%;
    /*height: 4rem;*/
    border: 0;
    border-radius: 0;
}

.snapshot-dropdown > .Select-menu-outer {
    width: 100% !important;
}

.snapshot-dropdown > .Select-control > .Select-multi-value-wrapper > * {
    line-height: 2.6 !important;
}


/*------------------------------------------------------------------------------------*/
/* Institution Fields */

.institution-dropdown-container {
    display: flex;
    justify-content: center;
    /*background-color: #17a2b8;*/
}

.institution-dropdown {
    text-align: center;
    /*font-size: 1.9rem;*/
}

.institution-dropdown > .Select-control {
    /*height: 4rem;*/
    /*border: 0;*/
    width: 90rem;
    /*padding: 0;*/
    background-color: transparent;
    border: 0;
}

.institution-dropdown > .Select-control > .Select-arrow-zone {
    visibility: hidden;
}

.institution-dropdown > .Select-control > .Select-multi-value-wrapper > * {
    /*padding: 0 !important;*/
    padding-top: 0.25rem !important;
    /*line-height: 2 !important;*/
}

.institution-dropdown > .Select-control > .Select-multi-value-wrapper > .Select-placeholder,
.institution-dropdown > .Select-control > .Select-multi-value-wrapper > .Select-value > * {
    color: #17a2b8 !important;
    font-family: Kanit, sans-serif;
    font-size: 28px;
    letter-spacing: 0.3rem;
}

.institution-headcounts-inner-container {
    margin-top: 2rem;
    margin-left: 10rem;
    margin-right: 10rem;
}

.institution-headcount {
    margin-left: 1rem;
    margin-right: 1rem;
    max-width: 16.3rem !important;
}

.institution-headcount-input {
    max-width: inherit;
}

.institution-text-area {
    width: 90%;
    height: 30rem;
    padding-bottom: 0;
    margin-left: 6rem;
}


/*------------------------------------------------------------------------------------*/
/* Dropdown Select Control */

.Select-control {
    border-radius: .25rem;
    word-break: normal !important;
}

.Select.is-disabled > .Select-control {
    background-color: whitesmoke !important;
}

.is-disabled > .Select-control > .Select-arrow-zone {
    /* Remove dropdown arrow from disabled dropdowns */
    visibility: hidden;
}

.Select-menu-outer {
    padding-left: 0em !important;
}


/*------------------------------------------------------------------------------------*/
/* Table Tools */

.wbs-table-top-toolbar {
    height: 25.53px;
    margin-right: 30rem;
}

.wbs-table-bottom-toolbar {
    height: 25.53px;
    z-index: 10000000;
    position: relative;
}

.table-custom-filter {
    height: 25.53px !important;
    /*width: 27rem;*/
    /*margin-right: 1rem;*/
    /*padding: 0 !important;*/
}

.table-custom-filter > .Select-control {
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    font: 10px Arial;
}
.table-custom-filter > .Select-control,
.table-custom-filter > .Select-control > *,
.table-custom-filter > .Select-control > * > * {
    height: calc(25.53px - 4px) !important;
    /*line-height: 2 !important;*/
    /*text-transform: uppercase;*/
    /*letter-spacing: 0.1rem;*/
    /*font: 10px Arial;*/
    /*margin-top:  auto;*/
    /*margin-bottom:  auto;*/
    /*padding-top: 12px;*/
}
.table-custom-filter > .Select-control > * > * {
    /*padding-top: 12px;*/
    line-height:  25.53px !important;
}

.Select-arrow {
    --faded-dropdown: transparent !important; /*make arrow not visible when not hovered*/
}
.Select-arrow-zone {
    padding: 0 !important;
    width: 15px !important;
}

.table-custom-filter > .Select-menu-outer {
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    font: 9px Arial;
}

.table-tool-medium {
    height: 25.53px;
    width: 15.15rem;
    margin-right: 1rem;
    padding: 0 !important;
}

.table-tool-small {
    height: 25.53px;
    width: 9rem;
    margin-right: 1rem;
    padding: 0 !important;
}

.dash-tooltip {
    margin-top: 0.25rem !important;
}

.dash-tooltip > * {
    border-radius: .25rem !important;
    text-align: center !important;
    background-color: #5a5a5a !important;
    opacity: 0.95 !important;
}

.dash-tooltip:before, .dash-tooltip:after {
    border-bottom-color: rgba(90, 90, 90, .77) !important; /*#5a5a5a*/
}

.dash-table-tooltip {
    max-width: 17rem !important;
    min-width: 10rem !important;
    font-size: 11px !important;
    color: whitesmoke !important;
    letter-spacing: .05em;
}


/*------------------------------------------------------------------------------------*/
/* DataTable */

/* dash cell & dropdown cell */
.dash-cell,
.dash-dropdown-cell-value-container > .Select > .Select-control > .Select-multi-value-wrapper > .Select-value {
    font-size: 11px !important;
    padding: 0 !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    word-break: normal !important;
    white-space: break-spaces; /* enable word-breaking/wrapping */
}

.dash-dropdown-cell-value-container > .Select > .Select-control > .Select-multi-value-wrapper > .Select-value {
    max-width: calc(100% - 15px);
}

/* dropdown cell "X" */
.dash-dropdown-cell-value-container > .Select > .Select-control > .Select-clear-zone,
.dash-dropdown-cell-value-container > .Select > .Select-control > .Select-clear-zone > * {
    visibility: hidden;
    width: 0 !important;
    height: 0 !important;
}

/* get rid of needless x-scroll */
.dash-spreadsheet-inner {
    min-width: calc(100% - 15px) !important;
}

.cell--selected {
    background-color: white !important;
}

.Select-menu-outer {
    display : block !important; /* make visible */
    --accent : black;
    padding-left: 1.5em;
}

.admin-table-button {
    margin-right: 10rem;
    width: calc(100% - 10rem);
}

.dash-spreadsheet-menu {
    position: relative;
    float: right;
}
.data-table-outer > .dash-table-container > .dash-spreadsheet-menu {
    margin-bottom: 0.25rem !important;
    margin-top: calc(-25.53px - 1px); /*shift pseudo table-controls down*/
    margin-right: 1em;
}
.admin-table > .dash-table-container > .dash-spreadsheet-menu {
    margin-bottom: 1rem;
    margin-top: calc(-25.53px * 1.5);
}

.dash-spreadsheet-menu > * {
    padding: 0 !important;
}

.export, .show-hide { /* copy btn btn-outline-secondary */
    color: #5a5a5a;
    border-color: #5a5a5a;
    display: inline-block;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    border-radius: .25rem;
    margin: 0;
    margin-left: 1rem;
    padding: 0 !important;
}
.export {
    width: 9rem;
}
.show-hide {
    width: 15rem;
}
.data-table-outer > .dash-table-container > .dash-spreadsheet-menu > * > .export,
.data-table-outer > .dash-table-container > .dash-spreadsheet-menu > * > .show-hide {
    height: 25.53px !important;
}
.data-table-outer > .dash-table-container > .dash-spreadsheet-menu > * > .show-hide {
    visibility: hidden;
    width: 0px !important;
}
.export:hover, .show-hide:hover { /* copy btn btn-outline-secondary */
    color: whitesmoke;
    background-color: #5a5a5a;
    border-color: #5a5a5a;
}

.previous-next-container {
    margin-right: 1em;
}

.dash-header {
    border: 0 !important;
    padding-right: 0.5em !important;
    text-transform: uppercase;
    letter-spacing: .075em;
    font: bold 10px Arial !important;
}
.dash-header > div {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}
.dash-header, .dash-delete-header {
    border-right-width: 1px !important;
    border-left-width: 0 !important;
    border-top-width: 0 !important;
    border-color: lightgray !important;
}

.dash-filter {
    padding-left: 1rem !important;
}
.dash-filter--case {
    visibility: hidden;
    height: 0px !important;
    width: 0px !important;
}
.dash-filter, .dash-filter > * > input[type=text] {
    text-transform: uppercase;
    letter-spacing: .075em;
    font: italic bold 10px Arial !important;
    color: whitesmoke !important;
    border: 0 !important;
    text-align: left !important;
}
.dash-delete-header {
    border: 0 !important;
}
tr:nth-child(2) > th { /* SECOND HEADER */
    background-color: #17a2b8 !important;
}
.dash-delete-header, .dash-delete-cell {
    max-width: 12px !important;
    width: 12px !important;
    min-width: 12px !important;
}

.column-header--hide { /* Hide the column header hide icon */
    visibility: hidden !important;
    padding: 0 !important;
    width: 0 !important;
}

.column-actions > .column-header--sort {
    float: right !important;
    margin-left: 0.25rem;
    margin-right: 1rem;
    text-align: right;
    flex-basis: 1%;
}

.column-header-name {
    flex-basis: 99%;
}

.current-page {
    width: 35px !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.dash-delete-cell {
    text-align: center !important;
    padding: 0 !important;
}

.dash-spreadsheet-container table {
    --accent: #17a2b8 !important;
    --selected-background: #17a2b8 !important;
    --selected-color: #17a2b8 !important;
}

/*------------------------------------------------------------------------------------*/
/* dbc Buttons */

.btn {
    padding: .375rem 2rem;
}

.btn-dark {
    background-color: black;
}

.btn-dark:hover {
    background-color: #5a5a5a;
}

.btn-outline-secondary:hover {
    background-color: #5a5a5a;
    border-color: #5a5a5a;
}

.btn-success {
    background-color: #258835;
    border-color: #258835;
}

.btn-success:hover {
    background-color: #17a2b8;
    border-color: #17a2b8;
    color: whitesmoke;
}

.btn-outline-success {
    color: #258835;
    border-color: #258835;
}

.btn-outline-success:hover {
    background-color: #258835;
}

.text-success {
    color: #258835 !important;
}