@charset "UTF-8";
/* reservations.css ver 1.0.0 */


.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
   
    background: lightsteelblue;
    font-weight: bold;
    color: #454545;
}	
.dep-prev{background: url("img/previous30.png")}
	

.ui.cards {
	display: flex;
	margin: -.875em -.5em;
	flex-wrap: wrap;
}
body .ui {
	scrollbar-color: rgba(0,0,0,.25) rgba(0,0,0,.1);
	scrollbar-width: thin;
}
.ui.cards > .card {
	font-size: 1em;
}
.ui.cards > .card {
	display: flex;
	margin: .875em .5em;
	
}
.ui.card, .ui.cards > .card {
	max-width: 100%;
	position: relative;
	width: 100%;
	flex-direction: column;
	
	min-height: 0;
	background: #fff;
	padding: 0;
	border: none;
	border-radius: .28571429rem;
	box-shadow: 0 1px 3px 0 #d4d4d5,0 0 0 1px #d4d4d5;
	transition: box-shadow .1s ease,transform .1s ease;

	word-wrap: break-word;
}
.ui.card > .content, .ui.cards > .card > .content {
	flex-grow: 1;
	border: none;
	border-top: 1px solid rgba(34,36,38,.1);
	background: 0 0;
	margin: 0;
	padding: 1em;
	box-shadow: none;
	font-size: 1em;
	border-radius: 0;
}
.ui.card > :first-child, .ui.cards > .card > :first-child {
	border-radius: .28571429rem .28571429rem 0 0 !important;
	border-top: none !important;
}
.fixed-bottom {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1030;
}

		 
.searchBoxElement{
  background-color: white;
  border: 1px solid #aaa;
  position: absolute;
  max-height: 150px;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  line-height: 35px;
  list-style: none;
  z-index: 1;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.searchBoxElement span{
  padding: 0 5px;
}


.searchBoxElement li{
  background-color: white;
  color: #337ab7;font-weight: 600;
}

.searchBoxElement li:hover{
  background-color: #50a0ff;
  color: white;
}

.searchBoxElement li.selected{
  background-color: #50a0ff;
  color: white;
}

.refineText{
 padding: 8px 5px 8px 8px !important;
 width: 210px !important;
	border-radius: 0;
text-transform: uppercase;
	
	
}


	
body{background-color: white}
	
td span {
    line-height: 23px;
}
/*td { white-space:pre-wrap; word-wrap:break-word }*/
	
input[type=button] {
    outline: none !important;
    box-shadow: none !important;
} 
button:focus, button:visited {
    border: none;
    outline: none;
}
* {
	outline: none;
}
button:focus,
button:active { 
    -moz-outline-style: none!important;
	outline:none!important;
	outline: 0!important;
}
a:active, a:focus {
outline: 0 !important;
-moz-outline-style: none !important;
} 	
#ui-datepicker-div{z-index: 100000!important;}
	
#datepicker{color:#2777AA;}

#overlay{  width: 100%;
	 min-height: 100%;
	  background-color:gray; 
	  color: white;
	  text-align: center;
	  padding-top: 20%;
	}
table {
	cursor: pointer;
}
.modal-footer{justify-content: space-between;}
.fade {
	transition: opacity .20s linear;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {

	font-size: 1.2em;
	padding-top: 20px;
}	
.ui-datepicker table {
	width: 100%;
	font-size: .9em;
	border-collapse: collapse;
	margin: 0 0 .4em;
/*	height: 25em;*/
}
.ui-datepicker {
	padding: .2em .2em 0;
/*	height: 26em;*/
	position: absolute;
/*	left: 0px!important;*/
}
.ui-datepicker .ui-datepicker-header {
	position: relative;
	padding: .2em 0;
	height: 3em;
}
.ui-datepicker-month .ui-datepicker-year{font-size: 1.2em;}
.ui-datepicker .ui-datepicker-title {
   
    padding-top: 5px;
}

.btn-close-resa{float: right;}
	
.btn-table
{
	width:50px;
	height:30px; 
	outline:none;
	background-color: white;
	font-size: 1em;

}
.btn-tableSelected
{
	background-color: lightblue;
}
/*#btn_aftable{	border: 1px solid darkgray;}
#btn_nbpax{	border: 1px solid darkgray;} */
	.btn-valid-table:disabled{opacity: 0.5!important; }
@media screen and (orientation: portrait) {
  #overlay {
      
	 display: none; 
	
  }
	
	.container{display: block;height: inherit; vertical-align: top }
	
}
.table-num
{
  width: 80px;
  border: 0px;
  text-align: center;
  font-weight: 600;
  height: 35px;
  color: black;
  background-color: white;	
}
	
@media screen and (orientation: landscape) {
  #overlay {
    display: none;

  }
.container{display: block;}
	
	
}
.header{margin-top: 40px;}
.toolbar
{
margin-bottom: 50px;	
	
}
.tb-left{float: left}
.tb-right{float: right}	
.btn_toolbar,.btn_toolbar:hover
{
  width: 40px;
  height: 35px;
  float: left;
 
  height: 40px;
  background-color: #337ab7;
	border-radius: 0px;
  color: #eee;
  border-color: #337ab7;
	font-weight: 600;
}

	
.draggable {
  width: 48px;
  height: 48px;
  /*min-height: 1em;
  margin: 1rem 0 0 1rem;
  background-color: #29e;*/
 background:url("img/resaDrop.png");
	
  color: white;
  border-radius: 0.75em;
  padding: 0px !important;
  touch-action: none;
  user-select: none;
}
.trash
{
	width:70px;
	height:70px;
	background:url("img/trash.png");
	background-repeat: no-repeat;
	background-size: contain;
	float:left; 
	opacity:0.7; 
	text-align:center;
	position:absolute; 
	left: 1.5%;
    top: 15px;

}	

.btn-valid-table, .btn-valid-table:hover {
	width: 40px;
	height: calc(1.5em + .75rem + 5px);
	float: right;
	text-align: center;
/*	position: absolute;
	left: 1%;
	top: 100px; */
	color: white;
}
.library{
	margin: .5em;
	background-color: white; 
	float: left;
	height: 800px;
}


.btnTableSelected, .btnTableSelected:hover
{

  background-color: darkcyan;
  color: white;
  font-size: 0.8em;
  font-weight: 600;
	
}

.drop-active {
  background-color: #55c6bf;
}
.drop-target {
	border: 2px solid #FC6E5E;
}

/*le carré change de couleur quand il survol le cercle*/
.drag-drop {
	background-color: #583131;
	/*width: 100px;
	height: 100px;
    color: #fff; */
    transition: background-color 0.3s;
	text-align: center;
	transition: border-radius .1s;
	mix-blend-mode: difference;
}
.drag-drop.can-drop {
  color: #000;
  background-color: #FC6E5E;

}
.label-disabled{background-color: transparent; color:white; border: none;font-weight: 600;text-align: center;border-radius: 20%;height: 30%;width: 70%; font-size: 1em; opacity: 1 }
	
	
.label-enabled{background-color: white; color:white; border: none;font-weight: 600;text-align: center;border-radius: 20%;height: 30%;width: 70%; font-size: 1em;  }	

	
.label-pax{font-size: 0.8em;font-weight: 600;color: white;}
		
.label-am-disabled{background-color: orange;}
.label-am-enabled{background-color: white;}
	
input {width: 20px;}

.dropBox
{
	width:70px; 
	height: 70px; 
	/*border: 2px solid orange; */
	background:cornflowerblue; 
	float:left; 
	position:absolute; 
	opacity:1; 
	text-align:center;
	margin-top: 20px; 
	border-radius: 10%;
	}

.dropBoxNo
{
	width:70px; 
	height: 70px; 
	/*border: 2px solid orange; */
	background:cornflowerblue; 
	float:left; 
	position:absolute; 
	opacity:1; 
	text-align:center;
	margin-top: 20px;
	border-radius: 10%;
}
.selTable{background-color: lightblue}
	
[id^="th-"] {
  opacity: 0.9;
}
	
	
.plant
{
width:50px;
height:50px;
	background:url("img/plant.png");
	background-repeat: no-repeat;
	background-size: contain;
	float:left; 
	position:absolute; 
	opacity:0.7; 
	text-align:center;
	margin-top: 20px; 
}	


	
	
.limit
{
	border-left: 1px dashed #000000;  
	width: 10px; 
	height: 597.5px; 
	position: absolute; 
	left: 0px; top: 0px; 
	transform: translate(1000px, 0px);
	}	
.group-by{background-color: aliceblue; font-weight: 600;color: royalblue; font-size: 1.2em} 
.fixed-table-loading{display: none}
.float-right {width: 100%;}
	
.selectedTable{background-color: lightblue; font-weight: 600}
	
.bs-checkbox{display: block}
.btn-sm1,.btn-sm1:hover{width: 60px; height: 45px; margin-left: 5px;}

.ui-pnotify-container{min-height: 70px !important;}
.ui-datepicker-div{min-height: 70px !important;} 
.pnotify-center {
   right: calc(50% - 150px) !important;
   top: 40% !important;
	opacity: 1;
}
	
.alert-info{background-color: rgba(52,152,219,1);}
.alert-success{background-color: rgba(38,185,154,1);}
.alert-danger{background-color: rgba(231,76,60,1);}	

.ui-pnotify-text 
{
  /*font-weight: 600;	
	vertical-align: middle; */
}
	
.btn-pax, .btn-pax:hover, .btn-pax:visited, .btn-pax:focus {
	width: 60px;
	height: 60px;
	border-radius: 5px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 10px;
	color: #337ab7;
	background-color: #eeeeee;
	border-color: #eeeeee;
	font-weight: 600;
	padding-top: 20px;
	font-size: 1em;
}	

.pax-active
{
	color:#eeeeee!important ;
  	background-color: #337ab7!important;
 	border-color: #337ab7!important;

} 
.btn-time,.btn-time:hover,.btn-time:visited,.btn-time:focus
{
				width: 70px; 
				height:70px;
				border-radius:5px;
				padding-left: 10px;
				padding-right: 10px;
				margin-top: 10px;
				margin-right: 10px;
				margin-top: 10px;
				color:#337ab7 ;
  				background-color: #eeeeee;
 				border-color: #eeeeee;
  				font-weight: 600;
  				padding-top: 20px;
				font-size: 1.2em;
				cursor: pointer;
} 
.btn-time-disabled{color:#eee; background-color: red;pointer-events: none;}

.btn-time-resa,.btn-time-resa:hover,.btn-time-resa:visited,.btn-time-resa:focus
{
				width: 60px; 
				height:60px;
				border-radius:5px;
				padding-left: 10px;
				padding-right: 10px;
				margin-top: 10px;
				margin-right: 10px;
				margin-top: 10px;
				color:#337ab7 ;
  				background-color: #eeeeee;
 				border-color: #eeeeee;
  				font-weight: 600;
  				padding-top: 20px;
				font-size: 1em;
				cursor: pointer;
} 
.btn-time-resa-disabled{color:#eee; background-color: red;pointer-events: none;}	
	
.btn-time-past{background-color: antiquewhite; pointer-events: none}

.time-active
{
	color:#eeeeee!important ;
  	background-color: #337ab7!important;
 	border-color: #337ab7!important;

} 

.btn_service_selected:disabled
{
opacity: 1;	
}
.listResa{

  border: 1px solid gray;
 overflow: scroll
	
}
.plan{
		
	position: relative; 
	/*background-color: #eee; */
	border: 1px solid gray; 
	float: left;
	height: 800px;
	
	
}	

@media screen and (orientation: portrait) {
.head_div_date{
	width: 100%; 
	margin-left: 0%;
	padding-bottom: 10px;
	float: left;
}
.head_div_salle{
	width: 100%; 
	margin-left: 0%;
	padding-bottom: 10px;
	float: left;
}

.head_div_pax{
	width: 100%; 
	margin-left: 0%;
	float: left;
	padding-top: 15px;
	padding-bottom: 15px;
	text-align: center;
}
.selPlan
{
	
	width: 50%;
  	font-weight: 600;
	float: left;
	margin-right: 10px;
	margin-left: 7px;
	height: calc(1.5em + .75rem + 5px);
	
}
.dateResa
{	
	font-size: 1.1em; 
	font-weight: 600; 
	width: 215px; 
	height: 45px;
	float: left; 
	margin-right: 6px;
	pointer-events: none;
	margin-left: 6px;
	text-align: center;
	position: absolute;
	left: 70px;
	
}
.dateResa1
{	
	font-size: 1.1em; 
	font-weight: 600; 	
	float: left; 
	pointer-events: none;
	text-align: center;
	color: transparent;
height: 1px;
width: 1px;
margin: 0px;
padding: 0px;
border: 0px;
	
}
#btn-midi{margin-left: 7px;}
#btn_before{float: left; position: absolute; left: 0px}
#btnDP{width: 215px;position: absolute;left: 70px;background-color: transparent;}	
#btn_after{float: left; position: relative; left: 286px}
#btnPlan{float: left; position: absolute; left: 305px}
	
.serviceText{font-weight: 600;font-size: 1.1em;display: table-caption;width: 50px;padding-left: 30%;}
	
.btn_service,.btn_service:hover
{
  width: 68px;
  font-size: 0.8em;
  float: left;
  background-color: white;
  border-radius: 3px;
  color: #337ab7;
  border-color: #337ab7;
  font-weight: 600;
  height: 45px;
 
  
}	
.btn_service_selected,.btn_service_selected:hover
{
  width: 68px;
  font-size: 0.8em;
  float: left;
  background-color: #337ab7;
  border-radius: 3px;
  color: #eee;
  border-color: #337ab7;
  font-weight: 600;

   height: 45px;
 
}	

}

@media screen and (orientation: landscape) {
.head_div_date{
	width: 100%; 
	margin-left: 0%;
	padding-bottom: 10px;
	float: left;
}
.head_div_salle{
	width: 100%; 
	margin-left: 0%;
	padding-bottom: 10px;
	float: left;
}
.head_div_pax{
	width: 15%; 
	margin-left: 0%;
	float: left;
	padding-top: 10px;
	text-align: left;
}
.selPlan
{
	
	width: 45%;
  	font-weight: 600;
	float: left;
	margin-right: 10px;
	margin-left: 7px;
	height: calc(1.5em + .75rem + 5px);
	
}
.dateResa
{	
	font-size: 1.1em; 
	font-weight: 600; 
	width: 215px; 
	height: 45px;
	float: left; 
	margin-right: 6px;
	pointer-events: none;
	margin-left: 6px;
	text-align: center;
	position: absolute;
	left: 70px;
	
}
#btn-day{margin-left: 6px;}
#btn_before{float: left; position: absolute; left: 0px}
#btnDP{width: 215px;position: absolute;left: 70px;background-color: transparent; height: 45px}	
#btn_after{float: left; position: relative; left: 286px}
#btnPlan{float: left; }	
	
.serviceText{font-weight: 600;font-size: 1.1em;display: table-caption;width: 50px;padding-left: 30%;}
	
.btn_service,.btn_service:hover
{
  width: 68px;
  font-size: 0.8em;
  float: left;
  background-color: white;
  border-radius: 3px;
  color: #337ab7;
  border-color: #337ab7;
  font-weight: 600;
  height: 45px;
 
  
}	
.btn_service_selected,.btn_service_selected:hover
{
  width: 68px;
  font-size: 0.8em;
  float: left;
  background-color: #337ab7;
  border-radius: 3px;
  color: #eee;
  border-color: #337ab7;
  font-weight: 600;

   height: 45px;
 
}	
	
	}
.btn:disabled{opacity: 1;}
.time-lnk{color: black; font-size: 1em; font-weight: 600; text-decoration: none}
	
.form-control,.form-control:focus{ border: 1px solid #979899; }
	
.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
    background-color: rgba(0, 0, 0, 0.0)!important;
}