.red { background-color: #EF9A9A; }
.gray { background-color: #9E9E9E; }
.green { background-color: #A5D6A7; }
.yellow { background-color: #FDD835; }
.blue { background-color: #1E88E5; color: rgba(255,255,255,0.87); }
.indigo { background-color: #3F51B5; color: rgba(255,255,255,0.87);}
.blue-grey { background-color: #607D8B; color: rgba(255,255,255,0.87);}
.purple { background-color: #CE93D8; }
.black { background-color: #2c2c2c; color: rgba(255,255,255,0.87); text-shadow: 2px 2px 4px rgba(255,255,255,0.2);}
.concrete { background:url('../images/concrete_seamless.png'); }
.wood-tileable { background:url('../images/tileable_wood_texture.png'); }
.wood { background:url('../images/wood-885260_1920.jpg'); color: rgba(255,255,255,0.87); text-shadow: 2px 2px 4px rgba(0,0,0,0.8);}
.carbon-fibre { background:url('../images/carbon_fibre.png'); color: rgba(255,255,255,0.87); text-shadow: 2px 2px 4px rgba(0,0,0,0.8);}
.carbon-fibre2x { background:url('../images/carbon_fibre_2X.png'); color: rgba(255,255,255,0.87); text-shadow: 2px 2px 4px rgba(0,0,0,0.8);}
.green-cup { background:url('../images/green_cup.png'); color: rgba(255,255,255,0.87); text-shadow: 2px 2px 4px rgba(0,0,0,0.8);}
.notebook { background:url('../images/notebook.png'); }

.clue-icon {
    margin: 2px;
}

/*.clue.ng-hide {*/
    /*opacity: 0;*/
/*}*/
/*.clue.ng-hide-add, .clue.hg-hide-remove {*/
    /*transition: all 0.5s linear;*/
/*}*/

.avatar {
    
    /* make a square container */
    width: 48px;
    height: 48px;

    /* fill the container, preserving aspect ratio, and cropping to fit */
    background-size: cover;

    /* center the image vertically and horizontally */
    background-position: center;

    /* round the edges to a circle with border radius 1/2 container size */
    border-radius: 50%;
}

.leftpad {
    padding-left: 5px;
}

.center {
    text-align: center;
}

/* debugging for divs below */

/*
div {
    border: 1px solid black;
}
*/

.verdana-small {
    font-family: Verdana;
    font-size: 10pt;
}

.offline {
    background: repeating-linear-gradient(
  -55deg,
  rgba(255, 204,0, 0.1),
  rgba(0, 0, 0, 0.1) 10px,
  rgba(0, 0, 0, 0.1) 10px,
  rgba(0, 0, 0, 0.1) 20px
);
}

.room-logo {
    width: 300px;
}

@font-face {
    font-family: edo;
    src: url(../images/edo.ttf);
}

/* https://www.gradient-animator.com/ */
.flash-hint {
    background: linear-gradient(270deg, #244366, #ffffff, #ff0000);
    background-size: 600% 600%;

    -webkit-animation: AnimationName 1s ease infinite;
    -moz-animation: AnimationName 1s ease infinite;
    animation: AnimationName 1s ease infinite;

}
.flash-hint-once {
    background: linear-gradient(270deg, #244366, #ffffff, #ff0000);
    background-size: 600% 600%;

    -webkit-animation: AnimationName 1s ease 1;
    -moz-animation: AnimationName 1s ease 1;
    animation: AnimationName 1s ease 1;

}

@-webkit-keyframes AnimationName {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

@-moz-keyframes AnimationName {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

@keyframes AnimationName {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}



.tooltip {

    position: relative;

    display: inline-block;

    /* border-bottom: 1px dotted #ccc;

    color: #006080; */

}



.tooltip .tooltiptext {

    visibility: hidden;

    position: absolute;

    width: 120px;

    background-color: #555;

    color: #fff;

    text-align: center;

    padding: 5px 0;

    border-radius: 6px;

    z-index: 1;

    opacity: 0;

    transition: opacity 0.3s;

}



.tooltip:hover .tooltiptext {

    visibility: visible;

    opacity: 1;

}



.tooltip-right {

  top: -5px;

  left: 125%;  

}



.tooltip-right::after {

    content: "";

    position: absolute;

    top: 50%;

    right: 100%;

    margin-top: -5px;

    border-width: 5px;

    border-style: solid;

    border-color: transparent #555 transparent transparent;

}



.tooltip-bottom {

  top: 135%;

  left: 50%;  

  margin-left: -60px;

}



.tooltip-bottom::after {

    content: "";

    position: absolute;

    bottom: 100%;

    left: 50%;

    margin-left: -5px;

    border-width: 5px;

    border-style: solid;

    border-color: transparent transparent #555 transparent;

}



.tooltip-top {

  bottom: 125%;

  left: 50%;  

  margin-left: -60px;

}



.tooltip-top::after {

    content: "";

    position: absolute;

    top: 100%;

    left: 50%;

    margin-left: -5px;

    border-width: 5px;

    border-style: solid;

    border-color: #555 transparent transparent transparent;

}



.tooltip-left {

  top: -5px;

  bottom:auto;

  right: 128%;  

}

.tooltip-left::after {

    content: "";

    position: absolute;

    top: 50%;

    left: 100%;

    margin-top: -5px;

    border-width: 5px;

    border-style: solid;

    border-color: transparent transparent transparent #555;

}