input[type="date"] {
  /* Применение пользовательского фона */
  background-color: #fafafa;
  color: #ff9966;
  font-family: Arial, sans-serif;
  border: 1px solid #ccc;
  padding: 3px;
  border-radius: 4px;
  outline: none;
  border: 1px solid #aaa;
}

/* Изменение стиля селектора на кнопку */
input[type="date"]::-webkit-calendar-picker-indicator {
  
/* Добавление своего стиля для кнопки */
  color: #fff;
  padding: 3px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #aaa;
  background-color: #ff9966;
  
}

/* Настройка псевдоэлемента для заполненной даты */
input[type="date"]::-webkit-datetime-edit-day-field:valid,
input[type="date"]::-webkit-datetime-edit-month-field:valid,
input[type="date"]::-webkit-datetime-edit-year-field:valid {
  /* Применение стилей для заполненной даты */
  color: #fff;
  background-color: #ff9966;
}
        
input[type="time"] {
  /* Применение пользовательского фона */
  background-color: #fafafa;
  width: 45px;
  color: #ff9966;
  font-family: Arial, sans-serif;
  border: 1px solid #ccc;
  padding: 3px;
  border-radius: 4px;
  outline: none;
  border: 1px solid #aaa;
}

/* Изменение стиля селектора на кнопку */
input[type="time"]::-webkit-calendar-picker-indicator {
  
/* Добавление своего стиля для кнопки */
  background-color: #ff9966;
  color: #fff;
  padding: 3px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #aaa;
}    
 
 
 /* Убираем стандартную пиктограмму календаря для Chrome и Firefox */
    input[type="date"]::-webkit-calendar-picker-indicator {
      display: none;
    }
    input[type="date"] {
      -moz-appearance: textfield;
      position: relative;
    }                      

/* Показать стандартную пиктограмму календаря для Chrome и Firefox */
input[name="LoadDate2"]::-webkit-calendar-picker-indicator {
    display: block; /* Отображаем стандартный индикатор календаря */
}

/* Убираем изменение внешнего вида для Firefox */
input[name="LoadDate"] {
    -moz-appearance: auto; /* Восстанавливаем стандартный стиль для Firefox */
}    
    
#date-widget {
        display: none; /* Initially hidden */
        position: absolute;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        z-index: 1000; /* Ensure it's on top */
        padding: 5px;
        font-family: sans-serif;
        user-select: none;
        flex-direction: row; /* Calendars side by side */
    }    
    
#single-date-widget {
        display: none; /* Initially hidden */
        position: absolute;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        z-index: 1000; /* Ensure it's on top */
        padding: 5px;
        font-family: sans-serif;
        user-select: none;
}
  

    .calendar {
         display: flex; /* Включаем Flexbox для calendar */
         flex-direction: column; /* Расположение элементов внутри calendar в колонку */
         border-radius: 2px;
         background-color: #fff;
         padding: inherit;
        
    }

    .calendar .right {
        border-right: none; /* No separator on the right calendar */
        padding-right: 0;
        padding-left: 10px;
    }

    .calendar .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 5px;
        position: relative; /*  ВАЖНО!  Относительное позиционирование для header */
    }

    .calendar .month-year {
        font-weight: bold;
        font-size: 1.1em;
        text-align: center;
    }

    .calendar .month-year span {
        display: inline-block;
        padding: 0 5px; /* Add padding to month and year spans */
    }

    .calendar .prev-month,
    .calendar .next-month {
        cursor: pointer;
        font-size: 1.2em;
        padding: 0 5px;
    }

    .calendar .body {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    .calendar .week-days,
    .calendar .dates-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr); /* 7 days a week */
        gap: 2px;
    }

    .calendar .week-days {
        margin-bottom: 3px;
    }

    .calendar .week-days div {
        text-align: center;
        font-size: 0.9em;
        color: #777;
    }

    .calendar .dates-grid .date {
        text-align: center;
        padding: 5px;
        cursor: pointer;
        border-radius: 3px;
    }

    .calendar .dates-grid .date.blank {
        cursor: default;
        background: none;
    }

    .calendar .dates-grid .date:not(.blank):hover {
        background: #eee;
    }

    .calendar .dates-grid .date.selected {
        background: #3498db;
        color: white;
    }

    .calendar .dates-grid .date.in-range {
        background: #e0f7fa; /* Light blue for in-range dates */
    }

    .calendar .dates-grid .date.disabled {
        color: #ccc;
        cursor: default;
    }
    .calendar .dates-grid .date.disabled:hover {
        background: none; /* No hover effect for disabled dates */
    }

.calendar .footer {
  display: flex; /* Включаем Flexbox для calendar */
  justify-content: space-around; /* Равномерное распределение кнопок по ширине */
  align-items: center; /* Выравнивание кнопок по вертикали по центру (опционально) */
  padding: 5px; /* Можно добавить отступы, если нужно */
}

.calendar .footer button {
  /* Стили кнопок остаются прежними, или можно немного изменить отступы, если нужно */
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f0f0f0;
  cursor: pointer;
  font-size: 14px;
}
    .reset-date {
       
        padding: 1px 5px;
        border: none;
        border-radius: 5px;
        background-color: #f44336; /* Red color for reset button */
        color: white;
        cursor: pointer;
        font-size: 1em;
        align-self: center; /* Center the button */
    }

    .reset-date:hover {
        background-color: #d32f2f; /* Darker red on hover */
    }

    .month-dropdown {
        position: absolute; /* Абсолютное позиционирование */
        top: 100%;       /* Размещаем под header */
        left: 0px;        /* Выравниваем по левому краю header */
        background: #fff;
        border: 1px solid #ccc;
        z-index: 1002;
        padding: 5px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }

    .month-dropdown {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 columns for months */
        gap: 5px;
    }

    .month-item,
    .year-item {
        cursor: pointer;
        text-align: center;
        padding: 5px;
        border-radius: 3px;
    }

    .month-item:hover,
    .year-item:hover {
        background: #eee;
    }

    .year-dropdown {
        display: flex;
        flex-direction: column; /* Vertical list for years */
        gap: 2px;
        position: absolute; /* Абсолютное позиционирование */
        top: 100%;       /* Размещаем под header */
        left: 50%;        /* Выравниваем по левому краю header */
        background: #fff;
        border: 1px solid #ccc;
        z-index: 1002;
        padding: 5px;
  		max-height: 350px; /*  Ограничение высоты, чтобы показать ~9 строк */
  		overflow-y: scroll; /* Вертикальная прокрутка */
  		
  		box-sizing: border-box; /*  Чтобы padding и border не увеличивали ширину */
	}

	.scroll-arrow {
  		position: absolute;
  		width: 50%;
  		text-align: center;
  		padding: 2px 0;
  		background-color: rgba(255, 255, 255, 0.7); /* Полупрозрачный фон */
  		cursor: pointer;
  		font-size: small; /*  Настройте размер стрелок */
	}

	.scroll-arrow.up {
  		top: 0;
	}

	.scroll-arrow.down {
  		bottom: 0;
	}                                   



 // ВЫБОР ВРЕМЕНИ   
 
 input[type="time"] {
  appearance: none;
  -webkit-appearance: none; /* Для Safari */
}

input[type="time"]::-webkit-calendar-picker-indicator {
  display: none;
}
	
#time-widget {
  display: none; /* Скрыт по умолчанию */
  position: absolute;
  z-index: 1000; /* Чтобы был поверх других элементов */
  background-color: white;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
  gap: 20px; /*  Расстояние между полосами */
  left: 50%; /*  Центрирование по горизонтали */
  transform: translateX(-50%); /* Центрирование по горизонтали */
}
 
/* Стили для контейнеров часов и минут */
.time-scroll-container {
  display: flex; /*  Включаем flexbox для контейнера */
  flex-direction: column; /*  Располагаем заголовок и полосу прокрутки вертикально */
  align-items: center; /*  Центрируем содержимое по горизонтали в контейнере (заголовок и полосу) */
}
 

/* Стили для заголовков полос прокрутки "Час" и "Мин" */
.time-scroll-title { 
  display: flex;
  flex-direction: row;	
  text-align: center; /* Центрируем текст заголовка */
  font-weight: bold; /* Делаем текст жирным, можно убрать */
  margin-bottom: 5px; /*  Небольшой отступ снизу от заголовка до полосы прокрутки */
  color: #555; /*  Цвет текста заголовка, можно настроить */
}

.hours-title {
  /* Дополнительные стили для заголовка "Час", если нужно */
}

.minutes-title {
  /* Дополнительные стили для заголовка "Мин", если нужно */
}


.time-scroll {
  width: 50px; /*  Ширина полосы прокрутки, настройте */
  height: 128px; /*  Высота полосы прокрутки, настройте */
  border: 1px solid #eee;
  overflow-y: scroll; /*  Включаем вертикальную прокрутку */
  padding: 5px;
  box-sizing: border-box;
}

.scroll-item {
  padding: 5px 10px;
  cursor: pointer;
  user-select: none;
  display: block; /*  Чтобы занимал всю ширину полосы */
}

.scroll-item:hover {
  background-color: #f0f0f0;
}

.hours-scroll .scroll-item {
  /* Стили для элементов часов, если нужно отличить */
  text-align: center; /* Центрируем текст часов */
}

.minutes-scroll .scroll-item {
  /* Стили для элементов минут, если нужно отличить */
  text-align: center; /* Центрируем текст минут */
}

.scroll-item.selected {
  background-color: lightblue; /* Синий цвет выделения, настройте по вкусу */
  color: white; /*  Белый текст для лучшей контрастности на синем фоне */
}