$c1: #004170;
$c2: #005999;
$c3: #1687d9;
$c4: #96d0fa; 
$m1: #36434d;
$m2: #667580;
$m3: #acb7bf;
$m4: #e4ebf0;
$m5: #f5f8fa;
$m6: #000000;
$m7: #ffffff;


.s-bg_c1 {
  background-color: $c1!important;
}

.s-bg_c2 {
  background-color: $c2!important;
}

.s-bg_c3 {
  background-color: $c3!important;
}

.s-bg_c4 {
  background-color: $c4!important;
}

.s-bg_m1 {
  background-color: $m1!important;
}

.s-bg_m2 {
  background-color: $m2!important;
}

.s-bg_m3 {
  background-color: $m3!important;
}

.s-bg_m4 {
  background-color: $m4!important;
}

.s-bg_m5 {
  background-color: $m5!important;
}

.s-bg_m6 {
  background-color: $m6!important;
}

.s-bg_m7 {
  background-color: $m7!important;
}


/*
  color
 */

.s-ft_c1 {
  color: $c1!important;
}

.s-ft_c2 {
  color: $c2!important;
}

.s-ft_c3 {
  color: $c3!important;
}

.s-ft_c4 {
  color: $c4!important;
}

.s-ft_m1 {
  color: $m1!important;
}

.s-ft_m2 {
  color: $m2!important;
}

.s-ft_m3 {
  color: $m3!important;
}

.s-ft_m4 {
  color: $m4!important;
}

.s-ft_m5 {
  color: $m4!important;
}

/*
  border
 */

.s-bd_c1 {
  border-color: $c1;
}

.s-bd_c2 {
  border-color: $c2;
}

.s-bd_c3 {
  border-color: $c3;
}

.s-bd_c4 {
  border-color: $c4;
}

.s-bd_m1 {
  border-color: $m1;
}

.s-bd_m2 {
  border-color: $m2;
}

.s-bd_m3 {
  border-color: $m3;
}

.s-bd_m4 {
  border-color: $m4;
}

.s-bd_m5 {
  border-color: $m4;
}

/*
  hover color
 */

.s-ft-hv_c1 {
  &:hover {
    color: $c1!important;
  }
}

.s-ft-hv_c2 {
  &:hover {
    color: $c2!important;
  }
}

.s-ft-hv_c3 {
  &:hover {
    color: $c3!important;
  }
}

.s-ft-hv_c4 {
  &:hover {
    color: $c4!important;
  }
}

.s-ft-hv_m1 {
  &:hover {
    color: $m1!important;
  }
}

.s-ft-hv_m2 {
  &:hover {
    color: $m2!important;
  }
}

.s-ft-hv_m3 {
  &:hover {
    color: $m3!important;
  }
}

.s-ft-hv_m4 {
  &:hover {
    color: $m4!important;
  }
}

.s-ft-hv_m5 {
  &:hover {
    color: $m4!important;
  }
}

/*
  hover background-color
 */

.s-bg-hv_c1 {
  &:hover {
    background-color: $c1!important;
  }
}

.s-bg-hv_c2 {
  &:hover {
    background-color: $c2!important;
  }
}

.s-bg-hv_c3 {
  &:hover {
    background-color: $c3!important;
  }
}

.s-bg-hv_c4 {
  &:hover {
    background-color: $c4!important;
  }
}

.s-bg-hv_m1 {
  &:hover {
    background-color: $m1!important;
  }
}

.s-bg-hv_m2 {
  &:hover {
    background-color: $m2!important;
  }
}

.s-bg-hv_m3 {
  &:hover {
    background-color: $m3!important;
  }
}

.s-bg-hv_m4 {
  &:hover {
    background-color: $m4!important;
  }
}

.s-bg-hv_m5 {
  &:hover {
    background-color: $m4!important;
  }
}