/* Fonts */

.imc-FontRoboto {
    font-family: 'Roboto', sans-serif;
}

.imc-FontRobotoSlab {
    font-family: 'Roboto Slab', serif;
}


/* Text */

.imc-TextBold {
    font-weight: 700;
}

.imc-TextMedium {
    font-weight: 500;
}

.imc-TextRegular {
    font-weight: 400;
}

.imc-TextLight {
    font-weight: 300;
}

.imc-TextItalic {
    font-style: italic;
}

.imc-Text-XL {
    font-size: 18px;
    letter-spacing: normal;
}

.imc-Text-LG {
    font-size: 16px;
}

.imc-Text-MD {
    font-size: 14px;
}

.imc-Text-SM {
    font-size: 12px;
}

.imc-Text-XS {
    font-size: 10px;
    line-height: 100%;
}

.imc-Text-XS-R {
    font-size: calc(10px + 0.2vw);
}

.imc-PageTitleTextStyle {
    font-family: 'Roboto', sans-serif;
    line-height: 140%;
    padding: 0;
    margin: 0 auto;
    font-size: 24px;
    font-weight: 500;
    font-style: normal;
    text-align: left;
    text-shadow: none;
}

/* Modern Section Titles */
.imc-SectionTitleTextStyle {
    font-family: 'Roboto Slab', serif;
    line-height: 1.3;
    padding-bottom: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #1a202c;
    border-bottom: 2px solid #e2e8f0;
    position: relative;
}

.imc-SectionTitleTextStyle::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #ffc107 0%, #f4b21e 100%);
    border-radius: 1px;
}

.imc-SingleCategoryTextStyle {
    font-family: 'Roboto', sans-serif;
    padding-top: 4px;
    font-weight: 400;
    font-style: italic;
    line-height: 120%;
}


a.imc-SingleHeaderLinkStyle {
    margin: 0 24px 0 12px;
    color: #f4b21e;
    font-family: 'Roboto', sans-serif;
    white-space: nowrap;
    font-weight: 500;
    font-size: 18px;
}

a.imc-SingleHeaderLinkStyle:focus {
    outline: none;
}


a.imc-SingleHeaderLinkStyle:link,
a.imc-LinkStyle:link,
a.imc-LinkStyle:visited {
    text-decoration: none;
    color: #f4b21e;
    box-shadow: none;
}

a.imc-SingleHeaderLinkStyle:hover,
a.imc-SingleHeaderLinkStyle:hover i,
a.imc-SingleHeaderLinkStyle:hover span,
a.imc-SingleHeaderLinkStyle:active,
a.imc-SingleHeaderLinkStyle:active i,
a.imc-SingleHeaderLinkStyle:active span
{
    text-decoration: none;
    color: #e5aa17;
}

a.imc-SingleHeaderLinkStyle:visited,
a.imc-SingleHeaderLinkStyle i:visited,
a.imc-SingleHeaderLinkStyle span:visited {
    color: #f4b21e;
}


a.imc-LinkStyle {
    color: #f4b21e;
    font-family: 'Roboto', sans-serif;
}

.logged-in-as a.imc-LinkStyle:hover,
a.imc-LinkStyle:hover,
a.imc-LinkStyle:active {
    text-decoration: none;
    color: #e5aa17;
    box-shadow: none;

}


.imc-SingleHeaderStyle {
    border-bottom: 1px solid #C4C4C4;
    border-bottom: 1px solid rgba(0,0,0,0.23);
    height: 60px;
    display: block;
    margin: 0 auto;
}


.imc-SingleHeaderIconStyle {
    vertical-align: -11px;
}

.imc-VerticalAlignMiddle {
    vertical-align: middle;
}

.imc-AlignIconToLabel {
    vertical-align: -3px;
}

/* Modern Card Layout for Single Issue Pages */
.imc-CardLayoutStyle {
    padding: 24px;
    background: linear-gradient(145deg, #ffffff 0%, #fafbff 100%);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid #e8ecf0;
    margin-bottom: 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.imc-CardLayoutStyle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #007cba 0%, #0066cc 50%, #00a8e8 100%);
    transform: scaleX(0);
    transition: transform 0.3s ease;
    transform-origin: left;
}

/* Enhanced Single Issue Page Elements */
.imc-CardLayoutStyle .badge {
    font-weight: 600;
    font-size: 0.8rem;
    padding: 8px 16px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: none;
}

.imc-CardLayoutStyle h4 {
    color: #000;
    font-weight: 700;
    margin: 16px 0;
}

.imc-CardLayoutStyle .text-muted {
    color: #718096 !important;
    font-weight: 500;
}

.imc-CardLayoutStyle.cc-map{
    margin-top: 8px;
}

/* Enhanced content container */
.container.bg-white {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    margin-top: 20px;
    position: relative;
    z-index: 10;
}

/* Modern List Layout Styling */
.imc-ListLayoutStyle {
    padding: 10px;
    background: linear-gradient(145deg, #ffffff 0%, #f8f9ff 100%);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.imc-ListLayoutStyle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #007cba 0%, #0066cc 100%);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.imc-ListLayoutStyle:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    border-color: #007cba;
}

.imc-ListItemMainInfoStyle {
    /*height: 88px;*/
    width: auto;
}

.imc-ContainerEmptyStyle {
    padding: 0;
    /* min-height: 800px; */
}

.imc-SingleCategoryIcon {
    height: 100%;
    width: 100%;
    max-width: 100px;
    max-height: 100px;

    border: none;
    background-color: transparent;
    border-radius: 6px;
    margin-bottom: 4px;
}

.imc-OverviewTileCategoryIcon {
    height: 24px;
    width: 24px;
    border: none;
    background-color: transparent;
    border-radius: 3px;
    margin-right: 6px;
}

.imc-OverviewListCategoryIcon {
    width: 60px;
    height: 30px;
    border: none;
    background-color: transparent;
    border-radius: 3px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .imc-OverviewListCategoryIcon {
        height: 22px;
    }
}

.imc-SingleStatusBarStyle {
    background-color: transparent;
    border: 2px solid transparent;
    margin: 2px 0 4px 0;
}

.imc-SingleInformationTextStyle {
    padding: 0 24px 0 0;
}

.imc-SingleMapCanvasStyle {
    width: 100%;
    height: 300px;
    margin-bottom: 6px;
}

/* Modern Description Styling */
.imc-SingleDescriptionStyle {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: #4a5568;
    background: #f8fafc;
    padding: 16px;
    border-radius: 8px;
}

/* Modern Timeline Styling */
.imc-SingleTimelineStepCircleStyle {
    width: 24px;
    height: 24px;
    background-color: #eeeeee;
    vertical-align: -6px;
    margin-right: 12px;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    position: relative;
}

.imc-SingleTimelineStepCircleStyle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Enhanced Timeline Items */
.imc-SingleTimelineItemStyle {
    margin: 12px 0;
    padding: 16px;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 3px solid #007cba !important;
    transition: all 0.3s ease;
}

.imc-SingleTimelineItemStyle:hover {
    background: #edf2f7;
}

.imc-SingleTimelineStepTitleStyle {
    font-weight: 600;
    font-size: 1.1rem;
    color: #2d3748;
}

.imc-SingleTimelineItemDescStyle {
    font-weight: 400;
    line-height: 1.5;
    margin: 8px 0;
}

.imc-SingleTimelineItemFooterTextStyle {
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0.8;
}

/* Enhanced Map and Photos */
.imc-SingleMapCanvasStyle {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Photo thumbnails */
.imc-CardLayoutStyle img {
    border-radius: 8px;
    transition: transform 0.3s ease;
}

/* Enhanced Single Issue Page Background */
.single-imc_issues .imc-BGColorGray {
    background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%) !important;
    min-height: 100vh;
}

/* Enhanced Navigation Header */
.single-imc_issues .row.imc-BGColorWhite {
    background: linear-gradient(145deg, #ffffff 0%, #f8f9ff 100%) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-radius: 0 0 16px 16px;
}

.imc-SingleHeaderLinkStyle {
    display: inline-flex !important;
    align-items: center;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 12px;
    text-decoration: none;
    color: #4a5568;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.imc-SingleHeaderLinkStyle i {
    margin-right: 8px;
}

/* Enhanced Issue Status Indicator */
.imc-SingleHeaderStyle.imc-BGColorRed {
    background: linear-gradient(135deg, #fed7d7 0%, #feb2b2 100%) !important;
    border-radius: 8px;
    margin: 16px 0;
    padding: 16px;
    border-left: 4px solid #e53e3e;
}

/* Enhanced location section */
.imc-SingleInformationTextStyle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: #f0f4f8;
    border-radius: 8px;
    margin-top: 8px;
}

/* Enhanced Address Link */
.imc-address-link {
    color: #4a5568 !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.3s ease;
    margin-left: 8px;
}

.imc-address-link:hover {
    color: #007cba !important;
    background: #e6f3ff;
    border-color: #007cba;
    text-decoration: none !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 124, 186, 0.15);
}

.imc-address-link:hover i {
    color: #007cba;
}

.imc-address-link i {
    transition: color 0.3s ease;
}

/* Enhanced Filter Modal Styling */
#filterModal .modal-dialog {
    max-width: 800px;
}

#filterModal .modal-content {
    border-radius: 16px;
    border: none;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

#filterModal .modal-header {
    background: linear-gradient(135deg, #007cba 0%, #0066cc 100%);
    color: white;
    padding: 20px 24px;
    border: none;
}

#filterModal .modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: white !important;
}

#filterModal .btn-close {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    opacity: 1;
}

#filterModal .btn-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

#filterModal .modal-body {
    padding: 32px 24px;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
}

/* Enhanced Form Elements */
#filterModal .form-label {
    font-weight: 600;
    color: #2d3748;
    font-size: 1rem;
    margin-bottom: 8px;
}

#filterModal .form-control {
    border-radius: 8px;
    border: 2px solid #e2e8f0;
    padding: 12px 16px;
    font-size: 0.95rem;
}

#filterModal .form-control:focus {
    border-color: #007cba;
    box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1);
    outline: none;
}

/* Enhanced Checkbox Styling for Modal */
#filterModal .mb-3 {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid #e9ecef;
}

#filterModal .imc-CheckboxToggleStyle {
    width: 20px;
    height: 20px;
    accent-color: #007cba;
    margin-right: 12px;
    cursor: pointer;
}

#filterModal .imc-CheckboxToggleStyle + label {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d3748;
    cursor: pointer;
    display: flex;
    align-items: center;
}

#filterModal .imc-CheckboxStyle {
    width: 16px;
    height: 16px;
    accent-color: #007cba;
    margin: 8px 12px 8px 20px;
    cursor: pointer;
}

#filterModal .imc-CheckboxStyle + label {
    font-weight: 500;
    color: #4a5568;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-block;
}

#filterModal .imc-CheckboxStyle + label:hover {
    background: #e6f3ff;
    color: #007cba;
}

#filterModal .imc-CheckboxChildStyle + label {
    margin-left: 16px;
    color: #6b7280;
    font-size: 0.9rem;
}

#filterModal .imc-CheckboxGrandChildStyle + label {
    margin-left: 32px;
    color: #9ca3af;
    font-size: 0.85rem;
}

/* Enhanced Grid Layout for Categories */
#filterModal .imc-grid-6 {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#filterModal .imc-row {
    margin-bottom: 12px;
    border-radius: 8px;
}

/* Enhanced Modal Footer */
#filterModal .modal-footer {
    background: linear-gradient(145deg, #f8fafc 0%, #ffffff 100%);
    border: none;
    padding: 20px 24px;
    border-radius: 0 0 16px 16px;
}

#filterModal .btn {
    border-radius: 8px;
    padding: 12px 24px;
    font-weight: 600;
    font-size: 0.95rem;
    border: none;
    min-width: 120px;
}

#filterModal .btn-secondary {
    background: #6c757d;
    color: white;
}

#filterModal .btn-secondary:hover {
    background: #5a6268;
}

#filterModal .btn-primary-theme {
    background: linear-gradient(135deg, #007cba 0%, #0066cc 100%);
    color: white;
    border: none;
}

#filterModal .btn-primary-theme:hover {
    background: linear-gradient(135deg, #006aa3 0%, #0056b3 100%);
}

/* Enhanced Filter Button */
.btn-filter {
    background: linear-gradient(135deg, #007cba 0%, #0066cc 100%);
    border: none;
    border-radius: 20px;
    padding: 8px 16px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 124, 186, 0.2);
}

.btn-filter:hover {
    background: linear-gradient(135deg, #006aa3 0%, #0056b3 100%);
    box-shadow: 0 4px 16px rgba(0, 124, 186, 0.3);
}

/* Modal Animation Enhancement */
#filterModal.fade .modal-dialog {
    transform: scale(0.8) translateY(-50px);
}

#filterModal.show .modal-dialog {
    transform: scale(1) translateY(0);
}

/* Section Dividers */
#filterModal .mb-3::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #e2e8f0 50%, transparent 100%);
}

#filterModal .mb-3:last-child::after {
    display: none;
}

#filterModal .mb-3 {
    position: relative;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    #filterModal .modal-dialog {
        margin: 8px;
        max-width: none;
    }
    
    #filterModal .modal-body {
        padding: 12px 12px;
    }
    
    #filterModal .modal-header,
    #filterModal .modal-footer {
        padding: 16px;
    }
    
    #filterModal .btn {
        width: 100%;
        margin-bottom: 8px;
    }
    
    #filterModal .imc-grid-6 {
        width: 100%;
    }
}

/* Loading State for Apply Button */
#filterModal .btn-primary-theme.loading {
    position: relative;
    color: transparent;
}

#filterModal .btn-primary-theme.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    transform: translate(-50%, -50%);
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.imc-SingleTimelineStepTitleStyle {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    font-size: 14px;
    overflow: hidden;
}

.imc-SingleTimelineItemFooterTextStyle {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    font-style: italic;
}

.imc-SingleTimelineItemStyle {
    font-family: 'Roboto', sans-serif;
    display: table;
    margin-left: 7px;
    padding: 0 0 12px 16px;
    width: 100%;
}

.imc-SingleTimelineLastItem {
    margin-left: 10px;
}

.imc-SingleTimelineItemDescStyle {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    padding: 4px 0 4px 0;
    display: block;
}

.imc-ReportIssueMapCanvasStyle {
    width: 100%;
    height: 300px;
}

.imc-ReportAttachedImgStyle {
    margin-top: 12px;
    color: transparent;
    background-color: transparent;
    border: none;
}

.imc-ReportAddImgInputStyle {
    opacity: 0.01;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}


.imc-OptionalTextLabelStyle {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #757575;
    color: rgba(0,0,0,0.54);
    vertical-align: middle;
}


label.imc-NaviSelectStyle {
    position: relative;
    display: inline-block;
    padding: 0;
    margin: 0 auto;
}

label.imc-NaviSelectStyle select {
    background: none;
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
    border: 0;
    float: left;
    height: inherit;
    line-height: 20px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.2pt;
    color: #757575;
    color: rgba(0,0,0,0.54);
    outline: none;
    width: 100%;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    text-align: left;
    z-index: 100;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
    margin:0 6px 15px 0;
    padding: 0 12px 0 0;
    -moz-appearance: none;
    -webkit-appearance:none;
    appearance:none;
    text-overflow: '';
}

label.imc-NaviSelectStyle select:hover,
label.imc-NaviSelectStyle select:focus {
    font-weight: 500;
    color: #f4b21e;
    background-position: 0 0;
    outline: none;
}

label.imc-NaviSelectStyle select:hover option,
label.imc-NaviSelectStyle select:focus option {
    color: #212121;
    color: rgba(0,0,0,0.87);
    cursor: default;
}

label.imc-NaviSelectStyle:after {
    content:'▾';
    position: absolute;
    top: 2px; right: 2px;
    padding:0 0 12px 0;
    font: 14px "Consolas", monospace;
    pointer-events: none;
    color: #212121;
    color: rgba(0,0,0,0.87);
    outline: none;
}


label.imc-CustomSelectStyle {
    position: relative;
    display: inline-block;
    padding: 0;
    margin: 0 auto;
}

label.imc-CustomSelectStyle select {
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
    border: 0;

    border-bottom: 1px solid #B2B2B2;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    display: block;
    padding: 10px 0;
    margin-top: 2px;
    margin-bottom: 30px;
    line-height: 20px;
    font-size: 16px;
    font-weight: 400;
    color: #212121;
    color: rgba(0,0,0,0.87);

    outline: none;

    width: 100%;

    -moz-appearance: none;
    -webkit-appearance:none;
    appearance:none;
    border-radius: 0;

    transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #f4b21e 4%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #f4b21e 4%);
    background-position: -600px 0;
    background-size: contain;
    background-repeat: no-repeat;
}


label.imc-CustomSelectStyle:after {
    content:'<>';
    position: absolute;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    right: 0; top: 14px;
    padding:0 0 8px;
    font: 12px "Consolas", monospace;
    pointer-events: none;
    color: #000000;
    outline: none;
}


label.imc-CustomSelectStyle select:hover,
label.imc-CustomSelectStyle select:focus {
    border-bottom: 1px solid #f4b21e;
    background-position: 0 0;
    outline: none;
}

label.imc-CustomSelectStyle select:hover option,
label.imc-CustomSelectStyle select:focus option {
    cursor: default;
}

.imc-CustomOptionDisabledStyle {
    color: #757575;
    color: rgba(0,0,0,0.54);
    background: #F0F0F0;
    background: rgba(0,0,0,0.06);
    font-style: italic;
}

.imc-CustomOptionParentStyle {
    color: #212121;
}

.imc-CustomOptionChildStyle {
    color: #212121;
    color: rgba(0,0,0,0.87);
    font-size: 14px;
}

.imc-CustomOptionGrandchildStyle {
    color: #757575;
    color: rgba(0,0,0,0.6);
    font-size: 14px;
}

.imc-ReportFormErrorLabelStyle {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    font-style: italic;
    word-wrap: normal;
    line-height: 120%;
    overflow: hidden;
    text-overflow: ellipsis;

}

.imc-ReportGenericLabelStyle {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 500;
}

a.imc-BlockLevelLinkStyle {
    display: block;
}

a.imc-BlockLevelLinkStyle:hover,
a.imc-BlockLevelLinkStyle:focus {
    text-decoration: none;
    outline: none;
}

.imcOverviewMap {
    width: 100%;
    height: 100%;
}

.imc-OverviewMapStyle {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.imc-OverviewContentStyle {
    min-height: 90%;
    max-height: 100%;
    position: relative;
}

@media only screen and (min-width: 701px) {
    .imc-OverviewWrapperStyle {
        display: flex;
        flex-flow: row wrap;
        height: calc(100vh - 100px); /* Account for header height */
        width: 100%;
    }
    .imc-OverviewContentStyle  { flex: 0.5 0; overflow-y: scroll; overflow-x: hidden; order: 1; }
    .imc-OverviewMapContainerStyle { order: 2; flex-grow: 1; position: relative; height: 100%; }

}

@media only screen and (max-width: 700px) { 
    .imc-OverviewWrapperStyle {
        display: block;
        height: auto;
        width: 100%;

    }
    .imc-OverviewContentStyle  { display: block; }
    .imc-OverviewMapContainerStyle { visibility: hidden; }
}


.imc-OverviewIssuesContainerStyle {
    overflow-x: hidden;
    overflow-y: hidden;
}

/* Modern List Items */
.imc-OverviewListStyle {
    box-sizing: border-box;
    height: auto;
    width: 100%;
}

/* Remove old alternating backgrounds - handled by imc-ListLayoutStyle now */

/* Enhanced list item components */
.imc-ListLayoutStyle .bg-image {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.imc-ListLayoutStyle:hover .bg-image {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.imc-ListLayoutStyle .badge {
    font-weight: 600;
    font-size: 0.75rem;
    padding: 4px 8px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.imc-ListLayoutStyle .text-muted {
    color: #6c757d !important;
    font-weight: 500;
}

.imc-ListLayoutStyle .mt-2 {
    font-weight: 600;
    font-size: 1.1rem;
    color: #2c3e50;
    line-height: 1.2;
    max-width: 92%;
}

/* Enhanced category icons */
.imc-OverviewListCategoryIcon {
    width: 50px;
    height: 30px;
    border-radius: 8px;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.imc-OverviewTileStyle {
    height: 426px;
    padding: 0;
    margin: 14px;

}

@media only screen and (min-width: 1140px) {
    .imc-OverviewTileStyle:nth-child(odd) {
        float:left;
        margin-left: 14px;
        margin-right: 7px;
    }

    .imc-OverviewTileStyle:nth-child(even) {
        float:right;
        margin-left: 7px;
        margin-right: 14px;
    }

    .imc-OverviewTileStyle {
        width: calc(50% - 1.4em);
        max-width: none;
        margin-top: 6px;
    }
}

.imc-OverviewFilteringBarStyle {
    width: 100%;
    position: relative;

}

.imc-OverviewTileImageStyle {
    min-height: 260px;
    min-width: 100%;
    max-height: 260px;
    text-align: center;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid rgba(0,0,0,0.12);
}


.imc-OverviewTileImageStyle img.wp-post-image {
    position: absolute;
    min-height: 260px;
    min-width: 100%;
    left: 50%;
    top: 50%;
    height: auto;
    width: auto;
    max-width: none;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}


.imc-OverviewListImageStyle {
    min-height: 90px;
    min-width: 100%;
    text-align: center;
    overflow: hidden;
    position: relative;
}


.imc-OverviewListImageStyle img.wp-post-image {
    object-fit: cover;
    width: 100%;
    height: 150px;
}

.imc-OverviewInfoBubbleImageStyle {
    min-height: 200px;
    min-width: 100%;
    max-height: 180px;
    text-align: center;
    overflow: hidden;
    position: relative;
    border: none;
    margin-bottom: 4px;
}

.imc-OverviewInfoBubbleImageStyle img.wp-post-image {
    position: absolute;
    min-height: 180px;
    min-width: 100%;
    left: 50%;
    top: 50%;
    height: auto;
    width: auto;
    max-width: none;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.imc-OverviewTileEditButtonStyle {
    height: 25px;
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 9;
}

.imc-OverviewListEditButtonStyle {
    height: 25px;
    z-index: 9;

}

.imc-OverviewGridMyIssueIconStyle {
    position: absolute;
    top: 18px;
    right: 12px;
    z-index: 9;
}

.imc-OverviewListMyIssueIconStyle {
    padding-top: 12px;
}

.imc-OverviewGridNoPhotoWrapperStyle {
    height: 260px;
    width: 100%;
    margin: 0 auto;
    display: inline-block;
    vertical-align:middle;
}

.imc-OverviewListNoPhotoWrapperStyle {
    max-height: 160px;
    max-width: 160px;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    vertical-align:middle;
}

.imc-OverviewTileIdStyle {
    font-family: 'Roboto Slab', serif;
    font-size: 14px;
    font-weight: 600;
    background: rgba(0,0,0,.54);
    color: white;
    padding: 4px 8px 4px 8px;
    position: absolute;
    bottom: 0;
    left: 0;
}



.imc-OverviewTileDetailsStyle {
    padding: 14px;

}

.imc-OverviewTileIdStyle i {
    vertical-align: -3px;
    margin-right: 3px;
    margin-left: 3px;
}

.imc-OverviewTileTitleStyle {
    white-space: nowrap;
    display: inline-block;
    font-weight: 500;
    font-size: 18px;
    line-height: 120%;
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.imc-OverviewListTitleStyle {
    white-space: nowrap;
    display: inline-block;
    font-weight: 500;
    font-size: 18px;
    line-height: 120%;
    margin: 0 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.imc-OverviewTileSectionStyle {
    width: 100%;
    display:inline-block;
    margin: 0 auto;
}

.imc-OverviewCatNameStyle {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #212121;
    color: rgba(0,0,0,0.87);
    font-size: 14px;
    line-height: 27px;
}

.imc-OverviewListCatNameStyle {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #212121;
    padding: 2px 0 0 0;
    color: #2b6cb0;
    font-size: 14px;
}

.imc-OverviewGridCatNameStyle {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display:inline-block;
    width: auto;
    max-width: 85%;
    max-width: calc(100% - 4em);
}

.imc-OverviewListTextNoWrapStyle {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display:inline-block;
    width: 100%;
}

.imc-OverviewListDescriptionStyle {
    font-family: 'Roboto', sans-serif;
    font-style: italic;
    font-weight: 400;
    font-size: 14px;
    color: #757575;
    color: rgba(0,0,0,0.54);
    line-height: 120%;
}

.imc-OverviewGridStepCircleStyle {
    width: 20px;
    height: 20px;
    margin: 2px;
    background-color: #eeeeee;
    border-bottom: 1px solid #888888;
}

.imc-OverviewListStepCircleStyle {
    width: 16px;
    height: 16px;
    margin: 2px;
    background-color: #eeeeee;
    border-bottom: 1px solid #888888;
    vertical-align: -4px;
}

.imc-OverviewGridStepLabelStyle {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 120%;
    padding: 0 4px 0 4px;
}

.imc-OverviewListStepLabelStyle {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 120%;
    padding: 5px 17px 0 0;
}

/* Improved Header Styling */
.imc-improved-header {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
    border-bottom: 2px solid #e9ecef;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    min-height: 80px;
}

.header-logo-link {
    transition: transform 0.3s ease;
}

.header-main-title {
    font-size: 1.8rem;
    background: linear-gradient(45deg, #007cba, #0066cc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
}

.header-subtitle {
    font-size: 0.9rem;
    font-style: italic;
    color: #6c757d;
}

.header-actions .btn {
    transition: all 0.3s ease;
    font-weight: 500;
    border-width: 2px;
}

.header-actions .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.user-info {
    background: #f8f9fa;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid #dee2e6;
}

.imc-OverviewHeaderNavStyle {
    height: 60px;
}

.imc-OverviewNavUlStyle {
    list-style-type: none;
    margin: 0;
    padding: 0;
    line-height: 30px;
}

.imc-OverviewNavUlStyle:first-child {
    margin-left: 8px;
}

.imc-OverviewNavUlStyle li {
    height: 60px;
    margin: 0 0 0 5px;
    display: inline-block;
}

.imc-OverviewNavUlStyle li a, .cs-select {
    display: block;
    float: left;
    height: 60px;
}

.imc-OverviewNavUlStyle li a {
    padding: 0 8px 0 8px;
    margin: 0 4px 0 4px;
}

.imc-AdminMsgsStyle {
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    cursor: pointer;

}
.imc-AdminMsgsStyle-mb {
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    cursor: pointer;
    height: 20px;

}

.imc-AdminMsgsTooltipStyle {
    background: #181512;
    bottom: 100%;
    color: #fff;
    margin-bottom: 15px;
    opacity: 0;
    padding: 20px;
    pointer-events: none;
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
    transition: all .25s ease-out;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
    border-radius: 3px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-style: italic;
    font-weight: 400;
    font-size: 14px;
}

.imc-AdminMsgsGridTooltipStyle {
    display: block;
    right: -5px;
    position: absolute;
    max-width: 200px;
}

.imc-AdminMsgsGridTooltipStyle :before {
    bottom: -20px;
    content: " ";
    display: block;
    height: 20px;
    left: 0;
    position: absolute;
    width: 100%;
}

.imc-AdminMsgsGridTooltipStyle :after {
    border-left: solid transparent 10px;
    border-right: solid transparent 10px;
    border-top: solid #181512 10px;
    bottom: -10px;
    right: 5px;
    content: " ";
    height: 0;
    margin-left: -13px;
    position: absolute;
    width: 0;
}

.imc-AdminMsgsListTooltipStyle {
    display: block;
    right: 30px;
    bottom: -90px;
    position: absolute;
    max-height: 95px;
    min-width: 250px;
}

.imc-AdminMsgsListTooltipStyle :before {
    bottom: -20px;
    content: " ";
    display: block;
    height: 20px;
    left: 0;
    position: absolute;
    width: 100%;
}

.imc-AdminMsgsListTooltipStyle :after {
    border-left: solid transparent 10px;
    border-right: solid transparent 10px;
    border-top: solid #181512 10px;
    bottom: -10px;
    right: 5px;
    content: " ";
    height: 0;
    margin-left: -13px;
    position: absolute;
    width: 0;
}

.imc-AdminMsgsStyle-mb:hover .imc-AdminMsgsTooltipStyle {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
}

.imc-AdminMsgsStyle:hover .imc-AdminMsgsTooltipStyle {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .imc-AdminMsgsStyle .imc-AdminMsgsTooltipStyle {
    display: none;
}
.lte8 .imc-AdminMsgsStyle-mb .imc-AdminMsgsTooltipStyle {
    display: none;
}

.lte8 .imc-AdminMsgsStyle:hover .imc-AdminMsgsTooltipStyle {
    display: block;
}
.lte8 .imc-AdminMsgsStyle-mb:hover .imc-AdminMsgsTooltipStyle {
    display: block;
}

.imc-MapMarkerWrapStyle {
    position: absolute;
    margin-top: -44px;
    margin-left: -20px;
    cursor: pointer;
}

.imc-MapMarkerBaseStyle {
    width:38px;
    height: 38px;
    position: relative;
    border-radius: 4px;
    box-shadow:0 2px 2px rgba(0,0,0,0.23);
}

.imc-MapMarkerBaseStyle:after, .imc-MapMarkerBaseStyle:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.imc-MapMarkerBaseOwnedStyle:after {
    border-color: rgba(136, 183, 213, 0);
    border-top-color: #f4b21e;
    border-width: 6px;
    margin-left: -6px;
}

.imc-MapMarkerBaseDefaultStyle:after {
    border-color: rgba(136, 183, 213, 0);
    border-top-color: white;
    border-width: 6px;
    margin-left: -6px;
}

.imc-MapMarkerBaseStyle:before {
    border-color: rgba(194, 225, 245, 0);
    border-top-color: rgba(0, 0, 0, 0.16);
    border-width: 8px;
    margin-left: -8px;
}

.imc-MarkerCatStyle {
    width: 24px;
    vertical-align: -18px;
}

.imc-NavSelectedStyle {
    background: #f4b21e;
}

.imc-NavSelectedStyle i {
    color: white;
}

.imc-InfoWindowStyle {
    overflow: hidden;
    box-shadow:0 2px 2px rgba(0,0,0,0.23);
    margin: 0 auto;
    padding: 0;
    min-height: 100%;
}

.imc-InfoWindowInnerStyle {
    height: 100%;
}

.imc-InfoWindowTitleStyle {
    font-weight: 500;
    font-size: 16px;
}

.imc-EditCatBlockStyle {
    padding-top: 12px;
    line-height: 27px;
}

.imc-EditCatNameStyle {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #212121;
    color: rgba(0,0,0,0.87);
    font-size: 16px;
}

.imc-CommentsFormWrapperStyle .comment-respond {
    background-color: transparent;
    padding: 20px 0;
}

.imc-CommentsFormWrapperStyle .comment-respond .comment-reply-title {
    display: none;
}

.imc-CommentsFormWrapperStyle .comment-count {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #757575;
    color: rgba(0,0,0,0.54);
    float: left;
    margin: 0 0 12px;
}

.imc-CommentsFormWrapperStyle .logged-in-as {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #757575;
    color: rgba(0,0,0,0.54);
    float: right;
    margin: 0 0 12px;
}

.imc-CommentsFormWrapperStyle .comment-form-comment {
    margin: 0 0 12px;
}

.imc-CommentsCounterStyle {
    padding-top: 12px;
}


.imc-CommentIconStyle {
    height: 100%;
    width: 100%;
    border: none;
    border-radius: 2px;

}

.imc-CommentAuthorStyle {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    color: #212121;
    color: rgba(0,0,0,0.87);
    font-size: 14px;
}

.imc-CommentMetaStyle {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #757575;
    color: rgba(0,0,0,0.54);
    font-size: 14px;
}

.imc-CommentDetailsStyle {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #212121;
    color: rgba(0,0,0,0.87);
    font-size: 14px;
    line-height: 160%;
    word-wrap: break-word;
}

.imc-CommentStyle {
    padding:  12px 12px 0 12px;
}

.imc-CommentPending {
    background-color: rgba(0,0,0,0.06);
    opacity: 0.6;
}

.imc-CommentPendingLabelStyle {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    font-style: italic;

}

/* Reusable components */

.imc-AlignIconToButton {
    vertical-align: -6px;
}

.imc-Separator {
    margin-bottom: 40px;
}

.imc-circle {
    border-radius: 50%;
    display: inline-block;
    text-align: center;
}

.imc-NotAvailableTextStyle {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 24px;
    padding:0;
    margin: 12px 0 12px 0;
    line-height: 120%;
}

.imc-EmptyStateIconStyle {
    color: #E0E0E0;
    color: rgba(0,0,0,0.12);
}

.imc-GiveWhitespaceStyle {
    padding: 80px 0 80px 0;
}

.imc-HorizontalSeparator {
    background: 0;
    border: 0;
    border-bottom: 1px solid #E0E0E0;
    border-bottom: 1px solid rgba(0,0,0,0.12);
    padding: 0;
    margin: 0 0 4px 0;
}

.imc-HorizontalWhitespaceSeparator {
    background: 0;
    border: 0;
    border-bottom: 1px solid #E0E0E0;
    border-bottom: 1px solid rgba(0,0,0,0.12);
    margin-bottom: 12px;
    margin-top: 0;
}

.imc-ListHorizontalSeparator {
    background: 0;
    border: 0;
    border-bottom: 1px solid #C4C4C4;
    border-bottom: 1px solid rgba(0,0,0,0.23);
    margin: 0 auto;
}

.imc-OverviewPaginationContainerStyle {
    display: block;
    position: relative;
    width: 100%;
    padding-top: 12px;
    padding-bottom: 24px;
}

.img-PaginationLabelStyle {
    font-family: 'Roboto', sans-serif;
    text-align: center;
    font-size: 16px;
    line-height: 120%;
}

nav.imc-PaginationStyle {
    text-align: center;
    margin: 0 auto;
    padding: 0;
    background: inherit;
    border: none;
}

nav.imc-PaginationStyle ul {
    /*list-style-type: none;*/
    list-style: none;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    display:inline-block;
}

nav.imc-PaginationStyle ul li {
    text-align: center;
    float: left;
    display: inline;
    background-color:rgb(255,255,255);
    width: auto;
    height: 32px;
    border: 1px solid #C4C4C4;
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: 2px;
    margin: 0 4px 0 4px;
    font-family:'Roboto', sans-serif;
    font-size: 18px;
    line-height: 32px;
    overflow:hidden;
}

nav.imc-PaginationStyle ul li span, nav.imc-PaginationStyle ul li a {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    padding: 0 10px 0 10px;

}

/*nav.imc-PaginationStyle ul li span {
    color: #757575;
    color: rgba(0,0,0,0.54);
}*/

nav.imc-PaginationStyle ul li .current {
    color: white;
    background: #D6D6D6;
    background: rgba(0,0,0,0.16);
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
}

nav.imc-PaginationStyle ul li a, nav.imc-PaginationStyle ul li a:link, nav.imc-PaginationStyle ul li a:visited {
    color: #f4b21e;
    background-color: white;
    line-height: inherit;
    padding-top: 0;
    padding-bottom: 0;
}

nav.imc-PaginationStyle ul li a:hover, nav.imc-PaginationStyle ul li a.prev:hover, nav.imc-PaginationStyle ul li a.next:hover {
    background-color: #f4b21e;
    color: white;
    outline: none;
    text-decoration: none;
    border-radius:0 ;
}

nav.imc-PaginationStyle ul li a i {
    vertical-align: -5px;
}

.imc-OverviewFilteringLabelStyle {
    font-family: 'Roboto', sans-serif;
    font-size:14px;
    font-style:italic;
    line-height:120%;
    color: #757575;
    color:rgba(0,0,0,0.54);
}

label.imc-OverviewFilteringPanelLabelStyle {
    margin: 0 auto;
    display: none;
}

.imc-OverviewFilteringPanelLabelStyle {
    padding: 0 16px 0 0;
}

.imc-OverviewFilteringPanelLabelStyle span {
    font-family: 'Roboto', sans-serif;
    line-height: 60px;
    color: #f4b21e;
    font-weight: 500;
    padding-left: 16px;
}

.imc-OverviewFilteringPanelLabelStyle:hover span {
    color: #e5aa17;
}

.imc-OverviewFilteringPanelLabelStyle i {
    line-height: 60px;
    color: #C4C4C4;
    color: rgba(0,0,0,0.23);
}


.imc-DrawerContentsStyle {
    padding: 24px;
}

.imc-DrawerButtonRowStyle {
    padding-bottom: 12px;
}

.imc-DrawerButtonRowStyle button {
    margin-right: 24px;
}

/** TOOLS **/

.imc-TextOverflowEllipsis {
    text-overflow: ellipsis;
}

.imc-FlexParent {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.imc-FlexChild {
    flex: 1;

}

.imc-JustifyText {
    text-align: justify;
    text-justify: auto;
}

.imc-HideOverflowEllipsis {
    overflow: hidden;
    text-overflow: ellipsis;
}

.imc-OverflowHidden {
    overflow: hidden;
}

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

.imc-hidden {
    display: none !important;
}

.imc-DisplayBlock {
    display: block;
    width: 100%;
}

.imc-DisplayInlineBlock {
    display: inline-block;
    padding-bottom:  6px;
}

/* Center map overlay text */
p.gm-style-pbt {
    text-align: center;
}

/* Hide sections */
@media (max-width: 420px) {
    .imc-hidden-xs {
        display: none !important;
    }

    .imc-visible-xs {
        display: block !important;
    }
}

@media (min-width: 420px) and (max-width: 700px) {
    .imc-hidden-sm {
        display: none !important;
    }
}

@media (min-width: 701px) and (max-width: 920px) {
    .imc-hidden-md {
        display: none !important;
    }
}

@media (min-width: 921px) and (max-width: 1100px) {
    .imc-hidden-lg {
        display: none !important;
    }
}

@media (min-width: 1101px) {
    .imc-hidden-xl {
        display: none !important;
    }

    .imc-visible-xl {
        display: block !important;
    }
}


#imcOverviewContainer .cc-fmt-style{
    cursor: pointer;
    background: white;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}


#imcOverviewContainer .cc-fmt-style:not(:first-child){
    margin-top: 0.5rem;
    margin-inline: 0px;
    margin-bottom: 0px;
}

.imc-OverviewIssuesContainerStyle {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-inline-start: 1rem;
    padding-inline-end: 1rem;
}


.btn-filter,.btn-filter:hover{
    font-size: 1rem;
    text-decoration: none;
}

.btn-map,#btn-report{
    position: fixed;
    bottom: 5%;
    right: 5%;
    z-index: 5;
    text-decoration: none;
    background-color: #dfa516;
    color: white;
    border: none;
}

#mapModalBd{
    height: 65vh;
}

.btn-map svg{
    display: inline-block;
}


.page-template-edit-imc_issues #header,
.page-template-edit-imc_issues #footer,
.page-template-edit-imc_issues #page > hr:nth-child(5),
.page-template-edit-imc_issues #page > hr:nth-child(2),
.single-imc_issues #header,
.single-imc_issues #footer,
.single-imc_issues #page > hr:nth-child(5),
.single-imc_issues #page > hr:nth-child(2),
.post-type-archive-imc_issues #header,
.post-type-archive-imc_issues #footer,
.post-type-archive-imc_issues #page > hr:nth-child(5),
.post-type-archive-imc_issues #page > hr:nth-child(2),
.page-template-archive-imc_issues #header,
.page-template-archive-imc_issues #footer,
.page-template-archive-imc_issues #page > hr:nth-child(5),
.page-template-archive-imc_issues #page > hr:nth-child(2),
.page-template-insert-imc_issues #header,
.page-template-insert-imc_issues #footer,
.page-template-insert-imc_issues #page > hr:nth-child(5),
.page-template-insert-imc_issues #page > hr:nth-child(2){
    display: none;
}


#total-issues{
    font-size: 1.3rem;
}

.material-icons.md-50 {
    font-size: 50px;
}

.btn-circle.btn-xl {
    width: 58px;
    height: 58px;
    padding: 5px 5px;
    border-radius: 35px;
    font-size: 24px;
    line-height: 1.33;
}

.btn-circle {
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
}

.btn-primary-theme{
    background-color: #e5aa17;
    color: white;
}


.imc-AdminMsgsStyle-mb:hover .imc-AdminMsgsTooltipStyle {
    right: -80px;
    bottom: -100px;
}

/* ===== DTFIX CHECKBOX STYLING ===== */

/* Base dtfix checkbox styles */
.dtfix-checkbox {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    margin: 0;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border: 2px solid #e9ecef;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 500;
    color: #4a5568;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: relative;
}

.dtfix-checkbox[data-checked] {
    background: linear-gradient(135deg, #007cba 0%, #0066cc 100%);
    border-color: #005a9f;
    color: white;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(0, 124, 186, 0.3);
}

/* Hidden native checkbox */
.dtfix-checkbox__input {
    border: 0px !important;
    clip: rect(0px, 0px, 0px, 0px) !important;
    height: 1px !important;
    width: 1px !important;
    margin: -1px !important;
    padding: 0px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    position: absolute !important;
}

/* Custom checkbox control */
.dtfix-checkbox__control {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    background: white;
    border: 2px solid #cbd5e0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dtfix-checkbox:hover .dtfix-checkbox__control {
    border-color: #007cba;
    background: #f7fafc;
}

.dtfix-checkbox[data-checked] .dtfix-checkbox__control {
    background: white;
    border-color: white;
}

/* Checkmark SVG styling */
.dtfix-checkbox__control svg {
    width: 12px;
    height: 10px;
    fill: none;
    stroke-width: 2;
    stroke: #007cba;
    stroke-dasharray: 16;
    stroke-dashoffset: 16;
    opacity: 0;
}

.dtfix-checkbox[data-checked] .dtfix-checkbox__control svg {
    stroke: #007cba;
    stroke-dashoffset: 0;
    opacity: 1;
}

/* Label text */
.dtfix-checkbox__label {
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Child category styling */
.dtfix-checkbox.dtfix-checkbox--child {
    margin-left: 20px;
    background: linear-gradient(145deg, #f0f4f8 0%, #e2e8f0 100%);
    border-left: 4px solid #007cba;
    font-size: 0.9rem;
}

/* Grandchild category styling */
.dtfix-checkbox.dtfix-checkbox--grandchild {
    margin-left: 40px;
    background: linear-gradient(145deg, #f8fafc 0%, #f1f3f4 100%);
    border-left: 4px solid #38a169;
    font-size: 0.85rem;
}

.dtfix-checkbox.dtfix-checkbox--grandchild .dtfix-checkbox__control svg {
    stroke: #38a169;
}

/* ===== FILTER MODAL IMPROVEMENTS ===== */

/* Fix btn-close to be white and visible */
#filterModal .btn-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: white;
    opacity: 1;
    filter: brightness(0) invert(1);
}

#filterModal .btn-close:hover {
    opacity: 0.8;
    transform: scale(1.1);
}

/* Enhanced Filter Modal Styling */
#filterModal .modal-dialog {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    top: 5vh;
    transform: translateY(-50%);
}

#filterModal .modal-content {
    border-radius: 16px;
    border: none;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    background: white;
}

#filterModal .modal-header {
    background: linear-gradient(135deg, #007cba 0%, #0066cc 100%);
    color: white;
    padding: 20px 24px;
    border: none;
    position: relative;
}

#filterModal .modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: white !important;
}

#filterModal .modal-body {
    padding: 32px 24px;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    overflow-y: auto;
}

/* Clean form styling */
#filterModal .mb-3 {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid #e9ecef;
    position: relative;
}

#filterModal .form-label {
    font-weight: 700;
    color: #2d3748;
    font-size: 1.1rem;
    margin-bottom: 12px;
    display: block;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 8px;
}

#filterModal .form-control {
    border-radius: 8px;
    border: 2px solid #e2e8f0;
    padding: 12px 16px;
    font-size: 1rem;
    background: white;
}

#filterModal .form-control:focus {
    border-color: #007cba;
    box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1);
    outline: none;
}

/* Checkbox styling */
#filterModal .imc-SectionTitleTextStyle {
    font-size: 1.2rem;
    font-weight: 700;
    color: #2d3748;
    display: block;
    border-bottom: 2px solid #007cba;
    padding-bottom: 4px;
}

#filterModal .imc-CheckboxToggleStyle {
    width: 20px;
    height: 20px;
    accent-color: #007cba;
    margin-right: 12px;
    cursor: pointer;
}

#filterModal .imc-CheckboxStyle {
    width: 16px;
    height: 16px;
    accent-color: #007cba;
    margin: 8px 12px 8px 20px;
    cursor: pointer;
}

#filterModal .imc-CheckboxStyle + label {
    font-weight: 500;
    color: #4a5568;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 8px;
    display: inline-block;
    background: transparent;
}

#filterModal .imc-CheckboxStyle + label:hover {
    background: #e6f3ff;
    color: #007cba;
}

#filterModal .imc-CheckboxChildStyle + label {
    margin-left: 16px;
    color: #6b7280;
    font-size: 0.9rem;
    background: #f8fafc;
    border-left: 3px solid #e2e8f0;
}

#filterModal .imc-CheckboxGrandChildStyle + label {
    margin-left: 32px;
    color: #9ca3af;
    font-size: 0.85rem;
    background: #f1f3f4;
    border-left: 3px solid #cbd5e0;
}

/* Grid layout improvements */
#filterModal .imc-grid-6 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 15px;
}

/* Status Checkboxes - 2-column layout */
#filterModal #imcCatCheckboxes,
#filterModal #imcStatusCheckboxes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
    padding: 0;
}

/* Override old checkbox styles for Chakra implementation */
#filterModal #imcStatusCheckboxes .dtfix-checkbox {
    margin-bottom: 0;
}


#filterModal #imcCatCheckboxes .imc-row {
    display: contents; /* Allow direct grid children */
}

#filterModal #imcStatusCheckboxes input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #007cba;
    margin: 0 12px 0 0;
    cursor: pointer;
}

#filterModal #imcStatusCheckboxes label,
#filterModal #imcCatCheckboxes label {
    display: flex;
    align-items: center;
    padding: 6px 2px;
    margin: 0;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

#filterModal #imcStatusCheckboxes input[type="checkbox"]:checked + label {
    background: linear-gradient(135deg, #007cba 0%, #0066cc 100%);
    border-color: #005a9f;
    color: white;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(0, 124, 186, 0.3);
}

#filterModal #imcCatCheckboxes .imc-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 0;
    padding: 0;
    background: none;
    border: none;
}

#filterModal #imcCatCheckboxes .imc-CheckboxStyle {
    width: 18px;
    height: 18px;
    accent-color: #007cba;
    margin: 0 12px 0 0;
    cursor: pointer;
}

#filterModal #imcCatCheckboxes .imc-CheckboxStyle + label {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    margin: 0;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border: 2px solid #e9ecef;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 500;
    color: #4a5568;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

#filterModal #imcCatCheckboxes .imc-CheckboxStyle + label:hover {
    background: linear-gradient(145deg, #e6f3ff 0%, #f0f8ff 100%);
    border-color: #007cba;
    box-shadow: 0 4px 12px rgba(0, 124, 186, 0.15);
    color: #007cba;
}

#filterModal #imcCatCheckboxes .imc-CheckboxStyle:checked + label {
    background: linear-gradient(135deg, #007cba 0%, #0066cc 100%);
    border-color: #005a9f;
    color: white;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(0, 124, 186, 0.3);
}

/* Child and Grandchild categories styling */
#filterModal #imcCatCheckboxes .imc-CheckboxChildStyle + label {
    margin-left: 20px;
    background: linear-gradient(145deg, #f0f4f8 0%, #e2e8f0 100%);
    border-left: 4px solid #007cba;
    font-size: 0.9rem;
}

#filterModal #imcCatCheckboxes .imc-CheckboxGrandChildStyle + label {
    margin-left: 40px;
    background: linear-gradient(145deg, #f8fafc 0%, #f1f3f4 100%);
    border-left: 4px solid #38a169;
    font-size: 0.85rem;
    color: #2d3748;
}

#filterModal .imc-row {
    margin-bottom: 8px;
    padding: 8px;
    border-radius: 8px;
    background: white;
    border: 1px solid #f1f3f4;
}

/* Modal footer */
#filterModal .modal-footer {
    background: linear-gradient(145deg, #f8fafc 0%, #ffffff 100%);
    border: none;
    padding: 20px 24px;
    border-radius: 0 0 16px 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

#filterModal .btn {
    border-radius: 8px;
    padding: 12px 0px;
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    min-width: 140px;
}

#filterModal .btn-secondary {
    background: #6c757d;
    color: white;
}

#filterModal .btn-secondary:hover {
    background: #5a6268;
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

#filterModal .btn-primary-theme {
    background: linear-gradient(135deg, #007cba 0%, #0066cc 100%);
    color: white;
}

#filterModal .btn-primary-theme:hover {
    background: linear-gradient(135deg, #006aa3 0%, #0056b3 100%);
    box-shadow: 0 4px 16px rgba(0, 124, 186, 0.4);
}

/* Remove old accordion styling */
#filterModal .ac-container {
    background: none;
}

#filterModal .imc-DrawerCheckbox {
    display: none;
}

#filterModal .imc-SingleHeaderStyle {
    display: none;
}

#filterModal .ac-small {
    background: none;
    padding: 0;
}

/* Section separators */
#filterModal .mb-3::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #e2e8f0 50%, transparent 100%);
}

#filterModal .mb-3:last-child::after {
    display: none;
}

/* Mobile responsive */
@media (max-width: 768px) {
    #filterModal .modal-dialog {
        margin: 8px;
        max-width: none;
    }
    
    #filterModal .modal-body {
        padding: 20px 16px;
    }
    
    #filterModal .modal-header,
    #filterModal .modal-footer {
        padding: 16px;
    }
    
    #filterModal .btn {
        width: 100%;
        margin-bottom: 8px;
        white-space: nowrap;
    }
    
    #filterModal .modal-footer {
        flex-direction: column;
    }
    
    #filterModal .imc-grid-6 {
        grid-template-columns: 1fr;
    }

    #filterModal .mb-3 {
        padding: 15px 5px;
        margin-bottom: 15px;
    }

    .imc-OverviewListCategoryIcon {
        height: 22px;
    }

    /* Force single column for category checkboxes */
    #imcCatCheckboxes {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    /* Smaller icons on mobile */
    .dtfix-checkbox__icon-img {
        width: 35px !important;
        height: 35px !important;
    }

    .dtfix-checkbox--child .dtfix-checkbox__icon-img {
        width: 32px !important;
        height: 32px !important;
    }

    .dtfix-checkbox--grandchild .dtfix-checkbox__icon-img {
        width: 28px !important;
        height: 28px !important;
    }

    /* Better spacing for checkboxes on mobile */
    .dtfix-checkbox--with-icon {
        padding: 8px !important;
        margin-bottom: 4px;
    }

    /* Status checkboxes single column */
    #imcStatusCheckboxes {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .dtfix-checkbox--status {
        width: 100%;
        margin: 4px 0 !important;
    }
}

.issue-photo img{
    width: 100%;
    width: -moz-available;
    width: -webkit-fill-available;
    width: stretch;
    object-fit: cover;
    height: 130px;
}

/* Category Icons in Filter Modal */
.dtfix-checkbox--with-icon {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    transition: background-color 0.2s;
}

.dtfix-checkbox--with-icon:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.dtfix-checkbox__icon-img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.dtfix-checkbox--child .dtfix-checkbox__icon-img {
    width: 45px;
    height: 45px;
}

.dtfix-checkbox--grandchild .dtfix-checkbox__icon-img {
    width: 40px;
    height: 40px;
}

/* Improve checkbox label spacing when icon exists */
.dtfix-checkbox--with-icon .dtfix-checkbox__label {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
}

.dtfix-checkbox--child.dtfix-checkbox--with-icon .dtfix-checkbox__label {
    font-size: 13px;
    font-weight: 400;
}

.dtfix-checkbox--grandchild.dtfix-checkbox--with-icon .dtfix-checkbox__label {
    font-size: 12px;
    font-weight: 400;
}

/* Select All checkbox styling */
.dtfix-checkbox--select-all {
    padding: 10px 12px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 2px dashed #dee2e6;
    margin-bottom: 8px;
}

.dtfix-checkbox--select-all:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}

/* Status checkboxes with background color */
.dtfix-checkbox--status {
    padding: 10px 12px;
    border-radius: 8px;
    transition: all 0.3s;
    margin: 4px;
    border: 2px solid transparent;
}

.dtfix-checkbox--status input:checked ~ .dtfix-checkbox__label {
    font-weight: 600;
    color: white !important;
}

.dtfix-checkbox--status input:checked {
    & ~ .dtfix-checkbox__label,
    & ~ .dtfix-checkbox__control {
        color: white;
    }
}

/* Apply background color when checked */
.dtfix-checkbox--status:has(input:checked) {
    border-color: currentColor;
}

.form-floating>.form-control-plaintext~label, .form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label {
    opacity: .65;
    transform: scale(.85) translateY(-0.3rem) translateX(2rem);
}