.fas, .far {
  color: #0066aa;
}

svg {
  fill: #0066aa;
}

svg.right {
  float: right;
}

table.sectionoverview tr svg {
  width: 16px;
  height: 16px;
  margin-right: .5em;
}

table.sectionoverview tr svg.right {
  margin-right: 0;
  margin-left: .5em;
}

table.sectionoverview tr:hover svg,
table.sectionoverview tr.redbg svg,
table.sectionoverview tr.bluebg svg,
table.sectionoverview tr.orangebg svg {
  fill: #ffffff;
}

svg[data-src='/images/svg/checkmark.svg'] {
  fill: #00cc00;
}

svg[data-src='/images/svg/cross.svg'] {
  fill: #cc0000;
  height: 14px !important;
  margin-top: 2px;
}

svg[data-src='/images/svg/alert.svg'] {
  fill: #ff9900;
}

button svg {
  float: left;
  margin-right: .5em;
  width: 14px;
  height: 14px;
  fill: #ffffff !important;
}
button .fas,
button .far {
  float: left;
  margin-right: .5em;
  color: #FFFFFF;
}
button.white .fas,
button.white .far {
  color: #0060aa;
}


button svg[data-src='/images/svg/cross.svg'] {
  height: 12px !important;
}

svg.white {
  fill: #ffffff;
}

svg.black {
  fill: #000000;
}

svg.grey {
  fill: #888888;
}

svg.red {
  fill: #dd2211;
}

svg.green {
  fill: #00cc00;
}

svg.blue {
  fill: #0060aa;
}


svg.small {
  height: 12px !important;
}


/** Animaties **/
svg.spin {
  animation-name: spin;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}