.input {
    color: #232323;
    padding: 8px 10px;
    border: 1px solid #DDDDDD;
    border-radius: 5px;
    font-family: "Plus Jakarta Sans", sans-serif;
    transition: border-color .15s ease, box-shadow .15s ease;
}

input:read-only, textarea:read-only, .tdatepicker input:read-only {
    background-color: #f2f2f2;
    cursor: not-allowed;
}

input:read-only:focus, textarea:read-only, .tdatepicker input:read-only {
    border: 1px solid #e5e7eb;
}

textarea.input {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

label.field span {
    display: block;
    clear: both;
}

label:has(input[required]) > span::after, label.required > span::after, .required > label > span::after {
    content: " *";
    color: red;
}

label input, label select, label textarea {
    margin-top: 10px;
}

textarea {
    resize: vertical;
}

.input {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
}

.textarea-container {
    padding: 0;
    margin: 10px 0 0 0;
    border-radius: 5px;
}

.textarea-container textarea {
    border-bottom: none;
    margin: 0;
}

.textarea-container .description {
    background-color: #e5e7eb;
    border: 1px solid #e5e7eb;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top: none;
    margin-top: -4px;
    padding: 6px 8px;
    font-size: 11px;
    text-align: right;
    transition: border-color .15s ease, box-shadow .15s ease;
}

textarea:disabled + .description {
    display: none;
}

.input:focus, .code-inputs input:focus {
    outline: none;
    border-color: #232323;
}

.input-description {
    color: #6f6f6f;
    font-size: .8em;
    margin-top: 5px;
    display: block;
}

.input-description span.fa {
    color: #0e76b0;
}

.textarea-container:has(textarea:focus) .description {
    border-color: #232323;
}

.form-fields {
    margin-bottom: 25px;
}

.form-row {
    width: 100%;
    max-width: 680px;
    margin-bottom: 10px;
}

.form-row:last-child {
    margin-bottom: 0;
}

.form-buttons, .buttons {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.form-errors {
    padding: 0;
    margin: 0 0 15px 0;
    color: red;
}

button.button, button.a-button, a.button {
    cursor: pointer;
    padding: 12px 16px;
    border: none;
    font-weight: bold;
    font-family: inherit;
}

button.button, a.button {
    border-radius: 5px;
    background-color: #232323;
    color: #FCC700;
}

.button-full {
    width: 100%;
    display: block;
}

button.a-button {
    border: none;
    background: none;
    color: #232323;
    text-decoration: none;
}

button.a-button span {
    border-bottom: 1px solid #232323;
    padding-bottom: 3px;
}

button.copy-button {
    cursor: pointer;
    padding: 6px 8px;
    border: none;
    font-weight: bold;
    border-radius: 5px;
    background-color: #232323;
    color: #FCC700;
    font-family: inherit;
    margin-left: 8px;
}

button.button i.fa {
    margin-right: 5px;
    display: inline;
}

.checkbox input[type='checkbox'], .tchecklist-checkbox input[type='checkbox'], .radio input[type='radio'] {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.checkbox, .radio, .tchecklist-checkbox {
    cursor: pointer;
    margin: 5px 5px 0 0;
    display: block;
}

.checkbox input[type='checkbox']:disabled ~ span,
.tchecklist-checkbox input[type='checkbox']:disabled ~ span,
.radio input[type='radio']:disabled ~ span {
    cursor: not-allowed;
}

.checkbox input[type='checkbox']:disabled ~ span::after,
.tchecklist-checkbox input[type='checkbox']:disabled ~ span::after,
.radio input[type='radio']:disabled ~ span::after {
    color: #eee !important;
}

.checkbox:disabled, .radio:disabled, .tchecklist-checkbox:disabled {
    cursor: not-allowed;
}

.checkbox input[type='checkbox']:checked ~ span,
.tchecklist-checkbox input[type='checkbox']:checked ~ span {
    border-radius: 3px;
    background-color: #232323;
    border-color: #232323;
}

.radio input[type='radio']:checked ~ span::after {
    opacity: 1;
    background-color: #FCC700;
}

.checkbox span, .tchecklist-checkbox span, .radio span {
    position: relative;
    display: inline-block;
    height: 20px;
    width: 20px;
    border: 1px solid #dddddd;
    background-color: #ffffff;
    transition: background-color .15s;
    border-radius: 3px;
    margin-top: -3px;
    margin-right: 10px;
    vertical-align: middle;
}

.radio span {
    background-color: #fff;
    border-radius: 50%;
}

.checkbox span::after, .tchecklist-checkbox span::after, .radio span::after {
    position: absolute;
    content: '';
}

.checkbox input[type='checkbox'] ~ span::after,
.tchecklist-checkbox input[type='checkbox'] ~ span::after {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    font-family: FontAwesome, "Font Awesome 6 Pro";
    font-weight: 900;
    font-size: 10px;
    color: #fff;
    line-height: 18px;
    content: '\f00c';
    text-align: center;
    display: none;
}

.checkbox input[type='checkbox']:checked ~ span::after,
.tchecklist-checkbox input[type='checkbox']:checked ~ span::after {
    color: #FCC700;
    display: block;
}

.radio input[type='radio'] ~ span::after {
    top: 3px;
    right: 3px;
    bottom: 3px;
    left: 3px;
    background-color: #fff;
    border-radius: 50%;
    opacity: 0;
    transition: opacity .15s ease-out;
}

.radio input[type='radio']:checked ~ span::after {
    background-color: #FCC700;
    /*outline: 4px solid #232323;*/
}

.radio input[type='radio']:checked ~ span {
    /*border-color: #232323;*/
}

#toggle-password, #toggle-confirm-password {
    cursor: pointer;
    display: block;
    text-align: end;
    margin: -24px 10px 20px 0;
    transition: .2s ease;
}

#toggle-password:hover, #toggle-confirm-password:hover {
    color: #FCC700;
    transition: .2s ease;
}

input::-ms-reveal {
    display: none;
}

.form-row-dual {
    display: flex;
    flex-direction: row;
    gap: 20px;
    width: 100%;
}

.form-row-dual .field {
    width: 100%;
}

.form-fields legend {
    font-weight: bold;
}

.form-fields legend, .form-fields sub {
    padding: 0 10px;
    margin-left: -10px;
    font-style: italic;
}

.form-fields sub {
    margin: 5px 0 10px 0;
    padding: 0;
}

.form-fields fieldset {
    padding: 15px 25px 25px 25px;
    border: 1px solid #DDDDDD;
    border-radius: 10px;
    margin-top: 15px;
}

.form-fields fieldset:first-of-type {
    margin-top: 0;
}

.otp-form .form-group {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-bottom: 10px;
}

.otp-form .overlay {
    word-wrap: break-word;
    padding: 5px;
}

@media only screen and (max-width: 600px) {
    .otp-form .form-group {
        flex-direction: column;
    }

    .otp-form .form-group .center-text {
        text-align: left;
    }
}

.otp-form .qrcode-image {
    position: relative;
}

.otp-form .qrcode-image, .otp-form .qrcode-image img {
    max-width: 100%;
    height: auto;
}

.otp-form .form-group .center-text {
    text-align: center;
}

.otp-form .qrcode-image div.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background-color: rgba(0, 0, 0, 0.5);
}

.otp-form .qrcode-image .overlay .filler {
    font-size: 13px;
    background-color: #ffffff;
    position: absolute;
    top: 40%;
    width: 100%;
    padding: 5px 10px;
    left: 0;
    right: 0;
}