.collab-animation {
    animation: blinker 1s cubic-bezier(0, 0.1, 1, 1) infinite alternate;  
}
@keyframes blinker { 

    0% { 
        opacity: 1; 
        // background-color: red;
    } 
    40% { 
        opacity: 1; 
        // background-color: red;
    } 

    60% { 
        opacity: 0.8; 
        // background-color: yellow;
    } 

    90% {
        opacity: 0.4; 
        // background-color: blue; 
    }
    to { 
        opacity: 0.4; 
        color: lightgreen;
    } 
}

.collab {
    border-radius:20px;
    display: inline-block;
}

.collab-clock::before {
    /* clock symbol */
    content: '\1F550';
}

.collab-checkmark::before {
    /* check-mark symbol */
    content: '\2714';
}

.collab-interrupt {
    padding-right: 8px;
}

.collab-raised-hand::before {
    /* raised hand symbol */
    content: '\00270B';
    opacity: .55;
    font-size: 40px;
}

.collab-hourglass {

}

.collab-pause {
    padding: 10px;
    padding-top: 8px;
}

.collab-pagecentered {
    position: fixed;
    left: 30%;
    top: 30%;
    transform: translate(-30%, -30%);
    font-size: 10vmin;
    opacity: .9;
    background-color: lightgreen;
}

.collab-pagecentered div div {
    text-align: center;
}

.collab-expired {
    background-color: red;
    opacity: 1;
}

.collab-suspend::before {
    /* pause symbol */
    content: '\23f8';
    opacity: .55;
    font-size: 40px;
}

.collab-resume::before {
    /* play symbol */
    content: '\23f5';
    opacity: .55;
    font-size: 40px;
}

.collab-sleep {
    padding-right: 10px;
}

.collab-fixed {
    position: fixed;
    right: 1em;
    bottom: 2em;
}

.collab-fixed2 {
    position: fixed;
    right: 5em;
    bottom: 2em;
    /*
    width: 8em;
    overflow-x: hidden;
    */
}

.collab-fixed3 {
    position: fixed;
    right: 14em;
    bottom: 2em;
    /*
    width: 8em;
    overflow-x: hidden;
    */
}

/* same position as fixed */
.collab-fixed4 {
    position: fixed;
    right: 1em;
    bottom: 2em;
}

.collab-interrupt::before {
    content: '\1f3f3';
    opacity: .55;
    font-size: 40px;
}

.collab-interrupt.collab-active {
    border-color: red;
    border-width: 5px;
    border-style: solid;
}

.collab-sleep::before {
    content: '\1f634';
    opacity: .55;
    font-size: 40px;
}

.collab-switch {
    font-size: 18px;
}

.collab-switch0::before {
    content: '\1F515';
}

.collab-switch1::before {
    content: '\1F514';
}

.collab-sleep.collab-active {
    border-color: yellow;
    border-width: 5px;
    border-style: solid;
}


.collab-count {
    font-size: .7em;
    vertical-align: sub;
}

.collab-active:hover {
    box-shadow:0px 5px 5px rgba(0,0,0,0.2);
    transform : translateY(-3px);
    cursor: pointer;
}

.collab-progress {
    cursor: progress;
    animation: greenyellow 2s linear infinite;
}

@keyframes greenyellow {
    from {
        color: yellow;
    }
    to {
        transform: rotate(360deg);
        color: green;
    }
}

.collab-hidden  {
    display: none;
}

.collab-dying {
    animation: fadeout 1s;
    animation-fill-mode: forwards;
    color: green;
}
@keyframes fadeout {
    to {
        opacity: 0;
    }
}

.collab-error {
    animation: blinker .4s linear 8 alternate;  
    color: red;
    font-weight: bold;
}

.collab-error::after {
    /* warning sign */
    content: '\26A0';
}
.collab-count span {
    display: block;
}