.off::before{
	font-family: "Font Awesome 5 Pro";
	font-weight: bold;
	content: "";
    background: no-repeat center url(../image/xmark-solid.svg);
	color: red;
	display: inline-block;
	padding-top: 1px;
	margin-left: 2px;
	width: 1em;
	height: 1em;
}

.button_area
{
    padding:3px;
    /* background-color:inherit;
    box-shadow: inset -2px -2px 3px 3px rgb(250, 248, 248),inset 2px 2px 3px 3px rgb(200, 200, 200);*/
    width: 2.2em;
    height: 1em;
    border-radius: 18px;
    transition: all 2s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0.1em solid #1d2c59;
}
.button
{
    width: 1em;
    height: 1em;
    /* background: radial-gradient(#f2f2f2,#1d2c59); */
    background-color:#1d2c59 ;
    border-radius: 50%;
    transition: all 2s;
}
.button_area::after {
	font-family: "Font Awesome 5 Pro";
	font-weight: bold;
	content: "";
	color: #097005;
	background: no-repeat center url(../image/check-solid.svg);
	display: inline-block;
	padding-right: 5px;
	width: 1em;
	height: 1em;
}

.off::after{
    content: "";
    display: none;
}