/* itsi bitsi petit framework minimal 0.11 ajout .noverflow, input.toggle */
html{
	--red:0;
	--orange:30;
	--yellow:60;
	--green:90;
	--blue:180;
	--violet:270;
	--pink:315;

	--base_color:30;
		--complementary:calc(360 - calc(180 - var(--base_color)));

		--analog_one:calc(30 + var(--base_color));
		--analog_two:calc(60 + var(--base_color));
		--analog_three:calc(90 + var(--base_color));

		--triad_one:calc(120 + var(--base_color));
		--triad_two:calc(260 + var(--base_color));

		--nuance_one:calc(15 + var(--base_color));
		--nuance_two:calc(30 + var(--base_color));
		--nuance_three:calc(45 + var(--base_color));
		--nuance_four:calc(60 + var(--base_color));

	--important_h:30;
	--information_h:210;
	--error_h:10;
	--success_h:90;


	--hover:45%;
	--active:40%;
	--normal:50%;

	--neutral:grey;
	--theme_color:hsl(var(--base_color),100%,var(--normal));
	--theme_color_hover:hsl(var(--base_color),100%,var(--hover));
	--theme_color_active:hsl(var(--base_color),100%,var(--active));
	--theme_color:hsl(var(--base_color),100%,var(--normal));
	--important_color:hsl(var(--important_h),100%,var(--normal));
	--important_color_hover:hsl(var(--important_h),100%,var(--hover));
	--important_color_active:hsl(var(--important_h),100%,var(--active));
	--information_color:hsl(var(--information_h),100%,var(--normal));
	--information_color_hover:hsl(var(--information_h),100%,var(--hover));
	--information_color_active:hsl(var(--information_h),100%,var(--active));
	--error_color:hsl(var(--error_h),100%,var(--normal));
	--error_color_hover:hsl(var(--error_h),100%,var(--hover));
	--error_color_active:hsl(var(--error_h),100%,var(--active));
	--success_color:hsl(var(--success_h),100%,var(--normal));
	--success_color_hover:hsl(var(--success_h),100%,var(--hover));
	--success_color_active:hsl(var(--success_h),100%,var(--active));
	
	--columns_nb:1;
	--columns_size:1fr;
}

*,*:before,*:after{box-sizing: border-box;}

html,body{margin:0;padding:0;}
body{

}
a,a:active,a:visited{
	text-decoration: none;
	transition: color .2s;
}
a{
	color:var(--theme_color);
}
a:active,a:hover{
	color:var(--theme_color_hover);
}
a.success{color:var(--success_color)}
a.success:hover{color:var(--success_color_hover)}
a.success:active{color:var(--success_color_active)}
a.information{color:var(--information_color)}
a.information:hover{color:var(--information_color_hover)}
a.information:active{color:var(--information_color_active)}
a.important{color:var(--important_color)}
a.important:hover{color:var(--important_color_hover)}
a.important:active{color:var(--important_color_active)}
a.error{color:var(--error_color)}
a.error:hover{color:var(--error_color_hover)}
a.error:active{color:var(--error_color_active)}

button.success,
 input[type=submit].success, 
 input[type=button].success, 
 .btn.success{background-color:var(--success_color)}
button.success:hover,
 input[type=submit].success:hover, 
 input[type=button].success:hover, 
 .btn.success:hover{background-color:var(--success_color_hover)}
button.success:active,
 input[type=submit].success:active, 
 input[type=button].success:active, 
 .btn.success:active{background-color:var(--success_color_active)}

button.information,
 input[type=submit].information, 
 input[type=button].information, 
 .btn.information{background-color:var(--information_color)}
button.information:hover,
 input[type=submit].information:hover, 
 input[type=button].information:hover, 
 .btn.information:hover{background-color:var(--information_color_hover)}
button.information:active,
 input[type=submit].information:active, 
 input[type=button].information:active, 
 .btn.information:active{background-color:var(--information_color_active)}

button.important,
 input[type=submit].important, 
 input[type=button].important, 
 .btn.important{background-color:var(--important_color)}
button.important:hover,
 input[type=submit].important:hover, 
 input[type=button].important:hover, 
 .btn.important:hover{background-color:var(--important_color_hover)}
button.important:active,
 input[type=submit].important:active, 
 input[type=button].important:active, 
 .btn.important:active{background-color:var(--important_color_active)}

button.error,
 input[type=submit].error, 
 input[type=button].error, 
 .btn.error{background-color:var(--error_color)}
button.error:hover,
 input[type=submit].error:hover, 
 input[type=button].error:hover, 
 .btn.error:hover{background-color:var(--error_color_hover)}
button.error:active,
 input[type=submit].error:active, 
 input[type=button].error:active, 
 .btn.error:active{background-color:var(--error_color_active)}
.msg{
	padding:1em;
	border-radius: 3px;
	margin:15px;
}
[hidden],.hidden {display: none !important}
[disabled],.disabled {pointer-events:none; opacity: 0.3}
.horizontal {display: flex; flex-direction: row; justify-content: space-between}
.vertical {display: flex; flex-direction: column}
.center {justify-content: center; align-items: center}
.flex {flex: 1}
.noverflow{
    white-space: pre!important;
    white-space: pre-wrap!important;
    white-space: pre-line!important;
    white-space: -pre-wrap!important;
    white-space: -o-pre-wrap!important;
    white-space: -moz-pre-wrap!important;
    white-space: -hp-pre-wrap!important;
    word-wrap: break-word!important;
}
.columns{
	display:grid;
	grid-template-columns: repeat(var(--columns_nb) , var(--columns_size));
}

.xsmall {
 font-size: 45% !important;
 padding: 5px 10px !important;
}
.small {
 font-size: 60% !important;
 padding: 7px 20px !important;
}
.large {
 font-size: 110% !important;
 padding: 15px 40px !important;
}
.xlarge {
 font-size: 125% !important;
 padding: 20px 50px !important;
}

.btn,
button,
input[type=button],
input[type=submit],
input.toggle+label{
	font-weight: bold;
	border: 1px solid rgba(0,0,0,0.4);
	border-radius: 0.2rem;
	color: rgba(0,0,0,0.8);
	background-color: var(--theme_color);
	cursor: pointer;
	display: inline-block;
	font-size: 1rem;
	outline: 0;
	padding: 10px 20px;
	text-align: center;
	text-decoration: none;
	transition: background 0.2s,border 0.2s,box-shadow 0.2s,color 0.2s,opacity 0.2s;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	vertical-align: middle;
	white-space: nowrap;
}
.btn:hover,
button:hover,
input[type=button]:hover,
input[type=submit]:hover{
	background-color: hsl(var(--base_color),80%,var(--hover))
}
.btn:active,button:active,input[type=button]:active,input[type=submit]:active{
	background-color: hsl(var(--base_color),70%,var(--active))
}
input[type="email"], 
input[type="number"], 
input[type="search"], 
input[type="text"], 
input[type="tel"], 
input[type="url"], 
input[type="password"], 
textarea, 
select{
	padding: 6px 10px;
	border: 1px solid rgba(0,0,0,0.3);
	border-radius: 4px;
	background-color: #fff;
}

input[type="email"].error, 
input[type="number"].error, 
input[type="search"].error, 
input[type="text"].error, 
input[type="tel"].error, 
input[type="url"].error, 
input[type="password"].error, 
textarea.error, 
select.error,
.error{
	background-color: var(--error_color);
}

input[type="email"].success, 
input[type="number"].success, 
input[type="search"].success, 
input[type="text"].success, 
input[type="tel"].success, 
input[type="url"].success, 
input[type="password"].success, 
textarea.success, 
select.success,
.success{
	background-color: var(--success_color);
}

input[type="email"].information, 
input[type="number"].information, 
input[type="search"].information, 
input[type="text"].information, 
input[type="tel"].information, 
input[type="url"].information, 
input[type="password"].information, 
textarea.information, 
select.information,
.information{
	background-color: var(--information_color);
}

input[type="email"].important, 
input[type="number"].important, 
input[type="search"].important, 
input[type="text"].important, 
input[type="tel"].important, 
input[type="url"].important, 
input[type="password"].important, 
textarea.important, 
select.important,
.important{
	background-color: var(--important_color);
}

input[type="email"]:focus, 
input[type="number"]:focus, 
input[type="search"]:focus, 
input[type="text"]:focus, 
input[type="tel"]:focus, 
input[type="url"]:focus, 
input[type="password"]:focus, 
textarea:focus, 
select:focus {
    border: 2px solid var(--theme_color);
    outline: 0;
    padding: 5px 10px;
}

input.toggle{
    display: none;
}
input.toggle+label{
    opacity: 0.5;
}
input.toggle:checked+label{
	opacity: 1;
    border: 1px solid rgba(0,0,0,0.4);
    color: rgba(0,0,0,0.9);
    background: var(--theme_color_active);
    box-shadow: inset 0 2px 2px rgba(0,0,0,0.2);
}


label[for]{cursor: pointer;}
.nosel{
	user-select: none
}
iframe{
	border:1px solid rgba(0,0,0,0.1);
	border-radius: 3px;
	width:100%;
	min-height:1024px;
}