/* Ensure the body and html elements take up the full height of the page */
html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    font-size: 0.96rem;
  }

  /* Make the main content area flexible and fill the available space */
  #content {
    flex: 1;
  }

  .container {
    max-width: 100% !important;
  }

  /* Styling for the footer */
  #footer {
    background-color: lightgrey;
    color: #6c757d !important;
    padding-top: 4rem;
    min-height: 9.7%;
    text-align: center;
    padding-bottom: 1rem; /* Optional: Add padding for some spacing */
  }

  

  .text-muted {
    color: #6c757d !important;
  }
  
  .scale-btn {
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    margin: 0 2px;
    border: 2px solid transparent;
    transition: border-color 0.3s;
  }
  .scale-1 { background-color: #ff4d4d; }
  .scale-2 { background-color: #ff6666; }
  .scale-3 { background-color: #ff9999; }
  .scale-4 { background-color: #ffcc66; }
  .scale-5 { background-color: #b3e6b3; }
  .scale-6 { background-color: #80cc99; }
  .scale-7 { background-color: #4d994d; }
  .selected { border-color: #000; border-width: medium; }

  /* Increase size of radio button */
  .form-check-input {
    transform: scale(1.5); /* Scale the radio button to 1.5 times its original size */
  }

  .table td, .table th {
    vertical-align: middle;
  }

  .header-row{
    vertical-align: bottom !important;
  }

  /* Increase size of the label text */

  /* Add space between radio options */
  .form-check {
    margin-right: 20px; /* Adjust this value to increase or decrease the space between options */
  }

  .select2-results__option:hover {
    background-color: #0074A2 !important;  /* Custom background color */
    color: white; /* Optional: change text color to white for contrast */
  }

  .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #0074A2 !important;
    color: white; /
    }

    .custom-btn {
      background-color: #0074A2; /* Set the background color */
      color: white; /* Set the text color to white for contrast */
      width: 100%; /* Make the button full width */
      text-transform: uppercase; /* Make the text all uppercase */
      padding: 12px; /* Optional: Adjust padding for better appearance */
      font-size: 1rem; /* Optional: Adjust font size */
      font-weight: bold;
      border: none; /* Remove border */
      cursor: pointer; /* Change cursor to pointer */
      transition: background-color 0.3s ease; /* Smooth transition on hover */
    }

    /* Button hover effect */
  .custom-btn:hover {
    background-color: #005f73; /* Darken the background color on hover */
  }

  .logo {
    max-height: 180px; /* Adjust the size of the logo */
    max-width: 100%;
    height: auto;
  }

  .custom-btn-box {
    font-size: 0.90rem;
    font-weight: 600;
    text-transform: uppercase;
    width: 200px; /* Fixed width */
    height: 200px; /* Fixed height for square */
    border: 2px solid #005f73;
    border-radius: 0;
    color: black; /* Set text color to black */
    background-color: transparent;
    padding: 1rem;
    text-align: center; /* Center-align text */
    display: flex; /* Center text vertically */
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s, color 0.3s;
  }
  
  .custom-btn-box:hover {
    background-color: #005f73;
    color: #ffffff; /* White text on hover */
  }

  @media (max-width: 768px) {


    .table tr {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .table th, .table td {
      display: flex;
      width: 100% !important;
      justify-content: center;
    }

  /* Style only the .header-row td */
    .header-row {
      display: block;
      text-align: center;
      width: 100%;
    }

    /* Ensure min and max values align left and right */
    .header-row > div {
      display: flex;
      justify-content: space-between;
      font-size: 0.9em;
      width: 100%;
    }

    .form-check-label {
    font-size: 0.85rem; /* Adjust font size of labels */
    /*font-weight: bold; /* Make the text bold (optional) */
    }

   
  }