
@font-face {
    font-family: Roboto;
	font-style: normal;
    src: url(fonts/Roboto-Regular.ttf);
    font-weight: 400;
}
@font-face {
    font-family: Roboto;
	font-style: normal;
    src: url(fonts/Roboto-Thin.ttf);
    font-weight: 100;
}
@font-face {
    font-family: Roboto;
	font-style: normal;
    src: url(fonts/Roboto-Light.ttf);
    font-weight: 300;
}
@font-face {
    font-family: Roboto;
	font-style: normal;
    src: url(fonts/Roboto-Medium.ttf);
    font-weight: 500;
}
@font-face {
    font-family: Roboto;
    src: url(fonts/Roboto-Bold.ttf);
    font-weight: 700;
}
@font-face {
    font-family: Roboto;
    src: url(fonts/Roboto-Black.ttf);
    font-weight: 900;
}

* {
	font-family: Roboto;
	font-weight: 400;
}

:focus {outline:none;}

p
{
background-color:none!important;    
background:none!important;
}

body {
/*	text-align:center;*/
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	-webkit-margin-start: 0;
	-webkit-margin-end: 0;
	-webkit-padding-before: 0;
	-webkit-padding-after: 0;
	-webkit-padding-start: 0;
	-webkit-padding-end: 0;
	padding: 0;
	margin: 0;
	-webkit-user-select: none;
	cursor: default;
	overflow:hidden;

    
	font-family: sans-serif;
	font-weight: normal;
    
    width:100%;
    height:100%;
	
	background-image:url('back_.png');
	background-position: 25px 110px;
	
}

#colorizeButton
{
	left:40px;
	top:10px;
	width:212px;
	height:56px;
	
	
	background-size:210px 52px;
	
	
}

#potluckButton
{
	left:40px;
	top:475px;
	width:212px;
	height:54px;
	
	
	background-size:210px 52px;
	
	
}

@media (prefers-color-scheme:dark), (prefers-color-scheme: darkest)
{
	body
	{
		background-image:url('dark_back_.png');
	}
	
	#colorizeButton
	{

		background-image:url('colorize_dark.svg')!important;
	
	}

	#potluckButton
	{

		background-image:url('potluck_dark.svg')!important;

	}
	
}

@media (prefers-color-scheme:light), (prefers-color-scheme: lightest)
{
	body
	{
		background-image:url('dark_back_.png');
	}
	
	#colorizeButton
	{

		background-image:url('colorize.svg')!important;
	
	}

	#potluckButton
	{

		background-image:url('potluck.svg')!important;

	}
	
}

@media (prefers-color-scheme: darkest)
{
	

	
	
}

@media (prefers-color-scheme:dark)
{
	sp-action-button
	{
		background-color:#3b3b3b;
	}
}

@media (prefers-color-scheme: darkest)
{
	sp-action-button
	{
		background-color:#2c2c2c;
	}
}

.main_background
{
	width:300px;
	height:800px;
	background-color:rgba(255,255,255,0.1);
	border-radius:8px;
}

#panel_gradiate .main_background
{
	width:300px;
	height:670px;
}


.container > * {
	position: absolute;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	-webkit-margin-start: 0;
	-webkit-margin-end: 0;
	-webkit-padding-before: 0;
	-webkit-padding-after: 0;
	-webkit-padding-start: 0;
	-webkit-padding-end: 0;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	
}

p {
	display: inline-block;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	-webkit-margin-start: 0;
	-webkit-margin-end: 0;
	-webkit-padding-before: 0;
	-webkit-padding-after: 0;
	-webkit-padding-start: 0;
	-webkit-padding-end: 0;
	padding: 0;
	margin: 0;
	position: absolute;
}

hr {
	border-color: gray;
	color:#444444;
	position: absolute;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	-webkit-margin-start: 0;
	-webkit-margin-end: 0;
}

ul {
	padding:0px;
}




.myButton
{
	border-radius:8px;
	border:2px solid transparent;
}

.myButton:hover
{
	border:2px #479756 solid;
	
}
.myButton:active
{
	border:2px #3743a1 solid;
	
}

sp-label
{
	position:relative;
	top:8px;
	font-size:11px;
}
select {
	font-size:11px!important;
}

sp-radio-group
{
	width:340px;
	height:30px;

	display:block;

}
	
div.radio
{
	
}

div.radio
{
 	cursor: pointer;
 	width: 20px;
 	height: 20px;
 	display: inline-block;
 	border-radius: 10px;
 	position: relative;
	margin-right:14px;
 }

 #selectiveColorRadio div.radio
 {
	 margin-right:24px;
 }
div.radio .toggle {
 	position: absolute;
 	top: 4px;
 	left: 4px;
 	width: 12px;
 	height: 12px;
 	background: grey;
 	border-radius: 7px;
 }

div.radio.checked .toggle {
 
 	top: 8px;
 	left: 8px;
 	width: 4px;
 	height: 4px;
 	background: white;
 	border-radius: 2px;
 	
 	
 }
 
 .red
 {
	 background-color:red;
 }

 .orange
 {
	 background-color:orange;
 }
 
 .yellow
 {
	 background-color:yellow;
 }
 
 .green
 {
	 background-color:green;
 }
 
 
 .cyan
 {
	 background-color:cyan;
 }
 
 .blue
 {
	 background-color:blue;
 } 

 .magenta
 {
	 background-color:magenta;
 }

 .purple
 {
	 background-color:purple;
 }
 
 .black
 {
	 background-color:black;
 }

sp-radio
{

	display:inline;
}

sp-action-button
{
	font-size:11px;

	min-width:12px;
   
}

sp-button
{
	border-radius:4px;
	font-size:11px;
}

 .tooltip sp-tooltip {
   display: none;
position: absolute;
top:24px;
font-size:10px;
 }

 .tooltipped .tooltip:hover sp-tooltip {
   display: block;
 }
 
sp-tooltip span
{
	display:none;
} 

.default .tooltip:hover sp-tooltip span.default,
.it_IT .tooltip:hover sp-tooltip span.it_IT,
.de_DE .tooltip:hover sp-tooltip span.de_DE,
.fr_FR .tooltip:hover sp-tooltip span.fr_FR,
.es_ES .tooltip:hover sp-tooltip span.es_ES
{
	 display:inline;
}


#switch
{
 	cursor: pointer;
 	width: 24px;
 	height: 14px;
 	background: grey;
 	display: block;
 	border-radius: 7px;
 	position: relative;
 }

#switch #toggle {
 	position: absolute;
 	top: 2px;
 	left: 2px;
 	width: 10px;
 	height: 10px;
 	background: #fff;
 	border-radius: 5px;
 }

#switch.checked {
 	background: #2680eb;
 }

#switch.checked #toggle {
 	left: 12px;
 	
 }

 .whiteButton
 {
     background-image:url('white.png');
 }

 .whiteButton:hover 
 {
     background-image:url('white ov.png');
 }

 .blackButton
 {
     background-image:url('black.png');
 }

 .blackButton:hover 
 {
     background-image:url('black ov.png');
 }

 .orangeButton
 {
     background-image:url('orange.png');
 }

 .orangeButton:hover 
 {
     background-image:url('orange ov.png');
 }

 .orange1Button
 {
     background-image:url('orange1.png');
 }

 .orange1Button:hover 
 {
     background-image:url('orange1 ov.png');
 }

 .pinkButton
 {
     background-image:url('pink.png');
 }

 .pinkButton:hover 
 {
     background-image:url('pink ov.png');
 }


 .blueButton
 {
     background-image:url('blue.png');
 }

 .blueButton:hover 
 {
     background-image:url('blue ov.png');
 }

 .cyanButton
 {
     background-image:url('cyan.png');
 }

 .cyanButton:hover 
 {
     background-image:url('cyan ov.png');
 }

 .greenButton
 {
     background-image:url('green.png');
 }

 .greenButton:hover 
 {
     background-image:url('green ov.png');
 }

 .magButton
 {
     background-image:url('mag.png');
 }

 .magButton:hover 
 {
     background-image:url('mag ov.png');
 }

 .redButton
 {
     background-image:url('red.png');
 }

 .redButton:hover 
 {
     background-image:url('red ov.png');
 }

 .yelButton
 {
     background-image:url('yel.png');
 }

 .yelButton:hover 
 {
     background-image:url('yel ov.png');
 }