body {

}

.imageleft, .imageright {
    display: flex;
    width: 100%;
    flex: 1 1 0px;
    gap:10px;
}
    .imageleft > div, .imageright > div {
        flex: 1 1 0px;
    }

    .imageleft > div > img, .imageright > div > img {
        max-width: 100%;
    }

.imageleft {
    flex-direction: row;
}
.imageright {
    flex-direction: row-reverse;
}
.heading h4, .heading div {
    display: inline-block;
}

.mytooltip {
    width: 6vw;
    max-width: 32px;
    height: 6vw;
    max-height: 32px;
    position: relative;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: top;
}
.mytooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
    border-image: url('../assets/main layout/31.png');
    border-image-width: 15px 15px 15px 15px;
    border-block-style: solid;
    border-image-slice: 27 27 27 27 fill;
}

.mytooltip:hover .tooltiptext {
    visibility: visible;
}

.inprogress {
    background-image: url('../assets/help/gears.png');
}
.completed {
    background-image: url('../assets/help/jediemblem.png');
    vertical-align: top;
}

.legacy-header {
    width: 100%;
    background-image: url(../assets/roadmap/top_gradient_space5.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 6.4vw;
    max-height: 60px;
    background-position-y: bottom;
    box-sizing: border-box;
    font-size: min(3vw, 24px);
    text-shadow: 1px 1px 2px #000;
    text-transform: uppercase;
    color: #FFCC00;
    display: flex;
    line-height: 1.9;
}

    .legacy-header > div {
        background-image: url('../assets/help/jediemblem.png');
        width: 6vw;
        background-size: contain;
        padding-top: 5%;
        max-width: 55px;
        margin: 3px 3px;
        background-repeat: no-repeat;
    }

.legacy-container {
    font-size: min(2.5vw, 20px);
    box-sizing: border-box;
    padding: 1% 2% 0 2%;
    width: 100%;
    background-image: url(../assets/roadmap/skymesh_startile.png), url(../assets/roadmap/body_gradient_space2.png);
    background-size: auto, 100% 100%;
    background-repeat: repeat, repeat-y;
    border: 10px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: border-box;
}

.legacy-footer {
    width: 100%;
    background-image: url(../assets/roadmap/Bottom_Gradient_space2.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-top: 2%;
}
td {
    padding: 0 5%;
}

.date {
    text-align: right;
}

.LegacyDownload {
    color: #FFFFFF;
    border-image: url('../assets/roadmap/purplebuttonstatic.png');
    border-image-slice: 11 13 19 15 fill;
    border-image-width: 10px 10px 10px 10px;
    padding: 5px 15px
}

    .LegacyDownload:hover {
        color: #ad6ceeff
    }


@media (max-width: 768px) {

    .imageright, .imageleft {
        flex-direction: column;
    }
}