:root{
    --hard: #000010;
    --light: Orangered;
    --other: Lime;
    --bgGainsboro: Gainsboro;
    --bs-body-bg: lavender;
    --font01: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    /* CAN 2024 */
     --hard: #014331; --light: #31B330; --other: #FF7A00; --title: var(--other); --bs-body-bg: MistyRose;

    --header-size: 24px;
    --footer-size: 268px;
    --menu-mobile-size: 64px;
  
    @media (min-width: 576px){
        --header-size: 24px;
        --menu-mobile-size: 0px;
    }
  }

a{
  text-decoration: none;
  color: unset;
}

.color--hard{color: var(--hard)!important;}
.bg--hard{background-color:var(--hard)!important;}
.bg--table-hard{--bs-table-bg:var(--hard)!important;}
.border--hard{border-color:var(--hard)!important;}
.color--light{color: var(--light)!important;}
.bg--light{background-color:var(--light)!important;}
.bg--table-light{--bs-table-bg:var(--light)!important;}
.border--light{border-color:var(--light)!important;}
.color--other{color: var(--other)!important;}
.bg--other{background-color:var(--other)!important;}
.bg--table-other{--bs-table-bg:var(--other)!important;}
.border--other{border-color:var(--other)!important;}
.bg--gainsboro{background-color:var(--bgGainsboro)!important;}
.bg--body{background-color:var(--bs-body-bg)!important;}
.border--body{border-color:var(--bs-body-bg)!important;}

.color--aquamarine{color: aquamarine!important;}

.bg-table-light1{--bs-table-bg:lightgray;}
.bg-table-light2{--bs-table-bg:gainsboro;}


header{
    /* background-color: var(--hard); */
    color:var(--other);
    position:sticky;
    z-index: 1030;
    letter-spacing: 0.2rem;
    transition-duration: 0.3s;
    transition-delay: .15s;
    top:0;
}


header span, header span a {
  transition: background-color 0.3s ease;
}

main {
    min-height: 90vh;
    overflow: auto;
    padding: 0 0.1em;
    font-family: var(--font01);
    position: relative;
    transition-duration: 0.3s;
    transition-delay: .15s;
    top:0;
}

footer {
    position: relative;
    background-color: gainsboro;
    a{text-decoration: none;}
    a:hover{
      font-size: 13px;
      font-weight: bold;
      .smaller{
        font-size: 10px;
      }
    }
    #copyright{width:fit-content;}
}
#toppage {
  /* -webkit-touch-callout: none; */
  -webkit-user-select: none;
  /* -khtml-user-select: none; */
  /* -moz-user-select: none; */
  /* -ms-user-select: none; */
  user-select: none;
}

#menumobile{
  letter-spacing: 0.015rem;
}

.footer-mobile {
    position: fixed;
    bottom: 0;
    width: 100%;
    border-top: solid var(--other);
    border-bottom: none;
    background-color: var(--hard);

    p {font-size: 10px;}
    i {font-size: 20px;}
}

/* Fleche UP */
.fixed-up{
  position: fixed;
  left: 10px;
  bottom: calc(15px + var(--menu-mobile-size));
  z-index: 1030;
  color: var(--light);
}

/* Popover */
.popOver{
        --bs-popover-border-color: black;
        --bs-popover-body-padding-x: 1rem;
        --bs-popover-body-padding-y: .5rem;
        --bs-popover-bg: Gainsboro;
        --bs-popover-body-color: black;
        --bs-popover-header-color: Black;
        --bs-popover-header-bg: var(--other);
    }
  .popOverCenter{
    text-align: center;
  }
  .popOverBold{
    font-weight: bold;
  }

.headerusername{color:var(--hard)!important;font-weight: bold!important;}

.fs--35{font-size:35px;}
.fs--30{font-size:30px;}
.fs--25{font-size:25px;}
.fs--22{font-size:22px;}
.fs--19{font-size:19px;}
.fs--16{font-size:16px;}
.fs--13{font-size:13px;}
.fs--10{font-size:10px;}
.fs--8{font-size:8px;}
.fs34{font-size:2.126rem;}
.fs30{font-size:1.876rem;}
.fs24{font-size: min(24px, 1.265vw);}
.fs22{font-size:1.375rem;}
.fs19{font-size:min(19px, 1.002vw);}
.fs16{font-size:1rem;}
.fs13{font-size:min(13px, 0.685vw);}
.fs10{font-size:0.625rem;}
.fs8{font-size:0.5rem;}
@media only screen and (max-width: 576px) {
  .fs-sm-20{font-size:20px;}
  .fs-sm-18{font-size:18px;}
  .fs-sm-15{font-size:15px;}
  .fs-sm-12{font-size:12px;}
  .fs-sm-10{font-size:10px;} 
  .fs-sm-8{font-size:8px;}
  .fs-sm-5{font-size:5px;}
}
.smaller{font-size:smaller!important;}
.larger{font-size:larger!important;}

.w1x-titre{
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
  font-size: 35px;
  font-weight: bold;
  font-family: var(--font01);
  text-align: center;
  @media only screen and (max-width: 576px) {
      font-size: 20px;
  }
}

/* TOAST */
.toast {
  opacity: 1 !important;
}
.toast-top-center { 
    margin-top: 50vh;
} 
/* + - */
.spanplus, .spanmoins{
    color:white;
    background-color: var(--hard);
    border-color: black;
}
.spanplus:hover{
    color:white;
    background-color: var(--other);
    border-color: black;
}
.spanmoins:hover{
    color:white;
    background-color: var(--light);
    border-color: black;
    cursor: pointer;
}
/*************************************************************************************/
/*                              Table Classement                                     */
/*************************************************************************************/
.bg-table-ranking{--bs-table-bg:var(--hard);}
.color-table-ranking{--bs-table-color:white;}
/* .bg-table-premier{--bs-table-bg:#101010;}
.color-table-premier{--bs-table-color:white;}
.bg-table-deuxieme{--bs-table-bg:#303030;}
.color-table-deuxieme{--bs-table-color:white;}
.bg-table-troisieme{--bs-table-bg:dimgray;}
.color-table-troisieme{--bs-table-color:white;} */
.bg-table-premier{--bs-table-bg:AntiqueWhite;}
/* .color-table-premier{--bs-table-color:white;} */
.bg-table-deuxieme{--bs-table-bg:Moccasin;}
/* .color-table-deuxieme{--bs-table-color:white;} */
.bg-table-troisieme{--bs-table-bg:Wheat;}
/* .color-table-troisieme{--bs-table-color:white;} */

.bg-table-quatrieme{--bs-table-bg:PeachPuff;}
/* .color-table-quatrieme{--bs-table-color:white;} */
/* .bg-table-cinquieme{--bs-table-bg:#efcccc;}
.color-table-cinquieme{--bs-table-color:black;} */
.bg-table-LightSkyBlue{--bs-table-bg:LightSkyBlue;}
.bg-table-DarkTurquoise{--bs-table-bg:DarkTurquoise;}
.bg-table-Poulidor{--bs-table-bg:Pink;}
.border-body{border-color:var(--bs-body-bg)!important;}
.border--other{border-color:var(--other)!important;}
.bg-table-mistyrose{--bs-table-bg:mistyrose;}
.bg-table-lavender{--bs-table-bg:lavender;}

.color-up{color:olivedrab!important;}
/* .color-uptop{color:lime!important;} */
.color-uptop{color:olivedrab!important;}

/*************************************************************************************/
/*                              POPUP accept cookiees                                */
/*************************************************************************************/
.popup-css {
  font-size: min(0.8rem, 2.5vw);
  width:fit-content;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  background: var(--hard);
  color: gainsboro;
  z-index:100;  
}
.popup-css a {
  display:block;
  text-align: center;
  padding:5px 10px;
  margin:8px auto 0 auto;
  background:transparent;
  color: var(--other);
  transition: all .3s ease;
}
.popup-css a:hover {
  color: var(--light);
  cursor: pointer;
  width: fit-content;
}


.cligno  {
    animation-duration: .8s;
    animation-name: clignoter;
    animation-iteration-count: infinite;
    transition: none;
 }
@keyframes clignoter {
  0%   { opacity:1; }
  40%   {opacity:0; }
  100% { opacity:1; }
}
.cursorPointer{cursor: pointer!important;}
.cursorPlus{cursor: cell!important;}
.cursorZoom{cursor: zoom-in!important;}

    .spanDE {          
        background-image: url("https://img.win1max.fr/_img/nation/24.png"); 
        background-size: cover;
    }
    .spanES {          
        background-image: url("https://img.win1max.fr/_img/nation/19.png"); 
        background-size: cover;
    }
    .spanFR {          
        background-image: url("https://img.win1max.fr/_img/nation/23.png"); 
        background-size: cover;
    }
    .spanGB {          
        background-image: url("https://img.win1max.fr/_img/nation/9.png"); 
        background-size: cover;
    }
    .spanIT {          
        background-image: url("https://img.win1max.fr/_img/nation/2.png"); 
        background-size: cover;
    }
    .spanNL {          
        background-image: url("https://img.win1max.fr/_img/nation/13.png"); 
        background-size: cover;
    }
    .spanPT {          
        background-image: url("https://img.win1max.fr/_img/nation/22.png"); 
        background-size: cover;
    }
    .spanBE {          
        background-image: url("https://img.win1max.fr/_img/nation/7.png"); 
        background-size: cover;
    }

/**************************************************************
*********************** ANIMATIONS ****************************
**************************************************************/
@keyframes appearFromBottom {
    0% {
      transform: translateY(50px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes appearFromLeft {
    0% {
      transform: translateX(-50px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  @keyframes appearFromRight {
    0% {
      transform: translateX(50px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  @keyframes appearFromCenter {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  @keyframes appearFromTop {
    0% {
      transform: translateY(-50px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  .from-left.in-view:not(.viewed){
    animation: appearFromLeft 0.5s ease-in-out forwards;
  }
  .from-right.in-view:not(.viewed){
    animation: appearFromRight 0.5s ease-in-out forwards;
  }
  .from-bottom.in-view:not(.viewed){
    animation: appearFromBottom 0.5s ease-in-out forwards;
  }
  .from-center.in-view:not(.viewed){
    animation: appearFromCenter 0.5s ease-in-out forwards;
  }
  .from-top.in-view:not(.viewed){
    animation: appearFromTop 0.5s ease-in-out forwards;
  }
  .animate:not(.viewed) {
    opacity: 0;
  }  

.instant {
  animation-delay: 0s !important;
}

.small-delay {
  animation-delay: 0.5s !important;
}

.medium-delay {
  animation-delay: 1s !important;
}

.long-delay {
  animation-delay: 1.5s !important;
}

.very-long-delay {
  animation-delay: 2s !important;
}