body {
    background-color: #6526bb ;
    margin: 0;
}
.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 75px;
    display: flex;
    z-index: 500;
    align-items: center;
    font-size: 22px;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-opaque background */
}

.logo {
    flex: 1;
    padding-left: 20px; /* Adjust as needed */
}


.headerMenu {
    padding-right: 20px; /* Adjust as needed */
}

.headerMenuResults {
    padding-right: 20px; /* Adjust as needed */
}

.logo {
    position: relative;
    display: flex;
    align-items: center;
    height: 50px;
}

.logo svg {
    height: 100%;
    width: auto;
}

.emoji {
    font-family: "Noto Color Emoji", sans-serif;
    font-weight: 400;
    font-style: normal;
  }




  
  .countryMenu { 
    background-color: white;
    position: absolute;
    top: 75px;
    height: calc(100% - 75px);
    width: 100vw;
    align-items: center;
    justify-content: center;
    z-index: 100;
    font-size: 25px;
    font-family: Arial, Helvetica, sans-serif;
    transition: opacity 1s ease;
    display: none; /* Start as not displayed */
}

.countryMenuContent {
    width: 250px;
    height: 100%;
    margin-top: 250px;
    
}

.menu-option {
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    padding: 10px;
    font-size: 20px;
    text-align: center;
    line-height: 30px;
}

#welcome { 
    background-color: white;
    position: absolute;
    top: 75px;
    height: calc(100% - 75px);
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 600;
    font-size: 25px;
    font-family: Arial, Helvetica, sans-serif;
}

#loading { 
    background-color: white;
    position: absolute;
    height: calc(100%);
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    font-size: 25px;
    font-family: Arial, Helvetica, sans-serif;
    opacity: 1;  /* Start fully visible */
    transition: opacity 0.5s ease-out;  /* Adjust duration and easing to taste */
}


.results { 
    background-color: white;
    position: absolute;
    top: 75px;
    height: calc(100% - 75px);
    width: 100vw;
    z-index: 100;
    font-size: 25px;
    overflow: hidden;
    margin: 0 auto;
    padding-top: 20px;
    font-family: Arial, Helvetica, sans-serif;
    display: none;

}

.resultsContent {
    margin: 0 auto;
    width: 320px;
    color: black;
    animation: fade-in 1s ease-in-out;
}

.exit {
    position: absolute;
    right: 30px;
    top: 60px;
    width: 80px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 50px;
}

.topbottomButton {
    position: relative;
    height: 25px;
    background-color: white;
    line-height: 25px;
    font-size: 15px;
    float: left;
    text-align: center;
    width: 40%;
    margin-bottom: 5px;
    border-bottom: solid 1px azure;

}

.topbottonButtonActive {
    background-color: azure;

}

.resultTable {
    position: relative;
    float: left;
    width: 80%;
    font-size: 15px;
}

.countryResult {
    position: relative;
    float: left;
    width: 100%;
    height: 32px;
    border-bottom: 1px solid antiquewhite;


}

.countryName {
    position: relative;
    float: left;
    width: calc(74% - 5px);
    height: 25px;
    padding-left: 5px;
    line-height: 25px;
    font-family: "Noto Color Emoji", Arial, Helvetica, sans-serif;

}

.countryScores {
    position: relative;
    float: left;
    width: 26%;
    height: 25px;
}

.scoresCell{
    position: relative;
    float: left;
    width: 50%;
    height: 25px;
    text-align: center;
    line-height: 25px;
}


.small {
    font-size: 11px;
    line-height: 12px;
}


#menuSettingsOverlay { 
    background-color: white;
    position: absolute;
    top: 75px;
    height: calc(100% - 75px);
    width: 100vw;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 101;
    font-size: 25px;
    font-family: Arial, Helvetica, sans-serif;
  }

  
#login { 
    margin: 0 auto;
    width: 250px;
    color: black;
    display: none;
    animation: fade-in 1s ease-in-out;
}
  
  #settingsContent { 
    margin: 0 auto;
    width: 250px;
    color: black;
    animation: fade-in 1s ease-in-out;
    
  }
  
  #DisplayNameEnter {
      background: none;
      border: none;
      border-bottom: 1px solid black;
      width: 250px;
      text-align: left;
      margin-top: 7px;
      font-size: 30px;
   }
  
   #DisplayNameEnter2 {
    background: none;
    border: none;
    border-bottom: 1px solid black;
    width: 250px;
    text-align: left;
    margin-top: 7px;
    font-size: 30px;
  }
  
   input[type="text"] {
      display: inline-block;
      height: 60px;
      color: black;
      line-height: 22px;
      outline: none;
  
    }
  
    .noOutline:focus {
      outline:none;
    }
  
  
    .flashing {
      animation: flashing 1s linear infinite;
    }
    
    @keyframes flashing{
      0% { color: rgba(206, 45, 113, 0);}
      49% { color: rgba(206, 45, 113, 0); }
      50% {  color: rgb(0, 0, 0); }
     100% {  color: rgba(0,0,0, 1); }
    }

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


.scalable-div {
    width: 320px;
    height: 570px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center center;
}

.swiper {
    width: 100%;
    height: 100%;
}


.vote-card {
    display: block;
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #333;
    justify-content: center;
    align-items: center;
    width: 320px;
    margin-top: 35px;
    max-width: 320px;
    /* border: 1px solid #ccc; */
    /* margin: auto; */
}

.intro {
    width: calc( 100% - 30px);
    position: relative;
    padding: 30px;
}

.resultsCard {
    background-color: white;
    margin-top: 75px;
    height: 512px;
    font-family: Arial, Helvetica, sans-serif;
}

/* Ensure swiper fills the container */
.swiper-container {
    width: 100%;
    height: 100%;
}


.country-code {
    position: relative;
    height: 40px;
    margin-bottom: -5px;
    font-size: 40px;
    color: #e0e0e0;
    text-align: right;
    font-weight: bold; /* Make the country name bold */

}

.country-name-bar {
    position: relative;
    background-color: #e0e0e0;
    height: 40px;
    padding-left: 20px;
    font-size: 30px;
    line-height: 40px;
    text-align: left;
    width: calc(100% - 20px);
    font-weight: bold; /* Make the country name bold */
}

.top-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color:rgb(241, 241, 241);
    height: 120px;
}

.song-info {
    width: 65%;
}

.song-info p {
    margin-left: 30px;
    color: black;
}

.song-info p strong {
    font-weight: bold; /* Make the labels bold */
}

.score {
    font-size: 72px;
    font-weight: bold;
    color: #000;
    margin-right: 30px;
    width: 35%;
    text-align: right;
}

.ratings {
background-color: white; /* White background for the entire ratings div */
padding: 30px; /* Padding around the ratings content */
padding-top:0px;
padding-bottom:15px;
position: relative; /* Needed if you're going to absolutely position the comment div */
}

.comment {
position: absolute; /* Position absolutely to cover the ratings if needed */
top: 0; left: 0; right: 0; bottom: 0; /* Cover the entire ratings div */
display: flex; /* Use flex to center the input horizontally */
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
background-color: rgba(255, 255, 255, 0.9); /* Slightly transparent white background */
z-index: 10; /* Make sure it's above other content */
padding: 30px;
padding-top: 0px;
display: none;  /* Set all elements with the class 'comment' to be initially hidden */
}

.miniResult {
    position: absolute; /* Position absolutely to cover the ratings if needed */
    top: 0; left: 0; right: 0; bottom: 0; /* Cover the entire ratings div */
    background-color: rgba(255, 255, 255, 0.9); /* Slightly transparent white background */
    z-index: 10; /* Make sure it's above other content */
    display: none;  /* Set all elements with the class 'comment' to be initially hidden */
    overflow-y: auto; /* Hide vertical scrollbar */
    width: 100%;
    height: 355px;
}
    
.MiniResult-Line {
    position: relative;
    float: left;
    width: calc(100% - 30px);
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: white;
    padding-left: 30px;
}

.MiniResult-Line-Main {
    border-top: 1px solid grey;
}

.comment-input {
font-size: 50px; /* Large text size for readability */
border: none; /* No borders to maintain a text-like appearance */
outline: none; /* Remove the outline to avoid visual distraction on focus */
background-color: transparent; /* Transparent background */
color: black; /* Text color for contrast */
padding: 30px;
resize: none; /* Disable resizing to maintain layout integrity */
position: absolute; /* Position absolutely to cover the ratings */
top: 0; left: 0; right: 0; bottom: 0; /* Cover the entire ratings div */
font-family: Arial, Helvetica, sans-serif;

}

.comment-input::placeholder {
color: gray; /* Light gray placeholder text */
}

/* Hide the input box borders and outline on focus to maintain the text-like appearance */
.comment-input:focus {
border: none;
outline: none;
}



.rating {
    padding-top: 15px;
}

.ratingTitle {
    font-weight: bold;
}

.numbers {
    display: flex;
    justify-content: space-between; /* Spread the numbers evenly */
    flex-wrap: wrap;
    margin-top: 10px; /* Add a little space above the number line */
}

.number {
    flex-basis: 9%; /* Slightly less than 10% to account for margin/padding */
    text-align: center;
    font-size: 18px; /* Larger font size for the numbers */
    padding: 5px 0; /* Add some padding to each number for touch targets */
    cursor: pointer; /* Suggest interactive elements */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
}



.commentButton {
    background-color: white;
    padding-right: 0px;
    padding-top: 0px;
    margin-top: -5px;
    height: 40px;
    padding-left: 30px;
    line-height: 40px;
    text-align: left;
    font-weight: bold; /* Make the country name bold */
    
}

.voteButton {
    background-color: white;
    height: 40px;
    padding: 30px;
    line-height: 40px;
    text-align: left;
    font-weight: bold;
    color: #1ec2df ;
    font-size: 30px;
    margin-top: -1px;
    padding-bottom: 15px;
}

        /* Default style for numbers */
.number {
    color: black; /* Default color */
    cursor: pointer;
    transition: color 0.3s; /* Smooth transition for color change */
}

.voting-ready {
    color: #F44490;
}

@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
20%, 40%, 60%, 80% { transform: translateX(10px); }
}

.shake {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}

.active-1 { font-weight: bold; } /* Red */
.active-2 {font-weight: bold; }
.active-3 {  font-weight: bold; }
.active-4 { font-weight: bold; }
.active-5 { font-weight: bold; } /* Yellow */
.active-6 {  font-weight: bold; }
.active-7 { font-weight: bold; }
.active-8 {font-weight: bold; }
.active-9 {  font-weight: bold; } /* Green */
.active-10 {  font-weight: bold; }