/* ---- FORMS --------------------------------------------------------------*/
/* Adapted from efs_shared_components/library/admin-styles.css, recolored to the site navy */

.siteforms .form-item { float: left; margin-top: 10px; width: 49%; display: block; }
.siteforms .form-item-2 { float: left; margin-top: 10px; width: 32%; display: block; }
.siteforms .form-item-3 { float: left; margin-top: 10px; width: 23%; display: block; }
.siteforms .form-item-4 { float: left; margin-top: 10px; width: 19%; display: block; }
.siteforms .form-item-full { margin-top: 10px; width: 100%; display: block; float: left; }
.siteforms .br { clear: both; }
.siteforms .col1 { margin-left: 0; margin-right: 2%; }

.siteforms .form-control { height: auto; display: block; width: 100%; padding: 10px 6px; font-size: 16px; line-height: 1; color: #000; background-color: #fff; border: 1px solid #222; border-radius: 6px; box-sizing: border-box; margin-top: 5px; font-family: arial; }
.siteforms textarea.form-control { line-height: 1.3; }
.siteforms .form-control-slim { height: auto; display: block; width: 100%; padding: 5px; font-size: 14px; line-height: 1; color: #000; background-color: #fff; border: 1px solid #222; border-radius: 6px; box-sizing: border-box; }
.siteforms select.form-control-slim { padding: 4px 5px; }
.siteforms .form-control-alt3 { margin-top: 3px; height: auto; display: block; width: 100%; padding: 10px 6px; font-size: 16px; line-height: 1.3; color: #000; background-color: #EAE8E8; border: 1px solid #838383; border-radius: 6px; box-sizing: border-box; }

.siteforms label { font-weight: bold; }
.siteforms label.col1 { margin-left: 0; clear: both; }
.siteforms label.choice { font-weight: normal; display: inline-block; margin: 8px 20px 0 0; }
.siteforms .form-hint { margin-top: 5px; color: #6B7590; }
.req { font-weight: bold; color: red; }

/* Checkbox lists (Manage Users' units): even columns that fill the row; long names wrap beside their checkbox */
.siteforms .choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 16px; margin: 8px 0 12px; }
.siteforms .choice-grid label.choice { display: flex; align-items: flex-start; gap: 6px; margin: 0; line-height: 1.35; }
.siteforms .choice-grid label.choice input { flex-shrink: 0; margin: 2px 0 0; }

/* ---- BUTTONS ------------------------------------------------------------*/

.buttons { clear: both; margin: 10px 0; }
.buttonleft { float: left; margin-right: 10px; }
.buttonright { float: right; }

.button { display: inline-block; box-sizing: border-box; color: #fff; padding: 10px 35px; border: 0; margin-top: 10px; text-decoration: none; font: bold 14px arial; border-radius: 5px; background-color: #3D5A8A; cursor: pointer; -webkit-appearance: none; appearance: none; }
.button:hover { background-color: #4A6A9E; }
.button.dkgrey { background-color: #838383; }
.button.dkgrey:hover { background-color: #6B6B6B; }

/* ---- MESSAGES -----------------------------------------------------------*/

.report { padding: 10px; text-align: center; font-weight: bold; margin-bottom: 10px; border-radius: 5px; }
.report-red { color: #000; border: solid 2px #A51E22; background-color: #FCB3BB; }
.report-green { color: #000; border: solid 2px #008000; background-color: #D0FDB3; }
.report-ltblue { color: #000; border: solid 2px #8CB7FC; background-color: #CADEFE; }

/* ---- LOGIN MODAL (session expired; see library/session-guard.js) --------*/

.login-modal { display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; overflow-y: auto; background-color: rgba(0,0,0,.5); }
.login-modal-content { background: #fff; width: 90%; max-width: 420px; margin: 10% auto; padding: 25px; border-radius: 6px; position: relative; box-sizing: border-box; font-size: 14px; }
.login-modal-content h2 { margin: 0 0 10px; }
.login-modal-content p { margin: 0 0 12px; line-height: 1.4; }
.login-modal-content label { display: block; margin-top: 10px; }
.login-modal-close { position: absolute; right: 12px; top: 6px; font-size: 28px; line-height: 1; background: none; border: 0; color: #2E3D5C; cursor: pointer; }
#loginMessage { display: none; margin-bottom: 5px; }

/* ---- CLEARFIX -----------------------------------------------------------*/

.clearfix::after { display: block; clear: both; content: ""; }
.clear { clear: both; }

/* ---- PHONES -------------------------------------------------------------*/

@media screen and (max-width: 600px) {

    .siteforms .form-item,
    .siteforms .form-item-2,
    .siteforms .form-item-3,
    .siteforms .form-item-4 { float: none; margin-left: 0; width: 100%; clear: both; }
    .siteforms .form-item-full { margin-bottom: 10px; }
    .siteforms .col1 { margin-right: 0; }


    .buttonleft, .buttonright { float: none; margin: 0; }
    .button { display: block; width: 100%; text-align: center; }

}