body, html {
    font-family: Helvetica, Arial, sans-serif;
}

body {
    /*max-width: 800px;*/
    /* margin: 2rem auto; */
    margin-top: 0;
    padding: 0;
}

a {
    cursor: pointer;
    text-decoration: none;
    color: #69aa1b;
}

label {
    cursor: pointer;
}

h3 {
/*    margin: 2rem 0 1rem 0; */
/*    text-align: center; */
}

main {
    margin-bottom: 4rem;
}

main input,
main textarea {
    width: 100%;
}

button {
    background-color: #EEE;
    border: 0;
    border-radius: .5rem;
    box-sizing: border-box;
    color: #111827;
    font-weight: 600;
    line-height: 1.25rem;
    padding: .5rem 1rem;
    text-align: center;
    text-decoration: none #D1D5DB solid;
    text-decoration-thickness: auto;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

/*.btn.btn-danger {*/
/*    background-color: #6EB257;*/
/*}*/
.btn.btn-default {
    background-color: #21897E;
    border: 0px;
    color: white;
}
.btn.btn-default:active {
    color: white;
}
.btn.btn-secondary {
    background-color: #3BA99C;
    border: 0px;
    color: white;
}
.btn.btn-secondary:active {
    background-color: #0f423c;
    color: white;
}
.btn.btn-primary {
    background-color: #21897E;
    border: 0px;
}
.btn.btn-primary:active {
    background-color: #0f423c;
}

button:hover {
    background-color: #DDD;
}

button:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/* 1) Inactive AND/OR pills */
.query-builder .btn.btn-primary {
  /* Bootstrap 3 defaults: */
  background-color: #337ab7;
  border: 1px solid #2e6da4;
  color: white;
}

/* 2) Active pill (label.btn-sm.btn-primary.active) */
.query-builder label.btn.btn-sm.btn-primary.active {
  background-color: #286090;
  border-color:    #204d74;
  color:            white;
}


.custom-modal-width {
    max-width: 80%; /* Adjust the width as needed */
}

td[data-rating="1"] {
    background-color: lightgray;
    border-radius: 10px;
}

td[data-rating="2"] {
    background-color: lightblue;
    border-radius: 10px;
}

td[data-rating="3"] {
    background-color: lightyellow;
    border-radius: 10px;
}

td[data-rating="4"] {
    background-color: #f8c471;
    border-radius: 10px;
}

td[data-rating="5"] {
    background-color: lightgreen;
    border-radius: 10px;
}

/* Styling the container around the select boxes */
.select-container {

    border-radius: 10px; /* Rounded corners */
    padding: 20px; /* Padding inside the box */
    background-color: #f5f5f5; /* Light gray background */
    /* max-width: 300px;           Optional max width */
    margin: 20px auto; /* Center the box with margin */

}

.bold-darkgray {
    font-weight: bold;
    color: #454545 !important;
}

.navbar {
    /* border-radius: 10px; */
    margin-top: 0;
}

.navbar-brand img {
    height: 60px; /* Adjust the logo height  */
    width: auto; /* Maintain aspect ratio  */
}

.form-wrapper {
    max-width: 800px; /* Set the desired width */
    margin: 0 auto; /* Center the form */
}

footer {
    /* background-color: #CFD7C7; */
    padding: 10px; /* Optional: Add padding for better spacing */
}