:root {
  --textColor: #EFEFEF;
}

body {
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #101010;
    color: var(--textColor);
    width: 100%;
}
a { text-decoration: none; color: var(--textColor);}

#controls {font-family: 'Oxanium';}
#data {
    font-family: 'Roboto';
    padding-top: 40px;
    padding-left: 40px;
    background-color: transparent;
}
.NewReciprocity {background-color: #45B6FE; animation: newReciprocityAnimate 4s infinite;}
@keyframes newReciprocityAnimate { 0% {background:rgba(69,182,254,0.0);} 90% {background:rgba(69,182,254,0.0);color: var(--textColor);} 100% {background:rgba(69,182,254,1.0);color: #000;} }

.PipsProfit { background-color: #08F26E; animation: pipsProfitAnimate 10s infinite;}
@keyframes pipsProfitAnimate { 0% {background:rgba(8,242,110,0.0);} 96% {background:rgba(8,242,110,0.0);} 100% {background:rgba(8,242,110,0.4);} }

.PipsLoss { background-color: #FADA03; animation: pipsLossAnimate 5s infinite;}
@keyframes pipsLossAnimate { 0% {background:rgba(250,218,3,0.0);} 90% {background:rgba(250,218,3,0.0);color: var(--textColor);} 100% {background:rgba(250,218,3,1.0); color: #000;} }


.bgWC {
    text-align: center;
}

.blue {
    background-color: #276AEC;
    color: #FFFFFF;
}

.dn {
    color: #EF5350;
}

.up {
    color: #26A600;
}

.orng { color: #FFA500; }
.whte { color: #EFEFEF; }

.red {
    background-color: #CC0E35;
    color: #FFFFFF;
}

.green {
    background-color: #101010;
    color: #00F572;
}

.yellow {
    background-color: #FAF87F;
    color: #101010;
}