@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

#header {
  background-color: #874e9f;
  color: #f3f5f9;
  z-index: 1000;
  position: relative;
}

#changelist-filter {
  z-index: 100 !important;
}

a:link, a:visited {
  color: #444c63;
}

div.breadcrumbs {
  background-color: #444c63;
  position: sticky;
  top: 0;
  z-index: 2000; /* To be over all the other elemnts */
}

.module h2, .module caption, .inline-group h2 {
  background-color: #444c63;
}

.button, input[type=submit], input[type=button], .submit-row input, a.button {
  color: white;
  background-color: #874e9f;
}

.button:active, input[type=submit]:active, input[type=button]:active, .button:focus, input[type=submit]:focus, input[type=button]:focus, .button:hover, input[type=submit]:hover, input[type=button]:hover {
  background-color: #955bad;
}

.button.primary {
  background-color: #3176bb;
}

.button.secondary {
  background-color: #444c63;
}

.button.success {
  background-color: #5cb85c;
}

.button.danger {
  background-color: #e6373e;
}

.button.warning {
  background-color: #f1c40f;
}

.button.info {
  background-color: #878c99;
}

.button.default, input[type=submit].default, .submit-row input.default {
  background-color: #3176bb;
}

.submit-row a.deletelink {
  background-color: #e6373e;
}

.status {
  font-weight: bold;
}

.ok {
  color: #5cb85c;
}

.warning {
  color: #f1c40f;
}

.pending {
  color: #3176bb;
}

.error {
  color: #e6373e;
}

.stale {
  color: #3176bb;
}

.button[disabled] {
  cursor: not-allowed;
  pointer-events: none;
}

.field-settings,
.field-trace_settings {
  white-space: nowrap;
}

.inline-group .tabular tr td.original p {
  font-size: 12px;
}

.inline.module table {
  width: 100%;
}



.panel {
  border: none;
  border-left: #aaa solid 1px;
  background-color: #f8f8f8;
  position: fixed;
  top: 0;
  right: -100%;
  padding: 100px 0 0;
  width: 33%;
  z-index: 200;
  height: calc(100vh - 100px);
}

.panel.loading {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 72px;
  background-image: url('data:image/svg+xml;charset=utf8,<svg width="120" height="30" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="River Bed"><circle cx="30" cy="15" r="8"><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.2;1" calcMode="linear" repeatCount="indefinite" /></circle><circle cx="60" cy="15" r="8" fill-opacity="0.3"><animate attributeName="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcMode="linear" repeatCount="indefinite" /></circle><circle cx="90" cy="15" r="8"><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.2;1" calcMode="linear" repeatCount="indefinite" /></circle></svg>');
}

.panel.show {
  right: 0;
}

.panel-close {
  opacity: 0;
  position: fixed;
  right: 24px;
  top: 120px;
  z-index: -1;
}

.panel.show ~ .panel-close {
  opacity: 1;
  z-index: 300;
}

.popup {
  background-color: #f8f8f8;
}

.popup .submit-row {
  display: none;
}

.popup .module {
  background-color: #f8f8f8;
}

.popup .module .empty {
  padding: 20px;
  text-align: center;
  font-size: small;
}

[target='PANEL']::before {
  content: 'exit_to_app ';
  vertical-align: bottom;
  font-family: 'Material Icons';
}

.panel-close::before {
  display: none;
}
/* Keep clients list compact */
td.field-clients {
    columns: 2;
    column-width: 140px;
}

td.field-clients li {
  list-style: none;
  font-size: smaller;
}

@media (min-width: 1920px) {
  td.field-clients {
    columns: 3;
  }
}

/* Leave place to show close button */
.popup .messagelist li {
  padding-right: 120px;
}