/* xs */
@media(min-width:240px){
	#form_options {position:fixed;left:0;top:16%;width:100%;height:80%;display:none;background-color:#7bd0de;z-index:2;padding:2%}
	.field_buttons {position:fixed;left:0;top:16%;width:100%;height:80%;display:none;background-color:#7bd0de;font-family:monospace}
	.option_buttons {position:fixed;left:0;top:48%;width:100%;display:none;background-color:#7bd0de;font-family:monospace;margin:0;padding:0.5%}
	#add_field_name, #add_form_name {position:fixed;left:0;top:24%;width:100%;height:7%%;display:none;background-color:#7bd0de;border-radius:0;z-index:2;padding:2%}
	#section_image {height:276px}
	#logo_appi{top:3%}
}
/* sm */
@media(min-width:576px){
	#form_options {position:fixed;left:0;top:16%;width:100%;height:80%;display:none;background-color:#7bd0de;z-index:2;padding:2%}
	.field_buttons {position:fixed;left:0;top:16%;width:100%;height:80%;display:none;background-color:#7bd0de;font-family:monospace}
	.option_buttons {position:fixed;left:0;top:48%;width:100%;display:none;background-color:#7bd0de;font-family:monospace;margin:0;padding:0.5%}
	#add_field_name, #add_form_name {position:fixed;left:24%;top:24%;width:62%;height:7%%;display:none;background-color:#7bd0de;border-radius:0;z-index:2;padding:2%}
	#section_image {height:376px}
	#logo_appi{top:3%}
}
/* md */
@media(min-width:768px){
	#form_options {position:fixed;left:21%;top:16%;width:62%;height:80%;display:none;background-color:#7bd0de;z-index:2;padding:2%}
	.field_buttons {position:fixed;left:24%;top:16%;width:76%;height:80%;display:none;background-color:#7bd0de;font-family:monospace}
	.option_buttons {position:fixed;left:24%;top:48%;width:76%;display:none;background-color:#7bd0de;font-family:monospace;margin:0;padding:0.5%}
	#add_field_name, #add_form_name {position:fixed;left:24%;top:24%;width:48%;height:7%%;display:none;background-color:#7bd0de;border-radius:10px;z-index:2;padding:2%}
	#section_image {height:426px}
	#logo_appi{top:4%}
}
/* lg */
@media(min-width:992px){
	#form_options {position:fixed;left:41.667%;top:16%;width:33.33%;height:80%;display:none;background-color:#7bd0de;z-index:2;padding:2%}
	.field_buttons {position:fixed;left:41.667%;top:16%;width:58.333%;height:80%;display:none;background-color:#7bd0de;font-family:monospace}
	.option_buttons {position:fixed;left:41.667%;top:48%;width:58.333%;display:none;background-color:#7bd0de;font-family:monospace;margin:0;padding:0.5%}
	#add_field_name, #add_form_name {position:fixed;left:24%;top:24%;width:42%;height:7%%;display:none;background-color:#7bd0de;border-radius:10px;z-index:2;padding:2%}
	#section_image {height:526px}
	#logo_appi{top:5%}
}
/* xl */
@media(min-width:1200px){
	#form_options {position:fixed;left:41.667%;top:16%;width:33.33%;height:80%;display:none;background-color:#7bd0de;z-index:2;padding:2%}
	.field_buttons {position:fixed;left:41.667%;top:16%;width:58.333%;height:80%;display:none;background-color:#7bd0de;font-family:monospace}
	.option_buttons {position:fixed;left:41.667%;top:48%;width:58.333%;display:none;background-color:#7bd0de;font-family:monospace;margin:0;padding:0.5%}
	#add_field_name, #add_form_name {position:fixed;left:24%;top:24%;width:32%;height:7%%;display:none;background-color:#7bd0de;border-radius:10px;z-index:2;padding:2%}
	#section_image {height:526px}
	#logo_appi{top:5%}
}
body {display:block;width:100%;height:100%;margin:0;padding:0;background-color:#fff;}
body * {box-sizing:border-box;}
h1, h2, h3{margin:1%;color:#333}
p{padding:0 0.5%}
h1 {vertical-align:middle}
ul {list-style-type: circle}
.row{margin:0}
.container-fluid{padding:0;height:100%;overflow-y:auto;overflow-x:hidden}
#logo_appi{position:absolute;z-index:1;left:9%;width:14%;max-height:14%;overflow:visible}
#logo_appi img{width:100%;height:auto}
#visitor{position:relative;border-top:3px #dcdcdc solid;}
#toggle_menu{top:-1px;width:3%;min-width:30px;position:relative;float:left;left:47.5%;height:3%;z-index:5;text-align:center;line-height:0;font-size:150%;background-color:#fff;padding:0;border-radius:0 0 10% 10%;border:3px #dcdcdc solid;border-top:none}
.vat{vertical-align:top;height:100%}
.inactive{opacity:0.3}
#accueil {width:100%;padding:0;background-color:#f4f4f4;color:#010101;}
#section_image{font-size:0;background-image:url('/static/images/accueil.jpg');background-position: center;}
#section_accueil img,#section_login img{width:100%}
#section_numbers{background-color:#666;font-size:120%;line-height:200%}
#section_numbers * {color:white}
#section_numbers p {text-align:center}
#section_numbers span {font-size:120%;}
#section_numbers span.number {font-size:200%;}
#section_login form {background-color:#efefef;padding:2% 8%;position:relative;margin:2% 0;left:30%;width:40%;height:55%}
#section_login form *{color:#888}
#section_login form h2{width:100%;text-align:center}
#section_login form input {width:100%}
#section_login form input.submit {width:40%;padding:1%;background-color:transparent;border:4px solid #666;border-radius:2px}
#section_login p{width:100%;text-align:center;font-size:120%}
#section_page {background-color:white;padding:2% 0 5% 0}
#section_happy {background-color:white;border-top:2px #eee solid;padding:3% 38%}
#news h3 {margin-left:6%;color:#999}
#news li {min-height:34px;border-bottom:2px #ccc solid;padding:1% 0;margin:1% 0;list-style:none}
#news li img {display:inline-block;margin-right:2%;width:80px;height:auto;max-height:80px}
#news li p {display:inline-block}
.new_title {font-size:110%}
.new_date {font-size:80%;font-weight:bold}
.new_type {margin-left:2%;color:#999;font-weight:bold}
#pict_winner {color:#333}
#pict_winner h3 {margin-left:2%;color:#999}
#pict_winner p {font-size:130%}
.win_name {font-size:80%;font-weight:bold;display:block;margin:5% 0}
.win_type {font-weight:bold;display:block;margin:5% 0}
.win_see {font-size:70%;color:#999;display:block;padding:0;margin-bottom:8%}
.win_but {border:#ccc solid 2px;border-radius:4px;padding:1% 4%;font-size:120%;width:100%;margin-bottom:8%;color:#999;}

#find_school{border:2px solid #ddd;border-radius:1%/8%;padding:0.5%;margin-top:2%}

/* ------------- log in ------------- */

#logIn {
	position:absolute;
	width:9%;
	height:15%;
	background-color:rgb(15,15,15);
	padding:1%;
}
#logIn button,#logIn .submit{color:rgb(215,215,215)}

/* ------------- boutons ----------------------- */

button,.submit {
	cursor:pointer;
	border:0 solid transparent;
	background-color:transparent;
}
button.save {
	left:auto;
	top:auto;
	right:0;
	bottom:0;
}

/* -------buttons -------*/

label {margin-right:5px}
img{max-width:100%;height:auto}
a:link,a:visited{color:#697C28}

/* --------------- recepts --------------------*/

.recept {
	position:fixed;
	top:10%;
	height:80%;
	overflow:auto;
	padding:4%;
	background-color:#fff;
	display:none;
	border:2px solid #999
}
#recept_list {z-index:10;left:5%;width:90%;}
#recept_details {z-index:20;left:15%;width:70%;}
#recept_form {z-index:30;left:25%;width:50%;}

/* --------------- dashboard ----------------- */

#dashboard {width:100%;padding:2% 9% 5% 9%;background-color:#f4f4f4;color:#010101;}
#dashboard .mytab, #dashboard .mytabb{background-color:#fff;padding:2%}
#dashboard .section{background-color:#fff;padding:2%;margin-bottom:5%}
#dashboard .section button{display:inline-block;margin:0.7%;width:45%;height:4em;padding:0 2%;font-size:120%;font-weight:bold;border:2px solid #999;border-radius:5px;vertical-align:middle;color:#a0a0a0}
#dashboard h1{text-align:center;margin-top:3%;font-size:280%;}
#dashboard button {display:block}
#dashboard button.title, #dashboard h3{display:inline-block;width:auto;margin:3% 2% 2% 0;width:auto;padding:3%;margin:0;background-color:#fff;font-size:130%;font-weight:bold;color:#555}
#dashboard #tab_identity, #dashboard #tab_school{font-size:120%}
#dashboard #tab_identity i, #dashboard #tab_school i{color:#b0b0b0;font-size:150%;margin-right:5%}
#dashboard #tab_identity p, #dashboard #tab_school p#account_status{background-color:#eee;padding:1.6% 2% 1% 2%;font-size:80%;color:#666;width:100%}
#dashboard #tab_identity > div, #dashboard #tab_school > div{margin-bottom:2%;padding:2%;border-bottom:2px solid #eee;}

/* model list */
.item_table span{display:inline-block;width:16%;vertical-align:top;border:1px solid #ccc;overflow:hidden;border-top:2px solid #666;border-bottom:0;margin-top:2%;padding:1%}

/* interface */

#interface {position:relative;top:0;min-height:7%;max-height:17%;z-index:1;overflow:visible}
#interface > div > * {display:inline-block}
#interface div.row > div {height:95%;text-align:left;border-right:1px #ccc solid;padding-left:0}
#interface > div.row:nth-child(1){border-bottom:1px #ddd solid}
#interface > div.row:nth-child(2){border-bottom:1px #ddd solid;}
#interface > div.row:nth-child(2) a, #interface > div.row:nth-child(2) button{font-weight:bold}
#interface a ,#interface button {color:#333}
#interface i {color:#999;margin-right:5%;}
#interface .menu-top {height:35%}
#interface .menu-middle {height:65%;padding-top:0.5%;font-size:120%}
#interface #user_infos{text-align:right}
#interface .btn-menu{border-left:1px #ccc solid;font-size:200%;color:#333}
.form_maker .btn-menu{font-size:100%}
#clear, #delete, #create_table, #parameters {opacity:0.2}
#add_field_buttons {opacity:0.2}
#interface select {padding:0.2%;height:36px}
#add_field_name > *, #add_form_name > * {display:inline-block;margin:0.5%}


/* -------------- app tri -------------------- */

span#app_fly_span{display:block;position:relative;height:6%;width:100%;}
span#app_fly_span button{position:relative;}

/* footer */

#footer * {color:#ccc}
#footer > div {height:100%}
#footer_big {background-color:#444}
#footer_big #appi_coord img {margin: -15% 0 8% 0;width:70%;max-width:300px}
#footer_small {background-color:#222;height:38px;line-height:29px}
#footer i{font-size:150%;margin-right:5px;color:#fff}
#footer h3{margin-top:10%;color:#fff;font-size:120%;}
/* formulaire modif */

.master_row{position:relative;height:83.2%;border-top:3px #ccc solid;}

.form_maker .master_row{position:relative;height:81.2%;border-top:3px #ccc solid;}
.form_maker #zone_left{padding-top:2%}
#zone_left {height:100%;padding-top:4%;background-color:#ddd;overflow:auto}
.field_box {position:relative;padding:2% 0;min-height:7%;overflow:visible}
#zone_left .field_box {position:relative;padding:2% 0;min-height:17%;overflow:visible}
#zone_left input[type="number"] {padding:1% 0;min-height:26px}
#zone_left .field_box {border-bottom:1px solid rgba(255,255,255,0.2)}
#zone_left .field_box {cursor:grab}
#zone_left .field_box label {cursor:text}
#zone_left > .row {border:2px solid rgba(255,255,255,0.3);margin-top:5%}
.show_field_buttons, .show_option_buttons {position:absolute;right:0}
.option {position:relative}
.option_buttons button {margin:0}
.field_buttons{z-index:2}
.option_buttons{z-index:1}
.switch_display {float:left:8%}
.option_txt, .option_val {border:1px solid grey;background-color:white;padding:2px;margin-right:2%}
.option_ul {line-height:200%}
/*.option_buttons {position:absolute;right:6%;text-align:right;min-width:50%}*/
.option_buttons input[name="addgoto"] {width:5em}
.hide_field_buttons {position:absolute;top:0;right:0}
.field_buttons_title{font-weight:bold}
.add_classes {vertical-align:bottom}
.get_classes {position:absolute;left:2%;top:24%;width:38%}
.autocomplete {position:absolute;left:38%;top:24%;width:32%}
.geolocation, .img_options {position:absolute;left:72%;top:24%;width:26%}
input[name=min],input[name=max] {width:6em}
.minmax {position:absolute;left:2%;top:50%;padding:1%}
.minmax input[name=send_min_max] {width:24%}
.send_value{position:absolute;left:2%;top:50%;padding:1%}
.help_text {position:absolute;left:2%;top:50%;left:38%;width:62%;padding:1%}
.help_text textarea {width:98%}
input[name=option_value] {width:8em}

/* formulaire */

#zone_mid {height:100%;background-color:#eee;padding:2%;overflow:auto}
.box_checkbox,.box_radio {white-space:nowrap;position:relative}
.box_radio > * {min-height:29px}
#zone_mid .row {margin-top:5%}
#zone_mid .row > label{font-style:italic;}
#zone_mid .row > div {margin-left:3%}

/* resultats */

#zone_right {height:auto;background-color:#fff;padding:2%;overflow:auto}
.result_statut {font-weight:bold}
.empty{color:grey;opacity:0.2}
.waiting{color:grey}
.in_progress{color:blue}
.validated{color:green}
.failed{color:orange}
.to_cansel{color:red}
#results_table{width:100%}
#results_table td {padding:1%;cursor:pointer}
#zone_right ul {list-style-type: none}


/* divers */

#console {position:fixed;bottom:0;height:4%;background-color:#333;color:#fff;width:100%;overflow:hidden;padding:0.2%}
#temp_html {display:none;opacity:0}
#id_map {height:250px;width:50%}
.h1_label > label{font-size:140%;font-weight:bold}
.h2_label > label{font-size:120%;font-weight:bold}
.h3_label > label{font-weight:bold}
.big {font-size:150%}
.ocean {background-color:lightseagreen}

.inline-block > * {display:inline-block}