html,
body {
    height: 100%;
    font-size: unset !important;
}

.wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto -60px;
    /* margin: 20px; */
    padding: 0 0 260px;
    display: flex;
}

.wrap > .container {
    /* padding: 70px 15px 20px; */
    padding: 20px 15px 20px;
}

.footer {
    height: 60px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.jumbotron {
    text-align: center;
    background-color: transparent;
}

.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'FontAwesome';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}

a.asc:after {
    content: /*"\e113"*/ "\f161";
}

a.desc:after {
    content: /*"\e114"*/ "\f160";
}

.sort-numerical a.asc:after {
    content: "\e153";
}

.sort-numerical a.desc:after {
    content: "\e154";
}

.sort-ordinal a.asc:after {
    content: "\e155";
}

.sort-ordinal a.desc:after {
    content: "\e156";
}

.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align the logout "link" (button in form) of the navbar */
.nav li > form > button.logout {
    padding: 15px;
    border: none;
}

@media(max-width:767px) {
    .nav li > form > button.logout {
        display:block;
        text-align: left;
        width: 100%;
        padding: 10px 15px;
    }
}

.nav > li > form > button.logout:focus,
.nav > li > form > button.logout:hover {
    text-decoration: none;
}

.nav > li > form > button.logout:focus {
    outline: none;
}

#mainNav {
    background-color: #193646;
    color: #ffffff;
}

.navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .nav-link.active {
    /* color: rgba(0, 0, 0, 0.9); */
    color: white;
}

.navbar-light .navbar-nav .nav-link {
    /* color: rgba(0, 0, 0, 0.5); */
    color: white;
}

.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
    /* color: rgba(219, 200, 200, 0.7); */
    color: white;
}

.navbar-light .navbar-brand {
    color: #ffffff;
}
.navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {
    color: #f5b01b;
}

form .has-error .help-block {
    color: #d45553;
}

.img-thumbnail {
    max-width: 150px;
}

.bs-tooltip-right .notes-tooltip.tooltip-inner {
    min-width: 350px;
    padding: 1em;
    text-align: unset;
    background-color: #eeeeee;
    color: black;
    box-shadow: 2px 2px 4px 0px rgba(161, 161, 161, 1);
}

.bs-tooltip-right .notes-tooltip.arrow::before {
    border-right-color: #eeeeee;
}

/* Shadow for tooltip arrow: https://stackoverflow.com/a/58885925/3938401 */
.bs-tooltip-right .notes-tooltip.arrow::after {
    content: "";
    position: absolute;
    left: 100%;
    z-index: -1;
    border: 5px solid #eeeeee;
    transform-origin: 0 0;
    transform: rotate(45deg);
    box-shadow: 2px 2px 4px 0px rgba(161, 161, 161, 1);
}

.bs-tooltip-left .notes-tooltip.tooltip-inner {
    min-width: 350px;
    padding: 1em;
    text-align: unset;
    background-color: #eeeeee;
    color: black;
    box-shadow: 2px 2px 4px 0px rgba(161, 161, 161, 1);
}

.bs-tooltip-left .notes-tooltip.arrow::before {
    border-left-color: #eeeeee;
}

/* Shadow for tooltip arrow: https://stackoverflow.com/a/58885925/3938401 */
.bs-tooltip-left .notes-tooltip.arrow::after {
    content: "";
    position: absolute;
    left: -1px;
    top: -2px;
    z-index: -1;
    border: 5px solid #eeeeee;
    transform-origin: 0 0;
    transform: rotate(45deg);
    box-shadow: 2px 2px 4px 0px rgba(161, 161, 161, 1);
}

/* CSS for notes in tooltip */
.notes-tooltip.tooltip-inner p, .notes-tooltip.tooltip-inner span {
    margin-bottom: 0px;
    font-size: 16px !important;
    background-color: #eeeeee;
    color: black; /* by default, display black text */
}

.tooltip {
    pointer-events: none;
}  

/* CSS for notes on note index */
.notes-text-cell p, .notes-text-cell span {
    font-size: 16px !important;
}

#manuscript-table img {
    max-width: 300px;
    min-width: 150px;
}

.form-group .trumbowyg-box {
    margin-top: 0px;
    border-radius: 4px;
}

/* CSS for notes in trumbowyg editor */
.trumbowyg-editor p, .trumbowyg-editor span {
    font-size: 32px;
    margin-bottom: 0px;
    line-height: 38px;
}

/* CSS for notes on view note model page */
table .view-notes-text-cell p, table .view-notes-text-cell span {
    font-size: 28px !important;
    margin-bottom: 0px !important;
}

/* CSS for notes on view slide model page */
.card-body.notes-text p, .card-body.notes-text span {
    font-size: 28px !important;
    margin-bottom: 0px !important;
}

/* CSS for manuscript notes */
#manuscript-table tbody td.manuscript-notes p, #manuscript-table tbody td.manuscript-notes span {
    font-size: 24px !important;
    margin-bottom: 0px !important;
}

/*
 * Show an asterisk on required fields 
 * The no-asterisk class is added automatically in site.js to any disabled, readonly, or bootstrap switches.
 * You can also add no-asterisk manually if you don't want it to be labled as required. Eg.
 * $form->field($model, 'default', ['options' => ['class' => 'no-asterisk']])
 */
form div.required:not(.no-asterisk) label.control-label:after {
    content:"\00a0*\00a0\00a0";
    color:red;
}

/* Help for overlays for card image from: */
/* https://stackoverflow.com/questions/21414925/why-doesnt-inset-box-shadow-work-over-images/21415060#21415060 */
/* https://stackoverflow.com/questions/57590750/card-img-overlay-overflows-card-body */
.shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: inset 3px 3px 10px 1000px rgba(0,0,0,0.2) !important;
    border-radius: 0.25rem !important;
    top: 0;
    left: 0;
}

img.hidden-eye-symbol {
    width: 35%;
    pointer-events: none;
}

span.hidden-slide-text {
    color: white;
    font-size: 22px;
    pointer-events: none;
    font-weight: bold;
}

span.hidden-slide-text:hover {
    color: white;
}

#manuscript-table td img.hidden-eye-symbol {
    min-width: 0;
}

h1 img.hidden-eye-symbol-text {
    vertical-align: baseline;
    height: 28px;
}

.copy-link, .copy-link:hover {
    text-decoration: none;
}

.green-icon {
    color: rgb(28, 148, 28);
}

.red-icon {
    color: rgb(236, 25, 25);
}

/* https://stackoverflow.com/a/11552460/3938401 */
.center-cropped {
    object-fit: none; /* Do not scale the image */
    object-position: center; /* Center the image within the element */
    height: 200px;
    width: 250px;
}

.modal.full-width-modal .modal-dialog {
    max-width: 90%; /* Make a modal that takes the full available width. */
}