input {
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 16px;
}

/* Bouton générique */
.flavr-button,
.nl-button {
    display: inline-block;
    font-weight: bold;
    text-align: center;
    border: 2px solid #fff;
    padding: .375rem .75rem;
    font-size: 1rem;
    border-radius: 50px;
    color: #fff;
    line-height: 1.5;
    font-family: "Alegreya Sans SC", sans-serif;
    letter-spacing: 1px;
    position: relative;
    cursor: pointer;
    background: linear-gradient(211deg, #00D0FF 0%, #00FFD3 100%);
    box-shadow: inset 0 0 27px rgba(9, 191, 198, 0.55), 0 5px 4px 1px rgba(0, 0, 0, 0.1);
}

body.season-s2 .flavr-button,
body.season-s2 .nl-button {
    background: linear-gradient(211deg, #F600FF 0%, #A73FF0 100%);
    box-shadow: inset 0 0 27px rgba(187,9,198,0.55), 0 5px 4px 1px rgba(79,16,128,0.36);
}

.flavr-button.nl-button-sm,
.nl-button.nl-button-sm {
    font-size: 0.9rem;
    padding: 0.25rem 0.75rem;
}

@keyframes button-bounce {
    0% { transform: scale(1);}
    70% { transform: scale(1.12, 1.09);}
    100% { transform: scale(1.05); }
}

.flavr-button:not(.disabled):not(.gray):not([disabled]):not(.inactive):not(.active):hover,
.flavr-button.close:not(.disabled):not(.gray):not([disabled]):not(.inactive):not(.active):hover,
.nl-button:not(.disabled):not(.gray):not([disabled]):not(.inactive):not(.active):hover {
    filter: brightness(1.05) contrast(1.1);
    animation: button-bounce 300ms linear forwards;
}

.flavr-button.active,
.nl-button.active {
    background: #fff;
    border-color: #00FFD3;
    color: #00FFD3;
    box-shadow: none;
}

body.season-s2 .flavr-button.active,
body.season-s2 .nl-button.active {
    background: #fff;
    border-color: #A73FF0;
    color: #A73FF0;
    box-shadow: none;
}

.flavr-button.inactive,
.nl-button.inactive {
    cursor: inherit;
}


.flavr-button.nl-button-lg,
.nl-button.nl-button-lg {
    font-size: 1.35rem;
    padding: 0.5rem 1.25rem;
}

.nl-button.nl-button-back:before {
    content: '';
    width: 1rem;
    height: 1rem;
    background-size: contain;
    background: url(/static/img/new-layout/pet/icons/svg/back.svg) no-repeat center;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

.flavr-button.gray,
.nl-button.gray {
    background: var(--disabled-buttons-background-color);
    box-shadow: 0 5px 4px 1px rgba(0, 0, 0, 0.1);
}

.flavr-button.disabled,
.nl-button.disabled,
.nl-button[disabled] {
    background: var(--disabled-buttons-background-color);
    cursor: not-allowed;
    box-shadow: 0 5px 4px 1px rgba(0, 0, 0, 0.1);
}

/* Boutons maana & po */
.maana-button,
.legacy-currency-button,
.gold-button,
.purropass-button {
    display: inline-block;
    box-sizing: border-box;
    height: 49px;
    line-height: 47px;
    min-width: 150px;
    border: 2px solid #fff;
    padding: 0 20px;
    margin: 0 10px;
    border-radius: 50px;
    color: #fff;
    font-family: "Alegreya Sans SC", sans-serif;
    font-size: 19px;
    font-weight: bold;
    letter-spacing: 1px;
    position: relative;
    cursor: pointer;
}

.maana-button.maana-button-sm,
.legacy-currency-button.legacy-currency-button-sm,
.gold-button.gold-button-sm,
.purropass-button.purropass-button-sm {
    font-size: 16px;
    height: 31px;
    line-height: 31px;
    min-width: 100px;
}

.maana-button,
.purropass-button {
    background: linear-gradient(211deg, #00D0FF 0%, #00FFD3 100%) !important;
    box-shadow: inset 0 0 27px rgba(9, 191, 198, 0.55), 0 5px 4px 1px rgba(0, 0, 0, 0.1) !important;
}

.legacy-currency-button {
    background: linear-gradient(211deg, #563926 0%, #fdf89b 100%) !important;
    box-shadow: inset 0 0 27px rgb(221, 188, 108), 0 5px 4px 1px rgba(0, 0, 0, 0.1) !important;
}

.gold-button {
    background: linear-gradient(211deg, #FF9C00 0%, #FFD200 100%) !important;
    box-shadow: inset 0 0 27px rgba(242, 223, 8, 0.55), 0 5px 4px 1px rgba(0, 0, 0, 0.1) !important;
    padding-right: 30px;
}

.gold-button.gold-button-sm {
    padding-right: 24px;
}

.maana-button.disabled,
.gold-button.disabled,
.legacy-currency-button.disabled,
.purropass-button.disabled {
    filter: grayscale(100%);
    cursor: not-allowed;
}

.button-price-maana,
.button-price-legacy,
.button-price-gold,
.button-price-purropass {
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    right: 10px;
    min-width: 34px;
    height: 34px;
    line-height: 32px;
    z-index: 2;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 1px rgba(128, 103, 16, 0.26);
    font-family: "Alegreya Sans SC", sans-serif;
    font-size: 17px;
    font-weight: 800;
    padding: 0 4px;
    box-sizing: border-box;
    text-align: center;
}

.maana-button.maana-button-sm .button-price-maana,
.legacy-currency-button.legacy-currency-button-sm .button-price-legacy,
.gold-button.gold-button-sm .button-price-gold,
.purropass-button.purropass-button-sm .button-price-purropass {
    font-size: 13px;
    height: 26px;
    min-width: 26px;
    line-height: 24px;
    top: -3px;
}

.button-price-maana {
    border: 1px solid #00FFD3;
    color: #00C9F7;
}

.button-price-gold {
    border: 1px solid #FFD200;
    color: #DE8A38;
}

.button-price-purropass {
    border: 1px solid #c8a982;
    color: #c5a277;
}

.button-price-legacy {
    border: 1px solid #c8a982;
    color: #c5a277;
}

.maana-button::after {
    content: ' ';
    background: url(/static/img/new-layout/home/connected/maana.png);
    background-size: cover;
    width: 33px;
    height: 45px;
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}

.legacy-currency-button::after {
    content: ' ';
    background: url(/static/img/currency/legacy.png);
    background-size: cover;
    width: 33px;
    height: 45px;
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}

.maana-button.maana-button-sm::after,
.legacy-currency-button.legacy-currency-button-sm::after,
.gold-button.gold-button-sm::after,
.purropass-button.purropass-button-sm::after {
    width: 22px;
    height: 30px;
}

.gold-button::after {
    content: ' ';
    background: url(/static/img/new-layout/home/connected/gold.png);
    background-size: cover;
    width: 30px;
    height: 41px;
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}
.purropass-button::after {
    content: ' ';
    background: url(/static/img/icon/purropass.png);
    background-size: cover;
    width: 41px;
    height: 41px;
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}

/* Popup suppression compte */
.close-account-popup .flavr-button.close {
    right: 28px !important;
    top: 55px !important;
}

.close-account-popup .flavr-outer  {
    height: 300px !important;
    padding: 50px 11px 40px 11px !important;
}

.close-account-popup .flavr-message {
    padding-top: 80px !important;
    letter-spacing: 1px;
}

.rotate-glow::before {
    content: '';
    background: url(/static/img/new-layout/home/connected/glow.png) center no-repeat;
    width: 218px;
    height: 194px;
    position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    animation: rotate-glow 10s linear infinite;
    pointer-events: none;
}

/* Pagination */
.pagination .page {
    height: 10px;
    width: 10px;
    display: inline-block;
    background: rgba(255, 255, 255, 0.37);
    border-radius: 100%;
    margin: 0 3px;
    vertical-align: middle;
    cursor: pointer;
}

.pagination .page.active {
    border: 1px solid rgba(255,255,255,0.68);
    background: linear-gradient(211deg, #00D0FF 0%, #00FFD3 100%);
    box-shadow: inset 0 0 27px rgba(9,191,198,0.55), 0 5px rgba(16,50,128,0.05);
}