* {
    box-sizing: border-box;
  }
body {
    padding: 0;
    margin: 0;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
}

body.landing{
    background: #00655C;
}
h1, h2, h3, h4, h5{
    font-family: 'Lato', sans-serif;
}
a{
    color:#337ab7;
}
.splash{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color:#fff;
}
.splash h1{
    font-size:2.5rem; 
    font-weight:900;
    text-align: center;
}
.splash .button{
    display: inline-block;
    width: 40%;
}
.splash.live a{
    color:#f0c040;
}
.splash.live p{
    text-align: center;
}
.splash.live small{
    color:#f0c040;
    text-align: center;
    font-size: .8rem;
}
.leadin{
    text-align: center;
    margin-bottom: 2rem;
    font-size: 1rem;
}
.leadin strong{
    font-weight: 900;
}
small{
    display: block;
    margin-bottom: 10px;
    color:#999;
}
.container{
    max-width: 960px;
    margin: auto;
    padding: 0 1rem;
}
/* Navbar styling */
#main-navbar {
    width: 100%;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    background-color: #004D44;
    color: #fff;
    margin-bottom: 0px;
}
#main-navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

#main-navbar .container .logo,
#main-navbar .container .menu-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#main-navbar .container .logo img{
    margin-right: .8rem;
    width: 30px;
}

#hamburger-menu {
    cursor: pointer;
    margin-left: 2rem;
    
}

/* Full-screen menu styling */
#fullscreen-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index:99999;
}

#fullscreen-menu.active {
    opacity: 1;
    visibility: visible;
}

#fullscreen-menu .item {
    font-size: 24px;
    margin: 20px 0;
    cursor: pointer;
    text-align: center;
    transition: color 0.3s ease;
}

#fullscreen-menu .item a{
    text-decoration: none;
    color:#fff
}

#fullscreen-menu .item a:hover,
#fullscreen-menu .item:hover  {
    color: #f0c040;
}

#menu-wrapper {
    position: relative;
    overflow: hidden;
}

/* Container styling */
#constituency-menu {
display: flex;
overflow-x: auto;
position: relative;
white-space: nowrap;
padding: 10px 0 0;
border-bottom: 1px solid #000000;
scroll-behavior: smooth;
/* Dark purple background to match the theme */
}

/* Hide scrollbars in a nice way for modern browsers */
#constituency-menu::-webkit-scrollbar {
display: none;
}
.constituency-menu {
-ms-overflow-style: none;  /* IE and Edge */
scrollbar-width: none;  /* Firefox */
}

#menu-wrapper::before,
#menu-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30px;
    z-index: 1;
    pointer-events: none;
}

#menu-wrapper::before {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

#menu-wrapper::after {
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

/* Individual menu item styling */
.menu-item {
padding: 10px 20px;
color: #000000;
font-size: 16px;
font-weight: bold;
cursor: pointer;
position: relative;
white-space: nowrap;
font-weight: 600;
}
.menu-item.complete{
    color: #34b93d;   
}

.menu-item.complete::after {
    content: "✔";               /* Unicode for check mark */
    color: #34b93d;               /* Color of the check mark */
    margin-left: 5px;          /* Space between the check and the text */
    vertical-align: middle;
}

/* Underline effect for selected item */
.menu-item.selected::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background-color: #000000; /* Accent color for underline */
}

/* Hover effect */
.menu-item:hover {
/* color: #ffafbd; */
}

/* Selected item styling */
.menu-item.selected {
/* color: #ffafbd; */
}

#content{
    /* background-color: #004D44;  */
    padding: 1rem 0;
    position: relative; /* Ensures child elements are positioned relative to this container */
  height: 100%;
  overflow: hidden;
  padding-bottom: 110px;
}
/* Styling for the container and scrollable candidates */
    span.outgoing{
        display: inline-block;
        font-size: 0.6rem;
    }

.constituency{
    position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Ensure it fills the container */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.constituency.selected{
    opacity: 1;
  visibility: visible;
}

.candidate-item {
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
margin: 8px 0;
border-bottom: 1px solid #000000;
transition: 0.3s ease-in-out;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
/* color: #fff; */
}

.candidate-item:hover {
    background: #e4e3e3;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.candidate-info {
    display: flex;
    align-items: center;
}

.candidate-img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 10px;
}

.candidate-details {
display: flex;
flex-direction: column;
}

.candidate-name {
font-weight: 600;
font-size: 16px;
}

.candidate-party {
font-size: 14px;
color: #ffffff;
align-self: flex-start; 
padding: .3rem .5rem;
background-color: #999999;
margin-top: .5rem;
}
.candidate-party.FF{
    background-color: #66BB66;
}

.candidate-party.FG{
    background-color: #6599FF;
}
.candidate-party.SF{
    background-color: #316760;
}
.candidate-party.G{
    background-color: #21AC6F;
}
.candidate-party.L{
    background-color: #CC0000;
}
.candidate-party.SD{
    background-color: #742F8A;
}
.candidate-party.P{
    background-color: #8E2420;
}
.candidate-party.II{
    background-color: #3AEE56;
}
.candidate-party.A{
    background-color: #44532A;
}
.candidate-party.O{
    background-color: #E1A95F;
}
#footer{
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
    position: fixed;
    padding: 1rem 0;
    bottom: 0;
    left: 0;
}
#footer h3{
    margin-top: 0;
}
#footer span{
    margin: 0 .1rem;
}

/* Checkbox */

.checkbox-wrapper-19 {
box-sizing: border-box;
--background-color: #fff;
--checkbox-height: 25px;
}

@-moz-keyframes dothabottomcheck-19 {
0% {
height: 0;
}
100% {
height: calc(var(--checkbox-height) / 2);
}
}

@-webkit-keyframes dothabottomcheck-19 {
0% {
height: 0;
}
100% {
height: calc(var(--checkbox-height) / 2);
}
}

@keyframes dothabottomcheck-19 {
0% {
height: 0;
}
100% {
height: calc(var(--checkbox-height) / 2);
}
}

@keyframes dothatopcheck-19 {
0% {
height: 0;
}
50% {
height: 0;
}
100% {
height: calc(var(--checkbox-height) * 1.2);
}
}

@-webkit-keyframes dothatopcheck-19 {
0% {
height: 0;
}
50% {
height: 0;
}
100% {
height: calc(var(--checkbox-height) * 1.2);
}
}

@-moz-keyframes dothatopcheck-19 {
0% {
height: 0;
}
50% {
height: 0;
}
100% {
height: calc(var(--checkbox-height) * 1.2);
}
}

.checkbox-wrapper-19 input[type=checkbox] {
    display: none;
    pointer-events: none;
}

.checkbox-wrapper-19 .check-box {
    pointer-events: none;
height: var(--checkbox-height);
width: var(--checkbox-height);
background-color: white;
border: calc(var(--checkbox-height) * .1) solid #000;
border-radius: 5px;
position: relative;
display: inline-block;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-transition: border-color ease 0.2s;
-o-transition: border-color ease 0.2s;
-webkit-transition: border-color ease 0.2s;
transition: border-color ease 0.2s;
cursor: pointer;
}
.checkbox-wrapper-19 .check-box::before,
.checkbox-wrapper-19 .check-box::after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
height: 0;
width: calc(var(--checkbox-height) * .2);
background-color: #34b93d;
display: inline-block;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
-webkit-transform-origin: left top;
transform-origin: left top;
border-radius: 5px;
content: " ";
-webkit-transition: opacity ease 0.5;
-moz-transition: opacity ease 0.5;
transition: opacity ease 0.5;
}
.checkbox-wrapper-19 .check-box::before {
top: calc(var(--checkbox-height) * .72);
left: calc(var(--checkbox-height) * .41);
box-shadow: 0 0 0 calc(var(--checkbox-height) * .05) var(--background-color);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.checkbox-wrapper-19 .check-box::after {
top: calc(var(--checkbox-height) * .37);
left: calc(var(--checkbox-height) * .05);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box,
.checkbox-wrapper-19 .check-box.checked {
border-color: #34b93d;
}
.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box::after,
.checkbox-wrapper-19 .check-box.checked::after {
height: calc(var(--checkbox-height) / 2);
-moz-animation: dothabottomcheck-19 0.2s ease 0s forwards;
-o-animation: dothabottomcheck-19 0.2s ease 0s forwards;
-webkit-animation: dothabottomcheck-19 0.2s ease 0s forwards;
animation: dothabottomcheck-19 0.2s ease 0s forwards;
}
.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box::before,
.checkbox-wrapper-19 .check-box.checked::before {
height: calc(var(--checkbox-height) * 1.2);
-moz-animation: dothatopcheck-19 0.4s ease 0s forwards;
-o-animation: dothatopcheck-19 0.4s ease 0s forwards;
-webkit-animation: dothatopcheck-19 0.4s ease 0s forwards;
animation: dothatopcheck-19 0.4s ease 0s forwards;
}


/* end checkbox */

/*PICKS DRAWER */

/* Initial hidden state for the drawer */
.drawer {
    position: fixed;
    bottom: -100%; /* Start below the screen */
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.2);
    transition: bottom 0.3s ease; /* Smooth transition */
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

/* Header styling */
.drawer-header {
    display: flex;
    background: #004D44;
    color: #FFFFFF;
    justify-content: center; /* Center the heading */
    align-items: center; /* Vertically center items */
    position: relative; /* Position relative to allow absolute positioning of the close button */
    padding: 0 10px;
    border-bottom: 1px solid #ccc;
}

/* Content styling */
.drawer-content {
    padding: 1rem;
    overflow-y: auto; /* Enables scrolling if content overflows */
}

/* When the drawer is active, it moves to the visible part of the screen */
.drawer.active {
    bottom: 0;
}

#picksDrawer, #electedDrawer{
    text-align: center;
}
#picksDrawer div.item{
margin: 1rem 0;
}

#picksDrawer div.item .checkbox-wrapper-19{
    display: inline-block;
}
#picksDrawer div.item .checkbox-wrapper-19 label{
    margin-bottom: -7px;
    margin-right: 7px;
}

.close-button {
    position: absolute;
    top: 18px; /* Adjust spacing from the top */
    right: 10px; /* Adjust spacing from the right */
    background: none; /* Remove default button background */
    border: none; /* Remove border */
    font-size: 1.5rem; /* Size of the "X" */
    cursor: pointer;
    color: #fff; /* Adjust text color */
}

.close-button:hover {
    color: #000; /* Darker color on hover */
}

/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    background-color: #333; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 0.25rem; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    left: 50%; /* Center horizontally */
    bottom: 100px; /* Adjust vertical position */
    transform: translateX(-50%); /* Ensure it's horizontally centered */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Add shadow for better visibility */
}
  #snackbar.success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
  }
  #snackbar.error {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
  }
  
  /* Show the snackbar when clicking on a button (class added with JavaScript) */
  #snackbar.show {
    visibility: visible; /* Show the snackbar */
    /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
    However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
  }
  
  /* Animations to fade the snackbar in and out */
  @-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 100px; opacity: 1;}
  }
  
  @keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 100px; opacity: 1;}
  }
  
  @-webkit-keyframes fadeout {
    from {bottom: 100px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
  }
  
  @keyframes fadeout {
    from {bottom: 100px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
  }


  /* Registration form */
  form {
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
form input {
    display: block;
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
}


.button {
    background-color: #83754E; /* Replace with your desired color */
    width: 100%;
    font-size: 16px;
    padding: 10px 20px;
    color: white;
    border: none;
    border-radius: 30px; /* Rounded corners */
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    outline: none;
}
    
    /* Optional: hover effect */
.button:hover {
    background-color: #9C8D61;
}

button.ghost {
    background: none;
    color: white;
    text-align: center;
    border: 1px solid #fff;
    padding: .5rem 1rem;
    border-radius: 30px;
    outline: none;
    cursor: pointer;
}
button.ghost:hover {
    border-color:#9C8D61;
}

.success {
    color: green;
}
.error {
    color: red;
}

/* end registration form */

/* leaderboard */

table{
    width: 100%;
    border-collapse: collapse; /* Ensures borders of adjacent cells collapse into one */
    border-spacing: 0;
}
table .name{
    text-align: left;
}
table .rank,
table .score{
    text-align: center;
}

/* end leaderboard */

.alert {
    margin-top: 1rem;
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
  }
  
.alert-info {
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff;
}

.alert-info .alert-link {
    color: #033a40;
    font-weight: bold;
    text-decoration: underline;
}

.alert #remaining{
    font-weight: 900;   
}


#user{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    border-top:1px solid gold;
    border-bottom:1px solid gold;
}
#user .item{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#user .item h3{
    margin-bottom: 0;
}

.overall-results {
    display: flex;
    flex-wrap: wrap;
}

.overall-results > div {
    width: 100%; /* Full width on mobile */
    padding: 0 1rem;
    box-sizing: border-box; /* Include padding/border in width */
}
.overall-results img {
    width: 100%;
    max-width: 200%;
}
.overall-results h3{
    text-align: center;
}

.vote-bar {
    width: 100%; /* Full width container */
    height: 30px;
    background: #c7c6c6;
    border-radius: 30px;
    overflow: hidden; /* Ensures the fill stays inside the container */
    position: relative; /* For inner positioning */
    margin-bottom: .5rem;
    padding: .5rem;
}

.vote-fill {
    height: 100%; /* Fill matches the height of the container */
    position: absolute; /* Allows precise control */
    top: 0;
    left: 0;
    margin: 0;
    z-index: 0;
    width: 0%; 
    transition: width 1s ease-out; 
}
.vote-bar .result{
    display: flex;
    align-items: center;
    padding-left: .5rem;
    color:#fff;
    height: 100%; /* Fill matches the height of the container */
    position: absolute; /* Allows precise control */
    top: 0;
    left: 0;
    margin: 0;
    z-index: 1;
}


@media (min-width: 768px) {
    .leadin{
        font-size: 1.3rem;
    }

    #leaderboardDrawer{
        width: 100%;
    }

    .ghost.elected{
        display: block!important;
    }

    .candidate-wrapper {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* 3 columns */
      gap: 16px; /* Space between candidates */
    }
    .candidate-item {
      margin: 0; /* Remove margin between items in grid */
      border-bottom: none; /* Remove bottom border between grid items */
    }
    .overall-results > div {
        width: 50%; /* Half width on desktop */
    }
  }