/* kiosk style */
@font-face {
    font-family: custom_helvetica;
    src: url('/components/css/fonts/helveticaltstdcond.otf');
}

@font-face {
    font-family: custom_helvetica;
    src: url('/components/css/fonts/Helvetica-Condensed-Bold.otf');
    font-weight: bold;
}

@-webkit-keyframes moveDown {
    from { top:-300px; opacity:1 } 
    to { top:76px; opacity:1 }
}

body {
    font-family: custom_helvetica;
    /* min-width: 320px; */
    font-size: 1rem;
    height: 100vh;
}

h1{
    line-height: 1.25;
}

.mediaViewInfo {
    --web-view-name: New Volunteer-3;
    --web-view-id: New_Volunteer-3;
    --web-scale-on-resize: true;
    --web-enable-deep-linking: true;
}

:root {
    --web-view-ids: New_Volunteer-3;
}

* {
    margin: 0;
    padding: 0;

    /* box-sizing: border-box; */
    /* border: none; */
}

#New_Volunteer-3 {
    width: 100%;
    /*min-height: 92.5vh;*/
    min-height: 100%;
    background-color: rgba(255,255,255,1);
    /* overflow: hidden; */
    --web-view-name: New Volunteer-3;
    --web-view-id: New_Volunteer-3;
    --web-scale-on-resize: true;
    --web-enable-deep-linking: true;
}

#height_container {
    min-height: 92.5vh;
}

@keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#Rectangle_55 {
    fill: rgba(86,108,17,1);
}

.Rectangle_55 {
    position: absolute;
    overflow: visible;
    width: 504px;
    height: 78px;
    left: 262px;
    top: 68px;
}

#Choose_Shift {
    left: 319px;
    top: 73px;
    position: absolute;
    overflow: visible;
    width: 387px;
    height: 48px;
    text-align: center;
    font-family: custom_helvetica;
    font-style: normal;
    font-weight: bold;
    font-size: 30px;
    color: rgba(255,255,255,1);
}

/*
td, th{
    padding: 10px;
    width: 12%;
    text-align: center;
    border: 1px solid black;
}
*/

#Welcome_Volunteer {
    overflow: visible;
    width: 100%;
    height: 57px;
    text-align: center;
    font-family: custom_helvetica;
    font-style: normal;
    font-weight: bold;
    font-size: 60px;
    color: rgba(120,120,120,1);
    margin: 0 auto;
}

#instructions {
    top: 438px;
    overflow: visible;
    width: 75%;
    height: 91px;
    line-height: 18px;
    text-align: center;
    font-family: custom_helvetica;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    color: rgba(100,100,100,1);
    margin: 0 auto;
    padding-top: 15px;
}

#logo {
    overflow: visible;
    max-width: 205px;
    width:100%;
    /* padding-top: 42px; */
}

#logo_div {
    background-color: #1a1a1a;
    /* height: 140px; */
}

#volunteer_portal {
    color: white;
}

#header_content {
    margin:0px auto;
    padding: 1rem;
    max-width: 80.5rem;
    padding: 0px 1rem;
    /* height:100% */
    /*padding-top: 42px;*/
}

#header_top_right_table {
    font-family: custom_helvetica;
    color: #ffffff;
    font-size: 14px;
    padding-top: 15px;
}

#header_top_right_table2 {
    font-family: custom_helvetica;
    color: #ffffff;
    font-size: 20px;
    padding-top: 42px;
    padding-left: 42px;
}

#header_top_right_table td{
    padding-right: 22px;
}

#mobile_header_table {
    display: none;
    font-family: custom_helvetica;
    font-weight: bold;
    color: #ffffff;
    font-size: 18px;
    text-align: center;
    padding-top: 13px;
    padding-right: 12px;
    position: sticky;
}

#menu_box1 {
    font-size: 14px;
    font-family: custom_helvetica;
    background-color: #404040;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-right: 7px;
    padding-left: 7px;
    cursor: pointer;
}

#menu_box2 {
    font-size: 31px;
    font-family: custom_helvetica;
    background-color: #404040;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-right: 7px;
    padding-left: 7px;
    cursor: pointer;
    display: none;
}

#menu_table {
    display: none;
    border-collapse: collapse;
    text-align: left;
    width: 70%;
    color: #ffffff;
    position: absolute;
    z-index: 1;
    animation: moveDown 1s;
    margin-left: 29%;
}

.menu_table_top_section {
    background-color: #000000;
    font-family: custom_helvetica;
    font-weight: bold;
    font-size: 18px;
    padding: 14px;
    border-bottom: 1px solid #1a1a1a;
}

#menu_table_search {
    background-color: var(--client-primary-color);
}

#menu_table_search_button {
    width: 90%;
    height: 44px;
}

#menu_table_bottom {
    border-collapse: collapse;
    width: 100%;
}

.menu_table_bottom_section {
    background-color: #404040;
    font-size: 14px;
    font-family: custom_helvetica;
    padding: 10px;
}

#header_bottom_right_table {
    font-family: custom_helvetica;
    font-weight: bold;
    color: #ffffff;
    font-size: 18px;
    padding-top: 30px;
}

#header_bottom_right_table td{
    padding-right: 45px;
}

#header_link1:hover {
    border-bottom: 1px solid #ffffff;
}

#header_link2:hover {
    border-bottom: 2px solid var(--client-primary-color);
}

a.whiteText {
    text-decoration: none;
    color: #ffffff;
}

.donate_now_button {
    cursor: pointer;
    width: 160px;
    color: white;
    background-color: var(--client-primary-color);
    border: none;
    font: normal 18px custom_helvetica;
    font-weight: bold;
    padding: 10px;
    border-radius: 3px;
}

.donate_now_button:hover {
    background-color: #808080;
}

/*.register_button2:focus {
    color: #000000;
    background-color: #ffffff;
    border: 2px solid var(--client-primary-color);
}*/

#process_steps_wrapper{
    display:flex;
    justify-content: center;
    margin-top:-1rem;
}

#process_steps {
    box-sizing: border-box;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #f5f5f5;
    width:100vw;
    flex-shrink: 0;
    padding:1.5rem;
}


#dynamic_card {
    background-color: #ffffff;
    overflow: hidden;
    border-top: solid 1px rgba(255,255,255,.5);
    transition: all .5s ease;
    color: #000;
    padding-bottom: 25px;
    font-size: 25px;
    width: 90%;
    margin: 0 auto;
}

.info_buttons {
    cursor: pointer;
    width: 222px;
    color: white;
    background-color: var(--client-primary-color);
    border: none;
    font: normal bold 19px / 23px custom_helvetica;
    padding: 10px;
    border-radius: 25px;
}

.info_buttons:hover {
    background-color: #808080;
}

#contact_table {
    width: 100%;
    border: 1px solid black;
    border-radius: 30px;
    border-spacing: 0;
    padding: 30px;
}

#contact_table th {
    border-bottom: 1px solid black;
}

#contact_table td {
    padding-top: 10px;
}

#waiver {
    text-align: left;
    padding: 30px;
    border: 1px solid black;
    border-radius: 30px;
}

#search_name_form {
    border-radius: 22px;
    font-size: 25px;
}

#walk_in_message_div {
    width: 100%;
    margin: 0 auto;
    padding: 30px;
    font-size: 25px;
}

#walk_in_message {
    border-top: 1px solid white;
}

#past_vol_ask {
    margin: 0 auto;
}

#past_volunteer {
    display: none;
    width: 75%;
    margin: 0 auto;
}

#past_volunteer td {
    width: 50%;
}

#choose_verification_method_div {
    border-bottom: 1px solid white;
    padding-top: 10px;
    padding-bottom: 10px;
}

#choose_verification_method {
    width: 50%;
    margin: 0 auto;
}

#choose_verification_method td{
    width: 11%;
}

#view_shifts {
    padding-top: 15px;
}

.form_input_text_boxes {
    border-right: none;
    border-left: none;
    border-top: none;
    background-color: #ffff;
    color: #000;
    border-bottom: 1px solid #000;
    font-size: 20px;
    width: 325px;
}

.form_input_email_boxes {
    border: 1px solid black;
    font-size: 20px;
    border-radius: 10px;
    padding-left: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    width: 100%;
}

.form_input_text_boxes::placeholder {
    color: #a1a1a1;
}

#past_volunteer_div {
    padding-top: 10px;
    padding-bottom: 10px;
}

#new_volunteer_div {
    padding-top: 10px;
    padding-bottom: 10px;
    display: none;
}

#pick_contact {
    border: 1px solid black;
    border-radius: 30px;
    padding: 30px;
}

#enter_code_div {
    width: 100%;
    margin: 0 auto;
    border: 1px solid black;
    border-radius: 30px;
    padding: 30px;
}

#user_signature {
    padding-top: 10px;
    padding-bottom: 10px;
}

#not_me_div {
    padding-top: 10px;
    border-top: 1px solid white;
}

#display_location {
    background-color: #1a1a1a;
    color: white;
    text-align: center;
    padding: 30px;
}

#display_todays_shifts {
    border: 1px solid black;
    border-radius: 30px;
    border-spacing: 0;
    margin: 0 auto;
    width: 98%;
}

#display_todays_shifts td {
    padding: 30px
}

#header_row {
    border-bottom: 1px solid black;
}

#volunteer_info {
    border: 1px solid black;
    border-radius: 30px;
    padding: 30px;
}

#already_signed_up_version {
    text-align: center;
    color: red;
}

#shift_table {
    border: 1px solid black;
    border-radius: 30px;
    padding: 30px;
    margin: 0 auto;
    width: 75%;
    border-spacing: 0;
}

#checkout_table {
    text-align: center;
    margin: 0 auto;
}

#checkout_table td {
    padding-right: 20px;
}

.check_in_out_form input[type="submit"] {
    width: 100%;
    border-radius: 12px;
    height: 100px;
    font-size: 30px;
}

#select_locations {
    font-size: 20px;
    border-bottom: 2px solid black;
    width: 100%;
}

#confirm_user_table {
    border-collapse: collapse;
}

#confirm_user_table th {
    text-align: left;
}

#confirm_user_table td {
    padding: 10px;
}

@media screen and (max-width: 1150px) {

}

.action_radio {
    transform: scale(1.5);
    width: 25px;
}

.action_table_details {
    padding-top: 10px;
    padding-bottom: 10px;
}

#help_message {
    color: red !important;
    display: none;
}

#user_email {
    width: 275px;
}

.picture_button {
    text-align: center;
}

#video {
    width: 640px;
    height: 480px;
}

#snap {
    cursor: pointer;
    width: 222px;
    color: white;
    background-color: #0062ff;
    border: none;
    font: normal bold 19px / 23px custom_helvetica;
    padding: 10px;
    border-radius: 25px;
}

#num_additional_volunteers {
    display: none;
    border-bottom: 1px solid black;
    margin: 0 auto;
    width: 100%;
    padding-top: 10px;
}

#additional_volunteers_table {
    margin: 0 auto;
    width: 50%;
    text-align: center;
}

#assign_group_table {
    margin: 0 auto;
    width: 50%;
    text-align: center;
}

#select_group {
    /* display: none; */
    border: 1px solid black;
    margin: 0 auto;
    width: 100%;
    /* padding-top: 10px; */
}

#mandated_hours_table {
    margin: 0 auto;
    width: 50%;
    text-align: center;
}

#select_mandated_service {
    display: none;
    width: 50%;
    margin: 0 auto;
    border-bottom: 1px solid black;
    padding-top: 10px;
}

/* Center the loader */
#loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 120px;
    height: 120px;
    margin: -76px 0 0 -76px;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px double var(--client-tertiary-color);
    border-right: 16px double var(--client-primary-color);
    border-left: 16px double var(--client-secondary-color);
    border-bottom: 16px double var(--client-quaternary-color);
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
    position: relative;
    -webkit-animation-name: animatebottom;
    -webkit-animation-duration: 1s;
    animation-name: animatebottom;
    animation-duration: 1s
}

@-webkit-keyframes animatebottom {
    from { bottom:-100px; opacity:0 } 
    to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
    from{ bottom:-100px; opacity:0 } 
    to{ bottom:0; opacity:1 }
}

#myDiv {
    display: none;
    text-align: center;
}

#first_name_input {
    border-bottom: 1px solid black;
}

#last_name_input {
    border-bottom: 1px solid black;
}

#extra_question {
    display: none;
}

#add_contacts_to_household {
    display: none;
    height: 300px;
}

#continue_button {
    cursor: pointer;
    width: 185px;
    color: white;
    background-color: var(--client-primary-color);
    border: none;
    font: normal bold 19px / 23px custom_helvetica;
    padding: 10px;
    border-radius: 25px;
}

#reserve_spots {
    display: none;
}

#reserve_spots_div {
    display: none;
}

#phone_form {
    display: none;
}

#email_form {
    display: none;
}

#parent_info {
    display: none;
}

#volunteer_question_table {
    margin: 0 auto;
}

#volunteer_question_table td {
    padding-right: 10px;
    padding-left: 10px;
}

#phone_format {
    font-size: 17px;
}

#add_contact_button {
    background-color: var(--client-secondary-color);
    cursor: pointer;
    width: 222px;
    color: white;
    border: none;
    font: normal bold 19px / 23px custom_helvetica;
    padding: 10px;
    border-radius: 25px;
}

#add_contact_button:hover {
    background-color: #808080;
}

#reserve_spots_button {
    background-color: var(--client-primary-color);
    cursor: pointer;
    width: 222px;
    color: white;
    border: none;
    font: normal bold 19px / 23px custom_helvetica;
    padding: 10px;
    border-radius: 25px;
}

#reserve_spots_button:hover {
    background-color: #808080;
}

#reserve_spots_button2 {
    background-color: #000000;
    color: #ffffff;
    padding: 10px;
    width: 30%;
    font: normal bold 19px / 23px custom_helvetica;
    margin: 0 auto;
    cursor: pointer;
    border-radius: 3px;
    display: none;
}

#reserve_spots_button2:hover {
    background-color: #808080;
}

#not_found_button {
    background-color: var(--client-quaternary-color);
    cursor: pointer;
    width: 222px;
    color: white;
    border: none;
    font: normal bold 19px / 23px custom_helvetica;
    padding: 10px;
    border-radius: 25px;
}

#not_found_button:hover {
    background-color: #808080;
}

#even_row {
    background-color: lightgrey;
}

.odd_row {
    background-color: lightgrey;
}

#list_view {
    border-collapse: collapse;
    border: 1px solid #0000;
    margin: 0 auto;
    text-align: left;
}

#list_view2 {
    display: none;
    border-collapse: collapse;
    border: 1px solid #0000;
    margin: 0 auto;
    text-align: left;
}

#past_step {
    border-top: 5px solid #003253 !important;
    color: #003253;
}

#active_step {
    border-top: 5px solid var(--client-secondary-color) !important;
    color: var(--client-secondary-color);
}

#process_steps_table {
    width: 100%;
    max-width: 80.5rem;
    table-layout: fixed;
    margin: 0 auto;
    /* padding-left: 25px; */
    /* padding-right: 25px; */
}

#process_steps_table td {
    border-top: 5px solid grey;
    padding-top: 5px;
}

#step_title {
    padding-left: 25px;
    padding-right: 25px;
    font-size: 1rem;
    display: none;
}

#step_number {
    height: 1.25rem;
    border-radius: 99rem;
    width: 1.25rem;
    font-weight: 400;
    font-feature-settings: "tnum"1,"kern"1;
    background-color: var(--client-secondary-color);
    color: #fff;
    display: inline-block;
    text-align: center;
}

#past_volunteer_inputs {
    display: none;
}

#new_volutneer_inputs {
    display: none;
}

.default_inputs {
    border: 1px solid black;
    font-size: 20px;
    padding-left: .5rem;
    padding-right:.5rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
    width: 100%;
    box-sizing: border-box;
}

#content_div {
    padding-bottom: 40px;
}

#selected_shifts_table {
    text-align: left;
}

#selected_shifts_table th {
    color: #ffff;
    background-color: #1a1a1a;
    padding-right: 20px;
}

#selected_shifts_table tr {
    border-collapse: collapse;
}

#selected_shifts_table td {
    padding-right: 20px;
    padding-top: 15px;
}

#selected_shift_even_row {
    background-color: #ebebeb;
    padding-bottom: 20px;
}

.header-grid-container {
    display: grid;
    grid-template-columns: 93% 7%;
}

.grid-container {
    display: grid;
    grid-template-columns: 50% 50%;
}

.grid-item {
    text-align: center;
}

.header_grid-item {
    text-align: left;
}

#header_right {
    text-align: right;
}

#additional_contacts_table {
    text-align: left;
    border-collapse: collapse;
}

#additional_contacts_table th {
    padding-right: 10px;
}

#additional_contacts_table td {
    padding-right: 10px;
}

#user_review_table {
    width: 100%;
    margin: 0 auto;
    text-align: left;
    border-collapse: collapse;
}

#shift_review_table {
    width: 100%;
    table-layout: fixed;
    margin: 0 auto;
    text-align: left;
    border-collapse: collapse;
}

#shift_filters {
    width: 50%;
    padding-top: 41px;
}

/* test table */
.container {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 45px;
}

.container2 {
    display: none;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 45px;
}

.container3 {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 45px;
}

.responsive-table {
    padding-top: 10px;
    overflow-wrap: anywhere;
    /* min-width: 310px; */
}

.responsive-table li {
    border-radius: 3px;
    padding: 25px 25px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
}

.responsive-table .table-header {
    background-color: #cccccc;
    font-size: 1rem;
    /* text-transform: uppercase; */
    /* letter-spacing: 0.03em; */
    color: black;
    text-align: left;
    overflow-wrap: normal;
}

.responsive-table .table-row {
    background-color: #ffffff;
    box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.3);
    text-align: left;
}

.responsive-table .col-1 {
    flex-basis: 28%;
}

.responsive-table .col-2 {
    flex-basis: 12%;
}

.responsive-table .col-3 {
    flex-basis: 13%;
}

.responsive-table .col-4 {
    flex-basis: 9%;
}

.responsive-table .col-5 {
    flex-basis: 13%;
}

.responsive-table .col-6 {
    flex-basis: 13%;
}

.responsive-table .col-1-2 {
    flex-basis: 25%;
}

.responsive-table .col-2-2 {
    flex-basis: 16%;
}

.responsive-table .col-3-2 {
    flex-basis: 36%;
}

.responsive-table .col-4-2 {
    flex-basis: 25%;
}

.responsive-table .col-2-3 {
    flex-basis: 82%;
}

.responsive-table .col-1-3 {
    flex-basis: 40%;
    text-align: left;
}
.responsive-table .col-2-3 {
    flex-basis: 32%;
    text-align: left;
}
.responsive-table .col-3-3 {
    flex-basis: 9%;
    text-align: left;
}

.responsive-table .col-1-4 {
    flex-basis: 5%;
}

.responsive-table .col-2-4 {
    flex-basis: 7%;
}

.responsive-table.col-3-4 {
    flex-basis: 13%;
}

.responsive-table .col-4-4 {
    flex-basis: 18%;
}

.responsive-table .col-5-4 {
    flex-basis: 9%;
}

.responsive-table .col-6-4 {
    flex-basis: 21%;
}

@media all and (max-width: 680px) {
    .responsive-table .table-header {
        display: none;
    }
    .responsive-table .table-row{
        text-align: left;
    }
    .responsive-table li {
        display: block;
    }
    .responsive-table .col {
        flex-basis: 100%;
    }
    .responsive-table .col {
        padding: 10px 0;
        &:before {
            color: #6C7A89;
            padding-right: 10px;
            content: attr(data-label);
            text-align: right;
        }
    }
    .modal {
        width: 90% !important;
        min-width:0px !important;

    }

    #lookup_table label{
        font-size:1rem;
    }

    #review_descriptions {
        padding-left: 25px !important;
    }
}

@media (max-width: 1111px) {
    #main_page_instructions {
        padding-left: 0px !important;
        width: 100% !important;
    }

    #lookup_table {
        width: 100% !important;
    }

    #weird_back_button{
        display: block !important;
    }

    .radio_wrapper .option {
        width: 100% !important;
    }

    .past_volunteer_form {
        width: 100% !important;
    }

    #shift_information_div {
        width: 100% !important;
    }

    .back_button {
        width: 100% !important;
    }

    .additional_button {
        width: 100% !important;
    }

    #shift_information_title {
        text-align: left !important;
    }
    
    #register_button3 {
        width: 100% !important;
    }

    .register_button2 {
        width: 100% !important;
    }



    #review_descriptions {
        width: 100% !important;
        box-sizing: border-box;
    }

    #error_content {
        width: 100% !important;
    }

    #review_description {
        width: 100% !important;
    }

    #new_volunteer_form {
        width: 100% !important;
    }

    #step_title {
        display: block;
    }

    .no_user_found_options {
        display: block !important;
    }

    /* #process_title{
        padding-left: 17px !important;
    } */

    .step_label {
        display: none !important;
    }

    .help_button {
        left: 83% !important;
        display: none !important;
    }

    .radio_wrapper{
        display: flex !important;
        flex-direction: column;
        padding: 0px !important;
        height:250px !important;
    }

    #shift_filters {
        width: 100%;
        padding-top: 41px;
    }

    #date_picker_table_row {
        height: 55px;
    }

    #header_top_right_table {
        display: none;
    }

    #header_bottom_right_table {
        display: none;
    }

    #mobile_header_table {
        display: block;
    }

    /* #logo_div {
        height: 114px;
        position: relative;
        z-index: 2;
    }

    #logo {
        width: 219px;
        padding-top: 16px;
        padding-left: 17px;
    } */

    .donate_now_button {
        width: 76px;
    }

    #past_volunteer_form {
        width: 100% !important;
    }

    #volunteer_question {
        width: 100% !important;
    }

    #page_title {
        width: 100% !important;
    }

    #page_header_description {
        width: 100% !important;
    }

    .grid-container {
        display: grid;
        grid-template-columns: 100% !important;
    }

    #shift_description {
        width: 100% !important;
    }

    #page_header_title {
        max-width: 18rem !important;
    }
}

@media (min-width: 1112px) {
    #menu_table {
        display: none !important;
    }
}

#shift_type_select {
    border: 1px solid black;
    font-size: 15px;
    border-radius: 3px;
}

#date_range {
    border: 1px solid black;
    font-size: 15px;
    border-radius: 3px;
    text-align: center;
}

#date_range_start {
    border: 1px solid black;
    font-size: 15px;
    border-radius: 3px;
}

#date_range_end {
    border: 1px solid black;
    font-size: 15px;
    border-radius: 3px;
}

.register_button {
    display: none;
    background-color: var(--client-primary-color);
    color: #ffffff;
    padding: 10px;
    width: 222px;
    font: normal bold 19px / 23px custom_helvetica;
    margin: 0 auto;
    cursor: pointer;
    border-radius: 3px;
}

.register_button:hover {
    background-color: #808080;
}

#register_button2 {
    display: none;
}

.register_button2 {
    background-color: var(--client-primary-color);
    color: #ffffff;
    padding: 10px;
    width: 30%;
    font: normal bold 19px / 23px custom_helvetica;
    margin: 0 auto;
    cursor: pointer;
    border-radius: 3px;
    text-wrap: balance;
}

.register_button2:focus {
    background-color: #808080;
    color: #ffffff;
    border: 2px solid white;
    box-shadow: 0 0 0 0px white, 0 0 0 2px #808080;
}


.register_button2:hover {
    background-color: #808080;
}

/*.register_button2:active {
    color: var(--client-primary-color);
    background-color: #ffffff;
    border: 2px solid var(--client-primary-color);
}*/

.remove_button {
    background-color: #ffffff;
    border: 2px solid var(--client-primary-color);
    color: #000000;
    padding: 5px;
    width: 95px;
    font: normal bold 15px / 23px custom_helvetica;
    margin: 0 auto;
    cursor: pointer;
    border-radius: 3px;
}

.remove_button:focus {
    background-color: var(--client-primary-color);
    color: #ffffff;
}

.remove_button:hover {
    background-color: var(--client-primary-color);
    color: #ffffff;
}

.additional_button {
    box-sizing: border-box;
    background-color: #ffffff;
    border: 2px solid var(--client-secondary-color);
    color: #000000;
    padding: 5px;
    width: 240px;
    font: normal bold 19px / 23px custom_helvetica;
    cursor: pointer;
    border-radius: 3px;
}

.additional_button:focus {
    background-color: #808080;
    color: #ffffff;
    border: 2px solid white;
    box-shadow: 0 0 0 0px white, 0 0 0 2px #808080;
}

.additional_button:hover {
    background-color: #808080;
    border: 2px solid #808080;
    color: #ffffff;
}

.continue_new_volunteer {
    background-color: #ffffff;
    border: 2px solid var(--client-secondary-color);
    color: #000000;
    padding: 5px;
    width: 100%;
    font: normal bold 19px / 23px custom_helvetica;
    cursor: pointer;
    border-radius: 3px;
}

.continue_new_volunteer:hover {
    background-color: #808080;
    border: 2px solid #808080;
    color: #ffffff;
}


.not_me_button {
    background-color: #ffffff;
    border: 2px solid var(--client-primary-color);
    color: #000000;
    padding: 5px;
    width: 215px;
    font: normal bold 15px / 23px custom_helvetica;
    margin: 0 auto;
    cursor: pointer;
    border-radius: 3px;
}

.not_me_button:hover {
    background-color: #808080;
    border: 2px solid #808080;
    color: #ffffff;
}

/* custom radio buttons -flex */
.radio_wrapper{
    display: inline-flex;
    background: #fff;
    height: 100px;
    width: 100%;
    align-items: center;
    justify-content: space-evenly;
    border-radius: 5px;
    padding: 20px 15px;
}

.radio_wrapper .option2{
    background: #fff;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    border-radius: 5px;
    cursor: pointer;
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 40px;
    padding-right: 40px;
    border: 2px solid var(--client-primary-color);
    transition: all 0.3s ease;
    box-shadow: 5px 5px 30px rgba(0,0,0,0.2);
    font-size: 25px;
    font-family: custom_helvetica;
    color: #000;
}

.radio_wrapper .option{
    background: #fff;
    height: 100%;
    width: 49%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    border-radius: 5px;
    cursor: pointer;
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 40px;
    padding-right: 40px;
    border: 2px solid var(--client-primary-color);
    transition: all 0.3s ease;
    box-shadow: 5px 5px 30px rgba(0,0,0,0.2);
    font-size: 25px;
    font-family: custom_helvetica;
}

.radio_wrapper .option .dot{
    height: 20px;
    width: 20px;
    background: #d9d9d9;
    border-radius: 50%;
    position: relative;
}

.radio_wrapper .option .dot::before{
    position: absolute;
    content: "";
    top: 4px;
    left: 4px;
    width: 12px;
    height: 12px;
    background: var(--client-primary-color);
    border-radius: 50%;
    opacity: 0;
    transform: scale(1.5);
    transition: all 0.3s ease;
}

/*input[type="radio"]{
    display: none;
}*/

/* form.submitted eq 1 */
#past_vol:checked:checked ~ .past_vol, #new_vol:checked:checked ~ .new_vol{
    border-color: var(--client-primary-color);
    background: var(--client-primary-color);
    color: #ffffff;
}

#past_vol:checked:checked ~ .past_vol .dot, #new_vol:checked:checked ~ .new_vol .dot{
    /*background: #ffffff;*/
    background: #808080;
}

#past_vol:checked:checked ~ .past_vol .dot::before, #new_vol:checked:checked ~ .new_vol .dot::before{
    opacity: 1;
    transform: scale(1);
}

#past_vol:checked:checked ~ .past_vol span, #new_vol:checked:checked ~ .new_vol span{
    color: var(--client-primary-color);
}
/* form.submitted eq 1 */

/* form.submitted eq 2 */
#lookup_phone_radio:checked:checked ~ .lookup_phone_radio, #lookup_email_radio:checked:checked ~ .lookup_email_radio{
    border-color: var(--client-primary-color);
    background: var(--client-primary-color);
    color: #ffffff;
}

#lookup_phone_radio:checked:checked ~ .lookup_phone_radio .dot, #lookup_email_radio:checked:checked ~ .lookup_email_radio .dot{
    background: #ffffff;
}

#lookup_phone_radio:checked:checked ~ .lookup_phone_radio .dot::before, #lookup_email_radio:checked:checked ~ .lookup_email_radio .dot::before{
    opacity: 1;
    transform: scale(1);
}

#lookup_phone_radio:checked:checked ~ .lookup_phone_radio span, #lookup_email_radio:checked:checked ~ .lookup_email_radio span{
    color: var(--client-primary-color);
}
/* form.submitted eq 2 */

/* form.submitted eq 4 */
#verify_phone_radio:checked:checked ~ .verify_phone_radio, #verify_email_radio:checked:checked ~ .verify_email_radio{
    border-color: var(--client-primary-color);
    background: var(--client-primary-color);
    color: #ffffff;
}

#verify_phone_radio:checked:checked ~ .verify_phone_radio .dot, #verify_email_radio:checked:checked ~ .verify_email_radio .dot{
    background: #ffffff;
}

#verify_phone_radio:checked:checked ~ .verify_phone_radio .dot::before, #verify_email_radio:checked:checked ~ .verify_email_radio .dot::before{
    opacity: 1;
    transform: scale(1);
}

#verify_phone_radio:checked:checked ~ .verify_phone_radio span, #verify_email_radio:checked:checked ~ .verify_email_radio span{
    color: var(--client-primary-color);
}
/* form.submitted eq 4 */

.text_form{
	position: relative;
}
.text_form label{
	/* position: absolute; */
	/* top: -30px; */
	font-size: 20px;
	color: #000;
}

/*.text_form input{ 
    border: 0;
    border-bottom: 1px solid #555;  
    background: transparent;
    width: 100%;
    padding:8px 0 5px 0;
    font-size: 20px;
    color: #000000;
}*/

/*.text_form input:focus{ 
    border: none;	
    outline: none;
    border-bottom: 1px solid #000000;	
}*/

/*, .text_form input:valid ~ label*/
.text_form input:focus ~ label, .text_form input:valid ~ label{
	top: -12px;
	font-size: 15px;
}

.radio_wrapper .option span{
    font-size: 20px;
    color: #000000;
}

.option:hover  {
    border-color: #808080;
    background-color: #808080;
    color: white;
}

.option span {
    color: white;
}

.option2:focus  {
    background-color: #808080;
    color: #ffffff;
    border: 2px solid white;
    box-shadow: 0 0 0 0px white, 0 0 0 2px #808080;
}

.option2:hover  {
    border-color: #808080;
    background-color: #808080;
    color: white;
}

.option2 span {
    color: white;
    font-size: 20px;
    color: #000000;
}

#extra_fields {
    display: none;
}

#new_volunteer {
    width: 90%;
    margin: 0 auto;
    padding-top: 33px;
}

#new_volunteer_form {
    width: 75%;
    border-radius: 38px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0 auto;
    text-align: center;
}

#no_user_found_display {
    width: 75%;
    min-width: 408px;
    border-radius: 38px;
    padding-left: 45px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0 auto;
    text-align: center;
}

.no_user_found_options {
    display: inline-flex;
    justify-content: space-evenly;
    text-align: center;
}

.account_questions {
    width: 100%;
    display: inline-flex;
    justify-content: space-evenly;
}

.table_input_label {
    text-align: left;
    font-family: custom_helvetica;
    font-weight: bold;
    font-size: 16px;
    padding-bottom: 25px;
    padding-right: 10px;
}

.table_input_label2 {
    text-align: center;
    font-family: custom_helvetica;
    font-weight: bold;
    font-size: 16px;
    padding-bottom: 25px;
    padding-right: 10px;
}

#past_volunteer_form {
    width: 75%;
    border-radius: 38px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
}

#volunteer_question {
    box-sizing: border-box;
    width: 75%;
    border-radius: 38px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0 auto;
}

#volunteer_question {
    text-align: center;
    padding-top: 20px;
}

#choose_user {
    width: 90%;
    margin: 0 auto;
    padding-top: 20px;
}

.this_is_me_button {
    background-color: #ffffff;
    border: 2px solid var(--client-primary-color);
    color: #000000;
    padding: 10px;
    width: 100%;
    font: normal bold 19px / 23px custom_helvetica;
    margin: 0 auto;
    cursor: pointer;
    border-radius: 5px;
}

.this_is_me_button:focus {
    background-color: #808080;
    color: #ffffff;
    border: 2px solid white;
    box-shadow: 0 0 0 0px white, 0 0 0 2px #808080;
}

.this_is_me_button:hover {
    border: 2px solid #808080;
    background-color: #808080;
    color: white;
}

#table_title {
    text-align: center;
}

#add_contact_to_household_form {
    width: 75%;
    min-width: 408px;
    border-radius: 38px;
    padding-left: 45px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0 auto;
}

#reserve_spots_form {
    width: 75%;
    min-width: 408px;
    border-radius: 38px;
    padding-left: 45px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0 auto;
}

footer {
    background-color: #000000;
}

.footer_content {
    color: #ffffff;
    text-align: left;
}

#footer_table1 {
    text-align: left;
    margin: 0 auto;
}

#footer_table1 td {
    padding-bottom: 10px;
}

#footer_table2 {
    text-align: left;
    margin: 0 auto;
    font-size: 18px;
}

#footer_table2 td {
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 20px;
}

#logo2 {
    width: 52px;
    padding-bottom: 20px;
}

.footer_bold_text {
    font-family: custom_helvetica;
    font-weight: bold;
}

.bottom_footer_content {
    color: #ffffff;
    padding-left: 21%;
    padding-bottom: 25px;
}

.daterangepicker td.in-range {
    background-color: var(--client-primary-color) !important;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: var(--client-primary-color) !important;
}

#register_button_div {
    text-align: center;
}

.add_invite_button {
    background-color: #000000;
    color: #ffffff;
    padding: 10px;
    width: 30%;
    font: normal bold 19px / 23px custom_helvetica;
    margin: 0 auto;
    cursor: pointer;
    border-radius: 3px;
}

.add_invite_button:hover {
    background-color: #808080;
}

.cancel_button {
    background-color: var(--client-primary-color);
    color: #ffffff;
    padding: 10px;
    width: 30%;
    font: normal bold 19px / 23px custom_helvetica;
    margin: 0 auto;
    cursor: pointer;
    border-radius: 3px;
}

.cancel_button:hover {
    background-color: #808080;
}

#page_title {
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 10px;
}

#page_header_title {
    font-size: 60px;
    font-family: custom_helvetica;
    font-weight:bold;
    border-bottom: 4px solid var(--client-primary-color);
    letter-spacing: -4px;
    max-width: 15rem;
    line-height: 1;
}

#page_header_description {
    width: 50%;
    padding-left: 16px;
    padding-right: 16px;
}

#shift_description {
    width: 50%;
    padding-left: 16px;
    padding-right: 16px;
}

#page_descriptions {
    width: 50%;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
}

#additional_information_table {
    width: 100%;
}

#additional_information_table td {
    width: 50%;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
}

#cancel_div .responsive-table {
    /* min-width: 310px; */
    /* min-width: 310px; */
    width: 75%;
    margin: 0 auto;
}

#cancel_div h3 {
    padding-top: 10px;
    min-width: 310px;
    width: 75%;
    min-width: 310px;
    margin-left: 13%;
}

#page_instructions {
    font-size: 19px;
}

#verify_error {
    font-size: 19px;
    color: red;
}

/* modal style */
#contact_modal {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: custom_helvetica;
}

.modal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.4rem;
    padding: 1.3rem;
    box-sizing: border-box;
    min-height: 250px;
    position: fixed;
    background-color: white;
    border: 3px solid #000;
    border-radius: 15px;
    width: 50%;
    min-width:612px;
    left: 50%;
    transform: translate(-50%, 0);
}

.modal .flex {
    display: block;
    text-align: right;
}

.modal p {
    font-size: 17px;
    color: #000;
    margin: 0.4rem 0 0.2rem;
}

button {
    cursor: pointer;
    border: none;
    font-weight: 600;
}

.help_button {
    display: inline-block;
    font-weight: 700;
    background-color: var(--client-quaternary-color);
    color: white;
    border-radius: 43px;
    font-size: 3em;
    position: fixed;
    left: 94%;
    top: 91%;
    width: 55px;
    height: 53px;
}

.btn-close {
    transform: translate(-24px, -20px);
    padding: 0.5rem 0.7rem;
    background: #fff;
    border-radius: 50%;
    font-size: 22px;
    position: absolute;
}

.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
    z-index: 19;
}

.modal {
    z-index: 20;
}

.hidden {
    display: none;
}
/* modal style */

.step_label {
    display: block;
}

#register_button3 {
    background-color: #808080;
    color: #ffffff;
    padding: 10px;
    width: 30%;
    font: normal bold 19px / 23px custom_helvetica;
    margin: 0 auto;
    cursor: pointer;
    border-radius: 3px;
}

#register_button3:hover {
    background-color: #808080;
}

.register_button3:focus {
    background-color: #808080;
    color: #ffffff;
    border: 2px solid white;
    box-shadow: 0 0 0 0px white, 0 0 0 2px #808080;
}

#contact_link {
    color: #551A8B;
    text-decoration: underline;
    cursor: pointer;
}

#contact_link2 {
    color: #fff;
    text-decoration: underline;
    cursor: pointer;
    /* padding-right: 10px; */
}

#process_title {
    color: #fff;
    font-size: 30px;
}

#phone_format_message {
    display: none;
    color: red;
    width: auto;
    position: absolute;
}

.back_button {
    box-sizing: border-box;
    background-color: #ffffff;
    border: 2px solid var(--client-secondary-color);
    color: #000000;
    padding: 8px;
    width: 240px;
    font: normal bold 19px / 23px custom_helvetica;
    margin: 0 auto;
    cursor: pointer;
    border-radius: 3px;
    display: block;
}

.back_button:focus {
    background-color: #808080;
    color: #ffffff;
    border: 2px solid white;
    box-shadow: 0 0 0 0px white, 0 0 0 2px #808080;
}

.back_button:hover {
    background-color: #808080;
    border: 2px solid #808080;
    color: #ffffff;
}

#review_description {
    width: 25%;
    margin: 0 auto;
}

.shift_notes {
    width: 100%;
    border: 1px solid black;
    font-size: 18px;
}

#error_content {
    width: 75%;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 20px;
    padding-bottom: 10px;
    margin: 0 auto;
}

#contact_us_button {
    background-color: var(--client-primary-color);
    color: #ffffff;
    padding: 10px;
    width: 30%;
    font: normal bold 19px / 23px custom_helvetica;
    margin: 0 auto;
    cursor: pointer;
    border-radius: 3px;
}

#button_div {
    text-align: center;
    width: 100%;
}

#review_descriptions {
    width: 100%;
    margin: 0 auto;
    padding-left: 50px;
}

#contact_info {
    padding-left: 35px;
}

#expDesc {
    color: #959595;
}

.filter_title {
    text-align: right;
    padding-right: 10px;
    padding-top: 10px;
}

.filter_input {
    text-align: left;
    padding-top: 10px;
}

#shift_information_div {
    width: 50%;
    margin: 0 auto;
}

.past_volunteer_form {
    width: 48%
}

#contact_link3 {
    color: #551A8B;
    text-decoration: underline;
    cursor: pointer;
}

#lookup_table {
    width: 50%;
    text-align: center;
    margin: 0 auto;
    font-size: 25px;
    padding-top: 20px;
}

#lookup_table td{
    padding:.5rem;
}

#lookup_table label{
    overflow-wrap: anywhere;
}

#main_page_instructions {
    padding-left: 50px;
    width: 92%;
}

#job_description {
    background-color: #f3f3f3;
}