#form_wrapper{
width:92%;
max-width:45em;
background-color:#fdfafa;
border: .065em solid gray;
border-radius:2em;
box-shadow: 0.125em 0.125em 0.625em 0em rgba(0, 0, 0, 0.4); /* Subtle drop shadow */
margin:1em auto 2em auto; 
padding:0.75em 0.45em; 
}

#form_wrapper h1{
    font-size:0.95em;
}

.mid_pg04{
max-width: 40.5em;
margin:0 auto;
padding:0;
}
.mid_pg04 h1{
    color:rgb(71, 51, 51);
    margin:0 0 0 0.25em;
    padding:0;
    }
.mid_pg04 h2{
font-style:italic;    
color:black;
margin:0.5em 0 0.5em 0.5em;
padding:0;
}
    .mid_pg04 p{
    color:rgb(37, 23, 23);
    line-height: 1.5em;
    text-indent:0.25em;
    margin:0.45em 0 0 0.5em;
    padding:0;
    }

 .mid_pg05{
    max-width:12em;
    background-color: #cedfe9;
    border: .065em solid rgb(180, 177, 184);
    box-shadow: 0.125em 0.125em 0.625em 0em rgba(0, 0, 0, 0.4);
border-radius:0.75em;
margin:1em 0 1em 10%;
padding:1em;
 }   
    
.form-fields{
font-size:1.1em;
margin:0 0 1em 1em ;
padding: 0;
}
.prompt-text{ cursor: pointer;
color: #a38282;
font-size: 0.75em;
margin:0 0 1em 2em;
padding:0 0 5em 0;
}

#message{
min-width: 18em;
min-height: 5em;  
font-size:1em;
background-color:#ebedf0;
color: #000;
border: 2px solid #afb2b6;
border-radius: 0.25em;
box-shadow: 0.125em 0.125em 0.625em 0em rgba(0, 0, 0, 0.4);
margin: 0 auto;
padding: 0.25em;
}

.input{
padding: 0.25em;color: #771c06;
font-size:1em;
background-color: #ebedf0;
color: #000;
border: 2px solid #afb2b6;
border-radius: 0.25em;
box-shadow: 0.125em 0.125em 0.625em 0em rgba(0, 0, 0, 0.4);
}

.sent-info{
font-weight:bold;
font-style:italic;
border-bottom:0.12em dotted gray;
margin:0.75em 0.75em;
padding:0.5em;
}

#cybergate {
    max-width: 26em;
    background: 
        url('../imgs/icons/solve_prompt.svg') no-repeat center right 1em,
        linear-gradient(to bottom, rgba(131, 166, 186, 1), rgba(150, 193, 218, 1));
    background-size: auto 2.5em, cover;
    border: 2px solid #afb2b6;
    border-radius: 0.5em;
    box-shadow: 0.125em 0.125em 0.625em 0em rgba(0, 0, 0, 0.4);
    margin: 0 0 0 0.25em;
    padding: 0.55em 0 0.5em 0.25em;
}


#cybergate-error {
max-width:27em;
color: #771c06;
font-weight:bold;
letter-spacing:0.005em;
background: #E0B77E !important;
border: 2px solid #afb2b6;
border-radius: 0.5em;
margin:0 0 0.5em 0.5em;
padding: 0.75em 0 0.75em 0;
}

.cybergate-option{
    width:6em;    
    color: #7c2d14;
    font-size:1.5em;
    border:0.09em solid #679cbb;
    background: #87adda url('../imgs/icons/3bars_icon.svg') no-repeat center left;
    background-size: 25%;
    transition: all 0.2s ease-in-out;
    border-radius: 0.45em;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

    margin:0.75em 0.5em 0.95em 0.5em;
    padding:0.25em 0.065em 0.25em 1.75em;
    }
    .cybergate-option:hover {
        color: red;
        background: #99b4c5 url('../imgs/icons/3bars_icon.svg') no-repeat center left;
        background-size: 25%;
        border: 0.09em solid #152f3f;
        opacity: 0.7;
        transition: all 0.2s ease-in-out;
    }
    
    .cybergate-option.selected {
        background-color: #c5deec;
        color: #0f5c05;
        border-color: #6f6f86;
        opacity: 1 !important;
        box-shadow: inset 0 0 0.5em rgba(71, 81, 114, 0.2);
        transform: scale(0.97);
    }
    

#cybergate-close {
    display: inline-block;
    width: 1.5em; /* Adjust size as needed */
    height: 1.5em;
    background: url('../imgs/icons/3bars_icon.svg') no-repeat center left;
    background-size: contain;
    vertical-align: center;
    cursor: pointer;
    opacity: 0.8;
}


.show-error {
display: block; /* Shows the error box */
}

.hidden-error {
display: none; /* Hides the error box */  
}


.hidden-error {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.show-error {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}


.cybergate-icons {
width: 5em;
height: auto;
vertical-align: center;
margin-left: 5px;
}

/*  our non human visible bot trap field */ 
.honeypot {
    display: none; /* Fully hidden */
}

.hidden-label {
    position: absolute;
    left: -9999px; /* Screen reader friendly but invisible */
}

.hidden-input {
    position: absolute;
    left: -9999px; /* Ensures bots can see it, but not users */
}

  #contact_submit{
    display: flex;
    width: 8em;
    color: #122cbe;
    font-size:1em;
    font-weight: bold;
    background: #D9AC84 url('../imgs/icons/email.svg') no-repeat center right 0.75em;
    background-size: 2.25em; /* Adjust if needed */
    border: 0.15em solid rgba(103, 133, 168, 0.7);
    border-radius: 0.5em;
    text-align: left;
    cursor: pointer;
    margin: 0 auto;
    padding: 0.75em 0 0.75em 0.5em;
    text-decoration: none;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.6), inset 1px 1px 4px rgba(255, 255, 255, 0.3);
    transition: all 0.2s ease-in-out;
    }
    
    #contact_submit:hover{
    color: #0f5c05;
    background: #e0b77e url('../imgs/icons/email.svg') no-repeat center right 0.75em;
    border-color: rgba(103, 133, 168, 0.9);
    box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.7), inset 2px 2px 6px rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
    }