:root {
  --bg-light: #17181C;
  --bg-hover: #393E46;
  --bg-hover2:#33aadd;
  --bg-hover3:#186cea;
  --color-hover: white;
  --text-light: #ffffff;
  --text-muted: #aaa;
  --border-color: #9b9dab;
  --color-1:#9b9dab;
  --bg-inputtext: #2e3238;
  --bg-inputtext-hover: #393e46;
  --bg-1:#52555b;
  --bg-2:#292c32;
}


.datepicker {
  display: flex;
  flex-direction: column;       /* İçindekileri alt alta diz */
  align-items: center;  
  background:var(--bg-inputtext);
  border-radius:10px;
  position: fixed;
  top: 200px;
  left:50%;
  transform: translateX(-50%);
  width:fit-content;
  height:fit-content;
  z-index:3;
  color:white;
}


.datepicker-controls{
  display:flex;
  justify-content: space-between; 
  align-items: center; 
  background:red;
  height:50px;
  width:100%;
  gap:40px;
  background: transparent;
}

.datepicker-controls-block{
  display: flex;  
  align-items: center;       
  justify-content: center; 
  height:100%;
  background: transparent;
  width:350px;
  font-size:24px;
  gap:90px;
}


.datepicker-back {
  display: flex;             
  align-items: center;       
  justify-content: center; 
  font-size:inherit;
  background:transparent;
  cursor:pointer;
  border-radius:15px;
  width:30px;
  height:30px;
  padding:10px;
}

.datepicker-forward {
  display: flex;             
  align-items: center;       
  justify-content: center; 
  font-size:inherit;
  background:transparent;
  cursor:pointer;
  border-radius:15px;
  width:30px;
  height:30px;
  padding:10px;
}

.datepicker-back:hover{
  background:var(--bg-hover3);
}

.datepicker-forward:hover{
  background:var(--bg-hover3);
}

.datepicker-month {
  font-size:inherit;
  background:transparent;
}

.days-block{
  width:100%;
  background: transparent;
  display:flex;
  justify-content: space-between; 
  align-items: center; 
  gap:40px;
  height:250px;
}


.days-block2{
  width: 350px;
  height:100%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap:5px;
  background: transparent;
}


.day, .day-label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  width:34px;
  background: transparent;
  border-radius:17px;
}

.day{
cursor:pointer;
}


.day:hover{
background:var(--bg-hover3);
}

.datepicker-cancel{
  cursor:pointer;
  background:transparent;
  margin-top:20px;
  margin-bottom:20px;
  padding:8px;
  border-radius:20px;
  text-align: center;
}

.datepicker-cancel:hover{
  background:var(--bg-hover3);

}