.switch {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
}

.switch .slider:after {
  content: '\263E';
}

:root {
	--color-newbw-1: #ffffff;
	--color-newbw-2: #000000;
	--color-newbv-1: #9b4e97;
	--color-newbv-2: #264796;
	--color-newbl: #000000;
	--color-newwh: #ffffff;
	--color-newb: #264796;
	--color-newv: #9b4e97;
	
	--color-header-footer-left: #ffffff;
	--color-header-footer-right: #eeeeee;
	--color-header-footer-line: #003D99;
	--color-text: #000000;
	--color-main-1: #B0B0B0; /* header-left */
	--color-main-2: #000000; /* header-right */
	--color-main-3: #eaeaea;
	--color-main-4: #BB02D5;
	--color-main-5: #340069;
	--color-main-6: #eef4ff;
	--color-main-7: #BB02D5;
	--color-main-8: #F1F1F1;
	--color-main-9: #cbc5ff;
	--color-main-10: #000000;  /* Текст */
	--color-main-11: #00000000; /* Цвет фона у приоритета в шапке */
	--color-main-12: #AB2D85; /* Полоски в шапке */
	--color-header-text1: #003D99;
	--color-header-text2: #254694;
	--color-header-text3: #AB2D85;
}

:root[data-theme="light"]{
	--color-newbw-1: #ffffff;
	--color-newbw-2: #000000;
	--color-newbv-1: #9b4e97;
	--color-newbv-2: #264796;
	
	--color-header-footer-left: #ffffff;
	--color-header-footer-right: #eeeeee;
	--color-header-footer-line: #003D99;
	--color-text: #000000;
	--color-main-1: #b0b0b0; /* header-left */
	--color-main-2: #000000; /* header-right */
	--color-main-3: #eaeaea;
	--color-main-4: #BB02D5;
	--color-main-5: #340069;
	--color-main-6: #eef4ff;
	--color-main-7: #BB02D5;
	--color-main-8: #F1F1F1;
	--color-main-9: #cbc5ff;
	--color-main-10: #000000;  /* Текст */
	--color-main-11: #00000000; /* Цвет фона у приоритета в шапке */
	--color-main-12: #AB2D85; /* Полоски в шапке */
	--color-header-text1: #003D99;
	--color-header-text2: #254694;
	--color-header-text3: #AB2D85;
}

:root[data-theme="dark"]{
	--color-newbw-1: #000000;
	--color-newbw-2: #ffffff;
	--color-newbv-1: #264796;
	--color-newbv-2: #9b4e97;
	
	--color-header-footer-left: #390039;
	--color-header-footer-right: #000000;
	--color-header-footer-line: #BB02D5;
	--color-text: #FFFFFF;
	--color-main-1: #000000; 
	--color-main-2: #FFFFFF; /* белый */
	--color-main-3: #390039; 
	--color-main-4: #BB02D5; /* ярко фиолетовый */
	--color-main-5: #340069; /* темно синий */
	--color-main-6: #eef4ff; /* светло синий */
	--color-main-7: #5E02F4; /* ярко синий */
	--color-main-8: #F1F1F1; /* Чуть-чуть темный белый =) */
	--color-main-9: #cbc5ff;
	--color-main-10: #FFFFFF;
	--color-main-11: #F1F1F1;
	--color-main-12: #BB02D5;
	--color-header-text1: #FFFFFF;
	--color-header-text2: #FFFFFF;
	--color-header-text3: #AB2D85;
}


/* :root {
	--color-main-1: #B0B0B0;
	--color-main-2: #000000;
	--color-main-3: #eaeaea;
	--color-main-4: #BB02D5;
	--color-main-5: #340069;
	--color-main-6: #eef4ff;
	--color-main-7: #BB02D5;
	--color-main-8: #F1F1F1;
	--color-main-9: #cbc5ff;
	--color-main-10: #000000;
	--color-main-11: #00000000;
	--color-main-12: #AB2D85;
	--color-header-text1: #003D99;
	--color-header-text2: #254694;
	--color-header-text3: #AB2D85;
}

:root[data-theme="light"]{
	--color-main-1: #B0B0B0;
	--color-main-2: #000000;
	--color-main-3: #eaeaea;
	--color-main-4: #BB02D5;
	--color-main-5: #340069;
	--color-main-6: #eef4ff;
	--color-main-7: #BB02D5;
	--color-main-8: #F1F1F1;
	--color-main-9: #cbc5ff;
	--color-main-10: #000000;
	--color-main-11: #00000000;
	--color-main-12: #AB2D85;
	--color-header-text1: #003D99;
	--color-header-text2: #254694;
	--color-header-text3: #AB2D85;
}

:root[data-theme="dark"]{
	--color-main-1: #000000; 
	--color-main-2: #FFFFFF;
	--color-main-3: #390039; 
	--color-main-4: #BB02D5;
	--color-main-5: #340069;
	--color-main-6: #eef4ff;
	--color-main-7: #5E02F4;
	--color-main-8: #F1F1F1;
	--color-main-9: #cbc5ff;
	--color-main-10: #FFFFFF;
	--color-main-11: #F1F1F1;
	--color-main-12: #BB02D5;
	--color-header-text1: #FFFFFF;
	--color-header-text2: #FFFFFF;
	--color-header-text3: #AB2D85;
} */


/*@media (prefers-color-scheme: light) {
    :root {
	--color-main-1: #000000; /* черный */
/*	--color-main-2: #FFFFFF; /* белый */
/*	--color-main-3: #390039; /* темно фиолетовый */
/*	--color-main-4: #BB02D5; /* ярко фиолетовый */
/*	--color-main-5: #340069; /* темно синий */
/*	--color-main-6: #eef4ff; /* светло синий */
/*	--color-main-7: #5E02F4; /* ярко синий */
/*	--color-main-8: #F1F1F1; /* Чуть-чуть темный белый =) */
/*    }
/*}

@media (prefers-color-scheme: dark) {
    :root {
	--color-main-1: #000000; /* черный */
/*	--color-main-2: #FFFFFF; /* белый */
/*	--color-main-3: #390039; /* темно фиолетовый */
/*	--color-main-4: #BB02D5; /* ярко фиолетовый */
/*	--color-main-5: #340069; /* темно синий */
/*	--color-main-6: #eef4ff; /* светло синий */
/*	--color-main-7: #5E02F4; /* ярко синий */
/*	--color-main-8: #F1F1F1; /* Чуть-чуть темный белый =) */
/*   }
}*/


input[type=checkbox]{
	height: 0;
	width: 0;
	visibility: hidden;
}

label {
	cursor: pointer;
	text-indent: -9999px;
	width: 70px;
	height: 30px;
	background: var(--color-newbv-2); /*var(--color-main-3);*/
	display: block;
	border-radius: 20px;
	position: relative;
}

label:after {
	content: '';
	position: absolute;
	top: 5px;
	left: 5px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 20px;
	transition: 0.3s;
}

input:checked + label {
	background: var(--color-newbv-2);
}

input:checked + label:after {
	left: calc(100% - 5px);
	transform: translateX(-100%);
}

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