.wrapper_switch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* === */
.switch_theme {
    position: relative;
    width: 90px;
    height: 35px;
    appearance: none;
    -webkit-appearance: none;
    background: #E3E3E3 url(../images/svg/moon-day.svg);
    background-repeat: no-repeat;
    background-position: 80% center;
    border-radius: 18px;
    /* box-shadow: 0 0 15px -2px rgba(24, 20, 100, 0.47); */
    transition: background .7s ease-in-out;
    outline: none;
    cursor: pointer;
}

/* Large Size */
/* @media (min-width:992px) {
    .switch_theme {
      width: ;
    }
} */
.switch_theme:checked {
    background: #31363B url(../images/svg/sun-night.svg);
    background-repeat: no-repeat;
    background-position: 20% center;
    transition: background .7s ease-in-out;
}

.switch_theme:after {
    content: '';
    width: 41px !important;
    min-width: 41px !important;
    height: 41px !important;
    border-radius: 50%;
    position: absolute;
    left: -2px;
    top: -2px;
    /*bottom: -2px; */
    transform: translateX(0px);
    animation: off .7s forwards cubic-bezier(.8, .5, .2, 1.4);
    background: #57B8E8 url(../images/svg/sun-day.svg) no-repeat center;
    box-shadow: 0px 0px 15px #b5e6ff;
}

@keyframes off {
    0% {
        transform: translateX(52px);
        width: 30px;
    }

    50% {
        width: 35px;
        border-radius: 25px;
    }

    100% {
        transform: translateX(0px);
        width: 30px;
    }
}

.switch_theme:checked:after {
    animation: on .7s forwards cubic-bezier(.8, .5, .2, 1.4);
    background: #FFCB74 url(../images/svg/moon-night.svg);
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0px 0px 15px rgb(255 222 166 / 50%);
}

@keyframes on {
    0% {
        transform: translateX(0px);
        width: 30px;
    }

    50% {
        width: 35px;
        border-radius: 25px;
    }

    100% {
        transform: translateX(52px);
        width: 30px;
    }
}