.middle{
    width: 100vw;
    height: 90vh;
    display: flex;
    color: black;
   
}

.left{
    width: 12vw;
    height: 90vh;
    background-color: var(--main_color_04);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
   
}
.left h5{
    color: black;

}

.left h4 {
    color: black;
    font-size: large;
    text-transform: capitalize;
}

.left p{
    color: var(--main_color_03);
    margin: 25px 10px;
    text-transform: capitalize;
    text-align: center;
    
}

.left .label{
    color: black;
    text-align: left;
    margin-bottom: 5px;
    margin-top:  10px;
    
}

.left .error{
    text-align: center;
    margin-top:  30px;
    
}

/* New Form CSS */
#voteForm {
    height: 150px;
    width: 80%;
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
}

#voteForm span{
    padding: 10px 20px;
    border: 2px solid #000000;
    border-radius: 8px;
    margin-bottom: 10px;
    color:black;
    cursor: pointer;
    
  }

  #voteForm input[type="radio"] {
    display: none;
  }

  #voteForm input[type="radio"][value = "in"]+ span:hover {
    padding: 10px 20px;
   border: none;
    background-color: #169206;
    color: white;    
  }

  #voteForm input[type="radio"][value = "in"]:checked + span {
    padding: 10px 20px;
    border: none;
    background-color: #169206;
    color: white;    
  }

  #voteForm input[type="radio"][value = "out"]+ span:hover {
    padding: 10px 20px;
    border: none;
    background-color: #b60505;
    color: white;
    
  }
  #voteForm input[type="radio"][value = "out"]:checked + span {
    padding: 10px 20px;
    border: none;
    background-color: #b60505;
    color: white;
    
  }



  /* New Form CSS End */

form{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

form div{
   display: flex;
   flex-direction: column;
   width: 160px;
}

.left select{
  color: black;
  width: 120px;
  border-radius: 5px;
  border: 1px solid black;
  padding: 5px;
}



.left option{
    color: black;
}


.left button{
    width: 160px;
    background-color: var( --button_01);
    padding: 5px;
    border: none;
    border-radius: 5px;
    box-shadow: 0 0 5px grey;
    text-transform: uppercase;
}

.left button:hover{
    background-color: var(--btn_hover);
}

.vote-btn{
    margin-top: 15px;
}
.next-btn{
    margin-top: 40px;
    margin-bottom: 20px;
}


.finish-btn{
    margin-top: 100px;
}

a{
    color: black;
    margin-top: 50px;
}
.right{
    width: 90vw;
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

.right h5{
    color: rgb(255, 175, 54);
    text-align: center;
    margin-bottom: 20px;

}



.image_container{
    width:100%;
    height: 80%;
}

.image_container img{
    width:100%;
    height: 100%;
    object-fit: contain;
}

.hidden{
    display: none;
}

.exifdata{
    width: 20%;
    height: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  
    
    
}

.exif-tags{
    display: flex;
    margin-right: 10px;

   
    
}

.exif-tags .key{
    width: 100px;
    height: 100%;
   
    
    
}

.exif-tags .value{
    width: 150px;
    height: 100%;
    
   
    
}

.exif-tags .key p{
    color: rgb(151, 151, 151);
    font-size: .7rem;
    text-align: right;
    margin-top: 5px;
}
.exif-tags .value p{
    text-align: left;
    padding-left: 5px;
    color: rgb(204, 204, 204);
    font-size: .7rem;
    margin-top: 5px;


}
 p{
    text-align: center;
 }