:root {
    --modal-header-bg-color: #FE28A2; /* Adjusted for specific header color */
    --modal-footer-bg-color: #007bff; /* Dark shade for footer for contrast */
    --modal-padding: 1.5rem;
    --modal-border-color: #dee2e6;
    --footer-padding: 0.5rem; /* Reduced padding for footer */
}

.tsm-system-dialog {
    width: 80vw;
    height: 80vh;
}

    .tsm-system-dialog .modal-header {
        padding: 0.5rem; /* Reduced padding to make the header narrower */
        /* before padding: var(--modal-padding);*/
        background-color: var(--modal-header-bg-color); /* Specific color for header */
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
        border-bottom: 1px solid var(--modal-border-color);
        /* Adjust height as needed, or keep it auto for flexibility */
    }

    .tsm-system-dialog .modal-footer {
        padding: var(--footer-padding); /* Reduced padding */
        background-color: var(--modal-footer-bg-color); /* Specific color for footer */
        color: #fff; /* Ensures footer text is visible against darker background */
        display: flex;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
        border-top: 1px solid var(--modal-border-color);
        /* No fixed height; let it adjust based on button size */
    }

        /* Additional styles for buttons inside the footer for better fit */
        .tsm-system-dialog .modal-footer button {
            margin: 0 0.25rem; /* Ensures buttons don't touch each other or the edges */
        }

    .tsm-system-dialog .modal-dialog {
        max-width: 100%;
        height: 100%;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tsm-system-dialog .modal-content {
        height: calc(100% - (var(--modal-padding) * 2)); /* Adjusted for variable */
        overflow-y: auto; /* Keeps scrollbar for the entire content if needed */
        display: flex;
        flex-direction: column;
        /* direction: rtl; Right-to-left to move scrollbar to left */
    }

    .tsm-system-dialog .modal-body {
        padding-top: 0; /* Ensures no additional padding at the top */
        padding-bottom: 0; /* Ensures no additional padding at the bottom */
        padding-right: var(--modal-padding); /* Applies right padding */
        padding-left: var(--modal-padding); /* Applies left padding */
        /*padding-right: 20px; /* 20px padding to the right */
        /*padding-left: 20px; /* 20px padding to the left to maintain symmetry */
        overflow-y: auto; /* Scrollbar appears if content overflows */
        cursor: default; /* Ensures the cursor remains default over the scrollbar */
    }

/* Styling for error messages with different sizes */
.error-message {
    padding: 0.5rem 1rem;
    margin: 0.5rem 0;
    border-radius: 4px;
    color: var(--error-color);
    background-color: var(--error-background-color);
    border-color: var(--error-border-color);
}

.error-small {
    font-size: 0.8rem;
}

.error-medium {
    font-size: 1rem;
}

.error-large {
    font-size: 1.2rem;
}

/* Customizing the scrollbar width and thumb for webkit browsers */
.modal-body::-webkit-scrollbar {
    width: 24px; /* Narrower scrollbar width for a more refined look */
}

.modal-body::-webkit-scrollbar-thumb {
    background-color: #007bff; /*  for the thumb */
    border-radius: 10px; /* Rounded corners for the thumb */
    border: 4px solid transparent; /* Smaller border for a sleeker thumb */
    background-clip: content-box; /* Ensures the padding doesn't affect the thumb's color */
}

    .modal-body::-webkit-scrollbar-thumb:hover {
        background-color: #FE28A2; /*a vivid pink */
    }
/* #555555;  #2F4F4F; #FE28A2; #686868; #fff; or darkgrey;*/
.modal-body::-webkit-scrollbar-track {
    background: darkgrey;
}

/* Ensure the modal body is a grid container with rows */
.modal-body {
    display: grid;
    gap: 1rem; /* Spacing between rows */
}

/* General styles */
.tsm-grid-layout {
    display: grid;
    gap: 1rem;
}

    /* Styling for the top row with 5 equal columns */
    .tsm-grid-layout.tsm-grid-top-row {
        grid-template-columns: repeat(5, 1fr); /* Five equal columns */
    }

        /* Five columns for the top row */
        .tsm-grid-layout.tsm-grid-top-row > .tsm-grid-item {
            flex: 1; /* Distribute space equally */
        }

    /* Styling for the second row with 5 columns */
    .tsm-grid-layout.tsm-grid-second-row {
        display: grid;
        grid-template-columns: 1fr 1fr 0.75fr 0.75fr 0.75fr 0.75fr;
        grid-template-rows: auto; /* Row height adjusts to content */
        gap: 1rem;
    }

    /* Styling for the middle row with 4 equal columns */
    .tsm-grid-layout.tsm-grid-middle-row {
        grid-template-columns: repeat(4, 1fr); /* Four equal columns */
    }

        /* Four columns for the middle row */
        .tsm-grid-layout.tsm-grid-middle-row > .tsm-grid-item {
            flex: 1; /* Distribute space equally */
        }

    /* A 3x3 grid for the bottom row */
    .tsm-grid-layout.tsm-grid-bottom-row {
        display: grid;
        grid-template-columns: repeat(5, 1fr); /* Three columns */
        grid-template-rows: auto; /* Rows to fit content */
        gap: 1rem; /* Spacing between items */
    }

/* General styling for grid items */
.tsm-grid-item {
    padding: 0.5rem; /* Example padding */
    text-align: center; /* Center text */
    border: 1px solid #dee2e6; /* Example border */
    background: #f8f9fa; /* Example background */
}

/* Image container */
.tsm-style-image {
    grid-column: 1 / 2; /* Image occupies the first column */
    max-height: 200px; /* Max height is the same as the buttons' height */
    width: 100%;
    height: auto;
    object-fit: contain; /* Fit within frame without stretching */
}

.tsm-list-box {
    /* Match the list box height with the image container */
    max-height: 200px; /* Max height is the same as the buttons' height */
    height: auto;
    overflow-y: auto; /* Scrollable content */
    margin-right: 1rem; /* Consistent spacing on the right side */
    padding: 0.5rem; /* Inner padding for the list box */
}

    .tsm-list-box ul {
        list-style: none; /* Remove default list styling */
        padding: 0; /* Remove default padding */
    }

    .tsm-list-box li {
        padding: 0.5rem; /* Add some padding for list items */
        cursor: pointer; /* Change cursor to indicate items are clickable */
    }

        .tsm-list-box li:hover {
            background-color: #e9ecef; /* Highlight on hover for interactivity */
        }

/* Button container styling for all button groups */
.tsm-buttons-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
/* Specific button container styling */
.tsm-buttons-container1 {
    grid-column: 3 / 4;
}
/* Button group 1 takes 0.75fr */
.tsm-buttons-container2 {
    grid-column: 4 / 5;
}
/* Button group 2 takes 0.75fr */
.tsm-buttons-container3 {
    grid-column: 5 / 6;
}
/* Button group 3 takes 0.75fr */
.tsm-buttons-container4 {
    grid-column: 6 / 7;
}
/* Button group 4 takes 0.75fr */

/* Individual button styling */
.tsm-button {
    padding: 0.5rem 1rem;
    margin: 0;
    width: 100%; /* Buttons fill their container */
}