:root {
    --label-required-after-tc: #FF0000FF;
    --input-tc: #212529;
    --input-bg: #FFF;
    --input-bc: #dee2e6;
    --input-focus-bg: var(--input-bg);
    --input-focus-bc: #716ACF;
    --input-focus-sc: rgb(113, 106, 207, .5);
    --input-readonly-bg: #f3f3f3;
    --input-switch-bc: #7f95b5;
    --input-switch-thumb-bc: #E5E7EB;
    --input-switch-thumb-bg: #FFF;
    --input-switch-thumberslider-bc: #9ca3af;
    --input-switch-thumberslider-bg: var(--input-switch-thumberslider-bc);
    --input-switch-thumberslider-sc: rgba(0, 0, 0, 0.1);
    --input-switch-thumberslider-on-bg: #2563eb;
    --input-switch-thumberslider-off-bg: #D1D5DB;
    --input-tooltip-bg: #4A5568;
    --input-tooltip-tc: #FFF;
    --input-validation-error-tc: #ef4444;

    --input-select2-dropdown-bg: #fff;
    --input-select2-dropdown-bc: #aaa;
    --input-select2-dropdown-tc: #212529;
    --input-select2-selection-bg: #e4e4e4;
    --input-select2-selection-bc: #aaa;
    --input-select2-option-selected-bg: #ddd;
    --input-select2-option-highlighted-bg: #5897fb;
    --input-select2-option-highlighted-tc: #FFF;
}

:root.appearance-dark {
    --input-tc: #dddddd;
    --input-bg: #2a313e;
    --input-bc: #515e6a;
    --input-readonly-bg: #4b5a74;
    --input-select2-dropdown-bg: #3e3e3e;
    --input-select2-dropdown-bc: #595370;
    --input-select2-dropdown-tc: #e7e7e7;
    --input-select2-selection-bg: #3e3e3e;
    --input-select2-selection-bc: #686767;
    --input-select2-option-selected-bg: #556d85;
    --input-select2-option-highlighted-bg: #222b45;
    --input-select2-option-highlighted-tc: var(--input-select2-dropdown-tc);

    /* ### CKEDITOR ### */
    --ck-color-base-background: var(--input-bg);
    --ck-color-base-border: var(--input-bc);
    --ck-color-button-on-color: #fafafa;
    --ck-color-focus-border: var(--input-focus-bc);
    --ck-inner-shadow: var(--input-focus-sc);
    --ck-custom-background: hsl(270, 1%, 29%);
    --ck-custom-foreground: hsl(255, 3%, 18%);
    --ck-custom-border: hsl(300, 1%, 22%);
    --ck-custom-white: hsl(0, 0%, 100%);
    --ck-color-base-foreground: var(--ck-custom-background);
    --ck-color-text: hsl(0, 0%, 98%);
    --ck-color-shadow-drop: hsla(0, 0%, 0%, 0.2);
    --ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1);
    --ck-color-button-default-background: var(--ck-custom-background);
    --ck-color-button-default-hover-background: hsl(270, 1%, 22%);
    --ck-color-button-default-active-background: hsl(270, 2%, 20%);
    --ck-color-button-default-active-shadow: hsl(270, 2%, 23%);
    --ck-color-button-default-disabled-background: var(--ck-custom-background);
    --ck-color-button-on-background: var(--ck-custom-foreground);
    --ck-color-button-on-hover-background: hsl(255, 4%, 16%);
    --ck-color-button-on-active-background: hsl(255, 4%, 14%);
    --ck-color-button-on-active-shadow: hsl(240, 3%, 19%);
    --ck-color-button-on-disabled-background: var(--ck-custom-foreground);
    --ck-color-button-action-background: hsl(168, 76%, 42%);
    --ck-color-button-action-hover-background: hsl(168, 76%, 38%);
    --ck-color-button-action-active-background: hsl(168, 76%, 36%);
    --ck-color-button-action-active-shadow: hsl(168, 75%, 34%);
    --ck-color-button-action-disabled-background: hsl(168, 76%, 42%);
    --ck-color-button-action-text: var(--ck-custom-white);
    --ck-color-button-save: hsl(120, 100%, 46%);
    --ck-color-button-cancel: hsl(15, 100%, 56%);
    --ck-color-dropdown-panel-background: var(--ck-custom-background);
    --ck-color-dropdown-panel-border: var(--ck-custom-foreground);
    --ck-color-dialog-background: var(--ck-custom-background);
    --ck-color-dialog-form-header-border: var(--ck-custom-border);
    --ck-color-split-button-hover-background: var(--ck-color-button-default-hover-background);
    --ck-color-split-button-hover-border: var(--ck-custom-foreground);
    --ck-color-input-background: var(--ck-custom-background);
    --ck-color-input-border: hsl(257, 3%, 43%);
    --ck-color-input-text: hsl(0, 0%, 98%);
    --ck-color-input-disabled-background: hsl(255, 4%, 21%);
    --ck-color-input-disabled-border: hsl(250, 3%, 38%);
    --ck-color-input-disabled-text: hsl(0, 0%, 78%);
    --ck-color-labeled-field-label-background: var(--ck-custom-background);
    --ck-color-list-background: var(--ck-custom-background);
    --ck-color-list-button-hover-background: var(--ck-color-base-foreground);
    --ck-color-panel-background: var(--ck-custom-background);
    --ck-color-panel-border: var(--ck-custom-border);
    --ck-color-toolbar-background: var(--ck-custom-background);
    --ck-color-toolbar-border: var(--ck-custom-border);
    --ck-color-tooltip-background: hsl(252, 7%, 14%);
    --ck-color-tooltip-text: hsl(0, 0%, 93%);
    --ck-color-image-caption-background: hsl(0, 0%, 97%);
    --ck-color-image-caption-text: hsl(0, 0%, 20%);
    --ck-color-widget-blurred-border: hsl(0, 0%, 87%);
    --ck-color-widget-hover-border: hsl(43, 100%, 68%);
    --ck-color-widget-editable-focus-background: var(--ck-custom-white);
    --ck-color-link-default: hsl(190, 100%, 75%);
}

.label-required:after {
    content: "*";
    margin-left: 5px;
    color: var(--label-required-after-tc);
}

.form-control {
    background-color: var(--input-bg);
    border-color: var(--input-bc);
    color: var(--input-tc);
}

.form-control:focus,
.form-control:focus-visible {
    background-color: var(--input-focus-bg);
    border-color: var(--input-focus-bc);
    box-shadow: 0 0 0 0.2rem var(--input-focus-sc);
}

input.form-control:read-only {
    background-color: var(--input-readonly-bg);
}

.select2-container--default .select2-selection--single {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--input-bc) !important;
    border-radius: 7px !important;
}

.select2-container .select2-selection--single {
    height: 36px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--input-tc) !important;
    line-height: 36px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
}

.select2-container .select2-selection--multiple {
    min-height: 36px !important;
}

.select2-container--default .select2-selection--multiple {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--input-bc) !important;
    border-radius: 7px !important;
    padding-bottom: 5px !important;
    padding-right: 0 !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: 1px solid var(--input-focus-bc) !important;
    outline: 0 !important;
}

.select2-container .select2-search--inline .select2-search__field {
    padding-left: 5px !important;
}

.select2-dropdown {
    background-color: var(--input-select2-dropdown-bg) !important;
    border: 1px solid var(--input-select2-dropdown-bc) !important;
    color:var(--input-select2-dropdown-tc) !important;
}

.select2-dropdown .select2-search__field:focus-visible {
    outline: none !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--input-select2-selection-bg) !important;
    border: 1px solid var(--input-select2-selection-bc) !important;
}

.select2-container--default .select2-results__option--selected {
    background-color: var(--input-select2-option-selected-bg) !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--input-select2-option-highlighted-bg) !important;
    color: var(--input-select2-option-highlighted-tc) !important;
}

.ck-editor {
    resize: both;
    overflow: auto;
    min-height: 200px;
}

.ck-editor ul,
.useCkeditorList ul {
    list-style: circle;
    padding-left: 1rem;
}

.ck-editor ol,
.useCkeditorList ol {
    list-style: auto;
    padding-left: 1rem;
}

.three-state-toggle {
    position: relative;
    display: block;
    cursor: pointer;
}

.three-state-toggle .state-container {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    height: 1.5rem;
}

.three-state-toggle .state-container .state-position-start,
.three-state-toggle .state-container .state-position-center,
.three-state-toggle .state-container .state-position-end {
    width: 33.333333%;
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.three-state-toggle .state-container .state-position-start > input,
.three-state-toggle .state-container .state-position-center > input,
.three-state-toggle .state-container .state-position-end > input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 100%;
}

.three-state-toggle .state-container .state-position-start > span,
.three-state-toggle .state-container .state-position-end > span {
    position: absolute;
    right: 0;
    left: 0;
    opacity: .5;
    cursor: pointer;
    text-transform: uppercase;
}

.three-state-toggle .state-container .state-position-center > span {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    text-transform: uppercase;
    right: 0;
    left: 0;
}

.three-state-toggle .thumber {
    position: absolute;
    top: 0 !important;
    margin-right: auto !important;
    margin-left: auto !important;
    z-index: -1;
}

.three-state-toggle .thumber-slider {
    height: 1.5rem;
    border-color: var(--input-switch-thumberslider-bc);
    background-color: var(--input-switch-thumberslider-bg);
    box-shadow: inset 0 1px 2px var(--input-switch-thumberslider-sc);
}

.three-state-toggle .thumber-slider.state-on {
    background-color: var(--input-switch-thumberslider-on-bg);
}

.three-state-toggle .thumber-slider.state-off {
    background-color: var(--input-switch-thumberslider-off-bg);
}

.three-state-toggle .thumb {
    top: 2px;
    left: 33.3333%;
    width: 20px;
    height: 20px;
    border-width: 1px;
    border-color: var(--input-switch-thumb-bc);
    background-color: var(--input-switch-thumb-bg);
    transition: all 0.3s ease-in-out;
}

.three-state-toggle input:checked ~ span {
    opacity: 1;
}

.three-state-toggle[data-checked="state-off"] .thumb {
    left: 2px;
}

.three-state-toggle[data-checked="state-on"] .thumb {
    left: calc(66.666667% - 2px);
}

.input-group {
    display: flex;
    flex-wrap: nowrap;
}

.input-group > * {
    flex: 1 1 0;
}

.input-group > *[style*="width"] {
    flex: 0 0 auto;
}

.form-check-input {
    clear: left;
}

.form-switch {
    display: flex;
    align-items: center;
}

.form-switch .form-check-input:not(:checked) {
    border-color: var(--input-switch-bc);
}

.form-switch .form-check-input {
    margin-top: 0;
}

.form-switch.form-switch-1 .form-check-input {
    height: 1rem;
    width: calc(1rem + 0.75rem);
    border-radius: 2rem;
}

.form-switch.form-switch-2 .form-check-input {
    height: 1.25rem;
    width: calc(1.5rem + 0.75rem);
    border-radius: 2.25rem;
}

.form-switch.form-switch-3 .form-check-input {
    height: 1.25rem;
    width: calc(1.6rem + 0.75rem);
    border-radius: 2.5rem;
}

.form-switch.form-switch-4 .form-check-input {
    height: 1.5rem;
    width: calc(2rem + 0.75rem);
    border-radius: 2.75rem;
}

.range-tooltip {
    position: absolute;
    background-color: var(--input-tooltip-bg);
    color: var(--input-tooltip-tc);
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    white-space: nowrap;
    transform: translate(-50%, -100%);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.validationErrorMark {
    width: 20px;
    cursor: help;
    font-weight: 600;
    align-items: center;
    justify-content: center;
    display: flex;
    position: absolute;
    top: 0;
    right: .5rem;
    height: 100%;
    font-size: 1.5rem;
    color: var(--input-validation-error-tc);
}