TRIMSP/ZGUI.css

* {
    box-sizing: border-box;
}

td {
    white-space: wrap;
}

.guitable {
    background-color: #DDDDDD;
    border: 1px solid #000000;
    /*  border-collapse: collapse; */
    border-radius: 10px;
    border: none;
    border-spacing: 0px;
    padding: 5px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.guitable tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}

.guitable tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}

.guitable tr:first-child td:first-child {
    border-top-left-radius: 12px;
}

.guitable tr:first-child td:last-child {
    border-top-right-radius: 12px;
}

.guitable tr:nth-child(odd) {
    background-color: #DDDDDD;
}

.guitable tr:nth-child(even) {
    background-color: #DDDDDD;
}

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}

@media only screen and (min-width: 700px) {

    /* For tablets: */
    .col-s-1 {
        width: 50%;
        background-color: #DDDDDD;
    }

    .col-s-2 {
        width: 50%;
        background-color: #DDDDDD;
    }

    .col-s-full {
        width: 100%;
        background-color: #F2F2F2;
    }

    [class*="col-"] {
        width: 100%;
    }

    @media only screen and (min-width: 990px) {

        /* For desktop: */
        .col-1 {
            width: 50%;
            background-color: #F2F2F2;
        }

        .col-2 {
            width: 50%;
            background-color: #F2F2F2;
        }

        .col-full {
            width: 100%;
            background-color: #F2F2F2;
        }
    }

    [class*="col-"] {
        float: left;
        padding: 5px;
        border: none;
    }

    .row::after {
        content: "";
        clear: both;
        display: table;
    }

    .transient-warning {
        position: fixed;
        max-width: 360px;
        padding: 10px 14px;
        background-color: #fff4cc;
        border: 1px solid #c5a100;
        border-radius: 8px;
        color: #4d3b00;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
        font-size: 0.95rem;
        line-height: 1.35;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
        z-index: 1000;
    }

    .transient-warning.visible {
        opacity: 1;
    }

    .estimated-density {
        background-color: #fff4cc;
        border: 1px solid #c5a100;
    }

    .status-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 8px 16px;
        align-items: center;
        padding: 8px 14px;
        background-color: #eef2f5;
        border-top: 1px solid #b8c3cc;
        color: #23313d;
        font-size: 0.88rem;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
        z-index: 900;
    }

    .status-item {
        min-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .status-item strong {
        color: #10202c;
    }

    .status-progress {
        flex: 1 1 260px;
        min-width: 220px;
    }

    .status-progress-track {
        width: 100%;
        height: 22px;
        background-color: #d7dee5;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid #b8c3cc;
    }

    .status-progress-fill {
        width: 0%;
        height: 100%;
        background-color: #2e8b57;
        color: black;
        padding-left: 3px;
        text-align: center;
        line-height: 20px;
        font-size: 0.78rem;
        font-weight: 600;
        transition: width 0.2s ease;
    }

    .group_name {
        padding-left: 1em;
        padding-right: 1em;
        font-size: 105%;
        font-weight: bold;
        width: 1%;
        white-space: nowrap;
        /* text-align: center; */
    }

    .yellow_td {
        padding-left: 1em;
        padding-right: 1em;
        background-color: yellow;
        width: 1%;
        white-space: nowrap;
    }

    .gray_td {
        padding-left: 1em;
        padding-right: 1em;
        background-color: gray;
        width: 1%;
        white-space: nowrap;
    }

    .nocol_td {
        padding-left: 1em;
        padding-right: 1em;
        width: 1%;
        white-space: nowrap;
    }

    /* Style the tab */
    .tab {
        overflow: hidden;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
    }

    /* Style the buttons that are used to open the tab content */
    .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
        font-size: 105%;
        font-weight: bold;
    }

    /* Change background color of buttons on hover */
    .tab button:hover {
        background-color: #ddd;
    }

    /* Create an active/current tablink class */
    .tab button.active {
        background-color: #ccc;
    }

    /* Style the tab content */
    .tabcontent {
        display: none;
        padding: 6px 12px;
        border: 1px solid #ccc;
        border-top: none;
    }

    /* Go from zero to full opacity */
    @keyframes fadeEffect {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* Chrome, Safari, Opera */
    @-webkit-keyframes example {
        0% {
            background-color: red;
            left: 20px;
            top: 0px;
        }

        25% {
            background-color: orange;
            left: 25px;
            top: 0px;
        }

        50% {
            background-color: green;
            left: 30px;
            top: 0px;
        }

        75% {
            background-color: orange;
            left: 25px;
            top: 0px;
        }

        100% {
            background-color: red;
            left: 20px;
            top: 0px;
        }
    }

    /* Standard syntax */
    @keyframes example {
        0% {
            background-color: red;
            left: 20px;
            top: 0px;
        }

        25% {
            background-color: orange;
            left: 25px;
            top: 0px;
        }

        50% {
            background-color: green;
            left: 30px;
            top: 0px;
        }

        75% {
            background-color: orange;
            left: 25px;
            top: 0px;
        }

        100% {
            background-color: red;
            left: 20px;
            top: 0px;
        }
    }

    #myBar {
        width: 10%;
        height: 30px;
        background-color: #4CAF50;
        text-align: center;
        /* To center it horizontally (if you want) */
        line-height: 30px;
        /* To center it vertically */
        color: white;
    }

    /* Tooltip container */
    .tooltip {
        position: relative;
        display: inline-block;
        /* border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
    }

    /* Tooltip text */
    .tooltip .tooltiptext {
        visibility: hidden;
        width: 320px;
        background-color: black;
        color: #fff;
        text-align: left;
        padding: 5px;
        border-radius: 6px;

        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
    }

    /* Show the tooltip text when you mouse over the tooltip container */
    .tooltip:hover .tooltiptext {
        visibility: visible;
    }
}