body{
   background-color:white;
  }                                            
  
  
  @media (max-width: 450px) {
       .buttonV,.buttonVPN {
          max-width:80%;
          max-height:80%;
          font-size:80%;
       }
     }
 
  
 
   /* unvisited link */
 a:link {
   color:rgb(240, 153, 14);
   text-decoration: none;
   
 }
 
 /* mouse over link */
 a:hover {
    background-color: #FFBD33; /* Gold hover effect */
   color: #003366;
   transform: scale(1.05); /* Slightly enlarges the button on hover */
 }
 
 /* selected link */
 a:active {
   color: rgba(6, 95, 150, 0.61);
   text-decoration: none;
   font-size:110%
 }
  html{
 font-family:Inter;
 max-width:80%;
 margin:auto;
 color:midnightblue;
 line-height: 1.5em;
 }
 input:placeholder-shown {
   border: 5px solid rgb(51, 142, 234);
   font-style: italic; 
 }
 
 
 label{
     display: inline-block;
     text-align: left;
     margin-left:3%
     
 }
 select {
     font: inherit;
 }
 
 
 input[type=text], input[type=url], input[type=email], input[type=tel] {
 
   display: inline-block;
   width: 35%;
   height: 1.7em;
     line-height: 2em; font-size: .9vm;
     border-radius: 0px; ;
     background-color:white;
     border:1px solid lightblue;
    
     
 }
 input[type=password], input[type=textarea] input[type=number] {
 
   display: inline-block;
   width: 20%;
   height: 1.7em;
     line-height: 2em; font-size: .9vm;
     border-radius: 0px; ;
     background-color:white;
     border:1px solid lightblue;
   }
 
     
 table {
   max-width: 80% ;
   margin-left:auto; 
   margin-right:auto; 
   border-collapse: collapse;
   overflow: hidden;
 }
 
 
 
 
 form {
   max-width: 100%;
   margin-left:auto; 
   margin-right:auto; 
   padding:10px;
   border:1px solid rgb(63, 152, 241);
   background:white;
   font-size:100%;
   border-radius: 10px;
   display:none
 }
 #radio, #logo,#logo2,#logo3,#PINVStock,#PINVSafe {
   max-width: 80%;
   margin-left:auto; 
   margin-right:auto; 
   padding:0px;
   border:0px solid lightblue;
   background:white;
   border-radius: 0px;
 }
 
 #pricing {
   max-width: 80%;
   margin-left:auto; 
   margin-right:auto;
   font-size:100%; 
   padding:0px;
   border:1px solid rgb(50, 78, 168);
   background:#F0F8FF;
   border-radius: 0px;
 
   
 }
 #alert1,#alert2,#alert3 
 {
 
   border:0px;
 }
 
 
 #pricing td, #pricing th {
   border: 1px solid #ddd;
   padding: 8px;
 }
 
 #pricing tr:nth-child(even){background-color: white;}
 #pricing tr:nth-child(odd){background-color: white;}
 
 #pricing tr:hover {background-color: #ddd;}
 
 #pricing th {
   padding-top: 12px;
   padding-bottom: 12px;
   text-align: center;
   font-size:100%;
   background-color: #F0F8FF;
   color:rgb(50, 78, 168);
 
 }

   
.buttonV,.buttonVPN,button{
  background-image: linear-gradient(
  to right,
  #007BFF,
  rgba(6, 95, 150, 0.61) ,
  rgba(6, 95, 150, 0.61) 200%,
rgba(6, 95, 150, 0.61) 100%
);
background-position-x: 0%;
background-size: 200%;
text-shadow: 0 1px 1px #333;
font-family:Calibri;
  color: white; /* White text color */
  padding: 10px 20px; /* Padding inside the button */
  border: none; /* Remove default border */
  border-radius: 10px; /* Rounded corners */
  position: relative; /* For positioning the inner border */
  font-size: 14px; /* Font size */
  font-weight: bold; /* Bold text */
  cursor: pointer; /* Pointer cursor on hover */
  outline: none; /* Remove default outline */
}

.buttonV::before,.buttonVPN::before, .buttonD::before  {
content: ''; /* Empty content for the pseudo-element */
position: absolute; /* Absolute positioning */
top: 2px; /* Positioning the inner border */
left: 2px; /* Positioning the inner border */
right: 2px; /* Positioning the inner border */
bottom: 3px; /* Positioning the inner border */
border: 2px solid white; /* White inner border */
border-radius: 8px; /* Rounded corners for the inner border */
}
.buttonV:hover,.buttonVPN:hover, .buttonE:hover,.buttonS:hover,.buttonD:hover {
background-position-x: 100%;
transform: scale(1.1);
background: #004085;
}
.buttonV:focus,.buttonVPN:focus,.buttonE:focus,.buttonS:focus,.buttonD:hover {
background-color: #004085 ;

}
.buttonV:active,.buttonVPN:active,.buttonE:active,.buttonS:active,.buttonD:active {
background-color: #004085; /* Even darker blue on click */
}

 
#head_background_new {
background-image: url("img/spiral3.jpg");
filter:drop-shadow(0 0mm 0.6rem #06488a brightness(82%));
background-repeat: no-repeat;
opacity: 95%;
border-radius:1%;
background-size: cover; /* or contain */
       background-position: center;
       opacity: 95%;
       border-radius: 1%;
       height: 35vh; /* Ensure the div has a height */
    

}
#head_background_new_vsafe {
background-image: url("img/spiral3.jpg");
filter:drop-shadow(0 0mm 0.6rem #06488a brightness(82%));
background-repeat: no-repeat;
opacity: 95%;
border-radius:1%;
background-size: cover; /* or contain */
       background-position: center;
       opacity: 95%;
       border-radius: 1%;
       height: 40vh; /* Ensure the div has a height */
    

}

 #head_background2 {
background-image: url("img/spiral3.jpg");
background-repeat: no-repeat;
opacity: 95%;
filter:drop-shadow(0 0mm 0.6rem #06488a brightness(82%));
border-radius:1%;
background-size: cover; /* or contain */
       background-position: center;
       opacity: 95%;
       border-radius: 1%;
       height: 40vh; /* Ensure the div has a height */
    

}
 
 .center
 {
     text-align:center;
 }
  
 
   #PIN {
     display:none;
   }
   #PINVSafe{
     display:none;
   }
    #PINVStock{
     display:none;
   }
   #VervHeader {
     display:block;
   font-family:'Lato';font-size:2.2vw;text-align:center;color:#FFBD33; padding-right:10%;line-height: 1.1em;text-shadow: 2px 2px 2px navy
   }
      #selEnergy {
     display:none;
   }
   #selIdentity {
     display:none;
   }
  
 
   #upAccount {
     display:none;
   }
   #upAnswer {
     display:none;
   }
   #complete {
     display: none;
 
   }
   #configVPN  {
     display: none;
 
   }
  
   #loader {
     display: none;
   }
    
  
   .dropbtn {
   
   border-radius: 49%;
   font-family: 'Inter',sans-serif;
   color:white;
   min-width: 260px;
   min-height:130px;
    font-size: 2em;
   background:rgba(6, 95, 150, 0.61);
   padding: 15px 15px 15px 15px;
   text-decoration:#003cb3 ;
   background-image: url('img/Verviam Spiral Logo no text.png');
   border-style:solid;
   background-size: 300px 154px;
   border-color:#003cb3;
   text-align:right;
   
 }
   
   .dropdown {
   position: relative;
   display: inline-block;
   
   }
   
     .dropdown-content {
 display: none;
 border-radius: 10%;
 position: absolute;
 min-width: 250px;
 background-image: linear-gradient(to right,#304c83,#304c83,#304c83,#304c83,rgba(6, 95, 150, 0.61),#f6d581);box-shadow: 0px 8px 1vm 0px rgba(0,0,0,0.2);
 z-index: 1;
 }
    .dropdown-content a {
     color: #f6d581;
     padding: 12px 1vm;
     font-size: 100%;
     text-decoration: none;
     display: block;
     border-radius: 20px;
     
   }
   h1,h2,h3 {
     text-align:center;
 } 
 #btnctr {
   text-align: center;
   margin-left:10%;
   margin-right:10%;
   }
 
 .dropdown-content a:hover {background-color:rgb(51, 102, 153);}
 .dropdown:hover .dropdown-content {display: block;}
 
 .dropdown:hover .dropbtn {background-color: rgb(45, 73, 153);}
 
   .symbol {
           font-family: Unicode;
           font-size:200%;
           font-weight: bold;
           color:rgb(255, 191, 0)
       }
          
   .vervstyle {
   
   color:#DAA520;
   font-weight: bold;
  
   font-size:120%;
 
 }
.simple1 {
 
   font-size:2vw;;color:white
 }
 .forinternetusers {
   color:rgb(255, 191, 0);font-size:1.4vw
 }  
 
   /* Popup container - can be anything you want */
   .popup {
     position: relative;
     display: inline-block;
     cursor: pointer;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
   }
   
   /* The actual popup */
   .popup .popuptext {
     visibility: hidden;
     font-size:80%;
     width:300px;
     background-color: rgba(6, 95, 150, 0.90);
     color: #fff;
     text-align: left;
     border-radius: 10px;
     padding: 25px ;
     position: absolute;
     z-index: 1;
     bottom: 125%;
     left: 50%;
     margin-left: 5px;
   }
   
   /* Popup arrow */
   .popup .popuptext::after {
     content: "";
     position: absolute;
     top: 100%;
     left: 50%;
     margin-left: -5px;
     border-width: 5px;
     border-style: solid;
     border-color: rgb(45, 73, 153) transparent transparent transparent;
   }
   
   /* Toggle this class - hide and show the popup */
   .popup .show {
     visibility: visible;
     -webkit-animation: fadeIn 1s;
     animation: fadeIn 1s;
   }
   
   /* Add animation (fade in the popup) */
   @-webkit-keyframes fadeIn {
     from {opacity: 0;} 
     to {opacity: 1;}
   }
   
   @keyframes fadeIn {
     from {opacity: 0;}
     to {opacity:1 ;}
   }
 
   .selectType {
     max-width: 100%;
   margin-left:auto; 
   margin-right:auto; 
   padding:10px;
   border:1px solid lightblue;
   background:white;
   font-size:100%;
   border-radius: 10px;
   }

   #kev-title, #kev-open {color:rgb(250, 230, 192)}

   #vstock_info{
    display:none
   }

   /* ------------------------------
   Verv IAM identity form
------------------------------ */
#ID {
     display:none;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    box-sizing: border-box;
    color: rgb(45, 73, 153);
    line-height: 2.2em;
    font-size: 90%;
}

#ID label {
    display: inline-block;
    margin-right: 0.35rem;
    font-weight: 600;
}

#ID input,
#ID select {
    box-sizing: border-box;
    margin-right: 1rem;
}

#email,
#firstname,
#lastname,
#town,
#company {
    width: 200px;
}

#psw,
#postcode {
    width: 100px;
}

#challenge {
    width: 200px;
}

#q1,
#q2,
#q3,
#q4 {
    width: 180px;
}

#country {
    width: 200px;
    border-radius: 12px;
}

#logo3 {
    width: 100%;
    margin: 0;
}

/* Verv Stock */
#ID.verv-stock .vervsafe-only {
    display: none;
}
/*
   Verv Stock mode:
   hide fields that are only needed by Verv Safe.
*/
#ID.verv-stock .vervsafe-only {
    display: none !important;
}

/* Mobile layout */
@media (max-width: 700px) {
    #ID {
        width: 96%;
        padding: 1rem;
    }

    #ID .form-grid {
        grid-template-columns: 1fr;
    }

    #ID .form-field.full-width,
    #ID .full-width {
        grid-column: auto;
    }

    #ID .pin-field {
        max-width: none;
    }

    #ID .form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    #ID .form-logo {
        align-self: center;
    }

    #ID .button-group {
        justify-content: center;
    }
}