.panel-header {
    height: 24px;
}

.header-content {
    display: flex;
    flex-direction: row;
}

.header-left {
    flex-grow: 1;
}

.header-options {
    flex-grow: 1;
    text-align: right;
}

/*.panel-header {*/
/*    background-color: #e0e0e0;*/
/*}*/

.header-title {
    position: absolute;
    top:0;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    background-color: black;
    text-align: center;
    border-radius: 0 0 14px 14px;
    padding: 0 30px;
    white-space: nowrap;
}

.header-title::before, .header-title::after {
    content: '';
    position: absolute;
    top: 0;
    left: -10px;
    width: 20px;
    height: 10px;
    background-size: 50% 100%;
    background-repeat: no-repeat;
    background-image: radial-gradient(
        circle at 0 100%,
        transparent 9px,
        black 10px
    );
}

.header-title::after {
    left: 100%;
    margin-right: 10px;
    background-image: radial-gradient(
    circle at 100% 100%,
    transparent 9px,
    black 10px
    );
}

.options-button {
    font-size: 0;
    background-color: transparent;
}
.options-button:hover {
    background-color: transparent;
}
.options-button::before {
    font-size: 12pt;
    content: url(gear.svg);
    width: 20pt;
    height: 20pt;
    position: relative;
    left: 20px;
    top: 2px;
}
.fan-color {
    background-color: #A2F4FD;
    color: #404040;
}
.fan-color::before {
    background-image: radial-gradient(
        circle at 0 100%,
        transparent 9px,
        #A2F4FD 10px
    );
}
.fan-color::after {
    background-image: radial-gradient(
        circle at 100% 100%,
        transparent 9px,
        #A2F4FD 10px
    );
}

.extrusion-color {
    background-color: #FEE685;
    color: #000000;
}
.extrusion-color::before {
    background-image: radial-gradient(
        circle at 0 100%,
        transparent 9px,
        #FEE685 10px
    );
}
.extrusion-color::after {
    background-image: radial-gradient(
        circle at 100% 100%,
        transparent 9px,
        #FEE685 10px
    );
}

.console-color {
    background-color: #37BC7D;
    color: #ffffff;
}
.console-color::before {
    background-image: radial-gradient(
        circle at 0 100%,
        transparent 9px,
        #37BC7D 10px
    );
}
.console-color::after {
    background-image: radial-gradient(
        circle at 100% 100%,
        transparent 9px,
        #37BC7D 10px
    );
}

.jobInfo-color {
    background-color: #BEDBFF;
    color: #202020;
}
.jobInfo-color::before {
    background-image: radial-gradient(
        circle at 0 100%,
        transparent 9px,
        #BEDBFF 10px
    );
}
.jobInfo-color::after {
    background-image: radial-gradient(
        circle at 100% 100%,
        transparent 9px,
        #BEDBFF 10px
    );
}

.jobControl-color {
    background-color: #FF6467;
    color: #ffffff;
}
.jobControl-color::before {
    background-image: radial-gradient(
        circle at 0 100%,
        transparent 9px,
        #FF6467 10px
    );
}
.jobControl-color::after {
    background-image: radial-gradient(
        circle at 100% 100%,
        transparent 9px,
        #FF6467 10px
    );
}

.status-color {
    background-color: #FEF9C2;
    color: #202020;
}
.status-color::before {
    background-image: radial-gradient(
        circle at 0 100%,
        transparent 9px,
        #FEF9C2 10px
    );
}
.status-color::after {
    background-image: radial-gradient(
        circle at 100% 100%,
        transparent 9px,
        #FEF9C2 10px
    );
}

.tools-color {
    background-color: #4F39F6;
    color: #ffffff;
}
.tools-color::before {
    background-image: radial-gradient(
        circle at 0 100%,
        transparent 9px,
        #4F39F6 10px
    );
}
.tools-color::after {
    background-image: radial-gradient(
        circle at 100% 100%,
        transparent 9px,
        #4F39F6 10px
    );
}

.movement-color {
    background-color: #ccecff;
    color: #202020;
}
.movement-color::before {
    background-image: radial-gradient(
        circle at 0 100%,
        transparent 9px,
        #ccecff 10px
    );
}
.movement-color::after {
    background-image: radial-gradient(
        circle at 100% 100%,
        transparent 9px,
        #ccecff 10px
    );
}

.macro-color {
    background-color: #66ff99;
    color: #202020;
}
.macro-color::before {
    background-image: radial-gradient(
        circle at 0 100%,
        transparent 9px,
        #66ff99 10px
    );
}
.macro-color::after {
    background-image: radial-gradient(
        circle at 100% 100%,
        transparent 9px,
        #66ff99 10px
    );
}

.temperature-color {
    background-color: #ff5050;
    color: #ffffff;
}
.temperature-color::before {
    background-image: radial-gradient(
        circle at 0 100%,
        transparent 9px,
        #ff5050 10px
    );
}
.temperature-color::after {
    background-image: radial-gradient(
        circle at 100% 100%,
        transparent 9px,
        #ff5050 10px
    );
}

.layerChart-color {
    background-color: #ffff77;
    color: #202020;
}
.layerChart-color::before {
    background-image: radial-gradient(
        circle at 0 100%,
        transparent 9px,
        #ffff77 10px
    );
}
.layerChart-color::after {
    background-image: radial-gradient(
        circle at 100% 100%,
        transparent 9px,
        #ffff77 10px
    );
}

.log-color {
    background-color: #ec9900;
    color: #ffffff;
}
.log-color::before {
    background-image: radial-gradient(
        circle at 0 100%,
        transparent 9px,
        #ec9900 10px
    );
}
.log-color::after {
    background-image: radial-gradient(
        circle at 100% 100%,
        transparent 9px,
        #ec9900 10px
    );
}

.progress-color {
    background-color: #ffebcc;
    color: #202020;
}
.progress-color::before {
    background-image: radial-gradient(
        circle at 0 100%,
        transparent 9px,
        #ffebcc 10px
    );
}
.progress-color::after {
    background-image: radial-gradient(
        circle at 100% 100%,
        transparent 9px,
        #ffebcc 10px
    );
}

.speeds-color {
    background-color: #cceeff;
    color: #202020;
}
.speeds-color::before {
    background-image: radial-gradient(
        circle at 0 100%,
        transparent 9px,
        #cceeff 10px
    );
}
.speeds-color::after {
    background-image: radial-gradient(
        circle at 100% 100%,
        transparent 9px,
        #cceeff 10px
    );
}

.file-color {
    background-color: #e6ccff;
    color: #202020;
}
.file-color::before {
    background-image: radial-gradient(
        circle at 0 100%,
        transparent 9px,
        #e6ccff 10px
    );
}
.file-color::after {
    background-image: radial-gradient(
        circle at 100% 100%,
        transparent 9px,
        #e6ccff 10px
    );
}

.plugin-color {
    background-color: #00cc99;
    color: #ffffff;
}
.plugin-color::before {
    background-image: radial-gradient(
        circle at 0 100%,
        transparent 9px,
        #00cc99 10px
    );
}
.plugin-color::after {
    background-image: radial-gradient(
        circle at 100% 100%,
        transparent 9px,
        #00cc99 10px
    );
}

.object_model_browser-color {
    background-color: #3366ff;
    color: #ffffff;
}
.object_model_browser-color::before {
    background-image: radial-gradient(
        circle at 0 100%,
        transparent 9px,
        #3366ff 10px
    );
}
.object_model_browser-color::after {
    background-image: radial-gradient(
        circle at 100% 100%,
        transparent 9px,
        #3366ff 10px
    );
}