/* start style swicher  */
.style-swicher{
    position: fixed;
    right: 0;
    top: 60px;
    width: 200px;
    border: 1px solid var(--bg-black-50);
    z-index: 10;
    transition: 0.3s ease;
    transform: translateX(100%);
    }
    .style-swicher.open{
        transform: translateX(-25px);
    }
    .s-icon{
        position: absolute;
        height: 40px;
        width: 40px;
        text-align: center;
        font-size: 20px;
        background-color: var(--bg-black-100);
        color: var(--text-black-900);
        right: 100%;
        border: 1px solid var(--bg-black-50);
        margin-right: 25px;
        cursor: pointer;
        transition: all 0.3s ease;
        border-radius: 50%;
    }
    .s-icon i{
        line-height: 40px;
    }
    .style-swicher .day-nghit-icon{
        top: 55px
    }
    .style-swicher-toggler {
        top:0;
    }
    .style-swicher h4{
        margin: 0 0 10px;
        color: var(--text-black-700);
        font-size: 16px;
        font-weight: 600;
    }
    .style-swicher .colors{
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .style-swicher .colors span{
        display: inline-block;
        height: 30px;
        width: 30px;
        border-radius: 50%;
    }
    .style-swicher .color-1{
        background-color: #ec1839;
    }
    .style-swicher .color-2{
        background-color: #fa5b0f;
    }
    .style-swicher .color-3{
        background-color: #37b182;
    }.style-swicher .color-4{
        background-color: #1854b4;
    }.style-swicher .color-5{
        background-color: #f021b2;
    }
    .style-swicher-toggler i{
        animation: rotation 1s infinite linear;
    }
    @keyframes rotation{
        0%{
            transform: rotate(360deg)
        }
        100%{
            transform: rotate(0deg);
        }
    }
    /* end style swicher  */