:root { box-sizing: border-box; 

	font-size: 1.66vmin;


	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent; 
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none;   /* Safari */
	-khtml-user-select: none;    /* Konqueror HTML */
	-moz-user-select: none;      /* Old versions of Firefox */
	-ms-user-select: none;       /* Internet Explorer/Edge */
	user-select: none;           /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
	}

nobody {
 	background-image: url('content/gui/dashboardbackground.jpg');
 	background-repeat: no-repeat;
 	background-attachment: fixed;
 	background-size: cover;
 	display: grid;
 	place-items: center;
 	align-content: center;
 	/* align-content: start; */
 	justify-content: center;
 	height: 100vh;
 	margin: 0; /* This removes the default margin */
 	overflow: scroll;
 	justify-items: center;
	align-items: center;
}


.root{
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1vmin;
	}

a, a:visited, a:hover   { color: rgb(78, 181, 255);	}

a:active 	{ box-shadow: -2px -2px 5px #000;  }






.header {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 2vmin;
	padding:0;
	margin: 0;
	}

.header .icon,
.header .wordmark {
	display: flex;
	flex-direction: column;
	justify-content: left;
	align-items: left;
	}	

.header .ig {
	width:  12vmin;
	height: 12vmin;
	margin: 2vmin;
	}

.header .wordmark {
	color: gold;
	font-size: 15vmin;
	text-shadow:  .2vmin .2vmin 2vmin rgb(40, 2, 2), -.4vmin -0.4vmin 1vmin rgb(255, 255, 255);
	}

.header .sub {
	font-size: 4vmin;
	transform: translate(2.5%, -90%);
	}



.center-contents {
  display: grid;
  place-items: center;
  justify-items: center;
  height: 100vh;
  margin: 0; /* This removes the default margin */
}


div.promo {
	/* position: absolute;
	top: 30vh;
	left: 10vw; */
	font-size: 2.5rem;
	transform: rotate(-.2rad);
	background-color: rgba(255, 217, 63, 0.938);
	border: 1vmin solid white;
	color: rgb(0, 19, 46);
	border-radius: 5vmin;
	box-shadow: 0 0 10vmin 5vmin rgba(254, 254, 254, 0.757);
	text-shadow:  0 0 20px rgb(255, 36, 36);
	padding: 1.5vmin;
	z-index: 11;
	text-align: center;
	pointer-events: all;
	}

.promo h1 { font-size: 2.3em;}



div.tiny.promo{
	position: absolute;
	top: 33vh;
	right: 26vw; 
	font-size: .9rem;
	border-width: 3px;
	border-radius: 5vmin;
	padding: .5rem 1.5rem; 
	width: fit-content;
	}

#firebaseui-auth-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 9;
	background-color: #082c42a9;
	}

/*  
#firebaseui-auth-container > div{
	background: none;	
	}
	 */
#firebaseui-auth-container  .mdl-card{
	margin: auto;
	/* width: 80vw; */
	background-color: #c2e8ffa9;
	align-self: center;
	justify-self: center;
	border: 3px solid #0a73d0;
	}
	
	
#firebaseui-auth-container  .mdl-card.firebaseui-id-page-phone-sign-in-finish {
	/*margin: auto;
	background-color: #03314ec5;
	align-self: none;
	justify-self: none;
	color: #0a73d0;
	border-radius: 1rem;*/
	border: none;
	}
	
	

#firebaseui-auth-container form {
    position: absolute;
    transition: transform 1s cubic-bezier(0.86, -0.28, 0.59, 1.39);
    top:  5vh;
    left: 5vw;
    width:  90vw;
    height: 90vh;
    color: rgb(117, 179, 210);
    border: 0.3vmin solid gold;
    border-radius: 3vmin;
    display: block;
    margin:auto;
    }






	
.firebaseui-idp-list {
	border: 1px solid  rgb(110, 178, 233); 
 	width: 100%;
	display: flex;
	flex-direction: column;	
	justify-content: flex-start;
	align-items:	space-around;
	padding: 2dvmin;
	;
 }

.firebaseui-card-content form {		transform: translateY(95vh); } 

 #firebaseui-auth-container button.firebaseui-idp-facebook {
	border: 1px solid  rgb(110, 178, 233);
 }

 #firebaseui-auth-container button.firebaseui-idp-anonymous {
	border: 1px solid  rgb(98, 87, 25);
	margin-top: 2vh;
	/* display: fleza 
	flex-direction: row;
	justify-content: center;
	align-items: center; */
	
	}

#firebaseui-auth-container  div.warning{
    border: 2px solid  rgb(255 255 255);
    background-color: rgba(0, 53, 118, 0.566);
    width: fit-content;
    transform: translate( 1vw, -9vh);
    color: gold;
    white-space: pre-wrap;
    text-align: left;
	font-size: 1.75rem;
	padding: 1rem;
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.86, -0.28, 0.59, 1.39);
	}
#firebaseui-auth-container form div.firebaseui-card-header  { 	background-color: rgba(125, 202, 235, 0.979); 	color:rgb(0, 45, 82);  font-size: 1.15em;	}
#firebaseui-auth-container form div.firebaseui-card-content { 	background-color: rgba(125, 202, 235, 0.979); 	color:rgb(0, 45, 82);  font-size: 1.15em;	}
#firebaseui-auth-container form div.firebaseui-card-actions { 	background-color: rgba(125, 202, 235, 0.979); 	color:rgb(0, 45, 82);  font-size: 1.15em;	}
#firebaseui-auth-container form div.firebaseui-card-footer  { 	background-color: rgba(125, 202, 235, 0.979); 	color:rgb(0, 45, 82);  font-size: 1.15em;	}
#firebaseui-auth-container  .guest-warning{
	position:relative;
	left: 12.5%;
	top: -25vh;

    border: 4px solid  gold;
    background-color: rgba(2, 31, 68, 0.758);
    width: fit-content;
    color: gold;
    white-space: pre-wrap;
    text-align: left;
	font-size: 1.75rem;
	padding: 1rem;
	opacity: 0;
    transition: opacity 1s cubic-bezier(0.86, -0.28, 0.59, 1.39);
	}	
#firebaseui-auth-container  .guest-warning b{ color: rgb(168, 143, 0);}
#firebaseui-auth-container  .guest-warning i{ color: rgb(255, 245, 188); font-style: normal;}
#firebaseui-auth-container  .guest-warning  { color: gold;}
.lightbox.overlay {
	background-color: rgba(35, 3, 74, 0.342);
	/* background-image: url('content/gui/lightbox.png'); */
	background-repeat:inherit ;
	pointer-events: all;
 	}



form#join {
	width: 90vw;
	height: 90vh;
	background: none;
	border: 2px solid green;
	padding: 25px;
	margin: 25px;
	z-index: 1;
	text-align: center;
}

.pseudobutton {
    padding: 10px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    cursor: pointer;
}


.center {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	}
.center.vertical {
	flex-direction: column;
	height: 100vh;;
	}

.center-contents {
	display: grid;
	align-content: space-between;
	justify-content: space-between;
	/* place-items: center; */
	height: 100vh;
	margin: 0; /* This removes the default margin */
}




/*

MOVED ALL THIS TO ICONS.CSS

.icon    {
	background-position: center;
	background-size: cover;
	background-color: #2197FF;
	width: 10vmin;
	height:10vmin;
	border-radius: 50%;
	transition: all 1s cubic-bezier(0.86, -0.28, 0.59, 1.39);
	}

.icon.small {
	width: 4vmin;
	height:4vmin;
	border-width: .5vmin;
	}
.icon.xl {
	width: 16vmin;
	height:16vmin;
	border-width: 1.3vmin;
	}

.edit .icon.active {
	border: 1vmin solid gold;
	width: 10vmin;
	height:10vmin;
	background-color: hsl(208, 91%, 43%); 
	}

.icon.inactive {
	width:  7vmin;
	height: 7vmin;
	border: 0.8vmin solid #5393cb; 
	filter:grayscale( 60%);
	background-color: #094274; 
	}

	.icon:hover { transition: border-color 1s; border-color:rgb(133, 225, 255) !important; }
	.embed       {width:10%;display:flex;flex-direction:row;justify-content: center;                 float: left;}
	.floatleft   { float: left; margin: 0 1em 0 0 ; display:inline;}
	.bottomright {position: fixed;bottom: 2;right: 1px;}
	.topright    { position: fixed  !important; top: 1vmin; right: 0; }
    .low.row { flex-direction: column; align-items: flex-end; gap: 0vmin; }

	.icon		 {  background-color: #33A0EA;}
	.icon.save   {	background-image:  url('content/gui/cloud.png'); 	}
	.icon.play   {	background-image:  url('content/gui/play.png'); 	}
	.icon.exit   {	background-image:  url('content/gui/back.png'); 	}
	.icon.delete {	background-image:  url('content/gui/trash.png'); 	}
	.icon.cancel {	background-image:  url('content/gui/up.png'); 	}
	.icon.girl   {	background-image:  url('content/gui/girl.png'); 	}
	.icon.boy    {	background-image:  url('content/gui/boy.png'); 	}
	.icon.left   {	background-image:  url('content/gui/hand.png'); 	transform: scaleX(-1);	}
	.icon.right  {	background-image:  url('content/gui/hand.png'); 	}
	.icon.spawn  {	background-image:  url('content/gui/spawn.png'); 	}
	.icon.guest  {	background-image:  url('content/gui/guest.png'); 	}
	.icon.save   {	background-image:  url('content/gui/save.png'); 	}


.icon.save   {
	background-color: #33A0EA;	}
*/



.column {
	display: flex;
	flex-direction: column;	
	justify-content: center;
	align-items: center;
	}

.row {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1vmin;
	align-content: flex-end;
	}



.brusherpage {	
	height:100%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	justify-items: space-evenly;
	align-items: center;

	gap: 1vmin;
	}
.brusherpage .title {	
	font-size: 3rem;
	text-shadow: .3vmin .3vmin 1vmin rgb(0, 19, 46);

	}
 



.brushers {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 1vmin;
	margin: 2;
	}
 
.brusher.edit {
	background-color: rgba(0, 27, 68, 0.329);	
	border-radius: 3em;
	border-color: 1px solid rgb(90, 175, 255); 
	border: thin solid gold;
}

.brusher.edit h2 {
	color: rgb(255, 255, 255);	
	font-size: 1.2rem;
	text-align: right;
	margin: 0.5rem 0 0 -1.5rem;
}

.avatar .pic {
	position: relative;
	width: 22vmin;
	height:22vmin;
	border-radius: 50%;
	overflow: hidden;
	transform: scaleX(-1);
	padding: -5%;
	border: 1.5vmin solid rgb(27, 174, 236);
	color: rgb(0, 19, 46);
	transition: all 1.5s cubic-bezier(0.86, -0.28, 0.59, 1.39);
}

.edit .avatar .pic {
	width: 33vmin;
	height:33vmin;
	border-radius: 50%;
	border: 1.5vmin solid gold;
}

.avatar .pic:focus,
.avatar .pic.edit	{
	border: thick dotted rgb(0, 191, 255);
	transform: scale(-1.7,1.7);
	z-index: 2;
	}	

.avatar .pic >* {
	position: absolute;
    top:    -25%;
	left:   -25%;
    width:  150%;
	height: 150%;
	z-index:   3;
	background-position: center;
	background-size: cover;
}

.avatar .name {
	/* position: relative;
	top: -3rem; */
	font-size: 2rem;
	font-weight: 700;
	border: .75vmin solid rgb(66, 193, 252);
	background-color: rgb(6, 40, 56);
	min-width: 4em;
	color: gold;
	max-width: fit-content;
	max-height: fit-content;
	min-height: 2.4rem;
	padding:0.2rem 0.5rem;
	border-radius: 1.5vmin;
	pointer-events: all;
}

.edit .avatar .name { 
	top: 0;
	border-width: .8vmin;
	border-radius: 3vmin;
}

/* .avatar .name.edit { 
	font-size: 5rem;
	padding: 2rem;
} */
.avatar .name .lame { 
	color: white;
	opacity:0.4;
}
.user .small.name { 
	font-size: .6rem;
	overflow: visible;
	overflow-wrap: break-word;
    color: rgb(104 172 215);
}


.avatar canvas { 
	filter: invert(1);
}


/* 
.hand > .icon  {
	background-image: url('content/gui/hand.png'); 
	}
.hand > .left {
	transform: scaleX(-1);
	}


.gender .boy {
	background-image: url('content/gui/boy.png'); 
	}
.gender .girl {
	background-image:  url('content/gui/girl.png'); 
	}*/
/* .gender .scale { 
	background: linear-gradient(90deg, rgba(8,155,237,1) 0%, rgba(255,255,255,1) 50%, rgba(252,137,190,1) 100%);
	} */




.birthday {
	color: gold;
	font-size: 1.6em;
	}

.birthday input {
    background: none;
    color: rgb(110, 210, 235);
	font-weight: 600;
    text-align: right;
	}


::-webkit-calendar-picker-indicator {
    background: rgba(110, 210, 235, 0.379);;
	border: 3px solid rgb(110, 210, 235);;
	padding: 2px 4px;;
	}

.birthday .local {
	background-color: #2197FF;
	width: fit-content;
	padding:.2em 1em;
	border-radius: 2vmin;
	transition: all 1s cubic-bezier(0.86, -0.28, 0.59, 1.39);
	border: 0.125vmin solid #0a73d0;
	margin: 0 2vmin;
	font-size: 1.2rem;
	}

.birthday .local .age {
	width: fit-content;
	margin: auto;
	font-size: 0.75em; 	
	}

.birthday .local.set {
	background-color: #133e64; 
	border-color: gold; 
	}


.settings .panel {
	align-items: flex-start;
	border-radius: 2vmin;
	background-color: #00345f;
	color: gold;
	transition: all 1s cubic-bezier(0.86, -0.28, 0.59, 1.39);
	border: 3px solid #64b4fa;
    padding: 3rem; 
    font-size: 1.6em;
    min-width:fit-content;
    /* position: absolute;
    bottom: 16%;
	left: 23%;*/
    text-wrap:nowrap; 
	z-index: 4;
	}
 
.settings .panel > * {
	margin: 0.3vmin;
	}

.settings li .panel {
	padding: .25rem;
	font-size: 2rem;
	border: .125rem solid gold;
	background-color: #00345f;
	color: gold;
	border-radius: 1rem;
	margin: .666rem;
	width: 20vw;
	text-align: center;
	transition: all 1s cubic-bezier(0.86, -0.28, 0.59, 1.39);
	}

.qr.content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #00345fda;
	color: gold;
	border: 3px solid #64b4fa;
	border-radius: 2vmin;
	padding: 5rem;
	font-size: 2.3em;
	width: 60dvw;
	text-wrap:pretty;
	z-index: 5;
	}
.qr.content img {
	border: .3vmin solid #64b4fa;
	margin: 1rem;
	width: 30dvmin;
	box-shadow: .5rem .5rem 1rem 0.5rem rgba(0, 0, 0, 0.5);
	}
.qr.content p {
	margin: 1rem;
	font-size: 1.5rem;
	}
.qr.content button {
	margin: 2rem;
	font-size: 1.5rem;
	border-radius: .4rem;	
	background-color: gold;
	border: 5px solid rgb(126, 180, 255);
			}
		 
			


.gear {
    position: relative;
	background-image: url('content/gui/gear.png');
    display: flex;
    justify-content: center;
	}




::-webkit-datetime-edit { 
	padding: 0.1em; 
	width:fit-content;
	font-size: 2.5vmin;
	}
/*
::-webkit-datetime-edit-fields-wrapper { background:red; font-size: 1.2em;}
::-webkit-datetime-edit-text { padding: 0 0.3em; font-size: 1.2em;}
::-webkit-calendar-picker-indicator { background: rgb(71, 165, 208); width:5vmin; height:5vmin; border-radius: .5vmin; border: 2px solid black; }
 ::-webkit-datetime-edit-month-field { color: blue; }
::-webkit-datetime-edit-day-field { color: green; }
::-webkit-datetime-edit-year-field { color: purple; }
::-webkit-inner-spin-button { display: none; } */



.deletion .confirm {
	color: rgb(255, 184, 175);
	background: rgb(126, 6, 0);
	padding: 1rem;
	font-size: 1.6rem;
	}
/* .delete {
	background-image: url('content/gui/delete.png'); 
	background-color: #800a80; 
	font-weight: 600;
	} */

/* .cancel {
	background-image: url('content/gui/cancel.png'); 
	background-color: #85d4ea; 
	} */

.user {
	position: absolute;
	top:   1vh;
	right: 1vw;
	width:  10vw;
	z-index: 2;
	gap: .5rem;
	color: #c8c8c8;
	}

.user .signout  {
	font-size: 1rem;
	color: #ebebeb;	
	}

.user .signout > div { 
	font-size: 1rem;
	font-weight: 800;
	border-radius: .5rem;
	background-color: rgba(74, 0, 0, 0.128);
	padding: 0.25rem 0.50rem;
	border: 1px solid rgb(154, 0, 0);
	color: #cc5252;
	text-align: center;
	margin: 0.6rem 0;
	}
.user .signout > div:hover { 
	border-color: rgb(255, 0, 0);
    color: #ffbdbd;
	background-color: rgb(74, 0, 0);
}




	#ernst .user .signout > div { 
	font-size: 1.25em;
	font-weight: 800;
	border-radius: .5rem;
	background-color: gold;
	padding: 0.25rem 0.50rem;
	border: 1px solid rgb(126, 180, 255);
	color: #00345f;
	} 
	

.greyed {
	filter: grayscale(70%);
	border-color: #666;
	}


	input[type="checkbox" i] {
		width:1.2rem;
		height:1.2rem;
		}



.account.settings  {
	align-self: start;
	margin-top: 7vh;
	justify-self: center;
	font-size: 2rem;
	}
.account .tab.row {
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: rgb(126, 180, 255);
	align-items: flex-end !important;
	}

.account .tab > * {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	padding: 0.5vmin;
	font-size: 2.5rem;
	margin-top: 1rem;
	transition: all 500ms cubic-bezier(0.86, -0.28, 0.59, 1.39);
	color: rgba(155, 155, 155, 0.685);
	border: 3px solid rgba(192, 192, 192, 0.537);
	background-color: #4f4f4f68;	
	}
.account .tab > .active {
	color: gold;
	border:  6px solid rgb(126, 180, 255);
	background-color: rgba(126, 180, 255, 0.724);	
	text-shadow: .75vmin .75vmin 1vmin rgb(0,0,0), -.1vmin -.1vmin .15vmin rgb(255, 255, 255);
	}
.account .tab > .complete {
	color: rgb(211, 179, 0);
	border-color:  rgb(138, 117, 0);
	background-color: rgb(128, 109, 0);	
	}
		 
.account .page {	
	border: .5rem solid rgb(126, 180, 255);
	width: 75vw;
	background-color: #8ab2d44a;
	margin: -.4rem 0 4rem 0;
	}

.account .page.closed {
	display: none !important;
    background-color: sandybrown;
	}


.account h1 {
	width: 100%;
	background-color: rgb(126 180 255 / 57%);
	color: #222;
	font-size: 1.5em;
	padding: 0.4em 1.6em;
	margin: 0 0 2dvh 0;
}
	
.account .overview {
    background-color: rgb(4 11 14 / 64%);
    color: #7eb4ff;
    font-size: 1em;
    padding: .4em 2em;
}
 .spacer {
    width:  4vw;
    height: 4vh;
}
	
.account button.ok{
	margin: 0.5rem 0 0 0;
	padding:0.125em .25em;
	z-index: 5;	
	position: static;
	float: right;
}

.account .fakeok{
	width:fit-content;
	display: inline;

	font-size:1rem;
	margin: 8rem 2rem 1rem 0;
	padding:0.125em .25em;
	z-index: 5;
	background-color: gold;
	color:black;
	border-radius: .4rem;
}


	
button.ok{
	float: right;
	position:fixed;
	bottom: 4vh;
	right: 3vw;
	width:fit-content;
	margin:0;
	padding:0.5em 1em;
}
button.ok.disabled{
	background-color: #1b1b1b;
}

button.ok,
.account button {
	font-size: 1.25em;
	font-weight: 800;
	border-radius: 1rem;
	margin: 4px 4vw;
	width: 10vw;
	background-color: gold;
	padding: 0.125rem 0.25rem;
	border: 1px solid rgb(126, 180, 255);
	color:#00345f;
	}


/* button to close Brusher settings editor. Was 'play' now 'done` */
button.ok.play,
button.ok.done
{
	font-size: 2rem;
	width: fit-content;
	}

/* if part of the pricing tab*/
.account td button { 
	width:100%;
	}


			
.account label {
	color: rgb(126, 180, 255);
	min-width: 10vw;
	font-size: 1.5rem;
	display: block;
	float:left;
	clear: both;
	}

.account table,
.account td,
.account th {
	color: rgb(126, 180, 255);
	border: 1px solid rgb(126, 180, 255);
	min-width: 10vw;
	font-size: 1.5rem;
	padding: 0.5rem;
	text-align: center;
	}
.account tr td:nth-child(1),
.account th {
	background-color: rgb(126, 180, 255);
	border: 2px solid rgb(0, 0, 0);
	width: 18vw;
	padding: 0.25rem;
	background-color: rgba(92, 78, 0, 0.536);
	color:#c2af02;
	text-align: right;
	}
.account tr:nth-child(1) th:nth-child(1){
	background: none;
	}	
.account th {
	text-align: center;
	}
td.hot,
td.hit {
    background-color: rgb(24 110 2 / 40%);
    color: rgb(190 255 143);
	}
td.dim {
	background-color: rgb(1, 27, 0);
	color: rgba(96, 139, 199, 0.757);
	}
td.dim.bad	 {
	background-color: rgb(19, 0, 0);
	color: rgba(96, 139, 199, 0.757);
	}	
td.red {
	background-color: rgba(225, 73, 65, 0.217);
	color: rgb(251, 131, 75);
	}
	


div.field {
	border-bottom: thin inset rgb(126, 180, 255);

}	

 
 

.field * {
    float: left;
}

.field select,
.field input,
.field textarea
 {
	border: 1px solid rgb(126, 180, 255);
	font-weight: 500;
	font-size: 1.3em;
	padding: 1px 4px;
	}
.field select {
	color: rgb(46, 85, 141);
	font-style: normal;
	width: 16rem;
	text-align: right;
	}


.field input[type="checkbox"] {
    width: 3rem;
    height: 3rem;
    margin: 0 0 0 1rem;
}
.field	input[type="checkbox"]:checked + .name {

	background-color: #030731;
	background-color: #0075ff;
	color: rgb(255, 255, 255);
		}
	


.field .name {
	/*display: inline-block;
	 width: 17vw; */
    background-color: #0a2858;
    color: rgb(65 184 255); 
	border: 1px solid rgb(55, 89, 136);
	font-weight: 600;
	font-size: 1.5em;
	padding: 0px 10px 0px 10px;

	}




.field .details {
	color: rgb(212, 230, 255);
	font-size: 1.12em;
	display: inline-block;
	white-space: pre-wrap; /* or 'normal' */
	padding: 3px 8px;
	}
.field .details i  {
	font-style: normal;
	color: rgb(145, 208, 154);
	}
		
			
	.error-background {
		background-color: rgb(237, 72, 72)
	}		



.firebaseui-resend-container{
	min-height: 115px;
	min-width: 115px;
	justify-content: center;
	position: absolute;
	top: 55.5vh;
	left: 18vw;
	z-index: 10;
	display: block;
	font-family: Roboto,Helvetica,Arial,sans-serif;
}


  


#settings {
	position: absolute;
	top: 2vmin;
	right: 2vmin;
	z-index: 10;
	display: flex;
	flex-direction: column;
	justify-content: center;
	}


.settings-panel {
	width: 32vw;
	height: fit-content;
	padding: 3vmin;
	border: 1.2vmin solid rgb(27, 128, 252);
	border-radius: 3.5vmin;
	padding: 2vmin;
	background-color: rgba(0, 42, 100, 0.873);	
	list-style:none; 
	}

.settings-panel h3
{
	font-size: 4vmin;;
	background-color:#0004;
	margin: 6vh 0 3vh 0;
}
settings-panel h3.closed +  *
{
	color: #6cc10b;
	margin: 2vmin 0 1vmin 0;
}


.settings-panel h3.closed +  *
{
	display:none;
}



.settings-panel:hover {
	background-color: rgba(3, 12, 102, 0.9);	
}

.settings-panel    li {
	list-style: none;
}


.settings-panel button {
	background-color: gold;
	color: black;
	border: 1vmin solid rgb(0, 19, 46);
	border-radius: 2vmin;
	padding: 1vmin;
	font-size: 3vmin;
	margin: 1vmin;
	}

.settings-panel  label {
	text-align: center;
	display: block;
	color: rgb(175, 149, 0);
	width: 80%;
	font-size: 2rem;
	margin: 1vh;
	}
.settings-panel  label:has(> input:checked) {    /* Styles for labels that have a checked input as a direct child */
    background-color: rgba(0, 89, 255, 0.294);
	color: gold;
	border: .5vh  solid rgb(203, 191, 19);
	border-radius: 2vh;
	}


.edit div.id.fixed {
	display: block;
	}
	div.id.fixed {
	display: none;
	font-size: 1.5vh;
	color: gold;
	}
	div.id.fixed span {
	color: white;
	}
	 


.sliders{
	width: fit-content;
	margin: 2.5vh 0 0 0;
	text-align:right;
	font-size: 2vh;
	color: gold;
	list-style: none;

}

.sliders .master {
	font-size: 3vh;
	color: rgb(255, 240, 157);
}

.settings-panel input{
	width: 25vw;
	cursor: pointer;
	appearance: none; 
	display: block;
	position: relative;
  }
  
.settings-panel input{
	width: 25vw;
	cursor: pointer;
	display: block;
	position: relative;
  }
  
.tutor  input {
	background: #0001;
	border-radius: .5vh;
	height: .1vh;
	color: #0001;
	}
  
  
.sliders        input::-webkit-slider-runnable-track {
	background: gold;
	border-radius: .5vh;
	height: 1vh; 
  }
 .sliders .master  input::-webkit-slider-runnable-track {
	background-color: rgb(255, 239, 148);
	border-radius: 1vh;
	height: 2vh;
  }
  
  
.sliders input::-webkit-slider-thumb {
	appearance: none;
	border: thin solid white;
	box-shadow: 3px 2px 6px black;
	height: 4.5vh;
	width: 1vw;
	background: #00b0f0;
	margin: -2vh 0 0 0;
  }
  
    
  .sliders .master input::-webkit-slider-thumb {
	height: 6vh;
	width: 1vw;
	background: #00b0f0;
	margin: -3vh 0 0 0;
  }