/*Content container*/
.ccew-alert-content {
    display: flex;
    max-width: 90%;
    /* Set a maximum width for the container */
    margin: 0 auto;
    /* Center the container */
    padding: 20px;
}

.ccew-alert-content .sidebar-area {
    flex: 1;
    margin-right: 30px;
    /* Add some space between sidebar and content */


}

.ccew-alert-content .main-area {
    flex: 4;
}

/* Style the alert list container */
.ccew-alerts-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    /* Add space between alerts */
}



.ccew-alert {
    display: flex;
    width: 100%;
    border: 1px solid #e9e9e9;
    background-color: #fff;
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    -webkit-box-shadow: 6px 6px 5px 0px rgba(0, 0, 0, 0.14);
    -moz-box-shadow: 6px 6px 5px 0px rgba(0, 0, 0, 0.14);
    box-shadow: 6px 6px 5px 0px rgba(0, 0, 0, 0.14);
    margin-bottom: 30px;
    padding: 30px !important;
    flex-direction: column;
}

.ccew-alert .label {
    color: #000 !important;
}

/* top-wrapper */
.top-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 35px;
}

.top-wrapper::before {
    position: absolute;
    content: "";
    height: 1px;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #c5c5c5;
}

.title-icon-wrapper {
    display: flex;
    flex-direction: row;
}


.title-icon-wrapper span img {
    width: 32px;
    margin-right: 30px;
}

.date-wrapper{
display: flex;
flex-direction: row;
gap: 20px;

}


/*middle wrapper*/
/* ... other CSS ... */

.ccew-alert .progress-bar-inner {
    display: flex;
    width: 100%;
    height: 10px;
    /* Adjust the height as needed */
    border-radius: 5px;
    /* Add rounded corners */
    overflow: hidden;
    /* Hide overflowing sections */
}

.ccew-alert .progress-section {
    height: 100%;
    /* margin-right: 2px; - Remove margin if you don't want gaps */
    flex-grow: 1;
    transition: background-color 0.3s ease;
    /* Add a smooth transition */
}

.ccew-alert .progress-section:not(.active) {
    opacity: 0.1;
    /* Gray out inactive sections */
    background-color: #ccc;
    /* Set a default gray color for inactive sections */
}

.ccew-alert .severity-low.active {
    background-image: linear-gradient(to right, #4CAF50, #4CAF50);
    /* Green */
}

.ccew-alert .severity-moderate.active {
    background-image: linear-gradient(to right, #4CAF50, #FFEB3B);
    /* Green to Yellow */
}

.ccew-alert .severity-elevated.active {
    background-image: linear-gradient(to right, #4CAF50, #FFEB3B, #FF9800);
    /* Green to Yellow to Orange */
}

.ccew-alert .severity-high.active {
    background-image: linear-gradient(to right, #4CAF50, #FFEB3B, #FF9800, #F44336);
    /* Green to Yellow to Orange to Red */
}

.ccew-alert .active-level {
    text-align: center;
    margin-top: 5px;
    font-weight: bold;
}


.severity-key {
    margin-bottom: 20px;
    padding: 15px;
    background: #f5f5f5;
    border-radius: 4px;
}

.severity-key h4 {
    margin: 0 0 15px 0;
}

.severity-indicators {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.severity-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.severity-bar {
    width: 60px;
    height: 15px;
    display: block;
    border-radius: 3px;
}

.severity-label {
    font-size: 0.9em;
    color: #333;
}


/* bottom wrapper styling */
.bottom-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.location-wrapper {
    display: flex;
    flex-direction: row;
}

.location-icon img {
    width: 24px;
    margin-right: 8px;
}

.bottom-wrapper .button-wrapper a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    background-color: #8cc63f;
    height: 2.5em;
    padding: 0 1.2em;
    border-radius: 99px;
}


.initiative-container {
    display: flex;
    max-width: 1390px;
}

.initiative-wrapper {
    display: flex;
    flex-direction: row;
    width: 100%;
    /* Adjust the width as needed */
    margin: 0 auto;
    /* Center the container horizontally */
}

/* Base styles for initiative cards */
.initiative-card {
    /* Base styles for all screen sizes */
    position: relative;
    transition: .5s;
    background: #F5F8ED;
    border-radius: 10px;
    padding: 20px;
    transition: all 400ms linear;
    overflow: hidden;
    margin: 10px;
    cursor: pointer;
}

.initiative-card .initiative-thumbnail {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.initiative-card .initiative-thumbnail::before {
    background: rgba(121, 186, 0, 0.6);
    bottom: 0;
    content: "";
    left: 50%;
    position: absolute;
    right: 51%;
    top: 0;
    opacity: 1;
    pointer-events: none;
    transition: all 500ms linear;
    z-index: 9999;
}


.initiative-card:hover .initiative-thumbnail::before {
    left: 10%;
    right: 10%;
    opacity: 0;
    transition: all 500ms linear;
}


.initiative-card .initiative-thumbnail img {
    width: 100%;
    position: relative;
    z-index: 1;
    height: auto;
    max-width: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;

}

.initiative-card:hover .initiative-thumbnail img {
    transform: scale(1.1);
    /* Zoom in by 10% */
    transition: transform 0.3s ease-in-out;
    /* Smooth transition effect */
}

.initiative-card .initiative-content {
    padding: 30px 19px 14px;
    border-radius: 5px;
    position: relative;
    background: transparent;
    z-index: 1;
    transition: 0.5s;
}

.initiative-card .initiative-content .title {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
}

.initiative-card:hover {
    background-color: black;
}

.initiative-card:hover .title h3 a {
    color: white;
}

.initiative-card .initiative-content .title h3 {
    font-size: 22px;
    font-weight: 600;
    margin: 15px 0 26px;
    position: relative;
    transition: all 400ms linear;
    line-height: 30px;
    flex: 3;
    text-align: left;
}

.initiative-card .initiative-content .title h3::before {
    position: absolute;
    content: "";
    width: 34px;
    height: 2px;
    left: 0;
    bottom: -13px;
    background: #79B900;
}


.initiative-card .initiative-content .initiative-excerpt {
    transition: .5s;
    font-size: 18px;
    margin: 36px 0 0;
    text-align: left;
}

.initiative-card:hover .initiative-content .initiative-excerpt {
    color: #a1a1a1;

}

.initiative-card .details-button a {

    display: inline-block;
    height: 50px;
    width: 50px;
    line-height: 50px;
    text-align: center;
    background: #fff;
    border-radius: 50%;
    font-size: 20px;
    font-weight: 700;
    transform: rotate(-45deg);
    transition: .5s;
    color: #79ba00;
    position: absolute;
    top: 30px;
    right: 19px;
    transition: all 400ms linear;
}

.initiative-card:hover .details-button a {
    background: #79ba00;
    color: #fff;
}


.initiative-card .initiative-content .icon-shape {
    display: inline-block;
    position: absolute;
    right: -25px;
    bottom: -30px;
    transition: .5s;
    opacity: 0;
    transition: all 400ms linear;
    transform: rotate(95deg);

}

.initiative-card:hover .initiative-content .icon_shape {
    opacity: 1;
}



/*Community Engagement*/
.engagement-container {
    display: flex;
}

.engagement-wrapper {
    display: flex;
    width: 100%;
    flex-direction: row;
}

.engagement-card {
    flex: 1 0 250px;
    /* Initial width of 250px, can grow or shrink */
    margin: 10px;
}

.engagement-card .engagement-thumbnail {
    margin-right: 21px;
    position: relative;
    overflow: hidden;
    height: 300px;
    position: relative;
}

.engagement-card .engagement-thumbnail::before {
    background: rgba(121, 185, 0, 0.8);
    bottom: 0;
    content: "";
    left: 50%;
    position: absolute;
    right: 51%;
    top: 0;
    opacity: 1;
    pointer-events: none;
    transition: all 500ms linear;
}

.engagement-card:hover .engagement-thumbnail::before {
    left: 0;
    right: 0;
    opacity: 0;
    transition: all 500ms linear;
}

.engagement-card .engagement-thumbnail img {
    border-radius: 5px 5px 0 0;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.engagement-card .engagement-content {
    background: #F5F8ED;
    padding: 30px 20px 28px;
    width: 88%;
    border-left: 5px solid #79B900;
    position: relative;
    margin-top: -28px;
    transition: 0.5s;
    border-radius: 5px;
    height: 90px;
    text-align: left;
    overflow: hidden;
}

.engagement-content .title h3 {
    display: inline-block;
    color: #001819;
    font-size: 24px;
    font-weight: 600;
    transition: 0.5s;
    position: relative;
    z-index: 2;
}

.engagement-content .title h3 a {
    color: #001819;
    font-size: 26px;
    font-weight: 600;
    transition: 0.5s;
}

.engagement-card:hover .engagement-content {
    background: #79b900;
    height: 149px;
    margin-top: -103px;
}

.engagement-card:hover .engagement-content .title h3 a {
    color: #ffffff;
}

.engagement-card:hover .engagement-content .initiative-view-more a h5 {
    color: #ffffff;
}


.publications-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Create 4 equal-width columns */
    gap: 20px;
    /* Adjust spacing between grid items */
    width: 1390px;
}

.publication-item {
    border: 1px solid #ccc;
    /* Add a border for the card effect */
    padding: 20px;
    border-radius: 5px;
    /* Optional: Add rounded corners */
    position: relative;
}

.publication-item img {
    width: 60%;
    /* Make images span the full width of the container */
    height: auto;
    /* Set a fixed height for all images */
    object-fit: cover;
    /* Maintain aspect ratio and cover   
 the area */
    display: block;
    /* Add this property */
    margin-left: auto;
    /* Add this property */
    margin-right: auto;
    /* Add this property */
}

.publication-download-button {
    position: absolute;
    bottom: 10px;
    left: 20px;
    background: #7dbf25;
    color: white;
    padding: 0 20px;
}


.publications-table td:nth-child(2) {
    max-width: 200px; /* Adjust the value as needed */
}

.publications-table td:first-child { /* Select the first column (Title) */
    width: 15%; /* Adjust the width as needed */
}

.publications-table td:last-child { /* Select the last column (Download) */
    width: 20%; /* Adjust the width as needed */
}




/* Small devices such as small  phones (639px and below) */
@media only screen and (max-width: 639px) {

    .ccew-alert-content {
        display: flex;
        max-width: 95%;
        margin: 0 auto;
        padding: 20px;
        flex-direction: column;
    }

}

/* Small devices such as large phones (640px and up) */
@media only screen and (min-width: 640px) {

    .ccew-alert-content {
        display: flex;
        max-width: 95%;
        margin: 0 auto;
        padding: 20px;
        flex-direction: column;
    }

    .initiative-card {
        width: 100%;
        /* 1 card per row */
        float: none;
    }

    .engagement-card {
        flex: 1 0 100%;
        /* Full width on small devices */
    }

}

/* Medium devices such as tablets (768px and up) */
@media only screen and (min-width: 768px) {
    .ccew-alert-content {
        display: flex;
        max-width: 95%;
        margin: 0 auto;
        padding: 20px;

    }
    

    .initiative-card {
        width: 50%;
        /* 2 cards per row */
        float: left;
    }

    .engagement-card {
        flex: 1 0 50%;
        /* 2 cards per row */
    }
}

/* Large devices such as laptops (1024px and up) */
@media only screen and (min-width: 1024px) {
    .ccew-alert-content {
        display: flex;
        max-width: 95%;
        margin: 0 auto;
        padding: 20px;

    }

    .initiative-card {
        width: 31.33%;
        /* 4 cards per row */
        float: left;
    }

    .engagement-card {
        flex: 1 0 25%;
        /* 4 cards per row */
    }
}

/* Largest devices such as desktops (1280px and up) */
@media only screen and (min-width: 1280px) {
    .ccew-alert-content {
        display: flex;
        max-width: 95%;
        margin: 0 auto;
        padding: 20px;

    }

    .initiative-card {
        width: 31.33%;
        /* 4 cards per row */
        float: left;
    }

    .engagement-card {
        flex: 1 0 25%;
        /* 4 cards per row */
    }
}