/*
Gray 
50
#FAFAFA rgb(250, 250, 250);
100
#F5F5F5 rgb(245, 245, 245);
200
#EEEEEE rgb(238, 238, 238);
300
#E0E0E0 rgb(224, 224, 224);
400
#BDBDBD rgb(189, 189, 189);
500
#9E9E9E rgb(158, 158, 158);
600
#757575 rgb(117, 117, 117);
700
#616161 rgb(97, 97, 97);
800
#424242 rgb(66, 66, 66);
900
#212121 rgb(33, 33, 33);
*/

.bg-red {
  background-color: rgba(204, 69, 82, 0.1);
  border-color: rgba(138, 12, 24, 0.2);
}

.bg-yellow {
  background-color: rgba(211, 163, 71, 0.1);
  border-color: rgba(143, 98, 13, 0.2);
}

.bg-green {
  background-color: rgba(80, 176, 59, 0.1);
  border-color: rgba(29, 120, 10, 0.2);
}

.bg-blue {
  background-color: rgba(57, 85, 140, 0.1);
  border-color: rgba(17, 43, 95, 0.2);
}

.bg-gray {
  background-color: rgba(97, 97, 97, 0.1);
  border-color: rgba(33, 33, 33, 0.2);
}

.col-white {
  color: rgb(250, 250, 250);
}

.col-black {
  color: rgb(33, 33, 33);
}

.col-gray {
  color: rgb(128, 128, 128);
}

@keyframes pulseBoxShadowBlue {
    0% {
        box-shadow: 0px 0px 0px 0px rgba(132, 154, 196, 0.4);
    }
    70% { 
        box-shadow: 0px 0px 6px 24px rgba(132, 154, 196, 0);
    }
    100% {
        box-shadow: 0px 0px 0px 0px rgba(132, 154, 196, 0);
    }
}

@keyframes pulseBoxShadowRed {
    0% {
        box-shadow: 0px 0px 0px 0px rgba(178, 127, 109, 0.4);
    }
    70% { 
        box-shadow: 0px 0px 6px 24px rgba(178, 127, 109, 0);
    }
    100% {
        box-shadow: 0px 0px 0px 0px rgba(178, 127, 109, 0);
    }
}

@keyframes pulseBoxShadowGray {
    0% {
        box-shadow: 0px 0px 0px 0px rgba(128, 128, 128, 0.4);
    }
    70% { 
        box-shadow: 0px 0px 6px 24px rgba(128, 128, 128, 0);
    }
    100% {
        box-shadow: 0px 0px 0px 0px rgba(128, 128, 128, 0);
    }
}