/* 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: 25px auto; }
.form-heading { font-size: 24px; margin: 0; padding: 8px 25px;  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;}
.form-body { padding: 6px 24px 16px; background-color: #f4f6f8; border-radius: 0 0 8px 8px; border: 1px solid #d3d7dc; border-top: none; }
.form-body-compact {border-radius: 8px; border-top: 1px solid #d3d7dc; padding-top: 10px;}

.base-form { width: fit-content;  position:relative; }  /* fix flashBox positioning */

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

.sub-table { width: 100%;  margin-top: 6px; margin-bottom: -1px; z-index: 100; position: relative; }
.sub-table td { }
.sub-table-heading td { padding: 5px 12px; text-align: center; background-color: #b9c1c2; color: black; font-weight: bold; }
.title-cell { border: 1px solid #b9c1c2;  border-right-color: #f6f6f6;}
.sub-table-heading td.title-cell:last-child {  border-right-color: #b9c1c2;}
.sub-table-row td { padding: 0; background-color: white; border: 1px solid #b9c1c2; }
.sub-table-row .block-input { border: none; border-radius: 0; display: block; width: 100%;  padding: 5px 10px; }
.sub-table-row .date-input {  padding: 4px 10px; }


.input-label { color: #303044; display: block; padding: 4px 10px 5px; margin-left: -8px;  border-radius: 5px;  text-align: left;  min-width: 110px; white-space: nowrap; transition: all 0.22s ease; /* highlight error */ }
/*.input-label::after { content: ":"}*/

.text-input[disabled] { color: #999; border-color: #aaa;}

.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; }
textarea.block-input { padding: 6px 10px 8px; }
.date-input { padding: 2px 7px; }
.select-input { padding: 4px 4px; }

.error .input-label { color: white;  background-color: #fd4c4c; }
.error .block-input { border-color: red;  background-color: #fce6e6;}

/* radio, checkboxlist */

.item-label { display: flex; border-radius: 18px; }
.item-label:hover { background-color: #dce0e5;}

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

/* checkbox, radio */

.checkbox, .checkbox-item, .radio-item { 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, .checkbox-item { width: 18px; height: 18px; margin: 3px; ; border-radius: 4px; }
.checkbox { position:relative; top:4px;}
.radio-item {  width: 16px; height: 16px;  margin: 4px 2px;  border-radius: 16px; }
.checkbox:checked { border-color: var(--bg-checked-color); background-color: var(--bg-checked-color); background-image: url('images/icons/checkbox-white-18.png'); }
.checkbox:checked:hover { border-color: var(--bg-checked-hover-color); background-color: var(--bg-checked-hover-color); }

/* radio, checkboxlist - dynamic  */

.item-wrapper.selected  {  background-color: #07f;  color: #fff;}
.item-wrapper.selected .item-caption  { color: white;}
.item-wrapper.selected:hover {  background-color: #07fb;  color: #fff;}

.checkbox-item:checked { border-color: var(--bg-checked-color); background-color: var(--bg-checked-color); background-image: url('images/icons/checkbox-white-18.png');}
.item-wrapper.selected .checkbox-item:checked { background-color: white; border-color: #07f; background-image: url("images/icons/checkbox-black-18.png"); }

.item-wrapper.selected .radio-item { border-color: #07f; background-image: url("images/icons/radio-black-16.png");}
.radio-item:checked { border-color: #0d6efd; background-image: url("images/icons/radio-blue-16.png");}
.item-wrapper.selected:hover .checkbox { border-color: #07fb;}

/* number */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }  /* Firefox */

/* buttons */

.button-bar { padding-top: 23px; display: flex; flex-flow: wrap row; justify-content: flex-start; gap: 12px; border-top: 1px solid var(--lightgrey);  }
.standard-button, .slim-button { color: white; border: none; cursor: pointer; white-space: nowrap; font-family: var(--base-font-family); font-size: var(--text-font-size); }
.standard-button { padding: 8px 30px 10px;  border-radius: 5px; background-color: #87959b;  }
.standard-button:hover { background-color: #95a4ab; }
.slim-button { padding: 5px 22px 7px;  border-radius: 6px;  background-color: #839198; }
.slim-button:hover { background-color: #98a8b0; }
.action-button { background-color: #404f52;}
.action-button:hover { background-color: #5c7277;}

.warning-button { background-color: #e73a2b; }
.warning-button:hover { background-color: #fc5041;}

.icon-button { display: block; width: 26px;  height: 26px; border: none;  transition: all 0.12s ease; border-radius: 3px; cursor: pointer; background-repeat: no-repeat; background-position: center center;}

.move-button {background-color: #006aeb; color: transparent;}
.move-button:hover { background-color: #006aebaa; }

.icon-up-white { background-image: url(images/icons/up-white.png); }
.icon-down-white { background-image: url(images/icons/down-white.png); }
.icon-delete-white { background-image: url(images/icons/delete-white.png); }

.item-button-bar {  display: flex; gap: 9px; padding: 4px 8px; align-items: center;}

/* 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;}

/* increment input */

.increment-input { padding-top: 4px;  /* fix */}
.increment-block {  display: flex; flex-direction: column; gap: 12px; }
.increment-box { width: fit-content; position:relative; }
.increment-overlay { display: block; position:absolute;  width: 100%; height: 100%; top: 0; z-index: 100;}
.increment-button-bar { display: flex; flex-direction: row; gap: 12px; justify-content: center;}
.increment-button { background-color: #b3c2c7; height: 33px; width: 33px;  border-radius: 4px; transition: background-color 0.18s ease-in-out; cursor: pointer; background-position: center center; background-repeat: no-repeat; }
.increment-button:hover {background-color: #a1b0b4;}
.readonly .increment-button, .readonly .increment-button:hover { background-color: #d3dfe3; cursor: default;}
.readonly .block-input {  background-color: #F2F4F5;}

.increment-button-up { background-image: url("images/icons/increment-up.png");}
.increment-button-down { background-image: url("images/icons/increment-down.png");}

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

.required-container { position:relative; }
.required .required-container::after { content: "*";  position: absolute; margin-left: 4px; top: 12px; color: red; font-size: 25px; font-weight: bold; }
.required .checkbox-container::after {  margin-left: 4px; top: 16px; }
.required .item-list-wrapper::after { position: relative; margin-left: -5px; top: 0; }
.required .upload-wrapper::after { position: static; margin-left: 1px; margin-top: 6px; }