/*
    Nom         : styleGobelin.css
    Appel       : default.php
    Auteur      : Aurelie Laux atTech
    Version     : 20181129
*/
/*-------------------------------------------------------------------*\
    # TABLES DES MATIERES
\*-------------------------------------------------------------------*/
/**
 * TABLE DES MATIERES..............Celle-ci
 * #BOOTSTRAP ICONS................Icones Bootstrap
 * #FONT...........................Polices d'ecriture
 * #NAVIGATION.....................Mise en forme des elements du menu
 * ##span..........................Onglet
 * #FORM...........................Formulaire
 * ##fieldset......................Section du formulaire
 * ##selectpicker..................Select avec subtext et customizable
 * #LISTE..........................Liste <li>
 * ##liActive......................Lien actif
 * #HREF...........................Lien
 * ##target_blank..................Lien externe
 * #DIV............................Indentation
 * ##etoile........................Badge en forme d'etoile
 * ##chart.........................Plan de salle
 * ##input_cross...................Croix de suppresion dans input text
 * ##draganddrop...................Drag and drop
 * ##carousel......................Hauteur fixe
 * ##card-grid.....................Card presentees sous forme de grid
 * ##modalForFilter................Modal pour les filtres de page
 * ##scrollableCol.................Colonne scrollable
 * #TABLE..........................Table
 * ##gc-custom-table...............Table du tableau de bord
 */
 /*-------------------------------------------------------------------*\
    # BOOTSTRAP ICONS
\*--------------------------------------------------------------------*/
 @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
 /*-------------------------------------------------------------------*\
    # FONT
\*--------------------------------------------------------------------*/
html {
  font-family: 'Open Sans', sans-serif;
  font-size: 100%;                              
}
/*-------------------------------------------------------------------*\
    # NAVIGATION
\*-------------------------------------------------------------------*/
/*  ## span 
------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr-only-focusable:active, .sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}
/*  ## button toggler (hamburger) 
------------------------------------- */
.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(135,182,18, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.custom-toggler.navbar-toggler {
  border-color: rgb(135,182,18);
} 
/*-------------------------------------------------------------------*\
    # FORM
\*-------------------------------------------------------------------*/
/* form {
	background-color: #fa6000;
	border-radius: 5px;
	margin-top: 5%;
    width: 100%;
    vertical-align:middle;
 } */
/*  ## fieldset 
------------------------------------- */
/* fieldset {
	padding:1% 1% 1% 1%; 				
	margin: 1% 0% 1% 0%;				
	border:3px solid black;
	border-radius: 10px;
	height: 100%;
	background-color: #fde1c9;
	display: inline-block;
    vertical-align:middle;
} */
fieldset.ville {
	width: 30%;
	margin-left: 2%;
}
fieldset.activite {
	width: 45%;
}
fieldset.bouton {
	width: 19.5%;
	height: 71px;
}
#add-animation > div > form > fieldset > div.show, 
#add-animation > div > form > div.show {
  display: flex !important;
}
/*  ## selectpicker
------------------------------------- */
.bootstrap-select.form-control {
  border: solid 1px lightgrey!important ;
  /*  border-left: none!important; */
  width: auto!important;
}
.bootstrap-select > .dropdown-toggle {
  color: black!important;
}
#zoneRecherche > form > div > .selectPickerWithSlash {
  border: none;
  color: black;
  font-weight: 300;
  padding-right: 20px;
}
#zoneRecherche > form > div > .selectPickerWithIcon {
  border: none;
  color: black;
  font-weight: 300;
  display: flex;
  align-items: center;
}
/*-------------------------------------------------------------------*\
    # Navigation
\*-------------------------------------------------------------------*/
.navbar .nav-item.active{
  font-weight: 500; 
}
.navbar .nav-link { 
  color: white; 
  letter-spacing: 1px;
  margin-right: 1rem;
  text-align: left;
}
.navbar .nav-link.sticky-menu { 
  color:white;
  /* margin-right: 0.5rem; */
}
#user-header .navbar .nav-link.sticky-menu { 
  color:white;
  margin-right: 4rem;
}
.navbar .nav-item .nav-link .dropdown-item{ 
  font-size: 14px; 
}
.navbar-brand#guys {
  padding-bottom: 1.125rem !important;
}
#container-menu > div.container > nav.navbar {
  padding: 0 !important;
}
#container-menu .navbar .nav-link {
  color:black; 
  letter-spacing: 1.5px; 
  line-height: 1.33;
  display: flex;
}
#edit-header > #container-menu .navbar .nav-link {
  color:black; 
  letter-spacing: 0.5px; 
  line-height: 1.33;
  display: block;
}
#admin-header > #container-menu .navbar .nav-link {
  color:black; 
  letter-spacing: 0.5px; 
  line-height: 1.33;
  display: block;
}
#user-header > #container-menu {
  z-index: 10;
  position: absolute;
  background-color: white;
  opacity: 100%;
  border: 1px solid #01697c;
}
#user-header > #guys-menu {
  height: 50px; 
  border-top: 1px solid #87b612; 
  background-color: black !important;
}
#user-header > #guys-menu > div > .navbar-expand-lg {
  height: 65px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: space-around;
}
#user-header {
  padding-bottom: 100px!important;
}
#user-header > #guys-menu > div > .navbar-expand-lg > ul > #filter,
#user-header > #sticky-menu > div > div > #main_nav > ul > #filter {
  margin-bottom: 15px;
}
#guys-menu {
  background-color: black !important;
}
#admin-header > #sticky-menu > div > div > #main_nav {
  padding-right: 0px;
}
#filter > form > div > #filterInHeader/* , 
#header-login #filter > form > div > #filterInHeader */ {
  border-radius: 40px 0 0 40px;
}
#header-login #filter > form > div > #filterInDefaultHeader {
  border-radius: 40px 0 0 40px;
}
#zoneRecherche > form > div > #animation {
  height: 50px !important;
  width: 30%;
  border: solid 1px #87b612;
  border-radius: 40px 0 0 40px;
  font-size: 20px;
  padding-left: 20px;
}
/*  ## Megamenu 
    .fixed-top est une classe Bootstrap en full width. Pour modifier
    le comportement du menu lorsqu'il est fixe, il faut creer une 
    nouvelle classe (ex. sticky_menu) et lui affecter les valeurs :left
    et :right a 20% et une :position fixed
------------------------------------- */
.navbar .megamenu{ padding: 1rem; }
/* ============ desktop view ============ */
@media all and (min-width: 993px) {
  .navbar .has-megamenu{ 
    position:static!important; 
    display: flex;
    flex-wrap: wrap;
    align-content: center;
  }
  .navbar .megamenu{ width:100%; margin-top:0; position:absolute!important; }
}	
@media all and (min-width: 993px) {
	.navbar .nav-item .dropdown-menu{ display: none; }
	.navbar .nav-item:hover .dropdown-menu{ display: block; }
	.navbar .nav-item .dropdown-menu{ margin-top:-15px; }
  .navbar .nav-item:hover .nav-link:hover .dropdown-item{ display: block; }
  .mobile-hide {
    display: inline!important;
  }
  .mobile-show {
    display: none!important;
  }
}
@media(min-width: 1275px){
  .mobile-hide-flex {
    display: flex!important;
  }
  .mobile-show-flex {
    display: none!important;
  }
}
/* ============ desktop view .end// ============ */
/* ============ mobile view ============ */
@media(max-width: 1274px){
  .mobile-hide-flex {
    display: none;
  }
  .mobile-show-flex {
    display: flex!important;
  }
}
@media(max-width: 992px){
  div#dynamic-content, div#header-content {
    margin-top: 100px !important;
  }
  div#sticky-menu {
    margin-top: 0px !important;
    display: block !important;
    overflow-y: auto;
    max-height: 90vh;
  }
  body > div.container#breadcrumb-container {
    margin-top: 30% !important;
  }
  /* .navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse{
    overflow-y: auto;
    max-height: 90vh;
    margin-top:10px;
  } */
  .mobile-hide {
    display: none;
  }
  .mobile-show {
    display: block;
  }
  .mobile-view>table {
    width: 100%;
  }
  .mobile-view>table>tbody>tr>td{
    max-width: 0;
    overflow: hidden;
    text-align: justify;
    /* text-overflow: ellipsis; */
    /* white-space: nowrap; */
  }
}
@media(max-width: 722px){
  body > div.container > div#zoneRechercheModal > form {
    display: flex!important;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-end;
    padding-left: 0!important;
    align-content: stretch;
    overflow: hidden;
    background-color: #f8f9fa;
  }
  body > div.container > div#zoneRechercheModal > form > .btn-lg {
    width: 100%;
    border-radius: 0 0 0 0!important;
  }
}
/* ============ mobile view .end// ============ */
/*-------------------------------------------------------------------*\
    # HREF
\*-------------------------------------------------------------------*/
/*  ## target_blank 
------------------------------------- */
a[target="_blank"]::before {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
  margin: 0 5px 0 5px;
  color:#007bff
}
a.dropdown-item.disabled {
  cursor: default;
}
/*-------------------------------------------------------------------*\
    # DIV
\*-------------------------------------------------------------------*/
/*  ## etoile
------------------------------------- */
.etoile {
  width: 60px;
  height: 60px;
  background-image: url('../img/certificate-solid.svg');
  color: white;
  padding: 12px 0 0 0;
  text-align: center;
  position: absolute;
}
.ico-etoile {
  width: 25px;
  height: 25px;
  background-image: url('../img/certificate-solid.svg');
  color: white;
  padding: 3px 0 0 0;
  text-align: center;
  position: absolute;
}
.gradient-text {
  background-color: green;
  background-image: linear-gradient(180deg, green 55%, red 45%);
  background-size: 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-text-fill-color: transparent;
}
/*  ## chart
------------------------------------- */
.chart {
  width: 1000px;
  margin: 0 auto;
  padding: 2em;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* .zone {
	width: 100%; 
	text-align: center;
} */
.zone-column {
	width: 50%; 
  display: flex;
  /* transform: skew(-15deg); */
  margin: 0 6px;
}
.row-table {
	width: 200px;
  height: 60px;
  border-radius: 50%;
  background: black;
  margin-top: 25px;
  margin-bottom: 30px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
	cursor: pointer;
}
.row-seat {
	width: 25px;
  height: 25px;
  border-radius: 50%;
  background: linear-gradient(
    to top,
    #050505,
    #272424,
    #272424,
    #272424,
    #272424,
    #383737,
    #747272
  );
  margin-bottom: 30px;
  margin-right: 10px;
  margin-top: -20px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
	cursor: pointer;
}
.row-seat:hover:before {
  content: "";
  position: absolute;
  top: 12;
  width: 25px;
  height: 25px;
  background: #0dee8580;
  border-radius: 50%;
}
.row-seat.active :before {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
}
.column a p {
	display: block; 
	text-align: center; 
	transition: ease .35s;
	opacity: 1;;
}
.column a span {
	display: block;
	text-align: center;
	transition: ease .35s;
	opacity: 0;
}
.column a:hover span {
	opacity: 1;
}
.parentdiv {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: black;
  color: #87b612;
  border-radius: 50px / 50px;
  margin: 50px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -ms-grid;
  display: grid;
  text-align: center;
  justify-items: center; 
}
.div2 {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #87b612;
  border-radius: 100px;
}
.person {
  position: relative;
  height: 40px;
  width: 20px;
  background-color: #87b612;
  -webkit-mask: url(user-astronaut-solid.svg) no-repeat center;
  mask: url(user-astronaut-solid.svg) no-repeat center;
}
.espace {
  border: 1px solid #bd1129; 
  border-radius: 30px; 
  background-color: #efcdc1;
  margin-bottom: 30px; 
  padding: 15px;
  justify-content: center;
}
#pointer {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -ms-grid;
  display: grid;
  justify-items: center;   
  width: 200px;
  height: 40px;
  position: relative;
  background: #bd1129;
  border-radius: 20px;
  margin-bottom: 10px;
  color: #efcdc1;
  text-align: center;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 0.2em;
}
a.espace_lien {
  text-decoration: none;
}
a.espace_lien:hover {
  font-weight: bold;
	cursor: pointer;
}
/*  ## cross_input
------------------------------------- */
.btn-pos {
  position:relative;
  z-index:1;
  left: -36px;
}
.btn-pos:hover {
  background-color: transparent;
  color: #bd1129;
}
/*  ## draganddrop
------------------------------------- */
.draganddrop {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.box {
  /* border: 3px solid #666; 
  background-color: #ddd;
  border-radius: .5em;*/
  padding: 10px;
  cursor: move;
}
.box-shadow {
  border: 1px solid #01697c; 
}
.box.over {
  border: 3px dotted #666;
}
/*  ## carousel
------------------------------------- */
.carousel-inner .carousel-item {
  position: absolute;
  object-fit: cover;
  top: 0;
  left: 0;
  max-height: 500px;
  background-position: center;
}
.carousel {
  height: 500px !important;
  margin-bottom: 30px;
}
#myCarousel {
  height: 550px !important;
}
#myCarousel > div > div > div > #resultat > div > div > .row-card-link > .shadow {
  box-shadow: none;
  /* box-shadow: 0 1em 3em black; */
}
.carousel-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  padding-top: 10px !important;
  padding-bottom: 0px !important;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  letter-spacing: 5px;
  color: white;
  text-align: center;
  background: rgba(0,0,0,0.4);
}
.carousel-item,
.carousel-inner,
.carousel-inner img {
  height: 100%;
  width: 100%;
}
/*  ## card-grid
------------------------------------- */
.shadow {
  box-shadow: 0 1em 3em black;
}
.cover-root {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.7;
}
.cover-overlay {
  z-index: 9;
  margin: 30px;
  background: #009938;
}
.card-grid {
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 5px;
  color: white;
}
.row-card-link {
  text-decoration: none !important;
  color: black;
}
.row-card-link:hover {
  text-decoration: none !important;
  color: black;
}
.push-effect:hover {
  transform: scale(0.98);
  box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
}
/*  ## modalForFilter
------------------------------------- */
#modalFilter {
  top:45%;
  right:10%;
  outline: none;
}
#modalFilter > .modal-dialog > .modal-content > .modal-body > div > .row > .col-auto > .badgeForModalFilter  {
  border-radius: 40px;
  border: solid 1px #01697c;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  cursor: pointer;
}
#modalFilter > .modal-dialog > .modal-content > .modal-body > div > .row > .col-auto > .badgeForModalFilter:hover  {
  background-color: #cbdde1;
}
#modalFilter > .modal-dialog > .modal-content > .modal-body > div > .row > .col-auto {
  padding-left: 18px;
  padding-right: 18px;
  padding-bottom: 15px;
}
#modalFilter > .modal-dialog > .modal-content > .modal-body > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
#modalFilter > .modal-dialog > .modal-content > .modal-body > div > .row {
  justify-content: space-around;
}
#rowDate > div > div > .table-condensed {
  width: 420px;
  height: 200px;
}
#rowDate > div > div > .table-condensed .datepicker-switch {
  width: 420px;
  height: 40px;
}
#rowDate > div > div > .table-condensed .datepicker-switch:hover, 
#rowDate > div > div > .table-condensed .datepicker-switch .next:hover, 
#rowDate > div > div > .table-condensed .datepicker-switch .prev:hover,
#rowDate > div > div > .table-condensed .datepicker-switch tfoot tr th:hover,
#rowDate > div > div > .table-condensed .datepicker-switch table tr td.day.focused, .datepicker table tr td.day:hover
{
  background: #cbdde1!important;
}
#rowDate > div > div > .table-condensed .datepicker-switch table tr td.active
{
  background: #01697c!important;
  color: white;
}
/*  ## scrollableCol
------------------------------------- */
@media (min-width: 768px) {
  div#gc-scrollable-col {
    max-height: 100vh;
    overflow-y: scroll;
  }
}
/*-------------------------------------------------------------------*\
    # TABLE
\*-------------------------------------------------------------------*/
/*  ## gc-custom-table 
------------------------------------- */
.gc-custom-table {
  border-bottom: solid 1px lightgrey!important ;
}
.gc-custom-table > td {
  border-top: solid 0px lightgrey!important ;
}
.gc-custom-table-offline {
  background: linear-gradient(45deg, #b3b3b3 1%, #fff 1%, #fff 49%, #b3b3b3 49%, #b3b3b3 51%, #fff 51%, #fff 99%, #00f 99%);
  background-size: 6px 6px;
  background-position: 50px 50px;
}