body {
    padding: 10px;
}
.skala-container {
    position: relative;
    padding: 10px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    background: #f1f1f1;
}
.skala-container *,
.skala-container *:before,
.skala-container *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.skala-container:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
}
.skala-container .skala-bar-bg {
    background: #fff;
    border-radius: 4px;
    width: 100%;
    height: 14px;
    margin-bottom: 2px;
}
.skala-container .skala-left {
    float: left;
    width: 60%;
}
.skala-container .skala-left .skala-bar-container {
    position: relative;
}
.skala-container .skala-left .skala-bar-container .skala-bar-bg {
    position: absolute;
    margin-bottom: 0;
}
.skala-container .skala-left .skala-bar-container .skala-bar-bg:nth-child(1) {
    bottom: 0;
}
.skala-container .skala-left .skala-bar-container .skala-bar {
    position: relative;
    height: 30px;
    margin-bottom: 2px;
    font-family: Arial;
    font-weight: bold;
    font-size: 16px;
    color: #fff;
    padding-left: 15px;
    padding-top: 5px;
}
.skala-container .skala-left .skala-bar-container .skala-bar:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    right: -15px;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid #000;
}
.skala-container .skala-right {
    float: right;
    width: 40%;
}
.skala-container .skala-right .skala-value {
    position: relative;
    float: left;
    padding-left: 2px;
    width: 50%;
}
.skala-container .skala-right .skala-value .skala-value-marker {
    background: #000;
    position: absolute;
    width: 80%;
    color: #fff;
    text-align: center;
    font-family: Arial;
    font-weight: bold;
    font-size: 16px;
    height: 30px;
    padding-top: 5px;
    right: 1px;
    border-radius: 3px;
}
.skala-container .skala-right .skala-value .skala-value-marker:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    left: -14px;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 15px solid #000;
}
.skala-container.skala-title {
    padding-bottom: 0;
    text-align: center;
    font-weight: bold;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}
.skala-container .skala-a-plus-plus {
    background: #8cc63f;
    width: 30%;
}
.skala-container .skala-a-plus-plus::after {
    border-left-color: #8cc63f !important;
}
.skala-container .skala-a-plus {
    background: #14ae47;
    width: 35%;
}
.skala-container .skala-a-plus::after {
    border-left-color: #14ae47 !important;
}
.skala-container .skala-a {
    background: #45bd38;
    width: 40%;
}
.skala-container .skala-a::after {
    border-left-color: #45bd38 !important;
}
.skala-container .skala-b {
    background: #ccde0d;
    width: 45%;
}
.skala-container .skala-b::after {
    border-left-color: #ccde0d !important;
}
.skala-container .skala-c {
    background: #f8dd00;
    width: 50%;
}
.skala-container .skala-c::after {
    border-left-color: #f8dd00 !important;
}
.skala-container .skala-d {
    background: #f8b200;
    width: 55%;
}
.skala-container .skala-d::after {
    border-left-color: #f8b200 !important;
}
.skala-container .skala-e {
    background: #f87501;
    width: 60%;
}
.skala-container .skala-e::after {
    border-left-color: #f87501 !important;
}
.skala-container .skala-f {
    background: #f23607;
    width: 65%;
}
.skala-container .skala-f::after {
    border-left-color: #f23607 !important;
}
.skala-container .skala-g {
    background: #ea0b0b;
    width: 70%;
}
.skala-container .skala-g::after {
    border-left-color: #ea0b0b !important;
}