.forecast {
    display: flex;
    flex-direction: column;
    margin: 30px 0;
    padding: 15px;
    background-color: #F6F5F6;
    border-radius: 10px;
    clear: both;
}

.forecast__title {
    margin: 0 0 15px;
    font-size: 20px;
    line-height: 26px;
    font-weight: bold;
    text-align: center;
}

.forecast__buttons {
    display: flex;
    align-content: center;
    justify-content: center;
}

.forecast__button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    margin: 0 8px;
    padding: 0 25px;
    font-size: 14px;
    line-height: 16px;
    font-weight: bold;
    text-transform: uppercase;
    border: 1px solid;
    border-radius: 5px;
    cursor: pointer;
}

.forecast__button:hover {
    opacity: 0.7;
}

.forecast__button:before {
    content: "";
    flex-shrink: 0;
    display: block;
    width: 18px;
    height: 18px;
    margin-right: 10px;
    background-position: center;
    background-repeat: no-repeat;
}

.forecast__button--yes {
    color: #00B67F;
    border-color: #00B67F;
}

.forecast__button--yes:before {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.3971 8.36875C17.3971 7.39731 16.6099 6.61015 15.6388 6.61015H13.1463C13.8663 4.8088 13.9188 3.33191 13.9142 2.85885C13.9136 2.80686 13.9254 2.62259 13.9254 2.58176V2.49983C13.8731 0.789128 13.3494 0.265438 12.6768 0.0161133C11.9871 0.0161133 11.428 0.574916 11.428 1.26464V1.38958C11.4212 1.81718 10.8205 2.69935 10.8205 2.69935L6.23848 7.33417L6.16118 7.42916L4.76758 11.156L6.16118 16.9345C6.16118 17.1098 6.30326 17.2516 6.47828 17.2516H15.1047C15.6916 17.2516 16.1905 16.8237 16.2792 16.2434C16.6184 14.0251 17.3971 8.87747 17.3971 8.36875Z' fill='%2324DDA5'/%3E%3Cpath d='M5.16606 17.9562H2.02637C1.47682 17.9562 1.03125 17.5107 1.03125 16.9609V7.53443C1.03125 6.98461 1.47682 6.53931 2.02637 6.53931H5.16606C5.71561 6.53931 6.16118 6.98461 6.16118 7.53443V16.9609C6.16118 17.5107 5.71561 17.9562 5.16606 17.9562Z' fill='%230ABD87'/%3E%3Cpath d='M5.16606 16.0812H2.02637C1.47682 16.0812 1.03125 15.6356 1.03125 15.0858V16.9609C1.03125 17.5107 1.47682 17.9563 2.02637 17.9563H5.16606C5.71561 17.9563 6.16118 17.5107 6.16118 16.9609V15.0858C6.16118 15.6356 5.71561 16.0812 5.16606 16.0812Z' fill='%2300B67F'/%3E%3Cpath d='M15.6387 6.61017H15.3162C15.2998 6.76477 15.2751 6.96728 15.244 7.20735C14.6534 11.7744 10.7655 15.1941 6.16113 15.1941V16.9342C6.16113 17.1095 6.30321 17.2516 6.47823 17.2516H15.1047C15.6915 17.2516 16.1904 16.8235 16.2792 16.2434C16.6183 14.0251 17.397 8.87749 17.397 8.3685C17.397 7.39734 16.6099 6.61017 15.6387 6.61017Z' fill='%230FD55E'/%3E%3C/svg%3E%0A");
}

.forecast__button--no {
    color: #E32C13;
    border-color: #E32C13;
}

.forecast__button--no:before {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.602888 9.63125C0.602888 10.6027 1.39006 11.3899 2.36122 11.3899H4.85365C4.13371 13.1912 4.08118 14.6681 4.08581 15.1412C4.08635 15.1931 4.07465 15.3774 4.07465 15.4182V15.5002C4.12691 17.2109 4.6506 17.7346 5.32318 17.9839C6.0129 17.9839 6.57198 17.4251 6.57198 16.7354V16.6104C6.57878 16.1828 7.1795 15.3007 7.1795 15.3007L11.7615 10.6658L11.8388 10.5708L13.2324 6.84404L11.8388 1.06548C11.8388 0.890192 11.6967 0.748383 11.5217 0.748383H2.89526C2.30842 0.748383 1.8095 1.17626 1.72077 1.75657C1.38162 3.9749 0.602888 9.12253 0.602888 9.63125Z' fill='%23F27362'/%3E%3Cpath d='M12.8339 0.0437565H15.9736C16.5232 0.0437565 16.9688 0.489328 16.9688 1.03915V10.4656C16.9688 11.0154 16.5232 11.4607 15.9736 11.4607H12.8339C12.2844 11.4607 11.8388 11.0154 11.8388 10.4656V1.03915C11.8388 0.489328 12.2844 0.0437565 12.8339 0.0437565Z' fill='%23EB4129'/%3E%3Cpath d='M12.8339 1.91879L15.9736 1.91879C16.5232 1.91879 16.9688 2.36437 16.9688 2.91418V1.03908C16.9688 0.489265 16.5232 0.0436943 15.9736 0.0436943L12.8339 0.0436943C12.2844 0.0436943 11.8388 0.489265 11.8388 1.03908V2.91418C11.8388 2.36437 12.2844 1.91879 12.8339 1.91879Z' fill='%23D52A12'/%3E%3Cpath d='M2.36129 11.3898H2.68383C2.70016 11.2352 2.72493 11.0327 2.75596 10.7927C3.34661 6.22562 7.23454 2.80585 11.8389 2.80585V1.06575C11.8389 0.890466 11.6968 0.748384 11.5218 0.748384L2.89532 0.748384C2.30848 0.748384 1.80956 1.17653 1.72083 1.75657C1.38168 3.9749 0.602954 9.12251 0.602954 9.6315C0.602954 10.6027 1.39012 11.3898 2.36129 11.3898Z' fill='%23EA6857'/%3E%3C/svg%3E%0A");
}

.forecast__bar {
    position: relative;
}

.forecast__bar-items {
    display: flex;
    align-items: center;
    border-radius: 5px;
    overflow: hidden;
}

.forecast__bar-item {
    height: 40px;
    background-color: #ffffff;
}

.forecast__bar-item--empty {
    display: none;
}

.forecast__bar-item--yes {
    background-color: #00B67F;
}

.forecast__bar-item--no {
    background-color: #E32C13;
}

.forecast__bar-values {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0 10px;
}

.forecast__bar-value {
    display: flex;
    align-items: center;
    font-size: 16px;
    line-height: 24px;
    font-weight: bold;
    color: #ffffff;
}

.forecast__bar-value:before {
    content: "";
    flex-shrink: 0;
    display: block;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    background-position: center;
    background-repeat: no-repeat;
}

.forecast__bar-value--yes:before {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.3971 8.36875C17.3971 7.39731 16.6099 6.61015 15.6388 6.61015H13.1463C13.8663 4.8088 13.9188 3.33191 13.9142 2.85885C13.9136 2.80686 13.9254 2.62259 13.9254 2.58176V2.49983C13.8731 0.789128 13.3494 0.265438 12.6768 0.0161133C11.9871 0.0161133 11.428 0.574916 11.428 1.26464V1.38958C11.4212 1.81718 10.8205 2.69935 10.8205 2.69935L6.23848 7.33417L6.16118 7.42916L4.76758 11.156L6.16118 16.9345C6.16118 17.1098 6.30326 17.2516 6.47828 17.2516H15.1047C15.6916 17.2516 16.1905 16.8237 16.2792 16.2434C16.6184 14.0251 17.3971 8.87747 17.3971 8.36875Z' fill='%23F1F1F1'/%3E%3Cpath d='M5.16612 17.9562H2.02643C1.47688 17.9562 1.03131 17.5107 1.03131 16.9609V7.53443C1.03131 6.98461 1.47688 6.53931 2.02643 6.53931H5.16612C5.71567 6.53931 6.16124 6.98461 6.16124 7.53443V16.9609C6.16124 17.5107 5.71567 17.9562 5.16612 17.9562Z' fill='%23F1F1F1'/%3E%3Cpath d='M5.16612 16.0812H2.02643C1.47688 16.0812 1.03131 15.6356 1.03131 15.0858V16.9609C1.03131 17.5107 1.47688 17.9563 2.02643 17.9563H5.16612C5.71567 17.9563 6.16124 17.5107 6.16124 16.9609V15.0858C6.16124 15.6356 5.71567 16.0812 5.16612 16.0812Z' fill='%23E7E7E7'/%3E%3Cpath d='M15.6388 6.61017H15.3163C15.3 6.76477 15.2752 6.96728 15.2442 7.20735C14.6535 11.7744 10.7656 15.1941 6.16125 15.1941V16.9342C6.16125 17.1095 6.30334 17.2516 6.47835 17.2516H15.1048C15.6916 17.2516 16.1906 16.8235 16.2793 16.2434C16.6184 14.0251 17.3972 8.87749 17.3972 8.3685C17.3972 7.39734 16.61 6.61017 15.6388 6.61017Z' fill='%23F1F1F1'/%3E%3C/svg%3E%0A");
}

.forecast__bar-value--no:before {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.03123 9.60366C1.03123 10.5751 1.8184 11.3623 2.78957 11.3623H5.282C4.56206 13.1636 4.50953 14.6405 4.51415 15.1136C4.5147 15.1656 4.50299 15.3498 4.50299 15.3907V15.4726C4.55525 17.1833 5.07894 17.707 5.75152 17.9563C6.44125 17.9563 7.00032 17.3975 7.00032 16.7078V16.5828C7.00713 16.1552 7.60784 15.2731 7.60784 15.2731L12.1899 10.6382L12.2672 10.5433L13.6608 6.81645L12.2672 1.03789C12.2672 0.862604 12.1251 0.720795 11.9501 0.720795H3.3236C2.73676 0.720795 2.23784 1.14867 2.14911 1.72898C1.80996 3.94731 1.03123 9.09494 1.03123 9.60366Z' fill='%23F1F1F1'/%3E%3Cpath d='M13.2623 0.0161686H16.402C16.9515 0.0161686 17.3971 0.46174 17.3971 1.01156V10.438C17.3971 10.9878 16.9515 11.4331 16.402 11.4331H13.2623C12.7127 11.4331 12.2672 10.9878 12.2672 10.438V1.01156C12.2672 0.46174 12.7127 0.0161686 13.2623 0.0161686Z' fill='%23F1F1F1'/%3E%3Cpath d='M13.2623 1.89121L16.402 1.89121C16.9515 1.89121 17.3971 2.33678 17.3971 2.8866V1.0115C17.3971 0.461678 16.9515 0.0161064 16.402 0.0161064L13.2623 0.0161064C12.7127 0.0161064 12.2672 0.461678 12.2672 1.0115V2.8866C12.2672 2.33678 12.7127 1.89121 13.2623 1.89121Z' fill='%23E7E7E7'/%3E%3Cpath d='M2.78963 11.3622H3.11217C3.12851 11.2076 3.15328 11.0051 3.1843 10.765C3.77495 6.19797 7.66288 2.7782 12.2672 2.7782V1.03811C12.2672 0.862817 12.1251 0.720735 11.9501 0.720735L3.32366 0.720735C2.73683 0.720735 2.23791 1.14889 2.14917 1.72892C1.81003 3.94725 1.0313 9.09486 1.0313 9.60385C1.0313 10.575 1.81847 11.3622 2.78963 11.3622Z' fill='%23F1F1F1'/%3E%3C/svg%3E%0A");
}

@media (min-width: 576px) {

    .forecast__title {
        font-size: 22px;
        line-height: 30px;
    }

    .forecast__bar-item-value {
        font-size: 20px;
    }

    .forecast__bar-item-value:before {
        width: 18px;
        height: 18px;
    }
}