body {
    font-family:Roboto, sans-serif;
    font-size:1.5em;
    padding-top:50px;
    --accent-1:#00e9ff;
    --accent-2:#ffe47b;
    --accent-3:#154264;
    --accent-4:#ffca59;
    --accent-5:#147179;
    --accent-6:#5bc0de;
    --accent-7:#0f34c6;
    --safe-pair-1:#dc3220;
    --safe-pair-2:#005ab5;
    --vh: 1vh;
    --vh: 1dvh;
    --vw: 1vw;
    --vw: 1dvw;
}

#page-wrapper {
    min-height:700px;
    background-color:#fff
}

.navbar-main {
    margin-bottom:0;
    padding:5px 0;
    transition:all.2s ease;
    position:fixed;
    width:100%;
    height: 50px;
    top:0;
    background:#fff2;
    --color:var(--accent-3);
    --alt-color:#fff;
    color: var(--color);
}

.navbar-main:before {
    width: 100%;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    backdrop-filter:blur(50px);
    -webkit-backdrop-filter:blur(50px);
}

.lighter .navbar-main {
    background:#fffb
}

.darker .navbar-main {
    background:#0001
}

.scrolled .navbar-main {
    box-shadow: 0 -3px 8px #000;
}

.light-navbar .navbar-main, .bs-callout-info h4 {
    color:var(--accent-3)
}

.navbar-brand {
    border-radius:3px;
    height:50px;
    padding:5px 10px;
    margin:-5px 5px -10px 0;
    background:#fffb;
    position: relative
}

.navbar li {
    display:inline-block;
    border-radius:12px;
}

.footer a {
    color:#fff
}

#page-wrapper .btn-default:active {
  background: inherit;
  border-color: inherit;
  color: inherit;
}

.nav>li:hover, .nav>li.open {
    background:#fff2;
    box-shadow:0 1px 4px -2px #0008
}

.inverted .nav>li:hover, .inverted .nav>li.open {
    background:#fff1;
}

.lighter .nav>li:hover, .lighter .nav>li.open {
    background:#fff4;
}

.darker .nav>li:hover, .darker .nav>li.open {
    background:#fff2;
}

.nav>li.dropdown:hover, .nav>li.dropdown.open {
    box-shadow: 0 1px 6px -3px #0008
}

.nav>li.dropdown:hover::after, .nav>li.dropdown.open::after {
    content:'';
    display:block;
    width:100%;
    height:12px;
    bottom:-5px;
    left:0;
    position:absolute;
    background:#fff;
    z-index:2;
    display:none
}

.nav>li>a:hover {
    background-color:initial
}

.nav hr {
    border: 0;
    margin: 2px 0
}

.nav .dropdown {
    border-bottom-left-radius:0;
    border-bottom-right-radius:0
}

.dropdown-backdrop {
  display: none;
}

.nav .dropdown-menu .btn:hover, .nav .dropdown-menu li:hover {
    text-decoration:none
}

.dropdown-link {
    max-width:450px;
    padding:10px!important
}

.dropdown-link .glyphicon {
    margin:6px 0 0 auto;
    font-size:30px;
}

.dropdown-link .icon {
    text-align:right
}

.dropdown-link .link-name {
    font-size:1em;
    margin-bottom:2px;
    text-transform:uppercase;
    font-weight:500;
    font-family:'Roboto Medium', sans-serif;
}

.dropdown-link .link-description {
    color:#555
}

.dropdown-menu {
    transition:opacity, max-height;
    transition-duration:.2s, .3s;
    opacity:0;
    border-radius:16px;
    border:none;
    box-shadow: 0 2px 6px -3px #0008;
    padding:8px;
    min-width:calc(100% + 15px);
    margin:0;
    z-index:1;
    backdrop-filter:blur(50px);
    -webkit-backdrop-filter:blur(50px);
    background:#fff3;
    color: var(--accent-3);
}

.lighter .dropdown-menu {
    background:#fffc
}

.darker .dropdown-menu {
    background:#fff2
}

.nav .dropdown-menu li>a:hover, .nav .dropdown-menu li>button:hover {
    text-decoration: none;
    background:#0000000d
}

.inverted .nav .dropdown-menu li > a:hover, .inverted .nav .dropdown-menu li > button:hover {
    background: #fff4;
}

.darker .nav .dropdown-menu li > a:hover, .darker .nav .dropdown-menu li > button:hover {
    background: #fff3;
}

.nav > li > a:focus {
  background: #0000;
}

.nav > li > a:focus:not(:active) {
  border-color: #fff8;
}

.nav li.dropdown.open > a, .nav li.dropdown.open > a:hover, .nav li.dropdown.open > a:focus {
    background-color:#0000;
    border-color: #0000;
}

.dropdown-menu li>a {
    display:block;
    white-space:nowrap
}

.dropdown-menu ul {
    padding:0;
    max-height:calc(100 * var(--vh) - 65px);
    overflow-x:hidden;
    overflow-y:auto;
    border-radius:10px
}

.navbar-main~.container-fluid {
    padding-top:20px;
    background:#fff
}

.side-column {
    padding-left:40px;
    margin-bottom:50px;
    position:sticky;
    top:75px
}

.inverted .navbar, .darker .navbar {
    --color: #fff;
    --alt-color: var(--accent-3);
}

.navbar-toggle:before {
  width: 75px;
  height: 75px;
  position: absolute;
  top: 0;
  right: 0;
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  content: "";
  border-bottom-left-radius: 75px;
}
.navbar-toggle > * {
  position: relative;
}
.navbar-toggle:not(.collapsed) {
  color: #fff;
  background: #0003;
  box-shadow: none;
}
.navbar-toggle .icon-bar {
  background: #fff;
  transition: transform .5s ease;
}
.navbar-toggle.collapsed .icon-bar {
  background: var(--color);
}
.navbar-toggle .menu-bar {
  top: 0;
  display: inline-block;
  transition: top .5s ease;
}
.navbar-toggle:not(.collapsed) .menu-text {
  opacity: 0;
}
.navbar-toggle:not(.collapsed) .menu-bar span:nth-child(2) {
  transform: rotate(45deg) translate(4.5px,4px);
}
.navbar-toggle:not(.collapsed) .menu-bar span:nth-child(3) {
  opacity: 0;
}
.navbar-toggle:not(.collapsed) .menu-bar span:nth-child(4) {
  transform: rotate(-45deg) translate(4.5px,-4px);
}
.navbar-toggle:not(.collapsed) .menu-bar {
  top: -10px;
}

.halo:hover {
  transform: rotate3d(calc(0 - var(--y)), calc(0 + var(--x)), 0, calc(var(--d) * .02deg)) translateZ(20px) perspective(200px) scale(1.02);
}

.halo:after {
  content: "";
  display: none;
  width: 0;
  height: 0;
  background: #fff;
  position: absolute;
  left: calc(var(--x) * 1px + 50%);
  top: calc(var(--y) * 1px + 50%);
  box-shadow: 0 0 10em 2.5em #fff;
}

.halo:hover:after {
  display: block;
}

@media (min-width:768px) {
    ul.nav li.dropdown:hover>.dropdown-menu {
        display:block;
        margin:-5px;
        opacity:1
    }
    body .navbar-main:hover {
        background:#fff3
    }
    body.lighter .navbar-main:hover {
        background:#fffc
    }
    body.darker .navbar-main:hover {
        background:#0000
    }
    body.inverted .navbar .btn-campus-text, body.darker .navbar .btn-campus-text {
        -webkit-background-clip:text;
        background-size:200px
    }
    body.inverted .navbar-main .nav > li.status:not(:hover) i, body.darker .navbar-main .nav > li.status:not(:hover) i {
        text-shadow:0 2px 3px #0008
    }
    .navbar-top-links .dropdown-messages, .navbar-top-links .dropdown-tasks, .navbar-top-links .dropdown-alerts {
        margin-left:auto
    }
    .container {
        width:700px
    }
}

@media (min-width:992px) {
    .container {
        width:920px
    }
    .halo:not(.halo-big):hover {
      transform: rotate3d(calc(0 - var(--y)), calc(0 + var(--x)), 0, calc(var(--d) * .05deg)) translateZ(20px) perspective(200px) scale(1.02);
    }
    .halo:not(.halo-big):after {
      box-shadow: 0 0 8em 2.3em #fff;
    }
}

@media (min-width:1200px) {
    .container {
        width:1120px
    }
}

.open>.dropdown-menu {
    opacity:1;
    margin:-5px;
}

.nav .btn-campus {
    font-weight:700
}

.btn-campus-text {
    background:var(--color) linear-gradient(135deg, var(--color) 0, var(--color) 40%, var(--alt-color) 50%, var(--color) 50%, var(--color) 100%) 0 0 no-repeat;
    background-size:200px;
    color:#0000;
    -webkit-background-clip:text;
    -webkit-animation-name:shine;
    -webkit-animation-duration:6s;
    -webkit-animation-iteration-count:infinite
}

@-webkit-keyframes shine {
    0% {
        background-position:100% 0
    }
    20% {
        background-position:0 0
    }
}

.nav li a {
    padding:9px 15px;
    color:unset
}

@media (max-width:767px) {
    body {
        font-size:1.3em;
    }
    h2 {
        font-size:2.5em
    }
    h3 {
        font-size:1.8em
    }
    .navbar-main {
      height: 0px;
      font-size: 1.1em;
      min-height: 0px;
      padding: 0;
      box-shadow: none !important;
    }
    .navbar-collapse.collapse.in, .navbar-collapse.collapsing {
        height: calc(100 * var(--vh));
        width: 100%;
        margin: 0;
        background: #0006;
        top: 0;
        position: absolute;
        left: 0;
        border: 0;
        padding: 4%;
        text-align: center;
    }
    .navbar-collapse.collapse.in:before, .navbar-collapse.collapsing:before {
      height: calc(100 * var(--vh));
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      backdrop-filter: blur(50px);
      -webkit-backdrop-filter: blur(50px);
    }
    .navbar-main::before {
        display: none;
    }
    .navbar ul.nav {
        width:calc(50% - 2px);
        display:inline-block;
        vertical-align:middle;
        padding: 3%;
        min-width: 240px;
    }
    .navbar-collapse.collapse:not(.in) {
      display: block;
    }
    .navbar-collapse.collapse:not(.in) ul.nav {
        display: none;
    }
    .navbar-collapse.collapse:not(.in) .navbar-brand {
        background: #fff;
        border-radius: 0 0 5px 5px;
        box-shadow: 0 1px 4px -2px #000a;
    }
    .navbar-collapse.collapse.in .navbar-brand, .navbar-collapse.collapsing .navbar-brand {
        display: none;
    }
    .navbar .nav>li {
        width:calc(46% - 2px);
        display:inline-block;
        vertical-align:middle;
        background:#0002;
        height:80px;
        margin:2%;
        box-shadow:0 2px 4px -4px #000;
        border-radius:10px;
        color: #fff;
    }
    .navbar .nav .dropdown {
        border-bottom-left-radius:10px;
        border-bottom-right-radius:10px;
    }
    .navbar .nav>li>a {
        width:calc(100% - 6px);
        height:calc(100% - 6px);
        line-height:75px;
        padding: 0;
        border: 3px dashed #0000;
        box-sizing: content-box;
    }
    .navbar .nav>li:not(.no-text)>a>i {
        position:absolute;
        left:0;
        width:100%;
        top:15px
    }
    .navbar .nav>li>a>span {
        line-height:normal;
        vertical-align:middle;
        max-height:50px;
        overflow:hidden;
        display:inline-block;
        width:100%
    }
    .navbar .nav>li:not(.no-logo)>a>span {
        margin-top:25px
    }
    .navbar .nav {
        text-align:center;
    }
    ul.dropdown-menu {
        margin-top:-3px;
        width:max-content;
        box-shadow:0 0 4px -1px #0008
    }
    .navbar-left ul.dropdown-menu {
        border-top-left-radius:10px;
        margin-left:-5px;
        background:#f8f8f8
    }
    .navbar-right ul.dropdown-menu {
        border-top-right-radius:10px;
        right:0;
        left:auto;
        margin-right:-5px;
        background:#f8f8f8
    }
    #navbar .nav>li:hover, #navbar .nav>li.open {
        box-shadow:0 1px 4px -1px #0008;
        background: #fff1;
    }
    .nav>li.dropdown:hover::after {
        content:none
    }
    .nav>li.dropdown.open::after {
        content:"";
        height:10px;
        bottom:-2px;
        background:#f8f8f8;
        z-index:2
    }
    .dropdown-menu {
      position: fixed;
      min-width: 0;
      width: calc(100% - 90px);
      transform: translate(calc(50 * var(--vw) - 50%), calc(50 * var(--vh) - 50%));
      top: 5px;
      max-width: 400px;
      left: 5px;
    }
    .dropdown-menu ul {
        max-height: calc(100 * var(--vh) - 100px);
    }
    .nav .dropdown-menu li > a:hover, .nav .dropdown-menu li > button:hover {
        background: #fff4;
    }
    .btn-campus-text {
        background: #fff linear-gradient(135deg, #fff 0, #fff 40%, var(--accent-3) 50%, #fff 50%, #fff 100%) 0 0 no-repeat;
        background-size: 300px;
        -webkit-background-clip: text;
    }
    .graph {
        padding-bottom:60%
    }
}

.navbar-top-links .dropdown-menu li {
    display:block;
    background:#fff9;
    border-radius:0
}

.navbar-top-links .dropdown-menu li:last-child {
    margin-right:0
}

.navbar-top-links .dropdown-menu li a div {
    white-space:normal
}

.navbar-top-links .dropdown-messages, .navbar-top-links .dropdown-tasks, .navbar-top-links .dropdown-alerts {
    width:310px;
    min-width:0
}

.navbar-top-links .dropdown-messages {
    margin-left:5px
}

.navbar-top-links .dropdown-tasks {
    margin-left:-59px
}

.navbar-top-links .dropdown-alerts {
    margin-left:-123px
}

.navbar-top-links .dropdown-user {
    right:0;
    left:auto
}

.navbar-toggle {
    width: 75px;
    height: 75px;
    box-shadow: 0 0 8px -2px #0008;
    right: 0;
    top: 0px;
    padding: 0 0 11px 14px;
    margin: 0;
    border: 0;
    position: absolute;
    border-radius: 0 0 0 75px;
}

.menu-text {
  vertical-align:middle;
  margin-top:-5px;
  margin-right:5px;
  height: 20px;
  display: inline-block;
  transition: opacity .5s ease;
}

.nav .dropdown-menu button {
    display:block;
    text-align:center;
    padding: 8px 12px;
    width:100%;
    color: var(--accent-3);
}

.footer {
    background-color:#225378;
    color:#fff;
    padding-top:15px
}

.footer .row {
    margin-top:30px;
    margin-bottom:30px
}

.footer .row:last-of-type, .bs-callout p:last-child {
    margin-bottom:0
}

.footer ul {
    list-style:none;
    margin-left:0;
    padding-left:0;
    margin-bottom:20px
}

.footer li {
    margin-top:5px
}

.footer .social {
    font-size:2.5em;
    margin-left:20px;
    margin-right:20px;
    transition:all.2s cubic-bezier(.165, .84, .44, 1)
}

.footer .social:hover, .alert-info a {
    color:#a4f1ff
}

.footer .bottom-row {
    background-color:#1a3a57;
    padding-top:15px;
    padding-bottom:15px;
    margin-top:30px
}

.footer .bottom-row a {
    color:#fff;
    font-weight:700
}

.alert-info {
    background-color:#1695A3;
    color:#F3FFE2;
    border-color:#0000
}

.alert-warning {
    background-color:var(--accent-4);
    border:none;
    color:#000
}

.alert-warning a {
    color:var(--accent-7)
}

.btn-info {
    background-color:#225378;
    border-color:#225378
}

.btn-info:hover, .btn-info:focus {
    background-color:#3179ad;
    border-color:#3179ad
}

@font-face {
    font-family:Roboto;
    font-style:normal;
    font-weight:300;
    src:url(../fonts/Roboto/Roboto-Light.ttf) format('truetype');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000
}

@font-face {
    font-family:'Roboto Medium';
    font-style:normal;
    font-weight:500;
    src:url(../fonts/Roboto/Roboto-Medium.ttf) format('truetype');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000
}

#unregistered-device:hover {
    background-color:#d9534f
}

.danger, .bs-callout-danger h4 {
    color:#d9534f
}

.success {
    color:#1ed212
}

.warning {
    color:var(--accent-4)
}

.vote {
    display:block
}

.bs-callout {
    padding:20px;
    margin:20px 0;
    border:1px solid #eee;
    border-left-width:5px;
    border-radius:3px
}

.bs-callout h4 {
    margin-top:0;
    margin-bottom:5px
}

.bs-callout code {
    border-radius:3px
}

.bs-callout+.bs-callout {
    margin-top:-5px
}

.bs-callout-default {
    border-left-color:#777
}

.bs-callout-default h4 {
    color:#777
}

.bs-callout-primary {
    border-left-color:#428bca
}

.bs-callout-primary h4 {
    color:#428bca
}

.bs-callout-success {
    border-left-color:#5cb85c
}

.bs-callout-success h4 {
    color:#5cb85c
}

.bs-callout-danger {
    border-left-color:#d9534f
}

.bs-callout-warning {
    border-left-color:#f0ad4e
}

.bs-callout-warning h4 {
    color:#f0ad4e
}

.bs-callout-info {
    border-left-color:var(--accent-6)
}

.graph {
    padding-bottom:40%
}

.graph+.btn-group {
    transform:translate(-50%);
    left:50%;
    margin-bottom:25px
}

#devices tr td:last-child {
    width:300px
}

#devices iframe {
    pointer-events:none;
    transform:scale(.75);
    transform-origin:0 0
}

#devices td {
    line-height:50px;
    padding-top:0;
    padding-bottom:0
}

#devices td>div {
    height:50px;
    padding:0;
    overflow:hidden;
    width:230px
}

#bandwidth .container {
    width:100%
}

.errorlist {
    padding:0
}

@media screen and (max-width:371px) {
    #devices tr td:nth-child(2), #devices tr th:nth-child(2) {
        display:none
    }
}

@media screen and (max-width:599px) {
    #devices th.sort {
        white-space:revert
    }
    #employees tr td:nth-child(2), #employees tr th:nth-child(2) {
        display: none
    }
}

@media screen and (max-width:999px) {
    #devices td {
        line-height:1.42857143;
        padding:8px
    }
    #devices tr td:last-child, #devices tr th:last-child {
        display:none
    }
    #employees tr td:nth-child(3), #employees tr th:nth-child(3) {
        display: none
    }
}

@media screen and (max-width:1199px) {
    #devices tr td:nth-child(3), #devices tr th:nth-child(3) {
        display:none
    }
}

.toggle, .center {
    text-align:center
}

.toggle input {
    display:none
}

.toggle input+label {
    margin:0;
    padding:8px 12px;
    display:inline-block;
    border:solid 1px #0002;
    text-align:center;
    font-weight:400;
    font-size:14px
}

.toggle input+label:first-of-type {
    border-radius:6px 0 0 6px
}

.toggle input+label:last-of-type {
    border-radius:0 6px 6px 0
}

.toggle input+label:not(:last-of-type) {
    border-right:0
}

.toggle input:hover+label {
    background:#0001;
    border-right:1px solid #0002
}

.toggle input:checked+label {
    background:var(--accent-3);
    color:#fff;
    border-right:1px solid #0002
}

.toggle input:checked+label+input+label, .toggle input:hover+label+input+label {
    border-left:0
}

.italic {
    font-style:italic
}

.halo {
  position: relative;
  transition: transform .1s ease;
  overflow: hidden;
  --x: 0;
  --y: 0
}