/* Panel opening and closing animation lasts 200ms */

html {
    height: 100%;
}

body {
    min-height: 100%;
    transition: transform .2s;
}


/* Slide page 200px to the right when panel is opened */

body.ps-active {
    transform: translateX(800px);
}


/* Position panel */

#my-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 800px;
    height: auto;
    /* remember to set 100% height for all its parents too, including html and body */
    background-color: #eee;
    transform: translateX(-800px);
    webkit-box-shadow: 7px 0px 11px -4px rgb(0 0 0 / 50%);
    box-shadow: 7px 0px 11px -4px rgb(0 0 0 / 50%);
}

.select2 .select2-container .select2-container--default .select2-container--below .select2-container--open .select2-container--focus {
    width: 100% !important;
}

.select2-container--default .select2-selection--single,
.select2-container--open .select2-dropdown--below {
    min-width: 56px !important;
}

.yadcf-filter,
.yadcf-filter-range-date,
.yadcf-filter-range-number {
    width: 90%;
    border: none;
    border-bottom: 1px solid #e6e6e6;
    margin-bottom: 10px;
    padding: 0;
    padding-bottom: 1px;
    background: transparent;
}

.yadcf-filter {
    padding: 0 10px;
    font-size: 12px;
    margin-right: -4px;
}

.yadcf-filter-wrapper-inner {
    border: none;
}

.yadcf-filter-range-number {
    width: 40%;
    font-size: 12px;
}

.yadcf-filter-range-number:focus-visible {
    outline: none;
}

.yadcf-filter-range-number-seperator {
    margin-left: 3px;
    margin-right: 3px;
}

.yadcf-filter:focus-visible {
    outline: none;
}

.yadcf-filter-reset-button {
    border: none;
    font-size: 10px;
    background: #d9d9d9;
}

.yadcf-filter-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #7e7e7e;
    font-size: 10px;
}

.yadcf-filter-wrapper .select2-selection__arrow {
    left: 100%;
}