/* 
 * VARIABLES
*/
:root {
    --animation-speed: 0.3s;
    --color-button-disabled: #7e7e7e;
}

/*
*/
.center {
    text-align: center;
}

.hidden,
body.wpappninja .hidden {
    display: none;
}
button[disabled],
button.disabled,
body.wpappninja button[disabled],
body.wpappninja button.disabled {
    background-color: var(--color-button-disabled);
    cursor: not-allowed;
}
a[disabled],
body.wpappninja a[disabled] {
    opacity: .5;
    text-decoration: none;
    pointer-events: none;
}
button[disabled],
body.wpappninja button[disabled] {
    opacity: .5;
    pointer-events: none;
}


/*
 * Styles pour le popup de base
*/
.custom-popup{
    position: fixed !important;
    top: 50px !important;
}
.gestion-baes-popup .ui-dialog-content{
    min-height: auto !important;
}
.gestion-baes-popup.success{
    background: white;
    border: 1px solid green;
    border-radius: 15px;
    color: green;
}
.gestion-baes-popup.error{
    background: white;
    border: 1px solid red;
    border-radius: 15px;
    color: red;
}
.gestion-baes-popup .ui-dialog-titlebar{
    display: none;
}

/*
 *  Styles pour le formulaire de validation
 */
.validation-form .row {
    margin-bottom: 20px;
}

.validation-form label {
    margin-bottom: 5px;
}

/* 
 * Styles pour la liste des groupements
 */
[bae-hote] .bae-informations {
    display: none;
}

[bae-hote].open.closing .bae-informations {
    display: initial;
    pointer-events: none;
    inset: 0;
    animation: fade-out var(--animation-speed) forwards;
}

[bae-hote].open .bae-informations {
    display: initial;
    animation: fade-in var(--animation-speed) forwards;
}
.hide-on-desktop{
    display: none !important;
}

/* 
    Gestion bons info-bulle
*/
.info-bulle[aria-label]:hover{
	position: relative;
	cursor: help;
}
.info-bulle[aria-label]:hover:after,
.info-bulle[aria-label]:focus:after {
  content: attr(aria-label);  /* on affiche aria-label */
  position: absolute;
  top: -2.4em;
  left: 50%;
	transform: translateX(-50%); /* on centre horizontalement  */
  z-index: 1; /* pour s'afficher au dessus des éléments en position relative */
  white-space: nowrap;  /* on interdit le retour à la ligne*/
  padding: 5px 14px;
  background: #000;
  color: #fff;
  border-radius: 4px;
  font-size: 1.5rem;
}
/* on génère un second élément en :before pour la flèche */

.info-bulle[aria-label]:hover:before,
.info-bulle[aria-label]:focus:before {
  content: "▼";
  position: absolute;
  top: -1em;
	left: 50%;
	transform: translateX(-50%);
  font-size: 20px;
  color: #000;
}

/*
 * Media query mobile
*/
@media only screen and (max-width: 768px) {
    .groupement-list-header-container {
        display: none;
    }

    .groupement-header-container div::before {
        content: attr(data-header) ": ";
    }
    .mobile-hidden{
        display: none !important;
    }
    .hide-on-desktop,
    body.wpappninja .hide-on-desktop{
        display: inline-block !important;
    }
}

/* 
 * Animations
*/
@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes slide-down {
    0% {
        height: fit-content;
    }

    100% {
        height: 0px;
    }
}

@keyframes slide-up {
    0% {
        height: 0px;
    }

    100% {
        height: fit-content;
    }
}