@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');:root {
  --gab:"Gabarito", sans-serif;
  --inter: "Inter", sans-serif;
  --raj:"Rajdhani", sans-serif;
    --primary:#234D89;
  --secondary:#0971CE;
  --light:#878F57;
  --textwhite:#F6F8EB;
  --landing-width:68.89vw;
  --landing-width-mobile:86vw;
  --boxshadow:0px 0px 30px 0px #0000000F;
  --blue:#3B82F6;
  --green:#22C55E;
  --purple:#A855F7;
  --orange:#F97316;
   --bluelight:#DBEAFE;
  --greenlight:#DCFCE7;
  --purplelight:#F3E8FF;
  --orangelight:#FFEDD5;
    --yellowlight:#E9E6C1;
   --color-success: #16A34A;
  --color-error: #DC2626;
  --color-warning: #F59E0B;
  --color-info: #2563EB;
      --yellow:#EFEF29;
 

--d10:0.69vw;
   --d11:0.76vw;
 
   --d12:0.83vw;
   --d13:0.9vw;
    --d14:0.96vw;
    --d15:1.03vw;
    --d16:1.11vw;
--d18:1.25vw;
--d20:1.39vw;
--d22:1.53vw;
--d24:1.67vw;
--d25:1.74vw;
--d28:1.94vw;
--d30:2.08vw;
--d34:2.36vw;
--d36:2.50vw;
--d40:2.78vw;
--d44:3.06vw;
--d48:3.33vw;
--d54:3.75vw;
--d56:3.89vw;
--d64:4.44vw;
--d80:5.56vw;
--d84:5.83vw;
--d100:6.94vw;
--d110:7.64vw;
--d120:8.33vw;
--d156:10.83vw;
--d904:62.78vw;



    --m10:2.78vw;
    --m11:3.06vw;
    --m12:3.33vw;
    --m13:3.61vw;
    --m14:3.89vw;
    --m15:4.17vw;
    --m16:4.44vw;
    --m18:5vw;
    --m20:5.56vw;
    --m24:6.67vw;
    --m25:6.94vw;
    --m32:8.89vw;
    --m36:10vw;
    --m40:11.11vw;
    --m48:13.33vw;
    --m64:17.78vw;
    --mmt: 27.78vw;



     --fw-thin: 100;
    --fw-extralight: 200;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    --fw-black: 900;


  






 

}



/* Main start*/



  .calendar-container {
    width: 77vw;
  
    height: auto;
    background: #fff;
    border: 1px solid #F3F4F6;
    display: grid;
    grid-template-rows: 60px 1fr;
  
  }

  .calendar-header {
    display: grid;
    grid-template-columns:  repeat(8, 9.62vw);
    background: #fafafa;
    border-bottom: 1px solid #F3F4F6;

     height: 3vw;
     margin-top: 3vw;
  }

  .calendar-header div {
    text-align: center;
    border-left: 1px solid #F3F4F6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    height: 3vw;
  }

  .day-name {
  font-family: var(--inter);
     color: #6b7280;
     font-size: var(--d12);
     font-weight: 500;
     text-transform: uppercase;
  }

  .day-date {
    font-family: var(--inter);
     color: #111827;
     font-size: var(--d14);
     font-weight: 600;
     text-transform: uppercase;
  }

  .calendar-grid {
    display: grid;
    grid-template-columns:  repeat(8, 9.62vw);
    grid-auto-rows: 4.38vw;
    
    position: relative;
  }


  .calendar-grid-wrapper {
  position: relative;
  height: 81vh; /* visina scrollable područja */
  overflow-y: auto;
  border-top: 1px solid #ccc;
  overflow-x: hidden;
}


.current-time-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 2px dashed var(--primary);
  z-index: 10;
}

.current-time-label {
  position: absolute;
  left: 0.3vw;
  background: white;
  padding: 2px 4px;
  font-size: var(--d12);
  z-index: 11;
  font-family: var(--inter);
  color: var(--primary);
  background: transparent;
}


  .hour {
    border-top: 1px solid #eee;
    border-right: 1px solid #F3F4F6;
    text-align: center;
    font-size: 12px;
    line-height: 4.38vw;
     background-color: #F3F4F6;
     width: 9.62vw;
     font-family: var(--inter);
     color: #6b7280;
     font-size: var(--d12);
  }

  .day-cell {
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    position: relative;
  }

  .event {
    position: absolute;
    left: 0.2vw;
    width: 8.1vw;
    background: #3498db;
    color: white;
    border-radius: 4px;
    font-size: 0.75rem;
    
    box-sizing: border-box;
    overflow: hidden;
  }

  /* Linija za trenutno vrijeme */




  .event.blue{
    background-color: var(--bluelight);
    border-left: 4px solid var(--blue);
  }
  .event.purple{
    background-color: var(--purplelight);
    border-left: 4px solid var(--purple);
  }
  .event.orange{
    background-color: var(--orangelight);
    border-left: 4px solid var(--orange);
  }
  .event.green{
    background-color: var(--greenlight);
    border-left: 4px solid var(--green);
  }
  .event.yellow {
    background-color: var(--yellowlight);
    border-left: 4px solid var(--yellow);
}

 .yellow h1,.yellow h2{
    color: black;

  }
   .yellow p{
      color:black;
  }
  

  .orange h1, .orange h2{
    color: #7C2D12;

  }
  
  .blue h1,.blue h2{
    color: #1E3A8A;

  }
  
  .purple h1,.purple h2{
    color: #581C87;

  }
  
  .green h1,.green h2{
    color: #14532D;

  }

    .orange p{
    color: #C2410C

  }
  
  .blue p{
    color: #1D4ED8;

  }
  
  .purple p{
    color: #7E22CE;

  }
  
  .green p{
    color: #15803D;

  }

  .lowopacity {
    opacity: 0.2;
}



  .event h1{
    font-size: var(--d14);
    font-weight: 500;
    font-family: var(--inter);
    margin-left: var(--d16);
    margin-top: var(--d13);
    margin-bottom: 0;
  }
  
  .event h2{
    font-size: var(--d12);
    font-weight: 500;
    font-family: var(--inter);
    margin-left: var(--d16);
    margin-top: 0.2vw;
    margin-bottom: 0;
  }
  .event p{
    font-size: var(--d12);
    font-weight: 400;
    font-family: var(--inter);
    margin-left: var(--d16);
    margin-top:0.2vw;
  }


  .event .otkazan{
    position: absolute;
    width: var(--d15);
    height: var(--d15);
    background-color: red;
    top: 0.2vw;
    right: 0.2vw;
    border-radius: 50%;
    
  }
  
  .event .uradjen{
    position: absolute;
    width: var(--d15);
    height: var(--d15);
    background-color: green;
    top: 0.2vw;
    right: 0.2vw;
    border-radius: 50%;
    
  }
    .event .zakazan{
    position: absolute;
    width: var(--d15);
    height: var(--d15);
    background-color: white;
    top: 0.2vw;
    right: 0.2vw;
    border-radius: 50%;
    
  }

/* Main End*/


/* Toolbar header start*/



.calendar-toolbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #f4f4f4;
  padding: 0.8vw 1.2vw;
  border-bottom: 1px solid #ccc;
  font-family: Arial, sans-serif;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 0.6vw;
}

.toolbar-left h2 {
  font-size: 1.2rem;
  margin: 0;
}

.arrow-btn {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  width: 2vw;
  height: 2vw;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.8vw;
}

.toolbar-right select {
  padding: 0.3vw;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.icon-search, .icon-menu {
  cursor: pointer;
  font-size: 1.3rem;
}
.calendar-topbar{
  display: flex;
  height: 6.46vw;
  justify-content: space-between;
      align-items: center;
}
.month-selector{
  display: flex;
  margin-left: 3vw;
}

.month-selector h2{
  font-size: var(--d24);
  color: #111827;
  font-family: var(--inter);
  font-weight: 600;
  margin: 0;
  margin-left: 1.5vw;

}

.month-selector button{
  background: transparent;
  border: none;
  outline: none;
  width: var(--d10);
  height: var(--d16);
}

#instructorSelect{
  color: rgba(17, 24, 39, 0.75);
  font-family: var(--inter);
  font-weight: 600;
  font-size: var(--d24);
  border:none;
  outline: none;
  height: var(--d34);
}

.menu-icon{
  color: rgba(17, 24, 39, 0.75);
  font-family: var(--inter);
  font-weight: 600;
  font-size: var(--d18);
  border:none;
  outline: none;
  height: var(--d34);
  margin-right: 2vw;

}

#nextWeek img{
  
    margin-left: 1vw;
}

#prevWeek img{
  
    
}
.nav-btn{
      align-self: anchor-center;
      cursor: pointer;
}







/* Toolbar header End*/