/*---------signup_container---------*/

#search_form
{
  flex-basis: 600px;
  display: flex;
  margin: 0 20px;
}
.form_input
{
   flex: 1;
  padding: 10px;
   border: none;
   border: 1px solid var(--color_shade52);
   outline: none;
}
.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_shade2);
   text-transform: uppercase;
   letter-spacing: 1.2px;
}

.search_btn:hover
{

   background-color: sienna;
   border: 1px solid sienna;
   cursor: pointer;
}
/*---------BUTTON STYLES-----------*/
.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_color2);
background-color: var(--highlight_color2);
color: var(--color_shade1);
}

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

.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(--main_color_shde2);
}
.close_btn:disabled, .open_btn:disabled
{
 opacity: .2;
}
.yes_no_wrap
{
display: flex;
justify-content: flex-end;
}
.yes_no_wrap button
{
padding: 8px 15px;
}
.yes_no_wrap button:not(:last-child)
{
margin-right: 10px;
}
/*--sign up styles--*/
.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: 20px ;
}

.input_container
{
    display: flex;
    align-items: center;
    border: 1px solid var(--color_shade52);
    padding: 5px 10px;
}
.dashboard_form_container
{
    box-shadow: 0 7px 25px var(--color_shade4);
    border-radius: 20px;
}
.dashboard_form_container .input_container
{
    padding: 5px;
}

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

.input_container span
{
  user-select: none;
}

.input_container:not(:last-child)
{
        margin-bottom: 15px;
}
.input_container .form_input
{
        border: none;
        font-size: 15px;
}
 .form_input
{
 font-size: 15px;
}
.show_password
{
    cursor: pointer;
}
.signup_container .close_btn, .signup_container .open_btn
{
    width: 100%;
    font-size: 15px;
}
.input_container .hide_password
{
    display: none;
    cursor: pointer;
}
.signup_container .bottom_text
{
    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:rgb(235, 233, 233);
    margin-top: 20px;
    margin-bottom: 10px;
}
.input_column input
{
    margin-right: 10px;
}
.input_column label
{
   cursor: pointer;
}
select
{
    background-color: transparent;
    color: var(--color_shade7);  
}
textarea, .note-editor
{
margin-bottom: 16px;
display: block;
width: 100%;
background: var(--color_shade1);
text-align: left;
}
.file_container input
{
 display: none;
}
.file_container
{
  width: 100%;
  display: flex;
  border: 1px solid var(--color_shade21);
  margin-bottom: 20px;
}
#file_text
{
    flex: 1;
    padding: 12px;
    color: var(--color_shade10);
}
#file_btn
{
    padding: 10px 20px;
    background-image: linear-gradient(var(--color_shade4), var(--color_shade2));
    cursor: pointer;
}
#file_btn:active
{
   border: 1px solid var(--highlight_color);
}
@media only screen and (max-width: 600px)
{ 
  .signup_wrapper
  {
      padding: 20px;
  } 
}