/*
##################################
#### Color - Blue & Yellow001 ####
##################################
*/



:root {

  --primary400:    #FF80F3;
  --primary500:    #EB00D4;
  --primary600:    #BA00A8;

  --secundary400:  #FF674E;
  --secundary500:  #F42C0B;
  --secundary600:  #C91C00;

  --tertiary400:   #FFE160;
  --tertiary500:   #FCCD00;
  --tertiary600:   #CFA800;

  --dark100:       #FAFAFA;
  --dark200:       #F5F5F5;
  --dark300:       #E5E5E5;
  --dark400:       #BFBFBF;
  --dark500:       #999999;
  --dark600:       #666666;
  --dark700:       #4D4D4D;
  --dark800:       #262626;
  --dark900:       #000000;

  --alert-r500:    #FF0034;
  --alert-r100:    #FFD9E1;
  --alert-y500:    #FF9700;
  --alert-y100:    #FFEFD9;
  --alert-g500:    #00DF54;
  --alert-g100:    #D9FAE5;

}



/* primary color */
.primary400-txt    { color:            var(--primary400); }
.primary400-brd    { border-color:     var(--primary400) !important; }
.primary400-bgd    { background-color: var(--primary400); }

.primary500-txt    { color:            var(--primary500); }
.primary500-brd    { border-color:     var(--primary500) !important; }
.primary500-bgd    { background-color: var(--primary500); }

.primary600-txt    { color:            var(--primary600); }
.primary600-brd    { border-color:     var(--primary600) !important; }
.primary600-bgd    { background-color: var(--primary600); }

/* secundary color*/
.secundary400-txt  { color:            var(--secundary400); }
.secundary400-brd  { border-color:     var(--secundary400) !important; }
.secundary400-bgd  { background-color: var(--secundary400); }

.secundary500-txt  { color:            var(--secundary500); }
.secundary500-brd  { border-color:     var(--secundary500) !important; }
.secundary500-bgd  { background-color: var(--secundary500); }

.secundary600-txt  { color:            var(--secundary600); }
.secundary600-brd  { border-color:     var(--secundary600) !important; }
.secundary600-bgd  { background-color: var(--secundary600); }

/* tertiary color*/
.tertiary400-txt   { color:            var(--tertiary400); }
.tertiary400-brd   { border-color:     var(--tertiary400) !important; }
.tertiary400-bgd   { background-color: var(--tertiary400); }

.tertiary500-txt   { color:            var(--tertiary500); }
.tertiary500-brd   { border-color:     var(--tertiary500) !important; }
.tertiary500-bgd   { background-color: var(--tertiary500); }

.tertiary600-txt   { color:            var(--tertiary600); }
.tertiary600-brd   { border-color:     var(--tertiary600) !important; }
.tertiary600-bgd   { background-color: var(--tertiary600); }

/* dark color*/
.dark100-txt       { color:            var(--dark100); }
.dark100-brd       { border-color:     var(--dark100) !important; }
.dark100-bgd       { background-color: var(--dark100); }

.dark200-txt       { color:            var(--dark200); }
.dark200-brd       { border-color:     var(--dark200) !important; }
.dark200-bgd       { background-color: var(--dark200); }

.dark300-txt       { color:            var(--dark300); }
.dark300-brd       { border-color:     var(--dark300) !important; }
.dark300-bgd       { background-color: var(--dark300); }

.dark400-txt       { color:            var(--dark400); }
.dark400-brd       { border-color:     var(--dark400) !important; }
.dark400-bgd       { background-color: var(--dark400); }

.dark500-txt       { color:            var(--dark500); }
.dark500-brd       { border-color:     var(--dark500) !important; }
.dark500-bgd       { background-color: var(--dark500); }

.dark600-txt       { color:            var(--dark600); }
.dark600-brd       { border-color:     var(--dark600) !important; }
.dark600-bgd       { background-color: var(--dark600); }

.dark700-txt       { color:            var(--dark700); }
.dark700-brd       { border-color:     var(--dark700) !important; }
.dark700-bgd       { background-color: var(--dark700); }

.dark800-txt       { color:            var(--dark800); }
.dark800-brd       { border-color:     var(--dark800) !important; }
.dark800-bgd       { background-color: var(--dark800); }

.dark900-txt       { color:            var(--dark900); }
.dark900-brd       { border-color:     var(--dark900) !important; }
.dark900-bgd       { background-color: var(--dark900); }

/* gradient color*/
.gradient500-txt   { background: -webkit-linear-gradient(0deg, var(--primary500) 0%, var(--secundary400) 50%, var(--tertiary500) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.gradient400-bgd   { background: linear-gradient(270deg, var(--secundary500)  0%,    var(--primary500)   100%); }
.gradient500-bgd   { background: linear-gradient(270deg, var(--primary500)    0%,    var(--secundary400) 50%,    var(--tertiary500) 100%); }
.gradient600-bgd   { background: linear-gradient(270deg, var(--secundary500)  0%,    var(--tertiary500)  100%); }

/* alert color */
.alert-r500-txt    { color:            var(--alert-r500); }
.alert-r500-brd    { border-color:     var(--alert-r500) !important; }
.alert-r500-bgd    { background-color: var(--alert-r500); }

.alert-r100-txt    { color:            var(--alert-r100); }
.alert-r100-brd    { border-color:     var(--alert-r100) !important; }
.alert-r100-bgd    { background-color: var(--alert-r100); }

.alert-y500-txt    { color:            var(--alert-y500); }
.alert-y500-brd    { border-color:     var(--alert-y500) !important; }
.alert-y500-bgd    { background-color: var(--alert-y500); }

.alert-y100-txt    { color:            var(--alert-y100); }
.alert-y100-brd    { border-color:     var(--alert-y100) !important; }
.alert-y100-bgd    { background-color: var(--alert-y100); }

.alert-g500-txt    { color:            var(--alert-g500); }
.alert-g500-brd    { border-color:     var(--alert-g500) !important; }
.alert-g500-bgd    { background-color: var(--alert-g500); }

.alert-g100-txt    { color:            var(--alert-g100); }
.alert-g100-brd    { border-color:     var(--alert-g100) !important; }
.alert-g100-bgd    { background-color: var(--alert-g100); }