/* Date Picker Navigation */
.datepick-nav {
  display: flex;
  align-items: center;
  margin: 2rem 0;
}
.datepick-nav .device-maker__list {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-right: auto;
}
.datepick-nav .device-maker__list li {
  display: flex;
  align-items: center;
  margin-right: 1rem;
  font-size: 2rem;
  font-family: var(--font-num-700);
}
.datepick-nav .device-maker__list li:before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background-color: #eee;
}
.datepick-nav .device-maker__list li:nth-child(1):before {
  background-color: #f1de38;
}
.datepick-nav .device-maker__list li:nth-child(2):before {
  background-color: #8878ee;
}
.datepick-nav .device-maker__list li:nth-child(3) {
  margin-right: 0;
}
.datepick-nav .device-maker__list li:nth-child(3):before {
  background-color: #888888;
}
.datepick-nav .button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background-color: var(gray-100);
}
.datepick-nav .button.datepick-disabled img {
  opacity: 0.3;
}
.datepick-nav .button:nth-last-child(2) {
  margin-right: 0.5rem;
}
.datepick-nav .button:nth-last-child(2) img {
  transform: rotate(180deg);
}
.datepick-nav .button img {
  display: block;
  width: 2rem;
}
.datepick-nav .button:hover{
	background-color:var(--gray-100);
}

.datepick-week {
	display:flex;
	padding:1rem 0;
	border-block:2px solid #ccc;
	span{
		flex:1;
		display:flex;
		align-items:center;
		justify-content:center;
		font-size:1.8rem;
		font-family:var(--font-700);
	}
}


/* Date Picker Month Row */
.datepick-month-row {
  /* Table styling */
}
.datepick-month-row table {
  width: 100%;
  margin-top: 0;
}
.datepick-month-row table th, .datepick-month-row table td {
  color: #000;
  font-size: 1.8rem;
  background-color: #fff;
  border: none;
  /* Font size adjustment for smaller screens */
}
.datepick-month-row table th {
  padding: 1.5rem;
  font-family: var(--font-700);
  border-bottom: 2px solid #BFBFBF;
}
.datepick-month-row table td {
  padding: 0;
  font-family: var(--font-700);
  vertical-align: top;
}
.datepick-month-row table td.datepick-calendarTitle {
  padding: 2.5rem 0 2.5rem 1.5rem;
  font-size: 2rem;
}
.datepick-month-row table td span {
  display: block;
  position: relative;
  padding-bottom: 100%;
  /* Style for disabled days */
}
.datepick-month-row table td span.showDoY > div {
  opacity: 0.3;
}
.datepick-month-row table td span.showDoY > div:before{
		content:"";
		display:block;
		position:absolute;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
		width:1.5rem;
		height:2px;
		background-color:#000;
}
.datepick-month-row table td span.showDoY > div:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 0.3rem;
  background-color: #000;
  opacity: 0.3;
}
.datepick-month-row table td a {
  display: block;
  position: relative;
  padding-bottom: 100%;
  /* Style for selected days */
}
.datepick-month-row table td a div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.datepick-month-row table td a.day-from:before, .datepick-month-row table td a.day-end:before {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 90%;
  border-radius: 50%;
  border:2px solid var(--blue);
	background-color:#fff;
}
.datepick-month-row table td a.day-from {
  border-radius: 5rem 0 0 5rem;
}
.datepick-month-row table td a.day-end {
  border-radius: 0 5rem 5rem 0;
}
.datepick-month-row table td a.datepick-selected {
  background-color: #ECEDFF;
}
.datepick-month-row table td div {
  display: flex;
	flex-direction:column;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}
.datepick-month-row table td .device-dot-list{
	display:none;
}
.datepick-month-row table td a .device-dot-list{
		display:flex;
		margin-top:0.5rem;
}
.datepick-month-row table td a .device-dot-list li{
	width:0.6rem;
	height:0.6rem;
	border-radius:50%;
	margin-top:0;
	margin-right:0.5rem;
}
.datepick-month-row table td .device-dot-list li:nth-child(1){background-color:#f1de38;}
.datepick-month-row table td .device-dot-list li:nth-child(2){background-color:#8878ee;}
.datepick-month-row table td .device-dot-list li:nth-child(3){background-color:#888;}
.datepick-month-row table td .device-dot-list li:last-of-type{
	margin-right:0;
}
.datepick-month-row table td .device-dot-list li:before{
	content:"";
	display:none;
}
/* Disabled state styling */
.datepick-disabled {
  margin-top: 0;
  background-color: #ededed;
  /* Hover effect for disabled state */
  /* Active state styling */
}
@media (hover: hover) {
  .datepick-disabled:hover {
    color: #666;
    background-color: #ededed;
  }
}
.datepick-disabled._active {
  color: #fff;
  background-color: var(--blue);
  /* Hover effect for active state */
}
@media (hover: hover) {
  .datepick-disabled._active:hover {
    color: #fff;
    background-color: var(--blue);
  }
}


@media screen and (max-width:375.9px) {
    .datepick-nav .device-maker__list li{
        font-size:1.3rem;
    }
    .datepick-month-row table td.datepick-calendarTitle,
    .datepick-month-row table th, .datepick-month-row table td {
        font-size: 1.3rem;
    }
    .datepick-month-row table td a .device-dot-list li{
        width:0.3rem;
        height:0.3rem;
    }

}
/*# sourceMappingURL=datepick.css.map */