html {
     height: 100%;
}

body
{
     background-color:white;
     background-image: linear-gradient(to bottom, #71a6fa, white);
     background-repeat: no-repeat;
     border:solid 0px #0659de;
     margin:0px;
     font-family: Geneva, Helvetica, Arial, sans-serif;
     font-size:16px;
     line-height:2em;
     min-height: calc(100% - 10px);
     padding:12px 8px 0px 8px;
     display:relative;
     
}

.bkg {
   background-image: url('Balanced_scale_of_Justice.png');
  background-repeat: no-repeat;
   width:100%;
   height:100%;
   position:absolute;
   top:15%;
   left:0px;
   background-position-x: center;
   background-size: contain;
   z-index: -1;


   
}

.content {
   margin:0 auto 0 auto;
}

.title {
  font-family: Georgia, serif;
  width:100%;
  text-align:center;
  font-size:30px;
  font-weight:bold;
  padding:15px 0 10px 0;
  margin-top:20px;

}

.Subtitle {
 font-family: Georgia, serif;
  width:100%;
  text-align:center;
  font-size:24px;
  font-weight:bold;
  padding:0px 0 10px 0;
}
.Lang{
  width:100%;
  text-align:center;
  padding:15px 0 10px 0;

}

.petition {
  margin-left:2px;
  border: solid black 1px;
  text-align:justify;
  padding:15px 10px 10px 10px;
  background-color:rgba(255,255,255,0.7);
  border-radius:2px;
  min-height:300px;
  line-height:1.5;
}

.Sign {
  width:100%;
  text-align:center;
  padding:15px 0 10px 0;
}

select#Lan {
  background-color:#DDDDDD;
}

.btn{
 border: solid black 1px;
 border-radius:5px;
 background-color:#DDDDDD;
 padding:5px 10px 5px 10px;
 font-family: Geneva, Helvetica, Arial, sans-serif;
 font-size:14px;
 margin:0 5px 0 5px;
 text-decoration:none;
 color:#0544a8;
}
 

.btn:hover, .btn:active {
  background-color:#CCCCCC;
}

.Footer{
  width:100%;
  text-align:center;
  padding:15px 0 10px 0;
  font-size:14px;
}

.Counter{
  width:100%;
  text-align:center;
  padding:15px 0 10px 0;
  text-decoration:none;
  color:black;
}

.Disclaimer{
  width:calc(100% - 10px);
  text-align:center;
  padding:10px 5px 10px 5px;
  font-weight:bold;
}

.invalid {
   color:red;
   font-weight:bold;
}

.SuccessMessage{
  
   width:calc(100% - 20px);
   text-align:center;
   padding:15px 10px 10px 10px;
   margin-bottom:10px;
   
}



/* popup */

.pop_bkg{
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(0,0,0,0.2); /* Black w/ opacity */
    
    backdrop-filter: blur(8px);
}

.pop_hidden{
      display: none;
}

.pop{
    z-index: 2; /* Sit on top */
    background-color: white;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 3px solid black;
    border-radius:4px;
    width: 85%; 
    max-width:400px;
}

.popTitle{
  width:100%;
  text-align:center;
  font-family: Georgia, serif;
  font-size:22px;
  font-weight:bold;
  padding:15px 0 30px 0;
  text-decoration:underline;
}

.field{
  width:100%;
  text-align:left;
  padding:0 0 10px 0;
}

.lbl{
display:inline-block;
   width:30%;
   margin-right:5px;
}

.btnbar{
  width:100%;
  text-align:center;
  padding:15px 0 10px 0;
}

.errorMessage{
   color:red;
   width:calc(100% - 20px);
   text-align:center;
   padding:15px 10px 10px 10px;
   margin-bottom:10px;
   border: solid red 1px;
   
}


/*stats*/

.chart_container{
  width:100%;
  max-width:400px;
  text-align:center;
  margin:15px auto 0px auto;
  padding-top:10px;
  padding-bottom:10px;
  border: solid black 1px;
  background-color:rgba(255,255,255,0.7);
  border-radius:2px;
  vertical-align:top;
}
.chart_title{
  width:100%;
  text-align:center;
  font-family: Georgia, serif;
  font-size:22px;
  margin-bottom:10px;
}
.chart_box{
  display:inline-block; 
  display:relative;
  vertical-align:top;
}
.chart_legand{
  display:inline-block; 
  width:140px;
  margin-left:10px;
  display:relative;
  padding-top:20px;
}
ul ul {
  list-style-type: none; /* Remove default bullets from nested lists */
}

ul ul li::marker {
  content: "- "; /* Add a dash for second level items */
}