:root {
    --scrollbar-width: calc(100vw - 100%)
}

:where(:not(progress,meter)) {
    border-style: solid;
    border-width: 0
}

.r-tree-container .form-group {
    margin-bottom: 10px
}

.r-tree-container .form-group:last-child:not(:only-child) {
    margin-bottom: 0
}

.r-tree-container .r-tree-input-panel {
    padding: 10px;
    border-width: 1px;
    border-radius: 3px;
    border-color: #d9e5e4;
    overflow: hidden
}

.filter-control .r-tree-container .r-tree-input-panel {
    min-width: 400px;
    max-width: 740px;
    width: 50vw
}

.r-tree-container .r-tree-input-panel footer {
    background-color: #f7fafa;
    padding: 6px 10px;
    margin: 0 -10px -10px;
    border-top: 1px solid #d9e5e4;
    display: flex;
    justify-content: space-between;
    justify-content: flex-end;
    gap: 10px
}

.r-tree-container .toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    overflow: clip;
    background-color: #f7fafa;
    border-width: 1px 0;
    border-color: #d9e5e4;
    font-weight: 500;
    padding: 6px 10px;
    margin-left: -10px;
    margin-right: -10px
}

.r-tree-container .toolbar .select-all-none {
    display: inline-flex;
    align-items: center;
    gap: 2px
}

.r-tree-container .toolbar .select-all-none > .state-mark {
    display: none
}

.r-tree-container .toolbar .select-all-none hr {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 1px;
    height: 1em;
    border: none;
    background-color: #6c9390bf
}

.r-tree-container .toolbar .select-all-none button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0 .5em;
    border-width: 0;
    border-radius: 2px;
    background-color: transparent;
    text-decoration: none;
    outline: none;
    color: #58807d
}

.r-tree-container .toolbar .select-all-none button:disabled {
    cursor: not-allowed;
    pointer-events: none;
    opacity: .5
}

.r-tree-container .toolbar .select-all-none button:not(:disabled):hover {
    color: #6fb98f
}

.r-tree-list-container {
    overflow-x: hidden;
    overflow-y: scroll;
    overscroll-behavior: contain;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    min-height: 0;
    flex: 1 1 auto;
    --scrollbar-track-color-default: #eef1f1;
    --scrollbar-track-color-hover: #dfe4e3;
    --scrollbar-thumb-color-default: #90b0ad;
    --scrollbar-thumb-color-hover: #3c8c86;
    --list-item-height: 32px;
    --_max-items: var(--max-items, 8);
    height: calc(var(--_max-items) * (var(--list-item-height) + 1px) - 1px)
}

.r-tree-list-container ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px
}

@media (hover: hover) and (pointer: fine) {
    @supports not selector(::-webkit-scrollbar

    ) {
        .r-tree-list-container {
            scrollbar-color: var(--scrollbar-thumb-color-default) var(--scrollbar-track-color-default);
            scrollbar-width: thin
        }
    }.r-tree-list-container::-webkit-scrollbar {
    width: 6px;
    height: 6px
}

    .r-tree-list-container ul {
        padding-right: 4px
    }
}

.r-tree-list-container::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color-default);
    border-radius: 999px
}

.r-tree-list-container::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-color-hover)
}

.r-tree-list-container::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color-default);
    border-radius: 999px
}

.r-tree-list-container::-webkit-scrollbar-track:hover {
    background: var(--scrollbar-track-color-hover);
    box-shadow: inset 0 0 1px #0000000d
}

.r-list-container .r-tree-list-item,
.r-tree-list-container .r-tree-list-item {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    height: var(--list-item-height);
    padding: 0 8px;
    border-radius: 3px;
    gap: 8px;
    background-color: transparent;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    scroll-snap-align: start
}

.r-list-container .r-tree-list-item .title,
.r-tree-list-container .r-tree-list-item .title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1
}

.r-list-container .r-tree-list-item .state-mark,
.r-tree-list-container .r-tree-list-item .state-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    aspect-ratio: 1/1;
    border-width: 1px;
    border-color: color-mix(in srgb, #889695, transparent 60%);
    border-radius: 3px
}

.r-list-container .r-tree-list-item .state-mark i.fa,
.r-tree-list-container .r-tree-list-item .state-mark i.fa {
    display: none
}

.r-list-container .r-tree-list-item:hover,
.r-tree-list-container .r-tree-list-item:hover {
    background-color: color-mix(in srgb, #ebf2f1, transparent 25%)
}

.r-list-container .r-tree-list-item:hover .state-mark,
.r-tree-list-container .r-tree-list-item:hover .state-mark {
    border-color: color-mix(in srgb, #889695, transparent 10%)
}

.r-list-container .r-tree-list-item.selected,
.r-tree-list-container .r-tree-list-item.selected {
    background-color: #e6f5eb;
    color: #1a3827
}

.r-list-container .r-tree-list-item.selected .state-mark,
.r-tree-list-container .r-tree-list-item.selected .state-mark {
    border-color: color-mix(in srgb, #35918b, transparent 25%)
}

.r-list-container .r-tree-list-item.selected .state-mark i.fa,
.r-tree-list-container .r-tree-list-item.selected .state-mark i.fa {
    display: inline-block;
    color: #35918b
}

.input {
    display: flex;
    align-items: center;
    padding: 0 8px;
    gap: 8px;
    border-width: 1px;
    border-color: #bfd7d6;
    color: #39605d;
    border-radius: 3px;
    line-height: 21px;
    height: 35px
}

.input :where(input:is([type=email],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=url],[type=""],:not([type])),button) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0;
    border-width: 0;
    border-radius: 0;
    background-color: transparent;
    text-decoration: none;
    outline: none
}

.input :where(input:is([type=email],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=url],[type=""],:not([type]))) {
    width: 100%;
    flex: 1 0 0%;
    min-width: 0
}

.input :where(input:is([type=email],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=url],[type=""],:not([type])))::placeholder {
    color: #6c9390bf;
    opacity: 1
}

.input:focus-within {
    border-color: #9bb8a7;
    box-shadow: 0 0 0 2px #a3d0cd66
}

.input .clear {
    opacity: 0;
    transition: opacity .2s ease-out;
    width: 1.5em;
    aspect-ratio: 1/1
}

.input:not(:is(.disabled,:has(>:is(input:disabled,input:read-only,input:placeholder-shown)))) .clear {
    opacity: .5
}

.input:not(:is(.disabled,:has(>:is(input:disabled,input:read-only,input:placeholder-shown)))):is(:hover,:focus-within) .clear {
    opacity: 1
}

.input:is(.disabled,:has(>:is(input:disabled,input:read-only,input:placeholder-shown))) .clear {
    visibility: hidden;
    pointer-events: none
}

label:is(.switch):not(:has(>.slider)) {
    --_switch-font-size: var(--switch-font-size, 14px);
    --_switch-font-weight: var(--switch-font-weigt, 500);
    --_switch-line-height: var(--switch-line-height, inherit);
    --_switch-label-color-off: $ color-text-muted;
    --_switch-track-color-off: #bfd7d6;
    --_switch-track-color-on: #5ba169;
    --_switch-thumb-color: hsl(0 0% 100%);
    --_switch-thumb-color-highlight: transparent;
    --_switch-outline-color: var(--switch-outline-color, transparent);
    --_switch-track-padding: 2px;
    --_switch-thumb-size: 1em;
    --_switch-track-size: calc(var(--_switch-thumb-size) * 2.25);
    --_isLTR: 1;
    --_t-duration: var(--transition-duration, .2s);
    transition: color var(--_t-duration);
    font-size: var(--_switch-font-size);
    font-weight: var(--_switch-font-weight);
    line-height: var(--_switch-line-height);
    color: var(--_switch-label-color-off, inherit);
    display: inline-flex;
    align-items: center;
    column-gap: .5em;
    margin: 0;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none
}

label:is(.switch):not(:has(>.slider)).block {
    display: flex;
    flex: 1 0 0%;
    justify-content: space-between
}

label:is(.switch):not(:has(>.slider)) > input[type=checkbox] {
    --_thumb-position: 0%;
    padding: var(--_switch-track-padding);
    margin: 0;
    width: var(--_switch-track-size);
    min-width: var(--_switch-track-size);
    height: var(--_switch-thumb-size);
    min-height: var(--_switch-thumb-size);
    border-radius: var(--_switch-track-size);
    background: var(--_switch-track-color-off);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    pointer-events: none;
    border: none;
    outline-offset: 0px;
    outline: none;
    box-sizing: content-box;
    display: grid;
    align-items: center;
    grid:[track] 1fr/[track] 1fr;
    font: inherit;
    transition: background-color var(--_t-duration) ease
}

label:is(.switch):not(:has(>.slider)) > input[type=checkbox]:before {
    content: "";
    cursor: pointer;
    pointer-events: auto;
    grid-area: track;
    inline-size: var(--_switch-thumb-size);
    block-size: var(--_switch-thumb-size);
    background: var(--_switch-thumb-color);
    border-radius: 50%;
    transform: translate(var(--_thumb-position));
    mask: none;
    transition: transform var(--_t-duration) ease, box-shadow var(--_t-duration) ease
}

label:is(.switch):not(:has(>.slider)) > input[type=checkbox]:checked {
    background: var(--_switch-track-color-on);
    --_thumb-position: calc((var(--_switch-track-size) - 100%) * var(--_isLTR))
}

label:is(.switch):not(:has(>.slider)) > input[type=checkbox]:indeterminate {
    --_thumb-position: calc(calc(calc(var(--_switch-track-size) / 2) - calc(var(--_switch-thumb-size) / 2)) * var(--_isLTR))
}

label:is(.switch):not(:has(>.slider)) > input[type=checkbox]:disabled {
    cursor: not-allowed;
    --_switch-thumb-color: transparent
}

label:is(.switch):not(:has(>.slider)) > input[type=checkbox]:disabled:before {
    cursor: not-allowed;
    box-shadow: inset 0 0 0 2px #ffffff80
}

/* FORM DROPDOWN FIELD */
.r-select-wrapper {
    position: relative;
}
.r-select-wrapper .r-tree-input-panel {
    width: 100%;
    background-color: white;
}
.r-select-wrapper .r-tree-input-panel .form-group {
    margin: 0;
    padding: 10px;
}
.r-btn-select {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

/*  */

.react-datepicker { font-size: 1em !important }
.react-datepicker__header { padding-top: 0.8em !important}
.react-datepicker__month { margin: 0.4em 1em !important}
.react-datepicker__day-name, .react-datepicker__day {
    width: 1.9em !important;
    line-height: 1.9em !important;
    margin: 0.166em !important;
}
.react-datepicker__current-month { font-size: 1em !important }
.react-datepicker__navigation {
    top: 0.3em !important;
}


.react-datepicker__time-container { width: 6em !important}
.react-datepicker-time__header { font-size: 1em !important }
.react-datepicker-time__header--time { padding-left: 0px !important; padding-right: 0px !important }
.react-datepicker__time-box {
    margin-left: 0px !important;
    margin-right: 0px !important;
    width:100% !important
}
.react-datepicker__time-list { padding: 0 !important; }

.react-datepicker-wrapper .form-control {width: 200px;}
.target-period-picker {
    display: flex;
}
.target-period-picker .input-group .input-group-addon.middle-addon {
    border-left: 0;
    border-radius: 0;
}
.target-period-picker .input-group .form-control {
    border-radius: 0;
}
.target-period-picker .react-datepicker-popper {
    z-index: 100;
}
.react-datepicker__children-container {
    width: 100% !important;
    text-align: center;
    color: red;
}
.r-list-container ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    --list-item-height: 32px;
}
.r-slider-wrapper {
    padding: 10px;
    margin: 20px 0;
}
.r-target-schedule-table .day {
    display: flex;
    justify-content: space-between
}
.r-target-schedule-table .hour {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}
.r-target-schedule-table th:first-of-type {
    vertical-align: bottom;
}
.r-select-sortable-field {
    height: auto;
}
.r-select-sortable-field > div:first-child {
    width: 100%;
    flex: 1 0 0;
    min-width: 0;
    cursor: pointer;
    padding: 5px;
}
.r-select-sortable-field > div:first-child .btn {
    padding: 6px 12px;
    margin-right: 5px;
    margin-bottom: 5px;
}
.r-select-sortable-field > div:first-child .btn:last-of-type {
    margin-right: 0;
}
.r-flex-row {
    display: flex;
}
.r-checkbox-list label {
    margin-right: 10px;
}
.r-sub-age {
    display: flex;
    align-items: baseline;
}
.r-sub-age > * {
    margin-right: 10px;
}
/*#tags-form ul,*/
/*#tags-form ul li a {*/
/* display: block;*/
/*}*/
#tags-form .tag-user-body {
    display: flex;
}
#tags-form .tag-user-body button.tag-btn {
    cursor: pointer;
}