/*
* html.forms scss
*
* Copyright 2021, Johntor
*
*/
body {
    background: #00172e;
    color: #C3E5FB;
}

.ui-form-content {
    background-color: #00172e;
    padding: 0.5rem;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    border: 1px solid #22A9FF;
    -webkit-text-fill-color: #F0EC8F;
    -webkit-box-shadow: 0 0 0px 1000px #000A14 inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* width */
::-webkit-scrollbar {
    width: 15px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #003061;
    border: 1px solid #007dfa;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #004a94;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #CA7600;
}

.form_element {
    clear: both;
    width: 100%;
    padding-top: 0.2em;
    line-height: 1.5;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.form_element input, .form_element input[type=text], .form_element input[type=password], .form_element input.ui-autocomplete-input, .form_element textarea, .form_element select {
    display: block;
    width: 100%;
    height: 36px;
    padding: 0px 5px;
    font-family: Arial;
    font-weight: 400;
    line-height: 36px;
    font-size: 18px;
    color: #F0EC8F;
    background-color: #000A14 !important;
    background-clip: padding-box;
    border: 1px solid #22A9FF;
    border-radius: 6px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form_element input::-ms-expand, .form_element input[type=text]::-ms-expand, .form_element input[type=password]::-ms-expand, .form_element input.ui-autocomplete-input::-ms-expand, .form_element textarea::-ms-expand, .form_element select::-ms-expand {
    background-color: transparent;
    border: 0;
}

.form_element input::placeholder, .form_element input[type=text]::placeholder, .form_element input[type=password]::placeholder, .form_element input.ui-autocomplete-input::placeholder, .form_element textarea::placeholder, .form_element select::placeholder {
    color: #004a94;
    opacity: 1;
}

.form_element input:focus, .form_element input[type=text]:focus, .form_element input[type=password]:focus, .form_element input.ui-autocomplete-input:focus, .form_element textarea:focus, .form_element select:focus {
    color: #F0EC8F;
    background-color: #000A14;
    border-color: #22A9FF;
    outline: 0;
    box-shadow: 0 0 0 0.2rem #004a94;
}

.form_element input:focus.ui-state-error, .form_element input[type=text]:focus.ui-state-error, .form_element input[type=password]:focus.ui-state-error, .form_element input.ui-autocomplete-input:focus.ui-state-error, .form_element textarea:focus.ui-state-error, .form_element select:focus.ui-state-error {
    border: 2px solid #CA0000;
    box-shadow: 0 0 0 0.2rem #640000;
}

.form_element input:focus[readonly], .form_element input[type=text]:focus[readonly], .form_element input[type=password]:focus[readonly], .form_element input.ui-autocomplete-input:focus[readonly], .form_element textarea:focus[readonly], .form_element select:focus[readonly] {
    border-color: #777;
    outline: 0;
    box-shadow: none;
}

.form_element input:disabled, .form_element input[readonly], .form_element input[type=text]:disabled, .form_element input[type=text][readonly], .form_element input[type=password]:disabled, .form_element input[type=password][readonly], .form_element input.ui-autocomplete-input:disabled, .form_element input.ui-autocomplete-input[readonly], .form_element textarea:disabled, .form_element textarea[readonly], .form_element select:disabled, .form_element select[readonly] {
    background-color: #070E14 !important;
    border-color: #777;
    color: #BBB;
    opacity: 1;
}

.form_element input[type=file], .form_element input[type=file]:visited, .form_element input[type=file]:hover, .form_element input[type=file]:focus, .form_element input[type=file]:active {
    cursor: pointer;
    position: relative;
    line-height: 28px;
}

.form_element input[type=file]::-webkit-file-upload-button, .form_element input[type=file]::file-selector-button {
  /* firefox */
    width: 40px;
    visibility: hidden;
}

.form_element input[type=file]::before {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23FFFFFF' d='M7.67,4H2.11l0,0C1.83,4,1.49,4.2,1.34,4.44L0.34,6.17c-0.13,0.22,0.03,0.5,0.29,0.5h5.56h0c0.28,0,0.63-0.2,0.77-0.44 L7.95,4.5C8.08,4.28,7.92,4,7.67,4z M2.11,3.56h4.56V2.89c0-0.37-0.3-0.67-0.67-0.67H3.78L2.89,1.33H0.67C0.3,1.33,0,1.63,0,2v3.86 l0.96-1.64C1.2,3.81,1.64,3.56,2.11,3.56L2.11,3.56z'/%3e%3c/svg%3e");
    content: "";
    display: inline-block;
    background-size: 22px;
    background-color: #004a94;
    border: 1px solid #22A9FF;
    border-radius: 6px;
    outline: none;
    white-space: nowrap;
    -webkit-user-select: none;
    cursor: pointer;
    width: 36px;
    height: 36px;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: 0;
    right: 0;
}

.form_element input[type=file]:hover::before {
    background-color: #CA7600;
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
}

.form_element input.datepicker {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23FFFFFF' d='M2.5,0C2.27,0.02,2.15,0.15,2.12,0.38V1H1.5C1.22,1.01,0.98,1.11,0.8,1.3S0.51,1.72,0.5,2v5 c0.01,0.28,0.11,0.52,0.3,0.7S1.22,7.99,1.5,8h5c0.28-0.01,0.52-0.11,0.7-0.3S7.49,7.28,7.5,7V2C7.49,1.72,7.39,1.48,7.2,1.3 S6.78,1.01,6.5,1H5.88V0.38C5.85,0.15,5.73,0.02,5.5,0C5.27,0.02,5.15,0.15,5.12,0.38V1H2.88V0.38C2.85,0.15,2.73,0.02,2.5,0L2.5,0z  M6.75,3v4C6.74,7.16,6.66,7.24,6.5,7.25h-5C1.34,7.24,1.26,7.16,1.25,7V3H6.75L6.75,3z'/%3e%3c/svg%3e") no-repeat left;
    background-size: 20px;
    padding-left: 40px;
    background-position-x: 10px;
}

.form_element input.datetimepicker {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23FFFFFF' d='M1.76,0.44h0.01c-0.2,0.02-0.31,0.13-0.33,0.33v0.56H0.89 C0.64,1.34,0.43,1.43,0.26,1.6S0.01,1.97,0,2.22v4.44c0.01,0.25,0.1,0.46,0.26,0.62c0.17,0.17,0.38,0.25,0.62,0.26H4.6 C4.34,7.37,4.12,7.15,3.96,6.89H0.88c-0.13-0.01-0.2-0.08-0.22-0.22V3.11h5.57V2.22C6.21,1.97,6.12,1.76,5.96,1.6 C5.79,1.43,5.58,1.34,5.33,1.33H4.78V0.78c-0.02-0.2-0.13-0.31-0.33-0.33c-0.2,0.02-0.31,0.13-0.33,0.33v0.56H2.1V0.78 C2.09,0.57,1.98,0.46,1.76,0.44L1.76,0.44z M8,5.56C7.98,4.99,7.79,4.52,7.42,4.14C7.04,3.77,6.56,3.57,6,3.56 C5.44,3.57,4.96,3.77,4.58,4.14C4.2,4.52,4,4.99,3.99,5.56C4,6.12,4.2,6.59,4.58,6.97C4.96,7.34,5.44,7.54,6,7.56 c0.56-0.02,1.04-0.21,1.42-0.58l0,0C7.79,6.59,7.98,6.12,8,5.56L8,5.56z M5.76,4.67L5.76,4.67c0.02-0.14,0.09-0.21,0.22-0.22 C6.12,4.45,6.2,4.53,6.21,4.67v0.67h0.46c0.14,0.01,0.21,0.08,0.22,0.22C6.88,5.69,6.81,5.77,6.67,5.78H5.99 c-0.13-0.01-0.2-0.08-0.22-0.22V4.67L5.76,4.67z'/%3e%3c/svg%3e") no-repeat left;
    background-size: 20px;
    padding-left: 40px;
    background-position-x: 10px;
}

.form_element input.timepicker {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23FFFFFF' d='M4.38,3.84V2.38C4.35,2.15,4.23,2.02,4,2C3.77,2.02,3.65,2.15,3.62,2.38V4 c0,0.1,0.04,0.19,0.11,0.25L4.48,5C4.66,5.16,4.83,5.16,5,5c0.16-0.17,0.16-0.34,0-0.52L4.38,3.84L4.38,3.84z M1.81,6.73L1.81,6.73 C2.43,7.22,3.16,7.48,4,7.5c0.84-0.02,1.58-0.28,2.2-0.77l0.66,0.64c0.18,0.16,0.35,0.16,0.52,0c0.16-0.17,0.16-0.34,0-0.52 L6.73,6.2C7.22,5.58,7.48,4.84,7.5,4C7.49,3.34,7.33,2.76,7.02,2.23C6.71,1.7,6.3,1.29,5.77,0.98C5.24,0.67,4.66,0.51,4,0.5 C3.34,0.51,2.76,0.67,2.23,0.98C1.7,1.29,1.29,1.7,0.98,2.23C0.67,2.76,0.51,3.34,0.5,4c0.02,0.84,0.28,1.58,0.78,2.2L0.61,6.86 c-0.15,0.18-0.15,0.35,0,0.52c0.18,0.16,0.35,0.16,0.53,0L1.81,6.73L1.81,6.73z M4,6.75C3.22,6.73,2.57,6.46,2.06,5.94 C1.54,5.43,1.27,4.78,1.25,4c0.02-0.78,0.29-1.43,0.81-1.94C2.57,1.54,3.22,1.27,4,1.25c0.78,0.02,1.43,0.29,1.94,0.81 C6.46,2.57,6.73,3.22,6.75,4C6.73,4.78,6.46,5.43,5.94,5.94l0,0C5.43,6.46,4.78,6.73,4,6.75L4,6.75z'/%3e%3c/svg%3e") no-repeat left;
    background-size: 20px;
    padding-left: 40px;
    background-position-x: 10px;
}

.form_element select {
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form_element select:focus::-ms-value {
    color: #F0EC8F;
    background-color: #000A14;
}

.form_element_label label,
.form_element_label span.label {
    padding-top: 1px;
    padding-bottom: 1px;
    font-size: 16px;
    line-height: 36px;
    display: block;
    margin-right: 1em;
    text-align: right;
    white-space: nowrap;
    margin-bottom: 0.5rem;
    -webkit-appearance: button;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.form-control-plaintext {
    display: block;
    width: 100%;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 0;
    line-height: 36px;
    color: #F0EC8F;
    background-color: transparent;
    border: solid transparent;
    border-width: 1px 0;
}

.form_element select[size] {
    height: 36px;
}

.form_element select[multiple] {
    height: auto;
}

.form_element select option:focus,
.form_element select option:active,
.form_element select option:checked {
    background: linear-gradient(#007dfa, #007dfa);
    background-color: #007dfa !important;
  /* for IE */
    color: #FFFFFF !important;
}

.form_element button {
    display: inline-block;
    position: relative;
    padding: 3px 12px;
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
    overflow: visible;
    touch-action: manipulation;
    border: 1px solid #22A9FF;
    background: #004a94;
    color: #FFFFFF;
    font-size: 18px;
    line-height: 36px;
    font-weight: 400;
    border-radius: 6px;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    -webkit-appearance: button;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.form_element button:hover {
    border: 1px solid #FFFFFF;
    background: #CA7600;
    color: #FFFFFF;
}

.form_element button.ui-button-icon-only {
    width: 40px;
    height: 40px;
    overflow: hidden;
    margin-right: 5px;
    padding: 4px 8px;
}

.form_element button.ui-button-icon-only .j-icon {
    width: 40px;
    height: 40px;
    background-position: 1px 3px;
}

select:-internal-list-box option:checked {
    background-color: -internal-inactive-list-box-selection !important;
    color: -internal-inactive-list-box-selection-text !important;
}

.form_element textarea {
    height: auto;
}

.form_element .form-buttons-group .ui-button {
    margin: 20px 12px;
    float: right;
}

.form_element input[type=radio][disabled],
.radiodiv input[type=radio],
.form_element input[type=checkbox][disabled],
.checkboxdiv input[type=checkbox] {
    position: absolute;
    z-index: -1000;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    opacity: 0;
}

.form_element input[type=checkbox][disabled] + label,
.checkboxdiv input[type=checkbox] + label {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    font-size: 18px;
    padding-left: 30px;
    position: relative;
    vertical-align: middle;
    line-height: 1.5;
    margin-bottom: 0.5rem;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.checkboxdiv input[type=checkbox][disabled] + label {
    color: #BBB;
}

.checkboxdiv input[type=checkbox] + label::before {
    display: inline-block;
    position: absolute;
    content: "";
    background-color: #000A14;
    border: #22A9FF solid 1px;
    border-radius: 6px;
    width: 25px;
    height: 25px;
    left: 0px;
    top: 0px;
    box-sizing: border-box;
}

.form_element input[type=checkbox][disabled] + label::before {
    border: #777 solid 1px;
}

.checkboxdiv input[type=checkbox] + label::after {
    display: inline-block;
    position: absolute;
    content: "";
    width: 25px;
    height: 25px;
    left: 0px;
    top: 0px;
    box-sizing: border-box;
}

.checkboxdiv input[type=checkbox]:checked + label:after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23F0EC8F' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}

input[type=checkbox][disabled]:checked + label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23BBB' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}

/*Adding focus styles on the outer-box of the fake checkbox*/
.checkboxdiv input[type=checkbox]:focus + label::before {
    border-color: #C7E0FA;
    outline: 0;
    box-shadow: 0 0 0 0.2rem #004a94;
}

input[type=radio][disabled] + label,
.radiodiv input[type=radio] + label {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    font-size: 18px;
    padding-left: 30px;
    position: relative;
    vertical-align: middle;
    line-height: 1.5;
    margin-bottom: 0.5rem;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.radiodiv input[type=radio][disabled] + label {
    color: #BBB;
}

.radiodiv input[type=radio] + label::before {
    display: inline-block;
    position: absolute;
    content: "";
    background-color: #000A14;
    border: #22A9FF solid 1px;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    left: 0px;
    top: 0px;
    box-sizing: border-box;
}

.form_element input[type=radio][disabled] + label::before {
    border: #777 solid 1px;
}

.radiodiv input[type=radio] + label::after {
    display: inline-block;
    position: absolute;
    content: "";
    width: 25px;
    height: 25px;
    left: 0px;
    top: 0px;
    box-sizing: border-box;
}

.radiodiv input[type=radio]:checked + label:after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23F0EC8F'/%3e%3c/svg%3e");
}

.form_element input[type=radio][disabled]:checked + label:after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23BBB'/%3e%3c/svg%3e");
}

.radiodiv input[type=radio]:focus + label:before {
    border-color: #C7E0FA;
    outline: 0;
    box-shadow: 0 0 0 0.2rem #004a94;
}

div.errorList {
    background-color: #FFE5E9;
    border: 2px solid #CA0000;
    padding: 0.5em;
}

div.errorList li.errorField {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23CD0A0A' d='M.07,6.69l3.36-6a.64.64,0,0,1,1.14,0l3.36,6a.64.64,0,0,1-.56.93H.63A.64.64,0,0,1,.07,6.69Zm4.46-.48a.55.55,0,0,0-1.1,0v0a.55.55,0,1,0,1.1,0ZM3.42,2.52,3.71,5A.29.29,0,0,0,4,5.24.3.3,0,0,0,4.3,5l.28-2.44a.27.27,0,0,0-.26-.32H3.69A.28.28,0,0,0,3.42,2.52Z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 21px;
    color: #CA0000;
    font-weight: bold;
    list-style-type: none;
    padding-left: 28px;
}

div.errorList li.errorField ul {
    margin: 2px;
    padding: 0;
}

div.errorList li.errorField ul li.errorMessage {
    color: #000000;
    font-weight: normal;
    list-style-type: none;
}

#validationMessageBox {
    display: block;
    height: auto;
    position: absolute;
    margin: 0.3em;
    line-height: 1.5em;
    background-color: #FFE5E9;
    border: 2px solid #CA0000;
    padding: 0.5em 0.3em;
    color: #000000;
}

#validationMessageBoxSymbol {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23CD0A0A' d='M.07,6.69l3.36-6a.64.64,0,0,1,1.14,0l3.36,6a.64.64,0,0,1-.56.93H.63A.64.64,0,0,1,.07,6.69Zm4.46-.48a.55.55,0,0,0-1.1,0v0a.55.55,0,1,0,1.1,0ZM3.42,2.52,3.71,5A.29.29,0,0,0,4,5.24.3.3,0,0,0,4.3,5l.28-2.44a.27.27,0,0,0-.26-.32H3.69A.28.28,0,0,0,3.42,2.52Z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 25px;
    padding-left: 29px;
    width: 20px;
    height: 20px;
}

#validationMessageBoxMessage {
    margin: 0.3em;
    white-space: pre-line;
}

.requiredText .required,
.form_element_label .required {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23CD0A0A' d='M7.53,5,5.22,4l2.31-1a.47.47,0,0,0,.17-.64l-.47-.82A.48.48,0,0,0,7,1.37a.5.5,0,0,0-.36,0l-2,1.52L4.94.47A.47.47,0,0,0,4.47,0H3.53a.47.47,0,0,0-.47.47l.33,2.47-2-1.52a.48.48,0,0,0-.35,0,.47.47,0,0,0-.29.22L.3,2.41a.48.48,0,0,0,0,.35.44.44,0,0,0,.22.29L2.78,4,.47,5a.47.47,0,0,0-.17.64l.47.82a.47.47,0,0,0,.64.17l2-1.52L3.06,7.53A.47.47,0,0,0,3.53,8h.94a.47.47,0,0,0,.47-.47L4.61,5.06l2,1.52a.5.5,0,0,0,.36,0,.48.48,0,0,0,.28-.22l.47-.82A.47.47,0,0,0,7.53,5Z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 16px;
    padding-left: 1rem;
    vertical-align: middle;
}