:root {
    --background-color: #fff;
    --highlight-color: #1995c9;
    --cancel-color: #fcc;
    
    --primary-font-face: "Lato";
    --accent-font-face: "Montserrat";
}
#abby_outer_wrapper {
    background-color: var(--background-color);
    font-family: var(--primary-font-face), sans-serif;
    letter-spacing: 0 !important;
    margin: 0;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    max-width: 700px;
    
    & div,
        a,
        button,
        input,
        select,
        textarea,
        button,
        input[type='button'],
        input[type='reset'],
        input[type='submit'],
        h2,
        h3
        {
            letter-spacing: 0 !important;
            line-height: 1.2;
        }
        
    & h3 {
        font-size: 1.1rem;
        font-weight: bold;
    }
 }

.inner-wrapper {
    margin: 0 auto 50px;
    padding: 20px;
}

.header-bar {
    background-color: var(--highlight-color);
    font-family: var(--highlight-font-face), sans-serif;
    
    & img {
        display: inline;
        height: 2.5rem;
        margin-inline-start: 2px;
        width: 2.5rem;
    }
    
    & h2 {
        color: #fff;
        display: inline;
        font-family: var(--accent-font-face), sans-serif;
        font-size: 1.2rem;
        font-weight: 200;
        letter-spacing: 0 !important;
        line-height: 2.7rem !important;
        text-transform: uppercase;
        vertical-align: top;
    }
}

#sign_out_wrapper {
    color: #888;
    font-size: 80%;
    text-align: center;
}

#logged_in_user_email {
    color: #888;
    font-size: 80%;
    margin-top: 1.25rem;
    text-align: center;
}

#abby_outer_wrapper :is(#login_email_form, #login_password_form, .login-form, .campaign-form, .address-form) {
    padding: 1rem !important;
    & :is(h2, h3) {
        text-align: center;
    }
    
    & :is(input[type="email"], input[type="password"], input[type="submit"]) {
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        display: inline-block;
        font-size: 1rem;
        margin: 8px 0;
        padding: 10px;
        width: 100%;
    }
    
    & input[type="submit"] {
        background-color: var(--highlight-color);
        color: white;
        border: none;
        cursor: pointer;
    }
    
    & button:hover,
    input[type="submit"]:hover {
        opacity: .8;
    }

    & button.disabled-button:hover {
        opacity: 0.37;
    }
}

.cookie-notice {
    color: #999;
    font-size: 0.6rem;
}

#login_spinner {
    height: 36px;
    padding-inline-start: 103px;
}

.campaigns-list {
    align-content: start;
    align-items:baseline;
    display: grid;
    grid-template-columns: 4ch 1fr;
    height: 374px;
    overflow: scroll;
    row-gap: .5rem;
  
    & input {
        grid-column-start: 1;
    }
    
    & label {
        font-size: 1.125rem;
        grid-column-start: 2;
    }
    
    & input[type="radio"]:checked+label{ font-weight: bold; }
    
    & legend {
        font-size: .75rem;
    }
}

.address-form {
    & button {
        background-color: var(--highlight-color);
        border: none;
        border-radius: 4px;
        box-sizing: border-box;
        color: #fff;
        cursor: pointer;
        display: inline-block;
        font-size: 1rem;
        margin: 8px 0;
        padding: 10px;
    }
        
    & .cancel-button {
        background-color: var(--cancel-color);
        color: black;
    }
        
    & .disabled-button {
        cursor: not-allowed;
        opacity: 0.37;
    }
 }
 
 #addressList,
 #instructions_area {
     background-image: none;
     font-size: 1.125rem;
     resize: none;
     height: 400px;
     width: 100%;
 }
 
 .campaigns-list.show-spinner,
 #instructions_area.show-spinner,
 #addressList.show-spinner,
 #volunteer_record.show-spinner {
     background-image: url("spinner.gif");
     background-position: center;
     background-repeat: no-repeat;
 }
 
 #thanks_page {
     padding: 0 1rem 1rem;
     
     & h3 {
         text-align: center;
     }
 }

 #volunteer_record {
     border: 1px solid #aaa;
     font-size: 75%;
     height: 400px;
     overflow-x: scroll;
 }
 
.hidden {
    display: none;
}

.muted {
    color: #888;
    font-size: 0.8rem;
}

.nomb {
    margin-bottom: 0;
}

.fs75 {
    font-size: 75%;
}

.ralign {
    text-align: right;
}

.warn {
    color: red;
}

#numAddresses {
    font-size: 1.25rem;
    width: 4.5rem;
}

.address-tabs-container{
    display:flex;
    flex-direction:column;
    width:100%;
}

.address-tabs-header {
    display:flex;
    flex-wrap:wrap;
    font: var(--primary-font-face);
    padding:.0;
    width: 100%;
}

.address-tabs-header > li {
    border: 1px solid #333;
    border-radius: 10px 10px 0 0;
    cursor:pointer;
    flex-grow:1;
    list-style-type: none;
    padding: .25rem 0;
    text-align: center;
    width: 128px;
}

.address-tabs {
    display:flex;
    margin: 0;
    padding: 0;
}

.address-tab {
    background-color: #fff;
    color:#333;
    font-weight: 400;
    width: 100%;
}  
.address-tab-active {
    padding: 1rem;
    background-color: #333;
    color:#fff;
    font-weight: 700;
}

#printable_content {
    position: absolute;
}

/* responsive menu styles */
.menu-overlay {
    visibility: hidden;
}

.toggle-menu-wrapper {
    display: none;
}

.site-primary-menu {
    visibility: visible;
}

.site-primary-menu-responsive {
    display: none;
}

@media screen and (max-width: 767px) {			
    .menu-overlay {
    	background: #141414;
    	opacity: .5;
    	position: fixed;
    	top: 0;
    	left: 0;
    	visibility: hidden;
    	width: 100%;
    	height: 100%;
    	z-index: 99980;
    }
    
    .menu-overlay.displayed {
    	display: block;
    	visibility: visible
    }
    
    .toggle-menu-wrapper {
    	display: block;
    }
    
    .toggle-menu-wrapper.hidden {
    	visibility: hidden;
    }
    
    .site-primary-menu {
    	visibility: hidden;
    }
    
    .site-primary-menu-responsive {
    	display: none;
    }
    
    .site-primary-menu-responsive.displayed {
    	background-color: #111;
    	color: #fff;
    	display: block;
    	position: fixed;
    	top: 0;
    	left: 0;
    	visibility: visible;
    	width: 65%;
    	height: 100%;
    	z-index: 99990;
    	transition: opacity 250ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    
    .site-primary-menu-responsive ul {
    	list-style-type: none;
    }
    
    .site-primary-menu-responsive a {
    	color: #fff;
    	text-decoration: none;
    	text-transform: uppercase;
    }
    
    .menu-overlay.displayed {
        cursor: pointer;
    	visibility: visible
    }
    
    .toggle-menu-wrapper {
    	display: block;
    }
    
    .site-primary-menu {
    	visibility: hidden;
    }
}