/*layers*/
.status-infographic-wrapper .sprite-wrapper,
.mobile-line {
    z-index: 150;
}
.status-infographic-wrapper .status,
.status-infographic-wrapper .path,
.time-difference,
.timeline-arrival-info {
    z-index: 155;
}
.status-infographic-wrapper .status:hover {
    z-index: 160;
}
.status-infographic-wrapper .status:hover .popup {
    z-index: 165;
}

/*general*/ 
body.infographic-full section#content {
    padding-bottom: 0px;
}
.status-infographic-wrapper {
    position: relative;
    width: 824px;
}
.status-infographic-wrapper.new {
    height: 554px;
    margin: 0 auto;
}
.status-infographic-wrapper .bg {
    width: 100%;
}
.status-infographic-wrapper .sprite-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.status-infographic-wrapper .status,
.status-infographic-wrapper .path {
    position: absolute;
}
.status-infographic-wrapper .status {
    cursor: pointer;
    width: 100px;
}
.status-infographic-wrapper .status .text {
    text-transform: uppercase;
    text-align: left;
    color: white;
    font-weight: 600;
    margin-top: -30px;
    font-size: 12px;
    line-height: 13px;
    opacity: .8;
    position: relative;
    border-radius: 5px;
    padding: 5px;
}
.status-infographic-wrapper .status .text .sprite-symbol {
    position: absolute;
    width: 22px;
    height: 22px;
    bottom: -24px;
    left: 50%;
    transform: translate(-50%,0);
    display: none;
}
.status-infographic-wrapper .status .popup {
    text-align: left;
    position: absolute;
    top: 80px;
    left: 0;
    width: 250px;
    background: white;
    border-radius: 10px;
    padding: 15px;
    font-size: 12px;
    transition: all 0.1s ease-in-out;
    transform: scale(.5);
    opacity: 0;
    pointer-events: none;
    display: none;
}
.status-infographic-wrapper .status .popup.left {
    left: -250px;
    top: 30px;
}
.status-infographic-wrapper .status:hover .popup {
    transform: scale(1);
    opacity: 1;
}
.status-infographic-wrapper .status.status-left .text {
    text-align: center;
    position: absolute;
    top: 65%;
    left: -105px;
    width: 100px;
}
.status-infographic-wrapper .status.high-sprite .text {
    margin-top: -10px;
}
.status-infographic-wrapper .sprite {
    width: 100px;
    opacity: .5;
}
.status-infographic-wrapper .status .sprite {transition: all 0.1s ease-in-out;}
.status-infographic-wrapper .status:hover .sprite {transform: scale(1.1) !important;}

.status-infographic-wrapper .status.past .text,
.status-infographic-wrapper .status.past .sprite {
    opacity: 1;
}
.status-infographic-wrapper .status.current .text,
.status-infographic-wrapper .status.current .sprite {
    opacity: 1;
}
.status-infographic-wrapper .status.current .text {
    background: #e91e63;
}

.time-difference {
    position: absolute;
    width: 75px;
    display: none;
}
.time-difference .text {
    text-align: center;
    color: white;
    font-weight: 600;
    font-size: 11px;
    line-height: 14px;
    opacity: .5;
}
.status-infographic-wrapper.new .time-difference {
    position: absolute;
    width: 60px;
}
.status-infographic-wrapper.new .time-difference .text {
    opacity: 1;
}
.time-difference.left .text {
    text-align: left;
}

.progress-indicator {
    position: absolute;
    top: 68px;
    left: -158px;
    width: 150px;
    border-radius: 100px;
    background: rgb(255 255 255 / .2);
    height: 17px;
    display: none;
}
.progress-indicator .achieved {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgb(255 255 255 / 1);
    border-radius: 100px;
}
.progress-indicator .num {
    position: absolute;
    right: -30px;
    color: white;
    font-weight: 600;
    top: 50%;
    transform: translate(0,-54%);
    font-size: 12px;
}


/*pending*/
.status-infographic-wrapper .status-pending {left: 25px;top: 25px;}
.time-difference.pending {left: 115px;top: 45px;}

/*sailing*/
.status-infographic-wrapper .status-sailing {left: 175px;top: 25px;}
.time-difference.sailing {left: 260px;top: 45px;}

/*anchored*/
.status-infographic-wrapper .status-anchored {left: 325px;top: 25px;}
.time-difference.anchored {left: 415px;top: 45px;}

/*waiting*/
.status-infographic-wrapper .status-waiting {left: 475px;top: 25px;}
.time-difference.waiting {left: 565px;top: 45px;}

/*jetty*/
.status-infographic-wrapper .status-jetty {left: 625px;top: 25px;}
.time-difference.jetty {left: 735px;top: 110px;}

/*commence*/
.status-infographic-wrapper .status-commence {left: 675px;top: 125px;}
.time-difference.commence {left: 735px;top: 220px;}

/*discharging*/
.status-infographic-wrapper .status-discharging {left: 675px;top: 220px;}
.time-difference.discharging {left: 735px;top: 310px;}

/*completed-discharging*/
.status-infographic-wrapper .status-completed-discharging {left: 675px;top: 310px;}

/*cast-off*/
.status-infographic-wrapper .status-cast-off {left: 375px;top: 370px;}

/*problem*/
.status-infographic-wrapper .status-problem {left: 675px;top: 425px;}

/*alongside*/
.status-infographic-wrapper .status-alongside {left: 175px;top: 200px;}

.timeline-arrival-info {
    color: white;
    width: 300px;
    position: absolute;
    bottom: 30px;
    left: 30px;
    opacity: .9;
}
.timeline-arrival-info .title {
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
}

.sprite-wrapper.pending .status-pending .text,
.sprite-wrapper.pending .status-pending .sprite {opacity: 1;}
.sprite-wrapper.pending .popup {display: none;}
.sprite-wrapper.pending .status-pending .popup {display: block;}
.sprite-wrapper.pending .status-pending .text {background: #e91e63;}

.sprite-wrapper.sailing .status-pending .text,
.sprite-wrapper.sailing .status-pending .sprite,
.sprite-wrapper.sailing .status-sailing .text,
.sprite-wrapper.sailing .status-sailing .sprite {opacity: 1;}
.sprite-wrapper.sailing .status-pending .popup,
.sprite-wrapper.sailing .status-sailing .popup {display: block;}
.sprite-wrapper.sailing .status-sailing .text {background: #e91e63;}
.sprite-wrapper.sailing .status-pending + .time-difference {display: block;}

.sprite-wrapper.anchored .status-pending .text,
.sprite-wrapper.anchored .status-pending .sprite,
.sprite-wrapper.anchored .status-sailing .text,
.sprite-wrapper.anchored .status-sailing .sprite,
.sprite-wrapper.anchored .status-anchored .text,
.sprite-wrapper.anchored .status-anchored .sprite {opacity: 1;}
.sprite-wrapper.anchored .status-pending .popup,
.sprite-wrapper.anchored .status-sailing .popup,
.sprite-wrapper.anchored .status-anchored .popup {display: block;}
.sprite-wrapper.anchored .status-anchored .text {background: #e91e63;}
.sprite-wrapper.anchored .status-pending + .time-difference,
.sprite-wrapper.anchored .status-sailing + .time-difference {display: block;}

.sprite-wrapper.waiting .status-pending .text,
.sprite-wrapper.waiting .status-pending .sprite,
.sprite-wrapper.waiting .status-sailing .text,
.sprite-wrapper.waiting .status-sailing .sprite,
.sprite-wrapper.waiting .status-anchored .text,
.sprite-wrapper.waiting .status-anchored .sprite,
.sprite-wrapper.waiting .status-waiting .text,
.sprite-wrapper.waiting .status-waiting .sprite {opacity: 1;}
.sprite-wrapper.waiting .status-pending .popup,
.sprite-wrapper.waiting .status-sailing .popup,
.sprite-wrapper.waiting .status-anchored .popup,
.sprite-wrapper.waiting .status-waiting .popup {display: block;}
.sprite-wrapper.waiting .status-waiting .text {background: #e91e63;}
.sprite-wrapper.waiting .status-pending + .time-difference,
.sprite-wrapper.waiting .status-sailing + .time-difference,
.sprite-wrapper.waiting .status-anchored + .time-difference {display: block;}

.sprite-wrapper.jetty .status-pending .text,
.sprite-wrapper.jetty .status-pending .sprite,
.sprite-wrapper.jetty .status-sailing .text,
.sprite-wrapper.jetty .status-sailing .sprite,
.sprite-wrapper.jetty .status-anchored .text,
.sprite-wrapper.jetty .status-anchored .sprite,
.sprite-wrapper.jetty .status-waiting .text,
.sprite-wrapper.jetty .status-waiting .sprite,
.sprite-wrapper.jetty .status-jetty .text,
.sprite-wrapper.jetty .status-jetty .sprite {opacity: 1;}
.sprite-wrapper.jetty .status-pending .popup,
.sprite-wrapper.jetty .status-sailing .popup,
.sprite-wrapper.jetty .status-anchored .popup,
.sprite-wrapper.jetty .status-waiting .popup,
.sprite-wrapper.jetty .status-jetty .popup {display: block;}
.sprite-wrapper.jetty .status-jetty .text {background: #e91e63;}
.sprite-wrapper.jetty .status-pending + .time-difference,
.sprite-wrapper.jetty .status-sailing + .time-difference,
.sprite-wrapper.jetty .status-anchored + .time-difference,
.sprite-wrapper.jetty .status-waiting + .time-difference {display: block;}

.sprite-wrapper.commence .status-pending .text,
.sprite-wrapper.commence .status-pending .sprite,
.sprite-wrapper.commence .status-sailing .text,
.sprite-wrapper.commence .status-sailing .sprite,
.sprite-wrapper.commence .status-anchored .text,
.sprite-wrapper.commence .status-anchored .sprite,
.sprite-wrapper.commence .status-waiting .text,
.sprite-wrapper.commence .status-waiting .sprite,
.sprite-wrapper.commence .status-jetty .text,
.sprite-wrapper.commence .status-jetty .sprite,
.sprite-wrapper.commence .status-commence .text,
.sprite-wrapper.commence .status-commence .sprite {opacity: 1;}
.sprite-wrapper.commence .status-pending .popup,
.sprite-wrapper.commence .status-sailing .popup,
.sprite-wrapper.commence .status-anchored .popup,
.sprite-wrapper.commence .status-waiting .popup,
.sprite-wrapper.commence .status-jetty .popup,
.sprite-wrapper.commence .status-commence .popup {display: block;}
.sprite-wrapper.commence .status-commence .text {background: #e91e63;}
.sprite-wrapper.commence .status-pending + .time-difference,
.sprite-wrapper.commence .status-sailing + .time-difference,
.sprite-wrapper.commence .status-anchored + .time-difference,
.sprite-wrapper.commence .status-waiting + .time-difference,
.sprite-wrapper.commence .status-jetty + .time-difference {display: block;}

.sprite-wrapper.discharging .status-pending .text,
.sprite-wrapper.discharging .status-pending .sprite,
.sprite-wrapper.discharging .status-sailing .text,
.sprite-wrapper.discharging .status-sailing .sprite,
.sprite-wrapper.discharging .status-anchored .text,
.sprite-wrapper.discharging .status-anchored .sprite,
.sprite-wrapper.discharging .status-waiting .text,
.sprite-wrapper.discharging .status-waiting .sprite,
.sprite-wrapper.discharging .status-jetty .text,
.sprite-wrapper.discharging .status-jetty .sprite,
.sprite-wrapper.discharging .status-commence .text,
.sprite-wrapper.discharging .status-commence .sprite,
.sprite-wrapper.discharging .status-discharging .text,
.sprite-wrapper.discharging .status-discharging .sprite {opacity: 1;}
.sprite-wrapper.discharging .status-pending .popup,
.sprite-wrapper.discharging .status-sailing .popup,
.sprite-wrapper.discharging .status-anchored .popup,
.sprite-wrapper.discharging .status-waiting .popup,
.sprite-wrapper.discharging .status-jetty .popup,
.sprite-wrapper.discharging .status-commence .popup,
.sprite-wrapper.discharging .status-discharging .popup {display: block;}
.sprite-wrapper.discharging .status-discharging .text {background: #e91e63;}
.sprite-wrapper.discharging .status-pending + .time-difference,
.sprite-wrapper.discharging .status-sailing + .time-difference,
.sprite-wrapper.discharging .status-anchored + .time-difference,
.sprite-wrapper.discharging .status-waiting + .time-difference,
.sprite-wrapper.discharging .status-jetty + .time-difference,
.sprite-wrapper.discharging .status-commence + .time-difference {display: block;}
.sprite-wrapper.discharging .progress-indicator {display: block;}

.sprite-wrapper.completed .status-pending .text,
.sprite-wrapper.completed .status-pending .sprite,
.sprite-wrapper.completed .status-sailing .text,
.sprite-wrapper.completed .status-sailing .sprite,
.sprite-wrapper.completed .status-anchored .text,
.sprite-wrapper.completed .status-anchored .sprite,
.sprite-wrapper.completed .status-waiting .text,
.sprite-wrapper.completed .status-waiting .sprite,
.sprite-wrapper.completed .status-jetty .text,
.sprite-wrapper.completed .status-jetty .sprite,
.sprite-wrapper.completed .status-commence .text,
.sprite-wrapper.completed .status-commence .sprite,
.sprite-wrapper.completed .status-discharging .text,
.sprite-wrapper.completed .status-discharging .sprite ,
.sprite-wrapper.completed .status-completed-discharging .text,
.sprite-wrapper.completed .status-completed-discharging .sprite {opacity: 1;}
.sprite-wrapper.completed .status-pending .popup,
.sprite-wrapper.completed .status-sailing .popup,
.sprite-wrapper.completed .status-anchored .popup,
.sprite-wrapper.completed .status-waiting .popup,
.sprite-wrapper.completed .status-jetty .popup,
.sprite-wrapper.completed .status-commence .popup,
.sprite-wrapper.completed .status-discharging .popup,
.sprite-wrapper.completed .status-completed-discharging .popup {display: block;}
.sprite-wrapper.completed .status-completed-discharging .text {background: #e91e63;}
.sprite-wrapper.completed .status-pending + .time-difference,
.sprite-wrapper.completed .status-sailing + .time-difference,
.sprite-wrapper.completed .status-anchored + .time-difference,
.sprite-wrapper.completed .status-waiting + .time-difference,
.sprite-wrapper.completed .status-jetty + .time-difference,
.sprite-wrapper.completed .status-commence + .time-difference,
.sprite-wrapper.completed .status-discharging + .time-difference {display: block;}
.sprite-wrapper.completed .progress-indicator {display: block;}

.sprite-wrapper.cast-off .status-pending .text,
.sprite-wrapper.cast-off .status-pending .sprite,
.sprite-wrapper.cast-off .status-sailing .text,
.sprite-wrapper.cast-off .status-sailing .sprite,
.sprite-wrapper.cast-off .status-anchored .text,
.sprite-wrapper.cast-off .status-anchored .sprite,
.sprite-wrapper.cast-off .status-waiting .text,
.sprite-wrapper.cast-off .status-waiting .sprite,
.sprite-wrapper.cast-off .status-jetty .text,
.sprite-wrapper.cast-off .status-jetty .sprite,
.sprite-wrapper.cast-off .status-commence .text,
.sprite-wrapper.cast-off .status-commence .sprite,
.sprite-wrapper.cast-off .status-discharging .text,
.sprite-wrapper.cast-off .status-discharging .sprite,
.sprite-wrapper.cast-off .status-completed-discharging .text,
.sprite-wrapper.cast-off .status-completed-discharging .sprite,
.sprite-wrapper.cast-off .status-cast-off .text,
.sprite-wrapper.cast-off .status-cast-off .sprite {opacity: 1;}
.sprite-wrapper.cast-off .status-pending .popup,
.sprite-wrapper.cast-off .status-sailing .popup,
.sprite-wrapper.cast-off .status-anchored .popup,
.sprite-wrapper.cast-off .status-waiting .popup,
.sprite-wrapper.cast-off .status-jetty .popup,
.sprite-wrapper.cast-off .status-commence .popup,
.sprite-wrapper.cast-off .status-discharging .popup,
.sprite-wrapper.cast-off .status-completed-discharging .popup,
.sprite-wrapper.cast-off .status-cast-off .popup {display: block;}
.sprite-wrapper.cast-off .status-cast-off .text {background: #e91e63;}
.sprite-wrapper.cast-off .status-pending + .time-difference,
.sprite-wrapper.cast-off .status-sailing + .time-difference,
.sprite-wrapper.cast-off .status-anchored + .time-difference,
.sprite-wrapper.cast-off .status-waiting + .time-difference,
.sprite-wrapper.cast-off .status-jetty + .time-difference,
.sprite-wrapper.cast-off .status-commence + .time-difference,
.sprite-wrapper.cast-off .status-discharging + .time-difference,
.sprite-wrapper.cast-off .status-completed-discharging + .time-difference {display: block;}
.sprite-wrapper.cast-off .progress-indicator {display: block;}

.sprite-wrapper.alongside .status-pending .text,
.sprite-wrapper.alongside .status-pending .sprite,
.sprite-wrapper.alongside .status-sailing .text,
.sprite-wrapper.alongside .status-sailing .sprite,
.sprite-wrapper.alongside .status-anchored .text,
.sprite-wrapper.alongside .status-anchored .sprite,
.sprite-wrapper.alongside .status-waiting .text,
.sprite-wrapper.alongside .status-waiting .sprite,
.sprite-wrapper.alongside .status-jetty .text,
.sprite-wrapper.alongside .status-jetty .sprite,
.sprite-wrapper.alongside .status-commence .text,
.sprite-wrapper.alongside .status-commence .sprite,
.sprite-wrapper.alongside .status-discharging .text,
.sprite-wrapper.alongside .status-discharging .sprite,
.sprite-wrapper.alongside .status-completed-discharging .text,
.sprite-wrapper.alongside .status-completed-discharging .sprite,
.sprite-wrapper.alongside .status-cast-off .text,
.sprite-wrapper.alongside .status-cast-off .sprite,
.sprite-wrapper.alongside .status-alongside .text,
.sprite-wrapper.alongside .status-alongside .sprite {opacity: 1;}
.sprite-wrapper.alongside .status-pending .popup,
.sprite-wrapper.alongside .status-sailing .popup,
.sprite-wrapper.alongside .status-anchored .popup,
.sprite-wrapper.alongside .status-waiting .popup,
.sprite-wrapper.alongside .status-jetty .popup,
.sprite-wrapper.alongside .status-commence .popup,
.sprite-wrapper.alongside .status-discharging .popup,
.sprite-wrapper.alongside .status-completed-discharging .popup,
.sprite-wrapper.alongside .status-cast-off .popup,
.sprite-wrapper.alongside .status-alongside .popup {display: block;}
.sprite-wrapper.alongside .status-alongside .text {background: #e91e63;}
.sprite-wrapper.alongside .status-pending + .time-difference,
.sprite-wrapper.alongside .status-sailing + .time-difference,
.sprite-wrapper.alongside .status-anchored + .time-difference,
.sprite-wrapper.alongside .status-waiting + .time-difference,
.sprite-wrapper.alongside .status-jetty + .time-difference,
.sprite-wrapper.alongside .status-commence + .time-difference,
.sprite-wrapper.alongside .status-discharging + .time-difference,
.sprite-wrapper.alongside .status-completed-discharging + .time-difference,
.sprite-wrapper.alongside .status-alongside + .time-difference {display: block;}
.sprite-wrapper.alongside .progress-indicator {display: block;}

.sea-bg .status-infographic-wrapper .status-commence {top: 150px;}
.sea-bg .status-infographic-wrapper .status-discharging {top: 245px;}
.sea-bg .status-infographic-wrapper .status-completed-discharging {top: 335px;}
.sea-bg .status-infographic-wrapper .status-cast-off {top: 395px;}
.sea-bg .status-infographic-wrapper .status-alongside {top: 225px;}
.sea-bg .status-infographic-wrapper .status-problem {top: 450px;}



.status-infographic-wrapper .bg-mobile {
    width: 100%;
    display: none;
    background: url(../img/timeline/bg-mobile.jpg) no-repeat;
    background-size: cover; 
}

.mobile-line {
    display: none;
    opacity: .5;
}

@media (max-width: 1125px) {
    .timeline-arrival-info {
        top: 30px;
        left: 50%;
        text-align: center;
        transform: translate(-50%,0);
    }
    .status-infographic-wrapper {
        position: relative;
        width: 100%;
    }
    .status-infographic-wrapper.new {
        height:unset;
    }
    .status-infographic-wrapper .bg {
        display: none;
    }
    .status-infographic-wrapper .bg-mobile {
        display: block;
    }
    .status-infographic-wrapper .sprite-wrapper {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%,0);
        width: 50%;
        height: 100%;
    }
    .status-infographic-wrapper .status {left: 50%;width: 120px;transform: translate(-50%, 0px);}
    .status-infographic-wrapper .sprite {width: 120px;}
    .status-infographic-wrapper .time-difference {left: 68%;transform: translate(-50%, 0px);}
    .status-infographic-wrapper.new .time-difference {left: 85%;transform: translate(-50%, 0px);}

    .status-infographic-wrapper .status-pending {top: 100px;}
    .status-infographic-wrapper .status-sailing {top: 250px;}
    .status-infographic-wrapper .status-anchored {top: 400px;}
    .status-infographic-wrapper .status-waiting {top: 550px;}
    .status-infographic-wrapper .status-jetty {top: 700px;}
    .status-infographic-wrapper .status-commence {top: 850px;}
    .status-infographic-wrapper .status-discharging {top: 1000px;}
    .status-infographic-wrapper .status-completed-discharging {top: 1180px;}
    .status-infographic-wrapper .status-cast-off {top: 1330px;}
    .status-infographic-wrapper .status-alongside {top: 1470px;}
    .status-infographic-wrapper .status-problem {top: 1620px;}

    .sea-bg .status-infographic-wrapper .status-commence {top: 875px;}
    .sea-bg .status-infographic-wrapper .status-discharging {top: 1025px;}
    .sea-bg .status-infographic-wrapper .status-completed-discharging {top: 1205px;}
    .sea-bg .status-infographic-wrapper .status-cast-off {top: 1355px;}
    .sea-bg .status-infographic-wrapper .status-alongside {top: 1495px;}
    .sea-bg .status-infographic-wrapper .status-problem {top: 1645px;}

    .time-difference.pending {top: 245px;}
    .time-difference.sailing {top: 395px;}
    .time-difference.anchored {top: 545px;}
    .time-difference.waiting {top: 695px;}
    .time-difference.jetty {top: 845px;}
    .time-difference.commence {top: 995px;}
    .time-difference.discharging {top: 1180px;}
    .time-difference.completed-discharging {top: 1330px;}

    .mobile-line {
        display: block;
        height: 90%;
        width: 3px;
        border-left: 3px dashed white;
        position: absolute;
        left: 50%;
        top: 160px;
        transform: translate(-50%,0);
    }

    .status-infographic-wrapper .status .popup {
        left: -50%;
    }
    .status-infographic-wrapper .status .popup.left {
        left: -50%;
        top: 80px;
    }

    .status-infographic-wrapper .status.status-left .text {
        position: relative;
        top: 10px;
        left: unset;
        width: unset;
    }
    .progress-indicator {
        position: absolute;
        width: 135px;
        top: 135px;
        left: 50%;
        transform: translate(-50%, 0);
    }
}

/*infographic layers*/
.infographic-title {z-index: 105;}
.graphic-pane {z-index: 105;}
.disch-progress-center {z-index: 105;}
.infographic-control {z-index: 160;}

.sea-bg {
    /*background-image: linear-gradient( 180deg, #2196f3 10%, #3f51b5 100%);*/
    background-image: url(../img/sea-bg2.jpg);
    background-size: cover;
    background-position: center;
    padding: 30px 20px 100px 20px;
    text-align: center;
    overflow: hidden;
    position: relative;
}
.infographic-title {
    position: relative;
}
.disch-progress-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    cursor: pointer;
    width: calc(100% - 20px);
}
.disch-progress-center .title {
    font-size: 14px;
    padding: 8px;
    background: rgb(255 255 255 / .2);
    border-radius: 10px;
    margin-bottom: 5px;
}
.disch-progress-center .meta {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    text-shadow: 0 0 10px #000000aa;
}
.disch-progress-center:hover .title {
    background: rgb(255 255 255 / .4);
}
.sea-bg .spot-highlight {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    /*background: url(img/timeline/tile.png);*/
}
.main-img {
    width: 100%;
}
.sea-title {
    font-weight: 600;
    color: white;
    font-size: 22px;
    text-shadow: 0 0 10px #00000066;
}
.sea-meta {
    color: white;
    text-shadow: 0 0 5px #000000aa;
}
.art-wrapper {
    position: relative;
    width: 110px;
    height: 311px;
    margin: 0 auto;
}


.controls .item .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    color: rgb(255 255 255 / .8);
}
.controls .item .text-below {
    position: absolute;
    color: white;
    bottom: -20px;
    text-align: center;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    width: 100px;
    left: 50%;
    transform: translate(-50%, 0);
    text-shadow: 0 0 10px #000000aa;
}
.controls .item {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background: rgb(255 255 255 / .2);
    position: absolute;
    left: -75px;
    transform: translate(0, -50%);
    cursor: pointer;
}
.controls .item {transition: all 0.1s ease-in-out;}
.controls .item:hover {
    background: rgb(255 255 255 / .4);
    transform: translate(0, -50%) scale(1.03) !important;
}
.controls .item:active {transform: translate(0, -50%) scale(1.05) !important;}


.controls .item.item1 {
    top: calc(50% - 110px);
    
}
.controls .item.item2 {
    top: calc(50%);
}
.controls .item.item3 {
    top: calc(50% + 110px);
}
.controls .item.item4 {
    top: calc(50% + 110px);
    right: -75px;
    left: unset;
}
.controls .item.item5 {
    top: calc(50%);
    right: -75px;
    left: unset;
}
.controls .item.item6 {
    top: calc(50% - 110px);
    right: -75px;
    left: unset;
}

.buyer-icon-modal {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translate(0, -50%);
    height: unset;
}
.control-item-indicator {
    position: absolute;
    right: -3px;
    top: -3px;
    background: #e91e63ee;
    color: white;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1px solid #ffffffcc;
}

.sea-cargo {
    padding: 5px 15px;
    border-radius: 10px;
    background: rgb(255 255 255 / .2);
    display: inline-block;
    color: white;
}
.sea-cargo img {
    height: 20px;
    width: 20px;
    position: relative;
    top: -1px;
    margin-right: 7px;
}

.hms-card.has-img {
    position: relative;
}
.hms-card.has-img.left {
    padding-left: 90px;
}
.hms-card.has-img.left .the-img {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translate(0, -50%);
    width: 60px;
    height: 60px;
}
.graphic-pane {
    transition: all 0.1s ease-in-out;
    transform: translate(2000px,0);
    position: absolute;
}
.graphic-pane.active {
    transition: all 0.1s ease-in-out;
    transform: translate(0,0);
    position: relative;
}
@media (max-width: 768px) {
    .sea-bg {
        background-image: url(../img/sea-bg-m.jpg);
    }
    .graphic-pane {
        transform: translate(800px,0);
    }
}
@media (max-width: 1125px) {
    .status-infographic-wrapper.new {
        margin-top: -50px;
    }
}

.infographic-control {
    position: relative;
    padding-top: 30px;
}
.sea-btn-item {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background: rgb(255 255 255 / .2);
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.sea-btn-item .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    color: rgb(255 255 255 / .8);
}
.sea-btn-item .text-below {
    position: absolute;
    color: white;
    bottom: -20px;
    text-align: center;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    width: 100px;
    left: 50%;
    transform: translate(-50%, 0);
    text-shadow: 0 0 10px #000000aa;
}
.sea-btn-item {transition: all 0.1s ease-in-out;}
.sea-btn-item:hover {
    background: rgb(255 255 255 / .4);
    transform: translate(-50%, -50%) scale(1.03) !important;
}
.sea-btn-item:active {transform: translate(-50%, -50%) scale(1.05) !important;}
.has-ore-icon {
    position: relative;
    padding-left: 35px;
}
.has-ore-icon img {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translate(0, -50%);
}

.more-tools {
    width: 320px;
    margin: 0 auto;
}
.app-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background: rgb(255 255 255 / .2);
    cursor: pointer;
    transition: all 0.1s ease-in-out;
    position: relative;
    float: left;
    margin: 15px;
    margin-bottom: 30px;
}
.app-icon:hover {
    background: rgb(255 255 255 / .4);
    transform: scale(1.03) !important;
}
.app-icon .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    color: rgb(255 255 255 / .8);
}
.app-icon .text-bottom {
    color: white;
    bottom: -20px;
    text-align: center;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    text-shadow: 0 0 10px #000000aa;
    width: 50px;
    margin-top: 55px;
}
.app-icon .control-item-indicator {
    position: absolute;
    right: -3px;
    top: -3px;
    background: #e91e63ee;
    color: white;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1px solid #ffffffcc;
}
@media (max-width: 768px) {
    .more-tools {
        width: 300px;
    }
    .app-icon {
        margin: 12px;
        margin-bottom: 30px;
    }
}


/*timeline modifications */

.time-difference.sailing {left: 270px;}
.time-difference.anchored {left: 420px;}

.status-infographic-wrapper.new .bg-mobile {
    width: unset;
    background: none;
}