/* #################################################################################### */

.blank{
    height:65px;
    background-color: var(--white-color);
}
   .button-7 { 
    background-color: #0095ff; border: 1px solid transparent; border-radius: 3px; box-shadow: rgba(255, 255, 255, .4) 0 1px 0 0 inset; box-sizing: border-box; color: #fff; cursor: pointer; display: inline-block; font-family: -apple-system,system-ui,"Segoe UI","Liberation Sans",sans-serif; font-size: 13px; font-weight: 400; line-height: 1.15385; margin: 0; outline: none; padding: 8px .8em; position: relative; text-align: center; text-decoration: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; vertical-align: baseline; white-space: nowrap; } .button-7:hover, .button-7:focus { background-color: #07c;
     } 
     .button-7:focus { 
        box-shadow: 0 0 0 4px rgba(0, 149, 255, .15); 
    } 
    .button-7:active { background-color: #0064bd; box-shadow: none; }

.hide{
    display: none !important;
    visibility: hide !important;
}


/* ******************************** Body ************************* */
/* Sticky Navbar Removed for Whole Page */
.sticky{
    position: relative;
}

/* ******************************** Form ************************* */

.container-register{
    width: 100%;
    background-image: url('../images/donate/donate.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    padding: 20px;
}

.container-register-inner{
    width: 50%;
    margin: 0 auto;
    padding:20px;
    

    display: flex;
    justify-content: space-around;
    /* gap: 30px; */
    flex-wrap: wrap;
}

.container-register-form{
    width: 100%;
    min-width: 380px;
    background-color: #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin: 5px;
    border-radius: 10px;
    /* margin-bottom: 0px; */

}


form{
    display: flex;
    flex-direction: column;
    padding: 2vw 4vw;
    width: 90%;
    max-width: 600px;
    margin: 20px;
}


form input, .toggle-button{
    border: 0;
    margin: 10px 0px 15px 0px;
    padding: 14px;
    outline: none;
    background: #f5f5f5;
    font-size: 16px;
    border-radius: 3px;
    resize: vertical;
}

.toggle-button{
    background: var(--primary-color);
    font-family: var(--body-font-family);
    color: #ffffff;
    border-radius: 4px;
    border: 0;
    padding: 12px 16px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
}

.toggle-button:hover{
    background: var(--secondary-color);
}

.form-p{
    margin-bottom: 20px;
    text-align: center;
    font-family: var(--body-font-family);
    font-weight: var(--font-weight-bold);
    font-size: var(--h3-font-size);
    line-height: 25px;
    /* color: #5A6F80; */
    color: var(--primary-color);
}

form p{
    font-family: var(--body-font-family);
    font-weight: var(--font-weight-semibold);
    font-size: 16px;
    line-height: 10px;
    /* color: #5A6F80; */
    color: var(--p-color);
}

#membership{
    margin-top: 8px;
}





  /* Buttons and links */
#submit {
    background: #5469d4;
    font-family: var(--body-font-family);
    color: #ffffff;
    border-radius: 4px;
    border: 0;
    padding: 12px 16px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    display: block;
    transition: all 0.2s ease;
    box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
}

#submit:hover {
    filter: contrast(135%);
}

.button-div{
    display: flex;
    /* align-self: start; */
    /* align-content: flex-start; */

    width: 100%;
    min-width: 380px;
    margin: 3px;
    
}

#btn1, #btn2{
    background: var(--primary-color);
    font-family: var(--body-font-family);
    color: #ffffff;
    border-radius: 7px;
    border: 0;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: block;
    transition: all 0.2s ease;
    box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
    margin-right: 15px;
}

#btn1{
    padding-right: 35px;
    margin-left: 5px;
    background: var(--secondary-color);
}

#error-msg1, #error-msg2{
    font-style: italic;
    color: var(--secondary-color);
}