/*
 * ============================
 * Page Style Start - GMH Controls
 * ============================
*/

/*
 * Button Styling for Controls:
 * Applies to: .plus-gmh, .minus-gmh, .home-gmh, .fullscreen-gmh
 * Container: #html-content-gmh
*/
#html-content-gmh .plus-gmh,
#html-content-gmh .minus-gmh,
#html-content-gmh .home-gmh,
#html-content-gmh .fullscreen-gmh {
    padding: 8px 10px;                    /* Inner spacing */
    background-color: #ebeced;          /* Light grey background */
    border: 1px solid #FFFFFF;          /* White border */
    border-radius: 3px;                   /* Slightly rounded corners */
    width: fit-content;                   /* Fit content width */
    outline: none;                        /* Remove outline on focus */
    cursor: pointer;                      /* Pointer cursor on hover */
    margin-bottom: 5px;                   /* Space below buttons */
    cursor: pointer;
}

/*
 * Image Styling Inside Buttons:
 * Applies to: img tags inside each control button
*/
#html-content-gmh .plus-gmh img,
#html-content-gmh .minus-gmh img,
#html-content-gmh .home-gmh img,
#html-content-gmh .fullscreen-gmh img {
width: 15px;                              /* Set icon size */
    display: flex;                        /* Flex for alignment */
    align-items: center;                  /* Center vertically */
    justify-content: center;              /* Center horizontally */
}

/*
 * ============================
 * Page Style End - GMH Controls
 * ============================
*/

/*
 * ============================
 * ToolTip CSS Start - GMH
 * ============================
*/

/*
 * Default Tooltip Styling
 * Selector: #tooltip-gmh
 * Purpose: Styles for the tooltip element shown on hover/focus
*/
 #tooltip-gmh {
    font: 12px 'Poppins', sans-serif;               /* Font size and family */
    display: none;                                  /* Hidden by default */
    max-width: 40%;                                 /* Responsive width */
    padding: 10px;                                  /* Inner spacing */
    border-radius: 5px;                             /* Rounded corners */
    color: black;                                 /* Text color */
    z-index: 1060;                                  /* Layer above other elements */
    position: absolute;                             /* Positioned relative to parent */
    background: #fff;                             /* White background */
    word-break: keep-all;                           /* Prevent word breaking */
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);      /* Drop shadow */
    -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); /* Firefox-specific shadow */
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); /* Safari/Chrome-specific */
    z-index: 99999999;
}

/*
 * Custom Tooltip Styling
 * Selector: #custom-tooltip-gmh
 * Purpose: Alternative tooltip element, may be dynamically injected
*/
#custom-tooltip-gmh {
    z-index: 99999999;                                  /* High stacking order */
    position: absolute;                             /* Absolute positioning */
    border-radius: 5px;                             /* Rounded corners */
    background-color: #fff;                         /* White background */
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);      /* Shadow for depth */
    -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); /* Firefox-specific shadow */
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); /* Safari/Chrome-specific */
}

/*
 * ============================
 * ToolTip CSS End - GMH
 * ============================
*/

/*
 * ============================
 * Design One Start - GMH
 * ============================
*/

/*
 * Container Styling
 * Selector: .design-one-gmh
 * Purpose: Base container for design one layout
*/
.design-one-gmh {
    max-width: 300px;                      /* Restrict max width */
    background-color: #fff;              /* White background */
    padding: 10px;                         /* Inner spacing */
    border-radius: 5px;                    /* Rounded corners */
}

/*
 * Heading Styling
 * Selector: .heading-gmh
 * Purpose: Title section inside the design box
*/
.design-one-gmh .heading-gmh {
    margin: 0;                            /* Remove default margin */
    margin-bottom: 10px;                  /* Space below heading */
    text-transform: uppercase;            /* Uppercase text */
    font-size: 16px;                      /* Font size */
    color: #444;                        /* Text color */
}

/*
 * Description Wrapper
 * Selector: .description-wrapper-gmh
 * Purpose: Container for image and paragraph
*/
.design-one-gmh .description-wrapper-gmh {
    margin-bottom: 10px;                 /* Spacing below content */
}

/*
 * Image Styling Inside Description
 * Selector: img inside .description-wrapper-gmh
*/
.design-one-gmh .description-wrapper-gmh img {
    width: 140px;                        /* Fixed image width */
    float: left;                         /* Float image left */
    margin: 0 10px 0 0;                  /* Margin to the right of image */
}

/*
 * Paragraph Styling Inside Description
 * Selector: p inside .description-wrapper-gmh
*/
.design-one-gmh .description-wrapper-gmh p {
    margin: 0;                           /* Remove default margin */
    color: #777;                       /* Gray text */
    font-size: 12px;                     /* Small font */
}

/*
 * Tab Navigation Wrapper
 * Selector: .nav-tabs-gmh
 * Purpose: Container for tab content
 */
.design-one-gmh .nav-tabs-gmh {
    width: 100%;                         /* Full width container */
    /* float: left; */                   /* Optional float, currently disabled */
}

/*
 * Tab Heading Styling
 * Selector: .tab-heading-gmh
*/
.design-one-gmh .nav-tabs-gmh .tab-heading-gmh {
    background-color: #e0e0e0;         /* Light gray background */
    border-bottom: 1px solid #d8d7d7;  /* Divider line */
    padding: 5px 10px;                   /* Padding around heading */
    text-transform: uppercase;           /* Uppercase tab headings */
    font-size: 13px;                     /* Slightly smaller font */
}

/*
 * Tab Paragraph Styling
 * Selector: .tab-para-gmh
*/
.design-one-gmh .nav-tabs-gmh .tab-para-gmh {
    color: #777;                       /* Gray text */
    font-size: 12px;                     /* Font size */
    padding: 10px;                       /* Padding inside tab content */
}
/*
 * ============================
 * Design One End - GMH
 * ============================
*/


/*
 * ============================
 * Design Two Start - GMH
 * ============================
*/

/*
 * Container Styling
 * Selector: .design-two-gmh
 * Purpose: Base box container for design two layout
*/
.design-two-gmh {
    max-width: 280px;                    /* Maximum width constraint */
    border-radius: 5px;                  /* Rounded corners */
    background-color: #fff;            /* White background */
}

/*
 * Image Wrapper Styling
 * Selector: .image-wrapper-gmh
 * Purpose: Holds and styles the top image section
*/
.design-two-gmh .image-wrapper-gmh {
    width: 100%;                         /* Full width */
    margin: 0;                           /* Remove margin */
    padding: 0;                          /* Remove padding */
    height: 11rem;                       /* Fixed height for image area */
}

/*
 * Image Styling
 * Selector: img inside .image-wrapper-gmh
 * Purpose: Makes image fully cover the container
*/
.design-two-gmh .image-wrapper-gmh img {
    height: 100%;                        /* Full height */
    width: 100%;                         /* Full width */
    object-fit: cover;                   /* Cover the entire area proportionally */
    border-top-left-radius: 5px;         /* Match container's rounded corners */
    border-top-right-radius: 5px;
}

/*
 * Description Wrapper Styling
 * Selector: .description-wrapper-gmh
 * Purpose: Container for text details below the image
*/
.design-two-gmh .description-wrapper-gmh {
    padding: 10px 20px;                 /* Inner spacing */
}

/*
 * Subheading Styling
 * Selector: .subheading-gmh
*/
.design-two-gmh .description-wrapper-gmh .subheading-gmh {
    margin: 0;                           /* Remove default margin */
    margin-bottom: 10px;                 /* Spacing below */
    text-align: center;                  /* Center-aligned text */
    color: #777;                       /* Light gray color */
}

/*
 * Heading Styling
 * Selector: .heading-gmh
*/
.design-two-gmh .description-wrapper-gmh .heading-gmh {
    margin: 0;
    margin-bottom: 10px;
    text-align: center;                 /* Center heading text */
    text-transform: uppercase;          /* Make text uppercase */
    color: #444;                      /* Dark gray text */
}

/*
 * Paragraph Styling
 * Selector: p inside .description-wrapper-gmh
*/
.design-two-gmh .description-wrapper-gmh p {
    margin: 0;
    margin-bottom: 10px;
    font-size: 12px;                    /* Small font size */
    color: #777;                      /* Gray color for readability */
}

/*
 * ============================
 * Design Two End - GMH
 * ============================
*/

/*
 * ============================
 * Design Three Start - GMH
 * ============================
 */

/*
 * Container Styling
 * Selector: .design-three-gmh
 * Purpose: Main wrapper for the third design layout
*/
.design-three-gmh {
    max-width: 280px;                   /* Restrict maximum width */
    border-radius: 5px;                 /* Rounded corners */
    position: relative;                 /* Needed for positioning children */
}

/*
 * Image Wrapper Styling
 * Selector: .image-wrapper-gmh
 * Purpose: Fixed-size container for image content
*/
.design-three-gmh .image-wrapper-gmh {
    width: 15rem;                       /* Fixed width for image */
    height: 10rem;                      /* Fixed height for image */
}

/*
 * Image Styling
 * Selector: img inside .image-wrapper-gmh
 * Purpose: Ensure image fills and fits container proportionally
*/
.design-three-gmh .image-wrapper-gmh img {
    width: 100%;                        /* Fill width */
    height: 100%;                       /* Fill height */
    object-fit: cover;                  /* Maintain aspect ratio while covering area */
    border-radius: 5px;                 /* Rounded corners */
}

/*
 * Info Wrapper Styling
 * Selector: .info-wrapper-gmh
 * Purpose: Container for info tags/buttons displayed on image
*/
.design-three-gmh .info-wrapper-gmh {
    position: absolute;                /* Position over the image */
    bottom: 5px;                       /* Offset from bottom */
    right: 5px;                        /* Offset from right */
    display: flex;                     /* Flex layout for child items */
    align-items: center;               /* Vertically center items */
    flex-wrap: wrap;                   /* Wrap items if needed */
    width: 100%;                       /* Match full width */
    gap: 5px;                          /* Space between info elements */
    justify-content: end;              /* Align items to right */
}

/*
 * Individual Info Box Styling
 * Selector: .info-gmh inside .info-wrapper-gmh
 * Purpose: Style for individual info elements displayed on image
*/
.design-three-gmh .info-wrapper-gmh .info-gmh {
    border: 1px solid #fff;          /* White border for visibility */
    border-radius: 5px;                /* Rounded corners */
    padding: 5px 10px;                 /* Inner spacing */
    font-size: 12px;                   /* Small readable text */
    color: #fff;                     /* White text color */
    background-color: transparent;     /* Transparent background */
}

/*
 * ============================
 * Design Three End - GMH
 * ============================
*/

/*
 * ============================
 * Design Four Start - GMH
 * ============================
*/

/*
 * Main Container
 * Selector: .design-four-gmh
 * Purpose: Wraps image and content in a horizontal card layout
*/
.design-four-gmh {
    display: flex;                     /* Horizontal layout */
    align-items: start;                /* Align items to top */
    background: white;               /* White background */
    width: fit-content;                /* Fit width to content */
    padding: 15px;                     /* Internal spacing */
    border-radius: 5px;                /* Rounded corners */
}

/*
 * Image Wrapper (Left Side)
 * Selector: .left-image-wrapper-gmh
 * Purpose: Holds and sizes the left-aligned image
*/
.design-four-gmh .left-image-wrapper-gmh {
    height: 5rem;                      /* Fixed height */
    margin-right: 15px;                /* Space to the right of the image */
}

/*
 * Image Styling
 * Selector: img inside .left-image-wrapper-gmh
 * Purpose: Makes the image fit and look clean
*/
.design-four-gmh .left-image-wrapper-gmh img {
    width: 100%;                       /* Full width of container */
    height: 100%;                      /* Full height of container */
    object-fit: contain;               /* Contain image within space */
    border-radius: 5px;                /* Rounded corners */
}

/*
 * Content Wrapper (Right Side)
 * Selector: .right-content-wrapper-gmh > *
 * Purpose: Reset margin for all direct children (like headings, paragraphs)
*/
.design-four-gmh .right-content-wrapper-gmh > * {
    margin: 0;                         /* Remove default spacing */
}

/*
 * Paragraph Styling
 * Selector: .right-content-wrapper-gmh p
 * Purpose: Style for textual content in the right section
*/
.design-four-gmh .right-content-wrapper-gmh p {
    font-size: 12px;                  /* Small text size */
    color: #777;                    /* Soft gray text */
    margin: 0 !important;             /* Remove default spacing */
}

/*
 * Last Paragraph Margin Reset
 * Selector: .right-content-wrapper-gmh p:last-child
 * Purpose: Remove margin bottom for the last paragraph
*/
.design-four-gmh .right-content-wrapper-gmh p:last-child {
    margin-bottom: 0;
}

/*
 * Responsive Adjustment
 * Selector: @media (max-width: 992px)
 * Purpose: Stack elements vertically on smaller screens
 */
@media ( max-width: 992px ) {
    .design-four-gmh {
        flex-direction: column;       /* Stack items vertically */
    }
}

/*
 * ============================
 * Design Four End - GMH
 * ============================
*/

/*
 * ===============================
 * Text Element User-Select Control
 * ===============================
*/

/*
 * Selector: text
 * Purpose: Prevent users from selecting the text content
 * Compatibility: Covers all major browsers
*/
text {
    user-select: none;              /* Standard syntax */
    -webkit-user-select: none;      /* Safari */
    -moz-user-select: none;         /* Firefox */
    -ms-user-select: none;          /* Internet Explorer / Edge */
}

/*
 * ============================
 * Colored Legend Styling Start
 * ============================
*/

/*
 * Container for the colored legend layout within #html-content-gmh
 * Reverses direction and adds spacing between items.
*/
.color-legend-gmh:has(svg) #html-content-gmh {
    display: flex !important;
    justify-content: space-between;
    flex-direction: row-reverse;
    margin-bottom: 5px;
}

/*
 * Marker box styling used inside the SVG container.
 * Designed as a clickable item with centered content and no default styles.
*/
.svg-container-gmh .marker-box-gmh {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    background: none;
    border: none;
    outline: none;
    position: relative;
    width: fit-content;
    cursor: pointer;
}

/*
 * Overrides marker color to gray when in 'inactive' state.
*/
.svg-container-gmh .marker-box-gmh.inactive .marker-color-box-gmh {
    background-color: #999 !important;
}

/*
 * Default colored square box inside the marker for legend display.
*/
.svg-container-gmh .marker-box-gmh .marker-color-box-gmh {
    height: 20px;
    width: 20px;
    border-radius: 3px;
}

/*
 * Adds spacing between legend markers except the first one.
*/
.svg-container-gmh .marker-box-gmh:not(:first-child) {
    margin-top: 5px;
}

/*
 * ==========================
 * Colored Legend Styling End
 * ==========================
*/

/*
 * ============================
 * Live Filter Styling Start
 * ============================
*/

/*
 * Base styling for live filter buttons.
 * Provides padding, rounded corners, neutral background, and interactive cursor.
*/
 .live-filter-gmh {
    padding: 0.5rem 1rem;
    border: none;
    outline: none;
    background: #ddd;
    color: black;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 5px;
}

/*
 * Active state styling for live filter buttons.
 * Highlights selected filter with a green background and white text.
*/
.live-filter-gmh.active {
    background: #2CA25F;
    color: white;
}

/*
 * ==========================
 * Live Filter Styling End
 * ==========================
*/

/*
 * ======================================
 * Heat Map Gradient Line Styling Start
 * ======================================
*/

/*
 * Wrapper for the heatmap gradient line.
 * Aligns child elements horizontally to the end of the container.
*/
.heatmap-gradient-line-wrapper-gmh {
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
 * Applies horizontal spacing between the elements inside the wrapper.
*/
.heatmap-gradient-line-wrapper-gmh > * {
    margin-left: 10px;
}

/*
 * Styles the gradient line element that represents the heatmap scale.
*/
.heatmap-gradient-line-wrapper-gmh .gradient-line-gmh {
    width: 300px;
    height: 20px;
}

/*
 * ====================================
 * Heat Map Gradient Line Styling End
 * ====================================
*/
/*
 * ============================
 * Form Control Styling Start
 * ============================
 */

/*
 * Base styling for a custom input field.
 * Ensures block-level display and consistent padding/font.
*/
 .form-control-gmh {
    display: block;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box; /* Prevents background bleed through border */
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; /* Smooth transition on focus */
}

/*
 * Focus state styling for input field.
 * Highlights the border and adds a subtle blue glow.
*/
.form-control-gmh:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff; /* Blue border on focus */
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Soft blue shadow */
}

/*
 * ==========================
 * Form Control Styling End
 * ==========================
*/

/*
 * ================================
 * Download Button Styling
 * ================================
 */

/* Style for the download image button */
.download-image-gmh {
    width: 40px;
    background: #f2f2f2;
    border-radius: 5px;
    padding: 4px;
    cursor: pointer;
}

/*
 * ================================
 * Dropdown Menu Styling
 * ================================
 */

/* Wrapper for the dropdown menu, hidden by default */
.svg-container-gmh .dropdown-wrapper-gmh {
    position: absolute;
    top: 1rem;
    display: none;
    z-index: 999;
}

/* Content box inside the dropdown */
.dropdown-content-gmh {
    background: #f2f2f2;
    border-radius: 5px;
    padding: 1rem 2rem;
    color: #272c30;
    margin-top: 4px;
    cursor: pointer;
    width: 7rem;
    margin-left: 3rem;
}

/* Hover effect for dropdown items */
.dropdown-content-gmh:hover {
    background-color: #EBECED;
}


/*
 * ================================
 * Dropdown Submenu Styling
 * ================================
 */

/* Submenu hidden by default and positioned next to the main menu */
.dropdown-submenu-gmh {
    display: none;
    position: absolute;
    top: 1rem;
    left: 10.75rem;
    /* display: flex; */
    flex-direction: column;
    z-index: 999;
}

/* Style for submenu buttons */
.dropdown-submenu-gmh button {
    background: #f2f2f2;
    border-radius: 5px;
    padding: 1rem 2rem;
    color: #272c30;
    margin-top: 4px;
    cursor: pointer;
    outline: none;
    border: none;
    width: 6rem;
}

/* Hover effect for submenu buttons */
.dropdown-submenu-gmh button:hover {
    background-color: #EBECED;
}