/* Fonts */
@import 'ulibbc-fonts.css';
@import 'tabler-icons.css';

/* ROOT */
:root {
  --white: #FFFFFF;
  --black: #212529;
  --grey: #888E8F;
  --greylight: #f8f8f8;
  --uigreen: #BED600;
  --background: #eff1f3;
  --green: #32d296;
  --greenlight: #edfbf6;
  --red: #f0506e;
  --redlight: #fef4f6;
  --orange: #faa05a;
  --orangelight: #fff6ee;
  --blue: #5a9dfa;
  --bluelight: #dee9fe;
}
/* HTML */
html  {
  font-family: 'Open Sans';
  font-size: 16px;
  font-weight: regular;
  color: var(--black);
  background: var(--background);
}
/* HEADINGS */
h1,
.uk-h1,
h2,
.uk-h2,
h3,
.uk-h3,
h4,
.uk-h4,
h5,
.uk-h5,
h6,
.uk-h6,
.uk-heading-small,
.uk-heading-medium,
.uk-heading-large,
.uk-heading-xlarge,
.uk-heading-2xlarge,
.uk-heading-3xlarge {
  margin: 0 0 20px 0;
  font-family: 'Open Sans';
  font-weight: 700;
  color: var(--black);
  text-transform: none;
}
/* LINKS */
a:hover,
.uk-link:hover,
.uk-link-toggle:hover .uk-link {
  text-decoration: none !important;
}
/* SECTIONS */
header  {
  color: var(--black);
  background: var(--white);
  padding: 15px 0;
  font-size: .875rem;
}
main  {
  padding-bottom: 125px;
}
footer  {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  color: var(--black);
  background: var(--white);
  margin-top: 50px;
  padding: 20px 0;
  font-size: .75rem;
  z-index: 100;
}
#welcome {
  padding-top: 50px;
}
#projects {
  padding-top: 50px;
}
#noticebox  {
  padding-top: 50px; 
}
#rechner  {
  padding-top: 50px; 
}
#systemoverview  {
  padding-top: 50px;
}
#overview  {
  padding-top: 50px;
}
#page  {
  padding-top: 50px;
}
/* TEXT */
.text-small {
  font-size: .75rem !important;
}
.text-medium {
  font-size: .85rem !important;
}
.black  {
  color: var(--black) !important;
}
.green  {
  color: var(--green) !important;
}
.red  {
  color: var(--red) !important;
}
.orange  {
  color: var(--orange) !important;
}
/* ICONS */
.icon-med {
  font-size: 20px;
}
.icon-large {
  font-size: 26px;
}
/* CARDS */
.uk-alert {
  border-radius: 16px;
}
.uli-card {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .075);
  border-radius: 16px;
}
.uli-card-small {
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}
.uli-card-default {
  color: var(--black);
  background-color: var(--greylight);
}
.uli-card-online {
  color: var(--green);
  background-color: var(--greenlight);
}
.uli-card-offline {
  color: var(--red);
  background-color: var(--redlight);
}
.uli-card-unknown {
  color: var(--orange);
  background-color: var(--orangelight);
}
.uk-card-default  {
  color: var(--black);
}
#preloader {
  z-index: 9999;
}
/* Basic styling for the dots */
.dot {
  display: inline-block;
  animation: blink 1.5s infinite;
}

/* Animation for blinking effect */
@keyframes blink {
  0% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  66% {
    opacity: 1;
  }
}

/* Adding delay to each dot */
.dot:nth-child(1) {
  animation-delay: 0s;
}

.dot:nth-child(2) {
  animation-delay: 0.3s;
}

.dot:nth-child(3) {
  animation-delay: 0.6s;
}
/* SUBNAV PILL*/

.uk-subnav-pill > * > :first-child {
  padding: 5px 10px;
  background: transparent;
  color: var(--black);
  border-radius: 10px;
}
/* Hover */
.uk-subnav-pill > * > a:hover {
  background-color: var(--greylight);
  color: var(--black);
}
/* OnClick */
.uk-subnav-pill > * > a:active {
  background-color: var(--black);
  color: var(--white);
}
/* Active */
.uk-subnav-pill > .uk-active > a {
  background-color: var(--black);
  color: var(--white);
}
/* LABEL */
.uk-label {
  border-radius: 50%;
}
/* BUTTONS */
.uk-button  {
  border-radius: 10px;
}
/*
 * Primary
 */
 .uk-button-primary {
  background-color: #222;
  color: #fff;
  border: 1px solid transparent;
}
/* Hover */
.uk-button-primary:hover {
  background-color: #151515;
  color: #fff;
}
/* OnClick + Active */
.uk-button-primary:active,
.uk-button-primary.uk-active {
  background-color: #080808;
  color: #fff;
}
/*
 * Secondary
 */
.uk-button-secondary {
  background-color: #222;
  color: #fff;
  border: 1px solid transparent;
}
/* Hover */
.uk-button-secondary:hover {
  background-color: #151515;
  color: #fff;
}
/* OnClick + Active */
.uk-button-secondary:active,
.uk-button-secondary.uk-active {
  background-color: #080808;
  color: #fff;
}
@keyframes pulsate {
  0% {
      transform: scale(1);
      opacity: 1;
  }
  50% {
      transform: scale(1.2);
      opacity: 0.7;
  }
  100% {
      transform: scale(1);
      opacity: 1;
  }
}
.pulsate {
  animation: pulsate 1.5s infinite;
}
@keyframes blink {
  0% {
      transform: scale(1);
      opacity: 1;
  }
  50% {
      transform: scale(1);
      opacity: 0;
  }
  100% {
      transform: scale(1);
      opacity: 1;
  }
}
.blink {
  animation: blink 2s infinite;
}
.uk-input {
  border-radius: 10px;
}
.uk-notification-message,
.uk-modal-body,
.uk-modal-dialog  {
  border-radius: 16px;
}
.uk-modal-footer  {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
.uk-card-badge {
  height: 20px;
}