body {
    color: #222222;
    background-color: #ffffff;
    margin: 2em auto;
    padding: 0 .62em;
    font: 1em sans-serif;
    max-width: 60em;
}

table {
    border: 1px solid #aaaaaa;
    border-collapse: separate;
    border-radius: .4em;
    border-spacing: 0;
    width: 100%;
    margin-top: 20px;
}

table td, table th {
    padding: .4em .8em;
}

table td {
    border-top: 1px solid #aaaaaa;
}

table th {
    border-top: none;
    text-align: left;
}

table th:first-child {
    text-align: right
}

form {
    border: 1px solid #aaaaaa;
    border-radius: .4em;
    padding: .8em 1.6em;
    width: calc(100% - 3.2em - 2px);
}

form label {
    padding: .2em 0;
    margin: .4em 0;
}

form input[type=text],
form input[type=password],
form input[type=number],
form select {
    display: inline-block;
    font-size: 1em;
    padding: .4em .8em;
    margin: .4em 0 .8em 0;
    width: calc(100% - 1.6em - 2px);
    border: 1px solid #aaaaaa;
    border-radius: .4em;
}

form input[type=text].error, form input[type=password].error {
    margin-bottom: .2em;
    border-color: red;
}

textarea {
    display: inline-block;
    font-size: 19px;
    padding: .4em .8em;
    margin: .4em 0 .8em 0;
    width: calc(100% - 1.6em - 2px);
    border: 1px solid #aaaaaa;
    border-radius: .4em;
    font-family: 'Work Sans';
}

form span.alert {
    display: block;
    color: red;
    margin: .8em 0;
    text-align: center;
}

form span.alert {
    display: block;
    color: red;
    margin: .8em 0;
    text-align: center;
}

form input[readonly] {
    color: #aaaaaa;
}

form button {
    display: inline-block;
    font-size: 1em;
    font-weight: normal;
    padding: .4em .8em;
    margin: .2em .4em .2em 0;
    border: 1px solid #aaaaaa;
    border-radius: .4em;
    color: #222222;
    cursor: pointer;
}

form button[type=submit] {
    background-color: #eeeeee;
}

form button[type=button] {
    background-color: #ffffff;
}

form button[disabled] {
    color: #aaaaaa;
}

form span.error {
    display: block;
    font-size: .9em;
    color: red;
    margin-bottom: .8em;
}

form.hidden {
    display: inline;
    padding: 0;
    margin: 0;
    border: none;
}

form.hidden button {
    display: inline;
    padding: 0;
    padding-right: 10px;
    margin: 0;
    border: none;
    background-color: #ffffff;
}

form.horizontal {
    padding: .4em 1.6em;
    margin-top: 20px;
}

form.horizontal label {

}

form.horizontal select {
    display: inline-block;
    width: 15em;
    margin: .4em;
    max-width: 30em;
    text-overflow: ellipsis;
}

a, a:visited {
    color: #0055aa;
}

a:hover {
    color: #002288;
}

nav.pager {
    display: table;
    white-space: nowrap;
    border: 1px solid #aaaaaa;
    border-radius: .4em;
    padding: 0;
    margin: 1em auto;
}


nav.pager a {
    display: inline-block;
    border-left: 1px solid #aaaaaa;
    text-decoration: none;
    padding: .4em .8em .4em .8em;
}

nav.pager a.selected {
    color: #ffffff;
    background-color: #0055ff;
}

nav.pager a:first-child {
    border-left: none;
}

nav.pager a:last-child {
    padding-right: .8em;
}

div.sidebar {
    float: left;
    width: 20%;
}

div.main {
    float: right;
    width: 80%;
}

ul.sidebar {
    padding: 0;
    margin: 0 1em 1em 0;
}

ul.sidebar li {
    padding: .4em .8em;
    list-style-type: none;
}

ul.sidebar li.active {
    background-color: #0055ff;
    border-radius: .4em;
}

ul.sidebar a {
    text-decoration: none;
}

ul.sidebar a:nth-child(even) {
    float: right;
}

ul.sidebar li.active a {
    color: #ffffff;
}

@media screen and (max-width: 60em) {
    div.sidebar,  div.main {
        float: none;
        width: 100%;
    }

    ul.sidebar {
        margin-right: 0;
    }
}

h3 {
    margin: .8em 0em .4em 0em;
}

div.login {
    width: 20em;
    margin: 10em auto 0 auto;
}

li.sidebar-header {
    margin-top: 10px;
    font-weight: bold;
}

.tip {
  position: relative;
  cursor: help;
  font-weight: bold;
  padding: 0 4px;
}

/* tooltip bubble */
.tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 8px); /* place above the span */
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 6px 8px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease, visibility .12s;
  z-index: 999999;
}

/* small arrow */
.tip::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 4px);
  border: 6px solid transparent;
  border-top-color: rgba(0,0,0,0.85);
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease, visibility .12s;
  z-index: 999999;
}

/* show only when hovering the span */
.tip:hover::after,
.tip:hover::before {
  opacity: 1;
  visibility: visible;
}

.info {
    background-color: #3399cc !important;
    color: white !important;
}