/*======================
TABLE OF CONTENTS
========================

    1. General
        1.1 Fonts
        1.1 Colors
        1.3 Layouts
        1.4 Back to top button 
        1.5 Inputs
        1.6 Footer
    2. Navigation
        2.1 Guest Navbar
        2.2 App Navbar
        2.3 App Sidebar
    3. Homepage
        3.1 Img comparison slider
        3.2 Layouts
    4. Sign in
    5. Accueil espace personnel
        5.1 Lorem
        5.2 Game Banner
        5.3 Nav pills
    6. Error Pages

=======================*/

/*============================================================
      -         1. General          -
==============================================================*/

/* 1.1 Fonts ------------------------*/
/*@import "https://unpkg.com/open-props/easings.min.css";*/

/* 1.2 Colors ------------------------*/
:root, [data-bs-theme=light] {
    --bs-gutter-x:1.25rem;
    --bs-gutter-y:1.25rem;

    --bs-logo-lg-height: 22px;
    --bs-logo-sm-height: 22px;
    --bs-leftbar-width: 260px;
    --bs-leftbar-width-md: 160px;
    --bs-leftbar-width-sm: 70px;
    --bs-leftbar-condensed-height: 2000px;
    --bs-topbar-height: 70px;
    --bs-menu-item-icon-size: 1.2rem;
    --bs-menu-item-font-size: 0.9375rem;
    --bs-menu-item-padding-x: 10px;
    --bs-menu-item-padding-y: 15px;
    --bs-menu-condensed-link-bg: #727cf5;
    --bs-footer-height: 60px;
    --bs-theme-card-border-width: 0px;
    --color-standard-900: #1a1a1a;
    --color-standard: var(--color-standard-900);
    --color-primary-900: #282d87;
    --color-primary: var(--color-primary-900);
    --bs-input-bg: #fff;
    --bs-border-color-custom: #f6f7fb;

    /* ===== Colors ===== */
    --body-color: white;
    --sidebar-color: #FFF;
    --primary-color-light: #F6F5FF;
    --toggle-color: #DDD;
    --text-color: #707070;
    --ar-primary: teal;
    --ar-gray-500: #b4bbc3;
    --shadow-1: #bbb;
    --shadow-2: #ddd;
    --bs-navbar-brand-color:black;
    --bs-font-sans-serif:Roboto;
    --bs-body-font-family:var(--bs-font-sans-serif);

    /* ====== Transition ====== */
    --tran-03: all 0.2s ease;
    --tran-03: all 0.3s ease;
    --tran-04: all 0.3s ease;
    --tran-05: all 0.3s ease;

    --ar-body-font-size: 1rem;
    --ar-border-radius: 1rem;
    --ar-btn-scroll-top-size: 2.5rem;
    --ar-btn-scroll-top-font-size: 1.25rem;
    --ar-btn-scroll-top-color: var(--ar-gray-800);
    --ar-btn-scroll-top-bg: var(--ar-body-bg);
    --ar-btn-scroll-top-border-radius: 50%;
    --ar-btn-scroll-top-box-shadow: 0 0.275rem 1.125rem rgba(18, 21, 25, 0.1);
    --bs-breadcrumb-item-active-color: var(--bs-primary);  

    --color-background:#0192d5;
    --ar-btn-scroll-top-color:#0192d5;
    --color-tab-active-text:white;
    --bs-btn-active-border-color:#282d87;
    --bs-btn-active-bg:white;
    --bs-btn-active-color:#282d87;
    --bs-symbol-label-color:#252F4A;

    --background-color:#ffffff;
    --sidebar-background:#0192d5;
    --color-border:#282d87;
    --icon-fill:var(--color-primary);
    --icon-fill-hover:white;

    --color-btn-icon:#010d6c;
    --color-btn-icon-hover:#010d6c;

    --border-button:#5bc5f2;
    --color-button:white;
    --background-button:#781ea6;
    --color-highlight:white;
    --border-hover-button:#004494;
    --color-hover-button:rgb(202, 93, 93);
    --background-hover-button:#e2001a;
    --color-button-text:#282d87;
    --color-scrollbar:#282d87;
    --color-tab:#282d87;
    --dropdown-menu-color:#282d87;
    --dropdown-menu-text-color:#282d87;
    --card-loto-background:#00a2d9;
    --card-euromillions-background:#010d6c;
    --color-label-checkbox-background:#282d87;
    --bs-nav-link-color:#282d87;
    --color-label-checkbox-text:#ffffff;
    --card-eurodreams-background:radial-gradient(circle at top right, #52b374 0% 20%, #5bc5f2 20% 35%, #ff3c69 35% 50%, #ee7a9d 50% 65%, #f08159 65% 80%, #781ea6 80% 100%);
}

[data-theme=loto] {
    --twc-primary: 195 100% 42.5%;
    --twc-secondary:355.6 80.8% 57.1%;
    --twc-disabled: 0 0% 70.2%;
    --twc-primaryFromGradient:195.20000000000005 100% 42.5%;
    --twc-primaryToGradient:187.79999999999995 100% 46.7%;
    --twc-background:0 0% 100%;
    --bs-nav-pills-link-active-bg:var(--twc-primary); 
    --bs-btn-active-border-color:var(--twc-primary); 
    --bs-border-radius:1rem;
    --bs-nav-pills-border-radius:2rem;
    --color-border:#e2001a;
    --color-ball:#004494;
    --color-star:#e2001a;
    --color-primary: #e2001a;
    --color-secondary:#004494;
    --color-label-checkbox-background:#004494;
    --color-button-text:#004494;
    --color-background:linear-gradient(in oklch to right,hsl(var(--twc-primaryFromGradient)),hsl(var(--twc-primaryToGradient)));
    --color-close-button : #004494;
    --grid-border-margin-top:1.5rem;
    --ar-btn-scroll-top-color:#00a2d9;
    --color-table:#e2001a;
    --color-table-text:#ffffff;
    --modal-background:linear-gradient(to right in oklch, rgb(0 162 217 / 40%), rgb(0 207 238 / 40%));
    --color-disc:#ffffff;
    --color-border-disc:#e2001a;
    --background-disc:#004494;
    --background-disc-bonus:#e2001a;
    --color-formatter:#ffffff;
    --color-border-formatter:#e2001a;
    --color-tab:#e2001a;
    --color-tab-text:#004494;
    --color-tab-active-text:#ffffff;
    --border-button:#ffffff;
    --color-button:#ffffff;
    --background-button:#00a2d9;
    --color-highlight:#e2001a;
    --border-hover-button:#00a2d9;
    --color-hover-button:#00a2d9;
    --background-hover-button:#ffffff;
    --color-hover-button-close:#004494;
    --color-scrollbar:#e2001a;
    --card-background:#00a2d9;
    --sidebar-background:#00a2d9;
    --grid-fdj-card-body-border-radius:30px 30px 30px 30px;
    --grid-fdj-card-body-padding:5px 20px 5px 20px;
    --grid-chapter-padding-top:0px;
    --grid-chapter-margin-top:5px;
    --grid-chapter-number-background-color:#e2001a;
    --grid-chapter-text-color:#e2001a;
    --grid-chapter-number-text-color:#ffffff;
    --grid-chapter-number-margin-left:-45px;
    --grid-chapter-text-indent:10px;
    --icon-fill:#004494;
    --color-btn-icon:#004494;
    --color-btn-icon-hover:#004494;
    --dropdown-menu-color:#004494;
    --dropdown-menu-text-color:#004494;
    --bs-nav-link-color:#004494;
}

[data-theme=euromillions] {
    --twc-primary: 228.89999999999998 100% 20.2%;
    --twc-primaryFromGradient:228.89999999999998 100% 20.2%;
    --twc-primaryToGradient:223.89999999999998 100% 31.4%;
    --twc-secondary: 46.89999999999998 95.9% 47.6%;
    --twc-disabled: 0 0% 70.2%;
    --twc-background: 0 0% 100%;
    --bs-border-radius:1em;
    --bs-nav-pills-border-radius:2rem;
    --color-border:#010d6c;
    --color-ball:#010d6c;
    --color-star:#ff3c69;
    --color-primary: #010d6c;
    --color-secondary:#f6ba00;
    --color-label-checkbox-background:#f6ba00;
    --color-button-text:#f6ba00;
    --color-background:#010d6c;
    --color-close-button : #f6ba00;
    --grid-border-margin-top:1.5rem;
    --ar-btn-scroll-top-color:#010d6c;
    --modal-background:linear-gradient(to right in oklch, rgb(0 19 103 / 40%), rgb(0 43 160 / 40%));
    --color-table:#f6ba00;
    --color-table-text:#010d6c;
    --color-disc:#010d6c;
    --color-border-disc:#f6ba00;
    --background-disc:#ffffff;
    --color-formatter:#f6ba00;
    --color-border-formatter:#f6ba00;
    --background-disc-bonus:#f6ba00;
    --color-tab:#f6ba00;
    --color-tab-text:#010d6c;
    --color-tab-active-text:#010d6c;
    --border-button:#ffffff;
    --color-button:#ffffff;
    --background-button:#010d6c;
    --color-highlight:#f6ba00;
    --border-hover-button:#010d6c;
    --color-hover-button:#010d6c;
    --background-hover-button:#ffffff;
    --color-hover-button-close:#f6ba00;
    --color-scrollbar:#f6ba00;
    --card-background:#010d6c;
    --sidebar-background:#010d6c;
    --grid-fdj-card-body-border-radius:15px 15px 15px 15px;
    --grid-fdj-card-body-padding:5px 20px 5px 20px;
    --grid-chapter-padding-top:20px;
    --grid-chapter-margin-top:-20px;
    --grid-chapter-number-background-color:#f6ba00;
    --grid-chapter-text-color:#f6ba00;
    --grid-chapter-number-text-color:#010d6c;
    --grid-chapter-number-margin-left:-20px;
    --grid-chapter-text-indent:10px;
    --icon-fill:#010d6c;
    --color-btn-icon:#010d6c;
    --color-btn-icon-hover:#010d6c;
    --dropdown-menu-color:#010d6c;
    --dropdown-menu-text-color:#010d6c;
    --bs-nav-link-color:#010d6c;
}

[data-theme=eurodreams] {
    --twc-primary: 279.70000000000005 69.4% 38.4%;
    --twc-secondary: 346.20000000000005 100% 61.8%;
    --twc-disabled: 0 0% 70.2%;
    --twc-background: 0 0% 100%;
    --twc-primaryFromGradient: 279.70000000000005 69.4% 38.4%;
    --twc-primaryToGradient: 279.4 43.6% 56.9%;
    --color-border:#781ea6;
    --color-primary:#781ea6;
    --color-secondary:#ff3c69;
    --color-ball:#781ea6;
    --color-star:#ff3c69;
    --color-label-checkbox-background:#781ea6;
    --color-button-text:#781ea6;
    --color-background:radial-gradient(circle at top right, #52b374 0% 20%, #5bc5f2 20% 35%, #ff3c69 35% 50%, #ee7a9d 50% 65%, #f08159 65% 80%, #781ea6 80% 100%);
    --card-background:radial-gradient(circle at top right, #52b374 0% 20%, #5bc5f2 20% 35%, #ff3c69 35% 50%, #ee7a9d 50% 65%, #f08159 65% 80%, #781ea6 80% 100%);
    --sidebar-background:radial-gradient(circle at top right, #52b374 0% 20%, #5bc5f2 20% 35%, #ff3c69 35% 50%, #ee7a9d 50% 65%, #f08159 65% 80%, #781ea6 80% 100%);
    /*background-size: 200% 100%;  width: 100%; height:100%, circle ou calc(); */
    --color-close-button : #781ea6;
    --color-table:#781ea6;
    --color-table-text:#ffffff;
    --bs-border-radius:1rem;
    --grid-border-margin-top:0rem;
    --ar-btn-scroll-top-color:#781ea6;
    --color-tab:#781ea6;
    --color-tab-text:#781ea6;
    --color-tab-active-text:#ffffff;
    --modal-background:linear-gradient(45deg, rgb(120 30 166 / 40%), rgb(240 129 89 / 40%), rgb(238 122 157 / 40%), rgb(255 60 105 / 40%), rgb(91 197 242 / 40%), rgb(82 179 116 / 40%));
    --border-button:#5bc5f2;
    --color-button:#ffffff;
    --background-button:#781ea6;
    --color-highlight:#ffffff;
    --border-hover-button:#781ea6;
    --color-hover-button:#781ea6;
    --background-hover-button:#ffffff;
    --color-hover-button-close:#781ea6;
    --color-scrollbar:#781ea6;
    --grid-fdj-card-body-border-radius:10px 10px 10px 10px;
    --grid-fdj-card-body-padding:5px 20px 20px 20px;
    --grid-chapter-padding-top:0px;
    --grid-chapter-margin-top:-20px;
    --grid-chapter-number-background-color:#781ea6;
    --grid-chapter-text-color:#781ea6;
    --grid-chapter-number-text-color:#ffffff;
    --grid-chapter-number-margin-left:-20px;
    --grid-chapter-text-indent:5px;
    --icon-fill:#781ea6;
    --color-btn-icon:#781ea6;
    --color-btn-icon-hover:#781ea6;
    --dropdown-menu-color:#781ea6;
    --dropdown-menu-text-color:#781ea6;
    --bs-nav-link-color:#781ea6;
}

[data-bs-theme=dark] {
    --bs-light: #292a2d;
    --bs-gray-100: #1f2122;
    --bs-gray-200: #3c3e41;
    --bs-gray-300: #5f5f68;
    --bs-gray-400: #a1a1a8;
    --bs-gray-500: #bfc0c9;
    --bs-gray-600: #c5c6cc;
    --bs-gray-700: #ffffffb3;
    --bs-gray-800: #ffffffd9;
    --bs-gray-900: #fff;
    --bs-body-bg: #161618;
    --bs-body-bg-rgb: #161618;
    --bs-body-color: #c4c5c7;
    --bs-heading-color: var(--bs-gray-900);
    --bs-mode: #191b1d;
    --bs-border-color: rgba(255, 255, 255, 0.07);
    --body-color: #18191a;
    --sidebar-color: #242526;
    --primary-color: #3a3b3c;
    --primary-color-light: #3a3b3c;
    --toggle-color: #fff;
    --text-color: #ccc;
    --ar-body-color: rgba(255, 255, 255, 0.7);
    --bs-navbar-brand-color:white;
    --background-color:#3a3b3c;
    --bs-body-bg:#3a3b3c;
    --bs-card-bg:#3a3b3c;
}

body {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-family: Inter, Helvetica, sans-serif;
    background-color: var(--background-color);
}

.container-fdj{
    position: relative;
    width:calc(100% - 120px);
    margin: 0px auto;
}

.flex-root {
    flex: 1;
}

.flex-column-fluid {
    flex: 1 0 auto;
}

.flex-row-fluid {
    flex: 1 auto;
    min-width: 0;
}

.flex-stack {
    justify-content: space-between;
    align-items: center;
}

.page-wrapper {
    flex: 1 0 auto;
}

.choices{
    font-size:inherit;
    min-width: 100px;
}

.choices__inner{
    background:transparent;
    border: 5px solid #fff;
    font-size: inherit;
    padding: 2px 6px 2px 2px;
    border-radius:0;
    color:#fff;
    border-radius: 15px;
}

.white-bg .choices__inner{
    background:#fff;
    border: 5px solid #282d87;
    color:#282d87;
}

.choices[data-type*=select-one] .choices__inner{
    padding-bottom:2px;
}

.choices[data-type*=select-one]::after{
    border-color:#fff transparent transparent;
}

.white-bg .choices[data-type*=select-one]::after{
    border-color:#282d87 transparent transparent;
}

.choices[data-type*=select-one].is-open::after{
    border-color:transparent transparent #282d87;
}

.white-bg .choices[data-type*=select-one].is-open::after{
    border-color:transparent transparent #fff;
}

.choices__list[aria-expanded]{
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.is-open .choices__inner{
    border-top-left-radius:15px;
    border-top-right-radius:15px;
}

.choices__list--dropdown, .choices__list[aria-expanded]{
    z-index:2;
}

.choices__list--dropdown .choices__item--selectable[data-select-text], .choices__list[aria-expanded] .choices__item--selectable[data-select-text]{
    padding-right: 10px;
}

.is-focused .choices__inner, .is-open .choices__inner {
    border-color: #fff;
}

.white-bg .is-focused .choices__inner, .white-bg .is-open .choices__inner {
    border-color: #282d87;
}

.white-bg .choices__list--dropdown, .white-bg .choices__list[aria-expanded]{
    background-color:#282d87;
}

.choices__list--dropdown, .choices__list[aria-expanded] {
    color:#282d87;
    border:none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .15);
}

.white-bg .choices__list--dropdown, .white-bg .choices__list[aria-expanded] {
    color:#fff;
}

.choices.is-open .choices__inner{
    background:#fff;
    color:#282d87;
}

.white-bg .choices.is-open .choices__inner{
    background:#282d87;
    color:#fff;
}

.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: #f2f2f2;
}

.white-bg .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: #0197d9;
}

.choices__placeholder{
    opacity:1;
}

.choices__list--dropdown .choices__item--selectable.is-selected:after{
    speak: none;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-left: 1em;
    font-family: 'Font Awesome 6 Free';
    font-weight:900;
    content: '\f00c';
    color: #ddd9c9;
    font-size: 1.5em;
    opacity: 1 !important;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

.choices__list::-webkit-scrollbar {
    width: 9px;
    height: 7px; 
}

.choices__list::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
}

.choices__list::-webkit-scrollbar-thumb {
    background: var(--color-scrollbar);
    border: 0px none #ffffff;
    border-radius: 0px;
}

.white-bg .choices__list::-webkit-scrollbar-thumb, 
.white-bg .choices__list::-webkit-scrollbar-thumb:hover,
.white-bg .choices__list::-webkit-scrollbar-thumb:active{
    background:white;
}

.choices__list::-webkit-scrollbar-thumb:hover {
    background: var(--color-scrollbar);
}

.choices__list::-webkit-scrollbar-thumb:active {
    background: var(--color-scrollbar);
}

.choices__list::-webkit-scrollbar-track {
    background: transparent;
    border: 0px none #ffffff;
    border-radius: 50px;
}

.choices__list::-webkit-scrollbar-track:hover {
    background: transparent;
}

.choices__list::-webkit-scrollbar-track:active {
    background: transparent;
}

.choices__list::-webkit-scrollbar-corner {
    background: transparent;
}

.choices__list--multiple .choices__item{
    background-color:#282d87;
    border-color:#282d87;
    font-size:inherit;
}

.uploader {
    display: block;
    margin: 0 auto;
}

.uploader input[type=file] {
    display: none;
}

.uploader input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.uploader label {
    width: 100%;
    padding: 2rem 1.5rem;
    text-align: center;
    background: #fff;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
    transition: all 0.2s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.uploader label:hover {
    box-shadow: 0 5px 11px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%);
}

.uploader label img {
    display: inline;
    margin: 0 auto 0.5rem auto;
    width: auto;
    height: auto;
}

.uploader div {
    margin: 0 0 0.5rem 0;
    color: #616161;
}

.uploader label img.hidden {
    display: none;
}

ul.sorting_items li{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

ul.sorting_items li > div{
    width:100%;
}

ul.sorting_items li .menu-input.menu-input-3 {
    width: calc(100% - 145px);
    display:inline-flex;
}

ul.sorting_items li .menu-actions{
    width: 145px;
    margin-left:5px;
    display:inline-flex;
}

.width-fit-content{
    width: fit-content;
}

.w-300px {
    width: 300px !important;
}

.fs-7 {
    font-size: .95rem !important;
}

.py-6 {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
}

.mx-6 {
    margin-right: 1.25rem !important;
    margin-left: 1.25rem !important;
}

.mh-75px {
    max-height: 75px !important;
}

.text-loto{
    color:#00cfee;
}

.text-euromillions{
    color:#002ba0;
}

.text-fdj{
    color :var(--dropdown-menu-text-color);
}

.nav-hidden{
    display:none;
}

.ticket-grids{
    cursor:pointer;
}

.border-fdj{
    border: 2px solid #282d87;
}

.btn-profile{
    padding: calc(.775rem + 1px) calc(1.5rem + 1px);
}

.dropdown-fdj{
    margin-top:-15px !important;
}

.nav-justified .nav-item, .nav-justified>.nav-link{
    white-space: nowrap;
    overflow: hidden;
}

.nav-justified .nav-item a{
    text-overflow: ellipsis;
    overflow: hidden;
}

.nav-justified .nav-item a .nav-icon{
    display:inline-flex;
}

.nav-justified .nav-item a .nav-text{
    display:none;
}

@media(min-width: 992px){
    .nav-justified .nav-item a .nav-icon{
        display:none;
    }

    .nav-justified .nav-item a .nav-text{
        display:inline-flex;
    }
}

.border-euromillions{
    border:2px solid #002ba0 !important;
    border-radius: 2rem;
    font-size:1rem;
}

.border-jokerplus{
    border:2px solid green !important;
    border-radius: 2rem;
    font-size:1rem;
}

.btn-active-accent{
    color:var(--bs-btn-active-color);
}

.btn-active-accent:hover{
    color: white;
    background-color: #282d87;
    border-color: #282d87;
}

.badge-ball-found{
    background-color: black;
    color: white;
    border-radius: 15px;
    padding: 5px;
}

.radio-bg{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    transition: 0.15s ease;
    cursor: pointer;
    position: relative;
    background: white;
    border-radius: 0.6rem;
    border: 4px solid #99A1B7;
}

.radio-bg img.active{
    display:none;
}

.radio-check:checked + .radio-bg img.active{
    display:flex;
}

.radio-check:checked + .radio-bg img:not(.active){
    display:none;
}

.radio-check:checked + .radio-bg{
    transition: color .2s ease;
}

.radio-check:checked + .radio-bg.radio-loto{
    border-color: #00cfee;
    background:#00cfee;
}

.radio-check:checked + .radio-bg.radio-euromillions{
    border-color: #002ba0;
    background:#002ba0;
}

.radio-check:checked + .radio-bg.radio-eurodreams{
    border-color: #781ea6;
    background:linear-gradient(45deg, #781ea6,#f08159,#ee7a9d,#ff3c69,#5bc5f2, #52b374);
}

.radio-bg:hover{
    border-color: var(--color-primary);
}

.radio-bg:before {
    content: "";
    position: absolute;
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #b5bfd9;
    background-color: #fff;
    border-radius: 50%;
    top: 0.25rem;
    right: 0.25rem;
    opacity: 0;
    transform: scale(0);
    transition: 0.25s ease;
    background-image: url('images/check.svg');
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.radio-check:checked + .radio-bg:before {
    transform: scale(1);
    opacity: 1;
    background-color: #2260ff;
    border-color: #2260ff;
}

.radio-bg:hover:before {
    transform: scale(1);
    opacity: 1;
}

.text-euromillions-secondary{
    color:#f6ba00;
}

.text-eurodreams{
    color:#781ea6;
}

.bg-fdj{
    background-color: var(--dropdown-menu-color);
}

.mh-35px {
    max-height: 35px !important;
}

.btn.btn-icon{
    display:inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    height: calc(1.5em + 1.55rem + 2px);
    width: calc(1.5em + 1.55rem + 2px);
    line-height: 1;
    color:var(--color-btn-icon);
}

.btn-logo{
    color:var(--color-btn-icon);
}

.btn.btn-icon:hover{
    background-color: var(--color-btn-icon-hover);
    color: white;
}

.input-gpt {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin: 0px;
    font-size: 16px;
    width: 100%;
    padding-top: 1em;
}

.input-field {
    position: relative;
    display: block;
    float: right;
    border-radius: 0;
    font-weight: 400;
    font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-appearance: none;
    width: 100%;
    padding: 0.8em 0.5em;
    background: white;
    border: 5px solid;
    border-radius: 15px;
    color: var(--color-primary);
    -webkit-transition: border-color 0.25s;
    transition: border-color 0.25s;
}

.input-field.jokerplus {
    border-color: var(--color-secondary);
}

[data-theme=eurodreams]  .input-field{
    border-radius: 0px 0px 15px 15px;
}

.input-field:focus {
    outline: none;
}

.balls-overlay{
    position: relative;
    border-radius:10px;
    background:white;
    padding:3px;
    width:fit-content;
    margin:0px auto;
}

.input-field:focus {
   
}

.input-field:focus + .input-label {
    
}

.input-field:focus + .input-label span {
	
}


.input-label {
    position: relative;
    width: fit-content;
    left: 0;
    top: 0;
    margin-left: 15px;
    background: var(--color-primary);
    color: white;
    border-radius: 15px 15px 0px 0px;
    padding: 0px 10px 0px 10px;
    font-weight: 900;
}

[data-theme=loto] .input-label{
    margin-left: 0;
    left:50%;
    transform: translate(-50%, 0%);
}

.input-label.jokerplus {
    background: var(--color-secondary);
}

[data-theme=eurodreams] .input-label{
    border-radius: 15px 15px 0px 0px;
    background: var(--color-primary);
    margin-left: 0;
    width:100%;
    text-transform: uppercase;
    padding-top: 5px;
}

[data-theme=euromillions] .input-label{
    border-radius: 15px;
    background: #f6ba00;
    color: #010d6c;
    left: 50%;
    margin-left: 0;
    transform: translate(-50%, 0%);
}

.avatar-frame {
    position: relative;
    width: 200px;
    height: 200px;
    border:3px solid #282d87;
    margin-bottom: 5px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .15);
    border-radius: 0.6rem;
}

.avatar-frame > div {
    position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    padding: 8px;
    border-radius: 0.6rem;
    overflow: hidden;
}

.bg-size-cover {
    background-size: cover !important;
}

.bg-position-center {
    background-position: 50% !important;
}

.datamatrix-text{
    position: absolute;
    margin: 0 auto;
    margin-right: -150px;
}

.table.table-nopadding tr td{
    padding:0;
}

.navbar-stuck {
    animation: navbar-show .25s ease-in-out;
    box-shadow: 0 .275rem 1.25rem rgba(11, 15, 25, .05), 0 .25rem .5625rem rgba(11, 15, 25, .03);
    left: 0;
    position: fixed !important;
    top: 0;
    z-index: 1031;
    width:100%;
}

.countdown{
    color: #781ea6;
    text-transform: uppercase;
    background: white;
    display: inline;
    font-weight: bold;
    border-radius:2rem;
    font-size:1.2rem;
    padding: 0px 5px 0px 5px;
}

.btn-card-button{
    background:white;
    color:#282d87;
    border: none;
    border-radius:2rem;
}

.card-euromillions .btn-card-button:hover{
    background:#f6ba00;
}

.card-loto .btn-card-button:hover{
    background:red;
}

.card-eurodreams .btn-card-button:hover{
    background:blue;
}

[data-sidebar=on] .navbar-stuck{
    width: initial;
    right: 400px;
    height: 65px;
}

[data-theme="fdj"] .card{
    border-radius: 0.6rem;
    border: none;
}

[data-theme="fdj"] .card-header{
    border-top-left-radius: 0.6rem;
    border-top-right-radius: 0.6rem;
    border-bottom: 0px;
    background: var(--color-primary);
    color: white;
}

[data-theme="fdj"] .card-header.header-loto{
    background: linear-gradient(in oklch to right, hsl(195.20000000000005 100% 42.5%), hsl(187.79999999999995 100% 46.7%));
}

[data-theme="fdj"] .card-header.header-euromillions{
    background: linear-gradient(270deg, #002ba0, #001367);
}

[data-theme="fdj"] .card-header.header-eurodreams{
    background: #781ea6;
}

[data-theme="fdj"] .card-header.single-header{
    border-bottom-left-radius: 0.6rem;
    border-bottom-right-radius: 0.6rem;
}

[data-theme="fdj"] .card-body:not(.card-body-fdj){
    border: 4px solid var(--color-primary);
    border-bottom-left-radius: 0.6rem;
    border-bottom-right-radius: 0.6rem;
    border-top: 0px;
}

.card.card-menu .card-body{
    border: 1px solid #282d87;
    border-radius:0.6rem;
    color:black;
}

.card.card-menu.card-game .card-body{
    color:white;
}

[data-theme="fdj"] .card-body.body-loto{
    border-color: #00cfee;
}

[data-theme="fdj"] .card-body.body-euromillions{
    border-color: #010d6c;
}

[data-theme="fdj"] .card-body.body-eurodreams{
    border-color: #781ea6;
}

.navbar.navbar-stuck {
    background-color: #0b0f19;
}

.header.navbar-stuck {
    background-color: white;
}

.topbar-menu {
    position: relative;
    list-style-type: none;
    margin-bottom: 0;
}

.carousel-inner > .carousel-item {
    width: 100%;
    height: 360px;
}

.view:not(.hm-zoom) {
    overflow: visible;
}

.image_blog_cover {
    height: 75%;
    background-size: cover;
    margin-bottom: 30px;
    background-position: center;
}

.main-heading {
    text-transform: uppercase;
    border-left: 4px solid #3F729B;
    padding-left: 1rem;
    line-height: 1.5;
    margin-top: 1.5rem;
}

.card-blog {
    background: #fff;
    box-shadow: 0 32px 44px -24px rgba(0, 0, 0, 0.23), 0 20px 25px 0px rgba(0, 0, 0, 0.12), 0 15px 10px -10px rgba(0, 0, 0, 0.2);
    margin-bottom: 30px;
    -webkit-transition: all 370ms cubic-bezier(0.34, 1.61, 0.7, 1);
    -moz-transition: all 370ms cubic-bezier(0.34, 1.61, 0.7, 1);
    -o-transition: all 370ms cubic-bezier(0.34, 1.61, 0.7, 1);
    -ms-transition: all 370ms cubic-bezier(0.34, 1.61, 0.7, 1);
    transition: all 370ms cubic-bezier(0.34, 1.61, 0.7, 1);
}

.author-box{
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.btn-floating {
    display: inline-block;
    color: #fff;
    position: relative;
    overflow: hidden;
    z-index: 1;
    width: 37px;
    height: 37px;
    line-height: 37px;
    padding: 0;
    background-color: #aa66cc;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    transition: .3s;
    cursor: pointer;
    vertical-align: middle;
    margin: 10px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.card.card-hover-shadow {
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.card.card-hover-shadow:hover {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    -webkit-box-shadow: 0px 10px 30px rgba(29, 58, 83, 0.15);
    box-shadow: 0px 10px 30px rgba(29, 58, 83, 0.15);
}

.btn-floating:hover{
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}

.btn-floating.btn-small {
    height: 47px;
    width: 47px;
    line-height: 0;
    display: inline-block;
}

.btn-fb {
    background-color: #3B5998;
}

.btn-tw {
    background-color: #55ACEE;
}

.btn-floating i {
    width: inherit;
    display: inline-block;
    text-align: center;
    color: #fff;
    line-height: 37px;
    font-size: 18px;
    margin-top: 5px;
}

.card-blog:hover {
    -webkit-transform: scale(1.03);
    -moz-transform: scale(1.03);
    -o-transform: scale(1.03);
    -ms-transform: scale(1.03);
    transform: scale(1.03);
}

.card-blog .line-divider {
    width: 30px;
    border-bottom: 2px solid #c5a47e;
    margin: 0 auto;
}

.card-blog .line-divider.line-danger {
    border-color: #e78b90;
}

.card-blog .card-category {
    margin-top: 10px;
    margin-bottom: 15px;
    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 600;
    color: #9A9A9A;
}

.card-blog .card-date, .card-blog .card-month, .card-blog .card-category {
    color: #777777;
    text-transform: uppercase;
    display: block;
    line-height: 1.2;
    font-size: 12px;
}

.card-blog .card-title {
    line-height: 1.358823529em;
    margin-bottom: 10px;
    color: #333333;
}

.card-blog .circle-black {
    margin-top: -45px;
}

.card-blog .circle {
    border-radius: 100%;
    background: #242424;
    width: 60px;
    height: 60px;
    margin: 0 auto;
    position: relative;
}

.card-blog .date-wrapper {
    position: relative;
    top: 16px;
}

.card-blog .date-wrapper .date, .card-blog .date-wrapper .month {
    color: #fff;
    text-transform: uppercase;
    display: block;
    line-height: 1.2;
    font-size: 12px;
    letter-spacing: 1px;
}

.jumbotron {
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
    -webkit-border-radius: .125rem;
    border-radius: .125rem;
    background-color: #fff;
    margin-bottom: 2rem;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    z-index: 50;
    position: relative;
    margin-left: 3%;
    margin-right: 3%;
    margin-top: -110px;
}

@media (min-width: 576px) {
    .jumbotron {
        padding: 4rem 2rem;
    }
}

.btn-danger-soft {
    color: #d6293e;
    background-color: rgba(214, 41, 62, 0.1);
}

.btn-danger-soft:active, .btn-danger-soft:hover, .btn-danger-soft:focus {
    color: #fff;
    background-color: #d6293e;
    border-color: transparent;
}

.avatar {
    height: 3rem;
    width: 3rem;
    position: relative;
    display: inline-block !important;
}

.h-20px {
    height: 20px !important;
}

.min-h-125px {
    min-height: 125px !important;
}

.min-h-250px {
    min-height: 250px !important;
}

.flex-center {
    justify-content: center;
    align-items: center;
}

.bg-g{
    background-repeat: no-repeat;
    background-position-y: bottom;
    background-position-x: center;
    background-size: contain;
}

.bg-light-info {
    background-color: #F6F1FC !important;
}

.bg-light-primary{
    background-color: #E4FFF4 !important;
}

.bg-light-warning {
    background-color: #FFF8DD !important;
}

.bg-light-success {
    background-color: #F1FAFF !important;
}

.card.card-stretch {
    height: calc(100% - var(--bs-gutter-y));
}

[class*=" fa-"], [class^=fa-] {
    display: inline-flex;
    line-height: 1;
    vertical-align: middle;
}

button i,.btn-icon i{
    pointer-events: none;
}

.btn-icon {
    --ar-btn-size: 3rem;
    flex-shrink: 0;
    width: var(--ar-btn-size);
    height: var(--ar-btn-size);
    padding: 0;
}



@media (min-width: 992px) {
    

    .sidebar-enabled[data-sidebar=on] .wrapper {
        margin-right: 400px;
    }

    [data-sidebar=on] .sidebar {
        transition: right .3s ease;
        right: 0;
    }

   /* [data-sidebar=on] .header {
        right: 400px;
    }*/

    .wrapper {
        transition: padding-left .3s ease;
    }

    .sidebar-enabled[data-sidebar=on] .engage-toolbar {
        margin-right: 400px;
    }

    .page .container, .page .container-fluid, .page .container-lg, .page .container-md, .page .container-sm, .page .container-xl, .page .container-xxl {
        padding: 0 40px;
    }
}

.menu, .menu-wrapper {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
}

.menu-sub {
    display: none;
    padding: 0;
    margin: 0;
    list-style: none;
    flex-direction: column;
}

.menu-sub-dropdown {
    display: none;
    border-radius: .65rem;
    background-color: var(--bs-menu-dropdown-bg-color);
    box-shadow: var(--bs-menu-dropdown-box-shadow);
    z-index: 107;
}

.menu-column {
    flex-direction: column;
    width: 100%;
}

.menu-item {
    display: block;
    padding: .15rem 0;
}

.menu-item .menu-link {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0;
    flex: 0 0 100%;
    padding: .65rem 1rem;
    transition: none;
    outline: 0 !important;
}

.menu-rounded .menu-link {
    border-radius: .65rem;
}

.menu-fit>.menu-item>.menu-content, .menu-fit>.menu-item>.menu-link {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.menu-gray-600 .menu-item .menu-link {
    color: var(--bs-gray-600);
}

.menu-hover-primary .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here), .menu-hover-primary .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) {
    transition: color .2s ease;
    color: var(--bs-primary);
}

.menu-active-primary .menu-item .menu-link.active {
    transition: color .2s ease;
    color: var(--color-primary);
}

.symbol {
    display: inline-block;
    flex-shrink: 0;
    position: relative;
    border-radius: .65rem;
}

.symbol .symbol-label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    color: var(--bs-symbol-label-color);
    background-color: var(--bs-symbol-label-bg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: .65rem;
}

.symbol .symbol-label {
    width: 50px;
    height: 50px;
}

.symbol.symbol-100px .symbol-label {
    width: 100px;
    height: 100px;
}

.symbol.symbol-45px .symbol-label {
    width: 45px;
    height: 45px;
}

.symbol.symbol-circle, .symbol.symbol-circle .symbol-label, .symbol.symbol-circle>img {
    border-radius: 50%;
}

.bg-primary {
    background: linear-gradient(in oklch to right,hsl(var(--twc-primaryFromGradient)),hsl(var(--twc-primaryToGradient)));
    color:white;
}

.bg-gamery{
    background:white;
    color: hsl(var(--twc-primary));
    border : 2px solid hsl(var(--twc-primary)); 
}

.bg-loto .card {
    background: white;
}

.bg-loto p{
    color: white;
}

.bg-loto .card-body{
   /* color:black;*/
}

.bg-loto .card h4{
    color:black;
}

.bg-loto label{
    color: white;
    border-color:white;
}

.bg-loto select{
    border-color: white;
    background-color: transparent;
}

.bg-loto select option{
    border-color: white;
    background:#00cfee;
}

.bg-loto .btn-check:checked+.btn, 
.bg-loto .btn.active, 
.bg-loto .btn.show, 
.bg-loto .btn:first-child:active, 
.bg-loto :not(.btn-check)+.btn:active{
    color: #00cfee;
    background-color: white;
    border-color:white;
}

.bg-euromillions{
    background: var(--card-euromillions-background);
}

.bg-eurodreams{
    background: linear-gradient(to right, rgb(120, 30, 166), rgb(160, 97, 193));
}

.parallax {
    /*https://www.goldenberg-am.com/*/
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    padding-top: 3em;
    padding-bottom: 3em;
    width: 100%;
    overflow: hidden;
}

/* 1.3 Layouts ------------------------*/
/*Reset*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a, button {
    outline: 0 !important;
    text-decoration: none;
}

.h-40{
    height:40px;
}

.mt-md-n8 {
    margin-top: -8rem !important;
}

div.dt-container div.dt-paging ul.pagination {
    margin: 2px 0;
    flex-wrap: wrap;
}

.dt-length select {
    width: auto;
    display: inline-block;
    margin-right: 0.5em;
}

.dt-length label {
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
}

.dt-search input {
    margin-left: 0.5em;
    display: inline-block;
    width: auto;
}

.tab-playground-content{
    padding: 0px;
    position: relative;
    display:flex;
    flex-direction: column;
    background: var(--card-background);
    margin-bottom: 50px;
}

[data-theme="loto"] .tab-block.tab-fill{
    background: var(--card-background);
}



[data-theme="loto"] .tab-playground-content{
    padding: 0px 0px 50px 0px;
    margin-bottom: 0px;
    background: var(--background-color);
}

.tab-playground-content .tab-block{
    position: relative;
    width: 100%;
}

.tab-block > *{
    position: relative;
}

.tab-playground-content > .tab-block{
    padding: 25px 20px 20px 20px;
    border-width: 3px 0px 0px 0px;
    border-style:solid;
    border-color:white;
    color: white;
}

.tab-block.tab-block-first{
    padding: 30px 15px 20px 15px;
    border-width: 0px 0px 3px 0px;
}

[data-theme="loto"] .tab-block {
    border: none;
}

[data-theme="loto"] .tab-block.tab-block-first {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

[data-theme="loto"] .tab-block.tab-block-last {
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}

.tab-block.tab-block-inside{
    padding:0;
}

.tab-block-inside-1,.tab-block-inside-2, .tab-block-inside-4 .tab-block-inside-3{
    border-width: 0;
    border-style: solid;
    border-color: white;
}

.tab-block-inside-4 .tab-block-inside-3:first-child{
    border-bottom-width: 3px;
}

[data-theme="loto"] .tab-block-inside-4 .tab-block-inside-3{
    border: none;
}

.tab-block-inside-4 .tab-block-inside-3:last-child{
    border-top-width: 3px;
}

.tab-block-inside-1{
    padding:15px 0px 15px 0px;
    border-bottom-width: 3px;
}

.tab-block-inside-3{
    padding:40px 20px 20px 20px;
}

.tab-block-inside-4{
    padding:0px;
}

.tab-block-inside-2{
    border-top-width: 3px;
}

.tab-block-grid{
    padding:0;
}

.tab-block-grid .tab-block{
    padding:20px 20px 20px 20px;
}

.tab-playground-content .tab-block:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: var(--grid-fdj-card-body-border-radius);
    outline: 6px solid #ffffff;
}

[data-theme="loto"] .tab-block:before {
    display:none;
}

[data-theme="eurodreams"] .tab-block-first:before{
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

[data-theme="loto"] .tab-block-grid .tab-block:first-child{
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    border-bottom: 10px solid white;
}

[data-theme="loto"] .tab-block.card-block-joker{
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    background:#7ca747;
}

.drawing-menu{
    position: absolute;
    left: 0px;
    bottom: 0;
    right: 15px;
    margin: 0px auto;
    margin-bottom: -20px;
    z-index: 1;
    width: 100%;
}

.header-gains{
    position: relative;
    width:100%;
    height:100%;
    display:flex;
    padding: 25px;
}

.tab-block p{
    color: white;
    font-size: 20px;
    font-family: helvetica;
}

.tab-pane h2, .accordion-body.achievements h2{
    background: white;
    color: var(--color-primary);
    font-weight: bold;
    border-radius: 2rem;
    padding:5px;
}

[data-theme="loto"] .tab-block.tab-block-inside-1{
    background:var(--background-color);
}

[data-theme="loto"]  .drawing-menu .nav-link{
    border:5px solid var(--color-border);
    padding: 5px;
}

[data-theme="loto"] .drawing-menu .nav-link:not(.active){
    color:var(--color-secondary);
    background:white;
}

.tab-playground-content .table-bordered{
    outline:5px solid var(--color-border);
    border-radius: 15px;
    background:var(--background-color);
    color:black;
}

.tab-playground-content .table-bordered{
    overflow-x:auto;
}

.tab-playground-content .table-bordered .table>:not(caption)>*>*{
    margin-bottom:0px;
}

.tab-playground-content .table-bordered table th {
    background-color: var(--color-table);
    color: var(--color-table-text);
    box-shadow: none;
    border: 1px solid var(--color-table);
    text-transform: uppercase;
}

.tab-playground-content .table-bordered table td:not(.header-side) {
    color: var(--color-ball)
}

.nav-pills>li+li{
    margin-left:5px;
}

.nav-pills .nav-link {
    color: var(--color-primary);
    background: white;
    font-weight: bold;
}

.nav-pills .nav-link img {
    pointer-events: none;
}

.drawing-menu .nav-pills li:nth-of-type(1) .nav-link{
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.drawing-menu .nav-pills li:last-of-type .nav-link{
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.tab-pane-sub-menu.nav-pills .nav-link{
    color:var(--color-tab-text);
    background:white;
    font-weight: bold;
}

.tab-pane-sub-menu.nav-pills .nav-link.active, .tab-pane-sub-menu.nav-pills .show>.nav-link{
    background-color:var(--color-tab);
    color:var(--color-tab-active-text);
}

.tab-playground-content .nav{
    position: relative;
    border: none;
}

.modal-gains .modal-content{
    background:none;
    border: none;
    font-family: Helvetica;
    font-size: 1.2rem;
}

.modal-gains hr{
    border-width:2px;
}

.btn-outline-fdj{
    color:var(--color-ball);
    background:white;
    border-color:white;
    width: 40px;
    height: 40px;
    padding: 0.4rem;
    font-weight:bold;
    font-family:helvetica;
    box-shadow: 0 0 #0000, 0 0 #0000, 0 0.5rem 1rem rgba(0,0,0,0.13);
}

.btn-check+.btn-outline-fdj:hover{
    color:white;
    background:var(--color-ball);
    border-color:var(--color-ball);
}

.btn-check:checked+.btn-outline-fdj{
    color:white;
    background:var(--color-ball);
    border-color:var(--color-ball);
    box-shadow: 0 0 #0000, 0 0 #0000, 0 0.5rem 1rem rgba(0,0,0,0.13);
}

.btn-outline-fdj-star{
    background:white;
    border-color:white;
    color:var(--color-star);
    font-weight:bold;
    font-family:helvetica;
    width: 40px;
    height: 40px;
    padding: 0.4rem;
    box-shadow: 0 0 #0000, 0 0 #0000, 0 0.5rem 1rem rgba(0, 0, 0, 0.13);
}

[data-theme="eurodreams"] .btn-outline-fdj-star{
    width:unset;
    height: unset;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    aspect-ratio: 0.9;
    clip-path: shape(from 100% 44.61%,curve to 50% 100% with 100% 77.5%/50% 100%,smooth to 0% 44.61% with 0% 77.5%,curve to 50% 0% with 0% 15%/23.92% 0%,smooth by 50% 44.61% with 50% 15%,close);
}

[data-theme="euromillions"] .btn-outline-fdj-star{
    background-color: white;
    border: none;
    aspect-ratio: 1;
    clip-path: shape(from 99.75% 37.8%, arc by -4.16% -3.67% of 5.23% 5.22% small ccw, line by -28.31% -4.3%, line by -12.66% -26.82%, arc by -4.62% -3% of 5.14% 5.14% small ccw, curve by -4.63% 3% with -1.97% 0% / -3.76% 1.16%, line to 32.72% 29.83%, line by -28.31% 4.3%, curve by -4.17% 3.67% with -1.95% 0.3% / -3.56% 1.72%, smooth by 1.3% 5.53% with -0.1% 4.1%, line by 20.49% 20.88%, line by -4.84% 29.48%, curve by 2.05% 5.27% with -0.33% 2.02% / 0.47% 4.07%, arc by 5.44% 0.41% of 4.97% 4.97% small ccw, line by 25.32% -13.92%, line by 25.32% 13.92%, arc by 5.43% -0.41% of 4.98% 4.98% small ccw, curve by 2.05% -5.27% with 1.59% -1.2% / 2.38% -3.25%, line by -4.84% -29.48%, line by 20.48% -20.88%, curve by 1.31% -5.53% with 1.41% -1.43% / 1.91% -3.58%, close);
}

.btn-check:checked+.btn-outline-fdj-star{
    background:var(--color-star);
    border-color:var(--color-star);
    color:white;
}

.btn-check+.btn-outline-fdj-star:hover{
    background:var(--color-star);
    border-color:var(--color-star);
    color:white;
}

.btn-submit-fdj{
    border-radius: 15px;
    text-transform: uppercase;
    border: 5px solid var(--color-border);
    background: white;
    color:var(--color-button-text);
    font-weight:bold;
    font-family:helvetica;
}

.btn-submit-fdj:disabled{
    background: white;
    border: 5px solid var(--color-primary);
    color:var(--color-primary);
}

.btn-submit-fdj:hover{
    background: var(--color-primary);
    border-color:var(--color-primary);
    color:white;
}

.modal-gains .modal-header{
    border: none;
}

.card-fdj{
    max-width: 600px;
}

.card-fdj .card-body .card-center{
    position: relative;
}

.card-fdj .card-body{
    padding: 5px 10px 5px 10px;
    font-family: Helvetica;
    font-size: 20px;
    position: relative;
}



.modal-gains-detailed table .detailed-cell{
    display:table-cell;
}

.modal-gains-detailed table .detailed-row{
    display:table-row;
}

table .detailed-cell, table .detailed-row{
    display:none;
}

.results-tabs li{
    margin-right: .5rem !important;
}

.results-tabs button{
    font-family: helvetica;
    background-color:white;
    color:var(--color-primary);
    border-color:white;
    text-transform: uppercase;
    border-radius: 15px;
}

.results-tabs button.active, .btn-outline-fdj.badge-active{
    background-color:var(--color-tab);
    color:var(--color-tab-active-text);
    border-color:var(--color-tab);
}

.btn-gains-fdj{
    position: relative;
    margin-top:1rem;
    text-decoration: underline;
}

.btn-gains-fdj:hover{
    color:red;
}

.drawing-details{
    position: relative;
    border-radius:2rem;
    padding:0.8rem;
    padding-left:1.1rem;
    padding-right:1.1rem;
    color:white;
}

.drawing-details.details-loto{
    background:#00cfee;
}

.drawing-details.details-loto:hover{
    background:#e2001a;
}

.drawing-details.details-euromillions{
    background:#002ba0;
}

.drawing-details.details-euromillions:hover{
    background:#f6ba00;
}

.drawing-details.details-eurodreams{
    background:#781ea6;
}

.drawing-details.details-eurodreams:hover{
    background:#ff3c69;
}

.btn-outline-fdj.btn-outline-loto.badge-active{
    background-color:#00cfee;
    border-color:#00cfee;
    border-radius:2rem;
}

.btn-outline-fdj-star.btn-outline-loto-star.badge-active{
    background-color:#e2001a;
    border-color:#e2001a;
    border-radius:2rem;
}

.btn-outline-fdj-star.btn-outline-euromillions-star.badge-active{
    background-color:#f6ba00;
    border: none;
    aspect-ratio: 1;
    clip-path: shape(from 99.75% 37.8%,arc by -4.16% -3.67% of 5.23% 5.22% small ccw,line by -28.31% -4.3%,line by -12.66% -26.82%,arc by -4.62% -3% of 5.14% 5.14% small ccw,curve by -4.63% 3% with -1.97% 0%/-3.76% 1.16%,line to 32.72% 29.83%,line by -28.31% 4.3%,curve by -4.17% 3.67% with -1.95% 0.3%/-3.56% 1.72%,smooth by 1.3% 5.53% with -0.1% 4.1%,line by 20.49% 20.88%,line by -4.84% 29.48%,curve by 2.05% 5.27% with -0.33% 2.02%/0.47% 4.07%,arc by 5.44% 0.41% of 4.97% 4.97% small ccw,line by 25.32% -13.92%,line by 25.32% 13.92%,arc by 5.43% -0.41% of 4.98% 4.98% small ccw,curve by 2.05% -5.27% with 1.59% -1.2%/2.38% -3.25%,line by -4.84% -29.48%,line by 20.48% -20.88%,curve by 1.31% -5.53% with 1.41% -1.43%/1.91% -3.58%,close);
}

.btn-outline-fdj-star.btn-outline-eurodreams-star.badge-active{
    background-color:#ff3c69;
    border-radius:2rem;
    width: unset;
    height: unset;
    padding: 0.375rem 0.75rem;
    aspect-ratio: 0.9;
    clip-path: shape(from 100% 44.61%, curve to 50% 100% with 100% 77.5% / 50% 100%, smooth to 0% 44.61% with 0% 77.5%, curve to 50% 0% with 0% 15% / 23.92% 0%, smooth by 50% 44.61% with 50% 15%, close);
}

.btn-outline-fdj.btn-outline-euromillions.badge-active{
    background-color:#002ba0;
    border-color:#002ba0;
    border-radius:2rem;
    color:white;
}

.btn-outline-fdj.btn-outline-eurodreams.badge-active{
    background-color:#781ea6;
    border-color:#781ea6;
    border-radius:2rem;
}

.btn-submit-eurodreams{
    border-radius: 15px;
    text-transform: uppercase;
    border: 5px solid #781ea6;
    background: white;
    color: #781ea6;
    font-weight: bold;
    font-family: helvetica;
}

.btn-submit-eurodreams:hover {
    background: #781ea6;
    border-color:#781ea6;
}

.btn-submit-loto{
    border-radius: 15px;
    text-transform: uppercase;
    border: 5px solid #e2001a;
    background: white;
    color: #e2001a;
    font-weight: bold;
    font-family: helvetica;
}

.btn-submit-loto:hover {
    background: #e2001a;
    border-color:#e2001a;
}

.btn-submit-euromillions{
    border-radius: 15px;
    text-transform: uppercase;
    border: 5px solid #f6ba00;
    background: white;
    color: #f6ba00;
    font-weight: bold;
    font-family: helvetica;
}

.btn-submit-euromillions:hover {
    background: #f6ba00;
    border-color:#f6ba00;
}

.results-tabs button:hover{
    background-color:#ee7a9d;
    color:white;
    border-color:#ee7a9d;
}

.game-options-bg{
    text-transform: uppercase;
    --r: .8em;
    padding-inline: calc(var(--r) + .3em);
    line-height: 1.8;
    background: var(--color-primary);
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--r)) 50%, 100% 100%, 0 100%, var(--r) 50%);
    color:white;
    font-size: 1.4rem;
    font-weight:bold;
}


[data-theme=euromillions] .game-options-bg{
    clip-path:none;
    border-radius: 15px;
    background: #f6ba00;
    color: #010d6c;
    padding-inline:unset;
    padding-top:2px;
    padding-bottom:2px;
    padding-left: 8px;
    padding-right: 8px;
    font-style: italic;
}

.second-tirage-bg{
    background-color: black;
    color:white;
    border-radius: 15px;
    padding-top:2px;
    padding-bottom:2px;
    padding-left: 8px;
    padding-right: 8px;
}

.jokerplus-game{
    position: relative;
    border: 5px solid var(--color-secondary);
    border-radius: 15px;
    background: white;
    margin-top: 5px;
    display:flex;
}

.jokerplus-game .title{
    position: absolute;
    width: fit-content;
    left: 0;
    right:0;
    top: 0;
    margin:-25px auto auto auto;
    background: var(--color-secondary);
    color: white;
    border-radius: 5px 5px 0px 0px;
    padding: 0px 10px 0px 10px;
    font-weight: 900;
}

.jokerplus-game .content{
    padding:15px;
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center !important;
    align-items: center !important;
}

.dashed-hr{
    border-top: 2px dashed black;
}



.chapter-number{
    color:var(--color-table-text);
    text-align: center;
    background: var(--color-table);
    border-radius: 2rem;
    padding-right:1em;
    padding-left:1em;
    margin-right:0.5em;
}

.card-fdj p{
    color: black;
}

.indication{
    font-size:18px;
}

[data-theme="eurodreams"] .indication{
    text-shadow:
    -1px -1px 0 var(--color-primary),
     0   -1px 0 var(--color-primary),
     1px -1px 0 var(--color-primary),
     1px  0   0 var(--color-primary),
     1px  1px 0 var(--color-primary),
     0    1px 0 var(--color-primary),
    -1px  1px 0 var(--color-primary),
    -1px  0   0 var(--color-primary);
}

.similar-combinations-settings{
    background-color:white;
    border: 5px solid var(--color-border);
    padding:8px;
    border-radius: 10px;
    margin-bottom:1rem;
    font-size:1.3rem;
    margin-left:1rem;
    color:var(--color-primary);
}

.badge-outline-fdj{
    background:transparent;
    font-family: helvetica;
    width: 40px;
    height: 40px;
    cursor:default; 
    font-size: 1rem;
    border: 2px solid #ff3c69;
    color:#ff3c69;
    line-height: 40px;
    padding: 0;
    vertical-align: middle; 
}

.similar-combinations-settings .badge:empty{
    display:inline-flex;
}

.badge-outline-fdj.badge-active, .btn-outline-fdj-star.badge-active{
    background-color:var(--color-star);
    border-color:#ff3c69;
    color:white;
}

.btn-outline-fdj-star.badge-active, .btn-outline-fdj.badge-active{
    opacity:1;
}

.badge-outline-fdj-star {
    border-radius: 50% !important;
}

[data-theme="eurodreams"] .indication > span{
    font-size: 25px;
}

[data-theme="euromillions"] .indication > span{
    color:#f6ba00;
}

.price-ribbon{
    background:white;
    color:#010d6c;
    position: relative;
    margin-left:18px;
    z-index:1;
    padding-right: 12px;
    border-top-right-radius: 11px;
    border-bottom-right-radius: 11px;
}

.price-ribbon:before{
    content: "";
    position: absolute;
    display: block;
    top:0;
    border: 11px solid white;
    left: -17px;
    border-left-color: transparent;
    z-index:-1;
}

.tab-pane p.price-tag{
    border-radius:15px;
    background:white;
    color:#781ea6;
    width: fit-content;
    margin: 0px auto;
    padding-left: 10px;
    padding-right: 10px;
}

.ribbon-france{
    position: absolute;
    z-index:1;
    width:100%;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 5px;
    height: 17px;
}

.ribbon-france-text{
    text-align:center;
    z-index:2;
    position: relative;
}

.ribbon-france-left{
    background:#010d6c;
    position: relative;  
    height: 100%;
    float: left;
    width:10px;
}

.ribbon-france-center{
    background:white;
    position: relative;  
    height: 100%;
    float: left;
    width:calc(100% - 20px);
}

.ribbon-france-right{
    background:red;
    position: relative;  
    height: 100%;
    float: left;
    width:10px;
}

.ribbon-france-left:before,.ribbon-france-right:after{
    content: "";
    position: absolute;
    display: block;
    top:0;
}

.ribbon-france-left:before{
    border: 6px solid #010d6c;
    left: -12px;
    border-left-color: transparent;
}

.ribbon-france-right:after{
    border: 6px solid red;
    right: -12px;
    border-right-color: transparent;
}

[data-theme="loto"] .indication > span:not(.stars_text) {
    text-shadow:
    -1px -1px 0 var(--color-primary),
     0   -1px 0 var(--color-primary),
     1px -1px 0 var(--color-primary),
     1px  0   0 var(--color-primary),
     1px  1px 0 var(--color-primary),
     0    1px 0 var(--color-primary),
    -1px  1px 0 var(--color-primary),
    -1px  0   0 var(--color-primary);
}

[data-theme="loto"] .indication > span.stars_text{
    text-shadow:
    -1px -1px 0 var(--color-secondary),
     0   -1px 0 var(--color-secondary),
     1px -1px 0 var(--color-secondary),
     1px  0   0 var(--color-secondary),
     1px  1px 0 var(--color-secondary),
     0    1px 0 var(--color-secondary),
    -1px  1px 0 var(--color-secondary),
    -1px  0   0 var(--color-secondary);
}

.close-playground {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
    filter:none;
    --bs-btn-close-color: var(--color-close-button);
}

.header-side{
    background-color: var(--color-table) !important;
    color: var(--color-table-text) !important;
    box-shadow: none !important;
    border: 1px solid var(--color-table);
    text-align:center;
}

.right-side{
    vertical-align: bottom;
}

.header-side-content{
    display: flex;
    justify-content: center;
    align-items: center;
}

.text-90{
    writing-mode: tb;
    text-orientation: mixed;
    font-weight: bold;
}

.right-side .text-90{
    transform: rotate(180deg);
}

.text-90 i{
    transform: rotate(90deg);
}

.right-side .text-90 i{
    transform: rotate(-90deg);
}

.header-gains img{
    width: 100%;
}

input.inputfile{
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

input.inputfile + label{
    max-width: 80%;
    font-size: 1rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    border: 5px solid var(--color-primary);
    background-color: #f1e5e6;
    padding: 0;
    color: var(--color-primary);
    border-radius: 15px;
}

input.inputfile + label span {
    width: 200px;
    min-height: 2em;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: top;
    padding: 0.625rem 1.25rem;
}

input.inputfile + label strong {
    height: 100%;
    color: #f1e5e6;
    background-color: var(--color-table);
    display: inline-block;
    padding: 0.625rem 1.25rem;
}

.inputfile:focus + label strong, .inputfile.has-focus + label strong, .inputfile + label:hover strong {
    background-color: #722040;
}

.inputfile:focus + label, .inputfile.has-focus + label, .inputfile + label:hover {
    border-color: #722040;
}

input.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;
    margin-right: 0.25em;
}

[data-theme="loto"] .balls-search{
    margin-top:25px;
}

.search-placeholder{
    width: 85px;
    height: 70px;
    margin-right:1rem;
    text-align: center;
    padding:0;
    margin-bottom: 1em;
}

[data-theme="eurodreams"] .search-placeholder{
    height: 90px;
}

[data-theme=eurodreams] .stars-placeholder{
    height: 66px;
    margin-top: 24px !important;
}

.search-placeholder:first-child{
    margin-left:0;
}

.search-placeholder-content{
    position: relative;
    height:100%;
    width:100%;
    display:flex;
    align-items: center !important;
    justify-content: center !important;
    cursor:pointer;
}

.search-placeholder-content.grid-content{
    padding:0;
}

.stars-placeholder .grid-title{
    font-size: 0.6rem;
    line-height: 25px;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.gains-duration{
    position: absolute;
    right:0;
    top: 0;
    bottom: 0;
    margin: auto;
    margin-right: -15px;
    height: 125px;
    width: 125px;
    border-radius: 50%;
    background:var(--color-primary);
    color:white;
    text-align:center;
    border:5px solid #5bc5f2;
    justify-content: center; 
    align-items: center; 
    display: flex;
}

.gains-duration span{
    line-height: 1.5rem;
}

.gains-amount{
    position: relative;
    height: 175px;
    width: 175px;
    border-radius: 50%;
    background:var(--background-disc);
    color:var(--color-disc);
    text-align:center;
    border:2px solid white;
    box-shadow: 0 0 0 5px var(--color-border-disc);
    justify-content: center; 
    align-items: center; 
    display: inline-flex;
    flex-direction: column;
}

.gains-amount svg, .gains-amount div{
    position: absolute;
}

.gains-bonus{
    position: relative;
    height: 140px;
    width: 140px;
    border-radius: 50%;
    background:var(--background-disc-bonus);
    color:var(--color-disc);
    text-align:center;
    justify-content: center; 
    align-items: center; 
    display: inline-flex;
    flex-direction: column;
    border: 4px solid white;
    padding: 2px;
    line-height: 18px;
    z-index:1;
}

.add-circle{
    position: relative;
    height: 25px;
    width: 25px;
    font-size:30px;
    border-radius: 50%;
    font-weight:bold;
    background:var(--background-disc);
    color:var(--color-disc);
    text-align:center;
    justify-content: center; 
    align-items: center; 
    display: inline-flex;
    margin-left: 15px;
    margin-right: 15px;
}

.gains-bonus.gain-bonus-loto .ribbon{
    position:absolute;
    background-color: var(--color-secondary);
    font-size: 30px;
    font-weight: bold;
    height: 36px;
    line-height: 36px;
    width: calc(100% + 20px);
    margin: 35px auto 0px auto;
    z-index: 2;
}

.gains-bonus.gain-bonus-loto .ribbon-left, .gains-bonus.gain-bonus-loto .ribbon-right {
    content: "";
    position: absolute;
    display: block;
    margin-top:70px;
    height:36px;
    z-index: -1;
    width:50px;
}

.gains-bonus.gain-bonus-loto .ribbon-left{
    border: 18px solid var(--color-secondary);
    left: -36px;
    border-left-color: transparent;
}

.gains-bonus.gain-bonus-loto .ribbon-right{
    border: 18px solid var(--color-secondary);
    right: -36px;
    border-right-color: transparent;
}

.gains-bonus.gain-bonus-euromillions .ribbon{
    --d: .8em; /* the depth */
    position: absolute;
    top: 45px;
    inset-inline: calc(-1*var(--d));
    border-bottom: var(--d) solid red;
    line-height: 1.8;
    font-weight:bold;
    text-transform: uppercase;
    color:#010d6c;
    clip-path: polygon(0 0,100% 0,100% calc(100% - var(--d)),calc(100% - var(--d)) 100%,calc(100% - var(--d)) calc(100% - var(--d)),var(--d) calc(100% - var(--d)),var(--d) 100%,0 calc(100% - var(--d)));
    background-color: #ffffff; /* the main color */
}

.gain-bonus-euromillions p{
    font-size: 16px;
    line-height: 15px;
    font-weight:bold;
    color:var(--color-disc);
}

.winning_total{
    position: absolute;
    top: 0px;
    font-weight: bold;
    margin-top: -5px;
}

[data-theme=euromillions] .winning_total{
    font-size: 3rem;
    margin-top: 10px;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 45px;
    width: 100%;
    position: relative;
}

.winning_total .value{
    font-size: 50px;
    line-height: 60px;
    margin-bottom: 0;
}

.winning_total .text{
    text-transform: uppercase;
    font-size: 17px;
    line-height: 1px;
    margin-bottom: 0;
}

.gains-bonus .last{
    font-size: 9px;
    position: absolute;
    text-transform: uppercase;
    color: var(--color-disc);
    bottom: 0;
    margin-bottom: 15px;
}

[data-theme=euromillions] .gains-bonus .last{
    font-size: 8px;
    position: relative;
    margin-bottom:0px;
}

.gains-amount .value{
    font-size:4rem;
    font-weight:bold;
    top:0;
    margin-top: 25px;
}

.gains-amount .text{
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: bold;
    bottom: 0;
    margin-bottom: 10px;
}

.gains-amount .formatter{
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.5rem;
    border-bottom:2px solid var(--color-border-formatter);
    color:var(--color-formatter);
    margin-top: 50px;
}

.gains-data{
    text-align:center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 20px;
    margin-right: 20px;
}

.gains-data span{
    margin: 0 auto;
}

.gains-data-text{
    color:var(--color-primary);
    text-transform: uppercase;
    background: white;
    display: inline;
    font-weight:bold;
}

.gains-data-value{
    color:white;
    background:var(--color-primary);
    border:2px solid var(--color-primary);
    padding:0.1rem 0.8rem 0.1rem 0.8rem;
    font-size:3rem;
    font-weight:bold;
    border-radius: var(--bs-border-radius-pill) !important;
    line-height:35px;
}

.gains-duration-data{
    font-size:3rem;
    font-weight:bold;
}

.gains-duration-type{
    font-size:2rem;
    text-transform: uppercase;
    font-weight:bold;
}

.img-logo{
    width:150px;
}

.logo-fdj{
    width:100px;
}

.codes-gagnants div:nth-child(even){
    border-left:1px solid black;
}

.codes-gagnants div{
    text-align: center;
    font-weight:bold; 
}

.codes-gagnants div:first-child{
    margin-right: auto !important;
    margin-left: auto !important;
}

.code-gagnant-title:first-letter,.second-tirage-title:first-letter {
    text-transform: uppercase;
}

.second-tirage-text,.jokerplus-block,.jokerplusrowamount,.game-price-row{
    display:none;
}

.second-tirage-text.active,.jokerplus-block.active{
    display:block;
}

.jokerplusrowamount.active,.game-price-row.active{
    display:table-row;
}

.second-tirage-title{
    display:none;
}

.second-tirage-title.active{
    display:inline-flex;
}

.second-tirage-active-text{
    display:none;
}

.second-tirage-active-text.active{
    display:block;
}

.label-checkbox{
    display: inline-flex;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    margin-bottom: .5rem;
}

.input-checkbox-border{
    position: relative;
    height: 55px;
    width: 55px;
    background-color: white;
    border: 5px solid var(--color-primary);
    border-radius: 15px;
    z-index:1;
}

.label-checkbox input {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
}

.input-checkbox{
    margin: auto !important;
    width: 1.5em;
    height: 1.5em;
    border: 1px solid red;
    background: white;
    border-radius: .25em;
    position: absolute;
}

.label-text{
    background: var(--color-label-checkbox-background);
    color: var(--color-label-checkbox-text);
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    padding-right: 15px;
    padding-left: 10px;
    position: relative;
    margin: auto;
    height: 45px;
    margin-right: 5px;
    margin-left: -5px;
    cursor:pointer;
    font-size: 20px;
}

.label-checkbox.label-success .input-checkbox-border,.label-checkbox.label-success .input-checkbox{
    border-color: rgba(var(--bs-success-rgb),1)!important;
}

.label-checkbox.label-danger .input-checkbox-border,.label-checkbox.label-danger .input-checkbox{
    border-color: rgba(var(--bs-danger-rgb),1)!important;
}

.label-checkbox.label-success .label-text{
    background: rgba(var(--bs-success-rgb),1)!important;
}

.label-checkbox.label-danger .label-text{
    background: rgba(var(--bs-danger-rgb),1)!important;
}

.form-check-input.game-choice:checked {
    background-color: red;
    border-color: red;
}

/* On mouse-over, add a grey background color */
.label-checkbox:hover input ~ .input-checkbox-border .input-checkbox {
    background-color: #ccc;
}

.label-checkbox input:checked ~ .input-checkbox-border .input-checkbox {
    background-color: red;
}

.label-checkbox.label-success input:checked ~ .input-checkbox-border .input-checkbox{
    background-color: rgba(var(--bs-success-rgb),1)!important;
}

.label-checkbox.label-danger input:checked ~ .input-checkbox-border .input-checkbox{
    background-color: rgba(var(--bs-danger-rgb),1)!important;
}

/* Create the checkmark/indicator (hidden when not checked) */
.input-checkbox-border .input-checkbox:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.label-checkbox input:checked ~ .input-checkbox-border .input-checkbox:after {
    display: block;
}

/* Style the checkmark/indicator */
.input-checkbox:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.playroster, .playgrounds-dates{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: auto;
    background: #fffed8;
    opacity: 0;
    -webkit-transition: opacity 0.3s, visibility 0s 0.3s;
    transition: opacity 0.3s, visibility 0s 0.3s;
    visibility: hidden;
    z-index: 2000;
}

.playroster.active, .filterroster.active,.playgrounds-dates.active {
    visibility: visible;
    transition: opacity 0.3s;
    opacity: 1;
}

.playroster ul, .filterroster ul,.playgrounds-dates ul{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 10px;
    list-style: none;
    margin: 0;
}

.playgrounds-dates ul{
    display: block;
}

.playroster ul.active, .filterroster ul.active {
    display: block;
}

.playroster ul li, .playgrounds-dates ul li{
    width: 20%;
    height: 20%;
    float: left;
    position: relative;
    cursor: pointer;
    border-radius: 0px;
    opacity: 0;
    border: 10px solid transparent;
    background-clip: padding-box;
    -webkit-transform: scale3d(0.8, 0.8, 1);
    transform: scale3d(0.8, 0.8, 1);
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    display: table;
}

.playroster.active ul li, .playgrounds-dates.active ul li{
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}

.playroster.active ul li:nth-child(2) {
	-webkit-transition-delay: 0.01s;
	transition-delay: 0.01s;
}

.playroster.active ul li:nth-child(3) {
	-webkit-transition-delay: 0.02s;
	transition-delay: 0.02s;
}

.playroster.active ul li:nth-child(4) {
	-webkit-transition-delay: 0.03s;
	transition-delay: 0.03s;
}

.playroster.active ul li:nth-child(5) {
	-webkit-transition-delay: 0.04s;
	transition-delay: 0.04s;
}

.playroster.active ul li:nth-child(6) {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

.playroster.active ul li:nth-child(7) {
	-webkit-transition-delay: 0.06s;
	transition-delay: 0.06s;
}

.playroster.active ul li:nth-child(8) {
	-webkit-transition-delay: 0.07s;
	transition-delay: 0.07s;
}

.playroster.active ul li:nth-child(9) {
	-webkit-transition-delay: 0.08s;
	transition-delay: 0.08s;
}

.playroster.active ul li:nth-child(10) {
	-webkit-transition-delay: 0.09s;
	transition-delay: 0.09s;
}

.playroster.active ul li:nth-child(11) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

.cs-skin-boxes.cs-active .cs-options li:nth-child(12) {
	-webkit-transition-delay: 0.11s;
	transition-delay: 0.11s;
}

.playroster.active ul li:nth-child(13) {
	-webkit-transition-delay: 0.12s;
	transition-delay: 0.12s;
}

.playroster.active ul li:nth-child(14) {
	-webkit-transition-delay: 0.13s;
	transition-delay: 0.13s;
}

.playroster.active ul li:nth-child(15) {
	-webkit-transition-delay: 0.14s;
	transition-delay: 0.14s;
}

.playroster.active ul li:nth-child(16) {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}

.playroster.active ul li:nth-child(17) {
	-webkit-transition-delay: 0.16s;
	transition-delay: 0.16s;
}

.playroster.active ul li:nth-child(18) {
	-webkit-transition-delay: 0.17s;
	transition-delay: 0.17s;
}

.playroster.active ul li:nth-child(19) {
	-webkit-transition-delay: 0.18s;
	transition-delay: 0.18s;
}

.playroster.active ul li:nth-child(20) {
	-webkit-transition-delay: 0.19s;
	transition-delay: 0.19s;
}

.game-choice{
    width:2em;
    height:2em;
    margin-right: 0.5em;
}

.label-checkbox-fdj{
    width: 40px;
    height: 40px;
    padding: 0.4rem;
}

.playroster ul li .label-checkbox-fdj,.playgrounds-dates ul li .label-checkbox-fdj{
    width: 100%;
    height: 100%;
    font-size: 7vw;
    padding: 0rem;
    display: table-cell;
    vertical-align: middle;
}

.playgrounds-dates ul li .label-checkbox-fdj{
    font-size: 3vw;
}

.btn-check+.btn.label-checkbox-fdj:hover{
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
}

.playroster ul li .label-checkbox-fdj,.playgrounds-dates ul li .label-checkbox-fdj{
    border-color: var(--color-border);
    color: var(--color-border);
}

.playroster ul li .btn-check+.btn.label-checkbox-fdj:hover,.playroster ul li .btn-check:checked+.btn,
.playgrounds-dates ul li .btn-check+.btn.label-checkbox-fdj:hover,.playgrounds-dates ul li .btn-check:checked+.btn{
    border-color: var(--color-border);
    background:var(--color-border);
    color: white;
}

/*[data-theme="euromillions"] .label-checkbox-star{
    border: none;
    aspect-ratio: 1;
    clip-path: shape(from 99.75% 37.8%, arc by -4.16% -3.67% of 5.23% 5.22% small ccw, line by -28.31% -4.3%, line by -12.66% -26.82%, arc by -4.62% -3% of 5.14% 5.14% small ccw, curve by -4.63% 3% with -1.97% 0% / -3.76% 1.16%, line to 32.72% 29.83%, line by -28.31% 4.3%, curve by -4.17% 3.67% with -1.95% 0.3% / -3.56% 1.72%, smooth by 1.3% 5.53% with -0.1% 4.1%, line by 20.49% 20.88%, line by -4.84% 29.48%, curve by 2.05% 5.27% with -0.33% 2.02% / 0.47% 4.07%, arc by 5.44% 0.41% of 4.97% 4.97% small ccw, line by 25.32% -13.92%, line by 25.32% 13.92%, arc by 5.43% -0.41% of 4.98% 4.98% small ccw, curve by 2.05% -5.27% with 1.59% -1.2% / 2.38% -3.25%, line by -4.84% -29.48%, line by 20.48% -20.88%, curve by 1.31% -5.53% with 1.41% -1.43% / 1.91% -3.58%, close);
}*/

[data-theme="loto"] .grid-borders{
    background: #004494;
    border-radius: 15px;
    position: relative;
    padding-top:25px;
    margin-top:10px;
}

[data-theme="loto"] .grid-borders.grid-borders-raw{
    padding-top:1px;
}

[data-theme="loto"] ol.grid-borders.grid-borders-raw{
    padding-top:15px;
}

.grid-borders > p{
    text-align:center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin-top: -15px;
    text-shadow: -1px -1px 0 var(--color-secondary), 0 -1px 0 var(--color-secondary), 1px -1px 0 var(--color-secondary), 1px 0 0 var(--color-secondary), 1px 1px 0 var(--color-secondary), 0 1px 0 var(--color-secondary), -1px 1px 0 var(--color-secondary), -1px 0 0 var(--color-secondary);
}

.grid-border{
    position: relative;
    border:5px solid var(--color-primary) !important;
    border-radius: 15px !important;
    background:white;
    margin-top: 40px;
}

.list-group-item.grid-border{
    margin-top:10px;
}

[data-theme="euromillions"] .grid-border{
    margin-top: 25px;
}

.grid-border-margin-top{
    margin-top: var(--grid-border-margin-top);
}

.total-combinations{
    position: relative;
    background: var(--color-primary);
    font-size:23px;
    margin-left:10px;
    padding:5px;
}

[data-theme="loto"] .total-combinations:before, [data-theme="loto"] .total-combinations:after,
[data-theme="eurodreams"] .total-combinations:before, [data-theme="eurodreams"] .total-combinations:after{
    content: '';
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    bottom: 0;
    border-top: 18px solid var(--color-primary);
    border-bottom: 18px solid var(--color-primary);
}

[data-theme="loto"] .total-combinations:before, [data-theme="eurodreams"] .total-combinations:before {
    left: 0;
    margin-left: -18px;
    border-left: 18px solid transparent;
}

[data-theme="loto"] .total-combinations:after, [data-theme="eurodreams"] .total-combinations:after {
    right:0;
    margin-right: -18px;
    border-right: 18px solid transparent;
}

[data-theme="euromillions"] .total-combinations{
    clip-path: none;
    border-radius: 15px;
    background: #f6ba00;
    color: #010d6c;
    padding-inline: unset;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 8px;
    padding-right: 8px;
    font-style: italic;
}

.grid-title{
    position:absolute;
    left:0;
    top: 0;
    margin-top: -25px;
    margin-left:15px;
    background: var(--color-primary);
    color: white;
    border-radius: 15px 15px 0px 0px; ;
    padding:0px 10px 0px 10px;
    font-weight: 900;
}

.grids-similar{
    width:fit-content;
}

[data-theme="loto"] .grid-title{
    margin : -25px auto auto auto;
    width: fit-content;
    right: 0;
}

.grid-content,.help-list-element-content{
    padding:10px;
}

.display-grid-actions{
    cursor:pointer;
}

[data-theme=eurodreams] .grid-content{
    position: relative;
    height: calc(100% - 25px);
    width: 100%;
}

[data-theme=eurodreams] .grid-content.stars-placeholder-content{
    height: 100%;
}

[data-theme=eurodreams] .grid-border{
    margin-top:1rem;
}

[data-theme=eurodreams] .grid-border.list-group-item{
    margin-top:0rem;
}

[data-theme=eurodreams] .grids-creation .grid-border:nth-of-type(1){
    margin-top: 0rem;
}

[data-theme=loto] .grids-creation .grid-border:nth-of-type(1){
    margin-top: 1rem;
}

[data-theme=eurodreams] .grid-title{
    position: relative;
    height: 25px;
    width: 100%;
    text-transform: uppercase;
    z-index: inherit;
    margin-top: 0;
    margin-left: 0;
    border-radius: 0;
    padding-left: 5px;
}

[data-theme=loto] .grid-title .loto-content, [data-theme=euromillions] .grid-title .euromillions-content{
    display:inline-block;
}

[data-theme=loto] .grid-title .euromillions-content, [data-theme=euromillions] .grid-title .loto-content{
    display:none;
}

[data-theme=eurodreams] .grid-border.grid-border-dream{
    margin-top:35px;
}

[data-theme=loto] .grid-border.grid-border-dream .grid-title img,[data-theme=euromillions] .grid-border.grid-border-dream .grid-title img{
    display:none;
}

[data-theme=eurodreams] .grid-border.grid-border-dream .grid-title span{
    display:none;
}

[data-theme=eurodreams] .grid-border.list-group-item.grid-border-dream{
    margin-top:35px;
}

[data-theme=eurodreams] .grid-border.grid-border-dream .grid-title{
    position: absolute;
    top: 0;
    margin: auto;
    margin-top: -26px;
    background: none;
    display: flex;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

[data-theme=eurodreams] .grid-border.grid-border-dream .grid-title img {
    margin-left: -16px;
}

[data-theme=euromillions] .grid-title{
    border-radius: 15px;
    background: #f6ba00;
    color: #010d6c;
    margin-top: -30px;
    margin-inline: auto;
    left: 0;
    right: 0;
    padding-left: 20px;
    padding-right: 20px;
    width: fit-content;
}

.etoileplus-block{
    display:none;
}

.etoileplus-block.active{
    display:block;
}

.fdj-tooltip{
    --bs-tooltip-bg:var(--color-btn-icon);
}

.table-fixed {
    table-layout: fixed;
}

.grid-hero{
    rotate:-5deg;
}

.section-gains{
    padding-bottom:7.5em;
    padding-top:7.5em;
}

.slogan {
    background: transparent;
    background-color: rgba(0, 0, 0, 0.3);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
    padding: 20px;
    font-family: 'lobster';
    color: white;
}

.slogan p {
    text-align: left;
    display: table-cell;
    vertical-align: middle;
}

.btn-game{
    -webkit-appearance: none;
    -moz-appearance: none;
    text-decoration: none;
    font-size: 40px;
    font-family: 'roboto';
    font-weight:100;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 0px;
    padding-bottom: 0px;
    white-space: normal;
    font-weight:bold;
    border: 4px solid var(--border-button);
    border-radius: 15px;
    background: var(--background-button);
    color: var(--color-button);
}

.btn-game.btn-sm{
    font-size:20px;
}

.btn-game:hover {
    background: var(--background-hover-button);
    color: var(--color-hover-button);
    border-color: var(--border-hover-button);
}

.game-gain{
    position: relative;
    padding:0px 0px 0px 0px;
    display: flex !important;
    align-items: center !important;
    font-weight: bold;
    margin-bottom: 0;
    line-height: 65px;
}

.card-euromillions .game-gain{
    color:#f6ba00;
}

.game-gain span{
    line-height: 30px;
    text-align: left;
}

.game-gain-value{
    font-size:75px;
    float:left;
}

.eurodreams-gain{
    font-size:50px;
    font-weight: bold;
    margin:0;
    line-height: 45px;
}

.edit-content-top {
    position: relative;
    width: 100%;
    height: 70px;
}

.edit-content-center {
    position: relative;
    width: 100%;
    height: calc(100% - 125px);
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.edit-content-bottom {
    position: relative;
    width: 100%;
    height: 55px;
}

.ticket-hero{
    bottom:0px !important;
    right:0px !important;
    left: unset !important;
    top: unset !important;
    rotate:15deg;
}

.text-highlight{
    /*https://stackoverflow.com/questions/13426875/text-border-using-css-border-around-text*/
    color:white;
    text-shadow: -1px -1px 0 var(--color-highlight), 0 -1px 0 var(--color-highlight), 1px -1px 0 var(--color-highlight), 1px 0 0 var(--color-highlight), 1px 1px 0 var(--color-highlight), 0 1px 0 var(--color-highlight), -1px 1px 0 var(--color-highlight), -1px 0 0 var(--color-highlight);
}

.text-highlight-blue{
    color:white;
    text-shadow: -1px -1px 0 var(--color-secondary), 0 -1px 0 var(--color-secondary), 1px -1px 0 var(--color-secondary), 1px 0 0 var(--color-secondary), 1px 1px 0 var(--color-secondary), 0 1px 0 var(--color-secondary), -1px 1px 0 var(--color-secondary), -1px 0 0 var(--color-secondary);
}

.help-tabs {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    width: 100%;
}

.help-tabs li button{
    position:relative;
}



.help-list{
    display: grid;
    grid-row-gap: .5rem;
    row-gap: .5rem;
    list-style: none;
    font-weight: 400;
    margin: 0;
    padding: 0;
}

/*.help-list li a{
    padding: .75rem .75rem 1rem;
    cursor: pointer;
    align-items: center;
    display: grid;
    grid-template-columns: 1fr 1.5rem;
    transition: background-color .2s linear;
    background-color: white;
    position: relative;
    border: 5px solid red;
    border-radius: 15px;
    isolation: isolate;
}*/

/*.help-list li a:before{
    content: "";
    z-index: 1;
    background: #313131;
    position: absolute;
    inset: 0;
    clip-path: polygon(0 calc(100% - .3125rem), 0 .3125rem, .3125rem 0, calc(100% - .3125rem) 0%, 100% .3125rem, 100% calc(100% - .3125rem), calc(100% - .3125rem) 100%, .3125rem 100%, 0 calc(100% - .3125rem), 1px calc(100% - (.3125rem + 1px)), calc(.3125rem + 1px) calc(100% - 1px), calc(100% - (1px + .3125rem)) calc(100% - 1px), calc(100% - 1px) calc(100% - (1px + .3125rem)), calc(100% - 1px) calc(1px + .3125rem), calc(100% - (1px + .3125rem)) 1px, calc(1px + .3125rem) 1px, 1px calc(1px + .3125rem), 1px calc(100% - (.3125rem + 1px)));
    pointer-events: none;
    visibility: visible;
}*/

.help-list li a:hover {
    background-color: #313131;
    position: relative;
    clip-path: polygon(.375rem 0%, calc(100% - .375rem) 0%, 100% .375rem, 100% calc(100% - .375rem), calc(100% - .375rem) 100%, .375rem 100%, 0% calc(100% - .375rem), 0% .375rem);
    isolation: isolate;
}

.help-list-element{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.help-img{
    border:5px solid red;
    width:40px;
    height:40px;
}

.help-list-element-title{
    font-weight: 400;
    font-stretch: normal;
    letter-spacing: normal;
    font-style: normal;
    color: #f5f5f5;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 700;
    font-family: LambotypeVariable-Cnd-Bold !important;
    text-transform: uppercase;
    text-overflow: ellipsis;
    overflow: hidden;
    border:2px solid red;
    background:red;
}

.help-list-element-content{
    font-stretch: normal;
    letter-spacing: normal;
    font-style: normal;
    color: blue;
    font-size: 1rem;
    line-height:1.375rem;
    font-weight: 400;
    text-overflow: ellipsis;
    overflow: hidden;
}

.img-64{
    width:64px;
    height:64px;
    border:2px solid var(--color-primary);
    background:var(--color-primary);
    border-radius:15px;
}

.help-list-element-content ul {
  list-style: none;
  padding: 0;
}
.help-list-element-content ul li {
  margin: 0;
  margin-bottom: 0.5em;
  padding-left: 1em;
  position: relative;
}
.help-list-element-content ul li:after {
  content: "";
  height: 0.5em;
  width: 0.5em;
  background: #D2153A;
  display: block;
  position: absolute;
  transform: rotate(45deg);
  top: 0.4em;
  left: 0;
}

.help-list-arrow{
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    color: #f5f5f5;
}

.help-list-arrow svg {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    vertical-align: baseline;
}

/*--------- Morph Button: Default Styles */
.morph-button{
    position:relative;
    bottom: 0;
    left: 0;
}

.morph-button.morph-button-overlay{
    position: relative;
    margin: auto;
}

.morph-login.error .morph-content {
    /* Start the shake animation and make the animation last for 0.5 seconds */
    animation: vibrate 0.5s;
    animation-duration: 1s;
}

.morph-login.error h2, 
.morph-login.error .content-style-form .icon-close, 
.morph-login.error label, 
.morph-login.error .content-style-form .input-icon > [class*="fa-"],
.morph-login.error a.forgot_password,.subscribe-error{
    color: red;
}

.subscribe-error{
    display:none;
}

.subscribe-error.active{
    display:block;
}

.morph-login.error .content-style-form button{
    background: red;
}

.morph-button-modal-3 > button.btn-error{
    background-color: red;
    animation: vibrate 0.5s;
    animation-duration: 1s;
}

.morph-button-fixed > button.btn-error:hover{
    background: white;
    color: red;
    border-color: red;
}

.morph-button-modal.open.error .morph-content{
    border: 4px solid red;
}

.morph-login.error .content-style-form .icon-close:hover {
    color: white;
}

.morph-login.error .content-style-form input[type="email"], .morph-login.error .content-style-form input[type="password"]{
    border: 2px solid red;
    color: red;
}

@keyframes vibrate {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(-1deg); }
    20% { transform: rotate(1deg); }
    30% { transform: rotate(0deg); }
    40% { transform: rotate(1deg); }
    50% { transform: rotate(-1deg); }
    60% { transform: rotate(0deg); }
    70% { transform: rotate(-1deg); }
    80% { transform: rotate(1deg); }
    90% { transform: rotate(0deg); }
    100% { transform: rotate(-1deg); }
}

.morph-button > button {
	/*position: relative;
	padding: 0 1em;
	border: none;
	background-color: #e85657;
	color: #f9f6e5;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
	line-height: 80px;
	overflow: hidden;*/
    -webkit-appearance: none;
    -moz-appearance: none;
    text-decoration: none;
    font-size:40px;
    font-family:'roboto';
    font-weight: 100;
    padding-left: 15px;
    padding-right: 15px;
    font-weight:bold;
    padding-top: 0px;
    padding-bottom: 0px;
    white-space: normal;
    border: 4px solid var(--border-button);
    border-radius: 15px;
}

.morph-button-fixed, .morph-button-fixed .morph-content {
    width:251px;
    height: 68px;
}

@media (max-width: 1399px) {
    .morph-button-fixed, .morph-button-fixed .morph-content {
        width:213.5px;
    }
}

@media (max-width: 991px) {
    .morph-button-fixed, .morph-button-fixed .morph-content {
        width:336px;
    }

    .btn-game {
        margin-bottom: .5rem !important;
    }

    .ticket-hero{
        rotate: 0deg;
    }
}

.morph-button-modal::before {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 800;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    pointer-events: none;
}

.morph-button-fixed .morph-content {
    position: fixed;
    z-index: 900;
    opacity: 0;
    border-radius:15px;
    -webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
    transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

.morph-button-fixed .morph-content.morph-forgotpassword{
    opacity: 0;
    z-index:21;
}

.animate{
	animation-duration: 0.5s;
	animation-timing-function: ease;
	animation-fill-mode: both;
}

#toforgotpassword:target ~ #morph-wrapper #forgotpassword,
#tologin:target ~ #morph-wrapper #login{
	z-index: 22;
	animation-name: fadeInLeft;
	animation-delay: .1s;
}

@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translateX(-20px);
	}
	
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.morph-button-modal .morph-content {
    overflow: hidden;
    -webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
    transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

.morph-button-modal-2 > button, .morph-button-modal-2 .morph-content, .morph-button-modal-3 > button, .morph-button-modal-3 .morph-content {
    background-color: var(--background-button);
    color: var(--color-button);
}

.morph-button .morph-content, .morph-button.open .morph-content, .morph-button-modal-4 .morph-clone {
    -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
    transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.morph-button-fixed > button:hover {
    background: var(--background-hover-button);
    color: var(--color-hover-button);
    border-color: var(--border-hover-button)
}

.morph-button-fixed > button {
    position: relative;
    z-index: 1000;
    width: 100%;
    height: 100%;
    -webkit-transition: opacity 0.1s 0.5s;
    transition: opacity 0.1s 0.5s;
}

.morph-button-fixed .morph-content > div {
    visibility: hidden;
    height: 0;
    opacity: 0;
    -webkit-transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
    transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
}

.morph-button-fixed.open .morph-content > div {
    visibility: visible;
    height: auto;
    opacity: 1;
    -webkit-transition: opacity 0.3s 0.5s;
    transition: opacity 0.3s 0.5s;
}

.morph-button-modal-2.open .morph-content > div, .morph-button-modal-3.open .morph-content > div {
    -webkit-transition: opacity 0.3s 0.3s;
    transition: opacity 0.3s 0.3s;
}



.content-style-form {
    position: relative;
    text-align: left;
}

.morph-button.open > button {
    pointer-events: none;
}

.morph-button-fixed.open > button {
    opacity: 0;
    -webkit-transition: opacity 0.1s;
    transition: opacity 0.1s;
}

.morph-button-modal.open .morph-content {
    top: 50% !important;
    left: 50% !important;
    margin: -210px 0 0 -300px;
    width: 600px;
    height: 420px;
    border: 4px solid var(--border-button);
    border-radius: 15px;
    -webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
    transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

.morph-button-modal-2.open .morph-content {
    margin: -210px 0 0 -350px;
    width: 700px;
    height: 450px;
}

.morph-button-modal-3.open .morph-content {
    margin: -285px 0 0 -400px;
    width: 800px;
    height: 600px;
}

@media (max-width: 767px) {
    .morph-button-fixed, .morph-button-fixed .morph-content {
        width:100%;
    }

    .morph-button-modal-2.open .morph-content{
        width: calc(100% - 20px);
        left: 0px !important;
        right: 0px;
        margin-left: 10px;
    }
}

@media (max-width: 550px) {
    .parallax-3d{
        margin-top:100px;
    }
}


.morph-button-fixed.open .morph-content:not(.morph-forgotpassword) {
    opacity: 1;
}

.morph-button-fixed.active .morph-content:not(.morph-forgotpassword)  {
    z-index: 1900;
}

.morph-button-fixed.active > button {
    z-index: 2000;
}

.morph-button-modal.open::before {
    opacity: 1;
    pointer-events: auto;
}

.morph-button.open .morph-content {
    pointer-events: auto;
}

.morph-button-modal.active::before {
    z-index: 1800;
}

.icon-close {
    position: absolute;
    z-index: 100;
    display: block;
    overflow: hidden;
    text-align: center;
    line-height: 2;
    cursor: pointer;
}

.content-style-form .icon-close {
    top: 0;
    right: 1rem;
    color: var(--color-button);
    font-size: 2rem;
}

.js .content-style-form-1 h2, .js .content-style-form-1 p, .js .content-style-form-1 .icon-close {
    opacity: 0;
    -webkit-transition: opacity 0.2s 0.35s, -webkit-transform 0.2s 0.35s;
    transition: opacity 0.2s 0.35s, transform 0.2s 0.35s;
    -webkit-transform: scale(0.85);
    transform: scale(0.85);
}

.morph-button.open .content-style-form-1 h2, .morph-button.open .content-style-form-1 p, .morph-button.open .content-style-form-1 .icon-close {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.content-style-form h2 {
    margin: 0;
    padding: 0.4em 0 0em;
    text-align: center;
    font-weight: 100;
    font-size: 3em;
}

.js .content-style-form-1 h2, .js .content-style-form-1 p, .js .content-style-form-1 .icon-close {
    opacity: 0;
    -webkit-transition: opacity 0.2s 0.35s, -webkit-transform 0.2s 0.35s;
    transition: opacity 0.2s 0.35s, transform 0.2s 0.35s;
    -webkit-transform: scale(0.85);
    transform: scale(0.85);
}

.morph-button.open .content-style-form-1 h2, .morph-button.open .content-style-form-1 p, .morph-button.open .content-style-form-1 .icon-close {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.content-style-form .icon-close:hover {
    color: var(--color-hover-button-close);
}

.content-style-form form {
    padding: 5px 15px;
}

.content-style-form button {
    display: block;
    cursor: pointer;
    padding: 1em;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 800;
    font-size: 1.5em;
    border: 2px solid white;
    background: linear-gradient(in oklch to right,hsl(var(--twc-primaryFromGradient)),hsl(var(--twc-primaryToGradient)));
    color:white;
    font-family: 'lobster';
}

.content-style-form button:hover {
    color: hsl(var(--twc-primary));
    border-color: hsl(var(--twc-primary));
    background: white;
}

.content-style-form label {
    display: inline-block;
    padding: 10px 0 0;
    color: var(--color-button);
    letter-spacing: 1px;
    font-weight: 100;
}

.content-style-form label.checkbox-container{
    display: inline-flex;
    position: relative;
    padding:0;
    cursor: pointer;
    line-height:45px;
    margin-bottom: 10px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.content-style-form label.checkbox-container span.text{
    background: #3643a7;
    color: white;
    border-radius: 25px;
    padding-left: 62px;
    padding-right: 10px;
    position: relative;
    margin: auto;
    top: 0;
    bottom: 0;
    height: 45px;
    margin-left: -55px;
}

span.input-icon {
    display: block;
    position: relative;
}

.content-style-form input[type="email"], .content-style-form input[type="password"], .content-style-form input[type="text"] {
    padding: 10px 10px 10px 40px;
    width: 100%;
    border: 2px solid var(--border-button);
    background: transparent;
    color: var(--color-button);
    font-weight: 300;
    border-radius:0;
}

.content-style-form input[type="password"]{
    padding: 10px 40px 10px 40px;
}

.content-style-form input::placeholder {
  color: white;
  opacity: 0.8; /* Firefox */
}

.content-style-form .input-icon > [class*="fa-"] {
    bottom: 0;
    color: var(--color-button);
    display: inline-block;
    left: 5px;
    line-height: 50px;
    padding: 0 3px;
    position: absolute;
    top: 0;
    z-index: 2;
    font-size: 1.8rem;
}

.content-style-form .input-icon .password-show{
    right:5px;
    left: inherit;
}

.content-style-form input:focus {
    border-color: white;
    color: white;
    outline: none !important;
    box-shadow: none !important;
    transition: all 0.2s linear;
}

.content-style-form .input-icon > input:focus + [class*="fa-"] {
    color: white;
}

a.forgot_password {
    color: white;
    font-size: 1.5rem;
}

a.forgot_password:hover{
    color:white;
}

/* Hide the browser's default checkbox */
.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: relative;
    top: 0;
    left: 0;
    z-index:1;
    height: 55px;
    width: 55px;
    background-color: white;
    border:5px solid red;
    border-radius:15px;
}

.checkmark span {
    width: 20px;
    height: 20px;
    border:2px solid red;
}

/* On mouse-over, add a grey background color */
.checkbox-container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
/*.checkbox-container input:checked ~ .checkmark {
    background-color: #2196F3;
}*/

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
    left: 20px;
    top: 7px;
    width: 10px;
    height: 25px;
    border: solid red;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


/* 1.4 Back to top button ------------------------*/
.btn-scroll-top {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ar-btn-scroll-top-size);
    height: var(--ar-btn-scroll-top-size);
    font-size: var(--ar-btn-scroll-top-font-size);
    color: var(--ar-btn-scroll-top-color) !important;
    text-decoration: none;
    box-shadow: var(--ar-btn-scroll-top-box-shadow);
    opacity: 0;
    transition: transform .25s ease-in-out, opacity .25s;
    transform: scale(0);
    border-radius: 50%;
}

.btn-scroll-top.show {
    opacity: 0.3;
    transform: scale(1);
}

.btn-scroll-top.show:hover{
    transition: color .2s ease;
    opacity: 1;
}

.btn-scroll-top::before {
    position: absolute;
    top: .0625rem;
    left: .0625rem;
    z-index: -1;
    width: calc(var(--ar-btn-scroll-top-size) - .125rem);
    height: calc(var(--ar-btn-scroll-top-size) - .125rem);
    content: "";
    background-color: var(--ar-btn-scroll-top-bg);
    border-radius: 50%;
}

.btn-scroll-top>svg {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    transform: rotate(90deg);
}

@media (min-width: 992px) {
    [data-sidebar=on] .btn-scroll-top {
        right: 410px;
    }
}

/* 1.5 Inputs ------------------------*/
/*Floating text inputs (bootstrap modified)*/
.input-floating-label.form-floating > .form-control, 
.input-floating-label.form-floating > .form-control-plaintext,
.input-floating-label.form-floating > .form-select {
    height: calc(3rem + 2px);
    min-height: calc(3rem + 2px);
}

.input-floating-label.form-floating > label {
    padding: 0.75rem;
    height: auto;
}

.input-floating-label.form-floating > .form-control:focus, 
.input-floating-label.form-floating > .form-control:not(:placeholder-shown), 
.input-floating-label.form-floating > .form-control-plaintext:focus, 
.input-floating-label.form-floating > .form-control-plaintext:not(:placeholder-shown) {
    padding-top: 0.7rem;
}

.input-floating-label.form-floating > .form-control:focus ~ label,
.input-floating-label.form-floating > .form-control:not(:placeholder-shown) ~ label, 
.input-floating-label.form-floating > .form-control-plaintext ~ label, 
.input-floating-label.form-floating > .form-select ~ label {
    -webkit-transform: scale(0.85) translateY(-1.2rem) translateX(0.3rem) !important;
    transform: scale(0.85) translateY(-1.2rem) translateX(0.3rem) !important;
    background: #fff;
    padding: 0.3rem;
}

/*Checkbox inputs (bootstrap modified)*/
.form-check-input {
    background-color: transparent;
}

.form-check .form-check-input:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-color: rgba(32, 33, 36, 0.1);
}

.input-error{
    position: absolute;
    display:none;
    background: red;
    color: white;
    top: 0;
    right: 0;
    margin-top: -40px;
    padding: 5px;
    border-radius: 10px;
}

.morph-login.error .input-error.fill{
    display:block;
}

.input-error:after{
    content: "";
    position: absolute;
    display: inline-block !important;
    width: 0;
    height: 0;
    bottom: 0;
    margin-bottom: -14px;
    margin-right: 15px;
    right: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #f00;
}

/* 1.6 Footer ------------------------*/
footer a{
    color: hsl(var(--twc-primary));
}

.footer-top{
    background:linear-gradient(in oklch to right,hsl(var(--twc-primaryFromGradient)),hsl(var(--twc-primaryToGradient)));
}

.footer-top a, .footer-top p{
    color:hsl(var(--twc-background));
}

.footer-bottom{
    background-color: #3d3d3d;
}

.footer-bottom{
    color: hsl(var(--twc-primary));
}

.footer-bottom p{
    font-size: 20px;
    margin: 25px 0px;
    font-family: 'Lobster', cursive;
    color: hsl(var(--twc-primary));
}

.menu_head {
    color:hsl(var(--twc-background));
    line-height: 24px;
    margin: 15px 0px 35px 0px;
    font-family: 'Lobster', cursive;
}

.social-icons ul li a {
    background-color: rgba(0, 0, 0, .2);
    border-radius: 4px;
    height: 36px;
    width: 36px;
    line-height: 36px;
    display: block;
    font-size: 16px;
    opacity: 0.8;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.4s;
    -o-transition-property: all;
    -o-transition-duration: 0.4s;
    transition-property: all;
    transition-duration: 0.4s;
}

.social-icons ul li a i {
    line-height: 36px;
}

.social-icons ul li a:hover {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    color: #fff;
}

.social-icons ul li a.facebook:hover {
    background-color: #3b5999;
}

.social-icons ul li a.twitter:hover {
    background-color: #2ac6f7;
}

.social-icons ul li a.youtube:hover {
    background-color: red;
}

/*============================================================
      -         2. Navigation          -
==============================================================*/

/* 2.1 Guest Navbar ------------------------*/
.navbar.position-absolute {
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1030;
}

.navbar-collapse:not(.in) .navbar-nav>li {
    position: relative;
    height: 79px;
    margin-right: 20px;
    -webkit-box-shadow: -2px 0px 2px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: -2px 0px 2px 0px rgba(0,0,0,0.75);
    box-shadow: -2px 0px 2px 0px rgba(0, 0, 0, 0.75);
    margin-bottom: -15px;
    line-height: 60px;
}

.navbar-collapse:not(.in) .navbar-nav>li:after {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    bottom: 0;
    border-style: solid;
    border-width: 0 11px 13px 0;
    margin-left: -11px;
    border-color: transparent hsl(195deg 86.36% 37.13%) transparent transparent;
    left: 0;
}

.navbar-collapse:not(.in) .navbar-nav>li > a {
    display: block;
    width: 100%;
    height: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

.navbar-dark .navbar-nav .nav-link {
    color: white;
}

.navbar img, .navbar figure {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

.navbar-collapse:not(.in) .navbar-nav>li a:not(.active):hover {
    background: linear-gradient(in oklch to right,hsl(195deg 86.36% 37.13%),hsl(var(--twc-primaryToGradient)));
    color: white;
}

.navbar-collapse:not(.in) .navbar-nav>li a.active {
    background: white;
    color: hsl(var(--twc-primary));
}

@media (min-width: 1200px) {
    .navbar img.navbar-brand-item {
        height: 40px;
        width: auto;
    }
}

/* 2.2 App Navbar ------------------------*/
.card-links{
    border-radius:1rem;
    color:white;
}

.card-links.bg-loto{
    background:var(--card-loto-background);
}

.card-links.bg-eurodreams{
    background:#781ea6;
}

.navbar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
    height: 120px;
    background:var(--background-color);
}

/* 2.3 App Sidebar ------------------------*/
.sidebar {
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(4px);
    background: var(--sidebar-background);
    overflow: auto;
    z-index: 110;
    position: fixed;
    top: 0;
    bottom: 0;
    width: 400px;
}

.sidebar.open{
    transform: none;
    box-shadow: 0px 1px 9px -3px rgba(0, 0, 0, 0.05);
    transition: transform .3s ease-in-out !important;
    right: 0;
   
}

.sidebar-body{
    flex-grow: 1;
    overflow-y: auto;
    padding-left: 1em;
    padding-right: 1em;
}

.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
    z-index: 109;
    background-color: rgba(0, 0, 0, 0.2);
    animation: animation-drawer-fade-in .3s ease-in-out 1;
    z-index:109;
}

@media (min-width: 992px) {
    .sidebar {
        right: -400px;
        width: 400px;
        z-index: 98;
        transition: right .3s;
    }

    .sidebar-menu{
        display:none !important;
    }

}

@media (max-width: 991.98px){
    .sidebar {
        right: 0;
        transform: translateX(100%);
    }

    
}

.settings-toggle{
    background: #fff;
    color: #000;
    position: fixed;
    top: 50%;
    z-index: 10;
    right: 0;
    width: 54px;
    height: 122px;
    padding: .5rem;
    border-top-left-radius: .2rem;
    border-bottom-left-radius: .2rem;
    box-shadow: -5px 0 10px #0000001a;
    transition: all .1s ease-in-out;
    cursor: pointer;
}

.settings-toggle-option svg {
    stroke-width: 2;
}

.settings-toggle-option-text svg {
    transform: rotate(-90deg);
}

.feather {
    width: 18px;
    height: 18px;
}

.settings-toggle-option {
    display: block;
    text-align: center;
    text-transform: uppercase;
    font-size: .875rem;
    font-weight: 500;
    writing-mode: vertical-rl;
    color: #000;
    background: #edf2f5;
    padding: .5rem;
    border-radius: .2rem;
    height: 36px;
}

.settings-toggle-option:hover {
    background: #e4ebf0;
    color: #000;
}

.settings-toggle-option-text {
    height: 106px;
}

.settings-toggle-option:first-child {
    color: #1863de;
    margin-bottom: .5rem;
}

/*============================================================
      -         3. Homepage          -
==============================================================*/

/* 3.1 Img comparison slider ------------------------*/
.landing img, .landing figure {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* 3.2 Layouts ------------------------*/
.card {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .15);
}

.card-white{
    background:white;
    padding:15px;
}

.card-white .card-body{
    color:white;
    font-size:40px;
}

.grid-fdj{
    background: var(--card-background);
    border-radius: 0 !important;
    border: 0 !important;
}

[data-theme="loto"] .grid-fdj{
    padding: 0px 50px 50px 50px;
    background: white;
}

.grid-fdj .card-body{
    border: 50px solid white;
    border-top-width: 3px;
    border-bottom-width: 3px;
    border-radius : 0;
    color: white;
    position: relative;
    padding:var(--grid-fdj-card-body-padding);
}

.grid-chapter-information, [data-theme="eurodreams"] .grid-chapter-text{
    display:none;
}

[data-theme="eurodreams"] .grid-chapter-information, .grid-chapter-text{
    display:block;
}

.grid-chapter-text{
    font-family: helvetica;
}

[data-theme="loto"] .grid-chapter-text span{
    text-shadow: -1px -1px 0 var(--grid-chapter-text-color), 0 -1px 0 var(--grid-chapter-text-color), 1px -1px 0 var(--grid-chapter-text-color), 1px 0 0 var(--grid-chapter-text-color), 1px 1px 0 var(--grid-chapter-text-color), 0 1px 0 var(--grid-chapter-text-color), -1px 1px 0 var(--grid-chapter-text-color), -1px 0 0 var(--grid-chapter-text-color);
}

[data-theme="loto"] .grid-chapter-text span:not(.stars_text){
    text-shadow: -1px -1px 0 var(--grid-chapter-text-color), 0 -1px 0 var(--grid-chapter-text-color), 1px -1px 0 var(--grid-chapter-text-color), 1px 0 0 var(--grid-chapter-text-color), 1px 1px 0 var(--grid-chapter-text-color), 0 1px 0 var(--grid-chapter-text-color), -1px 1px 0 var(--grid-chapter-text-color), -1px 0 0 var(--grid-chapter-text-color);
}

[data-theme="loto"] .grid-chapter-text span.stars_text{
    text-shadow: -1px -1px 0 #004494, 0 -1px 0 #004494, 1px -1px 0 #004494, 1px 0 0 #004494, 1px 1px 0 #004494, 0 1px 0 var(--grid-chapter-text-color), -1px 1px 0 #004494, -1px 0 0 #004494;
}

[data-theme="euromillions"] .grid-chapter-text span{
    color: var(--grid-chapter-text-color);
}

[data-theme="eurodreams"] .grid-fdj .card-body .indication > span{
    font-size: 20px;
}

.grid-fdj .card-body:first-child{
    border-top-width: 15px;
}

.grid-fdj .card-body:last-child{
    border-bottom-width: 50px;
}

[data-theme="loto"] .grid-fdj .card-body{
    border:none;
    background: var(--card-background);
}

[data-theme="loto"] .grid-fdj .card-body:first-child{
    background:white;
    color:black;
}

[data-theme="loto"] .grid-fdj .card-body:nth-child(2){
    border-bottom:0;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

[data-theme="loto"] .grid-fdj .card-body:last-child{
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}

.grid-fdj .card-body:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: var(--grid-fdj-card-body-border-radius);
    outline: 6px solid #ffffff;
}

[data-theme="loto"] .grid-fdj .card-body:before{
    border-radius:0;
    outline:none;
} 

[data-theme="eurodreams"] .grid-fdj .card-body:last-child:before {
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;
}

[data-theme="eurodreams"] .grid-fdj .card-body:first-child:before{
    border-top-left-radius:15px;
    border-top-right-radius:15px;
}

.grid-fdj .card-body p{
    position: relative;
    font-size: 18px;
    font-family: helvetica;
    margin-left: 10px;
    padding-left: 0;
}

.grid-fdj .card-body .grid-chapter{
    padding-top:var(--grid-chapter-padding-top);
    margin-top: var(--grid-chapter-margin-top);
    position: relative;
    top: 0;
    text-indent: var(--grid-chapter-text-indent);
}

[data-theme="eurodreams"] .grid-fdj .card-body .grid-chapter{
    background: white;
    color: #781ea6;
    width: fit-content;
    padding: 3px 15px 3px 15px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    z-index:1;
    font-weight: bold;
}

.grid-chapter-number{
    background: var(--grid-chapter-number-background-color);
    color:var(--grid-chapter-number-text-color);
    position: absolute;
    left: 0;
    top: 0;
    line-height: 40px;
    font-weight: bold;
    margin: -8px 0px 0px var(--grid-chapter-number-margin-left); 
    font-size: 1.5rem;
    width: 25px;
    height: 40px;
    z-index: 1;
}

[data-theme="eurodreams"] .grid-chapter-number{
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    width: 30px;
    height: fit-content;
    margin-top: 0px;
    line-height: 30px;
}

.grid-chapter-text{
    margin-right:10px;
}

[data-theme="loto"] .grid-chapter-number:after{
    --r:12px; /* border radius */
    content: "";
    position: absolute;
    width: 20px;
    right:0;
    top:0;
    margin-right: -20px;
    aspect-ratio: 1/2;
    -webkit-mask:
    linear-gradient(-90deg,#0000 calc(var(--r)/sqrt(2)),#000 0),
    radial-gradient(var(--r) at calc(100% - var(--r)*sqrt(2)) 50%,#000 98%,#0000 101%);
    clip-path: polygon(100% 50%,0 100%,0 0);
    background: linear-gradient(45deg,var(--color-primary),var(--color-primary));
}

[data-theme="euromillions"] .grid-chapter-number{
    border-top: 20px solid transparent;
    border-left: 40px solid #f6ba00;
    border-bottom: 20px solid transparent;
    width: 0px;
    height: 0px;
    line-height: normal;
    background: none;
    display: flex;
    align-items: center !important;
}

[data-theme="euromillions"] .grid-chapter-number:after{
    content: "";
    position: absolute;
    width:6px;
    height:6px;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    background:white;
    z-index:1;
}

[data-theme="euromillions"] .grid-chapter-number span{
    position: relative;
    left: 0;
    margin-left: -45px;
}

[data-theme="loto"] .grid-chapter-number:before{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 25px;
    height: 15px;
    margin-bottom: -14px;
    aspect-ratio: 1;
    clip-path: polygon(0 0,100% 0,100% 100%);
    background: linear-gradient(45deg,#3b3ca7,#3b3ca7);
}

.card-white .card-bottom{
    color:black;
    background-color: yellow;
}

.card-white .card-text{
    color:black;
    background:white;
}

.card-loto{
    background: #00a2d9 !important;
}

.card-euromillions{
    background: #010d6c !important;
}

.card-eurodreams{
    background: #781ea6 !important;
}

.card-euromillions.card-body{
    color:#eebb05;
}

.card-euromillions .card-title{
    color:white;
}

.landing .bg-secondary {
    --ar-bg-opacity: 1;
    background-color: var(--ar-gray-100) !important;
}

.landing hr {
    color: #85878a;
}

.games-banner{
    position:relative;
    margin-left:0;
    padding:75px;
    width:100%;
    background-color: rgba(18, 15, 167, 0.5);
}

.fdj-banner{
    position:absolute;
    left: 0;
    right: 0;
    top:-60px;
    margin: auto;
    width: 80%;
}

.games-gains{
    position:relative;
    width:100%;
    padding: 30px;
}

@media (min-width: 1200px) {
    .games-banner {
        flex: 0 0 auto;
        width: 500px;
    }

    .games-gains{
        width:calc(100% - 500px);
    }

    .games-banner::before {
        content: "";
        position: absolute;
        top: -100px;
        left: 0;
        height : 0;
        width : 0;
        border-bottom : 100px solid rgba(18, 15, 167, 0.5);;
        border-left : 500px solid transparent;  
    }

    .games-banner::after {
        content: "";
        position: absolute;
        bottom: -100px;
        left: 0;
        height : 0;
        width : 0;
        border-top : 100px solid rgba(18, 15, 167, 0.5);;
        border-right : 500px solid transparent;  
    }
}

.card-rotate-left,.card-rotate-right{
    margin-bottom:15px;
}

@media (min-width: 1200px) {
     .card-rotate-left,.card-rotate-right{
        margin-bottom:0px;
    }

    .card-rotate-left{
        -webkit-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }

    .card-rotate-right{
        -webkit-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        transform: rotate(5deg);
    }
}


.fs-c{
    font-size: 4rem;
}

.swiper-tab {
    display: flex;
    flex-direction: column;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity .3s ease-in-out, visibility .3s ease-in-out;
    visibility: hidden;
    width: 100%;
}

.swiper-tab.active {
    opacity: 1;
    position: relative;
    visibility: visible;
}

.flip-card {
    background-color: transparent;
    width: 100%;
    height: 540px;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    box-shadow: none;
}

.landing img.pricing-image{
    height: 100px;
}

.flip-card:after, .paper-shadow:before{
    content: '';
    position: absolute;
    left: auto;
    background:none;
    z-index: -1;
}

.flip-card:after{
    width: 90%;
    height: 10px;
    top: 30px;
    right:8px;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

.flip-card:before{
    width: 10px;
    height: 95%;
    top: 5px;
    right:18px;
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 5px 10px 5px 10px;
}

.flip-card-front .card-body, .flip-card-back .card-body{
    background:white;
    -webkit-box-shadow: 0px -20px 36px 5px #295d92;
    -moz-box-shadow: 0px -20px 36px 5px #295d92;
    box-shadow: 0px -25px 35px 0px rgba(0,0,0,0.5);
}

.flip-card-front .card-body:before, .flip-card-back .card-body:before{
    -webkit-box-shadow: 20px 0px 25px 5px #295d92;
    -moz-box-shadow: 20px 0px 25px 5px #295d92;
    box-shadow: 22px 0px 35px 0px rgba(0,0,0,0.5);
}

.flip-card-back {
    transform: rotateY(180deg);
}

.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.card-side{
    position:absolute;
    width:16px;
    height:100%;
    background-image:url('images/logo-fdj-blue.png');
    background-repeat: repeat-y;
    background-size: 16px;
    background-position: bottom;
}

.card-center{
    position:absolute;
    width:calc(100% - 32px);
    margin: 0 auto;
}

.card-left-side{
    left:0;
    top:0;
    margin-left: 8px;
}

.card-right-side{
    right:0;
    top:0;
    margin-right: 8px;
    rotate:180deg;
}

/* -------------------------------- 

Form 

-------------------------------- */


/* 3.3 Checkout Form ------------------------*/
.checkout-radios{
    display: flex;
    flex-flow: row wrap;
}

.checkout-radio{
    flex: 1;
}

.checkout-radio input{
    display:none;
}

.checkout-radio input[type=radio]:not(:disabled) ~ label {
    cursor: pointer;
}

.checkout-radio label {
    height: 100px;
    display:block;
    background:#f3f5f7;
    color:black;
    border: 2px solid #f3f5f7;
    border-radius: 20px;
    padding: 1rem;
    margin-bottom: 1rem;
    position: relative;
}

.checkout-radio input:checked + label{
	border: 2px solid #2660aa;
	background-color: white;
}

.checkout-radio input:checked + label:after{
	content: "\2713";
    font-size:30px;
	color: #2660aa;
	position: absolute;
	top: 5px;
	right: 20px;
}

.checkout-promotion{
    color:#1b7b41;
    border-radius: 10px;
    border: 5px solid #dcf1e3;
    padding:0.1rem;
    background-color:#dcf1e3;
}

.promo-code{
    color:#0085ff;
}

/*============================================================
      -         4. Sign in          -
==============================================================*/

/* 4.1 Special icons ------------------------*/
.text-google {
    background: conic-gradient(from -45deg, #ea4335 110deg, #4285f4 90deg 180deg, #34a853 180deg 270deg, #fbbc05 270deg) 73% 55% / 150% 150% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.text-facebook {
    color: #5d82d1;
}

.btn:hover .text-google {
    -webkit-text-fill-color: white;
}

.icon-lg {
    width: 3.5rem;
    height: 3.5rem;
    line-height: 3.5rem;
    text-align: center;
    font-size: 1.2rem;
}

/* 4.2 Swipers ------------------------*/
.swiper-pagination-bullet {
    width: 30px;
    height: 3px;
    border-radius: 0;
    background-color: white;
}

/*============================================================
      -         5. Accueil espace personnel          -
==============================================================*/

/* 5.1 Lorem ------------------------*/
.theme-toggle>svg {
    stroke-linecap: round;
}

.sun-and-moon > :is(.moon, .sun, .sun-beams) {
    transform-origin: center;
}

.sun-and-moon > :is(.moon, .sun) {
    fill: var(--icon-fill);
}

.theme-toggle:is(:hover, :focus-visible) > .sun-and-moon > :is(.moon, .sun) {
    fill: var(--icon-fill-hover);
}

.sun-and-moon > .sun-beams {
    stroke: var(--icon-fill);
    stroke-width: 2px;
}

.theme-toggle:is(:hover, :focus-visible) .sun-and-moon > .sun-beams {
    stroke: var(--icon-fill-hover);
}

[data-bs-theme="dark"] .sun-and-moon > .sun {
    transform: scale(1.75);
}

[data-bs-theme="dark"] .sun-and-moon > .sun-beams {
    opacity: 0;
}

[data-bs-theme="dark"] .sun-and-moon > .moon > circle {
    transform: translateX(-7px);
}

@supports (cx: 1) {
    [data-bs-theme="dark"] .sun-and-moon > .moon > circle {
        cx: 17;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .sun-and-moon > .sun {
        transition: transform .5s var(--ease-elastic-3);
    }

    .sun-and-moon > .sun-beams {
        transition: transform .5s var(--ease-elastic-4), opacity .5s var(--ease-3);
    }

    .sun-and-moon .moon > circle {
        transition: transform .25s var(--ease-out-5);
    }

    @supports (cx: 1) {
        .sun-and-moon .moon > circle {
            transition: cx .25s var(--ease-out-5);
        }
    }

    [data-bs-theme="dark"] .sun-and-moon > .sun {
        transition-timing-function: var(--ease-3);
        transition-duration: .25s;
        transform: scale(1.75);
    }

    [data-bs-theme="dark"] .sun-and-moon > .sun-beams {
        transition-duration: .15s;
        transform: rotateZ(-25deg);
    }

    [data-bs-theme="dark"] .sun-and-moon > .moon > circle {
        transition-duration: .5s;
        transition-delay: .25s;
    }
}


@keyframes swing {
    0% {
      transform: rotate(0deg);
    }
    10% {
      transform: rotate(10deg);
    }
    30% {
      transform: rotate(0deg);
    }
    40% {
      transform: rotate(-10deg);
    }
    50% {
      transform: rotate(0deg);
    }
    60% {
      transform: rotate(5deg);
    }
    70% {
      transform: rotate(0deg);
    }
    80% {
      transform: rotate(-5deg);
    }
    100% {
      transform: rotate(0deg);
    }
}

.page-wrapper .sidebar-wrapper,
.sidebar-wrapper .sidebar-brand > a,
.sidebar-wrapper .accordion-button::after,
.sidebar-wrapper .sidebar-menu .accordion-body li a:before,
.sidebar-wrapper ul li a i,
.sidebar-wrapper .sidebar-menu ul li a,
#show-sidebar,
#close-sidebar {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.home {
    display: flex;
    width: 100%;
    min-height: 100vh;
    min-width: 0;
    transition: margin-left .35s ease-in-out, left .35s ease-in-out, margin-right .35s ease-in-out, right .35s ease-in-out;
    flex-direction: column;
}

.sidebar-wrapper {
    width: 260px;
    height: 100%;
    max-height: 100%;
    position: fixed;
    top: 0;
    left: -300px;
    z-index: 999;
}

.sidebar .sidebar-nav {
    justify-content: center;
    align-items: center;
    display: flex;
    border-bottom: 0;
    flex-wrap: nowrap;
    margin-top: 30px;
    padding-left: 5px;
    padding-right: 5px;
}

.sidebar .sidebar-nav .nav-item {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 0;
    height: 85px;
    padding: 3px;
}

.sidebar .sidebar-nav .nav-link {
    cursor: pointer;
    border-radius: 15px;
    background-color: white;
    color:#004593;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 0;
    padding:6px;
    transition: color .2s ease;
}

.sidebar .sidebar-nav .nav-link.img2 img:last-child{
    display:none;
}

.sidebar .sidebar-nav .nav-link.img2:hover img:last-child{
    display:block;
}

.sidebar .sidebar-nav .nav-link.img2:hover img:first-child{
    display:none;
}

[data-theme="loto"] .sidebar .sidebar-nav .nav-link:not(.active) {
    color:var(--color-secondary);
    background-color: white;
}

[data-theme="loto"] .sidebar .sidebar-nav .nav-link:not(.active):hover{
    color: rgb(255, 255, 255);
    background: var(--color-tab);
}

[data-theme="euromillions"] .sidebar .sidebar-nav .nav-link:not(.active) {
    color:var(--color-primary);
    background-color: white;
}

[data-theme="euromillions"] .sidebar .sidebar-nav .nav-link:not(.active):hover {
    color: rgb(255, 255, 255);
    background: var(--color-tab);
}

[data-theme="fdj"] .sidebar .sidebar-nav .nav-link.active {
    color:white;
    background-color: #004593;
}

[data-theme="fdj"] .sidebar .sidebar-nav .nav-link.img2.active img:last-child {
    display:block;
}

[data-theme="fdj"] .sidebar .sidebar-nav .nav-link.img2.active img:first-child {
    display:none;
}

[data-theme="fdj"] .sidebar .sidebar-nav .nav-link:not(.active):hover{
    background: #004593;
}

.sidebar .sidebar-toolbar .btn {
    background-color: #282d87;
    color:white;
}

.sidebar .sidebar-toolbar .btn:hover{
    background-color: white;
    color:#004593;
}

a.link-profile{
    color:white;
}

a.link-profile:hover{
    color:#004593 !important;
}

.modal-filter .modal-content{
    background:linear-gradient(45deg, rgb(120 30 166 / 40%), rgb(240 129 89 / 40%), rgb(238 122 157 / 40%), rgb(255 60 105 / 40%), rgb(91 197 242 / 40%), rgb(82 179 116 / 40%));
    background: var(--modal-background);
    border:none;
}

.modal-filter .modal-title,.modal-filter .btn-close{
    color:white;
}

.pt-15 {
    padding-top: 3.75rem !important;
}

.sidebar-body::-webkit-scrollbar {
    width: 9px;
    height: 7px;
    
}

.sidebar-body::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
}

.sidebar-body::-webkit-scrollbar-thumb {
    background: var(--color-scrollbar);
    border: 0px none #ffffff;
    border-radius: 5px;
}

.sidebar-body::-webkit-scrollbar-thumb:hover {
    background: white;
}

.sidebar-body::-webkit-scrollbar-thumb:active {
    background: white;
}

.sidebar-body::-webkit-scrollbar-track {
    background: transparent;
    border: 0px none #ffffff;
    border-radius: 50px;
}

.sidebar-body::-webkit-scrollbar-track:hover {
    background: transparent;
}

.sidebar-body::-webkit-scrollbar-track:active {
    background: transparent;
}

.sidebar-body::-webkit-scrollbar-corner {
    background: transparent;
}

.sidebar-wrapper ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
  
.sidebar-wrapper a {
    text-decoration: none;
}

.sidebar-content {
    max-height: calc(100% - 30px);
    height: calc(100% - 30px);
    overflow-y: auto;
    position: relative;
}

.sidebar-wrapper .sidebar-brand {
    padding: 10px 20px;
    display: flex;
    align-items: center;
}
  
.sidebar-wrapper .sidebar-brand > a {
    text-transform: uppercase;
    font-weight: bold;
    flex-grow: 1;
}

.sidebar-wrapper .sidebar-brand #close-sidebar {
    cursor: pointer;
    font-size: 20px;
}

.sidebar-wrapper .sidebar-header {
    padding: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.sidebar-wrapper .sidebar-header .user-pic {
    float: left;
    padding: 2px;
    border-radius: 12px;
    margin-right: 15px;
    overflow: hidden;
}
  
.sidebar-wrapper .sidebar-header .user-pic img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.sidebar-wrapper .sidebar-header .user-info {
    float: left;
}

.sidebar-wrapper .sidebar-header .user-info > span {
    display: block;
}

.sidebar-wrapper .sidebar-header .user-info .user-role {
	font-size: 12px;
}

.sidebar-wrapper .sidebar-menu {
    padding-bottom: 10px;
}
  
.sidebar-wrapper .sidebar-menu .header-menu span {
    font-weight: bold;
    font-size: 14px;
    padding: 15px 20px 5px 20px;
    display: inline-block;
}
  
.sidebar-wrapper .sidebar-menu ul li a {
    width: 100%;
    text-decoration: none;
    position: relative;
    padding: 8px 30px 8px 20px;
}

.accordion-button{
    padding: 8px 30px 8px 20px;
}

.accordion-button:not(.collapsed){
    box-shadow:none;
    color: #b8bfce;
    background-color: transparent;
}
  
.sidebar-wrapper .sidebar-menu ul li a i, .accordion-button i {
    margin-right: 10px;
    font-size: 12px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 4px;
}
  
.sidebar-wrapper .sidebar-menu ul li a:hover > i::before, 
.sidebar-wrapper .sidebar-menu .accordion-button:hover > i::before{
    display: inline-block;
    animation: swing ease-in-out 0.5s 1 alternate;
}
  
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .accordion-body ul {
    padding: 5px 0;
}
  
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .accordion-body li {
    padding-left: 25px;
    font-size: 13px;
}
  
.sidebar-wrapper .sidebar-menu .accordion-body li a:before {
    content: "\f111";
    font-family: 'Font Awesome 6 Free';
    font-weight: 400;
    font-style: normal;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 10px;
    font-size: 8px;
}
  
.sidebar-wrapper .sidebar-menu ul li a span.label,
.sidebar-wrapper .sidebar-menu ul li a span.badge {
    float: right;
    margin-top: 8px;
    margin-left: 5px;
}

  
.sidebar-wrapper .sidebar-menu .sidebar-dropdown.active > a:after {
    transform: rotate(90deg);
    right: 17px;
}

.sidebar-footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    display: flex;
}
  
.sidebar-footer > a {
    flex-grow: 1;
    text-align: center;
    height: 30px;
    line-height: 30px;
    position: relative;
}
  
.sidebar-footer > a .notification {
    position: absolute;
    top: 0;
}

.chiller-theme .sidebar-wrapper {
    background: #31353d;
}

.chiller-theme .sidebar-wrapper .sidebar-header,
.chiller-theme .sidebar-wrapper .sidebar-menu {
  border-top: 1px solid #3a3f48;
}

.chiller-theme .sidebar-wrapper .sidebar-header .user-info .user-role,
.chiller-theme .sidebar-wrapper .sidebar-brand > a,
.chiller-theme .sidebar-wrapper .sidebar-menu ul li a,
.chiller-theme .sidebar-footer > a,  .accordion-button{
  color: #818896;
}

.accordion-item, .accordion-button{
    border: none;
    background-color:inherit;
}

.chiller-theme .sidebar-wrapper .sidebar-menu ul li:hover > a,
.chiller-theme .sidebar-wrapper .sidebar-header .user-info,
.chiller-theme .sidebar-wrapper .sidebar-menu .accordion-button:hover,
.chiller-theme .sidebar-wrapper .sidebar-brand > a:hover,
.chiller-theme .sidebar-footer > a:hover i,
.chiller-theme .sidebar-wrapper .sidebar-menu .accordion-collapse.show .accordion-body ul li.active a
{
  color: #b8bfce;
}

.timeline{
    max-height: 918px;
    overflow-y:auto;
}

.timeline::-webkit-scrollbar {
    width: 9px;
    height: 7px;
    
}

.timeline::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
}

.timeline::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border: 0px none #ffffff;
    border-radius: 0px;
}

.timeline::-webkit-scrollbar-thumb:hover {
    background: black;
}

.timeline::-webkit-scrollbar-thumb:active {
    background: black;
}

.timeline::-webkit-scrollbar-track {
    background: transparent;
    border: 0px none #ffffff;
    border-radius: 50px;
}

.timeline::-webkit-scrollbar-track:hover {
    background: transparent;
}

.timeline::-webkit-scrollbar-track:active {
    background: transparent;
}

.timeline::-webkit-scrollbar-corner {
    background: transparent;
}

.timeline-label {
    position: relative;
}

.timeline-label:before {
    content: "";
    position: absolute;
    left: 99px;
    width: 3px;
    top: 0;
    bottom: 0;
    background-color: var(--bs-gray-200);
}

.timeline-label .timeline-item {
    display: flex;
    align-items: flex-start;
    position: relative;
    margin-bottom: 1.7rem;
}

.timeline-label .timeline-label {
    width: 100px;
    flex-shrink: 0;
    position: relative;
    color: var(--bs-gray-800);
}

.timeline-label .timeline-badge {
    flex-shrink: 0;
    background-color: var(--bs-body-bg);
    width: 1rem;
    height: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    position: relative;
    margin-top: 1px;
    margin-left: -.5rem;
    padding: 3px !important;
    border: 6px solid var(--bs-body-bg) !important;
}

.timeline-label .timeline-content {
    flex-grow: 1;
}

.accordion-button:focus{
    box-shadow:none;
}

.accordion-button::after{
    transform : rotate(-90deg);
}

.accordion-button:not(.collapsed)::after{
    transform : rotate(0deg);
}

.page-wrapper.chiller-theme.toggled #close-sidebar {
    color: #bdbdbd;
}
  
.page-wrapper.chiller-theme.toggled #close-sidebar:hover {
    color: #ffffff;
}

.chiller-theme .sidebar-wrapper ul li:hover a i,
.chiller-theme .sidebar-wrapper .accordion-button:hover i,
.chiller-theme .sidebar-wrapper .accordion-body ul li a:hover:before,
.chiller-theme .sidebar-wrapper .accordion-button[aria-expanded=true] i,
.chiller-theme
  .sidebar-wrapper
  .sidebar-submenu
  li
  a:hover:before{
  color: #16c7ff;
  text-shadow: 0px 0px 10px rgba(22, 199, 255, 0.5);
}

.accordion-collapse {
  
}

.chiller-theme .sidebar-wrapper .sidebar-menu .header-menu span {
    color: #6c7b88;
}

.chiller-theme .sidebar-footer {
    background: #3a3f48;
    box-shadow: 0px -1px 5px #282c33;
    border-top: 1px solid #464a52;
}

.chiller-theme .sidebar-footer > a:first-child {
    border-left: none;
}
  
.chiller-theme .sidebar-footer > a:last-child {
    border-right: none;
}

.badge-pill {
    padding-right: .6em;
    padding-left: .6em;
    border-radius: 10rem;
}

.gains-container{
    position: relative;
    width:100%;
    height: 50vh;
}

.chartFlexbox{
    display:flex;
    align-items:center;
    justify-content:center;
}

.chartBox{
    width:100%;
    padding:10px;
    min-height:200px;
    min-width:300px;
}

.grid-actions,.grid-numbers{
    display:none;
}

.grid-actions.active,.grid-numbers.active{
    display:inline-block;
}

.grid-actions .dropdown-menu {
    min-width: 2rem;
    border-radius: 5px;
}

/* 5.2 Game Banner ------------------------*/
.object-cover {
    -o-object-fit: cover;
    object-fit: cover;
}

.left-0 {
    left: 0;
}

.right-0 {
    right: 0;
}

.header-game{
    position: relative;
    width: 100%;
    min-height: 16rem;
}

.header-game-inside{
    min-height: inherit;
}

.header-game-inside > picture img{
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    color: transparent;
    max-width: 100%;
    display: block;
}

.header-game-content{
    width: 100%;
    box-sizing: border-box;
    margin-inline: auto;
    padding: 3rem 2rem;
    min-height: inherit;
    height: auto;
    overflow: hidden;
}

@media screen and (min-width: 1025px){
    .header-game-content{
        max-width: 930px;
        padding: 3rem 0px;
    }
}

@media screen and (min-width: 1201px){
    .header-game-content{
        max-width: 1140px;
        padding: 3rem 0px;
    }
}

.header-game-c1{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    margin-inline: auto;
    gap: 2rem;
    align-items: center;
    overflow: hidden;
    padding: 3rem 2rem;
    min-height: 10rem;
    border-radius: 0px;
}

@media screen and (min-width: 1201px){
    .header-game-c1{
        max-width: 114rem;
    }
}

@media screen and (min-width: 1025px){
    .header-game-c1{
        max-width: 93rem;
    }
}

@media screen and (min-width: 768px){
    .header-game-c1{
        flex-direction: row;
        padding: 0px;
    }
}

.logo-bandeau img{
    height: 4rem;
    max-width: 100%;
    height: auto;
}

@media (min-width: 768px){
    .logo-bandeau {
        align-items: flex-start;
    }
}

.flex-1 {
    flex: 1 1 0%;
}

.header-game-low{
    overflow-wrap: normal;
    word-break: normal;
    font-family: Metropolis-Medium, sans-serif;
    font-size: 2rem;
    font-weight:bold;
    line-height: 1;
    --tw-text-opacity: 1;
    color: rgb(255, 255, 255);
}

.header-game-high{
    overflow-wrap: normal;
    word-break: normal;
    font-family: Metropolis-Medium, sans-serif;
    font-size: 2rem;
    font-size: 1rem;
    line-height: 1.2;
    --tw-text-opacity: 1;
    color: rgb(255, 255, 255);
}

.header-game-medium{
    overflow-wrap: normal;
    word-break: normal;
    font-family: Metropolis-Medium, sans-serif;
    font-size: 4rem;
    font-weight:bold;
    line-height: 1;
    --tw-text-opacity: 1;
    color: rgb(255, 255, 255);
}

.banner-euromillions_text {
    color: #eebb05;
}

/* 5.2 Nav pills ------------------------*/
.nav-pills.nav-euromillions .nav-link {
    color: #002ba0
}

.nav-pills.nav-euromillions .nav-link:focus, .nav-pills.nav-euromillions .nav-link:hover {
    color: #001367;
}

.nav-pills.nav-euromillions .nav-link.active, .nav-pills.nav-euromillions .show>.nav-link {
    color: #010d6c;
    background: #eebb05;
}

.nav-pills.nav-loto .nav-link.active, .nav-pills.nav-loto .show>.nav-link {
    color: white;
    background: var(--color-primary);
}

.nav-pills.nav-loto .nav-link {
    color: var(--color-primary);
}

.nav-pills .nav-link:not(.active):focus, .nav-pills .nav-link:not(.active):hover {
    color: white;
    background:var(--color-tab);
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link,  .nav-pills .nav-link:not(.active):focus, .nav-pills .nav-link:not(.active):hover{
    color: rgb(255, 255, 255);
    background: var(--color-tab);
}



/*============================================================
      -         6. Error Pages          -
==============================================================*/

/* 6.1 Layouts ------------------------*/
.stage {
    width: 300px;
    height: 300px;
    display: inline-block;
    margin: 20px;
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    -ms-perspective: 1200px;
    -o-perspective: 1200px;
    perspective: 1200px;
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    -ms-perspective-origin: 50% 50%;
    -o-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
}

.error_ball {
    display: inline-block;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 50%;
    position: relative;
    background: radial-gradient(
        circle at 50% 40%,
        #fcfcfc,
        #efeff1 66%,
        #9b5050 100%
    );
    overflow: hidden;
    animation: ballGrow 2s ease-out forwards;
    transform: scale(0.5);
}

.error_ball:after {
    content: "";
    position: absolute;
    top: 5%;
    left: 10%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(
        circle at 50% 50%,
        rgba(255, 255, 255, 0.8),
        rgba(255, 255, 255, 0.8) 14%,
        rgba(255, 255, 255, 0) 24%
    );
    -webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
    -moz-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
    -ms-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
    -o-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
    transform: translateX(-80px) translateY(-90px) skewX(-20deg);
}

.error_number {
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 300px;
    font-size: 160px;
    color: blue;
    font-family: "Roboto", sans-serif;
    font-weight:100;
    animation: ballRoll 2s ease-out;
}

.error_number:after {
    content: attr(data-number);
    position: absolute;
    transform: translateX(-75%);
    opacity: 0;
    animation: numberReveal 0.1s 1.5s reverse forwards;
}

.error_number:before {
    content: "?";
    position: absolute;
    transform: translateX(-25%);
    animation: numberReveal 0.1s 1.5s forwards;
}

@keyframes ballRoll {
    0%,
    20%,
    50% {
        opacity: 1;
        transform: translateY(0) rotateX(0) scale(1);
    }
    10%,
    35%,
    75% {
        transform: translateY(100%) rotateX(170deg) scale(0.4);
    }
    11%,
    36%,
    76% {
        transform: translateY(-100%) rotateX(-170deg) scale(0.3);
        opacity: 0;
    }
}

@keyframes ballGrow {
    0% {
        transform: scale(0.5);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes numberReveal {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.stage:nth-child(2) .error_ball,
.stage:nth-child(2) .error_number {
  animation-delay: 0.3s;
}

.stage:nth-child(2) .error_number:after,
.stage:nth-child(2) .error_number:before {
  animation-delay: 1.8s;
}

.stage:nth-child(3) .error_ball,
.stage:nth-child(3) .error_number {
  animation-delay: 0.6s;
}

.stage:nth-child(3) .error_number:after,
.stage:nth-child(3) .error_number:before {
  animation-delay: 2.1s;
}

.stage:nth-child(4) .error_ball,
.stage:nth-child(4) .error_number {
  animation-delay: 0.9s;
}

.stage:nth-child(4) .error_number:after,
.stage:nth-child(4) .error_number:before {
  animation-delay: 2.4s;
}

.objectives-list{
    width:100%;
}

.achievement-objective {
    position: relative;
    min-height: 143px;
    max-height: 2033px;
    width: 100%;
    height: 143px;
    margin-bottom: 1px;
}

.achievement-objective-bottom {
    position: absolute;
    width: 100%;
    height: 20px;
    bottom: 0;
}

.achievement-objective-bottom-left {
    position: relative;
    float: left;
    width: 150px;
    height: 100%;
    background: url(images/achievements/news-list-item-bottom-left.png) transparent;
}

.achievement-objective-bottom-center {
    position: relative;
    float: left;
    height: 100%;
    width: calc(100% - 170px);
    background: url(images/achievements/news-list-item-bottom-center.png) repeat transparent;
}

.achievement-objective-bottom-right {
    position: relative;
    float: right;
    width: 20px;
    height: 100%;
    background: url(images/achievements/news-list-item-bottom-right.jpg) transparent;
}

.achievement-objective-top {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 143px;
    top: 0px;
    display: -webkit-flex;
    display: flex;
    overflow: hidden;
}

.achievement-objective-top-left {
    position: relative;
    float: left;
    width: 152px;
    min-height: 143px;
    background: url(images/achievements/news-list-item-left.jpg) transparent;
}

.achievement-objective-top-center {
    position: relative;
    float: left;
    width: calc(100% - 172px);
    height: 100%;
    min-height: 143px;
    overflow: hidden;
}

.achievement-objective-top-right {
    position: relative;
    float: right;
    width: 20px;
    min-height: 143px;
    background: url(images/achievements/news-list-item-right.jpg) transparent;
}

.achievement-objective-icon {
    position: relative;
    width: 112px;
    height: 112px;
    margin-left: 15px;
    margin-top: 15px;
    background-size: 112px 112px;
}

.achievement-objective-icon-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #000;
    opacity: 0.4;
}

.achievement-objective-top-center {
    position: relative;
    float: left;
    width: calc(100% - 172px);
    height: 100%;
    min-height: 143px;
    overflow: hidden;
}

.achievement-objective-top-right {
    position: relative;
    float: right;
    width: 20px;
    min-height: 143px;
    background: url(images/achievements/news-list-item-right.jpg) transparent;
}

.achievement-objective-top-center-top {
    position: relative;
    width: 100%;
    height: 12px;
    background: url(images/achievements/news-list-item-center-top.jpg) repeat transparent;
}

.achievement-objective-top-center-bottom {
    position: relative;
    width: 100%;
    height: calc(100% - 12px);
    min-height: 131px;
    background: url(images/achievements/news-list-item-center.jpg) transparent;
    overflow: hidden;
}

.achievement-objective-title {
    position: relative;
    width: 100%;
    height: 43px;
    padding-left: 5px;
    padding-top: 3px;
}

.achievement-objective-content {
    position: relative;
    color: #b89668;
    font-size: 19px;
    padding: 8px;
    padding-right: 0px;
    padding-bottom: 20px;
    padding-top: 4px;
}

.achievement-flag {
    position: absolute;
    width: 90px;
    height: 127px;
    top: 0;
    right: 0;
    margin-top: -53px;
    background: url(images/achievements/flag.png) transparent;
    z-index: 4;
    margin-left: 15px;
    background-position: right center;
}

.achievement-date {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 15px;
    font-size: 18px;
    height: 17px;
    color: #dca555;
}

.achievement-points {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 30px;
    font-size: 55px;
    color: #ffa00e;
    text-shadow: -1px 0 red, 0 1px red, 1px 0 red, 0 -1px red;
}

.achievement-objective-content > div:last-child {
    line-height: 28px;
    position: relative;
    color: #aba195;
}

.achievement-objective-content p {
    padding-right: 105px;
    margin-bottom: 0;
}

.achievement-objective-title-left {
    position: absolute;
    left: 0;
    width: calc(100% - 135px);
    height: calc(100% - 4px);
    line-height: 36px;
    font-family: 'exocet';
    font-size: 25px;
    padding-left: 5px;
    color: white !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.achievement-objective-title-right {
    position: absolute;
    width: 131px;
    height: 100%;
    top: 0;
    right: 0;
    background-image: url(images/achievements/achievement-title-right.png);
    background-position: left;
}

.resize-icon {
    position: relative;
    width: 16px;
    height: 16px;
    top: 0;
    bottom: 0;
    float: left;
    margin-top: 13px;
    margin-left: 13px;
    background: url(images/achievements/resize.png) transparent;
    background-position: left top;
}

.achievement-objective.open .resize-icon:hover {
    background-position: right bottom;
}

.achievement-objective.open .resize-icon {
    background-position: left bottom;
}

.achievement-objective:hover .achievement-objective-center-top, .achievement-objective:hover .achievement-objective-bottom div {
    background-position: left bottom;
}

.achievement-objective:hover .achievement-objective-top-left, .achievement-objective:hover .achievement-objective-top-right {
    background-position: right top;
}

.achievement-objective:hover .achievement-objective-top-center-top {
    background-position: left bottom;
}

.quantity-div {
    padding-top: 5rem;
    padding-bottom: 1rem;
    margin-bottom: 0.5rem;
    height: 15px;
}

.achievement-range {
    position: relative;
    float: left;
    width: 70%;
    height: 28px;
    border-style: solid;
    border-width: 6px 4px 7px 4px;
    -moz-border-image: url("images/achievements/achievement-range.jpg") 6 4 7 4 fill stretch repeat;
    -webkit-border-image: url("images/achievements/achievement-range.jpg") 6 4 7 4 fill stretch repeat;
    -o-border-image: url("images/achievements/achievement-range.jpg") 6 4 7 4 fill stretch repeat;
    border-image: url("images/achievements/achievement-range.jpg") 6 4 7 4 fill stretch repeat;
    margin-bottom: 10px;
}

.quantity-numbers {
    position: relative;
    float: left;
    margin-left: 15px;
    color: #74572f;
    text-shadow: 1px 0px #af9678;
    word-wrap: break-word;
    width: calc(30% - 50px);
    font-family: 'exocet';
    font-size: 18px;
    line-height: 20px;
    margin-top: -8px;
}

.achievement-range::before {
    position: absolute;
    left: 0;
    top: 0;
    margin-left: -4px;
    margin-top: -6px;
    content: "";
    width: 20px;
    height: 28px;
    z-index: 1;
    background: url(images/achievements/achievement-range-left.png);
}

.achievement-range::after {
    position: absolute;
    right: 0;
    top: 0;
    margin-right: -4px;
    margin-top: -6px;
    content: "";
    width: 20px;
    height: 28px;
    z-index: 1;
    background: url(images/achievements/achievement-range-right.png);
}

.achievement-objective.open {
    height: auto;
}

.achievement-objective-content ul {
    padding: 0;
    padding-left: 5px;
    margin: 0;
    margin-top: 45px;
}

.achievement-objective-content ul li {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.achievement-objective-content input[type="checkbox"], .achievement-objective-content input[type="radio"] {
    display: none;
}

.achievement-objective-content input[type="checkbox"] + label, .achievement-objective-content input[type="radio"] + label {
    color: #bc9e78;
    font-size: 18px;
    margin-right: 15px;
    margin-bottom: 0;
}

.achievement-objective-content ul input[type="checkbox"]:disabled + label {
    color: #bc9f77;
}

.achievement-objective-content input[type="checkbox"] + label span, .achievement-objective-content input[type="radio"] + label span {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 38px;
    margin: -1px 4px 0 15px;
    vertical-align: middle;
    background: url(images/achievements/Checkbox.png) left top no-repeat;
}

.achievement-objective-content input[type="checkbox"] + label span {
    margin: -1px 4px 0 0px;
}

.progressbar-achievement {
    position: relative;
    width: calc(100% - 240px);
    margin-left: 105px;
    margin-right: 135px;
    height: 60px;
    line-height: 60px;
    margin-top: 5px;
    margin-bottom: 5px;
    background: url(images/achievements/progressbar-achievement.png);
}

.progressbar-achievement:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 105px;
    margin-left: -105px;
    background: url(images/achievements/progressbar-achievement-left.png);
}

.progressbar-achievement:after {
    content: '';
    position: absolute;
    margin-right: -130px;
    right: 0;
    top: 0;
    height: 100%;
    width: 130px;
    background: url(images/achievements/progressbar-achievement-right.png);
}

.progressbar-text {
    position: absolute;
    width: calc(100% + 110px);
    margin-left: -74px;
    left: 0;
    top: 0;
    font-size: 17px;
    z-index: 2;
    font-family: 'exocet';
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.progressbar-inside {
    position: absolute;
    width: calc(100% + 110px);
    margin-top: 16px;
    height: 31px;
    margin-left: -74px;
    z-index: 1;
}

.progressbar-percent {
    position: absolute;
    right: 0;
    width: 100px;
    height: 100%;
    line-height: 60px;
    margin-right: -100px;
    color: #bc944e;
    font-family: 'exocet';
    background: url(images/achievements/progressbar-percent.png);
    z-index: 2;
}

.achievement-progress {
    position: relative;
    width: 0%;
    height: 100%;
    background: url(images/achievements/achievement-progress.png);
}

.featofstr-achievement {
    position: relative;
    width: calc(100% - 211px);
    margin-left: 105px;
    margin-right: 106px;
    height: 60px;
    margin-top: 5px;
    margin-bottom: 5px;
    line-height: 60px;
    background: url(images/achievements/featofstr-achievement.png);
}

.featofstr-achievement:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 105px;
    margin-left: -105px;
    background: url(images/achievements/featofstr-achievement-left.png);
}

.featofstr-achievement:after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 106px;
    margin-right: -106px;
    background: url(images/achievements/featofstr-achievement-right.png);
}

.progressbar-text span {
    color: #bc944e;
}

.feat-of-strength .achievement-flag {
    background-position: right bottom;
}

.achievement-objective-content ul {
    padding: 0;
    padding-left: 5px;
    margin: 0;
    margin-top: 45px;
}

.list-inline-item:not(:last-child) {
    margin-right: 0;
}

.achievement-objective-content ul li {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.achievement-objective-content ul li > .thumbnail-overlay-xs {
    position: relative;
    width: 76px;
    height: 114px;
    background-repeat: no-repeat;
    margin-right: 11px;
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    -moz-border-image: url(images/achievements/series_border.png) 2 2 2 2 stretch repeat;
    -webkit-border-image: url(images/achievements/series_border.png) 2 2 2 2 stretch repeat;
    -o-border-image: url(images/achievements/series_border.png) 2 2 2 2 stretch repeat;
    border-image: url(images/achievements/series_border.png) 2 2 2 2 fill stretch repeat;
}

.banner-image .overlay, .achievement .news-icon .overlay, 
.achievement-reward-bg .list-inline-item .locked .overlay, 
.achievement-objective-content ul li > .thumbnail-overlay-xs div.overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #000;
    opacity: 0.5;
}

.achievement-objective-content ul li > .thumbnail-overlay-xs div.overlay {
    top: 0;
    height: 76px;
}

.achievement-objective-content ul li > .thumbnail-overlay-xs div:last-child {
    width: 100%;
    height: 38px;
    text-align: center;
    font-size: 1.3rem;
    border-style: solid;
    border-width: 6px 6px 5px 6px;
    -moz-border-image: url(images/achievements/series_points.png) 6 6 5 6 stretch repeat;
    -webkit-border-image: url(images/achievements/series_points.png) 6 6 5 6 stretch repeat;
    -o-border-image: url(images/achievements/series_points.png) 6 6 5 6 stretch repeat;
    border-image: url(images/achievements/series_points.png) 6 6 5 6 fill stretch repeat;
    color: #7d5b35;
}

.achievement-objective-content ul li > span {
    display: inline-block;
    color: #bc9f77;
}

.achievement-objective-content ul li > .achievement-children:first-child {
    width: 25px;
    height: 29px;
    margin-right: 0.5rem;
    background-image: url(images/achievements/AchievementsPoints.png);
    background-size: 25px 29px;
    display: inline-block;
    vertical-align: middle;
}