body{
    margin-top: 10px;
    font-family: 'Oswald';
    /* The image used */
    background-image: url("../assets/background1.jpeg");
    /* Full height */
    height: 100vh; /* Use viewport height to ensure it covers the entire viewport */
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: repeat; /* This ensures your background image doesn't repeat */
    background-size: cover;
  
  }

  p, h2 {
    color:white;
  }

  #goalInfo p {
    color: black;
}


.container {
    max-width: 650px;
    
}
.card {
    margin-top: 10px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.healthy {
    background-color: #DFF2BF; /* Green */
}
.unhealthy {
    background-color: #FFD1D1; /* Red */
}
#weightChart {
    vertical-align: middle;
    width: 100%;
    margin: 0 auto;
    position: relative;
    display: inline-block;
}

/* Base Styles */
.responsive-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.responsive-table thead {
    background-color: #f5f5f5;
}

.responsive-table th, 
.responsive-table td {
    padding: 10px 15px;
    border: 1px solid #ddd;
    text-align: left;
}

.responsive-table tr:hover {
    background-color: #f7f7f7;
}

.btn {
    padding: 5px 10px;
    margin: 0 5px;
}

/* Mobile Styles */
@media (max-width: 600px) {
    .responsive-table thead {
        display: none; /* hide headers on small screens */
    }
    
    .responsive-table, 
    .responsive-table tbody, 
    .responsive-table tr, 
    .responsive-table td {
        display: block; 
        margin-bottom: 20px; /* adjust this value as needed */
    }

    .responsive-table td {
        border: none;
        border-bottom: 1px solid #ddd;
        position: relative;
        padding-left: 55%; /* reserve left space for data title */
    }

    .responsive-table td:before {
        content: attr(data-title);
        position: absolute;
        top: 10px;
        left: 10px;
        font-weight: bold;
        width: 20%; /* width of the title */
        white-space: nowrap; /* prevent line breaks */
    }
}

/* Desktop and Tablet Styles */
@media (min-width: 601px) {
    .responsive-table tr:hover td {
        background-color: #f7f7f7;
    }
}

input, select {
    width: 135px !important;
}

input[type="checkbox"] {
    width: 30px !important;
    vertical-align: middle; /* This might help align the checkbox with adjacent text or elements */
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.5); /* Semi-transparent background */
    z-index: 9999; /* Ensure it's on top of everything else */
}

.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#goalDetails {
    margin-top: 0%;
}