/* border radius */
/* box shadow */
:root {
  --color-primary: #004cba;
  --color-secondary: #ad123c;
  --color-tertiary: #208fde;
  --color-green: green;
  --color-red: red;
  --color-white: #FFF;
  --color-black: #000;
  --color-grey: #6c757d;
  --color-lightgrey: #fafafa;
  --background-info: #cce5ff;
  --border-info: #b8daff;
  --color-info: #004085;
  --background-error: #f8d7da;
  --border-error: #f5c6cb;
  --color-error: #721c24;
  --background-warning: #fff3cd;
  --border-warning: #ffeeba;
  --color-warning: #856404;
  --background-success: #d4edda;
  --border-success: #c3e6cb;
  --color-success: #155724;
  --font-primary: quicksand;
  --font-secondary: quicksand; }

.loader, .loader-fixed {
  animation-play-state: running;
  opacity: 1;
  position: relative;
  height: calc($border-size * 2)10px;
  width: calc($border-size * 2)10px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  background: transparent; }

@keyframes spinner {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
  .loader.-paused, .loader-fixed.-paused {
    animation-play-state: paused;
    opacity: 0.2;
    transition: opacity linear 0.1s; }
  .loader::before, .loader-fixed::before {
    animation: 1.5s linear infinite spinner;
    animation-play-state: inherit;
    border-style: solid;
    border-width: 2px;
    border-color: #004cba;
    border-bottom-color: transparent;
    border-radius: 50%;
    content: "";
    opacity: inherit;
    position: absolute;
    will-change: transform;
    left: 0; }
  .loader:before, .loader-fixed:before {
    height: 10px;
    width: 10px;
    border-width: 3px;
    margin: 2px; }
  .loader:before, .loader-fixed:before {
    height: 4px;
    width: 4px; }
  .loader.shadow, .loader-fixed.shadow {
    -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
    background: #FFF; }
  .loader.size16, .loader-fixed.size16 {
    height: 16px;
    width: 16px; }
    .loader.size16:before, .loader-fixed.size16:before {
      border-width: 3px; }
    .loader.size16:before, .loader-fixed.size16:before {
      height: 6px;
      width: 6px; }
  .loader.size24, .loader-fixed.size24 {
    height: 24px;
    width: 24px; }
    .loader.size24:before, .loader-fixed.size24:before {
      border-width: 5px; }
    .loader.size24:before, .loader-fixed.size24:before {
      height: 10px;
      width: 10px; }
  .loader.size32, .loader-fixed.size32 {
    height: 32px;
    width: 32px; }
    .loader.size32:before, .loader-fixed.size32:before {
      border-width: 7px; }
    .loader.size32:before, .loader-fixed.size32:before {
      height: 14px;
      width: 14px; }
  .loader.size48, .loader-fixed.size48 {
    height: 48px;
    width: 48px; }
    .loader.size48:before, .loader-fixed.size48:before {
      border-width: 8px; }
    .loader.size48:before, .loader-fixed.size48:before {
      margin: 4px;
      height: 24px;
      width: 24px; }
  .loader.size64, .loader-fixed.size64 {
    height: 64px;
    width: 64px; }
    .loader.size64:before, .loader-fixed.size64:before {
      height: 44px;
      width: 44px;
      border-width: 10px; }
    .loader.size64:before, .loader-fixed.size64:before {
      margin: 4px;
      height: 36px;
      width: 36px; }
  .loader.fixed, .loader-fixed.fixed {
    transform: translate(-50%, -50%);
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 9999; }

.loader.color-primary:before {
  border-color: #004cba;
  border-bottom-color: transparent; }

.loader.color-secondary:before {
  border-color: #ad123c !important;
  border-bottom-color: transparent !important; }

.loader.color-tertiary:before {
  border-color: #208fde !important;
  border-bottom-color: transparent !important; }

.loader.color-white {
  background: #004cba; }
  .loader.color-white:before {
    border-color: #FFF !important;
    border-bottom-color: transparent !important; }

.loader.color-black:before {
  border-color: #000 !important;
  border-bottom-color: transparent !important; }

.loader.color-grey:before {
  border-color: #6c757d !important;
  border-bottom-color: transparent !important; }