/* ==================================================================================================================

    FORM STYLE
    ----------

    Usage text input:

    <div class="form-item">
      <label for="fieldId">Label Text</label>
      <input type="text" id="fieldId">
    </div>

    Usage dropdown select box:

    <div class="form-item">
      <label for="fieldId">Label Text</label>
      <select id="fieldId">
      <option value="">Option Text</option>
      </select>
    </div>

    Usage textbox:

    <div class="form-item">
      <label for="fieldId">Label Text</label>
      <textbox id="fieldId"></textbox>
    </div>

    Usage button:

    <div class="form-item">
      <input type="button" value="Button Text">
    </div>

    <div class="form-item">
      <button>Button Text</button>
    </div>

    Usage checkbox

    <div class="form-checkbox">
        <input type="checkbox" id="fieldId">
        <label for="fieldId">Checkbox Text</label>
    </div>

   ================================================================================================================== */

/* Global */

.form-item {
    margin-bottom: 10px;
}

.form-checkbox label,
.form-item label {
    width: 100%;
    box-sizing: border-box;
    display: block;
}

.form-checkbox label::after,
.form-item label {
    content: "";
    display: table;
    clear: both;
}

/* Text input */

.form-item input[type='datetime-local'], .form-item input[type='text'], .form-item input[type='password'], .form-item input[type='email'], .form-item textarea {
    width: 100%;
    box-sizing: border-box;
    display: block;
    padding: 5px;

    border: none;
    border-bottom: 2px solid #74C8DC;
    background-color: #f0f0f0;
    outline: none;
}
.form-item input[type='datetime-local']:focus, .form-item input[type='text']:focus, .form-item input[type='password']:focus, .form-item input[type='email']:focus, .form-item textarea:focus {
    background-color: #74C8DC;
    color: white;
}

/* Select */

.form-item select {
    width: 100%;
    box-sizing: border-box;
    display: block;
    padding: 5px;

    outline: none;
    border: none;
    border-bottom: 2px solid #74C8DC;
    background-color: #f0f0f0;
}
.form-item select:focus {
    background-color: #74C8DC;
    color: white;
}

/* Button */

.form-item button, .form-item input[type='submit'], .form-item input[type='button'] {
    all: unset;
    cursor: pointer;
    color: white;
    background-color: #002337;
    text-decoration: none !important;
    padding: 10px 20px 10px 20px;
    margin-top:20px;
    box-sizing: border-box;
}

.form-item button:disabled, .form-item input[type='submit']:disabled, .form-item input[type='button'] {
    background-color: #002337 !important;
    color: white;
    cursor: not-allowed;
}

.form-item button:hover, .form-item input[type='submit']:hover {
    color: white;
    background-color: #c41010;
}

/* Checkbox (old) */

.form-item input[type='checkbox'] {
    display: inline-block;
    box-sizing: border-box;
}
.form-item input[type='checkbox']:after {
    content:"\a";
    white-space: pre;
}

/* Checkbox (new) */
.form-checkbox {
    box-sizing: border-box;
    position: relative;
    display: block;
    align-items: center;
    cursor: pointer;
    margin-top:5px;
    margin-bottom: 5px;
}

.form-checkbox input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    width: 20px;
    height: 20px;
    z-index: 2;
    cursor: pointer;
}

.form-checkbox label {
    padding-left: 30px; /* 20px of box + 10px */
    cursor: pointer;
}

.form-checkbox label::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.form-checkbox input[type="checkbox"] + label::before {
    border: 2px solid #1c94c4;
    background-color: #f0f0f0;
}

.form-checkbox input[type="checkbox"]:disabled + label::before {
    border: 2px solid #c0c0c0 !important;
    background-color: #f0f0f0;
}

.form-checkbox input[type="checkbox"]:disabled,
.form-checkbox input[type="checkbox"]:disabled + label {
    cursor: not-allowed;
}

.form-checkbox input[type="checkbox"]:checked + label::before {
    border: 2px solid #1c94c4;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M 20,50 L 40,70 L 80,30" stroke="rgb(28, 148, 196)" stroke-width="10" fill="none"/></svg>');
}

.form-checkbox input[type="checkbox"]:disabled:checked + label::before {
    border: 2px solid #a0a0a0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M 20,50 L 40,70 L 80,30" stroke="gray" stroke-width="10" fill="none"/></svg>');
}