/* ******** vars ********** */
:root {
	--bg: #07547E;
	--fg: white;
	--bg2: #B8C0D5;
	--bg3: #E2E6EF;
	--bg4: #D0E8EC;
	--bg5: #68A;
	--fg2: #07547E;
	--fg4: #07547E;
	--header_h: 80px;
	--menu_w: 220px;
}
/* ******** body ********** */
html, body, #main {
	width: 100%;
	min-height: 100%;
}
body {
	overflow-x: hidden;
}
/* ******** colors ********** */
.green { color: darkgreen; }
.red { color: #d7021b; } /* pour être comme le drapeau suisse */
.orange { color: orange; }
.salleicon { color: var(--bg); }


/* ******** pieces ********** */
.piecevisitee { color: darkgreen; font-style: italic; }
.statut10 { color: orange; }
.statut20 { color: red; text-decoration: line-through;   }

/* ******** z-index ********** */

#footer,
#map_list_switcher, 
#map_filter,
#menu2021 { z-index: 1000; }

.multi-select-menu { z-index: 1500; }

#map_filter_button_div { z-index: 800; }

#full_popup { z-index: 3000; }
#message_box { z-index: 2000; }

.token-input-dropdown { z-index: 3500 !important; }


/* ******** generic ********** */
.mlist { border: solid 1px #666; border-collapse: collapse;}
.mlist th { border-bottom: solid 1px black; text-align: left; font-weight: 300; font-size: 110%; }
.mlist td { border-bottom: solid 1px #666; }
.mlist th ,
.mlist td { padding: 2px 8px ; }

/* ******** fonts ********** */
@font-face {
	font-family: WorkSans;
	src: url(/res/fonts/WorkSans-VariableFont_wght.ttf);
}
@font-face {
	font-family: Exo2;
	src: url(/res/fonts/Exo2-VariableFont_wght.ttf);
}
@font-face {
	font-family: EmilysCandy;
	src: url(/res/fonts/EmilysCandy-Regular.ttf);
}
.emilyscandy {
	font-family: "EmilysCandy";
}
body,
.exo2 {
	font-family: "WorkSans";
	font-weight: 400;
}

b {
	font-weight: 800;
}


/* ******** misc ********** */

/*.off { opacity: 0.4; filter: grayscale(100%); }*/
.clickable,
.inputstar { cursor: pointer; }
.spacer { flex-grow: 1; }
.right { text-align: right; }
.left { text-align: left; }
.center { text-align: center; }
.flex_nowrap { display: flex; flex-wrap: nowrap; }
* { box-sizing: border-box; }
.strike { text-decoration: line-through; }

/* ******** elements divers ********** */
select {
	width: 100%;
	border: solid 1px #bbb;
	border-radius: 0px;
	padding: 8px;
	background-color: white;
	color: #666;
}
textarea#review {
	width: 100%;
}
.a,
label,
a.button,
button {
	cursor: pointer;
}

/* ******** header ********** */

#header {
	height: var(--header_h);
	width: 100%;
	padding: 5px;
	background-color: var(--bg);
	color: white;
	position: fixed;
	z-index: 460;
	top: 0px;
}
#header a,
#header h1,
#header h2 {
	color: white;
	padding:0px;
	margin: 0px;
}
#header h1 { font-size: 34px; }
#header h2 { font-size: 16px; }
@media (max-width: 960px) {
	#header h1 { font-size: 20px; }
	#header h2 { font-size: 12px; }
}
#header .logo {
	margin-right: 15px;
	min-width: 75px;
	padding-top: 5px;
	padding-left: 5px;
}
#header .logo img {
	height: calc(var(--header_h) - 20px);
	width: auto;
}
#header .menubutton {
	padding: 10px;
	font-size: 30px;
	margin-top: 5px;
}

/* ******** menu ********** */
#menu2021 {
	position: fixed;
	top: var(--header_h);
	left: 100vw;
	width: var(--menu_w);
	padding-right: 10px;
	min-height: 100px;
	background-color: var(--bg2);
	color: var(--fg2);
	transition: left 0.1s;
	z-index: 1300;
}
#menubody {
	padding: 5px;
}
#menufooter {
	background-color: var(--bg);
	height: 20px;
	display: none;
}
#menu2021 h3 img {
	height: 50px;
	float: right;
}
#menu2021 h3 {
	color: white;
	font-family: emilyscandy;
}
#menu2021 menu li {
	list-style: none;
}

/* ******** devel ********** */
.devel {
	margin: 5px;
	padding: 3px 10px;
	color: white;
	background-color: darkorange;
}

/** ** content ** */
#content {
	margin-top: var(--header_h);
}
/** ** footer ** */
#footer{
	/*position: absolute;*/
	bottom: 0px;
	padding: 5px 10px 7px 0px;
}
#footer_content {
	max-width: none;
}
#footer .far, #footer .fab {
	font-size: 20px;
	color: white;
	margin-right: 10px;
}

/* token input */
ul.token-input-list {
	max-width: 100%;
	width: auto !important;
}
/* styles qui font genre foundation */
* {
	box-sizing: border-box;
}
div, ul, menu {
	margin: 0;
	padding: 0;
}
menu,
ul {
	margin-left: 10px;
}
#menu2021 menu menu ,
#menu2021 menu li {
	padding: 3px;
}

#message_box {
    display: none;
    position: fixed;
    top: 0px;
    width: 800px;
}
.message_devel {
	background-color: #cb9;
	color: white;
	font-weight: bold;
}
.message_warning {
	background-color: orange;
	color: white;
	font-weight: bold;
}
.message_info {
	background-color: #8be;
	color: white;
	font-weight: bold;
}
.message_info .far.fa-info {
	font-size: 50px;
	float: left;
}
.message {
	padding: 20px;
}
.message_pingouin img {
	vertical-align: middle;
	height: 48px;
}
.message_pingouin {
	background-color: var(--bg4);
	color: var(--fg4);
	font-weight: bold;
	padding: 10px;
	opacity: 0.9;
}
.message_ok {
	background-color: #3a0;
	color: white;
	font-weight: bold;
}
#full_popup {
	padding: 10px;
	max-width: 96%;
	min-width: 300px;
	min-height: 200px;
	max-height: 96%;
	margin: 2%;
	position: fixed;
	top: 0px;
	left: 0px;
	background-color: white;
	border: solid 1px black;
	overflow-y: scroll;
	display: none;
}
#full_popup_closer {
	cursor: pointer;
	text-align: right;
	margin-bottom: 20px;
	color: red;
	font-size: 20px;
	position: fixed;
	background-color: white;
}

/**
 * mat: 2021-12-01, ajout de css qui trainaient dans le template ici
 * */

	.msg.ok {
		position: absolute;
		max-width: 100%;
		width: 600px;
		margin: 0;
		opacity: 0.9;
		z-index: 1200;
	}
	.msg.ok h2 {
		margin: 0px;
	}

.relative {
	position: relative;
}

/******** links.php */
.links_flag {
	vertical-align: bottom;
	height: 20px;
}
.links_sitelink {
	display: flex;
	border-radius: 10px;
	margin: 10px;
}
.links_sitelink .url_desc {
	padding-left: 15px;
}
.links_sitelink .img img {
	object-fit: cover;
	width: 150px;
	min-width: 150px;
	height: 120px;
	border: solid 1px #333;
}
.links.fa-globe-africa {
	color: #04b;
	font-size: 19px;
}

/* ROOMS LIST ET ROOMS ITEMS déplacés de styles-carte-1.0.css */

.rooms_list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.room_item {
	max-width: 100%;
	width: 500px;
	height: 300px;
	position: relative;
	margin: 20px 1%;
	font-weight: 300;
}
.room_item {
	max-width: 700px;
	min-width: 400px;
	margin: 20px 2%;
}
@media (max-width:2700px) { .room_item_w, .room_item { width: 24%; margin: 20px 1%; } }
@media (max-width:2200px) { .room_item_w, .room_item { width: 31%; margin: 20px 1%; } }
@media (max-width:1700px) { .room_item_w, .room_item { width: 46%; margin: 20px 1.5%; } }
@media (max-width:1200px) { .room_item_w, .room_item { width: 94%; margin: 20px 2%;} }
@media (max-width:640px)  { .room_item_w, .room_item { width: 98%; margin: 20px 1%; max-width: 98%; min-width: 98%;} }

.room_item_img {
	background-size: cover;
	background-position: center center;
	z-index: 10;
}
.room_item_img,
.room_item_layer,
.room_item_content {
	width: 100%;
	height: 100%;
	margin: 0px;
	position: absolute;
}
.room_item_img img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.room_item_layer {
	z-index: 20;
	background-color: black;
	opacity: 0.5;
}
.room_item_content {
	color: white;
	z-index: 30;
}
.room_item_head {
	background-color: var(--bg5);
	width: 100%;
	padding: 10px;
	padding-bottom: 5px;
}
.room_item_head h4 {
	padding: 0px;
	margin: 0px;
	margin-bottom: 5px;
	font-size: 1.3rem;
}
.room_item_head .enseigne {
	font-size: 1.1rem;
	margin-bottom: 5px;
}
.room_item_body {
	width: 100%;
	padding: 10px;
	font-size: 1.1rem;
}
.room_item .note_large {
	width: 64px;
}
.room_item_head .flag{
	height: 24px;
	vertical-align: middle;
	margin: 0px;
	margin-left: 10px;
}
.room_item_head .note_large {
	margin-top: -8px;
	filter: drop-shadow(0px 0px 1px #fff);
}

.room_item.statut20 .room_item_img {
	filter: grayscale(1);
}


/* alt 2 */
.room_item_layer { background-color: white;  opacity: 0.7; }
.room_item_body { color: black; }

/* alt 3 */
.room_item_content {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.room_item_body {
	flex-grow: 1;
}
.room_item_layer {
	opacity: 0;
}
.room_item_footer {
	color: black;
	background-color: #ffffff88;
	padding: 10px;
	font-size: 1.1rem;
	display: flex;
	flex-wrap: wrap;
}
.room_item_footer .room_infos {
	min-width: 25%;
	text-align: left;
	padding-right: 10px;
}
.room_item_footer .room_infos_w100 {
	max-width: 100%;
	min-width: 100%;
	max-height: 25px;
	text-align: left;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.room_item {
	height: 350px;
}
.room_infos .flag {
	height: 20px;
}
#list_salles {
	margin-top: 70px;
}
@media (max-width: 700px) {
	#listcontener {
		padding: 0px 0px;
		margin-left: 0px;
	}
	.room_item {
		margin: 20px 2px;
	}
}
		#div_map_list_switcher {
			display: block;
			position: absolute;
			top: 20px;
			right: 20px;
			z-index: 450;
		}

/* avant dans do_main */
		.room_item  {
			cursor: pointer;
		}
		#piece_popup a {
			color: #666;
		}
		#piece_popup a ,
		#piece_popup h3 {
			color: var(--fg2);
		}
		#piece_popup {
			background-color: var(--bg3);
			color: #666;
			position: absolute;
			top: 100px; 
			left: 20px;
			padding: 10px;
			box-shadow: 3px 3px 3px #000;
			display: none;
			z-index: 2040;
			width: 450px;
			max-width: 90%;
		}
		#toplink {
			background-color: var(--bg);
			color: white;
			width: 30px;
			height: 30px;
			border-radius: 15px;
			position: fixed;
			right: 40px;
			bottom: 50px;
			padding: 6px 9px;
			z-index: 40;
			box-shadow: 3px 3px 3px #666;
		}

.c_s_header .succursales {
	font-size: 80%;
}

.social {
	margin-top: 10px;
	font-size: 22px;
	a {
		color: white;
		margin-right: 5px;
	}
}