body{
    --text-color:#222;
    --background-color::#fff;
}
body.dark-theme{
    --text-color:#eee;
    --background-color:#121212;
}

@media (prefers-color-scheme: dark) {
    
    body{
        --text-color:#eee;
        --background-color: #fff;
    }
    body.light-theme {
        --text-color:#222;
        --background-color:#fff;
    }
}
body{
    background: var(--background-color);
}

/* body.dark{
    background: #121212;

} */
.avatar-text.light{
    color:#fff;
}

.checkbox {
	opacity: 0;
	position: absolute;
}

.label {
	background-color: #DBE3E5;
	border-radius: 50px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5px;
    margin-left:0px;
    padding-left:2px;
	position: relative;
	height: 21px;
	width: 38px;
	transform: scale(1.5);
}
.label::after{
    background-color:#eee;
}
.label .ball {
	background-color: #fff;
	border-radius: 50%;
	position: absolute;
	top: 1px;
	left: 4px;
	height: 19px;
	width: 20px;
	transform: translateX(-3px);
	transition: transform 0.2s linear;
}
.checkbox:checked + .label{
	background-color: rgb(68, 66, 66);
}
.checkbox:checked + .label .ball {
	background-color: var(--success-color);
	transform: translateX(12.5px);
}