﻿/*!
 * ccom-pflanagan-core.bs5.css v3.0.8
 *
 * https://git.uiowa.edu/ccom/shared/pflanagan/ccom-pflanagan-assets
 *
 * Last verified: 6/12/2026
 */

:root {
    --bs-placeholder-color: #6c757d;
    --bs-link-color-rgb: 13, 110, 253;
    --bs-text-muted-color: #6c757d;
    --bs-text-extra-muted-color: rgba(108, 117, 125, 0.6);  /* same as bs5 text-muted color but with alpha */
    --bs-form-control-border-color: #ced4da;
    --bs-form-control-sm-font-size: .875rem;
    --bs-form-control-lg-font-size: 1.25rem;
    --bs-form-control-form-floating-padding-right: .75rem;
    --bs-form-control-form-floating-padding: 1rem var(--bs-form-control-form-floating-padding-right);
    --bs-form-select-form-floating-padding-right: 2.25rem;
    --form-check-padding-left: 1.625em;
    --form-check-input-wh: 1.1875em;
    --form-switch-padding-left: 2.5em;
    --form-switch-width: 2em;
    --readonly-opacity: .8;
    --form-floating-label-transform: scale(.85) translateY(-.6rem) translateX(.15rem);
    --form-floating-label-opacity: .9875;  /* any less gives contrast warnings */
    --form-floating-form-control-padding-x: .75rem;
}

.table {
    --bs-table-striped-bg: rgba(0, 0, 0, 0.025);
    --bs-table-hover-bg: rgba(0, 0, 0, 0.05);
}

body,
.datepicker,
.select2-container,
.select2-container--bootstrap .select2-selection,
.select2-container--bootstrap .select2-search--dropdown .select2-search__field,
.tooltip,
.bootbox {
    font-family: 'Open Sans', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

hr {
    border-color: var(--bs-border-color);
    opacity: 1;
}

.vertical-align-middle {
    vertical-align: middle !important;
}

.fs-40pct {
    font-size: 40% !important
}

.fs-70pct {
    font-size: 70% !important
}

.mx--3 {
    margin-right: -1rem !important;
    margin-left: -1rem !important;
}

.mw-none {
    max-width: none !important;
}

.scroll-x {
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.overflow-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.text-extra-muted {
    color: var(--bs-text-muted-color) !important;
    opacity: 0.60;
}

.alert.alert-condensed {
    font-size: 90%;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.alert.alert-condensed .btn-close {
    background-size: .75em;
    padding-top: .75rem;
    padding-bottom: .75rem;
}

.suppress-valid-styling .form-control.is-valid,
.suppress-valid-styling .form-select.is-valid,
.suppress-valid-styling .was-validated .form-control:valid,
.suppress-valid-styling .was-validated .form-select:valid:not([multiple]):not([size]) {
    border-color: var(--bs-form-control-border-color);
    background-image: none;
}

.suppress-valid-styling .form-floating > .form-control.is-valid,
.suppress-valid-styling .was-validated .form-floating > .form-control:valid {
    padding-right: var(--bs-form-control-form-floating-padding-right);
}

.suppress-valid-styling .form-select.is-valid,
.suppress-valid-styling .was-validated .form-select:valid:not([multiple]):not([size]) {
    background-image: none; /* TODO: improve so this doesn't remove the dropdown caret for .form-select */
}

.suppress-valid-styling .form-floating > .form-select.is-valid,
.suppress-valid-styling .was-validated .form-floating > .form-select:valid:not([multiple]):not([size]) {
    padding-right: var(--bs-form-select-form-floating-padding-right);
}

/* .btn */

.btn-light {
    --bs-btn-border-color: #dae0e5;
    --bs-btn-disabled-border-color: var(--bs-btn-border-color);
    --bs-btn-hover-border-color: #d2d9df;
    --bs-btn-hover-bg: #f0f2f4;
}

.btn-tiny, .btn-group-tiny > .btn {
    border-radius: 3px;
    font-size: 11px;
    line-height: 11px;
    padding: 3px 6px;
}

.btn-group > .dropdown-toggle-split {
    border-left: none;
}

.dropdown-toggle.prevent-caret::after {
    display: none !important;
}


/* .table */

.table > :not(caption) > * > * {
    /*box-shadow: none;*/
}

.table tbody td {
    white-space: nowrap
}

.table-striped tbody tr:nth-of-type(2n+1),
.table-striped-reverse tbody tr:nth-of-type(2n) {
    /*background-color: var(--bs-table-striped-bg);*/
}

.table-striped > tbody > tr:nth-of-type(odd) > *,
.table-striped-reverse > tbody > tr:nth-of-type(even) > * {
    --bs-table-color-type: var(--bs-table-striped-color);
    --bs-table-bg-type: var(--bs-table-striped-bg);
}

.table-striped.table-hover tbody tr:hover,
.table-striped-reverse.table-hover tbody tr:hover {
    background-color: var(--bs-table-hover-bg);
}

.table.table-clickable td {
    cursor: pointer;
}

.table.wrap-first td:first-child,
.table.wrap-last td:last-child {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.table td.button-cell {
    width: 0;
}

.table td.button-cell {
    padding: 4px;   /* this changes for wider viewports */
}

.table td.button-cell ~ td:not(.button-cell) {
    padding: .4rem .5rem .35rem;
}

.table .button-cell button {
    --bs-btn-padding-y: 0.125rem;
    --bs-btn-padding-x: 0.25rem;
    background-color: transparent;
    border-color: transparent;
}

.table tr:hover .button-cell button,
.table tr .button-cell > button:focus {
    box-shadow: none;
}

.table tr:not(:hover) .button-cell button:not(:focus):not(:active) {
    color: var(--bs-text-muted-color) !important;
    opacity: 0.5;
}

.table tr .button-cell button:hover,
.table tr .button-cell button:focus,
.table tr .button-cell button:active {
    background-color: inherit;
    border-color: inherit;
}


/* .table-card */

.table-card {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow: hidden; /* ensures rounded corners clip table */
    background-color: var(--bs-body-bg);
}

.table-card.table {
    border-collapse: separate;
    border-spacing: 0;
}

.table-card tbody tr:first-child td {
    border-top: 0;
}

.table-card tbody tr:last-child td {
    border-bottom: 0;
}

.table-card tbody td {
    padding: .5rem .825rem;
}


/* .form-label */

.form-label {
    font-weight: 600;
}

.state-readonly > .form-label {
    opacity: var(--readonly-opacity);
}


/* .form-control-group */

.form-control-group {
    margin-bottom: 1rem;
}

.form-control-group.form-control-group-sm {
    font-size: var(--bs-form-control-sm-font-size);
}

.form-control-group.form-control-group-lg {
    font-size: var(--bs-form-control-lg-font-size);
}

.form-control-group.form-control-group-sm > label {
    margin-bottom: .3rem;
}

/*.form-control-group-lg > label:not(.valid-feedback):not(.invalid-feedback) {*/
/*    font-size: var(--bs-form-control-lg-font-size);*/
/*}*/


/* .form-check */

.form-check {
    padding-left: var(--form-check-padding-left);
    padding-bottom: .075rem; /* to offset margin-top of input */
    margin-bottom: .3rem;
}

.form-check.form-check-sm {
    padding-bottom: 0;
    font-size: var(--bs-form-control-sm-font-size);
}

.form-check.form-check-lg {
    padding-bottom: 0;
    font-size: var(--bs-form-control-lg-font-size);
}

.form-check:not(.form-switch) > .form-check-input { /* added direct child arrow 5/7/2026 for Recruitment. BOLO for side effects. */
    margin-top: .2em;
    margin-left: calc(-1 * var(--form-check-padding-left));
    width: var(--form-check-input-wh);
    height: var(--form-check-input-wh);
}

.form-check-inline .form-check-input ~ .valid-feedback,
.form-check-inline .form-check-input ~ .invalid-feedback {
    margin-left: 0;
}

.form-check.bold-when-selected input:checked ~ .form-check-label,
.form-check-toggle.bold-when-selected input:checked + label.btn,
.checklist.bold-when-selected .form-check input:checked ~ .form-check-label {
    font-weight: 600;
}

.form-check.state-readonly > .form-check-label {
    opacity: .8;
}

.form-check > .form-text {
    display: block;
}


/* .form-switch */

.form-switch {
    padding-left: var(--form-switch-padding-left);
}

.form-switch .form-check-input {
    margin-left: calc(-1 * var(--form-switch-padding-left));
    width: var(--form-switch-width);
    height: var(--form-check-input-wh);
}


/* .form-check-toggle */

.form-check-toggle.state-readonly .btn-check ~ .btn {
    opacity: .825;
}


/* .form-floating */

.form-floating,
.form-floating-style {
    margin-bottom: .5rem;
}

.form-floating-style {
    width: 100%;
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: .25rem .75rem .75rem;
}

.form-floating-style > label,
.form-floating-style > .label {
    font-size: 85%;
    margin-bottom: .5rem;
}

.form-floating > .form-radio-group {    /* style form-floating form-radio-group like a form-control */
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    min-height: calc(3.5rem + calc(var(--bs-border-width) * 2));
    line-height: 1.25;

    /* these diverge from actual form-control styling */
    padding: 1.9rem 0.75rem 0.625rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.form-floating > .form-radio-group:focus-within {   /* match Bootstrap focus behavior */
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
}

.form-floating > .form-control ~ label,
.form-floating > .form-select ~ label,
.form-floating > .form-radio-group ~ label,
.form-floating > .form-radio-group ~ .label,
.form-floating-style > label,
.form-floating-style > .label {
    color: var(--bs-placeholder-color);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label,
.form-floating > .form-radio-group ~ label {
    transform: var(--form-floating-label-transform);
    opacity: var(--form-floating-label-opacity);
}

.form-floating > .form-control-plaintext:focus,
.form-floating > .form-control-plaintext:not(:placeholder-shown),
.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown),
.form-floating > .form-select {
    padding-bottom: .2rem;
}

.form-floating > textarea.form-control-plaintext:focus,
.form-floating > textarea.form-control-plaintext:not(:placeholder-shown),
.form-floating > textarea.form-control:focus,
.form-floating > textarea.form-control:not(:placeholder-shown) {
    padding-top: 1.8rem;
}

.form-floating > .form-select {
    padding-left: var(--form-floating-form-control-padding-x);
}

.form-floating > label + .form-text {
    display: block;
    padding-left: var(--form-floating-form-control-padding-x);
    padding-right: var(--form-floating-form-control-padding-x);
}

.form-floating > .form-radio-group .form-check {
    margin-top: 2px;
    margin-bottom: 0;
}

.form-floating > .form-radio-group .form-check-label {
    margin-top: 2px;
}

/* use .height-standard when you want height to be same as form-floating text input */

.form-floating.height-standard > .form-radio-group {
    height: calc(3.5rem + calc(var(--bs-border-width) * 2));
    padding-top: 1.625rem;
}

.form-floating.height-standard > .form-radio-group .form-check {
    /*font-size: 97.5%;*/   /* radio buttons don't look right when you do it this way */
    transform: scale(0.975);
}

/* use .prevent-label-scaling when label gets clipped prematurely with ellipsis added */
.form-floating.prevent-label-scaling > label {
    --form-floating-label-transform: translateY(-.6rem) translateX(.15rem);
    font-size: .85em;
}

/* mimic .form-control:invalid styling */
.was-validated .form-floating > .form-radio-group:has(input[type="radio"]):not(:has(input[type="radio"]:checked)) {
    border-color: var(--bs-form-invalid-border-color);
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

/* darken form-floating labels when Chrome applies its blue background that fails contrast guidelines */
.form-floating > .form-control:-webkit-autofill ~ label,
.form-floating > .form-control:-webkit-autofill:focus ~ label,
.form-floating > .form-control:-webkit-autofill:hover ~ label,
.form-floating > .form-control:-webkit-autofill:active ~ label {
    color: #5f676f;
    opacity: 1;
}


/* .form-select */

.state-readonly > .form-select {
    background-color: var(--bs-body-bg);
    opacity: var(--readonly-opacity);
}


/* .modal */

/* this fixes issue of modal-dialog-scrollable not working when a form is wrapping the header/body/footer elements */
.modal > .modal-dialog-scrollable > .modal-content > form > .modal-body {
    max-height: calc(100vh - 190px);
}

.modal .alerts > .alert {
    margin: 15px 0 0;
}


/* .worker */

.worker.idle-hidden:not(.working) {
    display: none;
}

.worker > .worker {
    display: none;
    width: .9em;
    margin: 0 .25em 0 -.25em;
}

.btn-sm.worker > .worker {
    margin: 0 1px 0 0;
}

.worker.working > .worker {
    display: inline-block;
}


/* .bd-callout (see https://getbootstrap.com/docs/5.0/customize/components/) */

.bd-callout {
    padding:1.25rem;
    margin-top:1.25rem;
    margin-bottom:1.25rem;
    border:1px solid #e9ecef;
    border-left-width:.25rem;
    border-radius:.25rem
}
.bd-callout h4 {
    margin-bottom:.25rem
}
.bd-callout p:last-child {
    margin-bottom:0
}
.bd-callout code {
    border-radius:.25rem
}
.bd-callout+.bd-callout {
    margin-top:-.25rem
}
.bd-callout-info {
    border-left-color:#5bc0de
}
.bd-callout-warning {
    border-left-color:#f0ad4e
}
.bd-callout-danger {
    border-left-color:#d9534f
}


/* SweetAlert */

.swal2-modal .swal2-styled {
    margin-top: 4px;
}

.swal2-modal .swal2-buttonswrapper {
    margin-top: 30px;
}

.swal2-modal .swal2-buttonswrapper .btn + .btn,
.swal2-modal .swal2-actions .btn + .btn,
.swal2-container .swal2-actions .btn ~ .btn {
    margin-left: 5px;
}


/* .nav-pills */

.nav-pills-sm > .nav-item > .nav-link {
    /*padding: .25rem .5rem;*/
    /*font-size: .875rem;*/
    /*line-height: 1.5;*/
    /*border-radius: .2rem;*/
    --bs-nav-link-padding-y: 0.25rem;
    --bs-nav-link-padding-x: 0.5rem;
    --bs-nav-link-font-size: 0.875rem;
    /*--bs-nav-pills-border-radius: var(--bs-border-radius-sm);*/
}

.nav-pills-sm > .nav-item + .nav-item {
    margin-left: .25rem;
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .table-condensed:not(.table-sm), 
    .table-condensed-sm:not(.table-sm) {
        font-size: 1rem;
    }
}

/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) {
    .table-condensed:not(.table-sm),
    .table-condensed-sm:not(.table-sm),
    .table-condensed-md:not(.table-sm) {
        font-size: .9375rem;
    }
}

/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) {
    .table-condensed:not(.table-sm),
    .table-condensed-sm:not(.table-sm),
    .table-condensed-md:not(.table-sm),
    .table-condensed-lg:not(.table-sm) {
        font-size: .875rem;
    }

    .table td.button-cell {
        padding: 1px;
    }

    .table td.button-cell ~ td:not(.button-cell) {
        padding-top: 7px !important;    /* since button-cell increases row height *!*/
    }
}

/* X-Large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {

    .table-condensed:not(.table-sm),
    .table-condensed-sm:not(.table-sm),
    .table-condensed-md:not(.table-sm),
    .table-condensed-lg:not(.table-sm),
    .table-condensed-xl:not(.table-sm) {
        font-size: .8125rem;
    }

    .table-condensed:not(.table-sm) th,
    .table-condensed:not(.table-sm) td:not(.button-cell) {
        padding: .25rem .5rem;
    }
}

/* XX-Large devices (larger desktops, 1400px and up) */

@media (min-width: 1400px) {
}
