/**********************************************************************
 * Base
 **********************************************************************/

html {
  position: relative;
  min-height: 100%;
}

body {
  padding-top: 50px;
  margin-bottom: 60px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
}

.footer hr {
  margin-bottom: 2px;
}

.footer p {
  text-align: right;
}

main {
  padding-bottom: 1rem;
}

.hidden {
  display: none;
}

#recaptcha {
  visibility: hidden;
}

.nav-pills .nav-link.active {
  cursor: pointer;
  cursor: hand;
}

span.pointer {
  cursor: pointer;
  cursor: hand;
}

/**********************************************************************
 * Style Fixes between Bootstrap 4.0.0-alpha6 and 4.5.0
 **********************************************************************/

body {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

code {
  padding: .2rem .4rem;
  background-color: #f7f7f9;
  border-radius: .25rem;
}

.bg-dark {
  background-color: #292b2c!important;
}

.nav-pills .nav-item.show .nav-link, .nav-pills .nav-link.active {
  background-color: #0275d8;
}

.btn {
  white-space: nowrap;
}

.btn-warning {
  color: #fff;
  background-color: #f0ad4e;
  border-color: #f0ad4e;
}

.btn-warning:hover {
  color: #fff;
  background-color: #ec971f;
  border-color: #eb9316;
}

.btn-warning:focus, .btn-warning.focus {
  color: #fff;
  background-color: #ec971f;
  border-color: #eb9316;
  box-shadow: 0 0 0 2px rgba(240, 173, 78, 0.5);
}

.btn-warning.disabled, .btn-warning:disabled {
  color: #fff;
  background-color: #f0ad4e;
  border-color: #f0ad4e;
}

.btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus,
.show > .btn-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 2px rgba(240, 173, 78, 0.5);
}

.btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active,
.show > .btn-warning.dropdown-toggle {
  color: #fff;
  background-color: #ec971f;
  background-image: none;
  border-color: #eb9316;
}

.btn-success {
  color: #fff;
  background-color: #5cb85c;
  border-color: #5cb85c;
}

.btn-success:hover {
  color: #fff;
  background-color: #449d44;
  border-color: #419641;
}

.btn-success:focus, .btn-success.focus {
  color: #fff;
  background-color: #449d44;
  border-color: #419641;
  box-shadow: 0 0 0 2px rgba(92, 184, 92, 0.5);
}

.btn-success.disabled, .btn-success:disabled {
  background-color: #5cb85c;
  border-color: #5cb85c;
}

.btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus,
.show > .btn-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 2px rgba(92, 184, 92, 0.5);
}

.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
  color: #fff;
  background-color: #449d44;
  background-image: none;
  border-color: #419641;
}

.btn-danger {
  color: #fff;
  background-color: #d9534f;
  border-color: #d9534f;
}

.btn-danger:hover {
  color: #fff;
  background-color: #c9302c;
  border-color: #c12e2a;
}

.btn-danger:focus, .btn-danger.focus {
  color: #fff;
  background-color: #c9302c;
  border-color: #c12e2a;
  box-shadow: 0 0 0 2px rgba(217, 83, 79, 0.5);
}

.btn-danger.disabled, .btn-danger:disabled {
  background-color: #d9534f;
  border-color: #d9534f;
}

.btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus,
.show > .btn-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 2px rgba(217, 83, 79, 0.5);
}

.btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active,
.show > .btn-danger.dropdown-toggle {
  color: #fff;
  background-color: #c9302c;
  background-image: none;
  border-color: #c12e2a;
}


.btn-primary {
  color: #fff;
  background-color: #0275d8;
  border-color: #0275d8;
}

.btn-primary:hover {
  color: #fff;
  background-color: #025aa5;
  border-color: #01549b;
}

.btn-primary:focus, .btn-primary.focus {
  color: #fff;
  background-color: #025aa5;
  border-color: #01549b;
  box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.5);
}

.btn-primary.disabled, .btn-primary:disabled {
  background-color: #0275d8;
  border-color: #0275d8;
}

.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.5);
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #025aa5;
  background-image: none;
  border-color: #01549b;
}

.btn-info {
  color: #fff;
  background-color: #5bc0de;
  border-color: #5bc0de;
}

.btn-info:hover {
  color: #fff;
  background-color: #31b0d5;
  border-color: #2aabd2;
}

.btn-info:focus, .btn-info.focus {
  color: #fff;
  background-color: #31b0d5;
  border-color: #2aabd2;
  box-shadow: 0 0 0 2px rgba(91, 192, 222, 0.5);
}

.btn-info.disabled, .btn-info:disabled {
  background-color: #5bc0de;
  border-color: #5bc0de;
}

.btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus,
.show > .btn-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 2px rgba(91, 192, 222, 0.5);
}

.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active,
.show > .btn-info.dropdown-toggle {
  color: #fff;
  background-color: #31b0d5;
  background-image: none;
  border-color: #2aabd2;
}

.btn-secondary {
  color: #292b2c;
  background-color: #fff;
  border-color: #ccc;
}

.btn-secondary:hover {
  color: #292b2c;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.btn-secondary:focus, .btn-secondary.focus {
  color: #292b2c;
  background-color: #e6e6e6;
  border-color: #adadad;
  box-shadow: 0 0 0 2px rgba(204, 204, 204, 0.5);
}

.btn-secondary.disabled, .btn-secondary:disabled {
  background-color: #fff;
  border-color: #ccc;
}

.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 2px rgba(204, 204, 204, 0.5);
}

.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
  color: #292b2c;
  background-color: #e6e6e6;
  background-image: none;
  border-color: #adadad;
}

/**********************************************************************
 * Signin Form
 **********************************************************************/

.form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.form-signin.small {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}


/**********************************************************************
 * Headers
 **********************************************************************/

h1 {
  margin-bottom: 20px;
  padding-bottom: 9px;
  border-bottom: 1px solid #eee;
}

h1 small.subtitle {
  color: #636c72;
  font-size: 60%;
  margin-left: 50px;
}



/**********************************************************************
 * Sidebar
 **********************************************************************/
.sidebar {
  position: fixed;
  top: 51px;
  bottom: 0;
  left: 0;
  z-index: 1000;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
  border-right: 1px solid #eee;
}

.sidebar {
  padding-left: 0;
  padding-right: 0;
}

.sidebar .nav {
  margin-bottom: 20px;
}

.sidebar .nav-item {
  width: 100%;
}

.sidebar .nav-item + .nav-item {
  margin-left: 0;
}

.sidebar .nav-link {
  border-radius: 0;
}


/**********************************************************************
 * Avatars
 **********************************************************************/

.avatar {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  display: inline-block;
  margin-right: 5px;
  border: 1px solid #AAA;
}

.avatar img {
  opacity: 0;
}

.miniavatar {
  width: 22px;
  height: 22px;
}

/**********************************************************************
 * Tables
 **********************************************************************/

table tr.deleted td {
  /* background-color: #f2dede; */
  background-color: #eee;
  color: #ccc;
  text-decoration: line-through;
}

table tr.deleted td.actions {
  text-decoration: none;
}

/**********************************************************************
 * Domain Tables
 **********************************************************************/

table#domainlist th.domain, table#domainlist td.domain {

}

table#domainlist th.access, table#domainlist td.access {
  width: 200px;
}

table#domainlist th.owner, table#domainlist td.owner {
  width: 400px;
}

table#domainlist th.actions, table#domainlist td.actions {
  width: 200px;
}


table#accessinfo th.who, table#accessinfo td.who {

}

table#accessinfo th.access, table#accessinfo td.access {
  width: 400px;
}

table#accessinfo th.actions, table#accessinfo td.actions {
  width: 200px;
}


table#domainhooks th.url, table#domainhooks td.url {

}

table#domainhooks th.password, table#domainhooks td.password {
  width: 400px;
}

table#domainhooks th.disabled, table#domainhooks td.disabled {
  width: 200px;
}

table#domainhooks th.actions, table#domainhooks td.actions {
  width: 200px;
}



table#domainlist td.domain small.subtitle {
  color: #636c72;
  margin-left: 50px;
}

.breakable {
  word-wrap: break-word;
  word-break: break-all;
}

.mono {
  font-family: Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

.mono.pre {
  white-space: pre;
}

table#soainfo th {
  width: 20%;
}

table#profileinfo th {
  width: 20%;
}

table#records {
  max-width: 100%;
}

table#records td {
  word-break: break-all;
  word-wrap: break-word;
}

table#records th.name, table#records td.name {
  width: 20%;
}

table#records th.type, table#records td.type {
  width: 200px;
}

table#records th.priority, table#records td.priority {
  width: 100px;
}

table#records th.content, table#records td.content {

}

table#records th.ttl, table#records td.ttl {
  width: 100px;
}

table#records th.state, table#records td.state {
  width: 50px;
}

table#records th.actions, table#records td.actions {
  width: 200px;
}

table#records td > input, table#records td > select {
  width: 100%;
}

table#records tr.error td {
  background-color: #f2dede
}

table#records tr td.warning {
  background-color: #fcf8e3
}

div#actionbuttonsfiller {
  height: 120px;
}

div#actionbuttons {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 200px;
  background: #F7F7F7;
  border-top: 1px solid #EEEEEE;
  z-index: 1;
}

/**********************************************************************
 * User Tables
 **********************************************************************/

table#apikeys th.key, table#apikeys td.key {
  width: 375px;
}

table#apikeys tr.odd {
  background-color: rgba(0,0,0,.05);
}

table#apikeys th.description, table#apikeys td.description {

}

table#apikeys th.domains_read, table#apikeys td.domains_read {
  width: 150px;
}

table#apikeys th.domains_write, table#apikeys td.domains_write {
  width: 150px;
}

table#apikeys th.user_read, table#apikeys td.user_read {
  width: 150px;
}

table#apikeys th.user_write, table#apikeys td.user_write {
  width: 150px;
}

table#apikeys th.actions, table#apikeys td.actions {
  width: 200px;
}




table#twofactorkeys th.key, table#twofactorkeys td.key {
  width: 460px;
}

table#twofactorkeys td.key div.inactive {
  display: flex;
}

table#twofactorkeys td.key div.key, table#twofactorkeys td.key div.verifykey {
  width: 225px;
  display: block;
}

table#twofactorkeys th.description, table#twofactorkeys td.description {

}

table#twofactorkeys th.lastused, table#twofactorkeys td.lastused {
  width: 300px;
}

table#twofactorkeys th.actions, table#twofactorkeys td.actions {
  width: 200px;
}


/**********************************************************************
 * User
 **********************************************************************/
table#userlist th.id, table#userlist td.id {
  width: 50px;
}

table#userlist th.email, table#userlist td.email {
  width: 400px;
}

table#userlist th.realname, table#userlist td.realname {

}

table#userlist th.permissions, table#userlist td.permissions {
  width: 325px;
}

table#userlist th.state, table#userlist td.state {
  width: 150px;
}

table#userlist th.actions, table#userlist td.actions {
  width: 200px;
}

table#userlist td.permissions table {
  background: none;
  margin: 0;
  padding: 0;
}

table#userlist td.permissions table tr {
  background: none;
}

table#userlist td.permissions table td {
  background: none;
  border: none;
}

table#userlist td.permissions table td.name {
  width: 180px;
}

table#userlist td.permissions table td.value {
  width: 40px;
}

table#userlist td.permissions table td.actions {
  width: 60px;
}

.tooltip-inner {
  max-width: 500px !important;
}



/**********************************************************************
 * Jobs
 **********************************************************************/
table#joblogs th.timestamp, table#joblogs td.timestamp {
  width: 300px;
}

table#jobinfo th {
  width: 100px;
}

table#joblist th.id, table#joblist td.id {
  width: 100px;
}

table#joblist th.name, table#joblist td.name {
}

table#joblist th.times, table#joblist td.times {
    width: 350px;
}

table#joblist th.state, table#joblist td.state {
      width: 100px;
}

table#joblist th.result, table#joblist td.result {
    width: 100px;
}

table#joblist th.actions, table#joblist td.actions {
    width: 100px;
}

table#joblist tr.state-created, table#jobinfo tr.state-created {
    background-color: #cce5ff;
}

table#joblist tr.state-started, table#jobinfo tr.state-started {
    background-color: #fff3cd;
}

table#joblist tr.state-error, table#jobinfo tr.state-error {
    background-color: #f8d7da;
}

/**********************************************************************
 * Services
 **********************************************************************/
table#servicelogs th.timestamp, table#servicelogs td.timestamp {
  width: 240px;
}

table#servicelogs th.stream, table#servicelogs td.stream {
  width: 300px;
}


table#serviceinfo th {
  width: 100px;
}

table#servicelist th.service, table#servicelist td.service {
    width: 100px;
}

table#servicelist th.actions, table#servicelist td.actions {
    width: 100px;
}