/* CMS Style Variables */
/* ------------------------------------------ */
:root {
    --ThemeMain: #333;
    --ThemeAccent: #71b52b;
    --ThemeWhite: #fff;
    --ThemeRed: #FF0000;
    --ThemeSmoke: #F5F5F5;
    --ThemeLightGrey: #BEBEBE;
}


/* Custom Styles */
/* ------------------------------------------ */

html, body {
    background-color: var(--ThemeSmoke);
    font-family: Arial, sans-serif;
    /*max-width: 992px;*/
    padding: 0;
    margin: 0 auto;
    background-size: initial !important;
    background-position: initial !important;
    background-repeat: no-repeat !important;
    width: 100% !important; /* Use 100% instead of 100vw to avoid overflow */
    height: 100% !important; /* Ensure the background covers full height */
    overflow-x: hidden; /* Prevent horizontal overflow */
}

.container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    width: 100%;
    padding-right: 0px !important;
    padding-left: 0px !important;
    margin-right: 0px !important;
    margin-left: 0px !important;
}

.theme-bg-main {
    background: var(--ThemeMain) !important;
}

.theme-bg-accent {
    background: var(--ThemeAccent) !important;
}

.theme-bg-smoke {
    background: var(--ThemeSmoke) !important;
}

.theme-fc-white {
    color: var(--ThemeWhite) !important;
}

.theme-fc-accent {
    color: var(--ThemeAccent) !important;
}

.theme-fc-lightgrey {
    color: var(--ThemeLightGrey) !important;
}

.theme-font-14 {
    font-size: 14px;
}

.text-align-center {
    text-align: center;
}

.background-container {
    position: relative; /* Position relative for the pseudo-element */
    display: inline-block; /* Adjust as needed */
}

.background-image {
    display: block; /* Remove bottom space */
    width: 100%; /* Make the image responsive */
    height: auto; /* Maintain aspect ratio */
}

.background-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, /* Fully transparent at the top */
    rgba(255, 255, 255, 0) 90%, /* 50% opacity in the middle */
    rgba(255, 255, 255, 0.9) 100%); /* 80% opacity at the bottom */
    pointer-events: none; /* Allow clicks to pass through */
}

.content-overlay {
    position: absolute;
    z-index: 1; /* Ensure the content is above the background image */
    max-width: 425px;
    width: 100%;
}

/* Task Status Card Base */
.task-card {
    padding: 1rem;
    border: 0;
    border-radius: 12px;
    color: white;
}

/* Individual Gradient Themes */
.task-card-urgent {
    background: linear-gradient(to right, #ff3d00, #ff6e40);
}

.task-card-due-today {
    background: linear-gradient(to right, #01d79c, #019cde);
}

.task-card-start-today {
    background: linear-gradient(to right, #7589d2, #63bff0);
}

.task-card-in-progress {
    background: linear-gradient(to right, #45bab4, #546a75);
}

.task-card-upcoming {
    background: linear-gradient(to right, #fddc8b, #f38681);
}

.task-card-overdue {
    background: linear-gradient(to right, #ff6a6a, #ff9a9e);
}

/* Card Icon Style */
.task-card i {
    font-size: 48px;
    opacity: 0.6;
}

.task-icon-urgent {
    color: #fd7e14;
}

.task-icon-due-today {
    color: #0dcaf0;
}

.task-icon-start-today {
    color: #0dcaf0;
}

.task-icon-in-submitted {
    color: #333;
}

.task-icon-in-progress {
    color: #ffc107;
}

.task-icon-completed {
    color: #198754;
}

.task-icon-overdue {
    color: #dc3545;
}

/* Other Styles */
.select2 {
    min-width: 150px !important
}

a.nostyle:link {
    text-decoration: inherit;
    color: inherit;
    cursor: pointer;
}

a.nostyle:visited {
    text-decoration: inherit;
    color: inherit;
    cursor: pointer;
}

.progress {
    background-color: #e9ecef !important;
    height: 10px !important;
}


/* Custom Styles Media Queries */
/* ------------------------------------------ */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

}

/* Small devices (landscape phones, 768px and up) */
@media (min-width: 768px) {
    html, body {
        margin: 0 auto;
        background-size: initial !important;
        background-position: initial !important;
    }
}


/* Custom Animations | Keyframes */
/* ------------------------------------------ */

@keyframes rotateIcon {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeout {
    0% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        display: none;
    }
}