.member{
    background-color: #FFFF00;
    color: #8B0000;
}
.leader{
    background-color: #B22222;
    color: #FFFF00;
}
.team{
    background-color: #8B0000;
    color: #FFFF00;
}
.pointer{
    cursor: pointer;
}

.color-red{
    color: #B22222;
}

.color-blue{
    color: #000080;
}

.bg-blue{
    background-color: #000080;
}

.bg-dark-red{
    background-color: #8B0000;
}

.bg-red{
    background-color: #B22222;
}

.bg-dark-red{
    background-color: #8B0000;
}

.bg-green{
    background-color: #008000;
}

.bg-yellow{
    background-color: #FFD700;
}

.bg-light-yellow{
    background-color: #EEE8AA;
}

.bg-gray{
    background-color: #E6E6FA;
}

.bg-orange{
    background-color: #FF8C00;
}

.text-yellow{
    color: #FFFF00;
}

.text-red{
    color: #B22222;
}

.text-dark-red{
    color: #8B0000;
}

.text-white{
    color: #FFF;
}

.text-black{
    color: #000;
}

.text-gray{
    color: #808080;
}

.border-red{
    border-color: #B22222 !important;
}

.disabled{
    opacity: 0.8;
    cursor: default;
}

.not-select{
    opacity: 0.5;
}

.bg-orange-opacity{
    background: rgb(255, 140, 0, 0.7);
}

.bg-orange-opacity:hover{
    background: rgb(255, 140, 0, 1);
}

.bg-gray-opacity{
    background: rgb(90, 90, 90, 0.7);
}

.hover-bg-gray:hover{
    background: rgb(90, 90, 90, 1);
}

.bg-red-opacity{
    background: rgb(178, 34, 34, 0.7);
}

.hover-bg-red:hover{
    background: rgb(178, 34, 34, 1);
}

.bg-blue-opacity{
    background: rgb(0, 0, 139, 0.7);
}

.hover-bg-blue:hover{
    background: rgb(0, 0, 139, 1);
}

.bg-black{
    background: rgb(0, 0, 0, 1);
}

@keyframes lights {
    0% {
      color: hsl(230, 40%, 80%);
      text-shadow:
        0 0 1em hsla(320, 100%, 50%, 0.2),
        0 0 0.125em hsla(320, 100%, 60%, 0.3),
        -1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
        1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
    }

    30% {
      color: hsl(230, 80%, 90%);
      text-shadow:
        0 0 1em hsla(320, 100%, 50%, 0.5),
        0 0 0.125em hsla(320, 100%, 60%, 0.5),
        -0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
        0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
    }

    40% {
      color: hsl(230, 100%, 95%);
      text-shadow:
        0 0 1em hsla(320, 100%, 50%, 0.5),
        0 0 0.125em hsla(320, 100%, 90%, 0.5),
        -0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.2),
        0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);
    }

    70% {
      color: hsl(230, 80%, 90%);
      text-shadow:
        0 0 1em hsla(320, 100%, 50%, 0.5),
        0 0 0.125em hsla(320, 100%, 60%, 0.5),
        0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
        -0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
    }

    100% {
      color: hsl(230, 40%, 80%);
      text-shadow:
        0 0 1em hsla(320, 100%, 50%, 0.2),
        0 0 0.125em hsla(320, 100%, 60%, 0.3),
        1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
        -1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
    }

  }

.affect-cover {
    margin: 0;
    font: 100% / 1.5 Raleway, sans-serif;
    color: hsl(230, 100%, 95%);
    background: linear-gradient(135deg, hsl(230, 40%, 12%), hsl(230, 20%, 7%));
    display: flex;
}

.affect-text {
    margin: auto;
    font-size: 30px;
    font-weight: 300;
    animation: lights 5s 750ms linear infinite;
}