.custom-popup-wrapper {
    position: relative;
    display: inline-block;
}

/* Trigger button styles */
.popup-trigger-button {
    padding: 10px 20px;
    background-color: #2A73DC;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
}

.popup-trigger-button:hover {
    background-color: #1e5bb9;
}

/* Icon trigger styles */
.popup-trigger-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #2A73DC;
}

.popup-trigger-icon svg {
    width: 24px;
    height: 24px;
}

/* Text trigger styles */
.popup-trigger-text {
    color: #2A73DC;
    text-decoration: underline;
    cursor: pointer;
}

/* Base popup container styles */
.popup-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.25s, opacity 0.25s;
}

.popup-container.popup-active {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

.popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
}

/* Base popup content styles */
.popup-content {
    position: relative;
    background-color: #fff;
    border-radius: 8px;
    width: 600px;
    max-width: 90vw;
    max-height: 80vh;
    overflow: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e0e0e0;
}

.popup-title {
    font-family: 'Involve', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: #2A73DC;
    margin: 0;
}

.popup-close {
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #6B6B6B;
}

.popup-body {
    padding: 24px;
    font-family: 'Involve', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #0D0D0D;
}

/* Style 1: Standard Popup (default) */
.popup-style-style1 .popup-content {
    border-radius: 8px;
}

/* Style 2: Side Panel */
.popup-style-style2 .popup-container {
    justify-content: flex-end;
}

.popup-style-style2 .popup-content {
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    animation: slideInRight 0.3s forwards;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

/* Style 3: Modal Dialog */
.popup-style-style3 .popup-content {
    border-radius: 16px;
    padding: 16px;
    max-width: 800px;
    text-align: center;
}

.popup-style-style3 .popup-header {
    border-bottom: none;
    justify-content: flex-end;
}

.popup-style-style3 .popup-title {
    margin: 24px 0;
    width: 100%;
    font-size: 24px;
}

/* Style 4: Notification */
.popup-style-style4 .popup-content {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 380px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: fadeInUp 0.3s forwards;
}

.popup-style-style4 .popup-container {
    justify-content: flex-end;
    align-items: flex-end;
}

.popup-style-style4 .popup-overlay {
    background-color: transparent;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Date Status Bar Style */
.popup-style-date .popup-container {
    position: relative;
    visibility: visible;
    opacity: 1;
    width: 100%;
    max-width: 100%;
    display: block;
}

.popup-style-date .popup-overlay {
    display: none;
}

.popup-style-date.custom-popup-wrapper {
    display: block;
    width: 100%;
}

.date-status-bar {
    display: flex;
    width: 100%;
    padding: 20px 24px;
    justify-content: space-between;
    align-items: center;
    background: var(--Color-Surface-Empty-Brand, #ECF8F6);
    box-shadow: 0px 0px 100px 0px rgba(255, 255, 255, 0.10);
    /* border-radius: 4px; */
    margin: 0 auto;
    /* box-sizing: border-box; */
}

.date-status-bar.open {
    background-color: #e6f5f1; 
}

.date-status-bar.closed {
    background-color: #fcecec; 
}

.date-status-bar.open .status-badge-text {
    color: var(--Color-Content-Positive, #138673);
}

.date-status-bar.closed .status-badge-text {
    color: #E53935;
}

.date-status-left {
    display: flex;
    align-items: center;
}

.status-indicator {
    width: 32px;
    height: 32px;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Specific styling for RTL (Arabic) */
html[dir="rtl"] .status-indicator {
    margin-right: 0;
    /* margin-left: 12px; */
}

.status-badge-text {
    color: var(--Color-Content-Positive, #138673);
    font-family: var(--Type-Link-Link-1-Family, Involve);
    font-size: var(--Type-Link-Link-1-Size, 20px);
    font-style: normal;
    font-weight: var(--Type-Link-Link-1-Weight, 600);
    line-height: 130%;
    margin-right: 40px;
}

/* Specific styling for RTL (Arabic) */
html[dir="rtl"] .status-badge-text {
    margin-right: 12px;
    margin-left: 40px;
}

.status-text {
    color: var(--Color-6, #192B45);
    font-family: var(--Type-Body-M-Body-1-Family, Involve);
    font-size: var(--Type-Body-M-Body-1-Size, 20px);
    font-style: normal;
    font-weight: 600;
    line-height: 130%; 
}

.date-display {
    color: var(--Color-Content-Secondary, #363636);
    font-family: var(--Type-Body-M-Body-1-Family, Involve);
    font-size: var(--Type-Body-M-Body-1-Size, 20px);
    font-style: normal;
    font-weight: var(--Type-Body-M-Body-1-Weight, 500);
    line-height: 130%; 
}

.date-picker-wrapper {
    display: flex;
    align-items: center;
}
.date-picker {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.date-toggle {
    margin-left: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
}
.date-toggle svg {
    width: 16px;
    height: 16px;
    color: #333;
}

/* Green "What is this?" Style */
.popup-style-green-info {
    display: block;
    width: 100%;
}

.popup-style-green-info .popup-container {
    position: relative;
    visibility: visible;
    opacity: 1;
    width: 100%;
    max-width: 100%;
    display: block;
}

.popup-style-green-info .popup-overlay {
    display: none;
}

.popup-style-green-info.custom-popup-wrapper {
    display: block;
    width: 100%;
}

.green-info-box {
    display: flex;
    padding: var(--Spacing-2XL, 32px);
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    border-radius: 8px;
    background: rgba(95, 182, 168, 0.10);
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
	align-items:center;
    position: relative; /* Added for absolute positioning of exit button */
}

/* Exit Button for Green Info Box */
.green-info-exit {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}
html[lang="ar"] .green-info-exit {
	right: unset;
	left: 16px;
}

.green-info-exit svg {
    width: 16px;
    height: 16px;
}

.green-info-exit:hover svg path {
    stroke: #333333;
}

/* Hidden widget class */
.popup-style-green-info.hidden {
    display: none;
}

/* Responsive adjustments for the exit button */
@media (max-width: 768px) {
    .green-info-exit {
        top: 12px;
        right: 12px;
        padding: 4px;
    }
    
    .green-info-exit svg {
        width: 14px;
        height: 14px;
    }
}

/* Green Information Style (without title) */
.popup-style-green-information {
    display: block;
    width: 100%;
}

.popup-style-green-information .popup-container {
    position: relative;
    visibility: visible;
    opacity: 1;
    width: 100%;
    max-width: 100%;
    display: block;
}

.popup-style-green-information .popup-overlay {
    display: none;
}

.popup-style-green-information.custom-popup-wrapper {
    display: block;
    width: 100%;
}

.green-information-box {
    display: flex;
    padding: var(--Spacing-2XL, 32px);
    gap: 10px;
    align-self: stretch;
    border-radius: 8px;
    background: rgba(95, 182, 168, 0.10);
    width: 100%;
    margin: 0 auto;
    align-items: center;
}

.green-information-box .info-text {
    color: var(--Color-Content-Brand-2-Text, #06322B);
    font-family: Involve;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.info-icon {
    display: flex;
    padding: 12px 16px;
    flex-direction: column;
    align-items: center; /* Changed from flex-start to center for horizontal alignment */
    justify-content: center; /* For vertical alignment */
    gap: 10px;
    border-radius: 80px;
    background: rgba(52, 200, 175, 0.10);
    color: rgba(95, 182, 168, 1);
    min-width: 24px;
    align-self: flex-start; 
}

.info-icon2 {
    display: flex;
    padding: 12px 16px;
    flex-direction: column;
    align-items: center; /* Changed from flex-start to center for horizontal alignment */
    justify-content: center; /* For vertical alignment */
    gap: 10px;
    border-radius: 80px;
    background: rgba(52, 200, 175, 0.10);
    color: rgba(95, 182, 168, 1);
    min-width: 24px;
    align-self: center; 
}

.info-icon svg {
    width: 24px;
    height: 24px;
    display: block;
    align-self: center; 
}

.info-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.info-title {
    color: var(--Color-Content-Brand-2-Text, #06322B);
    font-family: Involve;
    font-size: var(--Type-Header-Header-3-Size, 24px);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 0;
}

.info-text {
    color: var(--Color-Content-Secondary, #363636);
    font-family: var(--Type-Body-M-Body-1-Family, Involve);
    font-size: var(--Type-Body-M-Body-1-Size, 16px);
    font-style: normal;
    font-weight: var(--Type-Body-M-Body-1-Weight, 500);
    line-height: 130%; /* 26px */
    margin: 0;
}

/* Official Definition Style */
.popup-style-official-definition {
    display: block;
    width: 100%;
}

.popup-style-official-definition .popup-container {
    position: relative;
    visibility: visible;
    opacity: 1;
    width: 100%;
    max-width: 100%;
    display: block;
}

.popup-style-official-definition .popup-overlay {
    display: none;
}

.popup-style-official-definition.custom-popup-wrapper {
    display: block;
    width: 100%;
}

.official-definition-box {
    display: flex;
    padding: 24px 32px;
    align-items: flex-start;
    gap: 80px;
    align-self: stretch;
    border-radius: var(--Radii-XS, 4px);
    background: rgba(59, 129, 231, 0.05);
    box-sizing: border-box;
    margin: 0 auto;
}

.definition-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;
    width: 100%;
}

.definition-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    justify-content: space-between;
    width: 100%;
}

.definition-badge {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 8px;
}

.definition-badge svg {
    width: 22px;
    height: 22px;
}

.definition-title {
    color: #2A73DC;
    font-family: var(--Type-Link-Link-1-Family, Involve);
    font-size: var(--Type-Link-Link-1-Size, 20px);
    font-style: normal;
    font-weight: var(--Type-Link-Link-1-Weight, 600);
    line-height: 130%; /* 26px */
}

.definition-text {
    color: var(--Color-Content-Primary, #0D0D0D);
    font-family: var(--Type-Body-M-Body-2-Family, Involve);
    font-size: var(--Type-Body-M-Body-2-Size, 16px);
    font-style: normal;
    font-weight: var(--Type-Body-M-Body-2-Weight, 500);
    line-height: 140%; /* 22.4px */
    max-width: 1113px;
}

.whats-this-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 8px;
    cursor: pointer;
}

.whats-this-link span {
    font-family: 'Involve', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 140%;
    color: #6B6B6B;
}

.whats-this-link svg {
    width: 16px;
    height: 16px;
}

/* Official Definition Style - What's This Tooltip */
.whats-this-container {
    position: relative;
}

.whats-this-tooltip {
    visibility: hidden;
    background-color: #FFFFFF;
    color: #0D0D0D;
    text-align: left;
    border-radius: 8px;
    box-shadow: 0px 4px 36px rgba(0, 0, 0, 0.15);
    padding: 24px 32px 24px 50px;
    position: absolute;
    z-index: 999;
    bottom: 125%;
    right: 0;
    transform: translateY(-10px);
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    min-width: 452px;
    max-width: 600px;
}

.whats-this-link:hover .whats-this-tooltip,
.whats-this-link:focus .whats-this-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.whats-this-tooltip .tooltip-title-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 8px;
    width: 100%;
}

.whats-this-tooltip .tooltip-title {
    margin: 0;
    color: #2A73DC;
    font-family: var(--Type-Link-Link-2-Family, Involve);
    font-size: 16px;
    font-style: normal;
    font-weight: var(--Type-Link-Link-2-Weight, 600);
    line-height: 140%; 
}

.whats-this-tooltip .tooltip-description-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;
    width: 100%;
}

.whats-this-tooltip .tooltip-description {
    color: var(--Color-Content-Secondary, #363636);
    font-family: var(--Type-Body-Body-3-Family, Involve);
    font-size: 14px;
    font-style: normal;
    font-weight: var(--Type-Body-Body-3-Weight, 500);
    line-height: 140%; 
    margin: 0;
}

/* Government Badge Style */
.popup-style-government-badge {
    display: block;
    width: 100%;
}

.popup-style-government-badge .popup-container {
    position: relative;
    visibility: visible;
    opacity: 1;
    width: 100%;
    max-width: 100%;
    display: block;
}

.popup-style-government-badge .popup-overlay {
    display: none;
}

.government-badge-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #ECF3F8;
}

.badge-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 40px;
    width: 100%;
    height: 46px;
    box-sizing: border-box;
}

.badge-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 12px;
}

.badge-text {
    font-family: 'Involve', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 140%;
    color: #0D0D0D;
}

.badge-toggle {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.toggle-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: 'Involve', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 140%;
    color: #135686;
}

/* Toggle content styles */
.headertoggledimage {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    background: #ffffff;
    border-top: 1px solid #E0E0E0;
    visibility: hidden;
    opacity: 0;
}

.headertoggledimage.show {
    max-height: 800px; /* Increased from 500px to accommodate more content */
    visibility: visible;
    opacity: 1;
}

.toggle-content {
    padding: 32px 40px;
    position: relative;
    font-family: 'Involve', sans-serif;
    font-size: 16px;
    line-height: 140%;
    color: #0D0D0D;
}

.close-toggle-button {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* Focus states for buttons */
#toggleButton:focus,
#close-toggle-button:focus {
    outline: none;
    border: none;
    box-shadow: none;
}

/* Recognition grid styles */
.recognition-dropdown {
    width: 100%;
}

.recognition-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 0;
    margin: 0;
}

.grid-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.grid-item img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.grid-item h4 {
    font-family: 'Involve', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 140%;
    color: #0D0D0D;
    margin: 0;
}

.grid-item p {
    font-family: 'Involve', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    color: #363636;
    margin: 0;
}

.status-badge-wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

/* Responsive adjustments for the grid */
@media (max-width: 992px) {
    .recognition-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .recognition-grid {
        grid-template-columns: 1fr;
    }
}

/*pop up date status bar Responsive adjustments */
@media (max-width: 767px) {
    .status-indicator{
        width: 24px;
        height: 24px;
        margin-right: 0px;
    }
    .badge-content {
        flex-direction: column;
        height: auto;
        padding: 16px;
        gap: 12px;
        align-items: flex-start;
    }
    
    .badge-toggle {
        width: 100%;
        justify-content: flex-start;
    }
    
    .date-status-bar {
        flex-direction: column;
        height: auto;
        gap: 4px;
        display: flex;
        padding: 20px 16px;
        justify-content: space-between;
        align-items: flex-start; /* Changed from center to flex-start for better alignment */
    }
    
    .date-status-left {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
    }
    
    .status-badge-wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    
    .status-badge-text {
        color: var(--Color-Content-Positive, #138673);
        font-family: var(--Type-Header-Header-4-Family, Involve);
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 140%;
        margin-right: 0;
        margin-left: 12px;
    }
    
    /* Specific styling for RTL (Arabic) in mobile view */
    html[dir="rtl"] .status-badge-text {
        margin-left: 0;
        margin-right: 12px;
    }
    
    .status-text {
        width: 100%;
        color: var(--Color-6, #192B45);
        font-family: var(--Type-Body-Body-3-Family, Involve);
        font-size: 12px;
        font-style: normal;
        font-weight: var(--Type-Body-Body-3-Weight, 500);
        line-height: 140%; 
        display: block;
        /* margin-top: 12px; */
        /* white-space: normal; */
        /* Remove fixed margin and use padding instead for alignment */
        margin-left: 0;
        margin-right: 0;
        padding-left: 36px; /* Aligns with status badge icon */
    }
    
    /* RTL support for Arabic */
    html[dir="rtl"] .status-text {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 36px; /* Mirror padding for RTL */
    }
    
    .date-display {
        text-align: right;
        color: var(--Color-Content-Secondary, #363636);
        font-family: var(--Type-Body-Body-2-Family, Involve);
        font-size: 14px;
        font-style: normal;
        font-weight: var(--Type-Body-Body-2-Weight, 500);
    }
}

/* Responsive adjustments for green info box */
@media (max-width: 768px) {
    .green-info-box {
        padding: 24px;
    }
    
    /* New mobile styles for green info box */
    .popup-style-green-info .info-title {
        color: var(--Color-Content-Brand-2-Text, #06322B);
        font-family: var(--Type-Body-Body-2-Family, Involve);
        font-size: 14px;
        font-style: normal;
        font-weight: var(--Type-Body-Body-2-Weight, 500);
        line-height: 140%; /* 19.6px */
    }
    
    .info-text {
        color: var(--Color-Content-Secondary, #363636);
        font-family: var(--Type-Body-Body-2-Family, Involve);
        font-size: 12px;
        font-style: normal;
        font-weight: var(--Type-Body-Body-2-Weight, 500);
        line-height: 140%; /* 19.6px */
    }
    
     .info-icon {
        display: flex;
        padding: 6px 8px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        border-radius: 80px;
        background: rgba(19, 134, 115, 0.10);
    }
    
    .info-icon svg {
        width: 16px;
        height: 16px;
        align-self: center;
    }
}


/* Responsive adjustments for official definition */
@media (max-width: 768px) {
    .official-definition-box {
        padding: 16px;
        gap: 40px;
    }

    .definition-header {
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
    }

    .whats-this-link {
        margin-top: 8px;
    }

    .whats-this-link span {
        display: none;
        ;
    }

    .definition-title {
        color: #2A73DC;
        font-family: var(--Type-Link-Link-2-Family, Involve);
        font-size: 14px;
        font-style: normal;
        font-weight: var(--Type-Link-Link-2-Weight, 600);
        line-height: 140%;
    }

    .definition-text {
        color: var(--Color-Content-Primary, #0D0D0D);
        font-family: var(--Type-Body-Body-2-Family, Involve);
        font-size: 14px;
        font-style: normal;
        font-weight: var(--Type-Body-Body-2-Weight, 500);
        line-height: 140%;
        /* 19.6px */
        width: 100%;
    }
}

/* Responsive adjustments for the tooltip */
@media (max-width: 768px) {
    .whats-this-tooltip {
        min-width: 300px;
        width: 90vw;
        right: -16px; /* Offset to align with smaller screens */
        max-width: calc(100vw - 40px);
    }
}

/* Green Info Button Style */
.green-info-button-wrapper {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    width: fit-content;
    padding: 8px 16px;
    border-radius: var(--Radii-Full, 1000px);
    border: 2px solid var(--Color-Buttons-Outline-Idle, #03231B);
}

.green-info-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}

.green-info-button-text {
    color: var(--Color-Buttons-Outline-Idle, #03231B);
    font-family: var(--Type-Body-Body-1-Family, Involve);
    font-size: 20px;
    font-style: normal;
    font-weight: var(--Type-Body-Body-1-Weight, 500);
    line-height: 130%; /* 26px */
}

.green-info-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.green-info-button-icon svg {
    width: 24px;
    height: 24px;
}

@media (max-width: 768px) {
    .green-info-button-wrapper{
        border:none;
        padding:0px;
    }
    
    .green-info-button-text {
        font-size: 14px;
        line-height: 140%;
    }
    
    .green-info-button-icon svg {
        width: 16px;
        height: 16px;
    }
}

/* Court Hearing Style */
.popup-style-court-hearing {
    display: flex;
    padding: 40px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 32px;
    align-self: stretch;
    background: #F2F5FA;
}

.popup-style-court-hearing .popup-container {
    position: relative;
    visibility: visible;
    opacity: 1;
    width: 100%;
    max-width: 100%;
    display: block;
}

.popup-style-court-hearing .popup-overlay {
    display: none;
}

.popup-style-court-hearing.custom-popup-wrapper {
    display: block;
    width: 100%;
}

.court-hearing-container {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    width: 100%;
    gap: 48px;
}

.court-hearing-content-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    flex: 1 0 0;
    width: 100%;
}

.court-hearing-title-with-icon {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #3E7FDC;
    font-family: var(--Type-Link-Link-1-Family, Involve);
    font-size: var(--Type-Link-Link-1-Size, 20px);
    font-style: normal;
    font-weight: var(--Type-Link-Link-1-Weight, 600);
    line-height: 130%; /* 26px */
}

.court-hearing-title-with-icon svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.court-hearing-title {
    color: #0F3D5D;
    font-family: var(--Type-Header-Header-3-Family, Involve);
    font-size: var(--Type-Header-Header-3-Size, 32px);
    font-style: normal;
    font-weight: var(--Type-Header-Header-3-Weight, 500);
    line-height: 120%; /* 38.4px */
    margin: 0;
}

.court-hearing-description {
    overflow: hidden;
    color: var(--Color-Content-Tertiary, #6B6B6B);
    text-overflow: ellipsis;
    font-family: var(--Type-Body-M-Body-1-Family, Involve);
    font-size: var(--Type-Body-M-Body-1-Size, 20px);
    font-style: normal;
    font-weight: var(--Type-Body-M-Body-1-Weight, 500);
    line-height: 130%; /* 26px */
    margin: 0;
}

.court-hearing-button-wrapper {
    display: flex;
    align-items: flex-end;
}

.court-hearing-button {
    display: flex;
    padding: 16px 24px;
    align-items: center;
    gap: 8px;
    border-radius: var(--Radii-Full, 1000px);
    border: 2px solid var(--Color-Content-Buttons-Outline-Idle, #0D0D0D);
    background: transparent;
    text-decoration: none;
    transition: all 0.3s ease;
    color: var(--Color-Content-Buttons-Outline-Idle, #0D0D0D);
    font-family: Involve;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px; /* 150% */
}

.court-hearing-button:hover {
    background-color: rgba(13, 13, 13, 0.05);
    text-decoration: none;
    color: var(--Color-Content-Buttons-Outline-Idle, #0D0D0D);
}

.court-hearing-button span {
    color: inherit;
    font: inherit;
}

.court-hearing-button i {
    font-size: 16px;
    color: inherit;
}

/* Responsive adjustments for court hearing */
@media (max-width: 768px) {
    .popup-style-court-hearing {
        display: flex;
        padding: 20px;
        align-items: flex-start;
        gap: 10px;
        border-radius: 8px;
        background: #F2F5FA;
    }
    
    .court-hearing-container {
        flex-direction: column;
        gap: 16px;
    }
    
    .court-hearing-title-with-icon {
        color: #3E7FDC;
        font-family: var(--Type-Link-Link-2-Family, Involve);
        font-size: 14px;
        font-style: normal;
        font-weight: var(--Type-Link-Link-2-Weight, 600);
        line-height: 140%; /* 19.6px */
    }
    
    .court-hearing-title {
        overflow: hidden;
        color: #0F3D5D;
        text-overflow: ellipsis;
        font-family: var(--Type-Header-Header-3-Family, Involve);
        font-size: 20px;
        font-style: normal;
        font-weight: var(--Type-Header-Header-3-Weight, 500);
        line-height: 130%; /* 26px */
    }
    
    .court-hearing-description {
        font-size: 16px;
        line-height: 140%;
    }
    
    .court-hearing-button {
        display: flex;
        height: 44px;
        padding: 0px 18px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: var(--Radii-Full, 1000px);
        border: 1.2px solid var(--Color-Buttons-Outline-Idle, #03231B);
        color: var(--Color-Buttons-Outline-Idle, #03231B);
        font-family: var(--Type-Body-Body-2-Family, Involve);
        font-size: 14px;
        font-style: normal;
        font-weight: var(--Type-Body-Body-2-Weight, 500);
        line-height: 140%; /* 19.6px */
    }
    
    .court-hearing-button-wrapper {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
    }
    
    .court-hearing-content-box {
        gap: 12px;
    }
}

/* Add responsive styles for green-information-box info-text */
@media (max-width: 768px) {

        .green-information-box {
        display: flex;
        padding: var(--Spacing-2XL, 16px);
        gap: 10px;
        align-self: stretch;
        border-radius: 8px;
        background: rgba(95, 182, 168, 0.10);
        width: 100%;
        margin: 0 auto;
        align-items: flex-start;
    }

    .green-information-box .info-text {
        color: var(--Color-Content-Brand-2-Text, #06322B);
        font-family: var(--Type-Body-Body-2-Family, Involve);
        font-size: 14px;
        font-style: normal;
        font-weight: var(--Type-Body-Body-2-Weight, 500);
        line-height: 140%; /* 19.6px */
    }
}