html, body {
  background-color: #181E24;
  color: #A4A6A7;
  overflow-x: hidden;
  height: 100%;
  width: 100%;
  }
  h2{
    color:#333333;
  }
  .form-box {
    max-width: 55vw;
    margin: auto;
    background: #F2F2F2;
    overflow: hidden;
    color:#333333;
  }

  .form-box-login{
    margin: auto;
    display: flex;
    width: 600px;
    padding: 80px clamp(10px, 6vw, 80px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    background: #F2F2F2;
  } 

  .prijava-tekst{
    color: #181E24;
    font-family: Poppins;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
  }

  .container-login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
  }

  .inputBoxText {
    color: #717171;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .prijavaBtn {
    display: flex;
    padding: 16px 32px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 30px;
    background: #8BA725;
    color: #F2F2F2;
  }

  .edukosLogo {
    width: 315px;
    height: 80px;
    flex-shrink: 0;
  }
  
  .form {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px 24px 24px;
    gap: 16px;
    margin-left: 5vw;
    margin-right: 5vw;
  }
  
  /*Form text*/
  .title {
    font-weight: bold;
    font-size: 1.6rem;
  }
  
  .subtitle {
    font-size: 1rem;
    color: #666;
  }
  
  /*Inputs box*/
  .form-container {
    overflow: hidden;
    border-radius: 8px;
    background-color: #dcdcdc;
    margin: 1rem 0 .5rem;
    width: 100%;
  }
  
  
  .form-section {
    padding: 16px;
    font-size: .85rem;
    background-color: #e9e9e9;
    box-shadow: rgb(0 0 0 / 8%) 0 -1px;
  }
  
  .form-section a {
    font-weight: bold;
    color: #0066ff;
    transition: color .3s ease;
  }
  
  .form-section a:hover {
    color: #005ce6;
    text-decoration: underline;
  }

  .hide {
    display: none;
  }
  .radioButton{
    margin-left: 7vh;
  }
  .naslov{
    margin-left: 3vw;
    margin-right: 3vw;
    margin-top: 3vw;
  }
  .suglasnost{

    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    text-align: center;

    color: #A4A6A7;
    
  }

  .mt-3 {
    margin-top: 0.7rem;
  }

  .mt-6 {
    margin-top: 3rem;
  }

 .form-control{
    border: none !important;
    border-bottom: 1px solid #CECECE !important;
    border-radius: 0 !important;
    background: #F2F2F2 !important;
    padding: 16px 8px;
    align-items: center;
    gap:16px;
    align-self: stretch;
  }
  
  .naslov{
    font-family: 'Sofia Pro';
    font-style: normal;
    font-weight: 800;
    font-size: 36px;
    line-height: 41px;
    color: #FFFFFF;
  }

  #elipsa4 {
    position: absolute;
    width: 18vw; 
    height: 18vw;
    left: 92vw; 
    top: 50vh; 
    border-radius: 50%;
    background: #8BA725;
  }
  
  #elipsa1 {
    position: absolute;
    width: 22vw; 
    height: 22vw; 
    left: -10vw; 
    top: -9.6vw; 
    border-radius: 50%;
    background: #8BA725;
  }
  
  #elipsa2 {
    position: absolute;
    width: 22vw; 
    height: 22vw; 
    left: 15vw; 
    top: 115vh; 
    border-radius: 50%;
    background: #8BA725;
  }
  
  #elipsa5 {
    position: absolute;
    width: 18vw; 
    height: 18vw;
    left: 0vw;
    top: 250vh; 
    border-radius: 50%;
    background: #8BA725;
  }
  
  #elipsa3 {
    position: absolute;
    width: 15vw; 
    height: 15vw; 
    left: 95vw; 
    top: 190vh; 
    border-radius: 50%;
    background: #8BA725;
  }

  #elipsaPrijava2{
    position: absolute;
    width: 22vw; 
    height: 22vw; 
    left: 92vw; 
    top: 50vh; 
    border-radius: 50%;
    background: #8BA725;
  }

  #elipsaPrijava3{
    position: absolute;
    width: 7vw; 
    height: 7vw; 
    left: 75vw; 
    top: 10vh; 
    border-radius: 50%;
    background: #8BA725;
  }

  #elipsaPrijava4{
    position: absolute;
    width: 7vw; 
    height: 7vw; 
    left: 20vw; 
    top: 40vh; 
    border-radius: 50%;
    background: #8BA725;
  }

  #elipsaPrijava5{
    position: absolute;
    width: 7vw; 
    height: 7vw; 
    left: 40vw; 
    top: 78vh; 
    border-radius: 50%;
    background: #8BA725;
  }
  #posalji{
    padding: 10px 80px;
    gap: 10px;
    color: #FFFFFF;
    width: 234px;
    height: 64px;
    border-radius: 0;
    background: #8BA725;
  }

  .select2-selection__rendered{
    border: none !important;
    border-bottom: 1px solid #CECECE !important;
    border-radius: 0 !important;
    background: #F2F2F2   !important; 
  }

  .select2-container--default .select2-selection--single {
    border: none;
  }

  .select2-container--default .select2-selection--multiple {
    background-color: #F2F2F2;
    border: none;
  }

  .select2-container--default.select2-container--focus .select2-selection--multiple {
    border:none;
  }

   .select2-results__option--highlighted{
    background-color: #efefef !important;
    color: #A4A6A7;
   }
   .select2-results__option--highlighted{
    color: #A4A6A7 !important;
   }
   .select2-container--open{
    background-color: #F2F2F2;
   }
   .select2-results__options{
    background-color: #F2F2F2;
    border: none;
    color: #333333;
   }
   .modal-content{
    background-color: #F2F2F2;
    color:#333333 ;
   }

   .gumb {
    background-color: #A4C42C; /* Nova boja pozadine */
    border-color: #A4C42C; /* Nova boja obruba */
  }
  
  .gumb:hover {
    background-color: #7FA61F; /* Nova boja pozadine na hoveru */
    border-color: #7FA61F; /* Nova boja obruba na hoveru */
  }

  @media (max-width: 767px) {
    /* Stilovi za mobilne uređaje */
    .form-box-login {
        max-width: 85vw;
    }
    #prijaviSe{
      /* width: 25vw;
      height: 6vh;
      padding: 16px 8px; */
    }
    .form-box {
      max-width: 85vw;
    }
    .suglasnost {
      margin: 25px;
      color: white;
      font-size: 14px; /* Prilagodite veličinu fonta po potrebi */
      line-height: 1.5; /* Prilagodite visinu reda po potrebi */
    }
    .radioButton{
      margin-left: 1vw;
    }
    .text-danger {
      color: red; /* Style the red asterisk as needed */
  }
}