/* ##### LABEL ##### */
.form-field label:not(.error) {
    display: inline-block;
    line-height: normal;
    margin-bottom: 3px;
    font-weight: normal;
}

/* ##### INPUT ##### */
.form-field input, .form-field textarea, .form-field select {
    height: 40px;
    line-height: 40px;
    background-color: #fff;
    border: 1px solid #c2c9e1;
    display: block;
    padding: 0 10px;
    width: 100%;
    font-size: 14px;
    color: #363636;
}

.form-field input[type=number] {
    padding-right: 0;
}

.form-field input.small, .form-field select.small {
    height: 38px;
    line-height: 38px;
}

.form-field input.small2, .form-field select.small2 {
    height: 28px;
    line-height: 28px;
}

.form-field textarea {
    height: 150px;
    line-height: normal;
    padding: 5px 15px;
}

.form-field input:not([disabled]):focus, .form-field textarea:not([disabled]):focus, .form-field select:focus {
    background-color: #FFFDE0;
    outline: 0
}

.form-field input.required:not(.no-ico), .form-field textarea.required:not(.no-ico), .form-field select.required,
.form-field input[required]:not(.no-ico), .form-field textarea[required]:not(.no-ico), .form-field select[required] {
    background-image: url(../img/req-ico.png);
    background-repeat: no-repeat;
    background-position: 99% 5px;
}

.form-field select.required {
    background-position: 95% 5px;
}

.form-field input.v-transparent {
    border: transparent;
    background: transparent;
}

/* ##### CHECKBOX ##### */
.form-field.checkbox input[type=checkbox] {opacity: 0; position: absolute; width: 1px; height: 1px; left: 5px; top: 3px;}

.form-field.checkbox {
    padding: 0 0 0 30px;
    position: relative;
}
.form-field.checkbox.not-label {padding-left: 0; width: 20px; height: 20px;}

.form-field.checkbox label:not(.error) {
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin: 0;
    padding: 0;
}
.form-field.checkbox.not-label label:not(.error) {width: 20px;}

.form-field.checkbox label:not(.error):before {
    content: "";
    background: url(../img/ico-sprite.png) no-repeat;
    width: 20px;
    height: 20px;
    position: absolute;
    left: -30px;
    top: 0;
}
.form-field.checkbox.not-label label:not(.error):before {left: 0;}

.form-field.checkbox input[type="checkbox"]:checked + label:before {
    background-position: -20px 0;
}

.form-field.checkbox input[type="checkbox"].error + label {
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}

.form-field.checkbox input[disabled] + label {opacity: 0.5; cursor: no-drop;}

/* ##### RADIO ##### */
.form-field.radio input[type="radio"] {opacity: 0; position: absolute; width: 1px; height: 1px; left: 5px; top: 3px;}

.form-field.radio {
    padding: 0 0 0 30px;
    position: relative;
}

.form-field.radio label:not(.error) {
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

.form-field.radio label:not(.error):before {
    content: "";
    background: url(../img/ico-sprite.png?v02) 0 -20px no-repeat;
    width: 20px;
    height: 20px;
    position: absolute;
    left: -30px;
    top: 0;
}

.form-field.radio input[type="radio"]:checked + label:before {
    background-position: -20px -20px;
}

.form-field.radio input[type="radio"].error + label {
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}

.form-field.radio input[disabled] + label {opacity: 0.5; cursor: no-drop;}

/* ##### VALIDATE ERROR ##### */
input.error:not([disabled]), textarea.error:not([disabled]), select.error {border-color: red !important; box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);}
.valid:not([disabled]) {border-color: #36d100 !important;}

label.error {display: none; color: red; font-size: 14px; line-height: normal; font-weight: normal; margin: 0;}
label[generated="true"] {display: inline-block;}

.hidden-submit {
    left: -10000px;
    opacity: 0;
    position: absolute;
    top: -10000px;
}

.input-hidden {height: 0; padding: 0; opacity: 0; width: 0;}

input[readonly="readonly"], input[readonly], input[disabled="disabled"], input[disabled], textarea[readonly] {
    background-color: #F6F6F6 !important;
    color: #989593 !important;
    border-color: #bcbec0 !important;
}

::-webkit-input-placeholder {color: #c2c2c2;}
:-moz-placeholder {color: #878787;}
::-moz-placeholder {color: #878787;}
:-ms-input-placeholder {color: #878787;}

/* ##### DATEPICKER ##### */
.datepicker.dropdown-menu {z-index: 9999 !important;}
.form-field .datepicker {
    border-radius: 0 !important;
    padding: 0 5px !important;
}
.input-daterange input {text-align: left !important;}

/* ##### BOOSTRAP SELECT ##### */
.bootstrap-select.btn-group.bs-container {
    position: absolute;
    height: 0 !important;
    padding: 0 !important;
}
.bootstrap-select {width: 100%;}
.bootstrap-select.disabled .btn {cursor: default;}
.bootstrap-select select, select.selectpicker {opacity: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; position: absolute; z-index: -1;}
.bootstrap-select .btn-select {
    height: 40px;
    background: #fff;
    border: 1px solid #c2c9e1;
    display: inline-block;
    padding: 0 10px;
    width: 100%;
    font-size: 14px;
    color: #363636;
    font-weight: 400;
    text-align: left;
    text-transform: none;
}
.bootstrap-select .btn-select i {margin: 0 0 0 5px;}
.required .bootstrap-select .btn-select {
    background-image: url(../img/req-ico.png);
    background-repeat: no-repeat;
    background-position: 99% 5px;
}
.bootstrap-select .btn-select .tag {padding: 2px 5px; background: #e8e8e8; font-size: 14px;}

.error .bootstrap-select .btn-select {border-color: red; box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);}
.valid .bootstrap-select .btn-select {border-color: #36d100;}
.valid label.error {display: none !important;}

.bootstrap-select .btn.bs-placeholder {color: #878787;}

.bootstrap-select .caret {
    position: absolute;
    top: 50%;
    right: 12px;
    margin-top: -2px;
    vertical-align: middle;
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    border-top: 4px dashed;
    border-top: 4px solid \9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}
.bootstrap-select .filter-option {width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}

.bootstrap-select.disabled .btn-select {
    background-color: #F6F6F6 !important;
    color: #989593 !important;
    border-color: #bcbec0 !important;
}
.bootstrap-select.disabled .btn.bs-placeholder {color: #b6b5b5;}
.bootstrap-select .dropdown-menu.open {max-height: none !important; padding: 2px 0;}
.bootstrap-select .bs-searchbox {padding: 3px 5px 5px 5px;}
.bootstrap-select .bs-searchbox input {height: 30px !important; padding: 0 10px; width: 100%; line-height: normal;}
.bootstrap-select .no-results {padding: 5px; display: none !important;}

.bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark {
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    right: 6px;
    top: 6px;
}
.bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark::before {
    content: '\f00c';
}

.bootstrap-select .bs-actionsbox {margin: -1px 0 1px 0;}
.bootstrap-select .bs-actionsbox .btn-group {width: 100%;}
.bootstrap-select .bs-actionsbox .btn-group .btn {width: 50%; border-color: #fff; height: 30px; line-height: 28px; background: #a09f9f; color: #fff; padding: 0 5px;}
.bootstrap-select .bs-actionsbox .btn-group .btn:hover {background: #b6b5b5; color: #fff;}

.bootstrap-select .notify {position: absolute; bottom: 0; width: 100%; background: #fff; padding: 2px; text-align: center; color: #af0000;}

select.selectpicker.mobile-device {
    display: block !important;
    position: absolute !important;
    opacity: 0 !important;
    z-index: 2 !important;
    height: 100% !important;
    width: 100% !important;
    top: 0 !important;
}

/* ##### AJAX SELECT ##### */
.select2-container .select2-selection--single {
    height: 40px !important;
    border: 1px solid #c2c9e1 !important;
    border-radius: 0 !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px !important;
    font-size: 14px !important;
    color: #363636 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    right: 7px !important;
    top: 8px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #363636 transparent transparent transparent !important;
}
.select2-results {
    color: #959595 !important;
    font-size: 12px !important;
}

/* ##### FLAT-PICKER CONFIRM ##### */
.flatpickr-confirm {
    height: 40px;
    max-height: 0px;
    visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.06)
}

.flatpickr-confirm svg path {
    fill: inherit;
}

.flatpickr-confirm.darkTheme {
    color: white;
    fill: white;
}

.flatpickr-confirm.visible {
    max-height: 40px;
    visibility: visible
}