label.short{
	display: inline-block;
	width: 5em;
    padding: .5em 0 .15em 5%;
	}
/* number input */	
input[type=number]{
	font-size: 1.15em;
    padding: .1em;
    display: inline-block;
    width: 4em;
    margin: 0 5% .25em .5em;
    border: 2px solid #ccc;
	}

label.wide{
	display: block;
	clear: both;
	padding: 1em 5% .15em 5%;
	}
.slider-wrapper	{
	margin: .5em 0 1em 0;
	}

#precautions-continue-button{
	margin-top: 1em;
	}

#reset-compliance-values{
	margin-top: 3em;
	}


/* precautions */
#select-masks-section, #select-distancing-section{
	padding-bottom: 1em;
	margin-bottom: 1em;
	} 	
img.select-precautions-thumbnail{
	float: right;
	margin: 0 0 0 1.1em;
	width: 20%;
	}		
#mask-input-wrapper, #distancing-input-wrapper{
	display: none;
	padding: 1em;
    border: solid 1px #ccc;
    margin-top: 1em;
	}
.start-end-select{
	padding: .5em 0 1.5em 0;
	}	
#mask-input-wrapper .slider, #distancing-input-wrapper .slider{
	width: 100%;
	margin: 0;
	}
#masks-activate, #masks-deactivate, 
#distancing-activate, #distancing-deactivate{
	display: none;
	}
			

/* mask types --------------------- */
#select-mask-type-wrapper{
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	text-align: center;
	margin: .5em 0 1.5em 0;
	}
#select-mask-type-wrapper .select-mask-type-item{
	flex-grow: 1;
	flex-basis: 0;
	padding: 0 .5em 0 .5em;
	font-size: 1em;
	cursor: pointer;
	}
.select-mask-type-item span{
	pointer-events: none;
	font-size: .95em;
	}	
/* title and links */ 			
.select-mask-type-item div{
	pointer-events: none;
	font-weight: bold;
	color: #888888;
	}	
.select-mask-type-item:hover div {
	color: #555555;
	pointer-events: none;
	}	
.select-mask-type-item.active div, .select-mask-type-item.active:hover div{
	color: #ff8b00;
	}
/* image */
.select-mask-type-item img{
	display: inline-block;
	width: 3.5em;
	pointer-events: none;
	filter: grayscale(100%) brightness(150%) contrast(50%);
	}		
#select-mask-type-wrapper div.active img{
	filter: grayscale(0) brightness(100%) contrast(100%);
	}	

#distancing-feedback-message{
	padding: 1.75em 1.25em;
    display: none;
    background-color: #E6DFEA;
    position: relative;
    margin-top: 2em;
	}
#distancing-feedback-message > div{
	position: absolute;
    top: -1.65em;
    left: 10%;
    width: 0;
    height: 0;
    border-left: 1em solid transparent;
    border-right: 1em solid transparent;
    border-bottom: 1.25em solid #E6DFEA;
    padding-top: .5em;
	}