@media (min-height: 100px) {
    .cgheight {
        height:50px;
    }
}
@media (min-height: 300px) {
    .cgheight {
        height:225px;
    }
}
@media (min-height: 500px) {
    .cgheight {
        height:425px;
    }
}
@media (min-height: 600px) {
    .cgheight {
        height:525px;
    }
}
@media (min-height: 700px) {
    .cgheight {
        height:625px;
    }
}
@media (min-height: 900px) {
    .cgheight {
        height:825px;
    }
}
.tsp-progress, .tsp-convergence {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.25);
    border: 1px solid #ddd;
    border-radius: 10px;
}
.tsp-graph {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
}
.tsp-pause {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 5;
}
#graph-container {
    width: 100%;
}
#progress-container, #convergence-container {
    position: relative;
    width: 100%;
}
.tsp-pause-container {
    opacity: 0;
}
.tsp-pausez {
    z-index: 15;
}
.tsp-pause-div-style {
    z-index: 20;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #bbb;
    border-radius: 50px;
    width: 100px;
    height: 100px;
    opacity: 0.5;
    cursor: pointer;
}
.tsp-pause-div {
    z-index: 30;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50px;
    width: 100px;
    height: 100px;
    opacity: 0;
    cursor: pointer;
}
.fa-repeat:hover + .tsp-pause-div, .fa-pause:hover + .tsp-pause-div, .fa-play:hover + .tsp-pause-div {
    opacity: 0.75;
    box-shadow: 0px 0px 1px 1px #000 inset;
}
.tsp-pause-div:hover {
    opacity: 0.75;
    box-shadow: 0px 0px 1px 1px #000 inset;
}
.fa-pause, .fa-play, .fa-repeat {
    z-index: 25;
    color: #ff3300;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 65px;
    opacity: 0.5;
    cursor: pointer;
}