/* Style for custom css bootstrap datepicker */
  .custom-font-label {
      font-family: "Times New Roman", Times, serif;
      font-weight: bold;
  }

  .calendar-container {
      width: auto;
  }

  .calendar-spacer {
      display: none;
      /* Initially hidden */
  }

  .calendar-spacer.show {
      display: block;
      height: 200px;
      /* Adjust height to match the dropdown height */
  }

  /*.datepicker.datepicker-dropdown.dropdown-menu.datepicker-orient-left.datepicker-orient-bottom {*/
  .datepicker.datepicker-dropdown.dropdown-menu {
      /*position: absolute;
    top: 568.219px !important;
    margin-top: 12px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
    /*left: 740px ;*/
      background-color: white;
      box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
      padding: 4px;
      min-width: 0px;
      width: 250px;
      position: absolute;
      height: 250px;
  }

  .date-picker-container {
      display: flex;
      /* justify-content: center; */
      /* align-items: center; */
      gap: 17px;
      /* margin-right: 55%; */
      margin-left: 56%;
      margin-top: 0.4%;
  }

  .date-picker-container-1 {
      position: relative;
      top: 0px !important;
      /* width: 30%; */
      height: 50%;
      display: block;
  }

  .date-picker-container-2 {
      position: relative;
      top: 0px !important;
      /* width: 30%; */
      height: 50%;
      display: block;
  }

  /* This section controls calendar widget popup */
  .table-condensed {
      /*width: 30%;  Set table width */
      /* Removes roundness of calendar
    border-collapse: collapse;  Collapses borders between table cells */
      background-color: rgb(255, 255, 255);
      /* Use background color variable */
      color: #111111;
      /*Text color */
      /*border-radius: 10px;  Rounded corners for the cells */
      margin-left: auto;
      margin-right: auto;
      cursor: pointer;
      /*border: 2px solid rgb(150,184,216);*/
  }

  .table-condensed th,
  .table-condensed td {
      padding: 2px;
      /*More padding within each date cell */
      /* Increase the size of text inside the calendar */
      font-size: 17px;
      border: 1px solid transparent;
      /* Border color for cells */
      /*border-radius: 4px;  Rounded corners for the cells */
      text-align: center;
      /* Center alignment of text in cells */
  }


  .datepicker table.table-condensed span {
      display: inline-block;
      width: 30%;
      border: 1px solid #ddd;
      /* Border color for cells */
      border-radius: 10px;
      /* Rounded corners for the cells */
      margin: 1px;
      padding: 10px;
  }


  .datepicker .table-condensed th:hover,
  /*.datepicker .table-condensed td:hover,*/
  .datepicker .table-condensed td.day:hover,
  .datepicker .table-condensed td span:hover {
      background-color: rgb(231, 242, 250);
      /* Highlight on hover */
  }

  /*Disable Week to be selected */
  .datepicker .table-condensed th.dow:hover {
      background-color: transparent;
      /* No change on hover */
      cursor: default;
  }

  .date-picker-container-1>.datepicker table tr td.active.active,
  .date-picker-container-1>.datepicker table tr td.active.disabled.active,
  .date-picker-container-1>.datepicker table tr td.active.disabled:active,
  .date-picker-container-1>.datepicker table tr td.active.disabled:hover.active,
  .date-picker-container-1>.datepicker table tr td.active.disabled:hover:active,
  .datepicker table tr td.active:active,
  .date-picker-container-1>.datepicker table tr td.active:hover.active,
  .date-picker-container-1>.datepicker table tr td.active:hover:active {
      background-color: #AAD9EE;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
  }

  .date-picker-container-2>.datepicker table tr td.active.active,
  .date-picker-container-2>.datepicker table tr td.active.disabled.active,
  .date-picker-container-2>.datepicker table tr td.active.disabled:active,
  .date-picker-container-1>.datepicker table tr td.active.disabled:hover.active,
  .date-picker-container-2>.datepicker table tr td.active.disabled:hover:active,
  .datepicker table tr td.active:active,
  .date-picker-container-2>.datepicker table tr td.active:hover.active,
  .date-picker-container-2>.datepicker table tr td.active:hover:active {
      background-color: #AAD9EE;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
  }

  /* 
  Change Background color of disabled options and they're hover options 
  Note: Fix option of not being able to choose decade 
  */
  .table-condensed td.disabled.day,
  .table-condensed span.month.disabled,
  .table-condensed span.year.disabled,
  .table-condensed span.decade.disabled,
  .table-condensed td.disabled.day:hover,
  .table-condensed span.month.disabled:hover,
  .table-condensed span.year.disabled:hover,
  .table-condensed span.decade.disabled:hover {
      color: #ddd;
      cursor: default;
      background-color: transparent;
  }


  .highlight-range {
      background-color: #AAD9EE;
      /* Gold background for highlighted range */
  }

  .highlight-selected-date {
      background-color: #AAD9EE;
  }


  /* Logic to make disabled date appear as regular */
  .date-picker-container-1 td.day.disabled.highlight-selected-date,
  .date-picker-container-1 td.day.disabled.highlight-selected-date:hover {
      background-color: #AAD9EE;
      cursor: default;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      color: black;
  }

  .date-picker-container-2 td.day.disabled.highlight-selected-date,
  .date-picker-container-2 td.day.disabled.highlight-selected-date:hover {
      background-color: #AAD9EE;
      cursor: default;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      color: black;
  }


  #closeDatePicker {
      width: 30%;
      /* Set table width */
      /* Removes roundness of calendar
    border-collapse: collapse;  Collapses borders between table cells */
      background-color: rgb(255, 255, 255);
      /* Use background color variable */
      color: #111111;
      /*Text color */
      border-radius: 10px;
      /* Rounded corners for the cells */
      margin-left: auto;
      margin-right: auto;
      cursor: pointer;
      border: 2px solid rgb(150, 184, 216);
  }

  #clearCalendar,
  #clearCalendarCarrington {
      width: 15%;
      background-color: rgb(255, 255, 255);
      color: #111111;
      border-radius: 10px;
      margin-top: 6px;
      margin-right: 10px;
      cursor: pointer;
      border: 2px solid rgb(150, 184, 216);
      right: 0;
      top: 0;
      padding: 9px;
      position: absolute;
  }

  #clearCalendar:hover,
  #clearCalendarCarrington:hover {
      background-color: #AAD9EE;
  }

  .date-inputs {
      display: flex;
      justify-content: space-between;
  }

  .date-inputs .form-group {
      flex: 1;
      margin-right: 10px;
  }

  .date-inputs .form-group:last-child {
      margin-right: 0;
  }

  .datepicker {
      z-index: 10000 !important;
  }

  .form-container {
      display: flex;
      align-items: center;
  }

  .form-container .calendar-container {
      display: inline-block;
      margin-left: 10px;
      margin-right: 10px;
  }

  .form-container input[type="submit"] {
      margin-left: 10px;
  }

  .dropdown {
      font-family: "Times New Roman", Times, serif;
  }

  .dropdown-menu,
  .dropdown-menu-carrington {
      display: none;
      padding: 10px;
      z-index: 1;
      min-width: 300px;
      border-radius: 10px;
      border: 2px solid rgb(150, 184, 216);
  }

  .calendar-icon {
      font-size: 1em;
      /* Adjust the size as needed */
  }

  .dropdown-menu.show {
      display: block;
      right: 7px;
      position: absolute;
      left: 490px;
      background-color: aliceblue;
      width: 550px;
      height: 400px;
  }

  .dropdown-menu-carrington.show {
      display: block;
      right: 7px;
      position: absolute;
      left: 490px;
      background-color: aliceblue;
      width: 550px;
      height: 400px;
  }

  .form-group {
      /*margin-bottom: 12px;*/
      display: flex;
      flex-direction: column;
      align-items: flex-start;
  }

  .form-control {
      width: 100%;
      padding: 8px;
      box-sizing: border-box;
      text-align: center;
  }

  .btn {
      padding: 8px 12px;
      cursor: pointer;
      border-radius: 10px;
      /*border: 2px solid rgb(150, 184, 216);*/
      background-color: transparent;
  }

  .btn:hover {
      background-color: #e1e4e6;
  }

  .opened-calendar {
      background-color: #e1e4e6;
  }

  .btn:focus {
      outline: none;
  }

  .date-inputs {
      display: flex;
      justify-content: space-between;
  }

  .date-inputs .form-group {
      flex: 1;
      margin-right: 10px;
  }

  .date-inputs .form-group:last-child {
      margin-right: 0;
  }

  /*.carrington-date::before {
        content: "*";
        display: inline-block;
        color: #ff0000;
    }*/

  .carrington-date {
      color: #0050d8 !important;
  }

  .carrington-list {
    text-align: center;
    position: absolute;
    font-size: 0.875rem;
    top: 250px;
    width: 17pc;
  }

  /*Mangaing sorting list icons*/

  .sortable th {
      cursor: pointer;
  }

  .sortable th.asc::after {
      content: ' \25B2';
      /* Up arrow */
  }

  .sortable th.desc::after {
      content: ' \25BC';
      /* Down arrow */
  }

  .cancel-text-search-btn,
  .cancel-date-search-btn {
      background-color: red;
      color: white;
      border: none;
      padding: 2.5px 5px;
      cursor: pointer;
      font-weight: bold;
      border-radius: 4px;
  }

  .text-search-cancel,
  .date-search-cancel {
      padding: 5px
  }