.signup_wrapper
{
    padding: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.signup_container
{
    background-color: var(--color_shade1);
    padding: 20px;
    flex-basis: 500px;
}

.signup_container h1
{
    margin-bottom: 40px;
}

.signup_container h2
{
    margin-bottom: 15px;
}

.input_container
{
     display: flex;
     border: 1px solid var(--color_shade4);
     align-items: center;
     padding: 5px 10px;
}

.input_container:focus-within
{
    
     border: 1px solid var(--main_color);
    
}

.input_container span
{
     user-select: none;
}

.input_container .form_input
{
     border: none;
     font-size: 15px;
}

.input_container:not(:last-child)
{
     margin-bottom: 15px;
}

.show_password
{
    cursor: pointer;
}

.signup_container button
{
    width: 100%;
    font-size: 15px;
}

.input_container .hide_password
{
    display: none;
    cursor: pointer;
}

.signup_container p
{
   margin-top: 15px;
   text-align: center;
}


.input_column
{
    display: flex;
    padding: 20px;
    background-color: var(--color_shade1);
    width: 100%;
}

.input_column:not(:last-child)
{
    margin-bottom: 10px;
}

.checkout.payment
{
    background-color: var(--color_shade2);
    margin-top: 20px;
    margin-bottom: 10px;
}


.input_column input
{
    margin-right: 10px;
}

.input_column label
{
    cursor: pointer;
}




.form_input
{
    flex: 1;
    padding: 10px;
    border: none;
    border: 1px solid var(--color_shade4);
    outline: none;
    font-size: 15px;

}

.form_input:focus
{
    border: 1px solid var(--highlight_color);

}


.search_btn
{
    border: none;
    padding: 10px;
    background-color: var(--highlight_color);
    border: 1px solid var(--highlight_color);
    color: var(--color_shade1);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.search_btn span
{
    font-size: 25px;
}

.search_remove
{
    border: none;
    padding: 10px;
    background-color: var(--color_shade1);
    color: var(--main_color);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    display: none;

}



.search_btn:hover
{
    background-color: var(--highlight_color_dim);
    border: 1px solid var(--highlight_color_dim);
    cursor: pointer;
}


/*==========================SEARCH SECTION ==========================*/


.search_container .search_btn
{
    padding: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 401;
        
}



#search_form
{
    flex-basis: 600px;
    display: flex;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: -50px;
}

#search
{
     z-index: 402;
}

.search_dropdown
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 40px 0 20px 0;
    border: 1px solid var(--color_shade4);
    background-color: var(--color_shade1);
    z-index: 200;
    display: none;
}


.close_btn:disabled, .open_btn:disabled
{
    opacity: .2;
}


.search_dropdown_link
{
    display: flex;
    padding: 7px 20px;
    border-bottom: 1px solid var(--color_shade4);
    align-items: center;
}


.search_dropdown_img

{
    flex-basis: 60px;
    flex-shrink: 0;
    height: 60px;
    overflow: hidden;
}


.search_dropdown_img img

{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dropdown_search_text
{
    padding: 10px 20px 10px 10px;
    flex: 1;
}

.dropdown_search_text p
{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0;
    padding: 0;

}

.dropdown_search_date
{
    padding: 10px;
}

.dropdown_search_date span
{
    display: block;
    color: var(--color_shade8);
    font-size: 14px;
    white-space: nowrap;
   
}

.dropdown_search_date span:last-child
{
    color: var(--color_shade5);
   
}

.search_dropdown_inner
{
    max-height: 400px;
    overflow: auto;
    
}





/*==========================BUTTON SECTION ==========================*/
.open_btn
{
    background: none;
    border: 1px solid var(--highlight_color);
    padding: 15px 23px;
    color: var(--highlight_color);
    cursor: pointer;
    white-space: nowrap;
}


.open_btn:hover
{
    border: 1px solid var(--highlight_color);
    color: var(--color_shade1);
    background-color: var(--highlight_color);
    
}

.open_btn:focus
{
    border: 1px solid var(---color_shade3);
    
}


.close_btn
{
    background: var(--highlight_color);
    border: 1px solid var(--highlight_color);
    padding: 15px 23px;
    color: var(--color_shade1);
    cursor: pointer;
    white-space: nowrap;
}


.close_btn:hover
{
    opacity: .8;
    
}

.close_btn:focus
{
    border: 1px solid var(---color_shade3);
    
}

@media only screen and (max-width: 700px)
{
    .search_remove
{
    display: block;

}
}



@media only screen and (max-width: 600px)
    {
        .signup_wrapper
        {
            padding: 20px;
        }

    }