* {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
    font-size: 100%;
}

@media print {
    .menu {
        display: none !important;
    }
}

body {
    background-color: #88a3c9;
}

aside {
    font-size: smaller;
    font-style: italic;
    flex-basis: 100%;
}

form,
form .menu {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: center;
    gap: 10px;
    padding: 15px;
}

fieldset, fieldset div, fieldset .wide {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: center;
    gap: 10px;
    border-color: lightgray;
}

:disabled {
    cursor: not-allowed;
    text-decoration: line-through;
}

.error_message {
    color: red;
    text-align: center;
    font-weight: bold;
}

.menu {
    overflow: hidden;
    padding: 15px;
    flex: 1 100%;
}

.top {
    border-bottom: 1px solid lightgray;
    font-size: 1.2em;
}

.bottom {
    border-top: 1px solid lightgray;
}

.wide {
    width: 100%;
}

hr {
    border: 1 px solid lightgray;
    box-shadow: none;
}

button {
    display: inline-block;
    border: none;
    border-radius: 5px;
    background-color: #3274d6;
    color: #ffffff;
}

button label {
    margin-right: 2px;
}

button:not(.disabled-button):not(:disabled):hover {
    box-shadow: 0px 12px 10px -7px lightskyblue;
}

button.disabled-button:hover,
button:disabled:hover {
    cursor: not-allowed;
    /* copy any changes to button{} style here */
    display: inline-block;
    border: none;
    border-radius: 5px;
    background-color: #3274d6;
    color: #ffffff;
}

.selected-button {
    box-shadow: 0px 12px 10px -7px lightgrey;
}

.tog-vis-on,
.displayed-picker-content,
.advanced-displayed {
    display: flex;
}

.tog-vis-off,
.hidden-picker-content,
.advanced-hidden {
    display: none;
}

.hidden, .hidden * {
    display: none !important;
}

.form-element,
.label-text,
.check-label,
.radio-label {
    white-space: nowrap;
}

.form-element:first-child,
.label-text:first-child,
.check-label:first-child,
.radio-group:not(:last-child),
.element-series:not(:last-child) {
    margin-right: 3px;
}

.label-text:has(input[required]) > label {
    font-weight: bold;
}

.fa-label-text {
    display: inline-flex;
    white-space: nowrap;
}

.fa-label-text label {
    background-color: #3274d6;
    color: #ffffff;
    height: 25px;
    width: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.radio-group {
    display: inline-flex;
    border: 1px dotted black;
    border-radius: 3px;
    width: fit-content;
    padding: 2px;
    gap: 2px;
}

.radio-group input[type="radio"]:checked+label,
.check-label input[type="checkbox"]:checked+label {
    text-decoration: underline;
}

.radio-group input[type="radio"]:not(:disabled):hover+label,
.check-label input[type="checkbox"]:not(:disabled):hover+label {
    text-shadow: 1px 1px lightskyblue;
}

div:has(.results) {
    overflow-y: auto;
}

.results {
    text-align: left;
    flex: 1 100%;
}

.results th {
    background-color: #3274d6;
    color: #ffffff;
    position: sticky;
}

.results tr:nth-child(even) {
    background-color: #f2f2f2;
}

.results tr:nth-child(odd) {
    background-color: white;
}

.selectable tr:hover {
    background-color: lightskyblue;
}

.selectable tr:has(input[type="radio"]:checked) {
    font-weight: bold;
}

.pass {
    background-color: yellowgreen;
}

.fail {
    background-color: tomato;
}

.input-table {
    border-collapse: collapse;
}

.input-table th {
    border-bottom: 1px solid lightgray;
}

.input-table td {
    text-align: center;
}

.input-table button {
    width: 100%;
}

.colspan-table {
    width: 100%;
    table-layout: fixed;
}

.gender-colomns {

    .gc-identifier {
        width: 15%;
        background-color: tan;
    }

    .gc-men {
        width: 40%;
        background-color: lightblue;
    }

    .gc-gutter {
        width: 5%;
        background-color: transparent;
    }

    .gc-women {
        width: 40%;
        background-color: lightpink;
    }

    tr:nth-child(even) td {
        background-color: linen;
    }
}

.applicant-detail-cell {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 10px;
}

.same-user-email {
    background-color: lightgreen;
}

.other-user-email {
    background-color: yellow;
}

.status-icon {
    font-size: large;
}

.ordained-icon {
    color: navy;
}

.allergy-icon {
    color: yellow;
}

.diet-icon {
    color: orange;
}

.disability-icon {
    color: darkblue;
}

.smoker-icon {
    color: gainsboro;
}

form fieldset.field-alert {
    border-width: 2px;
    border-style: solid;
    border-color: red !important;
}

/* login form */
.login {
    width: 400px;
    background-color: #ffffff;
    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
    margin: 100px auto;
}

.login h1 {
    text-align: center;
    color: #5b6574;
    font-size: 24px;
    padding: 20px 0 20px 0;
    border-bottom: 1px solid #dee0e4;
}

.login form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 20px;
}

.login form label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: #3274d6;
    color: #ffffff;
}

.login form input[type="password"],
.login form input[type="text"] {
    width: 310px;
    height: 50px;
    border: 1px solid #dee0e4;
    margin-bottom: 20px;
    padding: 0 15px;
}

.login form input[type="submit"] {
    width: 100%;
    padding: 15px;
    margin-top: 20px;
    background-color: #3274d6;
    border: 0;
    cursor: pointer;
    font-weight: bold;
    color: #ffffff;
    transition: background-color 0.2s;
}

.login form input[type="submit"]:hover {
    background-color: #2868c7;
    transition: background-color 0.2s;
}

/* list transfer controls */
.list-manager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    font-family: Arial, sans-serif;
    margin: 20px;
}

.list-container {
    border: 1px solid #ccc;
    width: 250px;
    padding: 10px;
}

.criteria-container {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 20px;
}

.list-container h3 {
    margin-bottom: 10px;
}

.transfer-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.transfer-controls button {
    padding: 5px 10px;
    cursor: pointer;
}

#availableList,
#selectedList {
    width: 100%;
    height: 300px;
}

.reorder-controls {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}