#update-theme-modal {
    transform: translateX(calc(2px + 100%));
    position: fixed;
    display: flex;
    width: 350px;
    height: 100vh;
    top: 0;
    right: 0;
    z-index: 9;
    border-left: 1px solid var(--theme-03);
    background-color: var(--theme-02);
    transition: all .4s ease-in-out;
}

#update-theme-modal .content {
    background-color: var(--theme-02);
    position: relative;
    padding: 20px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

#update-theme-modal .input-zone {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    height: 100%;
}

#update-theme-modal.show {
    transform: translateX(0px);
}

#update-theme-modal input[type="color"] {
    width: 60px;
}

#update-theme-modal input:not([type="color"]) {
    width: 60px;
}

#update-theme-modal input,
#update-theme-modal label {
    font-size: 12px;
}

#button-show-modal {
    z-index: 1;
    position: absolute;
    display: flex;
    left: 0;
    bottom: 30px;
    transform: translateX(-100%);
    border-radius: 4px 0 0 4px;
    padding: 10px;
    width: 2.5rem;
    background-color: var(--theme-04);
    transition: all .4s ease-in-out;
    cursor: pointer;
}

#update-theme-modal #button-show-modal i {
    transition: all .4s ease-in-out;
}

#update-theme-modal.show #button-show-modal {
    transform: translateX(1px);
}

#update-theme-modal.show #button-show-modal i {
    transform: rotate(180deg);
}

#update-theme-modal button:not(:disabled) .hide-enabled {
    display: none;
}

#update-theme-modal button:disabled .hide-disabled {
    display: none;
}

#update-theme-modal .pickr .pcr-button {
    border-radius: 6px;
    overflow: hidden;
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid rgb(255 255 255 / 35%);
}

#update-theme-modal .pickr .pcr-button::before {
    background: #FFF;
    top: 2px;
    left: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
}

#update-theme-modal .horizontal-separator {
    height: 2px;
    margin: 0 .25rem;
    width: 100%;
    border-radius: 2px;
    background-color: var(--theme-03);
    opacity: .2;
}

.custom-table-wrapper {
    background-color: var(--custom-table-bg);
}