.metal-collar {
    --metal-mid: 0.45em;
    --metal-inn: 0.35em;
}

.amimate-cogs.line-status-green {
    --glass-col: #5de503, #006e17;
}

.line-status-green i {
    -webkit-animation: barrelRoll 2s infinite linear;
}

.line-status-amber {
    --glass-col: #fee125, #e05005
}

    .line-status-amber i {
        -webkit-animation: barrelRoll 7s infinite linear;
    }

.line-status-gray {
    --glass-col: #d7d7d7, #605f5e;
}

.line-status-red {
    --glass-col: #f11,#A00;
    -webkit-animation: alertStrobe 3s infinite linear;
}

    .line-status-red i:last-of-type {
        top: -19% !important;
        left: 50% !important;
    }

.amimate-cogs {
    image-rendering: auto;
    font-size: 3.65px;
    filter: contrast(1);
    box-sizing: content-box;
    position: relative;
    --latex-dim: calc(12.1em + 2*var(--latex-dif, 0px));
    --latex-rad: calc(.5*var(--latex-dim));
    --inner-dim: calc(var(--latex-dim) + 2*var(--metal-inn, 0px));
    border: solid var(--metal-out, 0px) transparent;
    padding: var(--metal-mid, 0px);
    width: var(--inner-dim);
    height: var(--inner-dim);
    border-radius: 50%;
    --state-dy: 0px;
    transform: translatey(var(--state-dy));
    background: Radial-Gradient(transparent calc(73.71068% + -2*1px), #d9d9d9 70.71068%), Radial-Gradient(var(--glass-col, #000, #171717) calc(6.25em + -1*1px), #cec9c9 6.25em, #101010 calc(var(--latex-rad) + -1*1px), #0000001f var(--latex-rad)) content-box, linear-gradient(#ffffff, #ffffff) content-box, repeating-radial-gradient(rgba(119, 119, 119, 0.15), rgba(187, 187, 187, 0.15), rgba(119, 119, 119, 0.15) 2px) padding-box, conic-gradient(#f4f4f4, #fafafa, #dbdbdb, #ffffff, #ffffff, #ffffff, #fff, #ffffff, #ffffff) padding-box, linear-gradient(#000000, #940413) border-box;
    color: transparent;
    text-indent: -100vw;
    border: none;
    cursor: pointer;
    outline: none !important;
}
    /*linear-gradient(#757575, #ffffff)*/
    .amimate-cogs:after {
        box-shadow: inset 0 -4em 1px -3.5em rgb(255 255 255 / 15%);
    }

    .amimate-cogs:before, b.amimate-cogs:after {
        z-index: 2;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -6em;
        width: 12em;
        height: 12em;
        border-radius: 50%;
        content: "";
    }

    .amimate-cogs:before {
        height: 6.75em;
        border-radius: 50%/ 59% 59% 41% 41%;
        transform: scalex(0.83);
        background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.01));
    }

    .amimate-cogs i {
        display: block;
        position: relative;
        width: calc(var(--inner-dim)/2.5);
        height: calc(var(--inner-dim)/2.5);
        top: calc((var(--inner-dim)/2.5)/4.5);
        left: calc((var(--inner-dim)/2.5)/2.5);
        background: url(../img/glass-buttons/cog.png);
        background-repeat: no-repeat;
        background-size: cover;
        filter: brightness(0%);
        mix-blend-mode: multiply;
        -webkit-animation-play-state: paused;
    }

        .amimate-cogs i:last-of-type {
            top: calc((var(--inner-dim)/2.5)/-4.5);
            left: calc((var(--inner-dim)/2.5)/0.9);
            -webkit-animation-name: invertBarrelRoll;
        }

.line-status-red i:nth-child(2) {
    background: url(../img/glass-buttons/spanner.png) !important;
    background-repeat: no-repeat;
    background-size: cover !important;
    position: fixed;
    width: calc(var(--inner-dim)/2.5);
    height: calc(var(--inner-dim)/2.5);
    filter: none;
    top: 46%;
    left: 38%;
    transform-origin: right top;
    -webkit-animation: spannerTranslate 3s infinite linear;
}

.amimate-cogs i {
    -webkit-animation-play-state: running;
}

    .amimate-cogs i:nth-child(2) {
        -webkit-animation-play-state: running;
    }

@-webkit-keyframes barrelRoll {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@-webkit-keyframes invertBarrelRoll {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(-360deg)
    }
}

@-webkit-keyframes alertStrobe {
    0% {
        filter: saturate(65%)
    }

    50% {
        filter: saturate(100%)
    }

    100% {
        filter: saturate(65%)
    }
}

@-webkit-keyframes spannerTranslate {
    0% {
        transform: rotate(5deg);
    }

    50% {
        transform: rotate(15deg);
        )
    }

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