* {
  box-sizing: border-box;
}

/* Style the body */
body {
  font-family: Roboto, Helvetica, sans-serif, Arial;
  margin: 0;
}

/* Header/logo Title */
.header {
    position: relative;
    margin-top: 46px;
  padding: 35px;
  text-align: center;
  background: #29bf12;
  color: white;
}

.logo_mare {
  position: absolute; /* Poziționare absolută pentru imagine */
  top: 0; /* Așezare de la partea de sus a containerului */
  right: 0; /* Așezare de la stânga containerului */
  height: 100%; /* Mărește imaginea pe întreaga înălțime a containerului */
  max-width: calc(100%-20px); /* Lățimea maximă a imaginii să fie lățimea containerului minus padding-ul contentului */
  object-fit: cover; /* Asigură că imaginea se va adapta și va acoperi întreaga zonă a containerului */
    display: block;
    margin: 0 auto; /* Centrare orizontală a imaginii */
}

/* Increase the font size of the heading */
.header h1 {
  font-size: 40px;
}

/* Style the top navigation bar */
.navbar {
    position: fixed;
  overflow: hidden;
  background-color: #f21b3f;
    z-index: 999; /* Asigură că bara de meniu este afișată deasupra altor elemente */
    top: 0; /* Poziționează bara de meniu în partea de sus */
    width: 100%; /* Asigură lățimea întregii pagini */
}

/* Style the navigation bar links */
.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}

/* Right-aligned link */
.navbar a.right {
  float: right;
}

/* Change color on hover */
.navbar a:hover {
  background-color: #abff4f;
  color: black;
}



/* Column container */
.row {  
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  -ms-flex: 15%; /* IE10 */
  flex: 15%;
  background-color: #f1f1f1;
  padding: 20px;
  
  /*margin-left: 200px;*/
  /*padding: 1px 16px;*/
  /*height: 1000px;*/
}

/* Main column */
.main {   
  -ms-flex: 85%; /* IE10 */
  flex: 85%;
  background-color: white;
  padding: 20px;
}

/* Fake image, just for this example */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 0px;
}

/* Footer */
.footer {
  width: 100%;
  padding: 20px;
  text-align: center;
  background: #ddd;
}


/* Stilizare pentru butonul de logare */
.login-button {
  padding: 10px 20px; /* Spatiere interioara */
  font-size: 16px; /* Dimensiunea fontului */
  font-weight: bold; /* Grosimea fontului */
  text-transform: uppercase; /* Transformare text in majuscule */
  border: none; /* Eliminare bordura */
  border-radius: 5px; /* Rotunjire colturi */
  background-color: #29bf12; /* Culoare de fundal */
  color: white; /* Culoare text */
  cursor: pointer; /* Cursor */
  transition: background-color 0.3s; /* Efect de tranziție la schimbarea culorii de fundal */
}

/* Stilizare la hover */
.login-button:hover {
  background-color: #45a049; /* Culoare de fundal la hover */
}

/* Stilizare bullet-uri */
ul {
  list-style-type: none; /* Ascunde default-ul bullet-urilor */
  padding-left: 20px; /* Adaugă spațiu între bullet-uri și text */
}
li::before {
  content: "\2022"; /* Codul Unicode pentru un bullet negru */
  color: #29bf12; /* Culoarea bullet-urilor */
  font-size: 20px; /* Dimensiunea bullet-urilor */
  margin-right: 10px; /* Spațiu între bullet-uri și text */
}

/*poza login*/
.container_auth {
  position: relative;
  width: 100%;
  max-width: 1920px;
  height: 500px;
}

.container_auth img {
  width: 100%;
  height: 100%;
  opacity: 0.3;
}

.container_auth .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
}

.container_auth .btn:hover {
  background-color: black;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .row {   
    flex-direction: column;
  }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .navbar a {
    float: none;
    width: 100%;
  }
}