i[class*="icss-"] {
    position: relative;
    display: inline-block;
    font-style: normal;
    background-color: currentColor;
    box-sizing: border-box;
    vertical-align: middle;
}

    i[class*="icss-"]:before,
    i[class*="icss-"]:after {
        content: "";
        border-width: 0;
        position: absolute;
        box-sizing: border-box;
    }

/* Size */
[class*="icss-"].xxsmall {
    font-size: .45em;
}

[class*="icss-"].xsmall {
    font-size: .5em;
}

[class*="icss-"].small {
    font-size: .65em;
}

[class*="icss-"].x1_5 {
    font-size: 1.5em;
}

[class*="icss-"].x2 {
    font-size: 2em;
}

[class*="icss-"].x2_5 {
    font-size: 2.5em;
}

[class*="icss-"].x3 {
    font-size: 3em;
}

[class*="icss-"].x4 {
    font-size: 4em;
}

[class*="icss-"].x5 {
    font-size: 5em;
}

/* Align text-bottom */
i[class*="icss-"].bottom {
    vertical-align: text-bottom;
}

/* flip */
.flip {
    transform: scaleX(-1);
}

/* rotate */
i[class*="icss-"].rot10 {
    transform: rotate(10deg);
}

i[class*="icss-"].rot-10 {
    transform: rotate(-10deg);
}

i[class*="icss-"].rot20 {
    transform: rotate(20deg);
}

i[class*="icss-"].rot-20 {
    transform: rotate(-20deg);
}

i[class*="icss-"].rot45 {
    transform: rotate(45deg);
}

i[class*="icss-"].rot-45 {
    transform: rotate(-45deg);
}

i[class*="icss-"].rot90 {
    transform: rotate(90deg);
}

i[class*="icss-"].rot-90 {
    transform: rotate(-90deg);
}

i[class*="icss-"].rot180 {
    transform: rotate(180deg);
}

i[class*="icss-"].rot-180 {
    transform: rotate(-180deg);
}

/* force animation */
i.icss-anim,
i.icss-anim:before,
i.icss-anim:after {
    transition: all 1s;
}

/* Spin */
.icss-spin {
    animation: spin 2s infinite linear;
}

.icss-pulse {
    animation: spin 1s infinite steps(8);
}

.icss-spin-hover:hover {
    animation: spin 2s infinite linear;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(359deg);
    }
}

/* BELL */
@keyframes ring {
    0% {
        transform: rotate(-15deg)
    }

    2% {
        transform: rotate(15deg)
    }

    4% {
        transform: rotate(-18deg)
    }

    6% {
        transform: rotate(18deg)
    }

    8% {
        transform: rotate(-22deg)
    }

    10% {
        transform: rotate(22deg)
    }

    12% {
        transform: rotate(-18deg)
    }

    14% {
        transform: rotate(18deg)
    }

    16% {
        transform: rotate(-12deg)
    }

    18% {
        transform: rotate(12deg)
    }

    20%,100% {
        transform: rotate(0deg)
    }
}

.icss-ring {
    animation: ring 2s infinite ease;
}

.icss-ring-hover:hover {
    animation: ring 2s infinite ease;
}

/* VERTICAL */
@keyframes vertical {
    0% {
        transform: translate(0,-3px)
    }

    4% {
        transform: translate(0,3px)
    }

    8% {
        transform: translate(0,-3px)
    }

    12% {
        transform: translate(0,3px)
    }

    16% {
        transform: translate(0,-3px)
    }

    20% {
        transform: translate(0,3px)
    }

    22%,100% {
        transform: translate(0,0)
    }
}

.icss-vibes,
.icss-vibes-hover:hover {
    animation: vertical 2s ease infinite;
}

/* HORIZONTAL */
@keyframes horizontal {
    0% {
        transform: translate(0,0)
    }

    6% {
        transform: translate(5px,0)
    }

    12% {
        transform: translate(0,0)
    }

    18% {
        transform: translate(5px,0)
    }

    24% {
        transform: translate(0,0)
    }

    30% {
        transform: translate(5px,0)
    }

    36%,100% {
        transform: translate(0,0)
    }
}

.icss-shake,
.icss-shake-hover:hover {
    animation: horizontal 2s ease infinite;
}

/* TADA */
@keyframes tada {
    0% {
        transform: scale(1)
    }

    10%,20% {
        transform: scale(.9) rotate(-8deg);
    }

    30%,50%,70% {
        transform: scale(1.3) rotate(8deg)
    }

    40%,60% {
        transform: scale(1.3) rotate(-8deg)
    }

    80%,100% {
        transform: scale(1) rotate(0)
    }
}

.icss-tada,
.icss-tada-hover:hover {
    animation: tada 2s linear infinite;
}

/* Reverse animation */
.icss-reverse {
    animation-direction: reverse;
}

[class*="-hover"].icss-reverse:hover {
    animation-direction: reverse;
}
.icss-panel-left {
    display:none;
}
.icss-panel-right {
    display: none;
}
/* Stack icons */
.icss-stack {
    position: relative;
    width: 1em;
    height: 1em;
    display: inline-block;
}

    .icss-stack i[class*="icss-"] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-.5em, -.5em);
    }

        .icss-stack i[class*="icss-"].bottom {
            bottom: 0;
            top: auto;
        }

/* shadow icon */
.icss-shadow {
    position: relative;
    width: 1em;
    height: 1em;
    display: inline-block;
}

    .icss-shadow i[class*="icss-"] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-.5em, -.5em);
    }

        .icss-shadow i[class*="icss-"]:first-child {
            top: 54%;
            left: 54%;
        }
i.icss-edit {
    width: 1em;
    height: 1em;
    background-color: transparent;
    border-radius: 50% 45% 50% 35%;
    overflow: hidden;
    margin: 0;
}

    i.icss-edit:before {
        width: .3em;
        height: .8em;
        border: .15em solid transparent;
        border-top: .24em solid currentColor;
        transform: rotate(45deg) translate(-50%);
        transform-origin: 0 0;
        box-shadow: 0 -.05em, .24em -.8em, -.24em -.8em, 0 -1.5em;
        clip: rect(-.9em .3em 1em 0);
        left: .25em;
        top: .75em;
    }

    i.icss-edit:after {
        width: .1em;
        height: 0;
        background-color: transparent;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
    }

i.icss-trash {
    width: .68em;
    height: .9em;
    background-color: transparent;
    border-width: .1em .1em;
    border-style: solid;
    border-radius: .05em;
    margin: .1em .15em 0;
}

    i.icss-trash:before {
        border-style: solid;
        border-width: .1em;
        top: -.23em;
        left: 50%;
        border-radius: .1em;
        width: .275em;
        height: 1.03em;
        transform: translateX(-50%);
    }

    i.icss-trash:after {
        border-width: .1em .43em;
        border-style: solid;
        left: 50%;
        top: -.05em;
        border-radius: .07em;
        transform: translateX(-50%);
    }
i.icss-gear {
    width: .5em;
    height: .5em;
    position: relative;
    border-radius: 100%;
    background-color: transparent;
    border-width: .07em;
    border-style: solid;
    border-color: transparent;
    margin: .25em;
    box-shadow: 0 0 0 .1em, inset 0 0 0 .3em;
}

    i.icss-gear:before {
        width: .18em;
        height: .18em;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: .41em 0, -.41em 0, 0 .41em, 0 -.41em;
    }

    i.icss-gear:after {
        width: .18em;
        height: .18em;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
        box-shadow: .42em 0, -.42em 0, 0 .42em, 0 -.42em;
    }
i.icss-gears {
    width: .5em;
    height: .5em;
    position: relative;
    border-radius: 100%;
    border-width: .063em;
    border-style: solid;
    border-color: transparent;
    margin: .36em .532em .08em .1em;
    box-shadow: .51em -.32em 0 -.06em;
}

    i.icss-gears:before {
        width: .7em;
        height: .7em;
        border-radius: 100%;
        background: linear-gradient(0deg,transparent 39%,currentcolor 39%,currentcolor 61%, transparent 61%), linear-gradient(60deg,transparent 42%, currentcolor 42%,currentcolor 58%, transparent 58%), linear-gradient(120deg,transparent 42%, currentcolor 42%,currentcolor 58%, transparent 58%);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    i.icss-gears:after {
        width: .55em;
        height: .55em;
        border-radius: 100%;
        background: linear-gradient(0deg,transparent 37%,currentcolor 37%,currentcolor 63%, transparent 63%), linear-gradient(60deg,transparent 40%, currentcolor 40%,currentcolor 60%, transparent 60%), linear-gradient(120deg,transparent 40%, currentcolor 40%,currentcolor 60%, transparent 60%);
        top: -.135em;
        left: .695em;
        transform: translate(-50%, -50%) rotate(25deg);
    }
i.icss-somfy-down {
    width: 1em;
    height: 1em;
    border-radius: .07em;
    background-color: transparent;
    margin: 0;
}
    i.icss-somfy-down:before {
        height: .6em;
        width: .6em;
        border: .15em solid currentColor;
        border-color: currentColor currentColor transparent transparent;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-70%) rotate(135deg);
    }
i.icss-somfy-up {
    width: 1em;
    height: 1em;
    border-radius: .07em;
    background-color: transparent;
    margin: 0;
}

    i.icss-somfy-up:before {
        height: .6em;
        width: .6em;
        border: .15em solid currentColor;
        border-color: currentColor currentColor transparent transparent;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-30%) rotate(-45deg);
    }
i.icss-somfy-toggle {
    width: .15em;
    height: .55em;
    border-radius: .1em;
    margin: .2em .4em .25em .45em;
}

    i.icss-somfy-toggle:before {
        width: .45em;
        height: .5em;
        border-radius: .3em .12em 0 .2em;
        border: .1em solid transparent;
        border-width: 0 0 .35em 0;
        background-color: currentColor;
        box-shadow: -.1em 0, -.3em -.35em;
        transform: rotate(-45deg);
        clip: rect(-.5em .5em .15em -.5em);
        left: .15em;
        top: .35em;
    }

    i.icss-somfy-toggle:after {
        width: .52em;
        height: .52em;
        border: .065em solid currentColor;
        border-bottom-color: transparent;
        border-radius: 50%;
        transform: translateX(-50%);
        top: -.22em;
        left: 50%;
    }



i.icss-home {
    width: .8em;
    height: .45em;
    background-color: transparent;
    border-width: 0;
    border-style: solid;
    border-radius: 0 0 .02em .02em;
    box-shadow: inset .285em .1em, inset -.285em .1em;
    margin: .55em .1em 0;
}

    i.icss-home:before {
        border-width: 0 .4em .4em;
        border-style: solid;
        border-color: currentColor transparent;
        transform: translateX(-50%);
        box-shadow: 0 .1em;
        top: -.4em;
        left: 50%;
    }

    i.icss-home:after {
        width: .76em;
        height: .76em;
        border-width: 0.065em 0 0 0.065em;
        border-style: solid;
        transform: translateX(-50%) rotate(45deg);
        top: -0.4em;
        left: 50%;
    }
i.icss-window {
    width: 1.1em;
    height: .75em;
    background-color: transparent;
    border: .05em solid transparent;
    border-width: 0 .1em;
    box-shadow: inset 0 0 0 .07em, inset 0 .19em 0 .07em, 0 .07em 0;
    margin: .2em 0 .07em;
}

    i.icss-window:before {
        width: 1.1em;
        height: .26em;
        border-bottom: .1em solid transparent;
        box-shadow: inset 0 1em, 0 .48em 0 -.1em;
        top: -.2em;
        left: -.1em;
    }

    i.icss-window:after {
        width: 0.06em;
        height: .7em;
        background-color: currentColor;
        left: .43em;
    }
i.icss-window-shade {
    width: 1.1em;
    height: .75em;
    background-color: transparent;
    border: .05em solid transparent;
    border-width: 0 .1em;
    box-shadow: inset 0 0 0 .01em, inset 0 .01em 0 .07em, 0 .07em 0;
    margin: .2em 0 .07em;
}

    i.icss-window-shade:before {
        width: 1.1em;
        height: .2em;
        border-bottom: .1em solid transparent;
        box-shadow: inset 0 1em, 0 0em 0 -.1em;
        top: -.15em;
        left: -.09em;
    }

    i.icss-window-shade:after {
        width: calc(100% - .05em);
        height: var(--shade-position, 0%);
        
        left: 0.025em;
        top: 0.025em;
        border-bottom: solid 0.025em gray;
        background-image: repeating-conic-gradient(var(--shade-color, currentColor) 0% 25%, rgba(71, 212, 255, 0) 0% 50%);
        background-position: 0 0, 100% 100%;
        background-size: 0.05em 0.05em;
        background-color: rgba(71, 212, 255, 0);
    }
i.icss-ldrapery {
    width: 1.1em;
    height: .9em;
    background-color: transparent;
    border: .05em solid transparent;
    border-width: 0 .1em;
    box-shadow: inset 0 0 0 .01em, inset 0 .01em 0 .07em, 0 .07em 0;
    margin: .1em 0 .07em;
}

    i.icss-ldrapery:before {
        width: 1.1em;
        height: .2em;
        border-bottom: .1em solid transparent;
        box-shadow: inset 0 1em, 0 0em 0 -.1em;
        top: -.05em;
        left: -.09em;
    }

    i.icss-ldrapery:after {
        width: var(--shade-position, 0%);
        height: calc(100% - .05em);
        right: calc(100% - var(--shade-position));
        left:0em;
        top: 0.025em;
        border-bottom: solid 0.025em gray;
        border-right: solid 0.025em gray;
        background-image: repeating-linear-gradient(to left, var(--shade-color, currentColor), var(--shade-color, currentColor) 75%, rgba(255,255,255,0) 100%);
        background-position: 0 0, 100% 100%;
        background-size: 0.1em 0.1em;
        background-color: rgba(71, 212, 255, 0);
        transform:rotate(180deg);
    }
i.icss-rdrapery {
    width: 1.1em;
    height: .9em;
    background-color: transparent;
    border: .05em solid transparent;
    border-width: 0 .1em;
    box-shadow: inset 0 0 0 .01em, inset 0 .01em 0 .07em, 0 .07em 0;
    margin: .1em 0 .07em;
}

    i.icss-rdrapery:before {
        width: 1.1em;
        height: .2em;
        border-bottom: .1em solid transparent;
        box-shadow: inset 0 1em, 0 0em 0 -.1em;
        top: -.05em;
        left: -.09em;
    }

    i.icss-rdrapery:after {
        width: var(--shade-position, 0%);
        height: calc(100% - .05em);
        left: calc(100% - var(--shade-position));
        top: 0.025em;
        border-bottom: solid 0.025em gray;
        border-left: solid 0.025em gray;
        background-image: repeating-linear-gradient(to left, var(--shade-color, currentColor), var(--shade-color, currentColor) 75%, rgba(255,255,255,0) 100%);
        background-position: 0 0, 100% 100%;
        background-size: 0.1em 0.1em;
        background-color: rgba(71, 212, 255, 0);
    }
i.icss-cdrapery {
    width: 1.1em;
    height: .9em;
    background-color: transparent;
    border: .05em solid transparent;
    border-width: 0 .1em;
    box-shadow: inset 0 0 0 .01em, inset 0 .01em 0 .07em, 0 .07em 0;
    margin: .1em 0 .07em;
}

    i.icss-cdrapery:before {
        width: 1.1em;
        height: .2em;
        border-bottom: .1em solid transparent;
        box-shadow: inset 0 1em, 0 0em 0 -.1em;
        top: -.05em;
        left: -.09em;
    }

    i.icss-cdrapery:after {
    }
    i.icss-cdrapery > span.icss-panel-left {
        width: calc(var(--shade-position, 0%) * .5);
        height: calc(100% - .05em);
        display:inline-block;
        position:absolute;
        right: calc(50% - (var(--shade-position, 0%) *.5));
        left: 0em;
        top: 0.025em;
        border-bottom: solid 0.025em gray;
        border-right: solid 0.025em gray;
        background-image: repeating-linear-gradient(to left, var(--shade-color, currentColor), var(--shade-color, currentColor) 75%, rgba(255,255,255,0) 100%);
        background-position: 0 0, 100% 100%;
        background-size: 0.1em 0.1em;
        background-color: rgba(71, 212, 255, 0);
        transform: rotate(180deg);
    }
    i.icss-cdrapery > span.icss-panel-right {
        width: calc(var(--shade-position, 0%) * .5);
        height: calc(100% - .05em);
        display: inline-block;
        position: absolute;
        left: calc(100% - ((var(--shade-position, 0%) *.5)) - .015em);
        top: 0.025em;
        border-bottom: solid 0.025em gray;
        background-image: repeating-linear-gradient(to left, var(--shade-color, currentColor), var(--shade-color, currentColor) 75%, rgba(255,255,255,0) 100%);
        background-position: 0 0, 100% 100%;
        background-size: 0.1em 0.1em;
        background-color: rgba(71, 212, 255, 0);
    }


i.icss-shutter {
    width: 1.1em;
    height: .75em;
    background-color: transparent;
    border: .05em solid transparent;
    border-width: 0 .1em;
    box-shadow: inset 0 0 0 0.01em, inset 0 0.01em 0px 0.04em;
    margin: .2em 0 0;
}

    i.icss-shutter:before {
        width: 1.1em;
        height: .2em;
        border-bottom: .05em solid transparent;
        box-shadow: inset 0 1em, 0 0em 0 -.1em;
        top: -.1em;
        left: -.09em;
    }

    i.icss-shutter:after {
        width: calc(100% - .05em);
        height: var(--shade-position, 0%);
        left: 0.025em;
        top: 0.025em;
        border-bottom: solid 0.025em gray;
        background-image: repeating-linear-gradient(var(--shade-color, currentColor) 0% 50%, rgba(71, 212, 255, 0) 0% 75%);
        background-position: 0 0, 100% 100%;
        background-size: 0.05em 0.05em;
        background-color: rgba(71, 212, 255, 0);
    }

i.icss-window-blind {
    width: 1.1em;
    height: .75em;
    background-color: transparent;
    border: .05em solid transparent;
    border-width: 0 .1em;
    box-shadow: inset 0 0 0 .01em, inset 0 .01em 0 .07em, 0 .07em 0;
    margin: .2em 0 .07em;
}

    i.icss-window-blind:before {
        width: 1.1em;
        height: .2em;
        border-bottom: .1em solid transparent;
        box-shadow: inset 0 1em, 0 0em 0 -.1em;
        top: -.1em;
        left: -.09em;
    }

    i.icss-window-blind:after {
        width: calc(100% - .13em);
        height: var(--shade-position, 0%);
        left: calc(0.077em - .2px);
        top: 0.025em;
        border-bottom: solid 0.025em gray;
        background-image: repeating-linear-gradient(var(--shade-color, currentColor), var(--shade-color, currentColor) 1px, white 4px);
        background-color: rgba(71, 212, 255, 0);
    }
i.icss-window-tilt {
    position:absolute;
    width:100%;
    height:100%;
    left:0px;
    top:0px;
    color:dimgray;
    background:transparent;
}
    i.icss-window-tilt:after {
        content: attr(data-tiltposition)'%';
        width:100%;
        top: calc(50% - .25em);
        text-align:center;
        font-weight:bold;
        font-size:.3em;
    }
i.icss-garage {
    width: 1.1em;
    height: .7em;
    background-color: transparent;
    box-shadow: inset 0 0.01em 0 0.04em, inset 0.01em 0px 0em, inset 0.01em 0.01em 1px 0em;
    margin: .4em 0 0;
}

    i.icss-garage:after {
        border-width: 0 .8em .4em;
        border-style: solid;
        border-color: currentColor transparent;
        transform: translateX(-50%);
        top: -0.4em;
        left: 50%;
        clip-path: polygon(50% 0, 99% 50%, 50% 250%, 0 50%);
    }

    i.icss-garage:before {
        width: calc(100% - .08em);
        height: calc(var(--shade-position, 0%) - 0em);
        left: 0.04em;
        border-bottom: outset 0.025em gray;
        background-image: repeating-linear-gradient(to top, var(--shade-color, currentColor), var(--shade-color, currentColor) 75%, rgba(255,255,255,0) 100%);
        background-size: 0.01em 0.2em;
        background-color: rgba(71, 212, 255, 0);
        background-position:left bottom;
    }
    i.icss-garage > span.icss-panel-left {
        position: absolute;
        display:inline-block;
        border-radius:50%;
        border:solid 1px white;
        width: .1em;
        height:.05em;
        top: calc(var(--shade-position, 0%) - .32em);
        background: white;
        left: calc(50% - .05em);
    }
i.icss-lightbulb-o {
    width: .35em;
    height: .1em;
    border-radius: .1em;
    margin: .7em .325em .2em;
    box-shadow: 0 .13em, 0 .19em 0 -.03em, 0 .22em 0 -0.035em;
}

    i.icss-lightbulb-o:before {
        width: .65em;
        height: .65em;
        border-width: 0.068em;
        border-style: solid;
        border-radius: 100% 100% 100% .2em;
        background-color: transparent;
        left: 50%;
        transform: translateX(-50%) rotate(-45deg);
        bottom: .11em;
    }

    i.icss-lightbulb-o:after {
        width: .25em;
        height: .2em;
        border-radius: 100%;
        box-shadow: inset -0.05em 0.05em;
        left: .1em;
        top: -.5em;
    }
i.icss-lightbulb {
    width: .35em;
    height: .1em;
    border-radius: .1em;
    margin: .7em .325em .2em;
    box-shadow: 0 .13em, 0 .19em 0 -.03em, 0 .22em 0 -0.035em;
}

    i.icss-lightbulb:before {
        width: .65em;
        height: .65em;
        border-width: 0.068em;
        border-style: solid;
        border-radius: 100% 100% 100% .2em;
        background-color: rgba(255,255,0, var(--fpos, 0%));
        left: 50%;
        transform: translateX(-50%) rotate(-45deg);
        bottom: .11em;
    }

    i.icss-lightbulb:after {
        width: .25em;
        height: .2em;
        border-radius: 100%;
        box-shadow: inset -0.05em 0.05em;
        left: .1em;
        top: -.5em;
    }

i.icss-upload {
    width: 1em;
    height: .6em;
    background-color: transparent;
    border-width: 0 .2em .3em;
    border-style: solid;
    border-radius: .03em;
    margin: .4em 0 0;
}
    i.icss-upload:before {
        height: .5em;
        border-style: solid;
        border-width: 0 .25em .25em;
        border-color: transparent;
        border-bottom-color: currentColor;
        background-color: transparent;
        box-shadow: 0em .35em 0 -.13em;
        top: -.6em;
        left: 50%;
        transform: translateX(-50%);
    }
    i.icss-upload:after {
    }
i.icss-file {
    width: .8em;
    height: 1em;
    background-color: transparent;
    border-width: .065em;
    border-style: solid;
    border-radius: .05em .34em .05em .05em;
}

    i.icss-file:before {
        border-style: solid;
        border-width: .2em;
        left: .275em;
        border-radius: .1em;
        border-color: transparent;
        border-right-color: currentColor;
        transform: rotate(-45deg);
        top: .02em;
    }

i.icss-x {
    width: 1em;
    height: 1em;
    background-color: transparent;
    margin: 0;
}

    i.icss-x:before,
    i.icss-x:after {
        width: 1em;
        height: .18em;
        top: 50%;
        left: 50%;
        border-radius: .06em;
        background-color: currentColor;
    }

    i.icss-x:before {
        transform: translate(-50%, -50%) rotate(-225deg)
    }

    i.icss-x:after {
        transform: translate(-50%, -50%) rotate(225deg)
    }

i.icss-awning {
    width: 1.1em;
    height: .75em;
    background-color: transparent;
    border-width: 0 0;
    margin: .2em 0 .07em;
    left:0.1em;
}

    i.icss-awning:before {
        width: 1.1em;
        height: .2em;
        border-bottom: .1em solid transparent;
        box-shadow: inset 0 1em, 0 0em 0 -.1em;
        top: -.1em;
        left: -.09em;
    }

    i.icss-awning:after {
        width: calc(100% - 0.1em);
        height: var(--shade-position, 0%);
        left: -.04em;
        top: 0.025em;
        border-bottom: solid 0.045em gray;
        background-image: repeating-linear-gradient(90deg, var(--shade-color, currentColor), var(--shade-color, currentColor) calc(25% - 4px), black calc(25% - 2px), var(--shade-color, currentColor) calc(25% - 2px)); 
        background-color: rgba(71, 212, 255, 0);
    }
i.icss-sun-c {
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-color: transparent;
    background-image: radial-gradient(ellipse at center, #fd0 1%, #fb0 39%, #fb0 39%, #d61 100%);
    box-shadow: 0 0 .06em .03em rgba(255, 107, 0, 0.4), 0 0 22px 11px rgba(255, 203, 0, 0.13);
    background-position: -.7em -.6em;
    background-size: 165%;
    margin: 0;
}

    i.icss-sun-c:before {
    }

    i.icss-sun-c:after {
    }

i.icss-sun {
    width: .6em;
    height: .6em;
    border-radius: 50%;
    background-color: transparent;
    border: 0.03em solid transparent;
    box-shadow: inset 0 0 0 .5em;
    margin: .2em;
}

    i.icss-sun:before {
        width: .1em;
        height: .1em;
        background-color: transparent;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: .45em 0, .38em 0, -.45em 0, -.38em 0, 0 .45em, 0 .38em, 0 -.45em, 0 -.38em;
    }

    i.icss-sun:after {
        width: .1em;
        height: .1em;
        background-color: transparent;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
        box-shadow: .45em 0, .38em 0, -.45em 0, -.38em 0, 0 .45em, 0 .38em, 0 -.45em, 0 -.38em;
    }
i.icss-sun-o {
    width: .6em;
    height: .6em;
    border-radius: 50%;
    background-color: transparent;
    border: 0.03em solid transparent;
    box-shadow: inset 0 0 0 .065em;
    margin: .2em;
}

    i.icss-sun-o:before {
        width: .1em;
        height: .1em;
        background-color: transparent;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: .45em 0, .38em 0, -.45em 0, -.38em 0, 0 .45em, 0 .38em, 0 -.45em, 0 -.38em;
    }

    i.icss-sun-o:after {
        width: .1em;
        height: .1em;
        background-color: transparent;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
        box-shadow: .45em 0, .38em 0, -.45em 0, -.38em 0, 0 .45em, 0 .38em, 0 -.45em, 0 -.38em;
    }
i.icss-sun-c {
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-color: transparent;
    background-image: radial-gradient(ellipse at center, #fd0 1%, #fb0 39%, #fb0 39%, #d61 100%);
    box-shadow: 0 0 .06em .03em rgba(255, 107, 0, 0.4), 0 0 22px 11px rgba(255, 203, 0, 0.13);
    background-position: -.7em -.6em;
    background-size: 165%;
    margin: 0;
}

    i.icss-sun-c:before {
    }

    i.icss-sun-c:after {
    }

i.icss-sun-o {
    width: .6em;
    height: .6em;
    border-radius: 50%;
    background-color: transparent;
    border: 0.03em solid transparent;
    box-shadow: inset 0 0 0 .065em;
    margin: .2em;
}

    i.icss-sun-o:before {
        width: .1em;
        height: .1em;
        background-color: transparent;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: .45em 0, .38em 0, -.45em 0, -.38em 0, 0 .45em, 0 .38em, 0 -.45em, 0 -.38em;
    }

    i.icss-sun-o:after {
        width: .1em;
        height: .1em;
        background-color: transparent;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
        box-shadow: .45em 0, .38em 0, -.45em 0, -.38em 0, 0 .45em, 0 .38em, 0 -.45em, 0 -.38em;
    }
div.button-light {
    position:absolute;
    margin-left:-30px;
    cursor:pointer;
}
    div.button-light[data-on=false] i.icss-lightbulb-o:before {
        background-color:lightgray;
    }
    div.button-light[data-on=true] i.icss-lightbulb-o:before {
        background-color: yellow;
    }

    div.button-light > i.icss-lightbulb-c {
        position: absolute;
        font-size: 18px;
        color: orange;
        left: 6px;
        top: 7px;
    }

    div.button-light > i.icss-lightbulb-o {
        position: absolute;
        font-size: 32px;
        color: gray;
    }


div.button-sunflag {
    position: relative;
    margin-left:-30px;
    cursor:pointer;
}
    div.button-sunflag[data-on=false] i.icss-sun-c {
        background-image: radial-gradient(ellipse at center, gainsboro 1%, #ccc 39%, silver 39%, gray 100%);
    }

    div.button-sunflag > i.icss-sun-c {
        position: absolute;
        font-size: 18px;
        color: orange;
        left: 6px;
        top: 7px;
    }

    div.button-sunflag > i.icss-sun-o {
        position: absolute;
        font-size: 32px;
        color: orange;
    }
i.icss-warning {
    width: 1em;
    height: .1em;
    border-radius: 0.05em;
    margin: .82em 0 .06em 0;
    transform-origin: 50% -.33em;
}
div.indicator {
    position: absolute;
    top:34px;
    font-size:20px;
}
div.indicator-wind {
    color: orangered;
    clip-path: polygon(48% 18%, 0% 95%, 110% 92%);
    background:yellow;
    top:30%;
    left:.8em;
}
div.indicator-sun {
    color: darkorange;
    left: -13px;
    top:3px;
}
.somfyShadeCtl[data-sunny="false"] .indicator-sun {
    display:none;
}
.somfyShadeCtl[data-windy="false"] .indicator-wind {
    display: none;
}

    i.icss-warning:before {
        width: 1.23em;
        height: 1.23em;
        border: 0.2em solid currentColor;
        border-color: currentColor currentColor transparent transparent;
        border-radius: .1em .13em;
        transform: translateX(-50%) scaleX(0.6) rotate(-45deg);
        top: -.55em;
        left: 50%;
    }

    i.icss-warning:after {
        width: .125em;
        border: .0em solid transparent;
        border-top: .25em solid currentColor;
        border-bottom: .07em solid transparent;
        box-shadow: 0 .1em 0 -.012em;
        top: -.44em;
        left: 50%;
        transform: translateX(-50%);
    }
i.icss-github-o {
    width: 1em;
    height: 1em;
    border-radius: 50%;
    border: 0.068em solid currentcolor;
    background-color: transparent;
    background-image: radial-gradient(ellipse 100% 73% at 50% 0.48em, currentColor 0%, currentColor 38%, transparent 38%), radial-gradient(circle at 35.5% 0.5em, currentColor 0%, currentColor 27%, transparent 27%), radial-gradient(circle at 64.5% 0.5em, currentColor 0%, currentColor 27%, transparent 27%), radial-gradient(ellipse 45% 100% at 50% 0.88em, currentColor 0%, currentColor 40%, transparent 40%);
}

    i.icss-github-o:before {
        border-width: .1em .1em;
        border-style: solid;
        border-radius: 0.02em 60% 100% 80%;
        left: .14em;
        top: .2em;
        transform: rotate(20deg);
    }

    i.icss-github-o:after {
        border-width: .1em .1em;
        border-style: solid;
        border-radius: 0.02em 80% 100% 60%;
        left: .54em;
        top: .2em;
        transform: rotate(65deg);
    }
i.icss-lgate {
    width: 1.1em;
    height: .9em;
    background-color: transparent;
    border: .05em solid transparent;
    border-width: 0 .1em;
    margin: .1em 0 .07em;
}

    i.icss-lgate:before {
        width: 1.1em;
        height: 1em;
        border-bottom: solid 1px;
        top: -.05em;
        left: -.09em;
    }

    i.icss-lgate > span.icss-panel-right {
        display:inline-block;
        width: var(--shade-position, 0%);
        height: calc(100% - .005em);
        right: calc(100% - var(--shade-position, 0%));
        left: 0em;
        top: 0.025em;
        border-bottom: solid 0.025em gray;
        border-right: solid 0.025em gray;
        background-image: repeating-linear-gradient(to left, rgba(255,255,255,0) 0% 75%, var(--shade-color, currentColor) 75% 100%, rgba(255,255,255,0) 75% 0%);
        background-position: 0 0, 100% 100%;
        background-size: .1em 1em;
        background-color: rgba(71, 212, 255, 0);
        transform: rotate(180deg);
    }

    i.icss-lgate > span.icss-panel-right:after {
        position: absolute;
        content:"";
        display: inline-block;
        border: solid 1px var(--shade-color, currentColor);
        width: .02em;
        height: .9em;
        left: -.05em;
        background: var(--shade-color, currentColor);
    }
i.icss-lgate > span.icss-panel-left {
    position: absolute;
    display: inline-block;
}
    i.icss-lgate > span.icss-panel-left:before {
        position: absolute;
        display: inline-block;
        content:"";
        left: -.15em;
        top: -.1em;
        height: 1em;
        width: .1em;
        border: solid 1px;
        border-top-left-radius: .05em;
        border-top-right-radius: .05em;
        background-color: black;
    }
i.icss-rgate {
    width: 1.1em;
    height: .9em;
    background-color: transparent;
    border: .05em solid transparent;
    border-width: 0 .1em;
    margin: .1em 0 .07em;
}

    i.icss-rgate:before {
        width: 1.1em;
        height: 1em;
        border-bottom: solid 1px;
        top: -.05em;
        left: -.09em;
    }

    i.icss-rgate > span.icss-panel-left {
        position: absolute;
        display: inline-block;
        width: var(--shade-position, 0%);
        height: calc(100% - .005em);
        left: calc(100% - var(--shade-position, 0%));
        top: 0.025em;
        border-top: solid 0.025em gray;
        border-right: solid 0.025em gray;
        background-image: repeating-linear-gradient(to left, rgba(255,255,255,0) 0% 75%, var(--shade-color, currentColor) 75% 100%, rgba(255,255,255,0) 75% 0%);
        background-position: 0 0, 100% 100%;
        background-size: .1em 1em;
        background-color: rgba(71, 212, 255, 0);
        margin-left:-.025em;
    }

        i.icss-rgate > span.icss-panel-left:after {
            position: absolute;
            content: "";
            display: inline-block;
            border: solid 1px var(--shade-color, currentColor);
            top:-0.07em;
            width: .02em;
            height: .9em;
            left: -.05em;
            background: var(--shade-color, currentColor);
        }

    i.icss-rgate > span.icss-panel-right {
        position: absolute;
        display: inline-block;
        left:calc(100% - .05em);
    }

        i.icss-rgate > span.icss-panel-right:before {
            position: absolute;
            display: inline-block;
            content: "";
            right: -.15em;
            top: -.1em;
            height: 1em;
            width: .1em;
            border: solid 1px;
            border-top-left-radius: .05em;
            border-top-right-radius: .05em;
            background-color: black;
        }

i.icss-cgate {
    width: 1.1em;
    height: .9em;
    background-color: transparent;
    border: .05em solid transparent;
    border-width: 0 .1em;
    margin: .1em 0 .07em;
}

    i.icss-cgate:before {
        width: 1.1em;
        height: 1em;
        border-bottom: solid 1px;
        top: -.05em;
        left: -.09em;
    }

    i.icss-cgate > span.icss-panel-left {
        position: absolute;
        display: inline-block;
        width: calc(var(--shade-position, 0%) / 2);
        height: calc(100% - .005em);
        left: 0%;
        top: 0.025em;
        border-bottom: solid 0.025em gray;
        border-right: solid 0.025em gray;
        background-image: repeating-linear-gradient(to left, rgba(255,255,255,0) 0% 75%, var(--shade-color, currentColor) 75% 100%, rgba(255,255,255,0) 75% 0%);
        background-position: 0 0, 100% 100%;
        background-size: .1em 1em;
        background-color: rgba(71, 212, 255, 0);
        margin-left: -.025em;
        transform: rotate(180deg);
    }

        i.icss-cgate > span.icss-panel-left:after {
            position: absolute;
            content: "";
            display: inline-block;
            border: solid 1px var(--shade-color, currentColor);
            top: 0em;
            width: .02em;
            height: .9em;
            left: -.05em;
            background: var(--shade-color, currentColor);
        }
        i.icss-cgate > span.icss-panel-left:before {
            position: absolute;
            display: inline-block;
            content: "";
            right: -.15em;
            top: -.025em;
            height: 1em;
            width: .1em;
            border: solid 1px;
            border-bottom-left-radius: .05em;
            border-bottom-right-radius: .05em;
            background-color: black;
        }


    i.icss-cgate > span.icss-panel-right {
        position: absolute;
        display: inline-block;
        width: calc(var(--shade-position, 0%) / 2);
        height: calc(100% - .005em);
        left: calc(100% - calc(var(--shade-position, 0%) / 2));
        top: .025em;
        border-top: solid 0.025em gray;
        border-right: solid 0.025em gray;
        background-image: repeating-linear-gradient(to left, rgba(255,255,255,0) 0% 75%, var(--shade-color, currentColor) 75% 100%, rgba(255,255,255,0) 75% 0%);
        background-position: 0 0, 100% 100%;
        background-size: .1em 1em;
        background-color: rgba(71, 212, 255, 0);
        margin-left: -.025em;
    }
        i.icss-cgate > span.icss-panel-right:after {
            position: absolute;
            content: "";
            display: inline-block;
            border: solid 1px var(--shade-color, currentColor);
            top: -.072em;
            width: .02em;
            height: .9em;
            left: -.05em;
            background: var(--shade-color, currentColor);
        }
        i.icss-cgate > span.icss-panel-right:before {
            position: absolute;
            display: inline-block;
            content: "";
            right: -.15em;
            top: -.15em;
            height: 1em;
            width: .1em;
            border: solid 1px;
            border-top-left-radius: .05em;
            border-top-right-radius: .05em;
            background-color: black;
        }

i.icss-bars {
    margin: .41em 0;
}

    i.icss-bars,
    i.icss-bars:before,
    i.icss-bars:after {
        width: 1em;
        height: .18em;
        border-radius: .06em;
        background-color: currentColor;
    }

        i.icss-bars:before {
            top: -0.36em;
            left: 0;
        }

        i.icss-bars:after {
            top: 0.36em;
            left: 0;
        }

i.icss-hand {
    width: .6em;
    height: .5em;
    border-radius: .35em .3em .5em .5em;
    margin: .5em .1em 0 .21em;
}

    i.icss-hand:before {
        width: .1em;
        height: .55em;
        background: currentColor;
        left: .5em;
        bottom: .3em;
        border-radius: 80% / 20%;
        box-shadow: -.13em -.1em 0, -.265em -.15em 0, -.4em -.11em 0;
    }

    i.icss-hand:after {
        width: .12em;
        height: .43em;
        background: currentColor;
        bottom: .25em;
        left: -.06em;
        border-radius: .04em;
        transform: rotate(-16deg);
        border-radius: .04em 70% .04em .04em / .04em 70% .04em .04em;
    }
i.icss-bookmark {
    width: 1em;
    height: 1em;
    background-color: transparent;
    margin: 0;
}

    i.icss-bookmark:before {
        width: .5em;
        height: .8em;
        transform: translate(-50%, -50%);
        border: .25em solid currentColor;
        border-color: currentColor currentColor transparent currentColor;
        border-radius: .03em;
        top: 50%;
        left: 50%;
    }