/**************************************************************
 Rooming'it - Logiciel de gestion de salles
 Copyright 2001-2020 Develop'it
 
 Version : 7.0.0
 Fichier : css/screen.css
**************************************************************/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}
del,ins{text-decoration:none;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:baseline; font-size:smaller;}
sub{vertical-align:baseline;}
legend{color:#000;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
input,button,textarea,select{*font-size:100%;}
.floatlll > * { float: left; }

/****************************************************************/
html { box-sizing: border-box; }
html, body {
	width: 100%;
	height: 100%;
}
body {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	background-color: #FFFFFF;
	background-color: rgba( 220, 220, 220, 0.95);
}
.icone { vertical-align: text-bottom; }
::placeholder { color: #333333; opacity: 0.3; }

/***************************** Entete ***********************************/
#Entete {
	padding: 4px;
	height:auto;
	background-color: #FFFFFF;
	font-size: 12px;
}
#Entete a {
	color: #000000;
	text-decoration:none;
}
#Entete .Logo {
	height: 48px;
	width:auto;
	margin-right:20px;
}
#Entete td {
	overflow:hidden;
	white-space:nowrap;
}

/***************************** BarreOutils ***********************************/
#BarreOutils {
	height: 32px;
	padding:0;
	color: #323A23;
	padding-top: 4px;
	padding-bottom: 0px;
}
#BarreOutils label {
	margin:0;
	padding:0;
	margin-left:30px;
	height: 26px;
	line-height:26px;
}
#BarreOutils label img {
	margin-bottom:-4px;
}
#BarreOutils select {
	margin:0;
	padding:0;
	height: 26px;
	line-height:26px;
}
#BarreOutils option {
	padding-top:5px;
	height:20px;
	background-position:4px 7px;
	background-repeat:no-repeat;
}
#BarreOutils #Langue option#fr {
	padding-left:20px;
	background-image:url(../image/FR.png);
}
#BarreOutils #Langue option#en {
	padding-left:20px;
	background-image:url(../image/EN.png);
}
#BarreOutils #Langue option#es {
	padding-left:20px;
	background-image:url(../image/ES.png);
}
#BarreOutils #Langue option#nl {
	padding-left:20px;
	background-image:url(../image/NL.png);
}
#BarreOutils #btQuitter {
	display:inline-block;
	margin-right:30px;
	margin-top:4px;
	cursor:pointer;
}

/*****************************  ***********************************/
#content {
	clear: both;
	height: 490px;
	padding-top:8px;
}
/***************************** BarrePied ***********************************/
#BarrePied {
	clear:both;
	display:block;
	height: 28px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:0.8em;
	color: #4F6145;
	padding-top: 5px;
	padding-left: 12px;
}
#BarrePied a {
	text-decoration:none;
	color: #4F6145;
}

/*****************************  ***********************************/
#menu {
	float: left;
	margin-left: 7px;
	width: 200px;
	height: auto;
	font-size: 0.8em;
}
#detail {
	font-size: 0.8em;
	max-width: auto;
	width: auto;
	height: 520px;
	margin-left: 210px;
	padding: 0 4px 4px 4px;
	margin-right: 4px;
}

/* --------- Legende ---------- */
#ZoneLegende { position:relative; display:inline-block;cursor:pointer;float:right;margin-right:20px;padding:2px 4px;border-radius: 3px; font-size:11px;height:16px;}
#Legende {
	position:absolute;
	z-index:9999;
	font-size: 10px;
	margin: 1px;
	padding: 3px 5px;
	min-width: 200px;
	box-shadow: 1px 1px 2px rgba( 0, 0, 0, 0.4 );
	right:0;
	border: 1px solid #ddbb77;
	background-color: #FFFFCC;
	border-radius: 0.3em;
	display:none;
}
#ZoneLegende:hover #Legende {
	display:block;
}
.CarreCouleur {	display:inline-block;width:10px;height:10px;border:1px solid rgba(30, 30, 30, 0.3);margin-right:3px; opacity:0.9; }

/* --------- Detail ---------- */
#detail .agenda {
	height: 417px;
	width: 100%;
}

.TableAgenda table {
	border-collapse: collapse;
	background-color:inherit;
}
#EnteteSalle {
	padding:0;
	margin:0;
}
.NomSalle th {
	font-size: 11px;
	text-align:center;
	background-color: #EEEEEE;
	overflow: hidden;
	vertical-align: middle;
	border: 1px solid #FFFFFF;
	padding:0;
	margin:0;
}
.NomSalle th a, .NomSalle th a:link, .NomSalle th a:visited {
	overflow:hidden;
	height: 32px;
	display: flex;
	color: #000000;
	text-decoration: none;
	vertical-align: middle;
}
.NomSalle th a span {
	margin: auto;
}
.NomSalle th a:hover {
	background-color: #CCDCC2;
	vertical-align: middle;
}

/* --------- Reservation ---------- */
.reservation {
	font-family:Arial, Helvetica, sans-serif;
	position:absolute;
	border: 1px solid #999999;
	margin: -1px -2px -3px 0;
	font-size: 11px;
	overflow: hidden;
	vertical-align: top;
	cursor: pointer;
	padding: 0 2px;
	z-index:900;
	box-shadow: 1px 1px 1px rgba( 0, 0, 0, 0.2 );
}
#detail .reservation:hover, .reservation:hover, #detail td .reservation:hover {
	border: 1px solid rgba( 30, 30, 30, 0.8);
	box-shadow: 2px 2px 2px rgba( 0, 0, 0, 0.4 );
	z-index:1000;
	transition: border-color 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
#detail .reservation.Courante, #detail .reservation.Courante:hover {
	border-left-width:4px;
	box-shadow: 2px 2px 2px rgba( 0, 0, 0, 0.4 );
	z-index:999;
}

/* --------- Preparation ---------- */
.Preparation {
	position:absolute;
	border: 1px solid #aaa;
	margin: -1px -2px -3px 0;
	overflow: hidden;
	vertical-align: top;
	padding: 0 2px;
	z-index:800;
	background:repeating-linear-gradient(
	  315deg,
	  rgba( 220, 220, 220, 0.85) 0px,
	  rgba( 220, 220, 220, 0.85) 4px,
	  rgba( 200, 200, 200, 0.85) 5px,
	  rgba( 220, 220, 220, 0.85) 6px
	);
}

/* --------- Liberation ---------- */
.Liberation {
	position:absolute;
	border: 1px solid #aaa;
	margin: -1px -2px -3px 0;
	overflow: hidden;
	vertical-align: top;
	padding: 0 2px;
	z-index:800;
	background-color:#ccc;
	background:repeating-linear-gradient(
	  45deg,
	  rgba( 220, 220, 220, 0.85) 0px,
	  rgba( 220, 220, 220, 0.85) 4px,
	  rgba( 200, 200, 200, 0.85) 5px,
	  rgba( 220, 220, 220, 0.85) 6px
	);
}

/* ---------  ---------- */
#EnteteSalle { position:relative; overflow:hidden; }
#EnteteHeure { position:relative; overflow:hidden; }

#detail .Heure {
	clear:both; font-size: 18px; font-weight: bold; padding: 0 4px; overflow: hidden; width:45px;
	background-color: #EEEEEE; border-bottom:1px solid #fff; border-right:1px solid #fff; display:block; position:relative;
}
#detail .HeureAMPM {
	font-size: 10px; font-weight: normal; text-align:left;
}
#detail .Minute00, .Minute30, .Minute20, .Minute40, .Minute60 {
	font-size: 10px; font-weight: normal; text-align:center; 
	background-color: #EEEEEE; border-bottom:1px solid #fff; width:20px; position:absolute; right:0px; display:block;
}
#detail .Minute00 {top:0px;}
#detail .Minute30 {top:30px;}
#detail .Minute20 {top:20px;}
#detail .Minute40 {top:40px;}
#detail .Minute60 {top:0px;}
#detail .Jour {
	overflow: hidden;
	padding-left: 12px;
	padding-right: 2px;
	width:40px;
	background-color: #eee;
	border-bottom: 1px solid #fff;
	border-right:1px solid #fff;
}
.LigneHeure {
	position:absolute;
	border-bottom: 1px solid rgba( 0, 0, 0, 0.2);
}
.LigneMinute {
	position:absolute;
	border-bottom: 1px solid rgba( 0, 0, 0, 0.1);
}
.LigneSalle {
	position:absolute;
	background-color:rgba( 0, 0, 0, 0.2);
	width:1px;
}

/* --------- Menu ---------- */
#DetailReservation {
	display: block;
	overflow: auto;
}
#DetailOption {
	display: block;
	overflow: auto;
}
#DetailParticipant {
	display: block;
	overflow: auto;
}
.EnteteTitre {
	padding-left:40px;
	padding-top: 5px;
}
.IconeEntete {
	padding-top:4px;
	position:relative;
	margin-left:5px;
	z-index:999;
	margin-bottom:-24px;
}
.BoutonPlier {
	display:inline-block;
	width:16px;
	height:16px;
	margin-right:5px;
}
.BoutonPlier.Ouvert {
	background: transparent url("../image/Plier.png") no-repeat;
    background-position: left;
}
.BoutonPlier.Ferme {
	background: transparent url("../image/Plier.png") no-repeat;
    background-position: right;
}
.EnteteTitre:hover .BoutonPlier {
    background-position: right;
}


#menu a, #menu a:link, #menu a:visited {
	color: #D86100;
	text-decoration:none;
}
#menu a:hover {
	color: #D86100;
}

/*************************** Calendrier ********************************/
#Calendrier #TitreZone {
	padding-top:5px;
}
#menu .calendrier {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	margin-bottom: 4px;
}
#menu .calendrier td {
	font-size: 10px;
	border: 1px solid #FFFFFF;
}
#menu .calendrier tr.HautCalendrier td {
	font-size: 11px;
	height:15px;
	line-height:1.6em;
}
#menu .calendrier tr.LigneSemaine:hover td {
	background-color:#FFDF8A !important;
}
#menu .calendrier tr.DateCourante td {
	background-color:#FFC835 !important;
}
#menu .calendrier .SansFond a:hover {
	background-color: inherit;
}
#menu .calendrier td a, #menu .calendrier td a:link, #menu .calendrier td a:visited {
	display: block;
	color: #000000;
	text-decoration: none;
}
#menu .calendrier td a:hover {
	background-color: #FFDF8A;
}
#menu .DateCourante {
	color: #FFFFFF;
	background-color: #FFC835;
	font-weight: bold;
}
#menu .calendrier .CeJour  {
	border: 1px solid #FF0000;
}
#menu .calendrier th {
	font-size: 10px;
	background-color: #EEEEEE;
	border: 1px solid #FFFFFF;
	text-align:center;
}
#menu .calendrier th a, #menu .calendrier th a:link, #menu .calendrier th a:visited {
	color: #000000;
	text-decoration: none;
}
.LibelleJour {
	font-size: 14px;
	font-weight: bold;
	color: #D86100;
	margin-bottom:5px;
}

/*************************** EnteteZone ********************************/
.EnteteZone {
	margin: 0 0;
	background-color: rgba( 18, 127, 168, 0.15);
	border-top-left-radius:3px;
	border-top-right-radius:3px;
	height:24px;
	overflow: hidden;
	width: 100%;
	position: relative;
	font-size: 12px;
}

/*************************** TexteZone ********************************/
.TexteZone {
	margin: 0;
	background-color: #ffffff;
	overflow: hidden;
	position: relative;
	padding: 7px 7px;
	border-bottom-left-radius:3px;
	border-bottom-right-radius:3px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.TexteZone.Ferme {
	height:0px !important;
	overflow:hidden;
	padding-bottom: 0;
	padding-top: 0;
}
.TexteZone.Ouvert {
	height:200px;
}

/*************************** ResultatAction ********************************/
.ResultatAction {
	position:fixed;
	z-index:999999;
	top:15px;
    left: calc( 50vw - 18% );
	width:35%;
	height:auto;
	min-width:300px;
	padding:20px 30px;
	font-size:15px;
	color: rgba( 254, 254, 254, 1.0 );
	box-shadow: 0px 0px 5px 3px rgba( 0, 0, 0, 0.2 );
	border-radius: 5px;
}
.ResultatAction.OK {
	background-color:rgba( 0, 153, 144, 1.0 );
}
.ResultatAction.KO {
	background-color:rgba( 215, 66, 81, 1.0 );
}
.ResultatAction > .btFermer {
	position:absolute;
	right:10px;
	top:10px;
	float: right;
	font-weight: bold;
	font-size: 20px;
	line-height: 20px;
	text-align:center;
	color: rgba( 254, 254, 254, 0.6 );
	cursor: pointer;
	transition: 0.3s;
	border-radius:50%;
	width:20px;
	height:20px;
}
.ResultatAction > .btFermer:hover {
	color: rgba( 254, 254, 254, 1.0 );
	background-color: rgba( 254, 254, 254, 0.2 );
}