.toggle-flex{
    display: flex;
    justify-content: flex-end;


label{
    width: 50px;
    height: 25px;
    position: relative;
    display: block;
    /* background: gray; */
    background: white;
    
    border-radius: 25px;
    box-shadow: inset 0px 3px 10px rgba(0, 0, 0, 0.5), inset 0px -5px 15 rgba(0, 0, 0, 0,0.5);
    cursor: pointer;
    transition: 0.5s;
}

label:after{
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 3px;
    left: 3px;
    background: linear-gradient(180deg,rgb(238, 218, 218),rgb(46, 158, 196));
    border-radius: 50%;
    box-shadow: 0px 3px 10px rgba(0,0,0,0.3);
    transition: 0.5s;
    

}
input{
    width: 0;
    height: 0;
    visibility: hidden;
}
input:checked + label{

    background: gray;
    /* i'll optimize this part -parsa */


}

input:checked + label:after{
    left: calc(100% - 23px);;
    background: linear-gradient(0deg,rgb(238, 218, 218),rgb(2, 44, 58));
    transition: 0.4; 


}

label:active:after{
    width: 25px;
}

.toggle-flex{
    display: flex;
    justify-content: flex-end;
}
}