.line_box {
    display: flex;
    margin-bottom: 40px;
}
.text_circle {
    flex: 1;
    text-align: center;
    position: relative;
}
.text_circle:after {
    background-color: grey;
    bottom: 1.25em;
    content: "";
    display: block;
    height: 3px;
    position: absolute;
    right: 0;
    width: 50%;
    z-index: -1;
}
.stav_projektu .text_circle:after,.stav_projektu .text_circle:before {background-color: grey;}
.line_box h4 {
    color: #189599;
    font-weight: bold;
}
.line_box h4,.line_box p {
    font-size: 12px;
    margin-bottom: 0;
    padding: 0 5px;
}
.subline {
    position: absolute;
    right: -25px;
    bottom: -43%;
}
.subline:before {
    content: "";
    position: absolute;
    height: 15px;
    width: 15px;
    bottom: 14px;
    right: 15px;
    background-color: #189599;
    border-radius: 50%;
    top: -25px;
}
.subline h6 {margin-bottom: 0;}
.timeline {margin: 40px 0;}
.text_circle.done:after,.text_circle.done + .text_circle:before,.stav_projektu .text_circle.done:after,.stav_projektu .text_circle.done + .text_circle:before {background-color: #189599;}
.text_circle.sub:after {background-color: #189599;}
.text_circle:not(:first-child):before {
    bottom: 1.25em;
    content: "";
    display: block;
    height: 3px;
    position: absolute;
    left: 0;
    width: 50%;
    z-index: -1;
    background-color: grey;
}
.stav_projektu .text_circle:not(:first-child):before {background-color: grey;}
.text_circle:last-child:after {width: 0;}
.circle {height: 100%;}
.tvar {
    height: 40px;
    width: 40px;
    border: 2px solid #189599;
    display: flex;
    position: relative;
    border-radius: 100%;
    top: -43px;
    margin: 3px auto;
    background-color: #fff;
}
.tvar span {
    margin: 25% auto;
    height: 20px;
    width: 20px;
    background-color: #189599;
    border-radius: 100%;
    color: #fff;
}
.stav_projektu .tvar {border: 2px solid grey;}
.stav_projektu .done .tvar,.stav_projektu .sub .tvar {border: 2px solid #189599;}
.subline h6 {color: #189599;}
.timeline .card-header:hover {
    background-color: #ececec;
    cursor: pointer;
}
/* iPhone X ----------------------------------- */
@media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) {
   .subline:before {top: -43px;}
}
@media only screen and (device-width : 812px) and (device-height : 375px) and (orientation : landscape) and (-webkit-device-pixel-ratio : 3) {
   .subline:before {top: -31px;}
}
/* iPad portrait ----------------------------------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
   .subline:before {top: -29px;}
}
/* mobile width till 767px ----------------------------------- */
@media (max-width: 767px){
   .subline:before {top: -30px;}
}
/* Portrait iPad Pro */
@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) {
   .subline:before {top: -23px;}
}
/* mobile width till 480px ----------------------------------- */
@media (max-width: 480px){
   .subline:before {top: -43px;}
}


.product-table {
    background-color: silver;
    color: white;
    border-radius: 4px;
    overflow: hidden;
}
.product-table .row {
    border-bottom: 1px solid #29ABE2;
}
.product-table .row:last-child {
    border-bottom: none;
}
.label-column {
    font-weight: bold;
    text-transform: uppercase;
    padding: 12px 15px;
    color: #000038;
}
.value-column {
    padding: 12px 15px;
}