/* menu hamburger https://codepen.io/mutedblues/pen/MmPNPG */

  /* nuances bleus : https://encycolorpedia.fr/021b3d */

  /* responsive select box https://codepen.io/thalseth/pen/poOBRr */

  /* box shadow css https://getcssscan.com/css-box-shadow-examples */
  /* ideas of button : https://getcssscan.com/css-buttons-examples */

 
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

/* Logo Ohlala */
@font-face {
    font-family: 'DancingScript';
    src: url('/fonts/DancingScript-VariableFont_wght.ttf') format('truetype')
}

/* pour la page index */
@font-face {
    font-family: 'Anton'; 
    src: url('/fonts/Anton-Regular.ttf') format('truetype')
}


body {
	line-height: 1;
  display: flex;
  flex-direction: column;
  background: #431b1b;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
  
a {
  outline: none;
  text-decoration: none;
}

img.responsive {
  max-width:100%;
  height:auto;
}

  /**** Variables *******************/
:root {

--color-bg-menu:#80000e linear-gradient(#80000e,#81647f);
--color-txt-menu:white;
--color-bg-std:#ffe4c4;
--color-bg-no-selected: #fff8dc;
--color-bg-selected:#E7C37C;
--color-bg-highligh:#80000e;
--color-bg-hover:#eed677;
--color-bg-data1 : rgb(255,193,173);
--color-bg-data2 : rgb(155 116 102);
--color-bg-scoreboard-th : #ffe097;
--color-cards-ro : var(--color-bg-std);
--color-cards-totalpts : var(--color-bg-data1);
--color-cards-juryortv : var(--color-bg-selected);
--background-gold: linear-gradient(to bottom right, #BF953F, #FCF6BA, #B38728, #AA771C);
--background-silver:radial-gradient(circle at 18.7% 37.8%, rgb(250, 250, 250) 0%, rgb(161 167 169) 90%);
--background-bronze:radial-gradient(circle at 18.7% 37.8%, #CD7F32 0%, rgb(255 164 30) 90%);


--cardWidth: 240px;

--cardHeight: 280px;

--cardMargin: 5px;



}

* {
    box-sizing: border-box;
    -o-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: subpixel-antialiased;
    margin: 0;
    padding: 0;
}



/********* Balises **********/ 



html, body {

height: 100%;

margin: 0;

padding: 0;

font-family: Helvetica;

width: 100%;

}

#loading {
            display: block;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--color-bg-highligh);/*rgba(255, 255, 255, 0.7);*/
            z-index: 9999;
        }

#loading::after {
    content: attr(data-txt);
    width:200px;
    height:200px;
    font-size:24px;
    text-align:center;
    line-height:200px;
    color:white;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 6px solid #f3f3f3;
    border-top-color: #3498db;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}



/************************** styles généraux *****************/

.center {

              text-align:center;

}


.row {
    
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    
}



.content {

              position:absolute;
              top:63px; /* tenir compte du menu fixe */
              width:100%;
              padding-bottom: 100px;
              font-family: "Roboto Condensed", sans-serif;
              letter-spacing:1.1px;

}

.form-select-lg {
padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    font-size: 1.25rem;
}

/*.form-select {
    display: block;
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}*/

.btn {
  background-color: antiquewhite;
  color:black;
  font-weight:800;
  padding: 1.5rem;
  margin: 1rem 0.75rem 1rem 0.75rem;
  text-decoration:none;
  box-shadow: 0.25rem 0.25rem 0.5rem rgb(0 0 0 / 13%);
  text-align:center;
  cursor: pointer;
  display: inline-block;
  line-height: 23px;
  outline: none;
  transition: all 235ms ease-in-out;
  user-select: none;
  border-radius: 1.25rem;
  white-space: nowrap;
}

.btn-open-video {
  cursor:pointer;
}

.btn-small {
  margin : 4px 2px;
  line-height:0px;
  padding: 15px;
}


.liste_btn {
display:flex;
flex-wrap: wrap;
justify-content: space-around;
}

.list_flags {
  width:100%;
  flex: 0 0 auto;
  
}

@media (hover: hover) {
.btn:hover {
  box-shadow: rgba(0, 0, 0, .3) 2px 8px 8px -5px;
  transform: translate3d(0, 2px, 0);
  background-color:var(--color-bg-selected);
}
}

.btn:focus {
  box-shadow: rgba(0, 0, 0, .3) 2px 8px 4px -6px;
}


.w100 {
  width:100%;
}

h1.title_principale {
  background-color: antiquewhite;
  padding:10px;
  font-size: 24px;
  margin:0px;
  display:flex; 
  justify-content:center; 
  
}

h1.title_principale.year {
  flex-direction:column;
}

h1.title_principale img {
  margin-right: 10px;
  vertical-align: middle;
}

.event_type_choice {
  display:flex; 
  justify-content:center; 
  color:black;
}

.event_type_choice span {  
  margin:3px;
  font-size:13px;
  padding:10px 5px;
  cursor:pointer;
  /*display:none;*/
  background-color:var(--color-bg-no-selected);
  font-weight:bold;
  border-radius: 10px;
}

.title_song {
padding: 5px 10px;
    background-color: #E7C37C;
    display: inline-block;
    margin: 3px;
    border-radius: 5px;
    color: black;
}

.img_song .photo{
  width:100%;
}

.img_song .photographer-name {
  position: absolute;
  bottom: 5px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
  color: white; /* Texte blanc */
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 5px;
}

@media (hover: hover) {
  .event_type_choice span:hover {
    background-color:var(--color-bg-hover);
  }
}

/*.event_type_choice span.selected {
  background-color:var(--color-bg-selected);
}*/



#scoreboard div.menu_sb {
  font-size: 12px;
  display:flex;
  justify-content:space-between;
  background-color: var(--color-bg-std);
}

#scoreboard  span.nodetails {
    display: flex;
    justify-content: center;
    align-items: center;
   
    padding-right: 5px;
  border-radius:8px;
  cursor:pointer;
  background-color:var(--color-bg-no-selected);
}

#scoreboard  span.nodetails img {
  width:20px;
  margin:0px 5px 0px 4px;
}

.type_voting {

display: flex;
    justify-content: left; 
    background-color: var(--color-bg-std);
    
}

.type_voting span {  
  margin:3px;
  padding:10px;
  border-radius:8px;
  cursor:pointer;
  background-color:var(--color-bg-no-selected);
}

span.selected {
  /*background-color:#74f374;*/
  background-color:var(--color-bg-selected)!important;
  font-weight:bold!important;
  border: 2px solid #fffcfc;
  box-sizing: border-box;
}

.video_responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.video_responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video_responsive .close-video {
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
  z-index:1;
  color:white;
  font-weight: 700;
}


#SONG .container {
  background-color: var(--color-bg-no-selected);
  color:black;
}

#SONG .container .title2 {
    display: flex;
    margin-top: 10px;
}

#SONG .video_titre {
  text-align: center;
    padding: 5px;
    background-color: var(--color-bg-std);
}

#SONG .song-members {
  padding: 5px;
  background-color: var(--color-bg-std);
}

#SONG .song-members::before {
    content: "Performed by : ";
    font-weight: bold;
}

#SONG .lyrics_lyricists{
    padding: 5px;
    background-color: var(--color-bg-std);
}

#SONG .lyrics_lyricists::before{
    content:"Music and Lyrics : "; /* Songwriter(s) and composer(s)*/
    font-weight:bold
}

#SONG .lyrics {
  padding:5px;
  line-height: 1.5em;
  text-align:center;
  }

  #SONG .lyrics_lang {
    padding:5px;
    text-align:center;
    font-weight:bold;
    background-color: var(--color-bg-std);
  }

 /* s'affiche en bas à gauche de l'image */ 
.social-media-zone {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 5px;
  background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
  color: white; /* Texte blanc */
  border-radius: 0 0 0 5px;
}

/* s'affiche en bas à gauche de l'image */
.social-media {
  display: flex;
  justify-content: center;
  align-items: center;
}



#infos {
  background-color: #eeeeee;
  padding:5px 10px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  max-width:600px;
  margin:auto;
}

#infos .logo_year {
  max-width: 100%;
  display:flex;
  margin:auto;
}

#infos .ligne {
  display: flex;
    flex-direction: column;
    margin: 0px 0px 10px 0px;
}

#infos .champ {
  background-color: #d4b788;
    padding: 3px;
    display: inline-block;
    margin-bottom: 5px;
    border-radius: 5px;
    text-align: center;
    font-weight:bold;
}

#infos .value {
  text-align:center;
}

#infos .ligne .value:empty {
    display: none;
}



.mt5 {
  margin-top:5px;
}

.xl-100 {
  width:100%;
}

#message {
  display:none;
  position: fixed;
  z-index: 9999;
  width: 200px;
  height: 50px;
  background-color: var(--color-bg-std);
  border: 2px solid #222;
  text-align: center;
  border-radius:20px;
  line-height: 50px;
  margin: 0 auto;
  top : 260px;
  left : 50%;
  transform : translateX(-50%);
}

#scoreboard .sb_infos {
  display:none;
  position: fixed;
  z-index: 9999;
  width: 100%;
  max-width:500px;
  height: 50px;
  background-color: var(--color-bg-std);
  /*border: 2px solid #222;*/
  text-align: center;
  border-radius:20px;
  line-height: 20px;
  margin: 0 auto;
  top : 0px;
  left : 50%;
  transform : translateX(-50%);
}

#scoreboard .sb_infos .croix {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 19px;
  cursor: pointer;
  z-index:99;
}

#scoreboard .sb_infos .card_grid_moreinfo {
  display:none;
}

#scoreboard .sb_infos .card_grid_principale {
  margin : 0px;
  background-color:white;
  border: 5px solid var(--color-cards-juryortv);
  box-shadow: 0px 5px 5px black;
}

#scoreboard .sb_infos .card_grid_principale img,
#scoreboard .sb_infos .card_grid_principale .card_grid_title
 {
  border-radius:0px;
}

#scoreboard .sb_infos .card_grid_principale .card_grid_pts {
  display:none;
}

/************************** header *****************/


/* https://stackoverflow.com/questions/54904534/add-toggle-menu-to-nav-bar */
.header {
  /*display: flex;
    justify-content: space-between;*/
background: var(--color-bg-highligh);
/*background: linear-gradient(306deg, rgba(2,0,36,1) 0%, rgba(128,0,14,1) 35%, rgba(91,14,23,1) 100%);*/
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
margin-bottom:4px;
position: fixed;
width: 100%;
z-index: 3;
color:var(--color-txt-menu);
font-family: "Work Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
border-bottom: 2px solid white;
    height: 63px;
}



.header a, .header a:link, .header a:visited, .header a:focus, .header a:hover, .header a:active  {
color:var(--color-txt-menu);
}

.header .menu a, .header .menu a:link, .header .menu a:visited, .header .menu a:focus, .header .menu a:hover, .header .menu a:active  {
color:black;
}

.header .menu {
  overflow-y: auto; /* Permet le défilement vertical si nécessaire */
  
  -webkit-overflow-scrolling: touch; /* Permet un défilement fluide sur iOS */

margin: 0;

padding: 0;

list-style: none;

/*overflow: hidden;*/

background-color: var(--color-bg-std);
color:black;
z-index:999;
font-family: "Roboto Condensed", sans-serif;
font-size: 17px;
letter-spacing :1.1px;
line-height: 20px;

transition: all 0.3s ease-out;
}

header .menu li:nth-child(odd) {
  background-color: #ffe28e;
}



.header .menu li {

display: block;

padding: 13px 20px;

border-right: 1px solid #f4f4f4;

text-decoration: none;

/*text-align: center;*/

text-transform: uppercase;
}


@media (hover: hover) {
.header li a:hover,

.header .menu-btn:hover {

background-color: #7e8399;

}
}

.header .logo_container {
  display: flex;
    flex-direction: column;
    float:left;
}

.header .logo {
font-family:Roboto;
display: block;
float: left;
font-size: 22px;
/*padding: 10px 20px;*/
padding: 0px 10px 0px 5px;
text-decoration: none;
/*border: 1px solid white;*/
    margin: 5px;
    transition: font-size 0.5s;
    
}



.logo_eurovision {
  padding-left:10px;
}

.header .logo .logo_ohlala {
  font-family: 'DancingScript', sans-serif;
  font-style: italic;
  font-size:32px;
}

.header .logo .exclamation {
  font-weight: bolder;
    font-family: cursive;
    font-size: larger;
    font-style: italic;
}

.header .logo img{
  width: 53px;
    border-radius: 50%;
    vertical-align: middle;
    border: 2px solid white;
    transition: width 0.5s;
}

.header .logo_container.small-logo .logo {
  font-size:12px;
}

.header .logo_container.small-logo .logo .logo_ohlala {
  font-size:14px;
}

.header .logo_container.small-logo .logo img {
  width:20px;
}

.header .logo_container.small-logo .logo_title {
  margin-left:10px;
  opacity: 0; /* Définissez l'opacité initiale à 0 pour le cacher */
  animation: apparition 1s ease-in forwards; 

}

.header .logo_container.small-logo .logo_title img.flag {
    display:none;
}

.menu .menu-image img {
  width:30px;
}

.menu .menu-image img.img-screen {
  display:none;
}

.menu .menu-image img.img-mobile {
  /*display:block;*/
}


@keyframes apparition {
  0% {
    opacity: 0; /* Opacité initiale à 0 pour le cacher */
  }
  100% {
    opacity: 1; /* Opacité à 1 pour le faire apparaître complètement */
  }
}






/* menu */



.header .menu {

clear: both;

max-height: 0;
min-height: 0;

transition: all .5s ease-out;

cursor:pointer;



}



/* menu icon */



.header .menu-icon {

cursor: pointer;

float:right;

padding: 28px 20px;

position: relative;

user-select: none;

}



.header .menu-icon .navicon {

background: #fff;

display: block;

height: 2px;

position: relative;

transition: background .2s ease-out;

width: 18px;

}



.header .menu-icon .navicon:before,

.header .menu-icon .navicon:after {

background: #fff;

content: '';

display: block;

height: 100%;

position: absolute;

transition: all .2s ease-out;

width: 100%;

}



.header .menu-icon .navicon:before {

top: 5px;

}



.header .menu-icon .navicon:after {

top: -5px;

}



/* menu btn */



.header .menu-btn {

display: none;

}



.header .menu-btn:checked ~ .menu {

  /*max-height: 100vh;*/ /* Limite la hauteur du menu à la hauteur de la fenêtre de visualisation */
  min-height: 100vh;
  max-height: 100vh;
}



.header .menu-btn:checked ~ .menu-icon .navicon {

background: transparent;

}



.header .menu-btn:checked ~ .menu-icon .navicon:before {

transform: rotate(-45deg);

}



.header .menu-btn:checked ~ .menu-icon .navicon:after {

transform: rotate(45deg);

}



.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {

top: 0;

}


/******* Bouton switch  */
/*https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch*/
/* https://danklammer.com/articles/simple-css-toggle-switch/ */
input.toggle {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 62px;
  height: 32px;
  display: inline-block;
  position: relative;
  border-radius: 50px;
  overflow: hidden;
  outline: none;
  border: none;
  cursor: pointer;
  background-color: #707070;
  transition: background-color ease 0.3s;
}

input.toggle:before {
  content: "On Off";
  display: block;
  position: absolute;
  z-index: 2;
  width: 28px;
  height: 28px;
  background: #fff;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  font: 10px/28px Helvetica;
  text-transform: uppercase;
  font-weight: bold;
  text-indent: -22px;
  word-spacing: 37px;
  color: #fff;
  text-shadow: -1px -1px rgba(0,0,0,0.15);
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  transition: all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
}

input.toggle:checked {
  background-color: #eeb153;
}

input.toggle:checked:before {
  left: 32px;
}

div.toggle {
  background-color: var(--color-bg-highligh);
    /*width: fit-content;*/
    justify-content: space-evenly;
    color:white;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding:5px;
}

input.toggle-order {
  width: 100px;
}

input.toggle-order:before {
  content: "Place Draw";
  text-indent: -45px;
  word-spacing: 40px;
}

input.toggle-order:checked:before {
  left: 70px;
}

/* CARDS   **************************************/

.card_grid {
  width:100vw; 
  height: fit-content; /* pour éviter de s'allonger quand on cliq sur le + */
  border: 1px solid #ccc;
    border-radius: 8px;
    background: white;
    box-sizing: border-box;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;

  }



/* si pas mobile, on veut pas de width */
@media (min-width:1100px) {
  .card_grid {
    width:unset;
  }
}


.card_grid_principale {
    flex-basis:100%;
    display:grid;
    
    grid-template-columns:75px 75px 60px repeat(2,1fr);
    /*grid-template-rows:repeat(3,1fr);*/
    /*height:150px;*/
    grid-column-gap:0px;
    grid-row-gap:0px;
    margin: var(--cardMargin);
    
    position:relative;
    
}

.display_list .card_grid_principale{
  border-left: 1px solid black;
  border-right: 1px solid black;
}

/*.video-container {
  width:100%;
  height: 300px;
}

.video-container iframe {
  width: 100%;
  height: 100%;
}*/

/*.card_grid[data-ro]::before{*/
  .card_grid_ro {
      background: #b46969;
    border-radius: 30px;
    color: #fff;
    /*content: attr(data-ro);*/
    
    font-size: 15px;
    top:0px;
    margin-top: -3px;
    margin-left: -3px;
    min-width: 20px;
    padding: 5px;
    position: absolute;
    text-align: center;
    z-index:99;
}



  .card_grid_pochette {
    grid-area: 1/1/3/3;/*1/1/4/3;*/
    background-color: rgb(233 150 122 / 30%);
    margin-right: auto;
    margin-left: auto;
    width:150px;
    height:150px;
    overflow:hidden;
    cursor:pointer;
  }

.card_grid_links {grid-area: 2/3/3/4;}
  .card_grid_pts {grid-area: 3/1/3/6;}/*{grid-area: 3/3/4/6;}*/
  .card_grid_pts_only_ro {grid-area: 1/1/1/1}
  .card_grid_title {grid-area: 1/3/2/6;}
  .card_grid_content {grid-area: 2/4/3/6;}
  .card_grid_detailedpts {grid-area: 4/1/4/6;}




  .card_grid_pochette img {
    /*max-width:150px;
    max-height:150px;*/
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:8px 0px 0px 0px;
  }

  .card_grid_pts {
    display:flex;
    flex-direction: row;
    justify-content: space-between;
  }

  

  .card_grid_links{
    display:flex;
    flex-direction:column;
    padding-top:3px;
  }



  .card_grid_links a {margin:auto;}
  .card_grid_links img {margin:auto;}

  .card_grid_title {      
    color:white;
    font-weight:600;
    text-align:center;
    font-size:16px;
    border-radius:0px 0px 0px 0px;
    background :linear-gradient(to right, #f7971e, #ffd200); ;/*linear-gradient(236deg, rgba(224,130,18,1) 0%, rgba(121,40,9,0.9430147058823529) 31%, rgba(255,130,0,1) 100%);*/
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    height:fit-content;
    padding:0px;
    /*display:flex;*/
  }



  .card_grid_title span:first-child{
    height:30px;
    width:40px;
    order:0;
    /*position:absolute;
    right:0px;*/
  }

  .display_cards .card_grid_title span.flag {
    position:absolute;
    right:0px;
  }


  
  .card_grid_title img {
    height: 100%;
    width: 100%;
    object-fit:cover;
    /*margin: 2px;
    vertical-align: middle;*/
}

.card_grid_title span:nth-child(2){
  order:-1;
}

.card_grid_title a{
  color:black;
  display:flex;
  justify-content: space-evenly;
  line-height:30px}

  .card_grid_title .country_year {
  display: flex;
    justify-content: space-between;
  }
  .card_grid .card_grid_title .country_year span.date{
    background-color: antiquewhite;
    padding: 2px;
    border-radius: 5px; 
  }
  

  .card_grid[data-i='0'] .card_grid_title .country_year span.date{
    background-color: unset;
  }
  
/*
.card_grid_running_order {             
    background-color: var(--color-bg-data2);
    padding: 5px;
    border-radius: 8px 8px 0px 0px;
    font-size:12px;
    text-align: center;
    font-weight: bolder;
}

.card_grid_running_order:before {
  content:'RO: ';
}

.card_grid_running_order[data-order='0'] {
  display:none;
}

.card_grid_running_order[data-order=''] {
  display:none;
}*/

.card_grid_content {
  padding : 5px;
  display: flex;
    flex-direction: column;
    align-self: center;
    cursor: pointer;
    font-size:17px;
}

.display_list .card_grid_content {
  font-size:14px;
} 

.display_list .card_grid[data-iso2='']  .card_grid_title span:first-child{
  /*display : none;*/
  width:100%;
  height: unset;
}


.card_grid_content .artist {
  font-weight:bolder;
}

.card_grid[data-i="0"] .card_grid_content .artist {
  font-weight:bolder;
  align-self:center;
}

.card_grid_content .known {
    background-color: var(--color-bg-highligh);;
    padding: 5px;
    color: white;
    font-weight: bold;
    border-radius: 10px;
    text-align: center;
}

.card_grid_content .known:empty {
  display:none;
}

.card_grid_pts {
    display:flex;
    background-color: rgb(247 217 207);
    flex-direction: row;
    justify-content: space-evenly;
    padding: 3px;
    font-size:16px;
    text-align: center;
    font-weight: bolder; 
    position:relative;
  }

.card_grid_pts_only_ro {
  background-color:unset;
  justify-content: left;
}



.card_grid_pts .pts {
  display:flex;
  align-items: center;
  padding: 10px;
  border-radius: 4px 4px 0px 0px;
  color: black;/*#575353 ;*/ 
  background-color:var(--color-cards-totalpts)
}

.card_grid_pts .ro {
    background-color:var(--color-cards-ro);

  }

  

  .card_grid_pts_only_ro .ro {
    border-radius:4px;
    padding:5px;
  }


.display_list .card_grid_pts .pts {
  background-color:unset;
}

.card_grid_pts .jurypts, .card_grid_pts .tvpts  {
background-color: var(--color-cards-juryortv);
}


.card_grid_pts .totalpts {
  color:black;
  font-weight:bolder;
  background-color: var(--color-cards-totalpts); 
}

/*.card_grid_pts .bothpts {
  display:none;
}

.card_grid_pts .totalptswithoutpts {
  display:none;
}*/


.card_grid_pts .place {
  background-color: var(--color-cards-juryortv);
  padding: 4px;
  border-radius: 4px 4px 0px 0px;
  color: black;   
  font-size:1.2em;
  min-width: 50px;
  display: flex;
  align-items: center; 
  justify-content: center;
}

.card_grid_pts .place.reducedsize {
  font-size:0.7em;
  width: -webkit-fill-available; /* car eliminated ne rentre pas en entier en list*/
}

.card_grid_pts .place.goestofinal {
  background-color: var(--color-bg-highligh);
  color:white;
}

.card_grid_pts .place.eliminated {
  background-color: #af9055;
    color: #ffffff;
}



.card_grid_moreinfo {
  background-color: rgb(255 33 33 / 50%);
    color: #000000;
    font-size: 12px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    display: inline;
    padding: 2px 5px;
    border-radius: 2px 2px 0px 0px;
}
.display_cards .card_grid_moreinfo {
  text-align: center;
    grid-area: 4/1/5/6;
    line-height: 1.5em;
    cursor:pointer;
}

.card_grid_moreinfo:before {
  content: "SEE ALL VOTING DETAILS FOR THIS SONG \25BC";
}

#cards_ALL .card_grid_moreinfo {
  cursor:pointer;
  
}

.display_list .card_grid_title span:first-child{
  height:30px;
  width:50px;
  order:-2;
}

.display_list .card_grid_moreinfo {
  display:none;
  /*position:absolute;
  bottom:0px;
  left:0px;
  cursor:pointer;*/
  
}
.display_list .card_grid_moreinfo:before {
  content : "CLICK FOR VOTING DETAILS \25BC";
}

.display_list .card_grid[data-iso2=''] .card_grid_moreinfo {
  display : block;
  grid-area: 1 / 3 / 1 / 3;
    position: absolute;
    bottom: 0px;
    font-size: 0.8em;
    justify-self: center;
}


.card_grid_detailedpts {
  font-family: "Roboto", Helvetica, sans-serif;
    font-size: 14px;
}

.card_grid_detailedpts div {
  background-color:var(--color-bg-highligh);
  padding:5px;
  color:white;
  position:relative;
}

.card_grid_detailedpts div .close {
  position:absolute;
  top:5px;
  right:10px;
  cursor:pointer;
}


.card_grid_detailedpts table {
  width:100vw;
  /*font-size:12px;*/
  }

  .card_grid_detailedpts table th{
    background-color:var(--color-cards-juryortv);
    font-weight:bold;
    padding:5px;
  }

  .card_grid_detailedpts table td{
    padding:5px;
  }



  .card_grid_detailedpts table tr:nth-child(2n){
    background-color:#e3e3e3;
  }

  .card_grid_detailedpts table td:nth-child(1),
  .card_grid_detailedpts table td:nth-child(3) {
    text-align:center;
    font-weight:bold;
  }

.card_grid_detailedpts img {
  height: 15px;
    margin-right: 5px;
    vertical-align: middle;
}

.card_grid_detailedpts td.list span {
    display: block;
}

.card_grid_detailedpts table.received_countries tbody td:nth-child(1) {
 text-align:left;
 font-weight:bold;
}
.card_grid_detailedpts table.received_countries tbody td:not(:nth-child(1)) {
 text-align:center;
 font-weight:normal;
}

.card_grid_detailedpts table.received_countries tbody td.total {
 font-weight:bold;
}

@media (hover: hover) {
.card_grid_detailedpts tr:hover {
  background-color:rgba(255,0,0,0.2)!important;
}
}


.main-section-cards .card_grid_pts .ro,
.main-section-cards .card_grid_pts .jurypts,
.main-section-cards .card_grid_pts .tvpts,
.main-section-cards .card_grid_pts .totalpts,
.main-section-cards .card_grid_pts .totalptswithoutpts,
.main-section-cards .card_grid_pts .bothpts
 {
  display:none;
}



.main-section-cards .card_grid_pts .ro:not([data-value=""]),
.main-section-cards.display_cards .card_grid_pts .jurypts:not([data-value=""]),
.main-section-cards.display_cards .card_grid_pts .tvpts:not([data-value=""]),
.main-section-cards.display_cards .card_grid_pts .totalpts:not([data-value=""]),
.main-section-cards.display_list .card_grid_pts .totalptswithoutpts:not([data-value=""]),
.main-section-cards.display_list .card_grid_pts .bothpts
{
  display:flex;
}

/*.main-section-cards.display_list .card_grid_pts .bothpts[data-value="Jury"]{
  display:none!important;
}*/



.main-section-cards .card_grid_pts .ro,
.main-section-cards .card_grid_pts .jurypts,
.main-section-cards .card_grid_pts .tvpts,
.main-section-cards .card_grid_pts .totalpts
 {
  flex-direction: column;
  justify-content: center;
  color:black;
}



/* ligne des titres de colonnes en LIST */
.display_list .card_grid[data-country=""],
.display_list .card_grid[data-country=""] .card_grid_pts,
.display_list .card_grid[data-country=""]  .card_grid_pts .place,
.display_list .card_grid[data-country=""]  .card_grid_pts .totalptswithoutpts,
.display_list .card_grid[data-country=""]  .card_grid_pts .bothpts,
.display_list .card_grid[data-country=""]  .card_grid_pts .eventtype{
  font-size:12px;
  background-color:unset;
  color:black;
}
.display_list .card_grid[data-country=""] .card_grid_pts .card_grid_moreinfo {
  display:none;
}


.card_grid_pts .eventtype {
  background-color: rgb(147 80 57 / 90%); 
  font-weight:bolder;
  padding: 10px;
  border-radius: 4px 4px 0px 0px;
  color: white;   
  bottom:3px;
  font-size:15px;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.card_grid_pts .place .sf {
  font-size:11px;
  margin-top: 5px;
  width:100%;
}
.card_grid_pts .eliminated {
  background-color: grey;
}

.card_grid_pts .disqualified {
  background-color: rgb(76, 47, 47);
  color:white;
}

.card_grid_pts .place {
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/*.card_grid_pts .place:after {
  content:'th';
  font-size:13px;
  margin-left:1px;
}

.card_grid[data-country=""] .card_grid_pts .place:after {
  content:'';
}



.card_grid[data-place='1'] .place:after {
  content:'st';
}

.card_grid[data-place='2'] .place:after {
  content:'nd';
}

.card_grid[data-place='3'] .place:after {
  content:'rd';
}*/



.card_grid_pts .place:empty {
  display:none;
}

.display_list .card_grid_pts .place:empty {
  display:block;
}

.card_grid[data-place='1'] {
  /*border: 5px solid red;*/
  background-color:#fff5b7;
}

.card_grid[data-place='1'] .card_grid_pts .place {
  /* GOLD */
  background: var(--background-gold);
  color:black;
}

.card_grid[data-place='2'] .card_grid_pts .place {
  /* SILVER */
  background: var(--background-silver);
  color:black;
}

.card_grid[data-place='3'] .card_grid_pts .place {
  /* BRONZE */
  background: var(--background-bronze);
  color:black;
}


.main-section-cards>div {
  /*display: flex;*/
  display:grid;
  justify-content: center;
  flex-wrap: wrap;
  background: white;
  /*margin-top:5px; ca laisse un espace entre le titre et la 1ere div */
}
/* TODO : verifier si on doit laisser grid pour le telephone */
.main-section-card>div.wall {
  display:flex;
}



.main-section-cards .card_grid_pts .ro span {
    display:block;
  }

  .display_cards .card_grid_pts_only_ro .ro span:first-of-type  {
    /*display:none;*/
    font-size:9px;
  }

  .display_list .card_grid_pts .ro span:first-of-type  {
    display:none;
  }

  .main-section-cards .card_grid[data-country=""] {
    display:none;
  }

  .display_list .card_grid[data-country=""] {
    display:grid;
    background-color:var(--color-bg-std);
  }



/*.list_years, .list_country {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  height:40px;
  background-color:var(--color-bg-std);

}

.list_years, .list_country {
  height:auto;
}*/

.display_list .card_grid:not([data-i='0']) .link_country {
  display: flex;
  flex-direction: column;
}



.btns_rubrique {
  display:flex;
  overflow-x:auto;
  padding: 5px 5px 8px 5px;
  border-bottom: 0px solid white;
    box-shadow: 0px 4px 7px -7px rgba(255,255,255,0.75) inset;
    font-family: "Roboto Condensed", sans-serif;
}


/*.btns_rubrique span.selected {
  background-color:var(--color-bg-highligh);
  
}*/

/*.modal {
  display:none;
  max-height: 70vh;
    width: max-content;
    max-width:min(90%, 500px);
    overflow-y: scroll;
    overflow-x: none;
    background-color: var(--color-bg-std);
    position: fixed;
    left: 50%;
    top:50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 99;
    border-radius:20px;
    box-shadow: 0 0 0 50vmax rgba(0,0,0,.5);
}*/

/* Styles pour le fond obscurci */
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index:3;
}

.modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  width: 80vw;
  max-height: 80vh;
  z-index:99;
  overflow: hidden;
  overflow-y: auto; /* Ajout pour activer le défilement vertical */
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  text-align: center;
  width: max-content;
}

.modal .titre {
  width:100%;
  background-color:var(--color-bg-highligh);
  color:white;
  font-size:1.2em;
  padding:10px;
  text-align: center;
  position: sticky;
  top: 0;
  font-weight:bold;
}

.modal .close {
  
  color:white;
  cursor:pointer;
  font-size: 30px;
    position: absolute;
    right: 5px;
    top: 3px;
}

#videoModal .modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  width: 100vw;
  height: 100vh;
}

#videoModal .modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  text-align: center;
  width: max-content;
}

#videoModal .modal .close {
  float:right;
  color:white;
  cursor:pointer;
  font-size: x-large;
}

#videoModal.modal .close {
  margin:5px;
  color:black;
}




.list_years ul, .list_countries ul {
  display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.list_countries ul {
justify-content: space-between;
}

.list_years li, .list_countries li {
 padding:5px;
 display: inline-block;
 /*background-color: #fec17a;*/
 background-color:var(--color-bg-no-selected);
 border-radius: 4px;
  margin:5px 2px;
  cursor:pointer;

}
.list_years li {
font-size: 20px;
}
.list_countries li {
  padding:0px;
  margin:2px 7px;
  width:100%;
  /*height:40px;*/
  font-weight: bold;
  display:flex;

}

.list_countries li span:first-child {
  display:inline-block;
  height:40px;
  width:40px;
  overflow:hidden;
}

.list_countries li img {
  width:100%;
  height:100%;
  object-fit: cover;

  
}

.list_countries li span:nth-child(2) {
  align-self: center;
  margin-left:4px;

}

@media (hover: hover) {
.list_years li:hover, .list_countries li:hover {
  background-color:var(--color-bg-selected);
}

}

#topbutton {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #881d1d; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

@media (hover: hover) {
#topbutton:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}
}



/* MEDIA QUERY *******************************/

@media (min-width:1100px) {
/*
  .header  .menu {
  margin-top: 10px;
  clear: none;

  float: right;

  max-height: none;
  
  background-color:unset;
  }
  .header .menu li {

    float: left;
   
      margin: 4px;
 
  }

  .header .menu a, .header .menu a:link, .header .menu a:visited, .header .menu a:focus, .header .menu a:hover, .header .menu a:active {
    color:white;
  }



  .header .menu li a {
    padding: 10px 10px;
    border-right:unset;

  }

  .header .menu li a:hover{
    background-color: var(--color-bg-selected);
    border-radius: 20px;
    color:black;
    }

    .header .menu li.menu-image a:hover{
      background-color:unset;
    }

  .header li.menu-image img {
    filter: brightness(100%);
    transition: filter 0.2s ease;
    width:20px;
    
  }

  .menu .menu-image img.img-screen {
    display:block;
  }
  
  .menu .menu-image img.img-mobile {
    display:none;
  }

  

  .header li.menu-image:hover img {

      filter: brightness(0%);
    
  }




.header .menu-icon {

  display: none;

}
*/
.menu {
  display:flex;
  flex-wrap:wrap;
  justify-content: space-around;
}


.menu .outer-rectangle {
  width:33%;
}

.header .menu-btn:checked ~ .menu {
  min-height: 100%;

  /*width: 200px;
  position: absolute;
  right: 0px;
  top: 60px;*/

}


.container {
  display: flex;
  flex-direction: column;
}






/*.content {
  width: 600px;
    left: 50%;
    transform: translateX(-50%);
}*/

.col-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
}

.card_grid {
  flex-basis : 30%;
}

#SONG, .BYYEAR {
  display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

#SONG .container, .BYYEAR .container  {
  max-width:700px;
}


/*.btn {
width:25%;
}*/

.list_flags {
  width:80%;
  
}

.list_flags img {
  width:48px;
  height:48px;
  
}

div.toggle {
  flex-direction: row;
}

.card_pts {
  
  justify-self:center;
}


}

/* ****** STYLE GENERAUX PLUSI MPORTANTS ***/
.displayNone {
  display:none!important;
}



.displayAllYears {
  white-space:normal;
  width:85%;
  height:100%;
  margin:4px;
  font-size:x-large;
}

div.scoreboard {
    display: flex;
    background-color: #e3e1cc;
    /*width: max-content;*/
    justify-content: center;
    flex-direction: column;
    margin: auto;
    /*border-radius: 10px;*/
    /*padding: 20px;*/
    width:100%;
}

div.scoreboard div.wrap {
    overflow: auto;
    max-height: 90vh;
}



/* https://dev.to/dcodeyt/creating-beautiful-html-tables-with-css-428l */


div.scoreboard div.scoreboard_title{
    text-align:center;
    margin-top:15px;

}

div.scoreboard div.scoreboard_title span{
background-color: #4f4e4e;
    color: white;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 5px;
    display: inline-block;
}

div.scoreboard table.scoreboard{
    margin:0px auto 5px auto;
    background:#FFF;
}

div.scoreboard table tbody tr td:first-of-type img {
vertical-align: middle;
margin-right:3px;
}


@media (hover: hover) {
div.scoreboard table td.douzepts, table tr:hover td.douzepts {
    background-color:rgb(255 169 42);
}
}

div.scoreboard table td.surlignerColonne {
    background-color:rgba(0,0,0,0.3); 
}

div.scoreboard table {
    font-size:80%;
    margin:auto;
}

div.scoreboard table, 
div.scoreboard th, 
div.scoreboard td {
border-collapse: separate;
border-spacing: 0px;
position: relative;
font-family: 'Helvetica Neue", Helvetica, Arial'
}

div.scoreboard table tr:first-child th {
border-top: 1px solid #AAA;
}

div.scoreboard table tr th:first-child,
div.scoreboard table tr td:first-child {
border-left: 1px solid #AAA;
}

div.scoreboard table tr:first-child {
cursor:pointer;
}

div.scoreboard table tr td:first-child {
font-weight: bold;
cursor:pointer;
}

div.scoreboard table tr th,
div.scoreboard table tr td {
border-bottom: 1px solid #AAA;
border-right: 1px solid #AAA;
white-space: nowrap;
}

div.scoreboard table>thead {
position: sticky;
top: 0;
z-index: 3;
}

div.scoreboard table>tbody>tr>td:nth-child(1),
div.scoreboard table>thead>tr>th:nth-child(1) {
position: sticky;
left: 0;
z-index:2;
}

div.scoreboard table>thead>tr>th:nth-child(1) {
z-index: 4;
}

div.scoreboard table.scoreboard td {
    font-size:11px;
    
}

div.scoreboard .df {
    background-color: #dfdfdf;
}

div.scoreboard .lasts {
    background-color:  #ec9c9c;
}

div.scoreboard .firsts {
    background-color:  #b4e7ff;
}

div.scoreboard tr:first-child th {
    vertical-align: bottom;
    text-align:center;
    white-space:nowrap;
    min-width: 0.875em;
    /*max-width: 1.200em;*//* si on veut reduire la largeur des colonne */
    /*width: 0.875em;*/
}



div.scoreboard tr th, div.scoreboard tr td:nth-child(1) {
    vertical-align: top;
    background-color:var(--color-bg-scoreboard-th); 
    padding: 5px 5px;
    text-align:left;
    line-height:80%;
    white-space: nowrap;
    /*position: sticky;
    top: 0;*/

}

div.scoreboard tr th:nth-child(1){
    vertical-align: top;
    background-color:var(--color-bg-scoreboard-th); 
    padding: 5px 5px;
    text-align:left;
    line-height:80%;
}

div.scoreboard tr:first-child th div {
    writing-mode: tb-rl;
        transform: rotate(-180deg);
 }

div.scoreboard tr td {
    vertical-align: middle;
    text-align:center;
    padding:5px;
}

div.scoreboard table.scoreboard td.winner {
    background-color: #ffef63;
}


div.scoreboard table.scoreboard td.vide {
    /*background-image: linear-gradient(to bottom right,  transparent calc(50% - 1px), red, transparent calc(50% + 1px)); */
    background-color:#7777777d;
}


div.scoreboard table.scoreboard td.place {
    background-color: var(--color-bg-highligh);
    font-size: medium;
    font-weight: bold;
    color:white;
}

div.scoreboard table.scoreboard td.place_jury,
div.scoreboard table.scoreboard td.place_tv
 {
    background-color: #541118;
    font-size: medium;
    font-weight: bold;
    color:white;
}

div.scoreboard table.scoreboard td.place.color_gold,
div.scoreboard table.scoreboard td.place_jurye.color_gold,
div.scoreboard table.scoreboard td.place_tve.color_gold
{
  color:black;
}

/*#scoreboard_F_JURY table.scoreboard td.place_jury,
#scoreboard_F_TV table.scoreboard td.place_tv {
  background-color: var(--color-bg-selected);
  color:black;
}*/

div.scoreboard table.scoreboard td.total,
div.scoreboard table.scoreboard td.total_jurytv {
    background-color: var(--color-bg-std);
}

div.scoreboard table.scoreboard td.ecart_jurytv {
    background-color: #cfb7b7;
    font-weight:bold;
}

div.scoreboard table.scoreboard td.ecart_jurytv_big {
    background-color: #999292;
}



div.scoreboard table.scoreboard td.total2 {
    background-color: var(--color-bg-std);
}

div.scoreboard table.scoreboard td.total12pts {
    background-color: var(--color-bg-std);
}

div.scoreboard table.scoreboard td.running {
    background-color: var(--color-bg-std);
}

div.scoreboard table.scoreboard td.surlignerCell {
    background-color:red!important;
    color:white;  
}

div.scoreboard .th_titre{
  background-color:var(--color-bg-selected);
  font-weight:bold;
}

/* on surligne le ligne */
@media (hover: hover) {
div.scoreboard table tbody tr:hover td {
    background-color:#ffbdbd !important;
    color:black !important;
    border-top:1px solid red;
    border-bottom:1px solid red;
}

div.scoreboard table td.douzepts, table tr:hover td.douzepts {
    background-color:rgb(255 169 42) !important;;
}
}

div.scoreboard table .surlignerColonne {
    background-color:#ffbdbd !important;
    color:black !important; 
    border-left:1px solid red;
    border-right:1px solid red;
}
f
div.scoreboard th.order {
  border :4px solid var(--color-bg-highligh)!important;
}

.title_section {
  background-color:var(--color-bg-highligh);
  position: relative; /* pour positionner le ? */
}

/*
.previous_page {
  background-color:var(--color-bg-std);
}

.previous_page a {
  color:black;
  letter-spacing: 0.1px;
  
}
.previous_page a:hover {
  color:var(--color-bg-highligh);
  
}

.previous_page a:before{
  content: '<<';
  margin-right:1px;
}*/


.title {
    display: flex;
    justify-content: center;
    background-color:var(--color-bg-std);
    align-items: center;
    padding-top:10px;

}

.title h1 a {
  color : unset;  
}

.title h1 {
  font-size: 1.5em;
    background-color: var(--color-bg-highligh);
    padding: 10px 15px;
    border-radius: 10px 10px 0px 0px;
    font-weight: bold;
    color: white;
    cursor:pointer;
    transition: font-size 0.5s, top 0.5s;
}

.BYYEAR .title {
  justify-content: space-around;
  align-items: baseline;
}

/*
#year_before {
  padding-left:10px;
}

#year_after {
  padding-right:10px;
}

#year_before, #year_after {
  min-width:50px;
}*/

#year_before, #year_after {
  font-size: 1em;
    background-color: var(--color-cards-totalpts);
    padding: 10px 15px;
    border-radius: 10px 10px 0px 0px;
    font-weight: bold;
    color: white;
    cursor:pointer;
    transition: all 0.2s;
}

#year_before:hover, #year_after:hover{
  background-color: var(--color-bg-hover);
  color:#000000;
}

#year_before[data-year=""], #year_after[data-year=""] {
  visibility: hidden;
}


/*.title.fixed {
  position:absolute;
  top:100px;
  z-index:999;
}*/




.title_zone{
    font-size: 1em;
    background-color: var(--color-bg-highligh);
    color:white;
    text-align:center;

}

.title_zone.form_year {
  font-size:1.2em;
}

.title_zone.form_year select {
  font-size:0.8em;
  border-radius:10px;
    padding: 0px;
    margin: 0px;
}




#SONG .title h1 {
  font-size: 1.1em;
}



 .title img.flag
 {
  width: 20px;
  margin: 0px 5px;
}

#SUCCESSRATES a.country{
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:var(--color-bg-highligh);
  padding: 5px;
  border-radius: 5px;
  margin: 5px;
  color:white;
  font-weight:bold;
  text-align:center;
  cursor:pointer;

}

#SUCCESSRATES img.flag
 {
  width: 20px;
  margin: 0px 5px;
}

/*.title2 {
  background-color: var(--color-bg-highligh);
  font-size: 1em;
  color:white;
  text-align:center;
}*/

.title span {
    cursor:pointer;
}

#pagetitle.title2{
  display:flex;
  justify-content: center;
  background-color:var(--color-bg-highligh);
  padding-top:5px;
}

 .title2 > span {   
   background-color: var(--color-bg-selected);
    padding: 8px 12px;
    margin: 0px;
    color: black;
    border-radius: 10px 10px 0px 0px;
    font-size:16px;
    font-weight:bold;
 }
 .title2 span.order{  
    padding: 3px;
    background-color: antiquewhite;
    border-radius: 5px;
    margin-left: 5px;
 }

 .logo_title .title2 {
    font-size: small;
    background-color: var(--color-bg-selected);
    padding: 5px;
    border-radius: 5px;
    color: black;
    margin-left:5px;
 }

 .logo_title .title2 > span {
  font-size:inherit;
 }

 a.lien_date {
 position: absolute;
    background-color: var(--color-bg-highligh);
    color: white;
    padding: 2px;
    top:0px;
    left:0px;
    border-radius: 0 0 5px 0px;
 }


.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.display_cards_small .card_grid {
  max-width: 170px;
  box-shadow:unset;
  background:unset;
  border:unset;
}

.card_grid_pts_only_ro .ro {
  height: fit-content;
  min-width: 40px;
  font-size:20px;
}

.display_cards_small #cards_SF1 .card_grid_pts_only_ro .ro,
.display_cards_small #cards_SF2 .card_grid_pts_only_ro .ro,
.display_cards_small #cards_F .card_grid_pts_only_ro .ro {
  border: 1px solid black;
}

.display_cards_small #cards_SF1  .card_grid_pts_only_ro .ro,
.display_cards_small #cards_SF2  .card_grid_pts_only_ro .ro,
.display_cards_small #cards_F  .card_grid_pts_only_ro .ro{
  position: absolute;
  top: 50px;
  left: -15px;
  z-index:1;
}

.display_cards_small .card_grid_content .song  {
  display:none;
}

.display_cards_small .card_grid_pts_only_ro .ro span:first-child {
  /*display:none;*/
  font-size:9px;
}

.display_cards_small .card_grid_detailedpts {
  display:none;

}



.card_grid_pts_only_ro .place {
  background-color: rgba(231, 195, 124, 0.4);
}

.display_cards .card_grid_pts_only_ro .place{
  height: fit-content;
}

.display_cards_small .card_grid_links {
  display:none;
}

.display_cards_small .card_grid_principale {
  /*grid-template-rows: 1fr 50px;*/
  /*grid-template-columns: 1fr;*/
  width:150px;
}

.display_cards_small .card_grid_principale a.lien_date{
  top:30px;
}

.display_cards_small .card_grid_pochette {
  grid-area: 1 / 1 / 1 / 3;
  margin-top:30px;
  border-radius:0px;
}

.display_cards_small .card_grid_pochette img {
  border-radius:0px;
}

.display_cards_small .card_grid_title {
  grid-area: 1 / 1 / 1 / 3;
  background:unset;
  background-color: rgba(0, 0, 0, 0.5);
  font-size:12px;
  color:white;
  border-radius : 5px 5px 0px 0px;
  
}

.display_cards_small .card_grid_title a {
  color:white;
}

.display_cards_small .card_grid_content {
  grid-area: 1 / 1 / 1 / 3;
  color: white;
  background-color: rgba(255, 0, 0, 0.5);
  position : absolute;
  bottom: 0;
}

.display_cards_small .card_grid_moreinfo {
  display:none;
}



.display_cards_small .card_grid_pts .pts {
  display:none !important;
  
}

.display_cards_small .card_grid_pts .ro {
  display:flex !important;
  
}

.display_cards_small .card_grid_pts {
  position: unset;
  grid-area: 3 / 1 / 3 / 3;
}

.display_cards_small .card_grid_pts_only_ro {
  grid-area: 3 / 1 / 3 / 3;
  justify-content: space-around;
}

/* ro en bas à gauche de la photo */
.display_cards .card_grid_pts_only_ro {
  grid-area: 2 / 1 / 3 / 1;
  align-items: end;
}



.main-section-cards.display_cards_small >div {
  display:flex;
}

.display_list .card_grid {
  box-shadow:none;
    border:none;
    border-top:1px solid #ccc;
    border-radius:unset;
    height:auto;
}

.display_list .card_grid_principale {
    flex-basis: 100%;
    min-height:50px; /*pour laisser place au +infos*/
    grid-template-columns: 110px 1fr 160px;
    grid-template-rows: none;
    align-items: center;
    margin:0px;
    font-size:10px;
    
}

/*.display_list .cards[data-ro-aff="N"] .card_grid .card_grid_principale 
 {
  grid-template-columns: 1fr 1fr;
}


.display_list .cards[data-ro-aff="N"] .card_grid .card_grid_title {
  display:none;
}*/




.BYCOUNTRY .display_list .card_grid_principale{
  grid-template-columns: 70px 1fr 160px; /* on réduit pour afficher year */
}

.display_list .card_grid_pochette {
  display:none
}
.display_list .card_grid_links {
    display: none;
}
.display_list .card_grid_title {
  grid-area: 1 / 1 / 1 / 1;
  background:none;
  box-shadow:none;
  font-size:13px;
  align-self:start; /* aligner en haut le nom du pays */
  cursor:pointer;
  height:100%;
}

.display_list .card_grid_title .country_year {
  height : 100%;
}



/*.display_list .card_grid_title img {
 height:15px;
}*/

.display_list .card_grid_content {
  grid-area: 1 / 2/ 1 / 2;
  padding:2px 0px; 
}

.display_list .card_grid_pts {
  grid-area : 1 / 3 / 1 / 3;
  padding:0px;  
  width: 160px;
  justify-self: flex-end;
  min-height: 100%;
  justify-content: unset;
  /*height: fill-available;*/
} 

.display_list .card_grid_pts span {
  border-radius:0px; 
  width:35px;
} 

.display_list .card_grid:not([data-i='0']) .card_grid_title .country_year span.date {
  background-color: var(--color-bg-hover);
  padding: 10px 2px;
}

.display_list .card_grid_pts .place {
  order: -10;
}

.display_list #cards_ALL  .card_grid_pts .place {
  flex-grow: 2;
    font-size: 12px;
}
.display_list .card_grid_pts .eventtype {
  order: -8;
}

.display_list .card_grid_pts .totalpts,
.display_list .card_grid_pts .totalptswithoutpts {
  order: -5;
}

.display_list .card_grid_pts .bothpts {
  flex-direction:column;
  order: -3;
}

.display_list .card_grid_pts .bothpts span {
  margin:2px 0px;
}

.display_list .card_grid_pts .ro {
  order : -1;
  
}

.display_list .card_grid_pts .ro:not([data-value="Run."]) {
  background-color:white;
}


.display_list .card_grid_pts .jurypts {
  display:none;
}
.display_list .card_grid_pts .tvpts {
  display:none;
}

.display_list .card_grid_pts .totalptswithoutpts {
  display:flex;
}

.display_list .card_grid_pts .totalpts {
  display:none;
}


.display_list  span.country_name {
    /*display: none;*/
    text-align: center;
    width: 100%;
}

.display_list  .card_grid_title a {
  line-height:unset;
  justify-content: left;
  align-items: center;
  height:100%;
}



.display_list  .card_grid_ro {
    
  grid-area : 1 / 1 / 1 / 1;
  background: #b46969;
    border-radius: 0px 5px 5px 0px;
    color: #fff;
    padding: 5px 2px 5px 1px;
    margin:0px;
    position:relative;
}

 

#splitresult
{
display: flex;
    justify-content: center;
    background-color:white;
}

div.classement
{
  width:98%;
  overflow:auto;
  margin:5px;
}

div.classement table.result
{
  margin:auto;
  font-size:0.9em;
}

#splitresult table
{
  margin:auto;
}

.card_grid table
{
  margin:0px;
}

#pts12 {
  background-color:white;
}

#pts12 .country {
  margin:2px;
  display: inline-table;
}



.classement table thead th,
#splitresult .classement table tbody tr td:first-child
 {
    background-color: var(--color-bg-std);
    text-align: center;
    vertical-align:middle;
    font-weight:bold;
}

#splitresult .classement table tbody tr td:nth-child(3),
#splitresult .classement table tbody tr td:nth-child(5),
#splitresult .classement table tbody tr td:nth-child(7)
 {
    text-align: right;
}

.classement th, .classement td {
    border-width: 1px;
    border-style: solid;
    border-color: rgb(162, 169, 177);
    border-image: initial;
    padding: 0.2em 0.4em;
    white-space:nowrap;
}

.classement .countries {
  display:flex;
  flex-wrap: wrap;
}





.classement table img {
    height: 15px;
    margin-right:3px;
}


#splitresult .classement .legend
 {
    display: inline-block;
    min-width: 1.25em;
    height: 1.25em;
    line-height: 1.25;
    margin: 1px 0;
    text-align: center;
    border: 1px solid black;
    color: black;
}

#pts12 .classement .legend {
  width:100%;
  display: inline-block;
    min-width: 1.25em;
    height: 2em;
    line-height: 2;
    margin: 1px 0;
    text-align: center;
    color: white;
    background-color: var(--color-bg-highligh);
    font-weight:bold;
   border-radius:20px;
}

.classement .gold {
  background-color: #b14f3145;
}


@media (min-width:1100px) {
.display_list .card_grid {
    flex-basis: 60%;
}
}

 /*#cards_ALL .card_grid_running_order {
  display:none;
 }*/


  #cards_SF1 .eventtype, #cards_SF2 .eventtype, #cards_F .eventtype {
  display:none;
 }

 .BYYEAR #cards_ALL  .card_grid_pts .ro {
  display:none;
 }

 #menu-display {
  font-size:12px;
 }

 #menu-display-icons{
  display:flex;
  justify-content: space-around;
  background-color:var(--color-bg-highligh);
  padding: 4px;
 }



 #menu-display-icons div{
  display:flex;
  /*background-color: var(--color-bg-no-selected);*/
  margin: 5px;
  position:relative;
 }

 #menu-display-icons>div>span:first-of-type{
 position: absolute;
    background-color: var(--color-bg-selected);
    padding: 2px 4px;
    border: 2px solid var(--color-bg-highligh);
    border-radius: 10px;
    font-size: 11px;
    top: -8px;
    left: -8px;
    font-weight: bold;
      color:black;
 }

 #menu-display-icons div span:not(first-of-type){
  background-color: var(--color-bg-no-selected);  
 }
 #menu-display-icons div span {
 cursor:pointer;
 }

 @media (hover: hover) {
 #menu-display-icons div span:not(first-of-type):hover{
  background-color: var(--color-bg-hover);
 }
}

/*#menu-display-icons .view span:nth-child(2) {
  border-radius: 0px 0px 0px 10px;
}*/

/*#menu-display-icons .order span:nth-child(2) {
  border-radius: 0px 0px 0px 10px;
}
*/

 #menu-display-icons  img{
  height:30px;  
  margin:15px 8px 4px 8px;
   /* filter: invert(55%);*/
 }

 #menu-display-icons span.selected img{
    filter: none;
 }

 /* ***** TOGGLE ***/
 form.toggle {
  width:100%;
  max-width:300px;
  box-sizing:border-box;
  background-color:var(--color-bg-no-selected);
  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.4);
  text-align:center;
  position:relative;
  border-radius:2px;
}

form.toggle > div {
  color:black;
  padding-top:24px;
  display:block;
  position:absolute;
  top:0px;/*-4px;*/
  left:0px;/*-4px;*/
  bottom:0px;/*-4px;*/
  width:calc(33.33%);
  background-color: var(--color-bg-selected);
  border-radius:2px;
  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.4);
  z-index:1;
  pointer-events:none;
  transition:transform 0.3s;
}

form.toggle.two > div 
{
  width:calc(50%);
}

form.toggle::after {
  content:"";
  display:block;
  clear:both;
}

form.toggle label {
  float:left;
  color:black;
  width:calc(33.333% - 1px);
  position:relative;
  padding:5px 0px 19px;/*20px 0px 40px;*/
  overflow:hidden;
  border-left:solid 1px rgba(0,0,0,0.2);
  transition:color 0.3s;
  cursor:pointer;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

form.toggle.two label {
  width:calc(50% - 1px);
}


form.toggle label:first-child {
  border-left:none;
}

form.toggle label input {
  position:absolute;
  top:-200%;
}

form.toggle label div {
  z-index: 5;
  position: absolute;
  width: 100%;
}

form.toggle label.selected {
  color:black;
  font-weight:bold;
}

div.toggle form + form{
  margin-top: 2px;
}


/* Page d'options ************************/
.hidden {
    display: none;
}

.optionsButtonGroup {
    margin: 2px;
    position: absolute;
    top: 5px;
    right: 5px;
}

.optionsButton {
    margin: 2px;
    background-color: var(--color-bg-no-selected);
    padding: 4px;
    border: 0px;
    font-size:0.7em;
    border-radius: 20px;
    color:black;
    cursor:pointer;
}

/*#optionsContainer {
    transition: all 5s ease-in-out;
    position: fixed;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 0%;
    background-color: black;
    color: yellow;
    overflow: hidden;
    z-index:999;
}

#optionsContainer.show {
    bottom:0;
    display: block;
    height:100%;
}*/

.optionsContainer {
  background: rgba(50,50,50,0.93);
  color:var(--color-bg-selected);
  position: fixed;
  bottom: -100%;
  opacity:0;
  left: 0;
  z-index:999;
  padding: 20px 80px;
  width: max-content;
  height: max-content;
}

.optionsContainer div.optionstitle {
  font-size:20px;
  font-weight:800;
  margin-top:10px;
  margin-bottom:20px;
  background-color: var(--color-bg-highligh);
    padding: 5px;
    width: 100%;
    border-radius: 10px;
}

.optionsContainer div{
  text-align: center;
}

.optionsContainer.show {
  animation: smooth-appear 1s ease-in-out forwards;
  /*transform: translateX(-50%) translateY(-50%);
  display:flex;
  justify-content: flex-start;
  flex-flow: column;*/
  display: flex;
    position: fixed;
    flex-direction: column;
    align-items: center;
    
    left: 0px;
    height: 100%;
    width: 100%;
}


.optionsContainer .closeButtonOptions {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 20px;
    color: white;
    cursor: pointer;
}

.optionsContainer .validateButtonOptions{
background: var(--color-bg-hover);
    padding: 5px 50px;
    font-weight: 900;
    font-size: larger;
    margin-top: 20px;
    border-radius: 20px;
    color:black;
    cursor:pointer;
}

.optionsContainer .choicepicture {
display: flex;
align-items: baseline;
justify-content: center;
cursor:pointer;
}

.optionsContainer .choicepicture div{
  margin:2px;
  filter: grayscale(60%);
}

.optionsContainer .choicepicture div.selected {
  border: 2px solid var(--color-bg-highligh);
  margin:0px 5px;
  filter: grayscale(0%);
}

.optionsContainer [btn-group] {
	position:relative;
	display:inline-block;
	margin:10px 0;
}



.optionsContainer [btn-group] > span + span {
	margin:5px;
}

.optionsContainer [btn-group] > span {
  cursor: pointer;
	display:inline-block;
	padding:6px 14px;
	background:var(--color-bg-no-selected);
	border-radius:3px;
	font-size:0.8125em;
	color:#111111;
	transition:background .3s ease, color .3s ease;
	text-decoration:none;
	transition:color .3s ease;
	padding:12px 28px;
	text-transform:uppercase;
}

/*.optionsContainer [btn-group] > a:nth-of-type(1) {
	background:#A1D36E;
	color:#FFF;
}

.optionsContainer [btn-group] > a:nth-of-type(1):hover {
	background:#94CD5A;
}

.optionsContainer [btn-group] > a:nth-of-type(2) {
	background:#6AD1DD;
	color:#FFF;
}

.optionsContainer [btn-group] > a:nth-of-type(2):hover {
	background:#55CBD8;
}*/

@keyframes smooth-appear {
  from {
    bottom: -100%;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

.image-square {
    width: 100px;
    height: 100px;
    background-image: var(--image-url); /* Utilisation de la variable */
    background-size: cover;
    background-position: center;
    position:relative;
}

.image-square span{
  position:absolute;
  left:0px;
  background-color: var(--color-bg-highligh);
  font-size: 13pt;
    left: 0px;
    bottom: 0px;
    padding: 3px;
}

/***************** STYLE POUR TABLEAUX DE STATS ****************** */
 /*   body, html {
  margin: 0;
  padding: 0;
}
*/

.container {
  max-width: 100%;
  /*overflow-x: auto;*/
  display: flex;
  flex-direction:column;
}

/*table {
    font-size: 85%;
    color: rgb(32, 33, 34);
    border-collapse: collapse;
    margin: 1em 0px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(162, 169, 177);
    border-image: initial;
}*/


div.table-data table {
  font-size:85%;
  /*width: 100%;*/
  width:fit-content;
  border-collapse: collapse;
  position:relative;
  background-color:var(--color-bg-no-selected);

}

div.table-data table th, div.table-data table td {
  cursor:pointer;
}

div.table-data table  th.order {
    background-color: #d54954 !important;
}


div.table-data td {
  border: 1px solid #ccc;
  /*padding: 10px;*/
  white-space: nowrap;
}

/* Titre des colonnes */
/* on rend la première ligne fixe */
div.table-data table thead th {
  /*position: sticky; 
  position: -webkit-sticky;
  top: 0;
  z-index: 4;*/
  padding: 3px; 
  background: var(--color-bg-highligh);
  color:white;
}

/* Pour cacher le nom des colonnes sous la première colonne quand on glisse (sous la celulle [0][0]*/
div.table-data table thead th:first-child {
  position: sticky;
  position: -webkit-sticky;
  left: 0;
  z-index: 2; /* 5 se superposait au menu */
}




div.table-data table td{
  vertical-align: middle;
}

/* Titre des lignes */
/* on rend la première colonne fixe */ 
div.table-data table tbody td:first-child {
  position: sticky; 
  position: -webkit-sticky;
  left: 0;
  background: var(--color-bg-highligh);
  z-index: 1;
  color:white;
}



.EURO  {
    border-collapse: collapse; 
 }

 /* Ligne des intitulés des colonnes */
.EURO thead tr:first-child th {
    vertical-align: middle;
    padding: 5px 5px;
    text-align:center;
}

.EURO thead tr span {
  writing-mode: vertical-rl; 
  white-space: nowrap;
}

.r-COVER .EURO thead tr span {
  writing-mode: horizontal-tb;
}

.EURO .first_col:hover {
    background-color:rgba(255,255,180,1);
}

.EURO .first_col span.country{
    display:none;
    padding-left:5px; /* décalage pour afficher drapeau si c'est un pays */
}

.EURO .first_col:hover span.country{
    /*display:inline-block;*/
    color:black; /* nom du pays quand la ligne est surligné */
}



/* Colonne des intitulés des lignes */
.table-data tbody td.first_col div {
    
    text-align:left;
    display: flex;
    justify-content: left;
    align-items: center;
}

.table-data td.first_col img {
    width: 24px;
}

.table-data .val {
  font-size: 1em;
  padding:1px;
  font-weight:bold;
   
    
}

.table-data .val img {
  object-fit: cover;
    width: 100px;
    height: 100px;
}

.EURO .val:hover {
    border:2px solid black;
}

.EURO .vide {
    background-image: linear-gradient(to bottom right,  transparent calc(50% - 1px), white, transparent calc(50% + 1px)); 
    background-color: var(--color-bg-no-selected);
  }

.EURO .normal {
    background-color: #ecf0fd;
    color:black;
}

/* Gérer le surlignement ligne / colonne */
body:not(.nohover) .table-data tbody tr:hover {
  background-color: rgba(255,255,160,0.4);
}

.table-data td:hover::after,
.table-data th:hover::after {
  background-color: rgba(255,255,160,0.4);
}

/* LES COULEURS POUR LES PLACES */

.color_gold {
   background: var(--background-gold);
  color:black;
}

/*.color_gold {
  background: linear-gradient(90deg, rgba(186,148,62,1) 0%, rgba(236,172,32,1) 20%, rgba(186,148,62,1) 39%, rgba(249,244,180,1) 50%, rgba(186,148,62,1) 60%, rgba(236,172,32,1) 80%, rgba(186,148,62,1) 100%);
}*/

.color_silver {
  background: var(--background-silver);
  color:black;
}

.color_bronze {
  background: var(--background-bronze);
  color:black;
}

.color_qualifiers {
  background-color:var(--color-bg-hover);
}

.medaille {
  font-weight: bolder;
    border-radius: 50%;
}

.tableInfosContainer .medaille {
  padding: 5px;
  display: inline-block;
}

.tableInfosContainer table {
  border-collapse: collapse;
  width: 100%;
  color:white;
  
  color:black;
}

.tableInfosContainer th,
.tableInfosContainer td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
  color:white;
}

.tableInfosContainer th {
  background-color: #f2f2f2;
  color:black;
  font-weight:bolder;
}


.table-data.r-RANKING .gold span.val,
.table-data.r-RO .gold span.val
 {
    border-radius:50%;
    background-color:rgba(0,0,0,0.4);
    min-width:15px;
    min-height:15px;
    display:inline-block;
    padding:5px;
}

.table-data.r-RANKING .sf,
.table-data.r-RO .sf {
    background-color: #968f8f;
    color:black;
    font-size:smaller;
}

.table-data.r-RANKING .second_col {
  text-align:center;
  padding: 0px 5px;
  font-weight:bold;
}

.table-data.r-RANKING .second_col:not(:empty) {
  background:var(--background-gold);
}


.color_part1
{
    background-color: #daa4fd;
    color:black;
}

.color_part2 {
    background-color:  #86c6ff;
    color:black;
}

.color_part3 {
    background-color:  #fef54a;
    color:black;
}

.color_part4 {
    background-color:  #fea54a;
    color:black;
}

.color_part5 {
    background-color:  #fe554a;
    color:black;
}


.table-data.r-RANKING .first_col ,
.table-data.r-RO .first_col,
.table-data.r-COVER .first_col {
  padding: 0px 5px;
  vertical-align: middle;
}

.table-data.r-RANKING .country,
.table-data.r-RO .country {
  display:none;
}

/* Popup container - can be anything you want */
.table-data .popup {
  position: relative;
  cursor: pointer;
  user-select: none;
}

/* The actual popup */
.table-data .popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 10;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

.table-data .popup .lignehaute {
    bottom : inherit;
    top:125%;
}

/* Popup arrow */
.table-data .popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.table-data .popup .lignehaute::after {
    top: -22%;
    border-color:  transparent transparent #555 transparent;
}

/* Toggle this class - hide and show the popup */
.table-data .popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* obligatoire pour que le sticky de la première ligne (titre des colonnes) fonctionne*/
div.table-data {
  width: 100%;
  /*max-height: 98vh;*/
  overflow: auto;
  position:relative;
}

.popup-data {
  display: none;
  position: absolute;
  background-color: #fff;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  border: 1px solid #484444;
  max-width: 300px;
  width: 300px;
  z-index:99;
  background-color: var(--color-bg-highligh);
  border-radius:10px;
  color:white;
}

.popup-data.centre {
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.popup-container {
  /*position: relative;
  display: inline-block;*/
  display: flex;
    flex-direction: column;
    top: 280px;
    left: 20px;
    align-self: center;
}


.popup-close {
  position: absolute;
  top: 3px;
  right: 3px;
  cursor: pointer;
  color: white;
  font-size: 30px;
    padding: 2px;
    line-height: 10px;
}

.popup-country {
  display: block;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
}

.popup-year {
  display: block;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
}

.popup-artist,
.popup-song {
  text-align: center;
}

.popup-artist {
  font-weight: bold;
}

.popup-song {
  margin-top: 8px;
}

.popup-content {
  display: flex;
  justify-content: space-between;
  color:black;
  margin-top:30px;
}


.popup-year {
  position:absolute;
  top:0px;
  left:0px;
  width: min-content;
    padding: 3px;
    border-radius: 8px 0px 8px 0px;
    background-color: var(--color-bg-no-selected);
    text-align: center;
}

.popup-country {

  width: 100%;
    padding: 3px;
    
    background-color: var(--color-bg-no-selected);
    
    text-align: center;
}

.popup-country img {
  vertical-align: bottom;
  margin-right: 10px;
}

.popup-photo img {
  width: 100%;
    
  object-fit:cover;
}

.popup-video {
  color: white;
    text-align: center;
    background-color: var(--color-bg-data2);
    padding: 3px;
    font-weight:bold;
    margin-top: 5px;
    line-height: 35px;
    display:block;
}

.popup-video:hover {
  color: black;
  background-color: var(--color-bg-selected);
  
}

.popup-more {
  color: white;
  font-weight:bold;
    text-align: center;
    background-color: var(--color-bg-data2);
    padding: 3px;
    border-radius: 0px 0px 10px 10px;
    margin-top: 5px;
    line-height: 35px;
    display:block;
}

.popup-more:hover {
  color: black;
  background-color: var(--color-bg-selected);
  
}



#videoModal iframe {
  width: 90vw; /* 90 % de la largeur du viewport */
  height: calc(90vw / 1.77); /* Utilisez le ratio 16:9 (16 / 9) pour calculer la hauteur */
  max-width: 100%; /* Pour s'assurer que la vidéo ne dépasse pas la largeur de la modal */
  display: block; /* Assurez-vous que l'iframe est un élément de bloc */
  margin: 0 auto; /* Centrez l'iframe horizontalement dans la modal */
}

.r-COVER.table-data td[data-year='1956'] {
  display:flex;
}
/**** Mdoal (video) *****/
/* Styles pour masquer la modal par défaut */
/*#videoModal .modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.7);
  display:flex;
  justify-content:center;
  align-items:center;

}

#videoModal .modal .modal-content {
  background-color: #fff;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 600px;
  position: relative;
}

#videoModal .modal .close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  cursor: pointer;
}*/


/* DATE OVERVIEW */
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro|Oswald);

/****************************************/

.champ_dates {
  display: flex;
  justify-content: space-evenly;
  margin-bottom:5px;
}

.date-as-calendar {
  font-variant: normal;
    font-style: normal;
    font-weight: normal;
    font-family: "Helvetica", "Arial", sans-serif;
    vertical-align: top;
    /* margin: 1ex; */
    color: black;
    background: white;
    background: linear-gradient(to bottom right, #FFF 0%, #EEE 100%);
    border: 1px solid #888;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 2px 2px 2px -2px black;
  display: inline-block;
  position: relative;
  width: 70px;
  height: 84px;
}

.date-as-calendar .type_event, .date-as-calendar .weekday, .date-as-calendar .day, .date-as-calendar .month, .date-as-calendar .year {
  text-align: center;
  line-height: 1.0;
 display: block;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;

}


.date-as-calendar .type_event {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  background: #B11;
  background: linear-gradient(to bottom right, #D66 0%, #A00 100%);
  color: white;
}


.date-as-calendar .type_event {
  top: 0px;
  font-size: 12px;
  padding: 2px 0;
}

.date-as-calendar .weekday {
  top: 16px;
  font-size: 10px;
}

.date-as-calendar .day {
  top: 26px;
  font-size: 24px;
}



.date-as-calendar .month {
  top: 50px;
  font-size: 12px;
}

.date-as-calendar .year {
  top: 64px;
  font-size: 14px;
}


.search {
  width: 100%;
  position: relative;
  display: flex;
}

.searchTerm {
  width: 100%;
  border: 3px solid var(--color-cards-juryortv);
  border-right: none;
  padding: 5px;
  /*border-radius: 5px 0 0 5px;*/
  outline: none;
  color: var(--color-cards-juryortv);
}

.searchTerm:focus{
  color: var(--color-bg-highligh);
}

.searchButton {
  width: 40px;
  height: 36px;
  border: 1px solid var(--color-cards-juryortv);
  background: var(--color-cards-juryortv);
  text-align: center;
  color: #fff;
  /*border-radius: 0 5px 5px 0;*/
  cursor: pointer;
  font-size: 20px;
}

/*Resize the wrap to see the search bar change!*/
.searchWrap{
  width: 100%;
  line-height: 30px;
  font-size: 17px;
  font-weight: bolder;
  box-sizing: border-box;
}

     /* #searchInput{
            width: 100%;
            box-sizing: border-box;
            line-height: 30px;
    font-size: 17px;
    font-weight: bolder;
    padding:2px 3px;
        }*/

#searchResults {
            list-style: none;
            padding: 0;
            margin: 0;
            display: none;
            border: 1px solid #ccc;
            position: absolute;
            width: 100%;
            z-index:5;
        }

  

        #searchResults li {
            padding: 8px;
            cursor: pointer;
            background-color: var(--color-bg-no-selected)
        }
        #searchResults li img {
                    vertical-align: middle;
                    border-radius: 3px;
                    width: 30px;
                    height: 30px;
                    margin-right: 5px;
                    transition : border-radius 0.4s ease;
        }

 
        #searchResults li:hover {
          background-color: var(--color-bg-selected)
        }

        #searchResults li:hover img {
          transform: scale(1.2); /* Zoom au survol */                   
        }

button.classic {
  background-color: var(--color-bg-data1);
  border: none;
  color: black;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 2px 2px;
  cursor: pointer;
  border-radius: 5px;
  width: fit-content;
  font-weight: 700;
}

button.classic:hover {
  background-color: var(--color-bg-hover);
}

#SONG .logo_euro {
  cursor:pointer;
  width: 100vw;
  max-width:600px;
  /*border-radius:10px;*/
  margin : 5px auto;
} 

#SONG .logo_euro:hover {
  /*bord intérieur*/
  box-shadow: 0px 0px 0px 2px var(--color-bg-selected);
  filter: brightness(0.8);
    transition: filter 0.3s ease; /* Ajoute une transition fluide */
}

/********** FIN : STYLE POUR TABLEAUX DE STATS ************ */
  
.credit {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 0 20px;
  font-size: 12px;
  color: #bfbfbf;
}
.credit_text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.credit_text1 {
  font-weight: bold;
}
.credit_text2 {
  font-size: 14px;
  font-weight: bold;
}
.credit_image {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.credit_image1 {
  width: 30px;
  height: 30px;
  margin-left: 10px;
  margin-right: 10px;
}
.credit_image2 {
  width: 30px;
  height: 30px;
  margin-left: 10px;
  margin-right: 10px;
}