.navbar 
{
    background-color: var(--primary-color);
}
/* start-join_form-section  */
.form 
{
    padding:120px 0;
    background:#dddddd;
    min-height:100vh;
}
.form h2 
{
    text-align: center;
    margin-bottom:50px;
}
.form .join_form
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:16px;
}

.form .join_form_img {
    position:relative;
    height:150px;
    width:150px;
    border:1px dashed black;
    border-radius: 4px;
    overflow: hidden;
    & label {
        width:100%;
        height:100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position:absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        border:0;
        outline: 0;
        cursor:pointer;

        &  > img {
            position:absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
            z-index:1;
            object-fit: contain;
            display:none;
            width:100%;
            height: 100%;
        }
        & button {
            width:100%;
            height:100%;
            display: block;
            background:none;
            border:none;
            outline:none;
            pointer-events: none;
            z-index:2;
            opacity:.5;
        }
    }

}

.form .join_form_inputs {
    display:flex;
    justify-content: center;
    align-items: center;
    gap:10px;
    flex-wrap:wrap;

    & > div
    {
        flex:1;
        /* width:450px; */
        min-width:290px;
        
        & h5 
        {
            margin-bottom:10px;
        }
    }

    & > div select,
    & > div input
    {
        width:100%;
        background-color: white;
        outline:none;
        border:none;
        border:1px solid #ddd;
        padding:5px 15px;
        border-radius:5px;
    }

    & div input[type="tel"]
    {
        padding-left:70px;
    }

    & > div .phone-input-container {
        position:relative;
        &:before {
            content:"218";
            background-color:'#f1f1f1';
            position:absolute;
            height:100%;
            width:60px;
            border-right:1px solid #ddd;
            top:0;
            left:0;
            display:flex;
            justify-content: center;
            align-items: center;
        }
    }

    .preferred-shift .options 
    {
        display:flex;
        gap:10px;
        
        & div 
        {
            text-align:center;

            & input{
                display: none;
            }

            & label 
            {
                border:1px solid #111;
                padding:5px;
                display: block;
            }

            & input:checked ~ label 
            {
                color:var(--primary-color);
                border:1px solid var(--primary-color);
            }
        }
    }
}


.form .join_form button[type='submit']
{
    width:100%;
    padding:10px 0;
    border :0;
    outline:0;
    background-color: var(--primary-color);
    color:white;
    border-radius: 5px;
}
/* end-join_form-section  */