/*
Style sheet for the CSS2 specification
droso.css, v 3.0 2020-02-04

https://drafts.csswg.org/css-device-adapt/
*/

.css_dropdown {
	font-size: .9em;
    }
.custom_select { 
/* 
Be carefull 
https://red-team-design.developpez.com/tutoriels/css/donner-style-listes-deroulantes/
https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element

*/
	font-family: inherit;		
	font-size: inherit;
	color: inherit; 
	padding: .2em;
	}


@supports (pointer-events: none) and
      ((-webkit-appearance: none) or
      (-moz-appearance: none) or
      (appearance: none)) {
      /* not supported by IE */
    .css_dropdown {
        position: relative;
        /* display: inline-block; */
        vertical-align: middle;
    	}
    .custom_select {
        padding-right: 3.6em; /* accommodate with the pseudo elements for the dropdown arrow */
        border: 0; /* for firefox  (focus is a dotted box inside) */
        margin: 0; /* remove default margins */
        padding-left: .6em;
        border-radius: 3px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;  
        background-color: #eee; 
        box-shadow:2px 2px 8px #aaa; 
    	}
	.custom_select:disabled { 
		color: #999; 
		
		}
	.css_dropdown::before, .css_dropdown::after {
        content: "";
        position: absolute;
        /*pointer-events: none; /**/
        
    	}
	.css_dropdown::after { /*  Custom dropdown arrow */
		content: "\25BC";
        height: 1em;
        font-size: .7em;
        line-height: 1;
        right: 1em;
        top: 50%; margin-top: -.5em;
        color: rgba(0,0,0,.7);
        }
    .css_dropdown::before { /*  Custom dropdown arrow cover */
        width: 2em;
        border-radius: 0 3px 3px 0;
        right: .5em; top: .5em; bottom: .5em;
    	}  
	}
@-moz-document url-prefix() {
  .custom_select {
      	padding-right: 2.6em; /* accommodate with the pseudo elements for the dropdown arrow  */
      	}
	}

#first_cross { 
	font-size: .9em;
 	} 
 /*
 not in use
 #first_cross input[type=button]  {
	
	width: 32px;
	height: 32px;
	border-radius:50%;
	box-shadow:2px 2px 8px #aaa;
	border:0;
	display: inline-block;
	background:#cc9900;
	}
#first_cross input[type=button]:hover {
    background:#ffcc00;
	}
*/

.btn  {
/*
http://41mag.fr/18-exemples-de-bouton-en-css-3-inspire-par-google.html
*/
	width: 32px;
	height: 32px;
	border-radius:50%;
	box-shadow:2px 2px 8px #aaa;
	border:0;
	display: inline-block; /**/
	margin-left: 132px;
	color: inherit; 
	}

.btn_label {
	position: relative; /* */
	top: 0px;
	left: -132px;
	width: 132px;
	font-size: 1.3em;
	
	}

/* Jazz colors (Matisse) */
#button_first_cross .btn  {
	background:#cc9900; /* orange */
	}
#button_first_cross .btn:hover {
    background:#ffcc00;
	}
#button_second_cross .btn  { 
	background:#006333; /* green */
	}
#button_second_cross .btn:hover {
    background:#009933;
	}
#button_init .btn  {
	background:#eee; /*  */
	}
#button_init img {
	position: absolute; 
	top: -6px;
	left: 116px;   
    height: 30px;  
    width: 30px;
    opacity: .7;
    }
/*
.my_form { display: inline-block; 	width: 196px; vertical-align: top; }  
.result { display: inline-block; 	width: auto; } 
.result_case { display: inline-block; width: 164px; margin: 0.2em; padding: 0.4em;}
@media screen and (max-width: 640px) {
 	.result_case {display: block; }  
 	div, .result, .result_case { max-width: 100%; }  
 	}
*/
.content {
	min-width: 256px; /* surcharge */
	}
.form_display { display:  none; } 	
.form_droso { box-sizing: border-box; float: left;  width: 190px; }  
.result { box-sizing: border-box; width: auto; margin-left: 200px; } 
.result h3 { margin:0; padding:0;}
.result_case, .result_case_x, .result_case_p, .result_case_comment { 
	box-sizing: border-box;
	display: inline-block; 
	text-align: center;
 	padding: .4em;
 	/* border: thin dashed; /* debuging */
	}
.result_case { 
	width: 172px; 
	vertical-align: top;
 	}
.result_case img { 
	box-sizing: border-box;
 	width: 172px; 
 	height: auto;
 	}
.result_case_p { 
 	width: 12px; 
	vertical-align: top;
 	}
.result_case_x { 
 	width: 12px; 
	vertical-align: bottom;
 	}
.result_case_comment {
	width: 172px; 
	vertical-align: top;
	text-align: left; 
 	}
@media screen and (max-width: 720px) {
	.form_display { display:  block; } 
	h1 { display: none; 		}  
 	.form_droso { width: 164px; }  
 	
 	div, img, span { max-width: 100%; }  
	.result_case_p, .result_case_x { display: block; }  /*   */
 	img { /* conserver le ratio des images et empêcher les débordements de boîtes dûs aux border ou padding */
		height: auto; 
		}
	}
@media (max-width: 720px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio:2) {
body {
	-webkit-text-size-adjust: 70%; /* réduire de façon harmonieuse toutes les tailles de polices en orientation paysage (car bugguée sur les périphériques iPhone et iPad retina). */
	}
	.result_case_p, .result_case_x { display: inline-block; }  /*   */
}
@media screen and (max-width: 600px) {
	
	}
@media screen and (max-width: 360px) {
/*
	.droso_form { float: none; } 
	.result { margin-left: 0px; } 
*/
	}
	
/* 		
@viewport {
 experimental 
	width: device-width;
	zoom: 1;
 	}	
*/
/*
https://www.mydevice.io/
*/
/*


figcaption {height: auto; opacity: inherit; color:inherit; background: inherit; transition: unset;	}

*/