/*
* This file handle custom CSS for MdF Nancy website
* we add some CSS for FRONT-END event reservation elements
*/

.modal.reservations-admin-modal {
  width: 75%;
}
.modal.reservations-admin-modal .admin-management-modal-title {
  margin-bottom: 48px;
}

div.remseo-er-admin-ctas > a.material-cta:first-child {
  margin-right: 24px;
}

div.reservation-manual-confirm-container {
  margin-top: 3rem;
}

div.reservation-manual-confirm-container > form {
  padding: 12px 24px !important;
  background-color: var(--featured-color-lighter);
  border-radius: 12px !important;
}
div.reservations-admin-modal > div.modal-content .reservation-manual-confirm-container > form.updating div.forminator-field.forminator-is_filled {
  filter: blur(4px);
}

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

/*Custom readOnly*/
div.reservations-admin-modal > div.modal-content .reservation-manual-confirm-container div.forminator-row:not(.forminator-hidden) div.custom-readonly .forminator-field:before {
  content: '';
  position: absolute;
  display: block;
  top: 20px;
  left: 0;
  width: 100%;
  height: calc(100% - 20px);
  z-index: 10;
  background-color:rgba(191, 191, 191, 0.5);
}

/* .modal.reservations-admin-modal .modal-content {} */
.modal.reservations-admin-modal .modal-content .header-infos .admin-management-header {font-size: 1rem;}

/*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);
}
form.forminator-custom-form div.form-date-choosed > em {
  color: var(--light-txt-color);
  font-size: 14px;
}

form.forminator-custom-form .forminator-field-radio label.mdfncy-disabled > span.forminator-radio-label {
    color: #828282;
}
form.forminator-custom-form .forminator-field-radio label.mdfncy-disabled > span.forminator-radio-bullet {
    background-color: #bfbfbf;
}

/*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: relative;
  width: 100%;
  height: auto;
  background-color: var(--featured-color);
}
h3 {
  color: var(--light-txt-color);
  margin: 16px auto;
}
span#close-dates-details {
  position: relative;
  left: 12px;
  top: 8px;
  padding: 4px 8px;
  color: var(--light-txt-color);
  border: 1px solid;
  cursor: pointer;
}
.registrations-container {
  width: 90%;
  padding: 12px 24px;
  margin: 0 auto;
}

.registrations-container p.init-form-txt {
  color: var(--light-txt-color);
}

.registrations-container p.resa-form-prefix-txt {
  color: var(--light-txt-color);
}

#cpt-post-details .registrations-container div.daily-planning > #post-event-planning {
  background-color: var(--featured-color-darker);
  height: 100%;
  max-height: 360px;
  padding: 12px 16px;
  max-width: 490px;
  border-radius: 8px;
  overflow-y: auto;
}
#cpt-post-details .registrations-container div.daily-planning > #post-event-planning #first-click-indicator {
  font-size: 0.9rem;
  font-style: italic;
}

.registrations-container div.daily-planning h3,
.registrations-container div.daily-planning h4,
.registrations-container div.daily-planning p,
.registrations-container div.daily-planning span {
  text-align: left;
  color: var(--light-txt-color);
  transition: 300ms all ease-in-out;
}

.registrations-container div.daily-planning p.indicative-txt {
  font-size: 0.9rem;
  margin-top: 0;
}

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

.registrations-container div.daily-planning div.day-planning span.available {
  margin: 0;
  padding: 0;
  background-color: transparent;
  border-radius: 8px;
  transition: 400ms all ease-in-out;
}

.registrations-container div.daily-planning div.day-planning:not(.resa-unavailable):hover,
.registrations-container div.daily-planning div.day-planning.active {
  background-color: var(--light-txt-color);
}
.registrations-container div.daily-planning div.day-planning:not(.resa-unavailable):hover h3,
.registrations-container div.daily-planning div.day-planning:not(.resa-unavailable):hover h4,
.registrations-container div.daily-planning div.day-planning:not(.resa-unavailable):hover p,
.registrations-container div.daily-planning div.day-planning:not(.resa-unavailable):hover span:not(.selected-indicator, .waiting-choice, .selected),
.registrations-container div.daily-planning div.day-planning.active h3,
.registrations-container div.daily-planning div.day-planning.active h4,
.registrations-container div.daily-planning div.day-planning.active p {
  color: var(--dark-txt-color);
}

.registrations-container div.daily-planning div.day-planning.active span.available,
.registrations-container div.daily-planning div.day-planning.active span.unavailable {
  position: relative;
  margin: 16px 0;
  padding: 12px;
  background-color: var(--featured-color-darker);
  transition: 400ms all ease-in-out;
}
.registrations-container div.daily-planning div.day-planning.active span.available {
  color: var(--light-txt-color);
  cursor: pointer;
}
.registrations-container div.daily-planning div.day-planning.active span.unavailable {
  color: var(--alt-bg) !important;
  cursor: not-allowed;
}
.registrations-container div.daily-planning div.day-planning.active span.available:after {
  content: 'Sélectionné';
  position: absolute;
  top: 6px;
  right: calc(50% - 45px);
  font-size: 0.9rem;
  width: 0;
  height: 0;
  opacity: 0;
  border-bottom: 1px solid;
  transition: 400ms all ease-in-out;
}

.registrations-container div.daily-planning div.day-planning.active span.available.selected {
  /* color: var(--dark-txt-color); */
  background-color: var(--featured-color);
  padding-top: 32px;
  cursor: default;
}
.registrations-container div.daily-planning div.day-planning.active span.available.selected:after {
  width: auto;
  height: auto;
  opacity: 1;
}

.registrations-container 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;
}
.registrations-container div.day-planning.active span.selected-indicator {
  opacity: 1;
}

.registrations-container div.day-planning span.select-hours-indicator {
  position: relative;
  width: 0;
  height: 0;
  opacity: 0;
  color: var(--dark-txt-color);
  font-size: 0.8rem;
  transition: 400ms all ease-in-out;
}
.registrations-container div.day-planning.active span.select-hours-indicator {
  width: auto;
  height: max-content;
  opacity: 1;
}
.registrations-container div.day-planning:hover span.select-hours-indicator {color: var(--dark-txt-color);}

.registrations-container div#event-regist-form-container form {
  padding: 24px 12px 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 > .registrations-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 ul {list-style: none; padding-left: 0;}

.reservations-admin-modal div.resa-listing-header span.admin-resa-count {
  display: block;
  width: 100%;
  margin: 0 auto;
  font-size: 0.9rem;
  text-align: center;
}

.reservations-admin-modal div.resa-listing-body {
  margin: 12px auto 24px auto;
}

.reservations-admin-modal div.resa-listing-body div.reservation-users-table {
  max-height: 240px;
  padding-left: 24px;
  margin-bottom: 82px;
  overflow-y: auto;
}
.reservations-admin-modal div.resa-listing-body div.reservation-users-table div.user-line {
  padding: 12px 0;
  border-bottom: 1px solid;
}
.reservations-admin-modal div.resa-listing-body div.reservation-users-table div.user-line span.availability-infos {
  font-size: 0.9rem;
  text-align: left;
  padding-left: 16px;
}
.reservations-admin-modal div.resa-listing-body div.reservation-users-table div.user-line.updating,
.reservations-admin-modal div.resa-listing-body div.reservation-users-table div.user-line.updated {
  background-color: var(--featured-color-lighter);
}
.reservations-admin-modal div.resa-listing-body div.reservation-users-table div.user-line.updating a.remseo-er-admin-cta,
.reservations-admin-modal div.resa-listing-body div.reservation-users-table div.user-line.updated a.remseo-er-admin-cta {
  display: none;
}
.reservations-admin-modal div.resa-listing-body div.reservation-users-table div.user-line span.active-label,
.reservations-admin-modal div.resa-listing-body div.reservation-users-table div.user-line span.done-label {
  color: var(--dark-txt-color);
  opacity: 0;
  display: none;
  height: 0;
  width: 0;
  font-size: 0.9rem;
  transition: 400ms all linear;
}
.reservations-admin-modal div.resa-listing-body div.reservation-users-table div.user-line.updating span.active-label {
  display: block;
  opacity: 1;
  height: auto;
  width: auto;
}
.reservations-admin-modal div.resa-listing-body div.reservation-users-table div.user-line.updated span.done-label {
  display: block;
  opacity: 1;
  height: auto;
  width: auto;
}

.reservations-admin-modal div.resa-listing-body div.reservation-users-table div.user-line a.inline-url,
.reservations-admin-modal div.resa-listing-body div.reservation-users-table div.user-line span.session-hours {
  font-size: 0.9rem;
}
.reservations-admin-modal div.resa-listing-body div.reservation-users-table div.user-line > div {
  padding: 0 16px;
}
.reservations-admin-modal div.resa-listing-body div.reservation-users-table div.user-line > div:not(:first-child) {
  text-align: center;
}
.reservations-admin-modal div.resa-listing-body div.reservation-users-table div.user-line span.user-data {
  word-wrap: break-word;
}

.reservations-admin-modal div.resa-listing-body div.reservation-users-table div.user-line span.data-prefix {
  font-size: 0.9rem;
}
  
.reservations-admin-modal div.resa-listing-body div.reservation-users-table div.user-line span.user-data.hidden {
  height: 0px;
}