body {
    /*background-color: #ffff;*/
    font-family: 'Roboto', sans-serif;
}


.clock {

    /*transform: translateX(-50%) translateY(-50%);*/
    color: #000000;
    font-size: 22px;
    font-family: 'Palanquin', sans-serif;
    letter-spacing: 1px;
}

.logo {

    font-family: 'Palanquin', sans-serif;
    font-size: 15px !important;
}

#summary tr td {

    border-style: solid;
    border-width: 1px;
    border-color: #000;
    border-radius: 10px;
}

.test-tooltip:hover {
    background-color: #000;
    border-color: #0a53be;
    color: #ffffff;
}

.okno {
    border-radius: 0px;
    box-shadow: 0px 0px 3px #ffffff;
    /*background-color: #fff;*/
    /*border:1px solid #000;*/
    padding: 0px !important;
}

.okno:hover {
    border-radius: 5px;
    /*box-shadow: 0px 0px 3px #000000;*/
    /*background-color: #fff3cd;*/
}

.node-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    /*justify-content: center;*/
    margin-bottom: 0px;
    transition: background-color 0.5s ease;
    background-color: #ccc;
    border-bottom: 1px solid #000;

}

.node-container.active {
    /* background color when a node is selected */
    background-color: #f0f0f0;
}


.node {
    order: 1;
    background-color: #f0f0f0;
    padding: 10px 20px;
    margin: 5px;
    border: 2px solid #555555;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.3s;
    transition: transform 2s ease;
    z-index: 1000;
    font-size: 12px;
}

.node:after {
    /*transform: translateX(15%);*/
    background-color: #fff;
    z-index: 1000;
}

.node:hover {
    background-color: #000000;
    color: #ffffff;
    box-shadow: 0px 0px 3px #ff0000;
}

.node.selected {
    width: 110px;
    order: 0;
    background-color: #fff;
    /*background-image: linear-gradient(to right, #ffffff, #ffefff, #ffdce3, #ffd3aa, #ffdc73, #ffe25e, #fbe847, #f5ef27, #fae438, #fdd946, #fdce53, #fbc55f);*/
    border: 2px solid #000;
    border-radius: 30px;
    margin-right: 20px;
    transform: translateX(-15%);
    transition: transform 1s ease-in-out;
    z-index: 1000;
    box-shadow: 0px 0px 3px #ff0000;
}


.node.selected:after {
    content: "Selected";
    font-size: 9px;
    color: green;
    position: absolute;
    top: -15px;
    left: 0px;
    /*background-image: linear-gradient(to right, #ffffff, #edffff, #c7ffff, #beffe7, #e7ffb1);*/
    background-color: #fff;
    /*height: 49px;*/
    width: 100px;
    z-index: -1;
    border-radius: 30px;
    border: 2px solid #adadad;
}

.node.selected:hover {
    background-color: #000000;
    color: #ffffff;
    border: 2px solid red;
    border-radius: 30px;
}

.phase {
    background-color: #fff;
    box-shadow: 1px 2px 3px #ccc;
    color: #000;
    position: relative;
    width: 80px;

    border-radius: 0px 10px 10px 0px;
    font-size: 10px;
    margin-right: 28px;
}

.phase.selected {
    margin-right: 0px;
    background-color: #777;
    box-shadow: 1px 2px 3px #ccc;
    color: #ff0000;
    position: relative;
    width: 150px;
    left: -67px;
    border-radius: 0px 10px 10px 0px;
}


#app {
    /*<!-- display: flex;*/
    /*--> flex-direction: column;*/
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-family: Arial, sans-serif;
    /*margin: 10px;*/
    /*border-radius: 10px;*/
    /*border: 1px solid #000;*/
    /*padding-top: 40px;*/
}


#summary {
    margin-top: 20px;
}

button {
    margin-top: 20px;
    padding: 10px 20px;
    cursor: pointer;
}

table {
    width: 100%;
    border-collapse: unset !important;
    /*margin-top: 20px;*/
    border: 1px solid #ddd;
}

th, td {
    padding: 8px 15px;
    border: 1px solid #ddd;
    text-align: left;
}

thead {
    background-color: #cccccc;
    border: 1px solid #000;
}

#main-container {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

#app-container {
    /*--width: 35%;*/
    /*--background-color: #fcfbea;*/
    /*padding: 10px;*/
    /*margin: 10px;*/
    /*border-radius: 10px;*/
}

#table-container {
    /*!*width: 65%;*!*/
    /*border-radius: 10px;*/
    /*background-color: #fff;*/
    /*border: 1px solid #000;*/
    /*padding: 10px;*/
    /*margin: 10px;*/
    overflow-y: auto; /* To ensure scrollability if the table grows too long */
}

#table-container thead {
    font-size: 10px;
    padding: 0px;
}

/* Tooltip container */
.test-tooltip {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.test-tooltip .tooltiptext {
    visibility: hidden;
    width: 220px;
    min-height: 300px;
    background-color: black;
    color: #fff;
    text-align: justify;
    border-radius: 6px;
    padding: 5px 5px;
    /*position: relative;*/

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

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

/* Tooltip container */
.tooltip-row {
    position: relative; /* Required for absolute positioning of the tooltip */
}

/* Tooltip text */
.tooltip-row .tooltip-text {
    visibility: hidden;
    width: 220px;
    min-height: 300px;
    background-color: black;
    color: white;
    text-align: center;
    border-radius: 6px;
    padding: 5px;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: 100%; /* Show below the row */
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap; /* Keep the tooltip text on a single line */
}

/* Tooltip visibility on row hover */
.tooltip-row:hover .tooltip-text {
    visibility: visible;
}


/* The rest of your existing styles */

#progress {
    width: 10px;
    height: 2px;
    background: red;
    position: relative;
    animation: myfirst 3s 1000;
    animation-direction: normal;
}

#progress2 {
    width: 10px;
    height: 2px;
    background: red;
    position: relative;
    animation: myfirst 4s 1000;
    animation-direction: normal;
}

@keyframes myfirst {
    0% {
        background: green;
        left: 0px;
        top: 0%;
    }
    /*25%  {background: yellow; left: 20%; top: 0px;}*/
    /*50%  {background: blue; left: 50%; top: 0px;}*/
    /*75%  {background: green; left: 70%; top: 0px;}*/
    100% {
        background: black;
        left: 97%;
        top: 0px;
    }
}

#container {
    height: 800px;
}

#container1 {
    height: 400px;
}

#container2 {
    height: 400px;
}