/******************
    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
*/

:root {
    --pcol: #0B7F86;
    --phalf: rgba(11, 127, 134, .5);
    --slate: #f1f5f9;
}

.bg-primary {
    color: var(--pcol);
    background: none !important;
}

.btn-primary {
    transition: all .2s ease-in-out;
    color: #fff;
    background-color: var(--pcol);
    border-color: var(--pcol);
}

.btn-primary:hover, .btn-primary:active {
    color: var(--pcol);
    background-color: var(--phalf);
}

.question-container {
    border-radius: 10px;
    border: none;
    box-shadow: rgba(11, 127, 134, .8) 2px 2px 8px 0px;
    overflow: hidden;
    padding: 1rem;
}

.answer-container {
    border: none;
}

.alert-warning {
    background-color: var(--pcol);
}

.progress-bar {
    background-color: var(--pcol);
}

.flatly label::after {
    background-color: var(--pcol);
}

.dropdown-menu .bg-warning {
    background-color: var(--phalf) !important;
}

.dropdown-item.disabled, .dropdown-item:disabled {
    color: var(--pcol);
}

.flatly .dropdown-item:focus, .flatly .dropdown-item:hover {
    background-color: var(--pcol);
}

.text-info {
    color: var(--phalf) !important;
}

#surveys-list-jumbotron {
    display: none;
}

#surveys-list-container {
    padding: 2rem 1rem;
}

#surveyListFooter {
    display: none;
}

.surveys-list-container {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    border-radius: 10px;
    background-color: var(--slate);
    max-width: 900px;
    margin: 0 auto;
}

.surveys-list-container ul {
    display: grid; /* Use CSS Grid */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Responsive columns */
    gap: 20px; /* Space between grid items */
    padding: 20px; /* Padding around the grid */
    margin: 2rem 0;
}

.surveys-list-container ul li a {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.surveys-list {
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    list-style: none; /* Remove bullet points */
}

.btn-group {
    display: flex; /* Flexbox for centering */
    justify-content: center; /* Center the button */
}

.surveytitle {
    text-align: center; /* Center text inside the button */
    font-size: 1.2rem; /* Increase font size for better readability */
    padding: 15px; /* Add padding for a better button size */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
    width: 100%; /* Make button take full width of the grid item */
    transition: all .2s ease-in-out;
}

.surveytitle:hover {
    background-color: var(--phalf);
    box-shadow: 0px 4px 4px 0px rgba(11, 127, 134, .5);
    transform: translateY(-5px);
    color: #000; /* Darker shade on hover */
}

.surveys-list .btn-group {
    width: unset !important;
}

.surveys-list li {
    padding: unset;
}

.btn-check:active+.btn-primary, .btn-check:checked+.btn-primary, .btn-primary.active, .btn-primary:active, .show>.btn-primary.dropdown-toggle {
    background-color: var(--phalf);
    border-color: var(--phalf);
}

.well {
    background-color: var(--slate);
}

.progress {
    background-color: var(--slate);
}

.bg-light {
    background-color: var(--slate) !important;
}

#surveys-list-container .survey-contact {
    display: none;
}