/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
:root{
	--main-color:#e52529;
	--button-text-color: #ffffff;
}

#mindd_data {
	line-height:normal;
	padding:0;
	margin:0;
	font-size: 14px;
	font-weight: normal;
}
#mindd_data *{
	box-sizing:border-box;
}

#mindd_data input[type='number'], #mindd_data select{
	padding:0;
	margin:0;
	padding-left: 8px;
}
#mindd_data label, #mindd_data label strong{
	font-size: 100%;
	color: #e52529;	
    width: 100%;
}
#mindd_data h2 {
	color: #e52529 !important;
	font-size:150%;
	margin-top:0;
}
#mindd_data h3{
	color: #e52529 !important;
	font-size:120%;
}
#mindd_data h4{
	color: #e52529 !important;
	font-size:110%;
}
#mindd_data p{
	line-height:normal;
}
/* Datepicker */
.ui-datepicker-trigger {
	margin-left:8px;
}

a {
	color: #e52529;
}

a:hover {
	color: #e52529;
}

.mindd_panel {
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/*** TRIAGE ***/
#triageSelect {
	margin-left: 0;
    padding: 0;
}

#triageSelect > li{
	list-style:none;
	margin-left:0px;
	border-bottom:1px solid #e3e3e3;
	padding:8px;
	padding-left:0px;
}

#triageSelect > li:hover{
	background-color:#e52529;
	color:#fff;
	text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	cursor:pointer;
	margin-left: -10px;
    padding-left: 10px;
}

#map-area {
	position:relative;
	overflow:hidden;
	display:inline-block;	
    margin-top: -40px;
}

#body-map {
    float:left;
	position:relative;
	width: 250px;
	margin: 0 auto;
	opacity:1.0;
}

#man-map, #woman-map{
	margin-top:30px;
    padding-bottom: 10px;
}

#girl-map, #boy-map {
    position:relative;
    top:-120px;
    padding-bottom: 10px;
}

#warning-diagnose {
    background-color: #fdf7f7;
    border:1px solid #d9534f;
    border-radius:2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
    padding:10px;
    margin-bottom:20px;
}

#advice a{
	display:inline-block;
	background-color: #e52529;
	border-color: #e52529;	
	color: #fff;
}
#adviceTitle{
	color: #e52529;
}
#adviceChar > b{
	color: #e52529;
}

.changeInfoButton{
	width:100%;		
    margin: 10px 0px 0;
}

.changeInfoButton > .glyphicon {
	font-size: 80%;
}

/** EINDE TRIAGE **/
.btn-primary {
	background-color: #e52529;	
	background-image: none;
	border-color: #e52529;
}

.gender_button, .backFrontButton{
	opacity:0.4;	
    width: 50%;
}
.btn-primary.selected{
	opacity:1;
}

.btn-group button.gender_button:first-of-type {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}
.btn-group button.gender_button:last-of-type {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}


.btn-primary.active.focus, 
.btn-primary.active:focus, 
.btn-primary.active:hover, 
.btn-primary:active.focus, 
.btn-primary:active:focus, 
.btn-primary:active:hover, 
.open>.dropdown-toggle.btn-primary.focus, 
.open>.dropdown-toggle.btn-primary:focus, 
.open>.dropdown-toggle.btn-primary:hover,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
	background-color: #e52529;
	opacity:0.9;
	border-color: #e52529;
}

.btn {
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	background-image: none;
	border: none;
}

.btn-success {
	background-color: #e52529;	
	background-image: none;
	border-color:#e52529;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.btn-success.disabled,
.btn-success[disabled] {
	/* add transparancy for lighter color */
	background-color: #e52529;
	border-color:#e52529;
}

.btn-info {
	background-color: #EDC951;	
	background-image: none;	
	color: #333;
	border-color: #EDC951;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.btn-info.disabled,
.btn-info[disabled] {
	background-color: #EB6841;
	border-color: #EB6841;
}

.btn-danger {
	background-color: #CC333F;	
	background-image: none;	
	border-color:#CC333F;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.btn-danger.disabled,
.btn-danger[disabled] {
	background-color: #6A4A3C;
	border-color: #6A4A3C;
}

.mindd_panel{
	background-color: #f5f5f5;
	border: none;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
	box-shadow: none;
	padding:20px;
}
.bg-warning {
	padding:10px;
	background:none;
}
#age {
	/* max-width:20%; */
	max-width:80%;
	min-width: 60px;
}
#gender{
	max-width:40%;
	min-width: 200px;
}
/*
Dialog
*/
#dialogHintText{
	font-size: 100%;
    line-height: normal;
}
#dialogHintText > p{
	font-size: 100%;
    line-height: normal;
}
.ui-dialog-titlebar{
	background-color: #e52529;
	color:#fff;
}
.ui-button.ui-dialog-titlebar-close{
	color:#fff;
}
.ui-button, .ui-button:active, .ui-button:focus, .ui-button:hover{
	background-color: #e52529;
	color:#fff;
	border-color: #e52529;
}
#buttonStart{
	width:100%;
	height:40px;
	margin-top:20px;
}
#divTriageFormTitle h2{
	margin-top:20px;
	margin-bottom:40px;
}
.genderLabel{
	padding-left:25%;
}
.ageLabel{
	padding-left:2%;
}
@media (max-width: 576px) {
	.genderLabel{
		padding-left:0;
	}
	.ageLabel{
		padding-left:0;
	}
	#buttonStart{
		margin-left:0;
		margin-right:0;
		float:left;
	}
}
#btnFront, #btnBack{
	width:50%;
}
/* #button-front-back */ .btn-group{
	width:100%;
}

#button-front-back{
	width: 220px;
	margin: 10px 0;
	position: relative;
}

div.listScroller{
	max-height:300px;
	height:auto;
	overflow:auto;
	padding:0 8px;
}
div.listScroller::-webkit-scrollbar { 
    //display: none; 
	width:3px;
	background-color: #ddd;
}
div.listScroller::-webkit-scrollbar-thumb { 
    //display: none; 
	width:3px;
	background-color: #aaa;
}

.copyright{
	padding-top:10px;	
	padding-bottom:10px;		
    text-align: center;
}
button#repeat {
    width: 100%;
}

button.changeInfoButton:active{
	border-color:white !important;
}

@media only screen and (min-width: 600px) {
	.changeInfoButton{
		max-width:200px;
	}
	#button-settings{		
		float:right;
	}	
	button#repeat {
		max-width:200px;
	}
}
@media only screen and (min-width: 768px) {
	.mobileOnly{
		display:none;
	}
}
@media only screen and (max-width: 768px) {
	#button-settings{
		display:none;
	}
	.mobileOnly{
		display:block;
	}
	.changeInfoButton.mini {
		position: absolute;
		width: 45px;
		top: 6px;
		right: 15px;
		z-index: 10;
		border: 5px solid white;
	}
	#body-map {
		position: relative;
		width: 250px;
		margin: 0 auto !important;
		float:inherit;
	}
	#map-area{		
		margin-top: -100px;
		margin-bottom: -60px;
		transform: scale(0.8);
	}
	#body-map.minimize{
		animation-name: hideBody;
		animation-delay: 0.6s;
		animation-duration: .3s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
	}
	@keyframes hideBody {
		0% {opacity: 1.0;}
		99% {opacity: 0.0;}
		100% {opacity: 0.0; height:0;}
	}
	button#repeat {
		margin: 26px 0 0;
	}
	#buttonStart {
		width: 100%;
		height: 40px;
		margin-top: 10px;
	}
	#age{
		max-width:100%;
	}
}