/* forms style */
body {
    --base-font-family: system-ui, sans-serif;
    --button-color: #404f52;
    --button-color-hover: #506367;
    --lightgrey: #dfe1e1;
    /*--metalblue: #37647c;*/

    --text-font-size: 16px;
    --text-line-height: 22px;
    --text-margin: 16px;

    --input-border-color: #888;
}

.form-container {  width: fit-content; margin: 0 auto; }
.form-title { font-size: 26px; margin: 0; padding: 10px 24px;  border-radius: 8px 8px 0 0; background-color: #dce0e5; color: #555c70;  border: 1px solid #d3d7dc; border-bottom: none; font-weight: 600; }
.form-box { width: fit-content; margin: 0 auto 45px;}
.form-body { padding: 16px 24px; background-color: #f4f6f8; border-radius: 0 0 8px 8px; border: 1px solid #d3d7dc; border-top: none; margin-bottom: 26px;}
.form-body-compact {border-radius: 8px; border-top: 1px solid #d3d7dc;}

.form-table { width: 100%; }
.form-table td { padding: 8px 12px; border-bottom: 1px solid var(--lightgrey); }
.form-table td.label-cell { vertical-align: top; padding-left: 0;}
.form-table td.input-cell { padding-right: 0; }

.input-label { color: #303044; display: block; padding: 4px 5px 5px; text-align: left;  min-width: 110px; white-space: nowrap; }
/*.input-label::after { content: ":"}*/

.block-input { padding: 3px 7px; font-size: 16px;  line-height: 24px; font-family: system-ui, sans-serif; color: #333; border: 1px solid var(--input-border-color); border-radius: 4px; }
.text-area-input { padding: 3px 6px 4px; resize: none; }
.select-input { padding: 4px 4px; }

/* radio, checkboxlist */

.item-label { white-space: nowrap; padding: 2px 14px 2px 8px; border-radius: 18px; display: flex; gap: 5px; }
.item-label:hover { background-color: #dce0e5;}
.item-caption { white-space: nowrap;}
.items-wrapper { display: flex; flex-flow: wrap row; align-items: flex-end; gap: 8px 10px; margin: 2px 0; }

/* checkbox, radio */

.checkbox, .radio { appearance: none; background-position: center center; background-repeat: no-repeat; background-color: white; --bg-checked-color: #0d6efd; --bg-checked-hover-color: #3c8bff; border: 1px solid var(--input-border-color); }
.checkbox { width: 18px; height: 18px; margin: 3px; --bg-checkbox-image: url('images/checkbox-checked-white-18x18.png'); border-radius: 4px; }
.checkbox-single { position:relative; top:4px;}
.checkbox-single:checked { border-color: var(--bg-checked-color); background-color: var(--bg-checked-color); background-image: var(--bg-checkbox-image); }
.checkbox-single:checked:hover { border-color: var(--bg-checked-hover-color); background-color: var(--bg-checked-hover-color); }
.radio {  width: 16px; height: 16px;  margin: 4px 2px;  border-radius: 16px; }

/* radio, checkboxlist - dynamic  */

.item-label.selected  {  background-color: #07f;  color: #fff;}
.item-label.selected .item-caption  { color: white;}
.item-label.selected:hover {  background-color: #07fb;  color: #fff;}
.item-label.selected .checkbox { border-color: #07f; background-image: url("images/checkbox-checked-black-18x18.png");}
.item-label.selected .radio { border-color: #07f; background-image: url("images/radio-checked-black-16.png");}
.item-label.selected:hover .checkbox { border-color: #07fb;}

/* buttons */

.form-button-bar { margin-top: 22px;}
.submit-button, .control-button { color: white; border: none; cursor: pointer; white-space: nowrap; font-family: var(--base-font-family); font-size: var(--text-font-size); }
.submit-button { padding: 8px 30px 10px;  border-radius: 5px; background-color: #a9b6bd;  }
.submit-button:hover {  }
.control-button { padding: 5px 22px 7px;  border-radius: 6px;  background-color: #839198; }
.control-button:hover { background-color: #98a8b0; }
.standard-button { background-color: #404f52;}
.standard-button:hover { background-color: #5c7277;}

.warning-button { background-color: #fc5244; }
.warning-button:hover { background-color: #d92a1b;}
.bar-button + .bar-button { margin-left: 12px;}

/* file upload input */

.upload-button-label { display: block; width: fit-content; }
.upload-input { color: #fff; opacity: 0.1; font-size: 1px; position: absolute; z-index: -100; } /* hide */
.upload-button {  display: block; width: fit-content;}

.upload-panel { background-color: var(--lightgrey); padding: 4px 8px;  border-radius: 2px; white-space: nowrap;}

/* required */
.upload-wrapper { display: flex; flex-flow: nowrap row; align-items: center; gap: 0 5px;}

.required-mark-container { position:relative; }
.required .required-mark-container::after { content: "*";  position: absolute; margin-left: -10px; top: 15px; color: red; font-size: 25px; font-weight: bold; }
.required .checkbox-container::after {  margin-left: 4px; top: 16px; }
.required .items-wrapper::after { position: relative; margin-left: -5px; top: 0; }
.required .upload-wrapper::after { position: static; margin-left: 1px; margin-top: 6px; }
.required .block-input { margin-right: 16px;}

/* flashes */

.modal { padding: 0 15px 10px; margin: 0 auto; width: fit-content; position: fixed; z-index: 100; top:70px; border: 1px solid #b1b4bb;  border-radius: 5px;  background-color: #dce0e5; box-shadow: 0 0 2px 2px #fff;  max-width: 700px; }
.dialog { padding-bottom: 15px;}

.faded-modal {opacity: 0;}

.modal .wrapper { padding: 10px 0; }
.modal .off-button { display: block; margin: 0 auto; width: 34px; height: 34px; border: none; border-radius: 6px; background: #404f52 url("images/icons/close-window-white.png") no-repeat center center; cursor: pointer;}
.modal .off-button:hover {background-color: #5b6c70;}

.none { display: none;}

.alert { min-width: 260px; padding: 8px 22px; margin: 12px 0; border: 1px solid #333; border-radius: 3px; text-align: center; font-size: 18px; }
.alert-success {background-color: #e6fae5; border-color: #54d70e; }
.alert-error { background-color: #fae4e4; border-color: #F00; color:#F00}
.alert-info, .alert-empty { background-color: #faf2e5; border-color: #d2bb96; color: #4F4B47;}

.dialog-message { line-height: 45px; text-align: center;}

/* testing */

/*input[type=checkbox] { appearance: none;}*/