@charset "UTF-8";
/*
Settings
If you are using a preprocessor, start here. This holds any global settings for your project. I'd like to stress the word global – this layer should only house settings that need to be accessed from anywhere. Settings like $heading-size-1 should be defined in the Headings partial. This ensures this layer stays nice and slim, and means that most settings can be found alongside the code that uses them, making finding things far simpler.
Examples of global settings might be things like the base font size, colour palettes, config (for example, $environment: dev;) and so on.
 */
/*
Webfont
 */
/* lato-regular - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/lato-v17-latin-regular.eot");
  /* IE9 Compat Modes */
  src: local(""), url("../fonts/lato-v17-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/lato-v17-latin-regular.woff2") format("woff2"), url("../fonts/lato-v17-latin-regular.woff") format("woff"), url("../fonts/lato-v17-latin-regular.ttf") format("truetype"), url("../fonts/lato-v17-latin-regular.svg#Lato") format("svg");
  /* Legacy iOS */ }
/* lato-700 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/lato-v17-latin-700.eot");
  /* IE9 Compat Modes */
  src: local(""), url("../fonts/lato-v17-latin-700.eot?#iefix") format("embedded-opentype"), url("../fonts/lato-v17-latin-700.woff2") format("woff2"), url("../fonts/lato-v17-latin-700.woff") format("woff"), url("../fonts/lato-v17-latin-700.ttf") format("truetype"), url("../fonts/lato-v17-latin-700.svg#Lato") format("svg");
  /* Legacy iOS */ }
/* lato-700italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/lato-v17-latin-700italic.eot");
  /* IE9 Compat Modes */
  src: local(""), url("../fonts/lato-v17-latin-700italic.eot?#iefix") format("embedded-opentype"), url("../fonts/lato-v17-latin-700italic.woff2") format("woff2"), url("../fonts/lato-v17-latin-700italic.woff") format("woff"), url("../fonts/lato-v17-latin-700italic.ttf") format("truetype"), url("../fonts/lato-v17-latin-700italic.svg#Lato") format("svg");
  /* Legacy iOS */ }
/*
Tools
The next layer houses your globally available tooling – namely mixins and functions. Any mixin or function that does not need accessing globally should belong in the partial to which it relates. The Tools layer comes after the Settings layer because a mixin may require one of the global settings as a default parameter. Examples of global tools might be gradient mixins, font-sizing mixins and so on.
 */
@keyframes bounceInLeft {
  from,
	60%,
	75%,
	90%,
	to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0); }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0); }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0); }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1; } }
@keyframes bounceInRight {
  from,
	60%,
	75%,
	90%,
	to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0); }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0); }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0); }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1; } }
/*
Generic
The Generic layer is the first one that actually produces any CSS. It houses very high-level, far reaching styles. This layer is seldom modified, and is usually the same across any projects you work on. It contains things like Normalize.css, global box-sizing rules, CSS resets and so on. The Generic layer affects a lot of the DOM, hence it being nice and wide in the Triangle model, and occurring very early on.
 */
* {
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

html, body {
  padding: 0;
  margin: 0;
  height: 100%; }

/*
Elements
These are bare, unclassed HTML elements. What does an h1 look like without a class on it? What does an a look like without a class on it? The Elements layer binds onto bare HTML element (or 'type') selectors only. It is slightly more explicit than the previous layer in that we are now saying 'make every h1 this big', or 'make every a be a certain colour'. It is still a very low-specificity layer, but affects slightly less of the DOM, and is slightly more opinionated, hence its location in the Triangle.
The Elements layer is typically the last one in which we'd find bare, element-based selectors, and is very rarely added to or changed after initial setup. Once we have defined element-level styles, all additions and deviations should be implemented using classes.
 */
body {
  background: linear-gradient(0deg, white 0%, #dfe3ee 100%);
  position: relative;
  color: #444444;
  font-family: 'Lato', 'Open Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

ul {
  padding: 0;
  margin: 0; }

p {
  margin-bottom: 1rem; }

img {
  display: block;
  max-width: 100%;
  height: auto; }

h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  margin-bottom: .5rem;
  font-weight: 500; }

h1, h2 {
  color: #042e47; }

h1 {
  font-size: 1.6rem; }
  h1 i {
    color: #607288;
    margin-left: 1rem; }

a {
  color: #042e47; }
  a:hover {
    color: #607288; }

a[href^="tel:"] {
  color: inherit;
  text-decoration: none; }

input,
select,
textarea {
  background: #fbfbfb;
  padding: .5rem 1rem;
  margin-bottom: 1rem;
  width: 100%;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  border-radius: 1rem; }

::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #bbbbbb;
  opacity: 1;
  /* Firefox */ }

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #bbbbbb; }

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #bbbbbb; }

textarea {
  min-height: 10rem; }

label {
  display: block;
  color: #9a9a9a;
  margin-bottom: 5px; }
  label strong {
    color: #444444; }
  label.inline span {
    color: #444444; }
  label.inline div {
    margin-left: 20px; }

label[for="male"], label[for="female"], label.inline {
  display: unset; }

input[type="submit"], input[type="button"], button {
  background-color: #042e47;
  -webkit-border-radius: 2rem;
  -moz-border-radius: 2rem;
  border-radius: 2rem;
  color: #ffffff;
  padding: 1rem 1rem;
  cursor: pointer;
  border: 0;
  margin-bottom: 0; }
  input[type="submit"]:hover, input[type="button"]:hover, button:hover {
    background-color: #607288; }
  input[type="submit"].back, input[type="button"].back, button.back {
    width: auto;
    background: #dfe3ee;
    color: #444444; }

input[type="radio"], input[type="checkbox"] {
  width: auto; }

.checkbox input {
  width: auto;
  margin: 0 .5rem 0 0; }
.checkbox .form-check {
  margin-bottom: 1rem; }

form .container input,
form .container select,
form .container textarea {
  border: 1px solid #dfe3ee; }

.select2 {
  width: 100%; }

.select2-container .select2-choice {
  height: unset;
  line-height: unset;
  padding: .5rem 1rem;
  border-radius: 1rem; }

ul.contextmenu {
  position: absolute;
  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  z-index: 100;
  font-size: .8rem; }
  ul.contextmenu li {
    list-style-type: none;
    background: #ffffff;
    padding: 0;
    margin: 0; }
    ul.contextmenu li.last {
      border-top: 1px solid #e2e2e2; }
    ul.contextmenu li ul {
      display: none; }
    ul.contextmenu li:hover {
      background: #efefef; }
      ul.contextmenu li:hover ul {
        box-shadow: 0px 0px 5px 4px #ccc;
        z-index: 100;
        display: block;
        position: absolute;
        left: 100%;
        margin-top: -38px; }
        ul.contextmenu li:hover ul li a {
          min-width: 150px; }
    ul.contextmenu li a {
      color: #5e6d81;
      text-decoration: none;
      padding: 10px;
      display: block; }

/*
Objects
Users of OOCSS will be familiar with the concept of objects. This is the first layer in which we find class-based selectors. These are concerned with styling non-cosmetic design patterns, or 'objects'. Objects can range from something as simple as a .wrapper element, to layout systems, through to things like the OOCSS poster child – the Media Object. This layer affects less of the DOM than the last layer, has a higher specificity, and is slightly more explicit in that we are now targeting sections of the DOM with classes.
 */
.clear {
  clear: both;
  height: 0; }

.text-center {
  text-align: center; }

.text-right {
  text-align: right; }

.hidden {
  display: none; }

.space-10 {
  margin-bottom: 10px; }

.description {
  color: #9a9a9a; }

.grid-layout {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-direction: column;
  flex-direction: column; }

@media screen and (min-width: 48rem) {
  .grid-layout {
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between; }
    .grid-layout.center {
      align-items: center; }
    .grid-layout .grid.grid-2.col-1 {
      margin-bottom: 0;
      margin-right: 2%;
      flex-basis: 49%; }
    .grid-layout .grid.grid-2.col-2 {
      flex-basis: 49%; }
    .grid-layout .grid.grid-3.col-1 {
      margin-bottom: 0;
      margin-right: 2%;
      flex-basis: 31%; }
    .grid-layout .grid.grid-3.col-2 {
      margin-bottom: 0;
      margin-right: 2%;
      flex-basis: 31%; }
    .grid-layout .grid.grid-3.col-3 {
      flex-basis: 31%; }
    .grid-layout .grid.grid-4.col-1, .grid-layout .grid.grid-4.col-2, .grid-layout .grid.grid-4.col-3, .grid-layout .grid.grid-4.col-4 {
      margin-bottom: 0;
      margin-right: 2%;
      flex-basis: 22%; }
    .grid-layout .grid.grid-4.col-4 {
      margin-right: 0; }
    .grid-layout .grid.grid-2.col-1.flex-10, .grid-layout .grid.grid-2.col-2.flex-10, .grid-layout .grid.grid-2.col-3.flex-10, .grid-layout .grid.grid-2.col-4.flex-10, .grid-layout .grid.grid-3.col-1.flex-10, .grid-layout .grid.grid-3.col-2.flex-10, .grid-layout .grid.grid-3.col-3.flex-10, .grid-layout .grid.grid-3.col-4.flex-10, .grid-layout .grid.grid-4.col-1.flex-10, .grid-layout .grid.grid-4.col-2.flex-10, .grid-layout .grid.grid-4.col-3.flex-10, .grid-layout .grid.grid-4.col-4.flex-10 {
      flex-basis: 9%; }
    .grid-layout .grid.grid-2.col-1.flex-20, .grid-layout .grid.grid-2.col-2.flex-20, .grid-layout .grid.grid-2.col-3.flex-20, .grid-layout .grid.grid-2.col-4.flex-20, .grid-layout .grid.grid-3.col-1.flex-20, .grid-layout .grid.grid-3.col-2.flex-20, .grid-layout .grid.grid-3.col-3.flex-20, .grid-layout .grid.grid-3.col-4.flex-20, .grid-layout .grid.grid-4.col-1.flex-20, .grid-layout .grid.grid-4.col-2.flex-20, .grid-layout .grid.grid-4.col-3.flex-20, .grid-layout .grid.grid-4.col-4.flex-20 {
      flex-basis: 19%; }
    .grid-layout .grid.grid-2.col-1.flex-30, .grid-layout .grid.grid-2.col-2.flex-30, .grid-layout .grid.grid-2.col-3.flex-30, .grid-layout .grid.grid-2.col-4.flex-30, .grid-layout .grid.grid-3.col-1.flex-30, .grid-layout .grid.grid-3.col-2.flex-30, .grid-layout .grid.grid-3.col-3.flex-30, .grid-layout .grid.grid-3.col-4.flex-30, .grid-layout .grid.grid-4.col-1.flex-30, .grid-layout .grid.grid-4.col-2.flex-30, .grid-layout .grid.grid-4.col-3.flex-30, .grid-layout .grid.grid-4.col-4.flex-30 {
      flex-basis: 29%; }
    .grid-layout .grid.grid-2.col-1.flex-40, .grid-layout .grid.grid-2.col-2.flex-40, .grid-layout .grid.grid-2.col-3.flex-40, .grid-layout .grid.grid-2.col-4.flex-40, .grid-layout .grid.grid-3.col-1.flex-40, .grid-layout .grid.grid-3.col-2.flex-40, .grid-layout .grid.grid-3.col-3.flex-40, .grid-layout .grid.grid-3.col-4.flex-40, .grid-layout .grid.grid-4.col-1.flex-40, .grid-layout .grid.grid-4.col-2.flex-40, .grid-layout .grid.grid-4.col-3.flex-40, .grid-layout .grid.grid-4.col-4.flex-40 {
      flex-basis: 39%; }
    .grid-layout .grid.grid-2.col-1.flex-50, .grid-layout .grid.grid-2.col-2.flex-50, .grid-layout .grid.grid-2.col-3.flex-50, .grid-layout .grid.grid-2.col-4.flex-50, .grid-layout .grid.grid-3.col-1.flex-50, .grid-layout .grid.grid-3.col-2.flex-50, .grid-layout .grid.grid-3.col-3.flex-50, .grid-layout .grid.grid-3.col-4.flex-50, .grid-layout .grid.grid-4.col-1.flex-50, .grid-layout .grid.grid-4.col-2.flex-50, .grid-layout .grid.grid-4.col-3.flex-50, .grid-layout .grid.grid-4.col-4.flex-50 {
      flex-basis: 49%; }
    .grid-layout .grid.grid-2.col-1.flex-60, .grid-layout .grid.grid-2.col-2.flex-60, .grid-layout .grid.grid-2.col-3.flex-60, .grid-layout .grid.grid-2.col-4.flex-60, .grid-layout .grid.grid-3.col-1.flex-60, .grid-layout .grid.grid-3.col-2.flex-60, .grid-layout .grid.grid-3.col-3.flex-60, .grid-layout .grid.grid-3.col-4.flex-60, .grid-layout .grid.grid-4.col-1.flex-60, .grid-layout .grid.grid-4.col-2.flex-60, .grid-layout .grid.grid-4.col-3.flex-60, .grid-layout .grid.grid-4.col-4.flex-60 {
      flex-basis: 59%; }
    .grid-layout .grid.grid-2.col-1.flex-70, .grid-layout .grid.grid-2.col-2.flex-70, .grid-layout .grid.grid-2.col-3.flex-70, .grid-layout .grid.grid-2.col-4.flex-70, .grid-layout .grid.grid-3.col-1.flex-70, .grid-layout .grid.grid-3.col-2.flex-70, .grid-layout .grid.grid-3.col-3.flex-70, .grid-layout .grid.grid-3.col-4.flex-70, .grid-layout .grid.grid-4.col-1.flex-70, .grid-layout .grid.grid-4.col-2.flex-70, .grid-layout .grid.grid-4.col-3.flex-70, .grid-layout .grid.grid-4.col-4.flex-70 {
      flex-basis: 69%; }
    .grid-layout .grid.grid-2.col-1.flex-90, .grid-layout .grid.grid-2.col-2.flex-90, .grid-layout .grid.grid-2.col-3.flex-90, .grid-layout .grid.grid-2.col-4.flex-90, .grid-layout .grid.grid-3.col-1.flex-90, .grid-layout .grid.grid-3.col-2.flex-90, .grid-layout .grid.grid-3.col-3.flex-90, .grid-layout .grid.grid-3.col-4.flex-90, .grid-layout .grid.grid-4.col-1.flex-90, .grid-layout .grid.grid-4.col-2.flex-90, .grid-layout .grid.grid-4.col-3.flex-90, .grid-layout .grid.grid-4.col-4.flex-90 {
      flex-basis: 89%; } }
/* layout default */
/*
Components
The Components layer is where we begin to style recognisable pieces of UI. We're still binding onto classes here, so our specificity hasn't yet increased. However, this layer is more explicit than the last one in that we are now styling explicit, designed pieces of the DOM.
We shouldn't find any selectors with a lower specificity than one class in this layer. This is where the majority of your work will happen after initial project set-up. Adding new components and features usually makes up the vast majority of development.
 */
/* Header */
header {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
  padding-bottom: 3rem; }
  header a {
    text-decoration: none; }
  header .logo {
    width: 100%;
    max-width: 200px;
    position: absolute; }
  header .hamburger {
    position: absolute;
    right: 5%;
    top: 0.6rem;
    font-size: 1.6rem;
    z-index: 200; }
  header ul.mainmenu {
    background: #fff;
    padding: 1rem 2rem;
    border-radius: 2rem;
    margin-bottom: 1rem;
    z-index: 100;
    position: absolute;
    width: 95%;
    -webkit-box-shadow: 0px 10px 20px -6px #9e9e9e;
    -moz-box-shadow: 0px 10px 20px -6px #9e9e9e;
    box-shadow: 0px 10px 20px -6px #9e9e9e;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    list-style-type: none; }
    header ul.mainmenu.hidden {
      display: none; }
    header ul.mainmenu li {
      margin-right: 2rem; }
      header ul.mainmenu li i {
        margin-right: 5px; }

main {
  width: 95%;
  margin-left: auto;
  margin-right: auto; }
  main a.add-field {
    margin-bottom: 2rem;
    margin-left: 1rem;
    display: block; }
  main a.back {
    position: absolute;
    font-size: 2rem;
    top: 0rem; }
  main a.new {
    margin-right: 5%; }
  main a.button {
    display: inline-block;
    background: #607288;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    color: #fff;
    text-decoration: none; }
  main .tabs {
    margin-top: 5px; }
  main .container {
    background: #fff;
    padding: 1rem 2rem;
    border-radius: 2rem;
    margin-bottom: 1rem;
    -webkit-box-shadow: 0px 10px 20px -6px #9e9e9e;
    -moz-box-shadow: 0px 10px 20px -6px #9e9e9e;
    box-shadow: 0px 10px 20px -6px #9e9e9e; }
    main .container.error {
      background: #bf1919;
      color: #fff; }
      main .container.error::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f06a";
        margin-right: 5px; }
    main .container.flex {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-direction: row;
      flex-direction: row;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      align-items: center;
      align-content: space-between; }
      main .container.flex div {
        flex-basis: 33%; }
        main .container.flex div.flex-10 {
          flex-basis: 9%; }
        main .container.flex div.flex-20 {
          flex-basis: 19%; }
        main .container.flex div.flex-30 {
          flex-basis: 29%; }
        main .container.flex div.flex-40 {
          flex-basis: 39%; }
        main .container.flex div.flex-50 {
          flex-basis: 49%; }
        main .container.flex div:last-of-type {
          text-align: right; }
    main .container i.fill {
      background: #dfe3ee;
      border-radius: 1rem;
      padding: 1rem;
      float: left;
      margin-right: 1rem; }
  main ul.filter {
    list-style-type: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 1rem; }
    main ul.filter li {
      background: #ffffff;
      padding: 0.5rem;
      border-radius: 1rem;
      margin-right: 0.5rem;
      margin-bottom: 10px; }
      main ul.filter li a {
        color: #444444;
        text-decoration: none; }
      main ul.filter li.ui-state-active {
        background: #042e47; }
        main ul.filter li.ui-state-active a {
          color: #ffffff; }
  main .avatar {
    text-align: center; }
    main .avatar img {
      max-width: 200px;
      border-radius: 100%;
      margin: auto; }

.fancybox-content {
  min-width: 40%; }
  .fancybox-content a.button {
    display: inline-block;
    background: #607288;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    color: #fff;
    text-decoration: none; }
  .fancybox-content a.extending {
    display: block; }
  .fancybox-content .grid-layout {
    margin-bottom: 1rem; }
  .fancybox-content table {
    width: 100%; }
    .fancybox-content table thead {
      background: #dfe3ee; }
    .fancybox-content table th, .fancybox-content table td {
      padding: 0.3rem; }

.fancybox-slide--html .fancybox-close-small {
  background: #607288;
  color: #ffffff; }
  .fancybox-slide--html .fancybox-close-small:hover {
    background: #042e47; }

.ui-dialog {
  background: #ffffff;
  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  padding: 1rem; }
  .ui-dialog .ui-dialog-content {
    margin-bottom: 2rem; }
  .ui-dialog .ui-button {
    padding: .5rem 1rem;
    margin-right: 1rem;
    -webkit-appearance: button;
    background-color: #042e47;
    border-radius: 3rem; }
  .ui-dialog h1 {
    color: inherit; }
  .ui-dialog-titlebar {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex; }
    .ui-dialog-titlebar .ui-button {
      -webkit-appearance: none;
      background: transparent;
      color: #fff;
      position: absolute;
      right: 0; }
      .ui-dialog-titlebar .ui-button span.ui-button-icon-space:before {
        content: '\f00d';
        color: red;
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        color: #444;
        font-size: 1.5rem; }

footer {
  height: 5rem; }

/*
Trumps/Utilities
This layer beats – or 'trumps' – all other layers, and has the power to override anything at all that has gone before it. It is inelegant and heavy-handed, and contains utility and helper classes, hacks and overrides.
A lot of the declarations in this layer will carry !important (e.g. .text-center { text-align: centre !important; }). This is the highest specificity layer – it includes the most explicit types of rule, with the most narrow focus. This layer forms the point of the Triangle.
 */
main.login {
  max-width: 400px; }
  main.login .logo {
    margin: 2rem 0;
    padding: 2rem 1rem 1rem 1rem;
    margin-left: auto;
    margin-right: auto; }
  main.login .container input[type="text"], main.login .container input[type="password"] {
    padding-left: 30px;
    border: 0; }
  main.login .container i {
    position: absolute;
    color: gray;
    margin-top: 9px; }

.status-info {
  font-size: .6rem;
  font-weight: normal;
  text-transform: uppercase;
  display: inline-block;
  margin-left: .5rem;
  padding: .35rem .5rem;
  border-radius: 3px;
  line-height: 1;
  position: relative;
  top: -2px; }
  .status-info.mar-l-0 {
    margin-left: 0; }

.available {
  color: #fff !important;
  background-color: #7ea15c !important; }

.give_out {
  color: #fff !important;
  background-color: #b43838 !important; }

main.keymanager .avatar {
  border-radius: 2rem;
  padding: 1rem; }
  main.keymanager .avatar img {
    max-width: 100px; }
  main.keymanager .avatar p {
    margin: 0; }
  main.keymanager .avatar:hover, main.keymanager .avatar.active {
    background: #607288;
    color: #ffffff;
    font-weight: bold;
    cursor: pointer; }
main.keymanager .key-item input[type="checkbox"] {
  margin-right: 5px; }
main.keymanager .key-options input[type="number"] {
  width: 95px; }
main.keymanager #search label {
  display: unset;
  margin-left: 5px; }
main.keymanager #search input[type="checkbox"] {
  margin-left: 15px; }
main.keymanager #search button {
  padding: .9rem 1rem; }
main.keymanager #search input[type="date"] {
  width: auto;
  margin-right: 1rem; }
main.keymanager .list {
  margin-top: 1rem; }

/*# sourceMappingURL=style.css.map */