/*

<span dir="rtl" class="settings-entry-title" style="margin-right: .7em;">STP</span>
						<div><label class="switch" style="margin-left: .2em; margin-right: .2em;">
								<input type="checkbox" id="c_stp" checked="">
								<div class="slider" style="background: #8C66FF;">
									<div class="circle">
										<svg class="cross" xml:space="preserve"
											style="enable-background:new 0 0 512 512; color: #8C66FF;"
											viewBox="0 0 365.696 365.696" y="0" x="0" height="6" width="6"
											xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
											xmlns="http://www.w3.org/2000/svg">
											<g>
												<path data-original="#000000" fill="currentColor"
													d="M 243.188 182.86 z m -168.188 3.14 m -75 0 a 75 75 90 1 0 367 -1 a 75 75 90 1 0 -367 1">
												</path>
											</g>
										</svg>
										<svg class="checkmark" xml:space="preserve"
											style="enable-background:new 0 0 512 512" viewBox="0 0 365.696 365.696"
											y="0" x="0" height="6" width="6" xmlns:xlink="http://www.w3.org/1999/xlink"
											version="1.1" xmlns="http://www.w3.org/2000/svg">
											<g>
												<path class="" data-original="#000000" fill="currentColor"
													d="M 258 181 z m -100 0 m -75 0 a 75 75 90 1 0 232.188 -1.14 a 75 75 90 1 0 -232 1 Z">
												</path>
											</g>
										</svg>
									</div>
								</div>
							</label></div>
						<span dir="rtl" class="settings-entry-title">چگالی</span>
            
*/
.switch {

	/* switch */
	--switch-width: 46px;
	--switch-height: 24px;
	--switch-bg: rgb(131, 131, 131);
	--switch-checked-bg: #8C66FF;
	--switch-offset: calc((var(--switch-height) - var(--circle-diameter)) / 2);
	--switch-transition: all .2s cubic-bezier(0.27, 0.2, 0.25, 1.51);     /* circle */
	--circle-diameter: 18px;
	--circle-bg: #fff;
	--circle-shadow: 1px 1px 2px rgba(146, 146, 146, 0.45);
	--circle-checked-shadow: -1px 1px 2px rgba(163, 163, 163, 0.45);
	--circle-transition: var(--switch-transition);     /* icon */
	--icon-transition: all .2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
	--icon-cross-color: var(--switch-bg);
	--icon-cross-size: 6px;
	--icon-checkmark-color: var(--switch-checked-bg);
	--icon-checkmark-size: 10px;     /* effect line */
	--effect-width: calc(var(--circle-diameter) / 2);
	--effect-height: calc(var(--effect-width) / 2 - 1px);
	--effect-bg: var(--circle-bg);
	--effect-border-radius: 1px;
	--effect-transition: all .2s ease-in-out;
	margin-left: .2em;
	margin-right: .7em;
}

.switch input {
	display: none;
}

.switch {
	display: inline-block;
}

.switch svg {
	-webkit-transition: var(--icon-transition);
	-o-transition: var(--icon-transition);
	transition: var(--icon-transition);
	position: absolute;
	height: auto;
}

.switch .checkmark {
	width: var(--icon-checkmark-size);
	color: var(--icon-checkmark-color);
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
}

.switch .cross {
	width: var(--icon-cross-size);
	color: var(--icon-cross-color);
}

.slider {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: var(--switch-width);
	height: var(--switch-height);
	background: var(--switch-bg);
	border-radius: 999px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	position: relative;
	-webkit-transition: var(--switch-transition);
	-o-transition: var(--switch-transition);
	transition: var(--switch-transition);
	cursor: pointer;
}

.circle {
	width: var(--circle-diameter);
	height: var(--circle-diameter);
	background: var(--circle-bg);
	border-radius: inherit;
	-webkit-box-shadow: var(--circle-shadow);
	box-shadow: var(--circle-shadow);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-transition: var(--circle-transition);
	-o-transition: var(--circle-transition);
	transition: var(--circle-transition);
	z-index: 1;
	position: absolute;
	left: var(--switch-offset);
}

.slider::before {
	content: "";
	position: absolute;
	width: var(--effect-width);
	height: var(--effect-height);
	left: calc(var(--switch-offset) + (var(--effect-width) / 2));
	background: var(--effect-bg);
	border-radius: var(--effect-border-radius);
	-webkit-transition: var(--effect-transition);
	-o-transition: var(--effect-transition);
	transition: var(--effect-transition);
}

/* actions */
.switch input:checked + .slider {
	background: var(--switch-checked-bg);
}

.switch input:checked + .slider .checkmark {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

.switch input:checked + .slider .cross {
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
}

.switch input:checked + .slider::before {
	left: calc(100% - var(--effect-width) - (var(--effect-width) / 2) - var(--switch-offset));
}

.switch input:checked + .slider .circle {
	left: calc(100% - var(--circle-diameter) - var(--switch-offset));
	-webkit-box-shadow: var(--circle-checked-shadow);
	box-shadow: var(--circle-checked-shadow);
}