@font-face {
	font-family: 'leixo';
	src: url('../fonts/leixo.eot');
	src: url('../fonts/leixo.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/leixo.woff2') format('woff2'),
		 url('../fonts/leixo.woff') format('woff'),
		 url('../fonts/leixo.svg#leixo') format('svg');
	font-weight: normal;
	font-style: normal;
}	

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');

.leixo{
	font-family: 'leixo';
}

body{
  width:100%;
  margin:0;
  position:relative;
}

.clr{
  clear:both;
  width:100%;
}

.col2{
  float:left;
  width:48%;
  margin:1%;
}

.col3{
  float:left;
  width:30%;
  margin:1%;
}

a{
  text-decoration: none;
}

h1,h2,h3,h4,h5,h6,p,li{
	font-family:ubuntu,sans-serif;
}

.ligneBtn{

}
.ligneBtn p{

}

.btnVoirPlus{
	width:20%;
	border-radius:3px;
	background:#FF7807;
	color:#fff;
	font-family:arial;
	transition-duration:0.3s;
	cursor:pointer;
	border:1px solid #FF7807;
	font-weight:bold;
	padding:3px 0 2px 0;
	margin:5px auto 0;
	text-align: center;
}
.btnVoirPlus:hover{
	transition-duration:0.3s;
	color:#FF7807;
	background:#fff;
}

.btnDelete{
	text-align:center;
	width:60%;
	border-radius:3px;
	background:#D60000;
	color:#fff;
	font-family:arial;
	transition-duration:0.3s;
	cursor:pointer;
	border:1px solid #D60000;
	font-weight:bold;
	padding:3px 0 2px 0;
	margin:0 auto;
}

.btnDelete:hover{
	transition-duration:0.3s;
	color:#D60000;
	background:#fff;
}

.btn,input[type=button]{
	padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid #9c5f2a;
    background: #f1e2d5;
    font-family: 'leixo';
    color: #000;
    font-size: 0.8em;
	transition-duration:0.3s;
}

.btn:hover,input[type=button]:hover{
    border: 1px solid #9c5f2a;
    background: #542c09;
    color: #fff;
	transition-duration:0.3s;
}

header{
  width:95%;
  margin:20px;

}
header img{
    height: 55px;
    float:left;
}
header nav{
    
}
header nav a{
    text-transform: capitalize;
    margin-left:20px;
    font-family: helvetica, sans-serif;
	font-weight:bold;
	color:#9c5f2a;
	font-size:1.1em;
	transition-duration:0.3s;
}

header nav a:hover{
	color:#000;
	transition-duration:0.3s;
}

.wrapper{
    width:90%;
    margin:0 auto;
}

.mettreEnLigne{
	display:flex;
	flex-direction:row;
}

section#sec1{
	position:relative;
}

input.btn-calendar{
	min-width: 120px;
	width: 10%;
    position: absolute;
    top: 91px;
    height: 40px;
    font-size: 2em;
    line-height: 0;
}
input.btn-calendar#calendarMonthBefore{
	left:10%;
}
input.btn-calendar#calendarMonthAfter{
	right:10%;
}


#reglementInterieur{
	margin:30px 1% 0;
	border:dotted #9c5f2a 1px;
	border-radius:5px;
	background-color:#eee;
	padding: 0 20px;
}

header form input[type=submit]{
	float: right;
    letter-spacing: 0.3em;
    width: 15%;
    margin: 0
}

form{
	margin:60px 0 60px 0;
}

form input,form label{
	font-size: 1.1em;
    margin: 5px 0;
    display: block;
    font-family: arial;
}

form input,
form select,
form textarea{
	border-radius: 5px;
	padding: 5px;
	width: 98%;
    margin: 0 1% 40px 1%;
	border: 1px solid #9c5f2a;
}

form input[type=radio],
form input[type=checkbox]{
	width: 1%;
    display: inline;
    margin: 10px 0 0 1%;;
}
form input[type=radio]+label,
form input[type=checkbox]+label{
	 display: inline;
}
form input[type=submit]{
	letter-spacing:1em;
	font-family:'leixo';
	font-size: 1.2em;
	cursor:pointer;
	transition-duration:0.3s;
	background:#f1e2d5;
	color:#000;
	margin-top: 50px;
}
form input[type=submit]:hover{
	background: #542c09;
    color: #fff;
	transition-duration:0.3s;
}
form label{
	width:98%;
	margin: 0 1%;
	font-weight:bold;
}

table.superTab{
	width:100%;
	border: 1px solid #9c5f2a;
	border-radius:5px;
	border-spacing:0;
	margin-bottom:50px;
}

table.superTab tr{
	
}

table.superTab tr:nth-child(odd){
	background:#ddd;
}

table.superTab tr:last-child{
	border-radius:0 0 5px 5px;
}

table.superTab tr th{
	color:#fff;
	background:#9c5f2a;
	font-family:'leixo';
	font-size: 1em;
	text-align:center;
	padding : 10px 0;
}

table.superTab tr td{
	text-align:center;
	font-size: 1em;
	font-family: arial;
	padding : 6px 0;
}

table.superTab tr td:first-child{
	text-transform: capitalize;
}

/*table.superTab tr th:first-child,
table.superTab tr td:first-child{
	width:18%;
	min-width:90px;
}

table.superTab tr th:nth-child(2),
table.superTab tr td:nth-child(2){
	width:77%;
	min-width:350px;
}

table.superTab tr th:last-child,
table.superTab tr td:last-child{
	width:5%;
	min-width:40px;
}*/

.partieGite{
	text-transform:capitalize;
}

a.clicClic{
	animation: color-change-4x 4s linear infinite alternate both;
}

a.clicClic:hover, a.clicClic:visited{
	animation: color-change-4x 4s linear infinite alternate both;
}

footer{
	/*position:absolute;
	bottom:0;*/
	width:100%;
	padding: 3px 0;
	background-color:#9c5f2a;
	color:#fff;
	text-align:center;
}

footer a{
	font-weight:bold;
	color:#fff;
	transition-duration:0.3s;
}

footer a:hover{
	transition-duration:0.3s;
	color:#6e5034;
}

#popUp_resa{
	display:none;
	position: absolute;
    height: 33%;
    width: 33%;
    top: 33%;
	left: 33%;
    background: #fff;
    border: dotted 2px #FF5733;
	border-radius: 5px;
}

#popUp_resa .text_popUp{
	text-align:center;
	display:inline-block;
	font-family:arial, sans-serif;
	margin:10px 0;
	width:100%;
	
}

#popUp_resa .btn_popUp{
	width: 55%;
    margin: 10px auto;
    text-align: center;
    display: block;
}

#popUp_resa .fermer_popUp{
	font-size: 1.2em;
	font-family:arial, sans-serif;
	color:#555;
	cursor:pointer;
	float:right;
	margin:5px;
	transition-duration:0.6s;
	font-weight:bold;
}

#popUp_resa .fermer_popUp:hover{
	transition-duration:0.6s;
	transform: rotate(180deg);
}

/*******************************************************************/
/*                         STYLE CALENDAR                          */
/*******************************************************************/


.calendar {
    display: flex;
    flex-flow: column;
	margin-bottom:50px;
}
.calendar .header{
	margin:0 auto;
}

.calendar .header .month-year {
	font-family: 'leixo';
    font-size: 2em;
    font-weight: bold;
    color: #000;
    padding: 20px 0;
	text-align: center;
	float:left;
}
.calendar .header .btn-calendar{
	float:left;
	margin: 25px 50px;
}
.calendar .header .month-year span{
	margin: 0 50px;
}

.calendar .days {
    display: flex;
    flex-flow: wrap;
}
.calendar .days .day_name {
	font-family: 'leixo';
	letter-spacing: 0.5em;
    width: calc(99% / 7);
    border-right: 1px solid #6e5034;
    padding: 10px 0;
    text-transform: uppercase;
    font-size: 1.5em;
    color: #818589;
    color: #fff;
    background-color: #9c5f2a;
	text-align:center;
}
.calendar .days .day_name:nth-child(7) {
    border: none;
}
.calendar .days .day_num {
    display: flex;
    flex-flow: column;
    width: calc(99% / 7);
    border-right: 1px solid #795548;
    border-bottom: 1px solid #795548;
    /* padding: 15px; */
    font-weight: bold;
    color: #7c878d;
    cursor: pointer;
    min-height: 100px;
	
}
.calendar .days .day_num span {
    border-radius: 30px;
    font-family: 'leixo';
    display: inline-flex;
    width: 19px;
    font-size: 14px;
    color: #fff;
    border: 1px solid #795548;
    /* text-align: center; */
    padding: 3px;
    background: #795548;
}
.calendar .days .day_num .event {
    margin-top: 10px;
    font-weight: 500;
    font-size: 14px;
    padding: 3px 6px;
    border-radius: 4px;
    background-color: #f7c30d;
    color: #fff;
    word-wrap: break-word;
}
.calendar .days .day_num .event.green {
    background-color: #51ce57;
}
.calendar .days .day_num .event.blue-booking {
    background-color: #003580;
}
.calendar .days .day_num .event.blue-abri {
    background-color: #0067db;
}
.calendar .days .day_num .event.purple {
	background-color: #711dbd;
}
.calendar .days .day_num .event.red {
    background-color: #ce5151;
}
.calendar .days .day_num:nth-child(7n+1) {
    border-left: 1px solid #795548;
}
.calendar .days .day_num:hover {
    background-color: #fdfdfd;
}
.calendar .days .day_num.ignore {
    background-color: #fdfdfd;
    color: #ced2d4;
    cursor: inherit;
}
.calendar .days .day_num.selected {
    background-color: #ccc;
    cursor: inherit;
}

/*******************************************************************/
/*                   * FIN STYLE CALENDAR *                        */
/*******************************************************************/

section.tabRecap{
	width:70%;
	margin-right:2%;
	float:left;
}

section.formAjout{
	width:25%;
	float:left;
}

.admin{
	animation: color-change-4x 4s linear infinite alternate both;
}

@media only screen and (max-width: 1200px){
	section.tabRecap{
	width:100%;
	margin-right:0%;
	float:none;
}

section.formAjout{
	width:100%;
	float:none;
}
}

@keyframes color-change-4x {
  0% {
    color: #19dcea;
  }
  33.3333% {
    color: #b22cff;
  }
  66.666% {
    color: #ea2222;
  }
  100% {
    color: #1F9B0C;
  }
}