/* Custom CSS for header */
    .header {
        background-image: url('../images/bg.jpg');
        background-size: cover;
        background-position: center;
        color: black;
        padding: 40px 0;
        text-shadow:1px 1px 10px #ffffff, 1px 1px 10px #ccc;
        font-size:48px;
    }
    .header .logo {
        height: 50px; /* Adjust height as needed */
    }
          /* Custom CSS for the button */
    .black-border-btn {
        background-color: #ffffff;
        border: 2px solid #000000; /* Black border */
    }

      
      
      /** Custom CSS for datepicker **/
      
    .datepicker-inline { width: 350px;  }

    .datepicker td,th{
        text-align: center;
        padding: 8px 12px;
        font-size: 14px;
    }

    .datepicker table { border-collapse: separate; border-spacing: 1px; }

    .datepicker td { border-radius: 0; border: 1px solid rgba(0,0,0,.1); width: 46px; height: 46px; border-radius: 2px; }

    td.reserved-full {
        border: 1px solid rgb(0, 0, 0);
        background-color: #ff0000;
        width: 40px; /* Adjust width as needed */
        height: 40px; /* Make it a square */
      }
    
    td.day.reserved-part, td.day.reserved-part.hover{
        border: 1px solid rgb(0, 0, 0);
        background-image: linear-gradient(225deg, red, red 10px, transparent 10px, transparent);
        width: 40px; /* Adjust width as needed */
        height: 40px; /* Make it a square */
      }

    td.fullday {
        border: 1px solid rgb(0, 0, 0);
        background-color: #ff0000;
        width: 40px; /* Adjust width as needed */
        height: 40px; /* Make it a square */
        pointer-events: none;             /* Prevents clicking */
        cursor: not-allowed;
      }

      td.non-bookable {
        border: 1px solid rgb(0, 0, 0);
        width: 40px; /* Adjust width as needed */
        height: 40px; /* Make it a square */
        pointer-events: none;             /* Prevents clicking */
        cursor: not-allowed;
        background-image: linear-gradient(135deg, red 10%, transparent 10%, transparent 20%, red 20%, red 30%, transparent 30%, transparent 40%, red 40%, red 50%, transparent 50%, transparent 60%, red 60%, red 70%, transparent 70%, transparent 80%, red 80%, red 90%, transparent 90%);    }

    td.fullday:hover {
        border: 1px solid rgb(0, 0, 0);
        background-color: #ff0000;
        width: 40px; /* Adjust width as needed */
        height: 40px; /* Make it a square */
        pointer-events: none;             /* Prevents clicking */
        cursor: not-allowed;
      }

      td.partday {
        border: 1px solid rgb(0, 0, 0);
        background-image: linear-gradient(225deg, red, red 10px, transparent 10px, transparent);
        width: 40px; /* Adjust width as needed */
        height: 40px; /* Make it a square */
      } 
      
      td.partday:hover {
        border: 1px solid rgb(0, 0, 0);
        background-image: linear-gradient(225deg, red, red 10px, transparent 10px, transparent);
        width: 40px; /* Adjust width as needed */
        height: 40px; /* Make it a square */
      }

      /******************************/

      td.ux-non-bookable {
        border: 1px solid rgb(0, 0, 0);
        width: 20px; /* Adjust width as needed */
        height: 20px; /* Make it a square */
        pointer-events: none;             /* Prevents clicking */
        cursor: not-allowed;
        background-image: linear-gradient(135deg, red 10%, transparent 10%, transparent 20%, red 20%, red 30%, transparent 30%, transparent 40%, red 40%, red 50%, transparent 50%, transparent 60%, red 60%, red 70%, transparent 70%, transparent 80%, red 80%, red 90%, transparent 90%);    }

        td.ux-partday {
            border: 1px solid rgb(0, 0, 0);
            background-image: linear-gradient(225deg, red, red 10px, transparent 10px, transparent);
            width: 20px; /* Adjust width as needed */
            height: 20px; /* Make it a square */
        } 

        td.ux-fullday {
            border: 1px solid rgb(0, 0, 0);
            background-color: #ff0000;
            width: 20px; /* Adjust width as needed */
            height: 20px; /* Make it a square */
            pointer-events: none;             /* Prevents clicking */
            cursor: not-allowed;
        }