:root{
    --theme-color-1: #fff;
    --theme-color-2: #F7FAFB;
    --theme-color-3: #121822;

    --border-color: #E4E6E8;
}

body.grey{
    --theme-color-1: #445166;
    --theme-color-2: #384253;
    --theme-color-3: #303949;

    --border-color:  #4F5B6D;
}

body.dark{
    --theme-color-1: #34415B;
    --theme-color-2: #293447;
    --theme-color-3: #222C3C;

    --border-color: #424E65;
}

body.black{
    --theme-color-1: #232E42;
    --theme-color-2: #18202E;
    --theme-color-3: #121822;

    --border-color: #343F51;
}

.modal-open {
    overflow: auto !important;
}

.brand-animate {
    -webkit-animation: rotate 1s infinite linear;
    animation: rotate 1s infinite linear;
    transform-origin: 24px 24px;
    -webkit-transform-origin: 24px 24px;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    -webkit-animation-play-state: paused;
    animation-play-state: paused
}

.pace-running .brand-animate {
    -webkit-animation-play-state: running;
    animation-play-state: running
}

.pace-done .brand-animate {
    opacity: 0
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

.table-multiple-actions {
    background: rgba(0,0,0,.8);
    border-radius: 8px;
    padding: 5px;
    width: 80% !important;
    left: 50% !important;
    transform: translateX(-50%);
    display: flex;
    position: absolute;
    bottom: 0;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    z-index: 1;
}
.table-multiple-actions .actions {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: end;
    gap:5px;
}
.table-multiple-actions .lbl{
    color: #C8CFD9;
    margin-left: 10px;
}
.table-multiple-actions button {
    background: transparent;
    color: #C8CFD9;
}

.list-toggle {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.list-toggle > li {
    border:1px solid var(--border-color);
    border-radius: 5px;
    transition: background 300ms;
}

.list-toggle > li:not(.open):hover {
    background: var(--theme-color-2);
}

.list-toggle .list-toggle-header-icon{
    display: flex;
    align-items: center;
    justify-content: center;

}
.list-toggle .list-toggle-header-icon {
    transition:  all 200ms;
}
.list-toggle .list-toggle-header-icon > i {
    font-size: 12px;
}

.list-toggle .list-toggle-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    padding: 10px;
    min-height: 48px;
}

.list-toggle .list-toggle-header > .list-toggle-header-title {
    flex:1;
}

.list-toggle .list-toggle-content{
    display: none;
}
.list-toggle >.open .list-toggle-header-icon {
    transform: rotate(-180deg)
}

.list-toggle >.open >.list-toggle-header{
    border-bottom: 1px solid var(--border-color);
}

.list-toggle >.open >.list-toggle-content{
    display: block;
}