/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

/* Custom Survey Grid Layout */
.survey-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 30px;
}

.survey-card {
    background-color: rgba(255, 255, 255, 0.9); /* Light and transparent background */
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.survey-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.survey-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

.survey-content {
    padding: 20px;
}

.survey-content h3 {
    margin: 0 0 10px;
    font-size: 1em;
    color: #333;
}

.survey-content p {
    margin: 0;
    font-size: 1em;
    color: #666;
}
.survey-card:hover {
    background-color: rgba(255, 255, 255, 1); /* Slightly less transparent on hover */
    border-color: #299d48; /* Change border color on hover */
}

/* Style the Sign In link */
.navbar .sign-in-link {
    color: #007bff; /* Bootstrap primary color */
    text-decoration: none; /* Remove underline */
    font-weight: 500; /* Slightly bold */
    padding: 8px 12px; /* Add some padding */
    border-radius: 4px; /* Rounded corners */
    transition: all 0.3s ease; /* Smooth hover effect */
}

.navbar .sign-in-link:hover {
    color: #0056b3; /* Darker shade on hover */
    text-decoration: none; /* Ensure no underline on hover */
}

.surveylist-title {
    padding-left: 30px;
    font-weight: bold;
}


/* Set light gray background for the entire page */
body {
    background-color: #f8f9fa; /* Light gray background */
}