:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.ClearNight01{
    background-image: url('../assects/svg/Solid/ClearNight01.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.ClearNight02{
    background-image: url('../assects/svg/Solid/ClearNight02.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.ClearNight03{
    background-image: url('../assects/svg/Solid/ClearNight03.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.Cloudy01{
    background-image: url('../assects/svg/Solid/Cloudy01.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.Cloudy02{
    background-image: url('../assects/svg/Solid/Cloudy02.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.Drizzle{
    background-image: url('../assects/svg/Solid/Drizzle.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.Fog{
    background-image: url('../assects/svg/Solid/Fog.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.Haze{
    background-image: url('../assects/svg/Solid/Haze.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.HeavyRain{
    background-image: url('../assects/svg/Solid/HeavyRain.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.PartlyCloudy{
    background-image: url('../assects/svg/Solid/PartlyCloudy.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.PartlyCloudyNight{
    background-image: url('../assects/svg/Solid/PartlyCloudyNight.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.Rain01{
    background-image: url('../assects/svg/Solid/Rain01.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.Rain02{
    background-image: url('../assects/svg/Solid/Rain02.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.SnowAndRain{
    background-image: url('../assects/svg/Solid/SnowAndRain.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.Snowfall01{
    background-image: url('../assects/svg/Solid/Snowfall01.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.Snowfall02{
    background-image: url('../assects/svg/Solid/Snowfall02.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.Sunny{
    background-image: url('../assects/svg/Solid/Sunny.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.Thunderstorm{
    background-image: url('../assects/svg/Solid/Thunderstorm.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.Thunderstorm02{
    background-image: url('../assects/svg/Solid/Thunderstorm02.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.Windy{
    background-image: url('../assects/svg/Solid/Windy.svg');
}
:is(section .wrapper .item.weather .info, .forecast :is(.weather, .night-desc)) .ico.Thermometer{
    background-image: url('../assects/svg/Solid/Thermometer.svg');
}


.item .ico.temp{
    background-image: url('../assects/svg/Line/Thermometer.svg');
}
.item .ico.sunny{
    background-image: url('../assects/svg/Line/Sunny.svg');
}
.item .ico.wind{
    background-image: url('../assects/svg/Line/Windy.svg');
}
.item .ico.fog{
    background-image: url('../assects/svg/Line/Fog.svg');
}
.item .ico.eye{
    background-image: url('../assects/svg/Line/Eye.svg');
}
.item .ico.meter{
    background-image: url('../assects/svg/Line/Meter.svg');
}
.item .ico.rain{
    background-image: url('../assects/svg/Line/Rain02.svg');
}
.item .ico.warn{
    background-image: url('../assects/svg/Line/Warn.svg');
}
.item .ico.cloudy{
    background-image: url('../assects/svg/Line/Cloudy02.svg');
}
.forecast .ico.drop{
    background-image: url('../assects/svg/Line/Drop.svg');
}


section .wrapper .item.warn .label .warn .ico-warn.rain{
    -webkit-mask: url('../assects/svg/warn/rainstrom.svg') no-repeat center;
    mask: url('../assects/svg/warn/rainstrom.svg') no-repeat center;
    mask-size: 1.2rem 1.2rem;
}
section .wrapper .item.warn .label .warn .ico-warn.air{
    -webkit-mask: url('../assects/svg/warn/air.svg') no-repeat center;
    mask: url('../assects/svg/warn/air.svg') no-repeat center;
    mask-size: 1.2rem 1.2rem;
}
section .wrapper .item.warn .label .warn .ico-warn.fire{
    -webkit-mask: url('../assects/svg/warn/fire.svg') no-repeat center;
    mask: url('../assects/svg/warn/fire.svg') no-repeat center;
    mask-size: 1.2rem 1.2rem;
}
section .wrapper .item.warn .label .warn .ico-warn.flood{
    -webkit-mask: url('../assects/svg/warn/flood.svg') no-repeat center;
    mask: url('../assects/svg/warn/flood.svg') no-repeat center;
    mask-size: 1.2rem 1.2rem;
}
section .wrapper .item.warn .label .warn .ico-warn.fog{
    -webkit-mask: url('../assects/svg/warn/fog.svg') no-repeat center;
    mask: url('../assects/svg/warn/fog.svg') no-repeat center;
    mask-size: 1.2rem 1.2rem;
}
section .wrapper .item.warn .label .warn .ico-warn.forst{
    -webkit-mask: url('../assects/svg/warn/forst.svg') no-repeat center;
    mask: url('../assects/svg/warn/forst.svg') no-repeat center;
    mask-size: 1.2rem 1.2rem;
}
section .wrapper .item.warn .label .warn .ico-warn.heat{
    -webkit-mask: url('../assects/svg/warn/heat.svg') no-repeat center;
    mask: url('../assects/svg/warn/heat.svg') no-repeat center;
    mask-size: 1.2rem 1.2rem;
}
section .wrapper .item.warn .label .warn .ico-warn.snow{
    -webkit-mask: url('../assects/svg/warn/snow.svg') no-repeat center;
    mask: url('../assects/svg/warn/snow.svg') no-repeat center;
    mask-size: 1.2rem 1.2rem;
}
section .wrapper .item.warn .label .warn .ico-warn.thunderstrom{
    -webkit-mask: url('../assects/svg/warn/thunderstrom.svg') no-repeat center;
    mask: url('../assects/svg/warn/thunderstrom.svg') no-repeat center;
    mask-size: 1.2rem 1.2rem;
}
section .wrapper .item.warn .label .warn .ico-warn.warn{
    -webkit-mask: url('../assects/svg/warn/warn.svg') no-repeat center;
    mask: url('../assects/svg/warn/warn.svg') no-repeat center;
    mask-size: 1.2rem 1.2rem;
}
section .wrapper .item.warn .label .warn .ico-warn.wave{
    -webkit-mask: url('../assects/svg/warn/wave.svg') no-repeat center;
    mask: url('../assects/svg/warn/wave.svg') no-repeat center;
    mask-size: 1.2rem 1.2rem;
}
section .wrapper .item.warn .label .warn .ico-warn.wind{
    -webkit-mask: url('../assects/svg/warn/wind.svg') no-repeat center;
    mask: url('../assects/svg/warn/wind.svg') no-repeat center;
    mask-size: 1.2rem 1.2rem;
}
section .wrapper .item.warn .label .warn .ico-warn.windTC{
    -webkit-mask: url('../assects/svg/warn/wind.svg') no-repeat center;
    mask: url('../assects/svg/warn/wind.svg') no-repeat center;
    mask-size: 1.2rem 1.2rem;
}


section .wrapper .item.warn .label.lv1{
    background: #135e6c;
    color: #00d9ff;
}
section .wrapper .item.warn .label.lv2{
    background: #5e5e16;
    color: #fae757;
}
section .wrapper .item.warn .label.lv3{
    background: #871d1d;
    color: #ffacac;
}
section .wrapper .item.warn .label.lv4{
    background: #491561;
    color: #d67fff;
}
section .wrapper .item.warn .label.lv5{
    background: #000;
    border: solid .0625rem #FFF;
}

section .wrapper .item.warn .label.lv1 .warn .bg{
    background-color: #00d9ff;
}
section .wrapper .item.warn .label.lv2 .warn .bg{
    background-color: #f3e30a;
}
section .wrapper .item.warn .label.lv3 .warn .bg{
    background-color: #fa2020;
}
section .wrapper .item.warn .label.lv4 .warn .bg{
    background-color: #a207ea;
}
section .wrapper .item.warn .label.lv5 .warn .bg{
    background-color: #FFF;
}

section .wrapper .item.warn .label.lv1 .warn .ico-warn{
    background-color: #000;
}
section .wrapper .item.warn .label.lv2 .warn .ico-warn{
    background-color: #000;
}
section .wrapper .item.warn .label.lv3 .warn .ico-warn{
    background-color: #FFF;
}
section .wrapper .item.warn .label.lv4 .warn .ico-warn{
    background-color: #FFF;
}
section .wrapper .item.warn .label.lv5 .warn .ico-warn{
    background-color: #000;
}
section .wrapper .item.warn .label.lv5{
    padding: .0625rem .1875rem;
}

section .wrapper .item.warn .label.lv5 .warn{
    animation: dangerFlicker 2s linear infinite;
}

section .wrapper .item.warn .label .ico-warn.upgrade{
    position: relative;
    margin-left: .25rem;
    width: 1.25rem;
    height: 1.25rem;
    text-align: center;
    animation: flicker 2s linear infinite;
}
section .wrapper .item.warn .label .ico-warn.upgrade .bg{
    height: 1.2rem;
    -webkit-mask: url('../assects/svg/Solid/Upgrade.svg') no-repeat center;
    mask: url('../assects/svg/Solid/Upgrade.svg') no-repeat center;
    mask-size: 1.2rem 1.2rem;
}
section .wrapper .item.warn .label .ico-warn.upgrade div{
    position: absolute;
    top: 0;
    left: 0;
    width: 1.2rem;
    height: 1.2rem;
}
section .wrapper .item.warn .label .ico-warn.upgrade .upd-lev{
    color: #000;
    font-weight: 500;
    font-size: .8rem;
    top: .375rem;
}


section .wrapper .item.warn .label .ico-warn.upgrade.lv2 .bg{
    background-color: #f3e30a;
}
section .wrapper .item.warn .label .ico-warn.upgrade.lv3 .bg{
    background-color: #fa2020;
}
section .wrapper .item.warn .label .ico-warn.upgrade.lv4 .bg{
    background-color: #a207ea;
}
section .wrapper .item.warn .label .ico-warn.upgrade.lv5 .bg{
    background-color: #FFF;

}
section .wrapper .item.warn .label .ico-warn.upgrade.lv2 .upd-lev{
    color: #000;
}
section .wrapper .item.warn .label .ico-warn.upgrade.lv3 .upd-lev{
    color: #FFF;
}
section .wrapper .item.warn .label .ico-warn.upgrade.lv4 .upd-lev{
    color: #FFF;
}
section .wrapper .item.warn .label .ico-warn.upgrade.lv5 .upd-lev{
    color: #000;
}


.index .idx{
    display: inline-block;
    height: 1.75rem;
    width: 1.75rem;
    background-size: 1.75rem;
}
.index .idx.laundry{
    background-image: url('../assects/img/laundry.png');
}
.index .idx.umbrella{
    background-image: url('../assects/img/umbrella.png');
}
.index .idx.uv{
    background-image: url('../assects/img/uv.png');
}
.index .idx.clothes{
    background-image: url('../assects/img/clothes.png');
}
.index .idx.beer{
    background-image: url('../assects/img/beer.png');
}
.index .idx.flu{
    background-image: url('../assects/img/flu.png');
}
.index .idx.ice{
    background-image: url('../assects/img/ice.png');
}


.index .idx.laundry-none{
    background-image: url('../assects/img/laundryNone.png');
}
.index .idx.umbrella-none{
    background-image: url('../assects/img/umbrellaNone.png');
}
.index .idx.uv-none{
    background-image: url('../assects/img/uvNone.png');
}
.index .idx.clothes-none{
    background-image: url('../assects/img/clothesNone.png');
}
.index .idx.beer-none{
    background-image: url('../assects/img/beerNone.png');
}
.index .idx.flu-none{
    background-image: url('../assects/img/fluNone.png');
}
.index .idx.ice-none{
    background-image: url('../assects/img/iceNone.png');
}


.index .idx.laundry-half{
    background-image: url('../assects/img/laundryHalf.png');
}
.index .idx.umbrella-half{
    background-image: url('../assects/img/umbrellaHalf.png');
}
.index .idx.uv-half{
    background-image: url('../assects/img/uvHalf.png');
}
.index .idx.clothes-half{
    background-image: url('../assects/img/clothesHalf.png');
}
.index .idx.beer-half{
    background-image: url('../assects/img/beerHalf.png');
}
.index .idx.flu-half{
    background-image: url('../assects/img/fluHalf.png');
}
.index .idx.ice-half{
    background-image: url('../assects/img/iceHalf.png');
}

@keyframes flicker{
    0%{opacity: 1;}
    30%{opacity: 0;}
    60%{opacity: 1;}
    100%{opacity: 1;}
}
@keyframes dangerFlicker{
    0%{opacity: 1;}
    29%{opacity: 1;}
    30%{opacity: 0;}
    59%{opacity: 0;}
    60%{opacity: 1;}
    100%{opacity: 1;}
}