html {
    height:100%;
}

body {
  margin:0;
  padding:0;
  background-color:#eee;
  font-family: 'Open Sans', Sans-Serif;
  min-height:100%;
}

body {
    position:relative;
}

#interaction-block {
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,.35);
}

#interaction-block-dialog {
    display:block;
    max-width:300px;
    min-height:50px;
    background-color:white;
    margin-left:auto;
    margin-right:auto;
    border-radius:10px;
    box-shadow:0 10px 16px 0 rgba(0,0,0,0.2);

    position:relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

#interaction-block-message {
    text-align:center;
    padding:1em;
    padding-top:60px;
}

header {
  height: 150px;
  background-color:white;
  margin:0;
  padding-top:18px;
}

header #logo {
  width: 456px;
  height: 123px;
  display:inline-block;
  background-image: url('https://app.onbeat.fit/assets/img/admin-logo.png');
  background-size:456px 123px;
  margin: 15px;
}

#top-bar {
  text-align:right;
  padding:0.5em 0 0.2em 0;
  background-color:#555;
  color:white;
  position:fixed;
  width:100%;
}

.account-info {
  margin-right:2em;
  font-size:12px;
}

.account-info span {
  font-weight:bold;
}

.account-info #logout {
  margin-left:10px;
  color:white;
}

.centered {
  max-width:800px;
  margin-top:0;
  margin-bottom:0;
  margin-left:auto;
  margin-right:auto;
}

.warning {
    color:#dd282e;
}

#title {
  background-color:#222;
  color:white;
  margin:0;
}

#title h1 {
  line-height:50px;
  margin:0px;
  text-align:center;
  display:block;
  clear:both;
  font-size:20px;
}

form .message, form .error {
    color:white;
    padding:0.5em;
    border-radius:0.5em;
}

form .message {
    background-color:green;
}

form .error {
    background-color:red;
}

.content h2 {
    margin-bottom:0.3em;
    color:#333;
}

.button {
    background-color:#E46E36;
    color:white;
    padding:0.25em 0.5em;
    font-weight:bold;
    border-radius:0.5em;
    cursor:pointer;
    text-decoration:none;
}

/* --------------- Lists --------------- */

.content ul {
    margin:0;
}

.content ul li {
    padding:0.5em;
}

/* --------------- Tables --------------- */

.content > table, .content > h1, .content > h2, .content > h3, .content > h4, .content h5, .content h6, .content p, .content form {
    padding:0 8px;
}

.content table {
    border-collapse:collapse;
    background-color:#fefefe;
    width:100%;
}

.content table.vertical tr:first-child th {
    text-align:left;
}

.content table td, .content table th {
    padding:0.5em;
    border-bottom:thin solid #eee;
}

.content table th {
    font-weight:bold;
}

.content table th:first-child {
    padding:0.5em;
    text-align:right;
    width: 1px;
    white-space: nowrap;
}

.content table th > p {
    font-weight:normal;
    padding:0;
    margin:0;
}

/* --------------- Forms --------------- */

.content form fieldset {
    padding: 20px 0;
    margin: 0;
    border: 0 none;
}

.content form legend {
    font-size: 1.2em;
    padding: 0;
    margin: 0;
    padding-top:1em;
    padding-bottom: 0.2em;
    border-bottom:thin solid #333;
    display:block;
    width:100%;
}

.content form label {
    display: block;
    margin-bottom: 4px;
}

.content form input:not([type="submit"]):not([type="checkbox"]), .content form select {
    display: block;
    height: 34px;
    padding: 0.5% 1%;
    margin:0;
    font-size: 1em;
    border-radius: 4px;
    border: 0 none;
    margin-bottom: 15px;
    background-color: white;
    box-shadow: 0 0 2px 0 rgba(0,0,0,0.2);
    color: #333;
    display:inline-block;
}

.content form table input:not([type="submit"]):not([type="checkbox"]) {
    margin-bottom:0;
}


.content form input:not([type="submit"]) {
    width: 98%;
}

.content form input:disabled {
    background-color: #ddd;
}

.content form input[type="submit"] {
    display: inline-block;
    border: 0 none;
    background: black;
    color: white;
    border-radius: 4px;
    padding: 4px 20px;
    font-size: 1.1em;
    padding:1%;
}

.content form input[type=number]::-webkit-inner-spin-button,
.content form input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

.content form input[type=number] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

.content form .footnote {
    font-size: 0.8em;
}

.content form .footer {
    text-align: center;
}

/* --------------- Responsive --------------- */

@media all and (max-width:500px) {
    header #logo {
        width: 280px;
        height: 75px;
        background-size:280px 75px;
    }

    header {
        text-align:center;
        height: 94px;
    }
}