@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600&display=swap');


:root {
    --color0: #fff;
    --color1: rgb(48,49,52);
    --color1-hover: #5e4db2;
    
    --color2: #5f6368;
    
    --color3: rgba(23,23,23,1);
    --color4: #000;
    --color5: #999;
    
    --color-red: #f00;
    --color-orange: rgb(255, 140, 0);
    --color-green: #1aaf0b;
    --color-yellow: #ebf704;
    
    
    /* LARGEUR CONTAINER ET MENU */
    --width1: 1200px;
    --width2: 900px;

}



html, body {
    scroll-behavior: smooth;
    -ms-overflow-style: none; 
    -webkit-overflow-scrolling: none !important;
    overscroll-behavior-y: none;
    overscroll-behavior: none;
}

/*
html {
    overflow: hidden;
    height: 100%;
}

body {
    height: 100%;
    overflow: auto;
}
*/
::-webkit-scrollbar {
    width: 0;
    background: transparent;
    -webkit-appearance: none;
    display: none;
    height: 0;
    
}

::-webkit-scrollbar, ::-webkit-scrollbar-track {
    background-color: rgb(32,33,36);
}
::-webkit-scrollbar-button {
    background-color: rgb(32,33,36);
}
::-webkit-scrollbar-thumb {
    background-color: var(--color0);
}
::-webkit-scrollbar, ::-webkit-scrollbar-track {
    background-color: rgb(32,33,36);
}
::selection {
    background: hsla(0,0%,100%,.1);
}

input::placeholder {
    color: var(--color5);
}


body {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1em;
    letter-spacing: .025em;
    background: rgb(32,33,36);
    color: var(--color0);
    font-weight: 300;
    text-rendering: optimizeLegibility;
}

html, .fullscreen {
  display: flex;
    flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

.container {
  margin: auto;
  text-align: center;    
}

.containerWrapper {
    margin-left: 1rem;
    margin-right: 1rem;
}

.hidden {
    display: none;
}

#logo {
    max-width: 700px;
    height: auto;
}

/* ----------------- COULEURS ---------------- */

.red {
    color: var(--color-red);
}

.red svg {
    fill: var(--color-red);
}

.green {
    color: var(--color-green);
}

.green svg {
    fill: var(--color-green);
}

.orange {
    color: var(--color-orange);
}

.orange svg {
    fill: var(--color-orange);
}

.yellow {
    color: var(--color-yellow);
}

.yellow svg {
    fill: var(--color-yellow);
}




.ns1 {
    color: var(--color-yellow);
    fill: var(--color-yellow);
}

.ns1 svg {
    fill: var(--color-yellow);
}

.ns2 {
    color: var(--color-orange);
    fill: var(--color-orange);
}

.ns2 svg {
    fill: var(--color-orange);
}

.nsmax {
    color: var(--color-red);
    fill: var(--color-red);
}

.nsmax svg {
    fill: var(--color-red);
}


/*------------------ FONT ------------------*/

h1 {
    font-size: 1.2em;
}

h2 {
    font-size: 1em;
}



/*------------------ HEADER ------------------*/

#header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    border-bottom: 1px solid #222;
    background: var(--color3);
    z-index: 9;
}
.headerWrapper {
    position: relative;
    display: flex;
    max-width: var(--width1);
    margin: auto;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    height: 60px;
}
#header #logo {
    height: 35px;
    width: auto;
}

#infoHeader {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#infoHeader .siteName {
    margin-left: .5rem;
    margin-right: .5rem;
}

/*------------------ FOOTER ------------------*/

#footer {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    border-top: 1px solid #222;
    background: var(--color3);
}

/*------------------ MENU ------------------*/

.menu svg {
    height: 17px;
    width: auto;
    fill: #fff;
}

.menu li {
    margin: 0;
    list-style: none;
}

.menu a {
    color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    flex-wrap: nowrap;
}

.menu a span {
    margin-left: .5rem;
    white-space: pre;
}

.menu a span {
    display: none;
}

.menu#mainMenu a {
    color: #aaa;
}

.menu#mainMenu svg {
    fill: #aaa;
}

.menu#mainMenu a.active, .menu#mainMenu .active svg {
    color: #fff;
    fill: #fff;
}

/*------------------ MENU PRINCIPAL ------------------*/

#mainMenu ul {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-left: 0;
    padding-left: 0;
    height: 60px;
    align-items: center;
    margin: 0;
}


#mainMenu .menuWrapper {
    max-width: var(--width1);
    margin: auto;
}

/*------------------ MENU SECONDAIRE ------------------*/

.menuHaut .container {
    margin-top: 60px;
}

.menubas .container {
    padding-bottom: 100px;
}

#header #secondMenu ul {
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    margin-bottom: 0;
    margin-top: 0;
}
/*
#header #secondMenu ul li {
    margin-right: 1rem;
}
*/

#header #secondMenu ul li a {
    padding: 1rem;
}

#header #secondMenu ul li:last-child {
    margin-right: 0;
}

/*------------------ BTN ------------------*/

button {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1em;
    letter-spacing: .025em;
}

input {
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1em;
    letter-spacing: .025em;
}

input[type="button"], input[type="file"] {
    border: 0;
}

.btn1 {
    display: inline-flex;
    border: 0 solid transparent;
    background: var(--color1);
    color: var(--color0);
    padding: .85rem 1.5rem;
    font-size: 15px;
    transition: background ease .5s;
    cursor: pointer;
    border-radius: .2rem;
    text-decoration: none;
}

.btn1.red {
    margin-top: 1rem;
    background: #f00;
}



.btn1:hover, .btn1:focus {
    background: var(--color1-hover);
    transition: background ease .5s;
}

.btn1.red:hover, .btn1.red:focus {
    background: #bf0d0d;
}

.btnSeConnecter button, .btnsValid button {
    width: 100%;
    justify-content: center;
}

.supprimerService {
    display: inline-flex;
    border: 0 solid transparent;
    background: var(--color1);
    padding: .6rem 1rem;
    font-size: 15px;
    transition: background ease .5s;
    cursor: pointer;
    border-radius: .2rem;
    margin-left: 1rem;
}

.ajouterService {
    display: inline-flex;
    border: 0 solid transparent;
    background: var(--color1);
    padding: .5rem 1rem;
    font-size: 15px;
    transition: background ease .5s;
    cursor: pointer;
    border-radius: .2rem;
    margin-left: 1rem;
    color: var(--color0);
    margin-top: 1rem;
}



.btn2 {
    display: inline-flex;
    padding: .3rem 1rem;
    cursor: pointer;
    color: var(--color1);
}

.btn3 {
    display: inline-flex;
    padding: .8rem 1rem;
    cursor: pointer;
    background: var(--color1);
    color: #fff;
    border-radius: 0.2rem;
}

/*------------------ FORM GENERALITES ------------------*/

:root {
  --form-control-color: rebeccapurple;
  --form-control-disabled: #959495;
}

#horaires input[type="time"][disabled="disabled"]::-webkit-inner-spin-button,
#horaires input[type="time"][disabled="disabled"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

#horaires input[type="time"] {
    padding-top: .8rem;
    padding-bottom: .8rem;
    /*-webkit-filter: invert(100%);
    -moz-filter: invert(100%);
    -ms-filter: invert(100%);
    -o-filter: invert(100%);
    filter: invert(100%);
    color: var(--color4);*/
}


#horaires input[type="checkbox"] {
  /* ...existing styles */
  display: grid;
  place-content: center;
    cursor: pointer;
}

#horaires input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--form-control-color);
}

#horaires input[type="checkbox"]:checked::before {
  transform: scale(1);
}



#horaires .form-control {
  font-family: system-ui, sans-serif;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.1;


}

#horaires .form-control, #horaires .form-control {
  margin-top: 1em;
}



#horaires input[type="checkbox"] {
  -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 0.9em;
    height: 0.9em;
    border: 2px solid var(--color1);
    border-radius: 0.15em;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
}

#horaires input[type="checkbox"]::before {
  content: "";
    width: 0.5em;
    height: 0.5em;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transform-origin: bottom left;
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--color2);
    background-color: CanvasText;
}

#horaires input[type="checkbox"]:checked::before {
  transform: scale(1);
}



#horaires input[type="checkbox"]:disabled {
  --form-control-color: var(--form-control-disabled);

  color: var(--form-control-disabled);
  cursor: not-allowed;
}







input[type="text"], 
input[type="password"] {
    
    padding: .4rem;
    border: 0px solid transparent;
    -webkit-appearance: none;
    background: transparent;
    border-bottom: 1px solid var(--color1);
    padding-left: 0;
    padding-right: 0;
    color: var(--color0);
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    font-size: 1em;
    opacity: 1;
    font-family: 'Source Sans Pro', sans-serif;
}

input[type="time"], input[type="number"], input[type="tel"], select {
    padding: 0.4rem;
    border: 0px solid transparent;
    -webkit-appearance: none;
    background: transparent;
    border-bottom: 1px solid  var(--color1);
    padding-left: 0;
    padding-right: 0;
    color: var(--color0);
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1em;
    opacity: 1;
}

input[type="date"] {
    border: 0px solid transparent;
    -webkit-appearance: none;
    background: transparent;
    border-bottom: 1px solid  var(--color1);
    color: var(--color0);
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 1em;
    font-family: 'Source Sans Pro', sans-serif;
    padding: 1rem;
    padding-left: 0;
    padding-right: 0;
    min-width: 130px;
    opacity: 1;
}

::-webkit-calendar-picker-indicator {
    filter: invert(1);
    margin: 0;
}




input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: unset;
    border-bottom: 1px solid #444;
  -webkit-text-fill-color: var(--color0);
  -webkit-box-shadow: none;
  transition: background-color 5000s ease-in-out 0s;
}


.page_profil #reservations input[type="tel"] {
    font-size: 1.5em;
}

#horaires input[type="time"]:not(.has-value):not(.focus-visible) {
    color:#aaa;
  }




label {
    /*font-size: 85%;*/
    /* text-transform: uppercase; */
    margin-top: 1.5rem;
    display: block;
}

input:focus {
    outline: none;
}

.formField {
    text-align: left;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

input[disabled="disabled"] {
    color: #aaa;
    -webkit-text-fill-color: #aaa;
}

textarea {
    width: 100%;
    max-width: 100%;
    padding: .4rem;
    padding-right: 0.4rem;
    padding-left: 0.4rem;
    border: 0px solid transparent;
    border-bottom-color: transparent;
    border-bottom-style: solid;
    border-bottom-width: 0px;
    -webkit-appearance: none;
    background: transparent;
    border-bottom: 1px solid #444;
    color: var(--color0);
    padding-left: 0;
    padding-right: 0;
    font-size: 1em;
    font-family: 'Source Sans Pro', sans-serif;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/*------------------ PAGE LOGIN ------------------*/

.page_login #logo {
    max-width: 250px;
    height: auto;
}

.page_login .formField {
    width: 200px;
}

.btnSeConnecter {
    margin-bottom: 2rem;
    margin-top: 2rem;
}


#SVGprofil, #SVGcadenas {
    height: 12px;
    width: auto;
    margin-right: .25rem;
    fill: #fff;
}


/*------------------ PAGE ACCUEIL ------------------*/

.page_accueil #logo {
    max-width: 250px;
    height: auto;
}

.page_accueil .formField {
    width: 200px;
}

.page_accueil .btn1 {
    display: flex;
    justify-content: center;
}

.visuallyHidden {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}

.page_accueil h2 {
    text-align: center;
}



/*------------------ PAGE PROFIL ------------------*/

.page_profil .container {
    max-width: var(--width2);
    width: 100%;
}

.page_profil .btnsValid {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.formField_2col {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.formInformation p {
    margin-top: .5rem;
    font-size: 90%;
    font-style: italic;
}

/*------------------ tabs ------------------*/

.formGroup {
    display: none;
    animation: fadein .8s;
}

.formGroup.active {
    display: block;
    animation: fadein .8s;
}

#menuTabs {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.menuTabsTab {
    padding: .5rem 2rem;
    border-right: 1px solid var(--color2);
    border-top: 1px solid var(--color2);
    border-bottom: 1px solid var(--color2);
    justify-content: center;
    cursor: pointer;
}

.menuTabsTab.active {
    background: var(--color2);
}

.menuTabsTab svg {
    fill: var(--color0);
    height: 16px;
    width: auto;
}

.menuTabsTab.active svg {
    fill: var(--color0);
}


.menuTabsTab:first-child {
    border-top-left-radius: .2rem;
    border-bottom-left-radius: .2rem;
    border-left: 1px solid var(--color2);
}

.menuTabsTab:last-child {
    border-top-right-radius: .2rem;
    border-bottom-right-radius: .2rem;
}

/*
.firstTab {
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
    border-right: 0;
}

.lastTab {
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    border-left: 0;
}
*/


#svgAddPhoto {
    height: 50px;
    width: auto;
    fill: var(--color0);
    cursor: pointer;
}

#logo_wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#delLogo {
    cursor: pointer;
    background: var(--color1);
    
    display: inline-block;
    border-radius: .2rem;
    margin-left: .25rem;
}

#delLogo label {
    margin: 0;
}

#delLogo svg {
    fill: var(--color0);
    cursor: pointer;
    padding: 1rem;
}

div#imgSend {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

/*------------------ PROFIL RESERVATION ------------------*/

#statutResaSvg {
    fill: #ddd;
    height: 25px;
    width: 25px;
}

.statutResaOuvert #statutResaSvg {
    fill: #5ddb0b;
}

.statutResaFerme #statutResaSvg {
    fill: #f00;
}

#reservations label {
    margin: 0;
}

#nbrPlaces, #nbrMaxGroupe, #delaiMinResa, #delaiMaxResa {
    width: 2.1em;
}

#stopResaLong > label, #stopResaTemp > label {
    margin-top: 1rem;
}

#stopResaTemp {
    display: none;
}


#imgToPreview .picture {
    position: relative;
    height: 100px;
    width: 100px;
}

#imgToPreview .picture img {
    object-fit: cover;
    aspect-ratio: 1/1;
    width: 100%;
    height: 100%;
}

/*------------------ HORAIRES ------------------*/

#horaires .formField_service {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#horaires .formField_service label {
    margin: .5rem 1rem;
}

#SVGtrash {
    height: 16px;
    width: auto;
    fill: var(--color0);
}

/*------------------ radio ------------------*/

.yc-form {
  display: flex;
}

.yc-form input {
  position: absolute !important;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  width: 1px;
    
}

.yc-form label {
    color: var(--color0);
    text-align: center;
    padding: 0.3em 1.35em;
    border: 1px solid var(--color1);
    text-transform: uppercase;
    font-size: .85em;
}

.yc-form label:hover {
  cursor: pointer;
}

.yc-form input.r-yes:checked+label {
  background-color: var(--color1);
  color: white;
}

.yc-form input.r-no:checked+label {
  background-color: var(--color1);
  color: var(--color0);
}

.yc-form label:first-of-type {
  border-radius: 25px 0 0 25px;
}

.yc-form label:last-of-type {
  border-radius: 0 25px 25px 0;
}




/*------------------ TABLE RESPONSIVE ------------------*/

.tableResponsive {
  border-collapse: collapse;
}

.tableResponsive thead tr, .tableResponsive tbody tr {
    border-bottom: 1px solid #444;
}


.tableResponsive td, .tableResponsive th {
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: left;
}
/*
.tableResponsive tbody tr {
    background: #222;
    display: block;
    width: 100%;
    margin-bottom: 1rem;
    margin-top: 1rem;
}
*/

/*------------------ POPUP ------------------*/

#popup {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 500px;
    background: transparent;
    z-index: 2;
    height: 100%;    
    z-index: -3;
    opacity: 0;
    transition: all ease .5s;
    transform: translateX(250px);
    transition: opacity .5s 0s,transform .2s cubic-bezier(.215,.61,.355,1) 0s;
}

.popupOpen #popup {
    position: fixed;
    z-index: 99;
    opacity: 1;
    top: 0;
    bottom: 0;
    background: #fff;
    right: 0;
    transition: opacity .5s 0s,transform .2s cubic-bezier(.215,.61,.355,1) 0s;
    transition: all ease .5s;
    transform: translateX(0);
    /*border-left: 1px solid var(--color1);*/
}

#popup .popupHeader {
    display: flex;
    position: fixed;
    right: 0;
    flex-direction: row;
    justify-content: flex-end;
    padding: 1rem;
    z-index: 99;
}
#popup .popupContent {
     display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

#popup .popupContentWrapper {
    /*width: auto;
    padding: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;*/
    height: 100%;
    min-height: 250px;
    /*max-height: 600px;*/
    overflow-y: auto;
    background: var(--color1);
    width: 100%;
}
#popup .popupStockGroup {
    padding-left: 1rem;
    padding-right: 1rem;
}

.popupClose {
    background: #000;
    padding: .5rem;
    border-radius: 50%;
}

.popupClose svg {
    fill: #fff;
}

#popupCloseBtn {
    cursor: pointer;
    z-index: 10;
    height: 15px;
    width: auto;
}

.popupStock {
    display: none;
}

#popup .btn1 {
    display: inline-flex;
    border: 0 solid transparent;
    background: var(--color3);
    color: var(--color0);
    padding: 0.85rem 1.5rem;
    font-size: 15px;
    transition: background ease .5s;
    cursor: pointer;
    border-radius: 0.2rem;
    text-decoration: none;
}

#popup .yc-form input.r-no:checked+label {
    background-color: var(--color2);
    color: var(--color0);
}

#popup .yc-form input.r-yes:checked+label {
    background-color: var(--color2);
    color: var(--color0);
}

#popup .bloc .yc-form label {
    color: var(--color0);
    text-align: center;
    padding: 0.3em 1.35em;
    border: 1px solid var(--color2);
    text-transform: uppercase;
    font-size: .85em;

}


/*------------------ CLIENTS ------------------*/

.page_clients .container {
    max-width: var(--width2);
    width: 100%;
}

#listClientsTable table {
    width: 100%;
}

#listClientsTable tr {
    cursor: pointer;
}

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

.choixConfirm .btn2 {
    border: 1px solid var(--color1);
    border-radius: .2rem;
    transition: all .5s ease;
}

.choixConfirm .btn2:nth-child(even) {
    margin-left: 1rem;
}

.choixConfirm .btn2:hover, .choixConfirm .btn2:focus {
    background: var(--color1);
    color: #fff;
    transition: all .5s ease;
}

#ajouterClient .formInformation p, #modifierClient .formInformation p, #ajouterResa .formInformation p {
    color: var(--color1);
}

.listeReservationsClient {
    display: flex;
    flex-direction: column;
    max-height: 100px;
    overflow-y: auto;
}

.listeReservationsClient span {
    white-space: pre;
}

.listeReservationsClient .reservationClientItem {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    cursor: pointer;
    margin-bottom: 0.5rem;
}

.listeReservationsClient {    
    font-size: 80%;
}
/*
div[data-stock="modifierClient"] .popupTitle {
    display: flex;
    flex-direction: row;
    align-items: center;
}

div[data-stock="modifierClient"] .popupTitle .theId {
    font-size: 90%;
    color: #aaa;
    margin-left: .7rem;
}
*/
/*------------------ RESERVATIONS ------------------*/

.emarge {
    color: #ccc;
    background: #222;
}






.reservationItem, .clientItem {
    cursor: pointer;
}

#SVGwarn {
    height: 15px;
    width: auto;
    fill: var(--color0);
}

.formField.formFieldNom {
    margin-bottom: 0;
}

.formField.formFieldResultNom {
    margin-top: 0;
}

#theResultNom {    
    position: absolute;
    max-width: calc( var(--width2) - 1rem);
    width: 90%;
    max-height: 90px;
    /* max-height: 600px; */
    overflow-y: auto;
    overflow-x: hidden;
    
}

#theResultNom .clientItem {
    display: flex;
    flex-direction: column;
    /*height: 25px;*/
    background: #333;
    padding-left: .5rem;
    padding-right: .5rem;
    cursor: pointer;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
}

#theResultNom .clientItem:hover, #theResultNom .clientItem:focus {
    background: #252525;
}

#theResultNom .clientItemEmail {
    margin-left: 1rem;
    font-size: 80%;
}

#theResultNom .clientItemNom {
    font-size: 90%;
}

.formField2col .formField {
    margin-bottom: 0;
    margin-top: 0;
}

.formField2col > div {
    margin-right: 1rem;
}

.formField2col > div:last-child {
    margin-right: 0;
}





#SVGvoirprofil {
    height: 20px;
    width: auto;
    fill: var(--color0);
    cursor: pointer;
}

#SVGattente, #SVGvalider, #SVGemargement, #SVGrefuser, #SVGProvenanceEtab, #SVGProvenanceForm, #SVGannuler  {
    height: 12px;
    width: auto;
    fill: var(--color2);
    padding: 1px;
}

#SVGnoshows {
    height: 12px;
    width: auto;
    padding: 1px;
}
/*
#SVGattente.statutAttente, .statutReservationItem.active #SVGattente.statutAttente {
    fill: #e06805;
}

#SVGvalider.statutValider, .statutReservationItem.active #SVGvalider.statutValider{
    fill: #5ddb0b;
}

#SVGemargement.statutEmarger, .statutReservationItem.active #SVGemargement.statutEmarger {
    fill: #5ddb0b;
}

#SVGrefuser.statutRefuser, .statutReservationItem.active #SVGrefuser.statutRefuser {
    fill: #f00;
}

#SVGannuler.statutAnnuler, .statutReservationItem.active #SVGannuler.statutAnnuler {
    fill: #ff0;
}

.statutReservation #SVGvalider.statutValider, .statutReservation #SVGemargement.statutEmarger, .statutReservation #SVGrefuser.statutRefuser, .statutReservation #SVGattente.statutAttente  {
    fill: #999;
}
*/

.fieldVersFicheClient {
    display: flex;
    flex-direction: row;
    font-size: 75%;
    text-transform: uppercase;
    padding: 1rem 0rem;
    align-items: center;
}

.fieldVersFicheClient div:nth-child(2) {
    margin-left: .5rem;
}

.messages h3 {
    margin-bottom: 0;
}

.messages .formField {
    margin-top: .5rem;
    margin-bottom: .5rem;
}


#envoyerRappel {
    padding-left: 0;
}




/* NO SHOW */

#theNSClient p {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#theNSClient svg {
    height: 16px;
    width: auto;
    margin-right: .6rem;
}




/* TDB */



/* NEW */

/* LISTE RESA */

div.reservationItem {
    border-bottom: 1px solid var(--color1);
    margin-top: 0.45rem;
    border-top: 1px solid  var(--color1);
    border-right: 1px solid  var(--color1);
    border-radius: 0.3rem;
    border-left: 1px solid  var(--color1);
}

div.reservationItem_wrapper {
    display: flex;
    flex-direction: row;
}

div.reservationItem_col1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #eee;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-top-left-radius: .3rem;
    border-bottom-left-radius: .3rem;
}

div.reservationItem_col2 {
    padding-bottom: .25rem;
}

div.reservationItemStatut {
    display: inline-flex;
    flex-direction: row;
}
div.reservationItem div.reservationItemStatut > div {
    padding: .25rem;
}




div.reservationItemDate {
    font-weight: bold;
    font-size: 1.05em;
    color: var(--color0);
}

div.reservationItem div.reservationItemNombreDePersonne {
    display: flex;
    flex-direction: row;
    align-items: center;
}

div.reservationItem div.reservationItemNombreDePersonne svg {
    height: 13px;
    width: auto;
    margin-right: .3rem;
    fill: var(--color0);
}

div.reservationItem div.reservationItemNombreDePersonne span {
    font-weight: bold;
    font-size: 1.1em;
    color: var(--color0);
}


div.reservationItem .reservationItemNom, div.reservationItem .reservationItemNote, div.reservationItem .reservationItemInformationsClient {
    padding-left: .5rem;
    padding-right: .5rem;
}

div.reservationItem .reservationItemNote, div.reservationItem .reservationItemInformationsClient {
    font-size: 90%;
    fill: var(--color0);
}

div.reservationItem .reservationItemNote svg, div.reservationItem .reservationItemInformationsClient svg {
    height: auto;
    width: 11px;
    margin-right: .4rem;
}

div.reservationItem .reservationItemNom {
    font-weight: bold;
}







/* STATUT NON DEFINI */
div.reservationItem div.reservationItem_col1, div.reservationItem div.reservationItemStatut > div:nth-child(1) {
    color: var(--color0);
    background: var(--color0);
    fill: var(--color0);
}

div.reservationItem div.reservationItemStatut > div:nth-child(1) {
    border-bottom-right-radius: .2rem;
}

/* STATUT EN ATTENTE */
div.reservationItem.statut1 div.reservationItem_col1, div.reservationItem.statut1 div.reservationItemStatut > div:nth-child(1) {
    color: var(--color0);
    background: rgba(224,104,5,.1);
    
}

div.reservationItem.statut1 #SVGattente {
    fill: rgba(224,104,5,1);
}



/* STATUT VALIDE */
div.reservationItem.statut2 div.reservationItem_col1, div.reservationItem.statut2 div.reservationItemStatut > div:nth-child(1) {
    color: var(--color0);
    background: rgba(93,219,11,.1);
}

div.reservationItem.statut2 #SVGvalider {
    fill: rgba(93,219,11,1);
}



/* STATUT EMARGE */
div.reservationItem.statut3 div.reservationItem_col1, div.reservationItem.statut3 div.reservationItemStatut > div:nth-child(1) {
    color: var(--color0);
    background: rgba(93,219,11,.1);    
}

div.reservationItem.statut3 #SVGemargement {
    fill: rgba(93,219,11,1);
}

div.reservationItem.statut3 .reservationItem_col1, div.reservationItem.statut3 .reservationItem_col1 div.reservationItemDate, div.reservationItem.statut3 .reservationItem_col2, div.reservationItem.statut3 div.reservationItemNombreDePersonne svg, div.reservationItem.statut3 div.reservationItemNombreDePersonne span, div.reservationItem.statut3 .reservationItemNote svg, div.reservationItem.statut3 .reservationItemInformationsClient svg {
    color: var(--color2);
    fill: var(--color2);
}


/*
div.reservationItem.statut3 div.reservationItem_col2, div.reservationItem.statut3 div.reservationItem_col2 svg {
    color: var(--color2);
    fill: var(--color2);
}

div.reservationItem.statut3 div.reservationItem_col2 div.reservationItemStatut > div:nth-child(2) {
    fill: var(--color0);
}
*/
/* STATUT REFUSE */
div.reservationItem.statut4 div.reservationItem_col1, div.reservationItem.statut4 div.reservationItemStatut > div:nth-child(1) {
    color: var(--color2);
    background: rgba(255,0,0,.1);
    fill: var(--color2);
}

div.reservationItem.statut4 #SVGrefuser {
    fill: rgba(255,0,0,1);
}

div.reservationItem.statut4 .reservationItem_col1, div.reservationItem.statut4 .reservationItem_col1 div.reservationItemDate, div.reservationItem.statut4 .reservationItem_col2, div.reservationItem.statut4 div.reservationItemNombreDePersonne svg, div.reservationItem.statut4 div.reservationItemNombreDePersonne span, div.reservationItem.statut4 .reservationItemNote svg, div.reservationItem.statut4 .reservationItemInformationsClient svg {
    color: var(--color2);
    fill: var(--color2);
}





/* STATUT ANNULE */
div.reservationItem.statut5 div.reservationItem_col1, div.reservationItem.statut5 div.reservationItemStatut > div:nth-child(1) {
    color:var(--color0);
    background: rgba(255,255,0,.1);
    fill: var(--color0);
}

div.reservationItem.statut5 #SVGannuler {
    fill: rgba(255,255,0,1);
}

div.reservationItem.statut5 .reservationItem_col1, div.reservationItem.statut5 .reservationItem_col1 div.reservationItemDate, div.reservationItem.statut5 .reservationItem_col2, div.reservationItem.statut5 div.reservationItemNombreDePersonne svg, div.reservationItem.statut5 div.reservationItemNombreDePersonne span, div.reservationItem.statut5 .reservationItemNote svg, div.reservationItem.statut5 .reservationItemInformationsClient svg {
    color: var(--color2);
    fill: var(--color2);
}







.page_reservations .container, .page_tdb .container {
    max-width: var(--width2);
    width: 100%;
}



#listReservations .dateItem, #listReservationsTDB .dateItem {
    margin-bottom: 1rem;
}

#listReservations .dateItem h3, #listReservationsTDB .dateItem h3, .listNotificationsResult .dateItem h3 {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding-top: .5rem;
    padding-bottom: .5rem;
    margin: 0;
    font-size: .9em;
    text-transform: uppercase;
    color: var(--color2);
    background: rgb(32,33,36);
}

.listNotificationsResult .dateItem h3 {
    background: transparent;
}


/* LIST CLIENTS */


#listClients .clientItem {
    border: 1px solid var(--color1);
    margin-top: 0.45rem;
    border-radius: 0.3rem;
}

#listClients .clientItem_wrapper {
    padding: .5rem;
}

#listClients .clientItem h4 {
    margin-top: .0;
    margin-bottom: 0;
}

#listClients .clientItem_L1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .25rem;
}

#listClients .clientItem_L1_svgs {
    display: flex;
    flex-direction: row;
}

#listClients .clientItem_L1_svgs svg {
    margin-left: .4rem;
}


#listClients .clientItem_L2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 90%;
}

#listClients .clientItem_L2 > div:first-child:not(:empty) {
    margin-right: .5rem;
}








/* ------------ HEADER FOOTER ISTOP ---------- */

.isHidden #header, .isHidden #footer {
    display: none;
}








/* ------------ SEARCH RESA CLIENT ------------ */

.filtersSearch_firstLevel {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.filtersSearch_advanced svg, .filtersSearch_reset svg {
    height: 15px;
    fill: #888;
}

.filtersSearchAdvanced label {
    font-size: 85%;
}

.filtersSearch_firstLevel .filtersSearch_firstLevel1 {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.filtersSearch_firstLevel .filtersSearch_firstLevel1 > div:nth-child(1) {
    width: 100%;
}


.filtersSearch input[type="text"], .filtersSearch input[type="email"], .filtersSearch input[type="tel"]  {
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid var(--color1);
    border-radius: .3rem;
    padding-top: .8rem;
    padding-bottom: .8rem;
    padding-right: .8rem;
    padding-left: .8rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: .9em;
    opacity: 1;
    color: var(--color5);
    
}

.filtersSearch select {
    padding: .8rem;
    border: 1px solid var(--color1);
    border-radius: .3rem;
    -webkit-appearance: none;
    background: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: .9em;
    opacity: 1;
    color: var(--color5);
}


.filtersSearch  input[type="date"] {
    padding: 0.5rem;
    padding-top: 0.4rem;
    padding-bottom: 1rem;
    border: 1px solid var(--color1);
    border-top: 0;
    border-bottom-left-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;
    background: transparent;
    color: var(--color5);
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: .9em;
    /* min-width: 100px; */
    opacity: 1;
    width: 100%;
    min-height: 2em;
    margin: 0;
}

.filtersSearch  .fieldDate label {
    border: 1px solid var(--color1);
    border-top-left-radius: .3rem;
    border-top-right-radius: .3rem;
    border-bottom: 0;
    padding-left: .8rem;
    padding-right: .8rem;
    padding-top: .8rem;
    text-transform: none;
    color: var(--color5);
}



.filtersSearch #labSearchNom input[type="text"] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: .3rem;
    border-bottom-left-radius: .3rem;
    padding-left: 2.3rem;
    padding-top: .8rem;
    padding-bottom: .8rem;
    padding-right: 1rem;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: .9em;
    color: var(--color5);
}

.filtersSearch label {
    position: relative;
    margin-top: 0;
}

.filtersSearch label#labSearchNom:before {
    content: "";
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 20px;
}

.filtersSearch #labSearchNom:before {
    background: url(/public/images/picto-search.svg) center / contain no-repeat;
}

.searchValueInfo {
    margin-left: .35rem;
}


.searchValueInfo svg {
    fill: #2c5bdd;
    height: 14px;
    width: auto;
}




div#validSearch {
    position: relative;
    cursor: pointer;
    padding-top: 0.8rem;
    padding-bottom: .8rem;
    padding-left: .5rem;
    padding-right: .5rem;
    background: var(--color1);
    border-top-right-radius: .3rem;
    border-bottom-right-radius: .3rem;
}

div#validSearch > span {
    position: relative;
    padding-top: 0.8rem;
    padding-bottom: .8rem;
    padding-left: .5rem;
    padding-right: .5rem;
}


div.filtersSearchAdvancedOpenClose {
    position: relative;
    font-size: 90%;
    color: color: var(--color0);
    padding-top: 1rem;
    padding-bottom: 1rem;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

div.filtersSearchAdvancedWrapper {
    background: var(--color3);
    padding: 1rem;
}

div.filtersSearchAdvancedWrapper > * {
    margin-top: .5rem;
    margin-bottom: .5rem;
}



.filtersSearch .field2Col {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.filtersSearch .fieldDate {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.filtersSearch .fieldDate label {
    text-align: left;
}

.filtersSearch .fieldDate > *:nth-child(2) {
    margin-left: 1rem;
}

.filtersSearch .field2Col > * {
    max-width: 48%;
}


.filtersSearch #resetSearch {
    padding: 1rem;
    font-size: 90%;
    cursor: pointer;
}































/*
.formFieldInfoClient, .formFieldInfoClient label, .formFieldInfoClient p {
    margin-top: .5rem;
}
*/



/* ----------- FICHE RESERVATION NEW ------------ */

#popup input::-webkit-contacts-auto-fill-button {
    visibility: hidden;
    display: none !important;
    pointer-events: none;
    position: absolute;
    right: 0;
  }







#popup h2 {
    margin-bottom: 0;
}

#popup .bloc {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    width: 100%;
    position: relative;
}

#popup .bloc label {
    font-size: 90%;
    text-transform: none;
    margin-top: .5rem;
    display: block;
    cursor: pointer;

}

#popup .popupTitle {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}

#popup .popupTitle .pictoProvenance {
    /*margin-left: .5rem;
    margin-right: .5rem;*/
    margin-bottom: .3rem;
}

#popup .popupTitle .theId {
    margin-bottom: .1rem;
}

#popup .popupTitle > * {
    margin-right: .5rem;
}

#popup .popupTitle > *:last-child {
    margin-right: 0;
}


#popup .blocTelMail {
    display: flex;
    flex-direction: row;
    width: 100%;
}

#popup .blocTelephone {    
    margin-right: 1rem;
}

#popup .blocTelephone input {
    max-width: 170px;
}

#popup .blocEmail {
    width: 100%;
}

#popup .lienVersFicheClient {
    position: absolute;
    right: 0;
    bottom: 0.4rem;
}

#popup .blocInfoClient p {
    margin-top: 0.4rem;
    margin-bottom: .4rem;
}



#popup input[type="date"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0px solid transparent;
    background: transparent;
    border-bottom: 1px solid #444;
    border-radius: 0;    
    font-size: 14px;
    font-family: 'Source Sans Pro', sans-serif;
    padding-top: .4rem;
    padding-bottom: .4rem;
    padding-left: 0;
    padding-right: 0;
    min-width: 130px;
    opacity: 1;
    min-height: 2.5em;
    font-weight: 300;
}


#popup .blocDateHeureNombre {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
}

#popup .blocDateHeureNombre > div {
    margin-right: 1rem;
}

#popup .blocDateHeureNombre > div:last-child {
    margin-right: 0;
}

#popup input[type="time"], #popup input[type="number"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: .4rem;
    padding-left: 0;
    padding-right: 0;
    border: 0px solid transparent;
    border-bottom: 1px solid #444; 
    font-family: 'Source Sans Pro', sans-serif;
    background: transparent; 
    border-radius: 0;   
    width: 100%;
    font-size: 14px;
    opacity: 1;
    font-weight: 300;
    min-height: 2.5em;
}

#popup input[type="text"], #popup input[type="tel"] {
    padding: 0.4rem;
    border: 0px solid transparent;
    -webkit-appearance: none;
    background: transparent;
    border-bottom: 1px solid #444;
    font-family: 'Source Sans Pro', sans-serif;
    padding-left: 0;
    padding-right: 0;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    font-size: 15px;
    opacity: 1;
    font-weight: 300;
}

#popup textarea {
    width: 100%;
    max-width: 100%;
    padding: 0.4rem;
    padding-right: 0.4rem;
    padding-left: 0.4rem;
    border: 0px solid transparent;
    border-bottom-color: transparent;
    border-bottom-style: solid;
    border-bottom-width: 0px;
    -webkit-appearance: none;
    background: transparent;
    border-bottom: 1px solid #444;
    padding-left: 0;
    padding-right: 0;
    font-size: 15px;
    font-family: 'Source Sans Pro', sans-serif;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-weight: 300;
}

#popup #theNbrPers {
    max-width: 70px;
}

#popup .blocStatut span {
    padding-top: 0.5rem;
    display: block;
    font-size: 90%;
    text-transform: none;
}

#popup .blocStatut label {
    text-transform: uppercase;
    font-size: 80%;
}

#popup .statutReservation {
    padding-top: .4rem;
    padding-bottom: .4rem;
}

#popup .blocMessages {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#popup .blocMessages label, #popup .blocMessages .yc-form label {
    margin-top: 0;
}




#popup #theSearchNom .resultClientsItems {
    position: absolute;
    max-height: 50vh;
    overflow: auto;
    background: var(--color2);
    width: calc( 100% - 2rem);
    margin-top: -1.5rem;
    padding-bottom: .5rem;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    z-index: 1;
    cursor: pointer;
}

#popup .resultClientsItem {
    margin-top: .5rem;
    margin-bottom: .5rem;
    padding-left: .5rem;
    padding-right: .5rem;
}

#popup .resultClientsItemNom {
    font-size: 90%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

#popup .resultClientsItemNom svg {
    height: 12px;
    width: auto;
    margin-left: .4rem;
}

#popup .resultClientsItemTelMail {
    display: flex;
    flex-direction: row;
    width: 100%;
    font-size: 80%;
}

#popup .resultClientsItemTelMail > div:first-child {
    margin-right: 1rem;
}


#popup .resetResultItems {
    position: absolute;
    right: 0;
    bottom: 0.4rem;
    z-index: 1;
    cursor: pointer;
}

#popup .resetResultItems svg {
    height: 18px;
    width: auto;
    fill: var(--color0);
}


#popup div.statutReservationItem.active[value="1"], #popup div.statutReservationItem.active[value="1"] svg {
    color: #e06805;
    fill: #e06805;
}

#popup div.statutReservationItem.active[value="2"], #popup div.statutReservationItem.active[value="2"] svg {
    color: #5ddb0b;
    fill: #5ddb0b;
}


#popup div.statutReservationItem.active[value="3"], #popup div.statutReservationItem.active[value="3"] svg {
    color: #5ddb0b;
    fill: #5ddb0b;
}

#popup div.statutReservationItem.active[value="4"], #popup div.statutReservationItem.active[value="4"] svg {
    color: #f00;
    fill: #f00;
}


/*------ statut ----------*/

#popup .statutReservation {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#popup .statutReservation > div {
    display: flex;
    flex-direction: column;    
    padding: .5rem;
}

#popup .statutReservation > div:first-child {
    padding-left: 0;
}

#popup .statutReservation > div:last-child {
    padding-right: 0;
}

#popup .reservationAnnulee div.statutReservationItem, #popup .reservationAnnulee div.statutReservationItem svg  {
    color: #e8dc03;
    fill: #e8dc03;
    
}

#popup .infoResaAnnulee {
    color: #e8dc03;
    font-size: 80%;
}


#popup .statutReservationItem {
    cursor:pointer;
}




#popup div.statutReservationItem[value="5"] {
    display: none;
}

#popup .messages h3 {
    margin: 0;
}


#popup .messagesTitle {
    display: flex;
    flex-direction: row;
    align-items: top;
    justify-content: space-between;
}


#popup #btnEnvoyerRappel {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: .5rem 1rem;
    border-radius: 1rem;
    background: var(--color2);
    color: #fff;
    border: 0;
    border-style: none;
    cursor: pointer;
    font-size: .9em;
}







#popup .reservationClientItem svg {
    height: 12px;
    width: auto;
    margin-right: .3rem;
    fill: var(--color0);
}

#popup .listeReservationsClient .reservationClientItem > div {
    display: flex;
    flex-direction: row;
    align-items: center;
}


#popup  h4 {
    margin-bottom: 0.4rem;
}



/*
#SVGemargement {
    height: 20px;
    width: auto;
    fill: var(--color0);
}

#SVGemargement.emargementOK {
    fill: #5ddb0b;
}*/

.formFieldInline {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 2rem;
}
.formFieldInline label {
    margin-top: 0;
}
.formFieldInline input {
    margin-left: .5rem;
}

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

.fieldL1 .reservationNombre {
    margin-left: .85rem;
}

.fieldL3 {
    display: flex;
    flex-direction: row;
    position: absolute;
    top: .75rem;
    right: 1rem;
}

.fieldL3 > div {
    margin-left: .5rem;
}

/*------------------ LISTE MESSAGES ------------------*/

.listeMessages {
    display: flex;
    flex-direction: column;
    max-height: 100px;
    overflow-y: auto;
}

.listeMessages .messageItem {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 80%;
}

.listeMessages .messageItem span:nth-child(1) {
    width: 100px;
}

.listeMessages .messageItem span:nth-child(2) {
    width: 75px;
}

.listeMessages .messageItem span:nth-child(3) {
    width: 45px;
}

.listeMessages .messageItem span:nth-child(4) {
    width: 60px;
}

/*------------------ PAGINATION ------------------*/

#pagination ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 0;
    padding: 0;
}

#pagination li {
    list-style: none;
    margin-left: .25rem;
    margin-right: .25rem;
}

#pagination li a {
    padding: .5rem 1rem;
    background: var(--color3);
    color: #fff;
    text-decoration: none;
}

#pagination li a.active {
    color: #e815e6;
} 


/*------------------ FILTRES DE RECHERCHE ------------------*/
/*
.filtersSearch {
    background: #111;
    padding: 1rem;
}

.filtersSearchWrapper {
    max-width: 350px;
    margin: auto;
}

.filtersSearch input[type="text"] {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.filtersSearchAdvanced {
    margin-top: 1rem;
}

.filtersSearchActions {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
*/
.hide {
    display: none;
}

.show {
    display: block;
}
/*
.field2Col {
    display: flex;
    flex-direction: column;
    
}
*/
/*------------------ ETATS ------------------*/

.etatsItemWrapper {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
}

.etatCol:before {
    content:attr(data-label);
}

.etatCol {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    
}

.enteteItems {
    display: none;
}



.enteteItems svg {
    fill: #fff;
    height: 20px;
    width: auto;
    margin: 0.25rem;
}

.etatsItems {
    margin-bottom: .5rem;
    margin-top: .5rem;
    position: relative;
    background: #222;
    padding: .5rem;
    border-radius: .3rem;
}

.etatsItem {
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
    margin-bottom: 1rem;
    position: relative;
    width: 100%;
}

.etatsItemTotInter {
    font-weight: bold;
}

.etatsItemTot {
    font-weight: bold;
    text-transform: uppercase;
}

.etatsItemNbrTotalResa, .etatsItemNbrTotalPersonnes {
    font-weight: bold;
}


.page_etats select {
    width: auto;
}

.page_etats #filtersEtats {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.page_etats #filtersEtats .filterGroup {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.page_etats #filtersEtats .filterGroup > * {
    margin-left: .5rem;
    margin-right: .5rem;
}

.etatsItem.etatsItemTot {
    margin-top: 2rem;
    margin-bottom: 2rem;
} 


.page_etats #listEtats {
    width: 100%;
    position: relative;
    width: 90vw;
}







/*------------------ NOTIFICATIONS ------------------*/

.menu a.openNotifications {
    display: none;
}


.listNotifications {
    display: none;
}

.listNotifications .container {
    margin-top: 0;
}

.listNotifications .containerWrapper {
    height: 100%;
    overflow-y: auto;
    margin: 0;
    padding-left: 1rem;
    padding-right: 1rem;
}




.notificationsHeader {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: .5rem;
    padding-bottom: 1rem;
    align-items: center;
}

.notificationsOpen .listNotifications {
    display: block;
    position: fixed;
    top: 60px;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(15,15,15,0.95);
}

#notificationsCloseBtn {
    cursor: pointer;
    z-index: 10;
    height: 15px;
    width: auto;
}

.notificationsClose {
    background: #fff;
    padding: 0.5rem;
    border-radius: 50%;
}

.notificationItem {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    
    border: 1px solid transparent;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    background: #151515;
    position: relative;
}

.notificationContent {
     padding: 0.5rem 1rem;
    font-size: 90%;
    display: flex;
    align-items: center;
}

.notificationItem #SVGtrash {
    height: 15px;
    width: auto;
    fill: #fff;    
}

.notificationItem  .notificationDelete {
    cursor: pointer;
    padding: 1rem;
    border-top-right-radius: .5rem;
    border-bottom-right-radius: .5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f00;
}

.notificationItem  .notificationDelete:hover, .notificationItem  .notificationDelete:focus {
    background: #f00;
    transition: all ease .5s;
}

.notificationItem  .notificationDelete:hover #SVGtrash, .notificationItem  .notificationDelete:focus #SVGtrash {
    fill: #fff;
}


.notificationDate {
    color: #888;
}

.notificationItem[notification-type="Réservation"] .notificationContent {
    cursor: pointer;
}

.notificationItem[notification-type="Réservation"][notification-niveau="0"] {
    border: 1px solid #5ddb0b;
}

.notificationItem[notification-type="Réservation"][notification-niveau="1"] {
    border: 1px solid #e06805;
}

.notificationItem[notification-type="Réservation"][notification-niveau="2"] {
    border: 1px solid #ff0;
}

.notificationsFooter {
    margin-top: 1rem;
    margin-bottom: 1rem;
}


.notificationsContentHeader {
    display: flex;
    justify-content: center;
}

.btnDeleteAllNotifications {
    padding-top: 1rem;
    padding-bottom: 1rem;
    cursor: pointer;
}

.notificationNoResult {
    padding: 1rem;
}

.listNotificationsResult .dateItem h3 {
    text-align: left;
}


svg.blink {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}




/*------------------ DIALOG ------------------*/


.confirmDialog {
    display: none;
}


.openDialog .confirmDialog {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.85);
    z-index: 999999;
}

.confirmDialogWrapper {
    color: #fff;
    background: #222;
    padding: 2rem;
}

.confirmDialogFooter {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 2rem;
}

.confirmDialogBtn {
    cursor: pointer;
    padding: 0.5rem;
}





/*------------------ HIGHLIGHT ------------------*/

div#highlight {
    z-index: 99999;
    display: none;
    position: fixed;
    bottom: 0;
    /* margin-left: 1rem; */
    /* margin-right: 1rem; */
    /* border-radius: 0.3rem; */
    right: 0;
    left: 0;
    padding: 1rem;
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
}

div#highlight_wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

div#highlight_message p {
    margin-top: .5rem;
    margin-bottom: .5rem;
    margin-left: 1rem;
    margin-right: 1rem;
} 

div#highlight.error {
    background: #f00;
    color: #fff;
}

div#highlight.success {
    background: #1aaf0b;
    color: #fff;
}

#highlight_close {
    cursor: pointer;
    margin: .5rem;
}
#highlight_close svg {
    height: 30px;
    width: 30px;
    fill: #fff;
}


@media screen and (min-width: 768px) {
    
    .menu a span {
        display: block;
    }
    
    
    
    
    
    .formField2-1col {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
   
    #theResultNom .clientItem {
        display: flex;
        flex-direction: row;
        align-items: center;
        /*height: 25px;*/
        background: #333;
        padding-left: .5rem;
        padding-right: .5rem;
        cursor: pointer;
    }
    
    .fieldVersFicheClient {
        justify-content: center;
        align-items: center;
    }
    
    /* ETATS */
    
    .etatsItemWrapper, .enteteItems {
        display: flex;
        flex-direction: row;
    }
    .etatCol:before {
        content:none;
    }
    
    .etatsItem {
        margin-top: 0;
        margin-bottom: 0;
    }
    
    .page_etats #listEtats {
        width: 100%;
    }
    
    .enteteItems {
        display: flex;
        flex-direction: row;
    }
    
    .etatCol {
        justify-content: center;
    }
    
    .etatCol1 {
        width: 5rem;
    }

    .etatCol2 {
        width: 5rem;
    }

    .etatCol3 {
        width: 5rem;
    }

    .etatCol4 {
        width: 5rem;
    }

    .etatCol5 {
        width: 5rem;
    }

    .etatCol6 {
        width: 5rem;
    }

    .etatCol7 {
        width: 5rem;
    }

    .etatCol8 {
        width: 5rem;
    }

    
    
    .field2Col {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    
    .fieldVersFicheClient {
        display: flex;
        flex-direction: column;
        font-size: 75%;
        text-transform: uppercase;
        padding: 1rem 0rem;
        width: 90px;
    }
    
    #SVGvoirprofil {
        margin-bottom: .5rem;
    }
    /*
    .formFieldInfoClient {
        margin-top: 1.5rem;
    }
    */
    
    .notificationItem #SVGtrash {
        fill: #888;    
    }

    .notificationItem  .notificationDelete {
        background: transparent;
    }
    
}

/*------------------ TABLE RESPONSIVE ------------------*/

@media (max-width: 700px){
    
    .tableResponsive thead {
        display: none;
    }
    .tableResponsive tr{
        display: flex;
        flex-direction: column;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }
    .tableResponsive td {
        display: block;
        text-align: right;
    }
    .tableResponsive td:before {
        content: attr(data-label);
        float: left;
    }
    
    .tableResponsive td, .tableResponsive th {
        padding-top: .15rem;
        padding-bottom: .15rem;
    }
    
}



/* LOADER */

.loader {
    position: fixed;
    display: none;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.5);
    z-index: 99999;
}

.loaderWrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}