/*
* This file handle custom CSS for ML Longwy website
*
* we add some CSS for event reservation elements
*/

div.reservations-admin-modal > div.modal-content .reservation-manual-confirm-container > form.forminator-custom-form:before {
  position: absolute;
  content: 'Cliquez sur un bouton de confirmation d\'inscription pour initialiser le formulaire';
  top: -32px;
  left: -32px;
  width: 100%;
  height: 100%;
  z-index : 100;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.85);
  padding: 32px;
  transition: 400ms all ease-in-out;
}
div.reservations-admin-modal > div.modal-content .reservation-manual-confirm-container > form.forminator-custom-form.confirmation-begin:before {
  content: '';
  background-color: rgba(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  top: 0;
  left: 0;
  padding: 0;
}

div.reservations-admin-modal > div.modal-content .reservation-manual-confirm-container > div.forminator-edit-module {
  display: none;
}

/*Disabled option style*/
.forminator-select.forminator-select-dropdown-container--open .forminator-select-dropdown.forminator-dropdown--material .select2-results .select2-results__options .select2-results__option.select2-results__option--disabled {
  cursor: not-allowed;
  background-color: #aeaeae;
}

/*Consent checkbox text correction*/
form.forminator-custom-form .forminator-field .forminator-checkbox__wrapper > div.forminator-consent__label > p {
  margin: 0;
}

/*Modify date display*/
#cpt-post-details > div.dates-container span.event-date {
  display: none;
  padding: 8px 6px;
}

form.forminator-custom-form div.form-date-choosed {
  width: max-content;
  padding: 6px 8px;
  background-color: var(--featured-color-darker);
  border-radius: 8px;
}
form.forminator-custom-form div.form-date-choosed > p.dyn-txt {
  margin: 0;
  color: var(--light-txt-color);
}

/*NEW style*/
#cpt-post-details > div.dates-container .reservation-status {
  position: relative;
  padding: 6px 12px;
  margin-bottom: 12px;
}

#cpt-post-details > div.dates-container .reservation-status:before {
  content: '';
  position: absolute;
  top: 10px;
  left: -8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--featured-color);
}

#cpt-post-details > div.dates-container .actions-info-txt {
  text-align: center;
  padding: 0px 24px 6px 24px;
  font-size: 0.9rem;
}

.cpt-post-single #cpt-post-details .dates-container .event-dates-list li.resa-active {
  margin-bottom: 8px;
}
.cpt-post-single #cpt-post-details .dates-container .event-dates-list li > span {
  display: inline-block;
  font-size: 0.8rem;
  line-height: 16px;
}

#cpt-post-details > div.dates-details-container {
  position: absolute;
  width: 0;
  height: 0;
  background-color: var(--featured-color);
  z-index: 402;
  transition: 400ms all ease-in-out;
}
#cpt-post-details > div.dates-details-container > span#close-dates-details {
  position: absolute;
  left: 12px;
  top: 8px;
  padding: 4px 8px;
  color: var(--light-txt-color);
  border: 1px solid;
  cursor: pointer;
  display: none;
}
#cpt-post-details > div.dates-details-container > .resa-form-container {
  width: 90%;
  left: -5%;
  padding: 12px 24px;
  display: none;
}

#cpt-post-details > div.dates-details-container > .resa-form-container p.resa-form-prefix-txt {
  color: var(--light-txt-color);
}

#cpt-post-details > div.dates-details-container > .resa-form-container div.daily-planning {
  background-color: var(--featured-color-darker);
  margin-right: 48px;
}

#cpt-post-details > div.dates-details-container > .resa-form-container div.daily-planning h3,
#cpt-post-details > div.dates-details-container > .resa-form-container div.daily-planning h4,
#cpt-post-details > div.dates-details-container > .resa-form-container div.daily-planning p,
#cpt-post-details > div.dates-details-container > .resa-form-container div.daily-planning span {
  text-align: left;
  color: var(--light-txt-color);
  transition: 300ms all ease-in-out;
}

#cpt-post-details > div.dates-details-container > .resa-form-container form {
  display: none;
  opacity: 1;
  transition: 400ms opacity ease-in-out;
}

#cpt-post-details > div.dates-details-container > .resa-form-container div.daily-planning p.indicative-txt {
  font-size: 0.9rem;
  margin-top: 0;
}

#cpt-post-details > div.dates-details-container > .resa-form-container div.daily-planning div.day-planning {
  margin: 12px;
  padding: 6px 12px;
  border: 1px solid var(--light-txt-color);
  cursor: pointer;
  background-color: initial;
  transition: 400ms all ease-in-out;
}
#cpt-post-details > div.dates-details-container > .resa-form-container div.daily-planning div.day-planning > span.selected-indicator {
  font-size: 0.8rem;
  border-radius: 8px;
}
#cpt-post-details > div.dates-details-container > .resa-form-container div.daily-planning div.day-planning.resa-unavailable {
  border: 1px solid var(--alt-bg);
  background-color: #7f7f7f;
  cursor: not-allowed;
}
#cpt-post-details > div.dates-details-container > .resa-form-container div.daily-planning div.day-planning.resa-unavailable p {
  font-size: 0.9rem;
}

#cpt-post-details > div.dates-details-container > .resa-form-container div.daily-planning div.day-planning:not(.resa-unavailable):hover,
#cpt-post-details > div.dates-details-container > .resa-form-container div.daily-planning div.day-planning.active {
  background-color: var(--light-txt-color);
}
#cpt-post-details > div.dates-details-container > .resa-form-container div.daily-planning div.day-planning:not(.resa-unavailable):hover h3,
#cpt-post-details > div.dates-details-container > .resa-form-container div.daily-planning div.day-planning:not(.resa-unavailable):hover h4,
#cpt-post-details > div.dates-details-container > .resa-form-container div.daily-planning div.day-planning:not(.resa-unavailable):hover p,
#cpt-post-details > div.dates-details-container > .resa-form-container div.daily-planning div.day-planning:not(.resa-unavailable):hover span:not(.selected-indicator),
#cpt-post-details > div.dates-details-container > .resa-form-container div.daily-planning div.day-planning.active h3,
#cpt-post-details > div.dates-details-container > .resa-form-container div.daily-planning div.day-planning.active h4,
#cpt-post-details > div.dates-details-container > .resa-form-container div.daily-planning div.day-planning.active p,
#cpt-post-details > div.dates-details-container > .resa-form-container div.daily-planning div.day-planning.active span {
  color: var(--dark-txt-color);
}

#cpt-post-details > div.dates-details-container > .resa-form-container div.daily-planning div.day-planning span.selected-indicator {
  position: absolute;
  top: 6px;
  right: 6px;
  border: 1px solid;
  padding: 0 6px;
  background-color: green;
  color: var(--light-txt-color);
  opacity: 0;
  transition: 400ms opacity ease-in-out;
}

#cpt-post-details > div.dates-details-container > .resa-form-container div.daily-planning div.day-planning.active span.selected-indicator {
  opacity: 1;
}

#cpt-post-details > div.dates-details-container > .resa-form-container form {
  padding: 6px 12px;
  background: var(--alt-bg);
  border-radius: 8px;
}

#cpt-post-details > div.dates-details-container.show-dates {
  width: 100%;
  height: 100%;
}
#cpt-post-details > div.dates-details-container.show-dates > span#close-dates-details {
  display: block;
  left: 12px;
}
#cpt-post-details > div.dates-details-container.show-dates > .resa-form-container {
  display: block;
  left: 5%;
  height: 416px;
  overflow-y: auto;
}

/*OVERWRITE/SURCHARGE parent style*/
.cpt-post-single #cpt-post-details .leaflet-container .leaflet-map#leaflet-map-event-single {
  height: 100%;
  min-height: 440px;
}

/*Admin ONLY elements*/
.reservations-admin-modal {}
.reservations-admin-modal ul {list-style: none; padding-left: 0;}

.reservations-admin-modal ul.collapsible > li > div.collapsible-header span.admin-resa-count {
  font-size: 0.9rem;
  padding-left: 12px;
}

.reservations-admin-modal ul.collapsible > li > div.collapsible-body div.reservation-users-table {
  max-height: 240px;
  padding-left: 24px;
  margin-bottom: 82px;
  overflow-y: auto;
}
.reservations-admin-modal ul.collapsible > li > div.collapsible-body div.reservation-users-table div.user-line {
  padding: 12px 0;
  border-bottom: 1px solid;
}
.reservations-admin-modal ul.collapsible > li > div.collapsible-body div.reservation-users-table div.user-line .user-data.single {

}
.reservations-admin-modal ul.collapsible > li > div.collapsible-body div.reservation-users-table div.user-line span.session-hours {
  font-size: 0.9rem;
}