body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #00009f;
}

html{box-sizing:border-box}

.container {
  display: grid; 
  grid-template-columns: 1fr; 
  grid-template-rows: 1fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    "."; 
  align-content: center; 
  justify-items: center; 
  align-items: center; 
}
.forma {
    width: 600px;
    border-radius: 10px;
    margin: 50px auto;
    padding: 0;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.logo {
    border-radius: 10px 10px 0 0;
    text-align: center;
    margin-bottom: 20px;
    background: #fff;
    padding: 10px;
}

.logo img {
    max-width: 350px;
    height: auto;
}

.registration-form {
    text-align: center;
}

.registration-form h2 {
    margin-bottom: 20px;
    font-family:Montserrat;
}
.registration-form p {
    font-family:Montserrat;
    font-size:14px;
    font-weight:400;
}
.registration-form span {
    display:block;
    margin-top:10px;
    font-size:12px;
}
.form-container {
    margin-top:30px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(7, auto);
grid-column-gap: 25px;
grid-row-gap: 25px;
}

.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 2 / 1 / 3 / 2; }
.div4 { grid-area: 2 / 2 / 3 / 3; }
.div5 { grid-area: 3 / 1 / 4 / 2; }
.div6 { grid-area: 3 / 2 / 4 / 3; }
.div7 { grid-area: 4 / 1 / 5 / 3; }
.div8 { grid-area: 5 / 1 / 6 / 3; }
.div9 { grid-area: 6 / 1 / 7 / 2; }
.div10 { grid-area: 6 / 2 / 7 / 3; }
.div11 { grid-area: 7 / 1 / 8 / 2; }
.div12 { grid-area: 7 / 2 / 8 / 3; }




/* Stil za input i select unutar form-group */
.form-container input,
.form-container select {
    width: 100%; /* Input polje ispunjava .form-group */
    padding: 15px;
    border: 0px solid #ccc;
    border-radius: 10px;
    font-size: 16px;
    font-family:Montserrat;
    box-sizing:border-box;
    background:#f7f7f7;
    outline:0px;
}
.form-container input:focus,
.form-container select:focus {
    outline:0px;
    border:0px;
}
.form-container a {
    display:block;
    text-align:left !important;
    color:#666;
    font-size:14px;
    margin-top:10px;
    font-family:Montserrat;
}
/* Dodajte stil za dugme submit */
.submit-btn {
    margin-top:10px;
    background-color: #4CAF50 !important;
    color: #fff;
    padding: 15px 30px !important;
    border: none;
    font-weight:bold;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.submit-btn:hover {
    background-color: #45a049;
}


/*LOGIN FORMA*/

.login-form {
    width:400px;
    margin:0 auto;
    padding-bottom:30px;
}
.login-form {
    text-align: center;
}

.login-form h2 {
    margin-bottom: 20px;
    font-family:Montserrat;
}
.login-form p {
    font-family:Montserrat;
    font-size:16px;
    color:#697A8D;
    display:block;
}
.login-form a {
    font-family:Montserrat;
    font-size:16px;
    color:#697A8D;
    display:block;
    margin-bottom:20px;
}
.login-container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(3, auto);
grid-column-gap: 25px;
grid-row-gap: 25px;
}

.username { grid-area: 1 / 1 / 2 / 2; }
.password { grid-area: 2 / 1 / 3 / 2; }
.loginbtn { grid-area: 3 / 1 / 4 / 2; }

.login-container input,
.login-container select {
    width: 100%; /* Input polje ispunjava .form-group */
    padding: 15px;
    border: 0px solid #ccc;
    border-radius: 10px;
    font-size: 16px;
    box-sizing:border-box;
    background:#f7f7f7;
    outline:0px;
    font-family:Montserrat;
}
.login-container input:focus,
.login-container select:focus {
    outline:0px;
    border:0px;
}
.login-container a {
    display:block;
    text-align:left !important;
    color:#666;
    font-size:14px;
    margin-top:10px;
}

.uspjesno {
    background:#4CAF50;
    padding:10px;
    text-align:center;
    border-radius:5px;
    color:#fff;
    font-size:15px;
    font-family:Montserrat;
}
.info {
    background:#FDFD96;
    padding:10px;
    text-align:center;
    border-radius:5px;
    color:#000;
    font-size:15px;
    font-family:Montserrat;
}
.razmak {
    margin-bottom:25px;
}
.greska {
    background:#ff0000;
    padding:10px;
    text-align:center;
    border-radius:5px;
    color:#fff;
    font-size:15px;
    font-family:Montserrat;
}


/*SELECT 2*/
 /* Stilizacija za Select2 */
.select2-container {
  width: 100%;
}

.select2-container .select2-selection--single {
  height: 50px !important;
  text-align:left !important;
  line-height: 44px !important;
  border: 0px !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  background: #f7f7f7 !important;
}
.select2-container .select2-selection--single span {
    font-size:16px !important;
    font-family:montserrat !important;
}
.select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: 15px !important;
  
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height:50px !important;
}
.select2-container .select2-selection--single .select2-selection__arrow {
  top: 0px !important;
  right: 15px !important;
}

/* Stilizacija za selektovane opcije */
.select2-container .select2-selection--single .select2-selection__rendered {
  color: #697A8D !important;
}

/* Stilizacija za dropdown */
.select2-container--default .select2-results__option {
  padding: 10px 15px !important;
  font-size: 16px !important;
  color: #697A8D !important;
  font-family:Montserrat !important;
}

.select2-container--default .select2-results__option--highlighted {
  background: #0078D4 !important;
  color: #fff !important;
}

/* Stilizacija za search input u dropdownu */
.select2-container--default .select2-search__field {
  padding: 10px 15px !important;
  font-size: 16px !important;
  color: #697A8D !important;
}

/*FOOTER*/
.footer, .copyright {
    font-size:14px;
    font-family:Montserrat;
    font-weight:400;
}
/*Potvrdni kod*/
.potvrdni-kod {
    margin-top:25px;
}
.uspjesno a {
    color:#fff;
    text-decoration:none;
    font-weight:bold;
}


/*OPTIMIZACIJA*/
/*MOBILE*/
@media screen and (max-width: 600px) {
    
    /* REGISTRACIJA */
  .forma {
      margin: 0;
      width: auto;
  }
  
  .form-container {
      display: block;
  }
  .registracija-container {
      margin-top: 50px !important;
  }
  .div1, .div2, .div3, .div4, .div7, .div9{
      margin-bottom: 20px;
  }
  .select2 {
      width: auto;
      margin-bottom: 20px !important;
  }
  .logo img {
      max-width: 250px;
      margin-top: 20px;
  }
  .div12 a {
      text-align: center !important;
      margin-top: 30px;
  }
  .submit-btn {
      margin-top: 40px;
      padding: 25px 30px !important;
      font-size: 20px !important;
  }
  .footer {
      margin-top: 40px;
      text-align: center;
  }
  .registration-form p, .registration-form span {
      font-size: 18px;
  }
  .form-container input, .form-container select {
      padding: 25px 15px;
      font-size: 18px;
  }
  .select2-container .select2-selection--single {
      height: 70px !important;
  }
  .select2-container .select2-selection--single .select2-selection__arrow {
      top: 12px;
  }
  .select2-container--default .select2-selection--single .select2-selection__rendered {
      line-height: 70px !important;
      font-size: 18px !important;
  }
  
  
  /* PRIJAVA */
  .loginbtn a {
      margin-top: 40px;
      text-align: center !important;
  }
  .login-container input{
      padding: 25px 15px;
      font-size: 18px;
  }
  .loginbtn .submit-btn {
      margin-top: 10px;
  }
  .forma-login {
      margin-top: 50px;
  }
  .login-form {
      width: auto;
  }
  .container {
      display: block !important;
      padding: 0 20px;
  }
  .copyright {
      text-align: center;
      font-size: 14px;
      font-family: Montserrat;
    font-weight: 400;
  }
}