:root {
  --main-color: rgba(193,226,255,0.7) ;
  --hight-color: #2699FB ;
}

h3,h5 {
  text-align:center;
} 

h3 {
  margin-bottom: 1rem !important;
  border : 1px solid var(--hight-color);
  border-radius:10px;
  padding:10px ;
  color: white !important;
  background-color:var(--hight-color);
  font-size: 20px !important;
}

h4 {
  margin-top: 1rem !important;
  font-size: 18px !important;
}

h5 {
  font-size:1rem !important;
  color: var(--hight-color) !important;
}


/*reduction taille conteneur principal*/
.container-fluid {
  max-width: 1500px;
}

 /*centrer les elements*/
.row {
 justify-content: center;
}

.division { 
  max-width:390px !important;
}

.fiche {
  background-color: var(--main-color);
  padding:30px;
  box-sizing: border-box;
  border-radius:10px;
  margin-bottom:10px;
  margin-top:10px;
  color: var(--hight-color);
  border: 1px solid lightgrey;
}

/*ICONES*/
.fa-user, .fa-tags, .fa-address-card,.fa-telegram-plane,.fa-undo-alt, .fa-heartbeat, .fa-caret-left,.fa-map-marker-alt {
  padding-right:10px;
}

.fa-caret-right {
  padding-left:2vw;
}

/*NAVIGATION*/
.navigation_container {
  position: relative;
  top: 2vh;
  text-align:center !important;
  margin-bottom: 5vh !important;
}


/*input nom du secouriste*/
.nom_secouriste {
  position: relative;
  top: -30px;
}

.nom_secouriste .form-control,.nom_secouriste .input-group-text {
  background-color:var(--hight-color) !important;
  color:white !important;
  border:none!important;
  font-weight:bold;
  font-size:14px;
} 


#identite_victime {
  text-align: center;  
}

#numero_victime {
  width:75%;border : 3px solid lightgrey;
  border-radius:10px;
  padding:10px ;
  font-size: 1.50rem !important;
  font-weight:normal;
}

/*encart bleu clair*/
.blue {
  background-color: rgba(255,255,255,0.6) !important;
  padding:10px;
  margin-bottom: 15px;
}


.silhouette {
  background-color: white !important;
}

.silhouette section {
  text-align:center!important;
}

.silhouette {
  margin-bottom:5vh !important;
}

.type_blessures {
  margin-bottom: 35px;
}


.input-group-text {
	color:var(--hight-color) !important;
	background-color: white !important;
	border: 1px solid var(--hight-color) !important; 
}

.form-control[readonly] {
	background-color: snow !important; 
}
	
.form-control {
	border: 1px solid var(--hight-color) !important; 
}	

.form-control::placeholder {
	color:var(--hight-color) !important;
}

.form-group {
  line-height:1.5 !important;
  margin-bottom:0.6rem !important;
}


.diagnostic {
	margin-bottom:1rem;
	margin-top:1.5rem;
}

.diagnostic div, .localisation div {
	display:inline-block;
	margin-right:15px;
	text-align:center;
	margin:auto;
}

.diagnostic label {
	width:70px;
	color:white;
	font-weight: bold;
	text-align:center;
	margin-bottom:auto;
}

.etat {
  margin-top:1rem;
}

#labeldcd, #labelua, #labelur {
  font-size: 16px !important;
  font-weight: normal !important;
  border-radius: 5px;
}

#labeldcd { 
	background-color:black;
}

#labelua {
	background-color:red;
}

#labelur {
	background-color:green;
}

label {
	font-weight:bold;
	font-size: 16px !important;
	letter-spacing: 0.2px;
}

.capsule_radio {
	font-weight:normal;
  color: #098df9;
}

/*bouton envoyer*/
.last button {
  margin-top:1rem;
}

/*silhouettes */
.red {
  fill: grey;
	stroke : red;
  stroke-width:2; 	
}

.capsule {
  font-weight:normal;
  color: #098df9;
  display: block;
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 17px !important;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


/* cache les checkbox par defaut */
.capsule input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
  color:var(--hight-color);
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 5px;
  left: 3px;
  height: 18px;
  width: 18px;
  background-color: white;
  border: 2px solid var(--hight-color);
  border-radius: 4px;
}



/* When the checkbox is checked, add a blue background */
.capsule input:checked ~ .checkmark {
  background-color: #2196F3;
  border: none;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.capsule input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.capsule .checkmark:after {
  left: 7px;
  top: 3px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
} 

/**********************CUSTOM BOUTON RADIO*************************************/
 /* Customize the label (the container) */
.capsule_radio {
  display: block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 14px !important;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.capsule_radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.checkmark_radio {
  position: absolute;
  top: 3px;
  left: 3px;
  height: 21px;
  width: 21px;
  border-radius: 50%;
  border: 1px solid var(--hight-color);
  background-color: white;
}



/* When the radio button is checked, add a blue background */
.capsule_radio input:checked ~ .checkmark_radio {
  background-color: #2196F3;
  border: 1px solid #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark_radio:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.capsule_radio input:checked ~ .checkmark_radio:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.capsule_radio .checkmark_radio:after {
  left: 7px;
  top: 4px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
} 


/*change la couleur de fond des selects */
.custom-select {
  margin-bottom: 1rem !important;
  background-color: #eaf3f9!important;
}


/*enleve les fleches dans les champs de type number */
input[type=number]{ 
  appearance: textfield;
	-webkit-appearance: textfield;
  -moz-appearance: textfield;
  -ms-appearance: textfield;
}

.input-group-prepend span, .mb-3 input {
  min-height: 40px ;
}


/*ligne bouton envoyer*/
.last button {
  font-size:1rem;
}

#envoyer {
  letter-spacing: 1px;
}