@media (max-width: 520px) {
    .plot {
        width: 300px;
    }

    .plot-graph {
        height: 180px;
    }

    .plot-start-date,
    .plot-end-date {
        width: 180px;
    }

    .plot-status {
        padding: 180px 10px 10px 10px;
    }
}

@media (min-width: 520px) {
    .plot {
        width: 500px;
    }

    .plot-graph {
        height: 300px;
    }

    .plot-start-date,
    .plot-end-date {
        width: 300px;
    }

    .plot-status {
        padding: 300px 10px 10px 10px;
    }
}

.plot {
    position: relative;
    display: block;
    margin: 10px auto;
}

.plot-graph {
    position: absolute;
    top: 0;
    left: 30px;
    width: calc(100% - 60px);
    background-color: #f0f0f0;
}

.plot-start-date,
.plot-end-date {
    line-height: 30px;
    position: absolute;
    text-align: center;
    height: 30px;
}

.plot-start-date {
    top: -30px;
    transform: rotate(90deg);
    transform-origin: left bottom 0;
}

.plot-end-date {
    top: -30px;
    left: calc(100% - 30px);
    transform: rotate(90deg);
    transform-origin: left bottom 0;
}

.plot-status {
    display: block;
    box-sizing: border-box;
}

.plot-status>label {
    text-align: center;
    padding-top: 5px;
}

.plot-status-name {
    display: block;
}

.plot-empty .plot-status-count {
    display: none;
}

.plot-controls-button-field>button {
    margin: 0 auto 10px auto;
    cursor: pointer;
    padding: 10px 20px;
    color: white;
    font-size: 1em;
    border: none;
}

.plot-controls-cancel {
    display: none;
    background: #d46565;
}

.plot-controls-cancel:hover {
    background: #a85050;
}

.plot-controls-download {
    display: none;
    background: #65bcd4;
}

.plot-controls-download:hover {
    background: #4c91a4;
}

.plot-controls-cancel:focus {
    outline: 0;
}

.plot-loading .plot-controls-cancel {
    display: block;
}

.plot-loading .plot-controls-download,
.plot-loaded .plot-controls-download {
    display: block;
}

.plot-loading .plot-status-count,
.plot-loaded .plot-status-count,
.plot-error .plot-status-count {
    display: block;
}

.plot-status-fit {
    display: none;
}

.plot-status-fit-available {
    display: block;
}

.plot .loader {
    display: none;
}

.plot-loading .loader {
    display: block;
    top: 125px;
}

.plot-status-error {
    display: none;
}

.plot-error .plot-status-error {
    display: block;
    color: #ff0000;
}

.plot-controls {
    padding: 10px 0;
}

.plot-controls-field {
    text-align: center;
}

.plot-controls-field>label {
    display: block;
}