/* ============== Buttons |STyle ==============*/ 
	button 
	{
		padding: 10px; 
		margin-right: 8px;
		color: var(--color_shade1); 
		cursor: pointer; 
		border: none;
	}
	
	.open_btn
	{
		background: none; 
		border: 1px solid var(--highlight_color);
		padding: 15px 20px; 
		color: var(--highlight_color);
		cursor: pointer;
		white-space: nowrap;
	}
	
	.open_btn:hover
	{
		border: 1px solid var(--highlight_color);
		background-color: var(--highlight_color);
		color: var(--color_shade1);
	}
	
	.open_btn:focus
	{
		border: 1px solid var(--main_color_shade3);
		
	}
	
	.close_btn
	{
		background: var(--highlight_color); 
		border: 1px solid var(--highlight_color);
		padding: 15px 20px; 
		color: var(--color_shade1);
		cursor: pointer;
		white-space: nowrap;
	}
	
	.close_btn:hover
	{
		opacity: .8;
	}
	
	.close_btn:focus
	{
		border: 1px solid var(--main_color_shade3);
		
	}
	
	.close_btn:disabled, .open_btn:disabled
	{
		opacity: .2;
	}

	.yes_no_wrap
	{
		display: flex;
		justify-content: flex-end;
		
	}

	.yes_no_wrap .close_btn
	{
		flex: 1;
	}
	
	.yes_no_wrap .open_btn
	{
		flex: 1;
	}
	

	.yes_no_wrap button 
	{
		padding: 8px 12px;
	}
	
	
	.yes_no_wrap button:not(:last-child) 
	{
		margin-right: 5px;
	}
	
	/* ============== FORM |STyle ==============*/ 
        
    .form_input 
    {
        flex:1;
        padding: 10px; 
        border: none;
        border: 1px solid var(--color_shade4); 
        outline: none;
    }

    .form_input:focus 
    {
        border: 1px solid var(--highlight_color);
        
    }
    
	
	/* ============== LOGIN STyle ==============*/ 

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

	.signup_container h3 
	{
		padding: 0 0 10px 10px;
	}

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

	.form_container
	{
		display: flex;
		align-items: center;
		border: 1px solid var(--color_shade4);
		padding: 5px 10px;
		
	}
	
	
    .form_container:not(:last-child)
	{
		margin-bottom: 15px;
	}

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

    .form_container .form_input
    {
        border: none;
        font-size: 16px;
    }


	.form_input
	{
		font-size: 15px;
		flex:1;
		
		outline: none;
	}

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

	.show_password
	{
		cursor: pointer;
	}

	.form_container .hide_password
	{
		display: none;
		cursor: pointer;
	}
	
	select
	{
		background-color: transparent;
		color: var(--color_shade);
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		padding: 10px;
	}
	
	option .color
	{
		background-color: red;
		font-weight: bold;
		font-size: 12px;
		color: red;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		padding: 10px;
	}