#videoThumbnail {
       cursor: pointer;
       max-width: 100%;
       height: auto;
   }
   #videoThumbnail1 {
      cursor: pointer;
      border-radius:5%
  }
  
#seldate {
   margin-left:10%
}


ul {
font-size: 1em;;
list-style: none;
line-height: 1.5;
background:white;
border-radius:2%; 
color:#4c6e8c;
background-color:white;
max-width:100%;
margin-left:0%;
border:0px solid lightblue;
}

#imghelp {
   padding-left: 5%;
}

#transferList{
   
   height:80px;overflow-y:scroll;
   
}

#clientList {
   
   height:80px;overflow-y:scroll;
  
}

.clist{
   background-color: aliceblue;
 
}
.tlist{
   background-color: aliceblue;
 
}
.olist {
   background-color: aliceblue;
 
}



.clist.active,.tlist.active{
   background-color: #007BFF;
   color: white;
   }
     
  


.highlight {
       background-color: lightblue;
   }
 
/* unvisited link */
a:link {
color:#2d87b3;
text-decoration: none;

}




/* mouse over link */
a:hover {
color: white;
background-color: #5fb4e6;
text-decoration: none;
font-size:110%;

}


/* selected link */
a:active {
color: #FFBD33;
text-decoration: none;
font-size:110%
}
html{
font-family:sans-serif;
max-width:80%;
margin:auto;
color:#332f2fcf;
line-height: 1.7em;
font-size:0.90em;
background-image: URL('img/IDBackground.png') ;

}
input:placeholder-shown {
border: 5px solid lightblue;
font-style: italic; 
}


label{
display: inline-block;
text-align: left;
margin-left:5%;
}


input[type=text] {
   
   font-size:1em;
display: inline-block;
margin-left:5%;
height: 1.3em;
line-height: 2em; 
border-radius: 0px; ;
background-color:white;
border:1px solid lightblue;
color:#332f2fcf;
}  



input[type=url], input[type=email], input[type=tel] {
  
display: inline-block;
margin-left:5%;
height: 1.3em;
line-height: 2em; 
border-radius: 0px; ;
background-color:white;
border:1px solid lightblue;
color:#332f2fcf;

}


input[type=password], input[type=textarea] input[type=number] {
color:#332f2fcf;
display: inline-block;
margin-left:5%;
width: 20%;
height: 1.5em;
line-height: 2em; font-size: 0.90em;
border-radius: 0px; ;
background-color:white;
border:1px solid lightblue;
}


table {
max-width: 100% ;
margin-left:auto; 
margin-right:auto; 
border-collapse: collapse;
overflow: hidden;
color:#4c6e8c;

}


form{
border-radius: 0px;
margin-left:10%;
max-width: 100%;
margin-left:auto; 
margin-right:auto; 
background:white;
display:none;
filter:drop-shadow(1px 1px 2px #b5d6e8);
}


#displayKeys {
max-width: 60% ;
margin-left:auto; 
margin-right:auto; 
border-collapse: collapse;
overflow: hidden;
color:#4c6e8c;
text-align:center;

}
#displayVPN {
max-width: 60% ;
margin-left:auto; 
margin-right:auto; 
border-collapse: collapse;
overflow: hidden;
color:#4c6e8c;
text-align:center
}



.viewEmails {
background-color: white;
border:none
}

.buttonV,.buttonD {
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:Arial, Helvetica, sans-serif;
color: white; /* White text color */
padding: 10px ; /* Padding inside the button */
border: none; /* Remove default border */
border-radius: 10px; /* Rounded corners */
position: relative; /* For positioning the inner border */
font-size: 0.90em;; /* Font size */
font-weight: bold; /* Bold text */
cursor: pointer; /* Pointer cursor on hover */
outline: none; /* Remove default outline */
}


.buttonE,.buttonS,.buttonI{

border-radius: 10px; /* Rounded corners */

}

.buttonV::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, .buttonE:hover,.buttonS:hover,.buttonD:hover {
background-position-x: 100%;
transform: scale(1.05);
background: #004085;
}
.buttonV:focus,.buttonE:focus,.buttonS:focus,.buttonD:hover {
background-color: #004085 ;

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

#submit,#getVPNConfig,#MFASubmit,#addUser{
   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:Arial, Helvetica, sans-serif;
   color: white; /* White text color */
   padding: 1px 10px 1px; /* Padding inside the button */
   border: none; /* Remove default border */
   border-radius: 10px; /* Rounded corners */
   position: relative; /* For positioning the inner border */
   font-size: 0.90em;; /* Font size */
   font-weight: bold; /* Bold text */
   cursor: pointer; /* Pointer cursor on hover */
   outline: none; /* Remove default outline */
   line-height: 2em;
   }
   
   
   .buttonE,.buttonS,.buttonI{
   
   border-radius: 10px; /* Rounded corners */
   
   }
   
   #submit::before, #addUser::before,#getVPNConfig::before ,#MFASubmit::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 */
   }
   #submit:hover,#addUser:hover,#getVPNConfig:hover ,#MFASubmit:hover{
   background-position-x: 100%;
   transform: scale(1.05);
   background: #004085;
   }
  #submit:focus,#addUser:focus,#getVPNConfig:focus,#MFASubmit:focus {
   background-color: #004085 ;
   
   }
   #submit:active,#addUser:active,#getVPNConfig:active,#MFASubmit:active {
   background-color: #004085; /* Even darker blue on click */
   }
   .active {
      background-color: #004085;  
   }

   
   
   #logo{
      max-width: 80%;
      margin-left:auto; 
      margin-right:auto; 
      padding:0px;
      border:0px solid lightblue;
      background:white;
      border-radius: 0px;
      }
      
.question {
   font-size:120%;
color: white;
   background-color:navy;
   
}
.buttons-flex {
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }

    @media (max-width: 450px) {
 .buttonV,#getVPNConfig {
    
    font-size:90%;
 }
 #addRequest {
   display: none; 
   background-repeat: no-repeat;
    background-size: cover;
   background-image: URL('img/addReport.jpg') ;
   font-size:110%;
   max-height:100px;
   color:#FFBD33;

   padding:5px 5px 5px
   }
   


}

::placeholder {
color: #7a9ee6;
opacity: .7; /* Firefox */
}

::-ms-input-placeholder { /* Edge 12-18 */
color:#7a9ee6;
}



.center
{
text-align:center;
}

#signinMobile {
   display: none;   
}




#psw{
   max-width: 100px;
}
#MFACode{
   max-width: 150px;
}

#responseHelp{
display: none; 
}
#MFA {
display: none; 
}
#accountdetail {
display: none; 
}
#accountdetail2 {
display: none; 
}
#upAccount {
display: block;
line-height: 2em;margin-left:10%;
filter:none
}

#ID {
display: none;
background-color:white; color:rgb(45, 73, 153);line-height: 2em;height:800px;overflow-y:scroll;background-color: white; 
background-image: URL('img/IDBackground.png') ;

}

#helpHead {
display: none; 
background-image:linear-gradient(to bottom,#4d80cb,#75a2e5,#87AADE);
background-repeat: no-repeat;
    background-size: cover;

}
#helpHeadMobile {
display: none;
}
#mainmenumobile {
display: none;
text-align:left;font-size: 0.90em; 
}
#mainmenu {
   text-align:center;font-size: 0.90em;
}

#addperson {
display: none; 
}
#complete {
display: none; 
}

#addTags {
display: none; 
}


#addEmails {
display: none; 
background-image: URL('img/IDBackground.png') ;
background-color:white;width:100%;border-radius:2%;height:800px;overflow-y:scroll;
}
#addEmailsMobile {
    display: none; 
    }
#addEmailHeader {
   background-image:linear-gradient(to bottom,#4d80cb,#75a2e5,#87AADE);
   background-repeat: no-repeat;
    background-size: cover;
}

#addEmailHeaderTable {
   text-align:center;width:100%;color:#FFBD33;border-radius:2%;
}
.copyE {
   padding-left:2%; padding-right:2%
}


#uploadHeader {
   display:none;
   text-align:center;
   padding: 10px;
  background-image:url('img/addRequest.jpg');
  background-repeat: no-repeat;
  opacity: 95%;
  border-radius:1%;
  background-size: cover; /* or contain */
            background-position: center;
            opacity: 95%;
            border-radius: 1%;
            height: 20vh; /* Ensure the div has a height */
         

}
#uploadForm {
   display: none; 
   text-align:left;
   background-color:aliceblue;
   padding:20px;
   margin-bottom:20px;
   color:#4c6e8c

   }

#uploadFiles{
      float:right;
     margin-bottom:20px   

   }
#uploadFilesCancel{
      float:right;
  margin-bottom:20px;
  padding-right:20px;
  font-size:1vw;
  text-align:center
   }



#loader {
display: none; 
color:#008631;font-weight:500
}
#cont {
display: none;
background-image:linear-gradient(to bottom,#4d80cb,#75a2e5,#87AADE);
height:130px;overflow-y:scroll;background-color:white;border-radius:0%;


} 
#cont2 {
display: none; 
}


#cont5 {
display: none; 
text-align:left;background-color:white
} 

#cont6 {
display: none; 
background-image: URL('img/IDBackground.png') ;
height:180px;overflow-y:scroll;overflow-x:scroll;background-color:aliceblue;border-radius:2%;
} 

#removeAPI {
display: none; 
}

#verify {
display: none; 
} 

#tagDisplay {
display: none; 
}
#robust {
   margin-left:30%;
  
}


table.custom_class {

text-align: center;
width: 100%;
color: white;
   

       
}
table.custom_class th {
padding-top: 1px;
padding-bottom: 1px;
text-align: center;
font-size: 1em;;
color: #4c6e8c;


}
table.custom_class td {
box-sizing: border-box;
color:#4c6e8c;
font-size: 1em;;
}
table.custom_class tr {
margin-left:5px;
box-sizing: border-box; 
font-size: 1em;; 
padding-top: 0px;
padding-bottom: 0px;

}

tr.active{
background:white;
}

tr.hover{
background:lightgoldenrodyellow;
}

.col-1 {
       width: 25%;
   }
   .col-2 {
       width: 35%;
   }
   .col-3 {
       width: 13%;
   }
   .col-4 {
       width: 13%;
   }
   .col-3 {
       width: 13%;
   }

#dropdown {
   text-align:left
}


.dropbtn {

border-radius: 49%;

color:white;
min-width: 260px;
min-height:130px;
line-height: 1.5em;
font-size: 1.75em;
background:rgba(115, 172, 207, 0.61);
padding: 10px 10px 10px 10px;
text-decoration:#4c6e8c ;
background-image: url('img/Verviam Spiral Logo no text.png');
border-style:solid;
background-size: 300px 154px;
border-color:#4c6e8c;
text-align:right;

}

.dropdown {
position: relative;
display: inline-block;

}

.dropdown-content {
display: none;
border-radius: 10%;
margin-left: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: 90%;
line-height: 1.6em;
text-decoration: none;
display: block;
border-radius: 20px;

}
h1 {
text-align:center;
} 
#btnctr {
text-align: center;
margin-left:10%;
margin-right:10%;
}

.dropdown-content a:hover {background-color:rgb(45, 110, 153);margin-left:15%;}
.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: rgb(45, 110, 153);}

.symbol {
     font-family: Unicode;
     font-size:180%;
     font-weight: bold;
      color: #FFBD33;
 }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  grid-template-rows: auto auto;         /* two rows */
  gap: 10px 20px;                        /* spacing between cells */
  text-align: center;
  max-width: 900px;
  margin: 30px auto;
}

.feature-title {
  font-weight: bold;
  font-size: 1.1em;
}

.feature-desc {
  font-size: 0.95em;
  color: rgb(45, 110, 153);;
}
   
.vervstyle {

color:rgb(45, 110, 153);
text-align:left;
font-size: 0.90em;;
font-weight:400;


}
.vervstyle2 {

   text-align:left;
   font-size: 0.90em;;
   
   }

   #head_background {
background-image: url("img/spiral3.jpg");
background-repeat: no-repeat;
opacity: 95%;
border-radius:1%;
background-size: cover; /* or contain */
       background-position: center;
       opacity: 95%;
       border-radius: 1%;
       height: 51vh; /* Ensure the div has a height */
    

}



.add img {
   display: block;
   margin-left: auto;
   margin-right: auto
}

.add img:hover {
  background-color: rgba(blue, 0.5);  
}

.send_documents {
 margin: 10px 0;
       display: flex;
       align-items: center;
       border-style:solid;border-color:rgba(120, 198, 246, 0.61);border:3px 

}


   .send_documents label {
       margin-right: 10px; /* Space between label and button */
       
   }

   
   /* Basic styling for the select element */
select {
   
    background-color: #f0f8ff !important ; /* Light blue background */
    color: #4c6e8c!important; /* Dark blue text */
    padding: 3px;
    border: 1px solid #f0f8ff !important; /* Dark blue border */
    border-radius: 2px;
    font-size: 0.90em;;
    width: 250px; /* Adjust as necessary */
    font: inherit;
}

/* Arrow icon styling */
select:after {
     
    font-size: 0.90em;;
    color: #4c6e8c !important; /* Dark blue */
    padding-left: 10px;
}

/* Style the options in the dropdown */
select option {
    background-color: #f0f8ff !important; /* Light blue background */
    color: #4c6e8c !important; /* Dark blue text */
    padding: 10px;
}

/* Highlight the selected option with a darker blue */
select option:checked {
    background-color: #4c6e8c !important; /* Dark blue background */
    color: #ffffff !important; /* White text */
}

/* Customize the hover effect on options */
select option:hover {
    background-color: #87cefa !important; /* Slightly darker blue on hover */
    color: #4c6e8c !important; /* Dark blue text */
}

#accountID {

    max-width:200px;
    font-size:0.9em;
    
}
#signintoaccount,#freetrialaccount {
   color:#007BFF;
   font-weight: 400;
   margin-left:5%;
   margin-right:5%

}
#signintoaccount:hover,#green:hover,#yellow:hover,#freetrialaccount:hover{
   background-position-x: 100%;
   transform: scale(1.05);
   color: white;
   }
   #remindme {
      color:#007BFF;
      font-weight: 400;
      margin-left:5%;
   
   }
   #remindme:hover{
      background-position-x: 100%;
      transform: scale(1.05);
      color: white;
      }

#showAccount {
   display:none;
}

.mmenu {

    font-size:105%;text-align:left;font-weight:bold
 } 

 .emailheader {
    text-align:center;color:#FFBD33;border-radius:2%;
 }

 #sendDocuments {
   overflow-y:scroll;
   display:none;
    background-color:aliceblue ;
   
 }

 .senddocs {
   background-repeat: no-repeat;
    background-size: cover;
    text-align:center;width:100%;border-radius:2%;;padding-left:2%; padding-right:2%" 
 }
 .simple {
   font-size:1.8vw;text-align:center;color:white;padding-left:10% 
 }
 #VervHeaderMobile {
   display:none;
 }
 #whychoose {
   padding-left:20px !important;
   color:white
 }
 .simpleMobile {
   font-size:120%;text-align:center;color:white;text-align:center;
}
 .simple1 {
 
   font-size:1.5vw;;color:#FFBD33
 }
 .forinternetusers {
   color: #FFBD33;font-size:1.6vw
 }

 .alert {
    color:#eea303 !important;text-align:center !important;font-weight:500 !important;padding-left:5% !important;padding-right:5% !important;
 }
 #blurbvideo {
   padding:0%;
   color:white;
   font-size:90%;
   font-style:italic
   
 }
 .hover-tooltip {
  position: relative;
  display: inline-block;
}

.hover-tooltip .tooltip-text {
  visibility: hidden;
  width: 240px;
  
  color: blue;
  text-align: center;
  border-radius: 4px;
  padding: 6px;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* above the image */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 13px;
}

.hover-tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

 #footer{
   text-align:center
 }
 #comic1 {
   color:#FFBD33;
  font-size:120%;font-weight:400;
  
    
 }
 .comic2 {
    
    padding-left:2%
 }
 .comic3 {
   background-repeat: no-repeat;
    background-size: cover;
   
background-image:linear-gradient(to bottom,#4d80cb,#75a2e5,#87AADE);
   color:white
 }
 .font110 {
    font-size:110%;
 }
 #green {
    color:#007BFF;
 }
 #yellow {
    color: #DAA520
 }
 #configHeadTable2 {
   
   text-align: center;
   
 }


 #helpHeadTable {
   color:white;
 }


 #helpHeadMobileTable {
   background-color:white
 }

 
 #configHeadTable, #helpHeadTable, #helpHeadMobileTable,#configHeadTable2 td {
   padding:2%
 }

 #vsafeimage,#vsafeimage0 {
   padding:10%;text-align:center;

 }
 #vsafeimage2,#vsafeimage3{
   padding-left:2%; padding-right:2%
 }
 #vervsafe4 {
   padding-left:5%
 }

 #yellowtick {
   padding-left: 2%;padding-right: 2%;
   color: #4c6e8c;

 }
 #yellowticklist {
   display:none;
   padding-left: 2%;padding-right: 2%;
   text-align:left;
   color: #4c6e8c;
   

 }
 #yellowtickdiv {
   font-size: 0.90em;;color:#4c6e8c;text-align:left;line-height: 2em;margin-left:5%;margin-right:5%
 }
 #create {
   font-size:110%;;text-align:left;font-weight:bold;
   margin-left:5%;
 }
 .centerit {
   text-align:left;
   
 }
  #idform {
    display: none;
    padding:20px;
    color:#4c6e8c;
    background-color:aliceblue
  
    
  }

 
 .form-row {
  display: flex;
  flex-wrap: wrap; /* allows wrapping if space is tight */
  align-items: center;
  margin-bottom: 12px;
  
}

.form-row label {
  width: 200px; /* adjust to taste */
  margin-right: 10px;
  text-align: right;
  font-size: 1rem;
  line-height: 1.5;
}

.form-row input {
  flex: 1;
  min-width: 0;             /* required for proper flex sizing */
  max-width: 500px;         /* allow expansion up to a sane limit */
  padding: 10px 12px;       /* improved clickability */
  font-size: 1rem;
  height: 40px;             /* fixes small inputs */
  box-sizing: border-box;
  border: 1px solid #4c6e8c;
  border-radius: 4px;
  margin-left: 10px;
}

.form-row input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: white;
}


#EUID {
   width:250px;background-color:white;
}
#EUIDesc {
   width: 300px;background-color:white
}
.transfer {
   font-size:110%;text-align:left;font-weight:bold;
   margin-left:5%;
}
#tags {
   margin-left:5%
}
#tagItem {
   width: 150px;background-color:white ;
}
#tagValue {
    width: 200px;background-color:white ;
}
#docupimg {
   margin-left:5%
}
#tagList {
   margin-left:10%;width:50%;
}
#tagDisplay {
   width:500px
}
#personaldata {
   font-size:110%;color:#4c6e8c;text-align:left;font-weight:bold;
   margin-left:5%;
   margin-right: 15%
}


#person {
   margin-left:5%
}
#addperson {
   text-align:left;padding-left:10%;
   
}
#selectperson {
   font-size: 0.90em;;color:#4c6e8c;text-align:left;margin-left:5%;
}
#emailHeaderBackground {
   background-repeat: no-repeat;
    background-size: cover;
   background-image: URL('img/addReport.jpg') ;
   max-height:100px;
color:#FFBD33;
padding:5px 5px 5px
}
#vsafeimage {
   padding-left:2%; padding-right:2%;
   text-align:left
}
#emsimple,#sendsimple, #emHeadersimple {
   padding-left:2%; padding-right:2%;
   font-family:  'Inter';font-size:1.6vw;;color:#FFBD33
}
#yellowtick2 {
   display:none;
   color: #4c6e8c;margin-left:5%;
  
}

#yellowtick2 td {
   padding-left: 2%;padding-right: 2%
}
#yellowtick3 {
   
   color: #4c6e8c;margin-left:5%;
   
}
#yellowtick3 td {
   padding-left: 2%;padding-right: 2%" 
}
#report,#report2,#emailItem { 
   width: 200px;background-color:white;  
}

#reportdesc,#reportdesc2,#emailValue {
  
   width: 250px;background-color:white ;
   
}
#request {

   width: 200px;background-color:white ;
}


#span6,#span7,#span8,#span9,#span10 {
   margin-left:3%
}
.full-width-input {
    width: 100%;
    box-sizing: border-box; /* This ensures padding and borders don't affect the width */
    margin:0;
}

 #loader {
   display: none;
 }
 #completed {
   display: none;
   text-align:center;color:#4c6e8c;font-weight: 500;font-size:110%
 }

 #provide {
   text-align:center;color:navy;font-size:120%
 }
 input::file-selector-button {
 background-image: linear-gradient(
   to right,
   #5a6cab,
   #5a6cab,
   #DAA520 100%,
   #DAA520 200%
 );
 background-position-x: 0%;
 background-size: 200%;
 border: 0;
 border-radius: 8px;
 color: #fff;
 padding: 0.5rem 0.75rem;
 text-shadow: 0 1px 1px #333;
 transition: all 0.25s;
}
input::file-selector-button:hover {
 background-position-x: 100%;
 transform: scale(1.1);
}

 input[type=file] {
 display: block;
 color: #DAA520;
 font-style: oblique;
}

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