@font-face {
  font-family: font_R;
  src: url(red-hat-display.ttf);
}

@font-face {
  font-family: font_M;
  src: url(red-hat-display-medium.ttf);
}

@font-face {
  font-family: font_B;
  src: url(red-hat-display-bold.ttf);
}

@font-face {
  font-family: font_BL;
  src: url(red-hat-display-black.ttf);
}

$BFI1: #00a651;
$BFI2: #a6ce39;
$BG: #eff8f4;
$mainT: #193C2A;
$subT: #6d7571;

$colPos1: #5ABC44;
$colPos2:#00A651;
$colEdit: #EE8400;
$colView:#2F6C82;
$colReject: #E84D2E;
$colBlacklist: #262C2C;
$colKeep: #5c7b7b;

.headr {
  background: white;
  height: 75px;
  width: 100%;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.headr1,
.headr2 {
  width: 50%;
  height: 100%;
}

.headr1 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.headr2 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.sysName {
  color: $mainT;
  font-size: 25px;
  margin-top: -6px;
  font-family: font_BL;
}

.sysSub {
  color: $subT;
  font-family: font_R;
  font-size: 13px;
  margin-top: -6px;
}

.userName {
  color: $mainT;
  font-family: font_B;
  font-size: 25px;
  margin-top: -6px;
  text-align: right;
  text-transform: capitalize;
}

.userRole {
  color: $subT;
  font-family: font_R;
  font-size: 14px;
  margin-top: -6px;
  text-align: right;
  display: flex;
  justify-content: flex-end;
}

.userTitle {
  margin-right: 50px;
  margin-left: 50px;
}

.headrButtons {
  background: transparent;
  font-size: 20px;
  border-radius: 100px;
  border: 2px solid transparent;
  width: 50px;
  height: 50px;
  color: $subT;
  transition: 0.4s;

  &:hover {
    color: $colReject;
    transition: 0.4s;
  }
}

.down {
  color: $colReject;
}

.up {
  color: $colPos1;
}

.netError {
  color: $colEdit;
}

.server {
  // color: $subT;
  color: white;
}

@media only screen and (max-width: 1400px) {
  .sysName {
    color: $mainT;
    font-family: font_B;
    font-size: 25px;
    margin-top: -6px;
  }

  .sysSub {
    color: $subT;
    font-family: font_R;
    font-size: 10px;
    margin-top: -6px;
  }

  .userName {
    color: $mainT;
    font-family: font_B;
    font-size: 20px;
    margin-top: -6px;
    text-align: right;
    text-transform: capitalize;
  }

  .userRole {
    color: $subT;
    font-family: font_R;
    font-size: 10px;
    margin-top: -4px;
    text-align: right;
  }
}