body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    }      
    /* Container styling */
    .stripe-element-container {
    margin: 0 0 20px 0;
    padding: 10px 14px;
    border: 1px solid #e6ebf1;
    border-radius: 4px;
    background-color: #f5f7f9;
    }

    /* Shared input styles */
    .stripe-element-container .StripeElement {
    box-sizing: border-box;
    height: 40px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 4px;
    background-color: white;
    box-shadow: 0 1px 3px 0 #e6ebf1;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
    }

    .stripe-element-container .StripeElement--focus {
    box-shadow: 0 1px 3px 0 #cfd7df;
    }

    .stripe-element-container .StripeElement--invalid {
    border-color: #fa755a;
    }

    .stripe-element-container .StripeElement--webkit-autofill {
    background-color: #fefde5 !important;
    }

    /* Adjust this to fit your specific needs */
    .stripe-element-container input {
    font-size: 16px !important;
    font-family: 'Helvetica Neue', Helvetica, sans-serif;
    }

    /* Label styling */
    .stripe-element-container label {
    display: block;
    margin-bottom: 8px;
    color: #6b7c93;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    }

    /* Improve spacing around the Stripe elements */
    .stripe-element-container .StripeElement {
    margin-top: 4px;
    margin-bottom: 20px; /* Adjust spacing between elements */
    }

    /* Flex container for Expiry and cvc */
    .expiry-cvc-container {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* Adjust the space between Expiry and cvc */
    }

    /* Specific styling for small elements */
    .small-element {
    width: calc(50% - 10px); /* Adjust width as needed */
    }

    /* Labels and Stripe Elements inside the flex items */
    .expiry-cvc-container div {
    flex: 1;
    }

    /* Adjust label and StripeElement for smaller size */
    .expiry-cvc-container label {
    font-size: 14px; /* Adjust if necessary */
    }

    .expiry-cvc-container .StripeElement {
    padding: 8px 12px; /* Adjust padding for smaller elements */
    }

    /* Button styling */
    #submit {
    display: block;
    width: fit-content;
    padding: 12px 48px;
    margin-left: auto; /* Aligns the button to the right */
    background-color: #556cd6; /* Stripe-like blue */
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
    }

    #submit:hover {
    background-color: #4453a4; /* Darker blue on hover */
    }

    .spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spinner 1.2s linear infinite;
    }

    @keyframes spinner {
    to {transform: rotate(360deg);}
    }

    /* Hide elements with the class 'hidden' */
    .hidden {
    display: none;
    }

    .expiry-cvc-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Align items to the bottom */
    }

    .StripeElement.small-element {
    min-width: 100px; /* Set minimum width */
    }

    #submit {
    align-self: flex-end; /* Align button to the bottom */
    margin-left: auto; /* Push button to the right */
    margin-bottom:20px;
    }

    td a {
      display: block; /* Makes the link fill the cell */
      height: 100%;
      width: 100%;
      color: inherit; /* Inherits text color from the parent */
      text-decoration: none; /* Removes underline from links */
  }

  .plus, .minus {
    font-size: 18px;  /* Large font size for visibility */
    line-height: 0.6; /* Aligns the text vertically */
    font-weight: bold; /* Makes the sign bold */
    text-align: center; /* Center-aligns the text */
  }    
  
    table {
          width: 100%;
          border-collapse: collapse;
      }
      th, td {
          border: 1px solid black;
          padding: 8px;
          text-align: center;
      }
      th {
          background-color: #f2f2f2;
      }
      .empty {
          background-color: #e9e9e9;
      }

      .key-title {
        position: absolute; /* Position absolutely to place it on the border */
        top: -15px; /* Adjust this value to position the title as needed */
        left: 10px; /* Horizontal position inside the key */
        background: white; /* Background color to overlap the border */
        padding: 0 5px; /* Padding around the text */
    }
      .calendar-key {
        display: flex;
        flex-wrap: wrap; /* Allow items to wrap onto the next line */
        align-items: center;
        justify-content: start;
        gap: 12px; /* Space between key items */
        position: relative;          
      }
      .key-item {
          display: flex;
          align-items: center;
      }

      .square {
          width: 20px;
          height: 20px;
          margin-right: 10px;
          display: inline-block;
      }

      .available {
          border:2px solid #00FF00;
      }

      .unavailable {
          background-color: #e9e9e9; /* Light grey */
      }

      .all-day {
          background-color: #b8d8ba;
      }

      .morn-aft {
          background: linear-gradient(
              to bottom,
              #b8d8ba 33%,
              #b8d8ba 33% 67%,
              #e9e9e9 67%
          );
      }

      .morn-eve {
          background: linear-gradient(
              to bottom,
              #b8d8ba 33%,
              #e9e9e9 33% 67%,
              #b8d8ba 67%
          );
      }
      
      .aft-eve {
          background: linear-gradient(
              to bottom,
              #e9e9e9 33%,
              #b8d8ba 33% 67%,
              #b8d8ba 67%
          );
      }

      .morn {
          background: linear-gradient(
              to bottom,
              #b8d8ba 33%,
              #e9e9e9 33% 67%,
              #e9e9e9 67%
          );
      }

      .aft {
          background: linear-gradient(
              to bottom,
              #e9e9e9 33%,
              #b8d8ba 33% 67%,
              #e9e9e9 67%
          );
      }           

      .eve {
          background: linear-gradient(
              to bottom,
              #e9e9e9 33%,
              #e9e9e9 33% 67%,
              #b8d8ba 67%
          );
      }      
      
      
      #results h2 {
        font-size: 1.2em;
      }

      .treatment {
        text-decoration: none;
      }
      .box-parent {
        display: flex !important;
        gap: 10px;
      }
      .box-2 {
        align-self: flex-end; 
        flex-basis:0 !important;
        flex-grow:0 !important;
      }
      .box-1 {
        flex-basis:0 !important;
        flex-grow:1 !important;
      }
      body #my-indicator {
        display: none;
        width: 30px;
        height: 30px;
        float: right;
        margin-top: 15px;
        margin-right: 15px; }
      body .htmx-request #my-indicator {
        display: inline; }
      body .htmx-request#my-indicator {
        display: inline; }