/* WRAPPER (Classe élément HTML) */
.wrapper { position:absolute; left:0; top:0; right:0; bottom:0; }

/* Hide scrollbar for Chrome, Safari and Opera */
.wrapper::-webkit-scrollbar { display:none; }
/* Hide scrollbar for IE, Edge and Firefox */
.wrapper {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* ITEMBOX (Dialogue de tri des points d'intérêts) */
.itemSection .itemBox {
	border: 3px solid #444;
	border-radius: 0.3em;
	width: 3em;
	height: 3em;
	margin: 0.3em;
	padding: 0.8em;
	background-color: white;
}

.itemSection .itemBox img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.itemSection {
	flex: 1; /* grow to fill extra space */	
	/* Also use flex layout for the items in this section, in the default
	   row direction, but with wrapping enabled.*/
	display: flex;
	flex-wrap: wrap;	
	/* Scroll content vertically */
	overflow-y: auto;
}

.itemSection .itemBox:hover { background-color:pink; border-color:black; }

.itemSection .itemBox.off {	background-color:red; border-color:black; }

.itemSection .itemBox.off:hover { background-color:red; border-color:white; }

/* SLIDER */
.slidecontainer {
  width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 10px; /* Specified height */
  border-radius: 5px;
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 24px;
  border: 0;
  background: url('svg/klipgen_symbol.svg');
  cursor: url("img/pointer.webp"), auto;
}

.slider::-moz-range-thumb {
  width: 23px;
  height: 25px;
  border: 0;
  background: url('svg/klipgen_symbol.svg');
  cursor: url("img/pointer.webp"), auto;
}

/* HEADINGS */
h1, h2, h3 { margin:0; padding:0; }

/* LIENS */
a { color:#AA8334; } 
a:visited { color:#AA8334; } 
a:active { color:#5C615E; } 
a:hover { color:#FFF; cursor:none; } /* cursor:url("img/pointer_hand.webp"), auto; */

/* INPUT - Curseur au dessus des cases à cocher */
input:hover { cursor:none; } /* cursor:url("img/pointer_hand.webp"), auto; */

/* BOUTONS */
/* admin.html */
#admin-button-peoples,
#admin-button-history,
#admin-button-climates,
#admin-button-geology,
#admin-button-fauna,
#admin-button-flora {
	box-sizing: border-box;
	vertical-align: top;
	border-radius: 0.5625em;
	position: relative;
	display: inline-block;
	margin: 0.3125em 0.125em 0.3125em 0.125em;
	width: 8.75em;
	height: 8.75em;
	background-color: #D4C396;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 6.25em; /* Ajout de la taille pour la rendre responsive dans l'app Construct - Image de 100*/
	border: 0.375em solid #E2D9C1;
	transition-duration: 0.4s;
}
/* admin.html */
#admin-button-measure,
/* admin-climates.html */
#climates-button-stream,
#climates-button-wind {
  box-sizing: border-box;
  border-radius: 0.5625em;
  position: relative;
  display: inline-block;
  width: 5em;
  height: 5em;
  background-color: #D4C396;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 70%; /* Ajout de la taille pour la rendre responsive dans l'app Construct - Image de 100*/
  border: 0.375em solid #E2D9C1;
  transition-duration: 0.4s;
}
/* admin-peoples.html */
#button-back-lvl-0,
/* peoples-xxxx.html */
#button-back-lvl-1 {
  box-sizing: border-box;
  border-radius: 0.5625em;
  position: absolute;
  left: 80%;
  top: 0.3125em; /* 5px */
  width: 5em;
  height: 5em;
  background-color: #D4C396;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 70%; /* Ajout de la taille pour la rendre responsive dans l'app Construct - Image de 100*/
  border: 0.375em solid #E2D9C1;
  transition-duration: 0.4s;
}
/* admin.html */
#admin-button-peoples:hover,
#admin-button-history:hover,
#admin-button-climates:hover,
#admin-button-geology:hover,
#admin-button-fauna:hover,
#admin-button-flora:hover,
#admin-button-measure:hover,
/* admin-climates.html */
#climates-button-stream:hover,
#climates-button-wind:hover,
/* admin-peoples.html */
#button-back-lvl-0:hover,
/* peoples-xxxx.html */
#button-back-lvl-1:hover {
	background-color: #FFF;
	border: 0.375em solid #AA8334;
}
/* admin.html */
#admin-button-peoples:hover span,
#admin-button-history:hover span,
#admin-button-climates:hover span,
#admin-button-geology:hover span,
#admin-button-fauna:hover span,
#admin-button-flora:hover span,
#admin-button-measure:hover span,
/* admin-climates.html */
#climates-button-stream:hover span,
#climates-button-wind:hover span,
/* admin-peoples.html */
#button-back-lvl-0:hover span,
/* peoples-xxxx.html */
#button-back-lvl-1:hover span {
	color: #AA8334 !important;
}

/* admin.html */
#admin-button-peoples {	background-image:url(icon/icons8_peoples_100.webp); }
#admin-button-history {	background-image:url(icon/icons8_history_100.webp); }
#admin-button-climates { background-image:url(icon/icons8_climates_100.webp); }
#admin-button-geology {	background-image:url(icon/icons8_geology_100.webp); }
#admin-button-fauna { background-image:url(icon/icons8_fauna_100.webp); }
#admin-button-flora { background-image:url(icon/icons8_flora_100.webp); }
#admin-button-measure {	background-image:url(icon/icons8_measure_100.webp); }
/* admin-climates.html */
#climates-button-stream { background-image:url(icon/icons8_stream_100.webp); }
#climates-button-wind {	background-image:url(icon/icons8_wind_100.webp); }
/* admin-peoples.html */
#button-back-lvl-0,
/* peoples-xxxx.html */
#button-back-lvl-1 { background-image:url(icon/icons8_back_100.webp); }

/* CONTAINERS */
#container-1 { vertical-align:top; position:relative; display:inline-block; background:none; }
#container-2 { vertical-align:top; position:relative; display:inline-block; margin:0 0 1.25em 0; width:100%; background:none; }
/* admin-climates.html */
#container-climates { vertical-align:top; position:relative; display:inline-block; width:100%; }
.equatorial-color { background-color:#D41F14; }
.tropical-color { background-color:#E16E13; }
.arid-color { background-color:#F5E303; }
.mediterranean-color { background-color:#963B64; }
.continental-color { background-color:#41A8B1; }
.oceanic-color { background-color:#02802E; }
.mountain-color { background-color:#735749; }

/* container padding */
#container-1_padding { margin:0.3125em; display:block; }
/* admin-climates.html padding */
#container-climates_padding { margin:0.625em; display:block;  }

/* HEADINGS SPAN */
#heading-1 { vertical-align:top; position:relative; display:inline-block; width:100%; background:none; font-size:4em; font-family:'ReliqStd-SemiboldExtActive'; color:#AA8334; text-align:left; }
#heading-1-lineup { box-sizing:border-box; vertical-align:top; position:relative; display:inline-block; width:100%; background:none; border-top:0.0625em solid #AA8334; border-left:none; border-right:none; border-bottom:none; font-size:2.667em; font-family:'ReliqStd-SemiboldExtActive'; color:#473D21; text-align:left; }
#heading-2 { vertical-align: top; position:relative; display: inline-block; width:100%; background:none; font-size:2.167em; font-family:'ReliqStd-SemiboldExtActive'; color:#473D21; text-align:left; }

/* CLASS TEXTSTYLE */
/* admin.html */
.txt-left { text-align:left; }
.txt-center { text-align:center; }
.txt-right { text-align:right; }

.txt-cambria { font-size:1em; font-family:'Cambria'; } /* textes standard 13pt */
.txt-cambria-ita { font-style:italic; } /* textes italiques 13pt */
.txt-cambria-color { color:#AA8334; font-style:italic; } /* textes surbrillance 13pt */

.txt-sommaire { font-size:1.667em; font-family:'ReliqStd-SemiboldExtActive'; } /* textes sommaires 20pt */
.txt-bouton { font-size:1.5em; font-family:'ReliqStd-BoldExtraActive'; color:#473D21; } /* textes boutons 18pt */
/*.txt-petit-bouton { font-size:1.333em; font-family:'ReliqStd-BoldExtraActive'; color:#473D21; } /* police boutons réduits 16pt */
/* admin-peoples.html */
.txt-legend { font-size:1.833em; font-family:'ReliqStd-SemiboldExtActive'; color:#AA8334; } /* textes légendes symboles 22pt */
/* admin-climates.html */
.txt-zone-black { font-size:1.733em; font-family:'ReliqStd-SemiboldExtActive'; color:#FFF;  } /* textes zones noir 20pt */
.txt-zone-white { font-size:1.733em; font-family:'ReliqStd-SemiboldExtActive'; color:#000;  } /* textes zones blanc 20pt */
/* sort-pois.html */
.titre-tri { font-size:2.5em; font-family:'ReliqStd-SemiboldExtActive'; color:#473D21; }

/* ANCRES : Désactivées car elles ajoutent un espace non souhaité */
/* #sommaire, #genese, #voyage, #mesure --> admin.html */
/* #peuples --> admin=peoples.html */
/* #sommaire, #genese, #voyage, #mesure, #peuples { vertical-align:top; position:relative; display:inline-block; } */

/* IMAGES */
/* admin.html */
#img-logo { vertical-align:bottom; position:relative; display:inline-block; width:65%; background:none; height:auto; }
#img-point-a,
#img-point-b { vertical-align:top; position:relative; display:inline-block; margin:0.3125em 0 0 0;width:0.625em; background:none; height:auto; }
/* admin-peoples.html */
#img-logo-small { vertical-align:bottom; position:relative; display:inline-block; width:20%; background:none; height:auto; }
#symbol-admin-peoples { vertical-align:bottom; position:relative; display:inline-block; width:7.9375em; background:none; height:auto; }
/* peoples-xxxx.html */
#symbol-peoples { vertical-align:bottom; position:relative; display:inline-block; width:6.25em; background:none; height:auto; }
#illustration-peoples { vertical-align:bottom; position:relative; display:inline-block; margin:1.25em 0 1.25em 0; width:100%; background:none; height:auto; }
/* icônes communes */
#icon-link-down,
#icon-link-up,
#icon-info { vertical-align:bottom; position:relative; display:inline-block; width:1.875em; height:1.875em; background:none; }

/* TABLES admin-peoples */
#table-symbols-haut { vertical-align:bottom; position:relative; display:inline-table; margin:0.625em 0 0 0;width:100%; height:1.875em; background:none; table-layout: fixed; }
#table-symbols-bas { vertical-align:bottom; position:relative; display:inline-table; margin:0 0 0.625em 0;width:100%; height:1.875em; background:none; table-layout: fixed; }

/* CHECKBOX */
.checkbox { position:relative; width:1.875em; height:1.875em; vertical-align:bottom; margin-right:0.625em; }