body {
    background-color: var(--color-background);
    color: white;
    font-family: 'Poppins', 'Open sans', 'Arial', sans-serif;
    text-align: left;
    margin: 0;
    padding: 0;
}
label, button {
    user-select: none;
}

.container {
		display: flex;
    height: 100vh;
    max-width: 3000px;
    position: absolute;
    width: 100%;
    margin: 0 auto;
    }

.left {
    flex: 3;
    background-size: cover;
    background-position: center;
}

.right {
    flex: 7;
    display: flex;
    flex-direction: column;
    color: white;
    text-align: center;
    padding: 20px;
}


input[type="text"],
input[type="password"],
input[type="email"],
button {
    width: 100%; /* Make input fields and button the same width */
    padding: 10px;
    margin: 10px 0;
	    font-size: 18px;
    border: none;
    border-radius: 5px;
    background-color: var(--color-button);
    color: white;
    font-family: 'Poppins', 'Open sans', 'Arial', sans-serif;
}
#login-form input[type="text"],
#login-form input[type="password"],
#login-form input[type="email"],
button{
    font-size: 17px;
}

input[type="text"],
input[type="email"],
input[type="password"] {
    width: calc(100% - 20px);
    font-weight: 500!important;
}
button {
    cursor: pointer;
    background-color:var(--color-button);
}



/* Center the form on small screens */
@media screen and (max-width: 500px) {
    form {
        width: 90%;
    }
    .container-menu {
display:none!important;
    }
}

/* Center the form on small screens */
@media screen and (max-width: 500px) {
    .container {
        flex-direction: column;
    }
    
    .left {
        flex: 1;
        max-height: 180px;
    }
    
    .right {
        flex: 1;
    }
    
}


/* Styles pour le dropdown */
.dropdown {
position: relative;
display: block;
}

input[type="text"].dropingdown {
width: calc(97% - 20px);
padding: 11px 11px 10px;
border: var(--color-button);
border-radius: 5px;
margin-bottom: 0px;
font-size: 16px;
}

.dropdown-menu {
list-style: none;
padding: 0;
margin: 0;
display: none;
position: absolute;
background-color: var(--color-button);
border: var(--color-button);
border-top: none;
border-radius: 0 0 5px 5px;
width: calc(100% - 16px);
z-index: 999;

margin-top: -2px;
max-height: 180px;
overflow-y: scroll;
overflow-x: hidden;
}

input[type="text"].dropingdown.dropingdown-changed {
	background-color: var(--color-button-submit);
	border: var(--color-button-submit);
}

.dropdown-menu li a {
display: block;
padding: 10px;
text-decoration: none;
color: #fff;
}

.dropdown-menu li a:hover {
background-color: var(--color-button-hover);
}

.dropdown-menu li a{
cursor:pointer;
}



.flexbox-full {
display: flex!important;
flex-wrap: wrap;
    width: 100%;
margin-bottom:22px;
}

.flexbox-1 {
flex:1;
}
.flexbox-2 {
flex:2;
}
.flexbox-3 {
flex:3;
}
.flexbox-4 {
flex:4;
}
.flexbox-5 {
flex:5;
}
.flexbox-6 {
flex:6;
}
.flexbox-7 {
flex:7;
}
.flexbox-8 {
flex:8;
}

.flex-align-center-all{
display: flex;
  align-items: center; 
  justify-content: center;  
}

.flex-horizontal-align{
display: flex;
  justify-content: center;  
}

.flex-vertical-align{
display: flex;
  align-items: center; /* Vertical center alignment */
  /* justify-content: center;  Horizontal center alignment (optional) */
}

.padding-right-30{
	padding-right:30px;
}

.flex-align-right{
    justify-content: flex-end;
    display: flex;
}
.quartermax{
	    max-width: 20%;
    min-width: 310px!important;
	
}

.halfmax{
	    max-width: 33%;
    min-width: 450px!important;
	
}