@import url(../webfonts/material/material-icons.css);
@import url(../webfonts/pt/pt.css);

body {
  background: #ececec;
}

.btn-block {
  text-align: left;
}

main {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.papersheet {
  background-color: #fefefe;
  padding: 1rem 2rem 1rem 2rem;
  box-shadow: 0 0 25px rgba(30, 30, 120, 0.7);
}

div.footer a {
  color: #5e5e5e;
  text-align: right;
}

/*
    font-family: 'Droid Serif', serif;
    font-family: 'Droid Sans', sans-serif;
    font-family: 'PT Serif', serif;
    font-family: 'PT Sans', sans-serif;
    font-family: 'PT Mono', monospace;
    font-family: 'Coming Soon', cursive;

    blau gruen  #00adef
    blau haupt  #156A9C
    blau dunkel #2f67a2
    blau mittel #4791d4
    blau hell   #ade0f5
    grau        #656263
    weiss       #ffffff
*/

pre.language-json,
pre.jsoncode {
  background-color: #e3e3e3;
  border-left: 3px solid #555555;
  padding: 10px;
}

.webservice {
  background-color: #b5e3b5;
  border-left: 3px solid #006600;
  padding: 10px;
}

input.disabled {
  background-color: rgb(200, 200, 200);
}

div.webservice dl dd,
dl.fields dd {
  padding: 0 0 0 10px;
  margin: 0 0 0 1rem;
}

div.webservice dl > dd {
  border-left: 1px solid#535455 !important;
}

dl.fields > dd {
  border-left: 1px solid#dee2e6 !important;
}

/* https://www.w3schools.com/howto/howto_js_filter_table.asp */
#search-input {
  background-image: url("/f/css/searchicon.png"); /* Add a search icon to input */
  background-position: 10px 12px; /* Position the search icon */
  background-repeat: no-repeat; /* Do not repeat the icon image */
  font-size: 16px; /* Increase font-size */
  padding: 9px 20px 9px 40px; /* Add some padding */
  border: 1px solid #ddd; /* Add a grey border */
}

/* switch */

.switch {
  font-size: 1rem;
  position: relative;
}
.switch input {
  position: absolute;
  height: 1px;
  width: 1px;
  background: none;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  padding: 0;
}
.switch input + label {
  position: relative;
  min-width: calc(calc(2.375rem * 0.8) * 2);
  border-radius: calc(2.375rem * 0.8);
  height: calc(2.375rem * 0.8);
  line-height: calc(2.375rem * 0.8);
  display: inline-block;
  cursor: pointer;
  outline: none;
  user-select: none;
  vertical-align: middle;
  text-indent: calc(calc(calc(2.375rem * 0.8) * 2) + 0.5rem);
}

.switch input + label::before,
.switch input + label::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(calc(2.375rem * 0.8) * 2);
  bottom: 0;
  display: block;
}

.switch input + label::before {
  right: 0;
  background-color: #dee2e6;
  border-radius: calc(2.375rem * 0.8);
  transition: 0.2s all;
}

.switch input + label::after {
  top: 2px;
  left: 2px;
  width: calc(calc(2.375rem * 0.8) - calc(2px * 2));
  height: calc(calc(2.375rem * 0.8) - calc(2px * 2));
  border-radius: 50%;
  background-color: white;
  transition: 0.2s all;
}
.switch input:checked + label::before {
  background-color: #08d;
}
.switch input:checked + label::after {
  margin-left: calc(2.375rem * 0.8);
}
.switch input:focus + label::before {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(0, 136, 221, 0.25);
}
.switch input:disabled + label {
  color: #868e96;
  cursor: not-allowed;
}
.switch input:disabled + label::before {
  background-color: #e9ecef;
}
.switch.switch-sm {
  font-size: 0.875rem;
}
.switch.switch-sm input + label {
  min-width: calc(calc(1.9375rem * 0.8) * 2);
  height: calc(1.9375rem * 0.8);
  line-height: calc(1.9375rem * 0.8);
  text-indent: calc(calc(calc(1.9375rem * 0.8) * 2) + 0.5rem);
}
.switch.switch-sm input + label::before {
  width: calc(calc(1.9375rem * 0.8) * 2);
}
.switch.switch-sm input + label::after {
  width: calc(calc(1.9375rem * 0.8) - calc(2px * 2));
  height: calc(calc(1.9375rem * 0.8) - calc(2px * 2));
}
.switch.switch-sm input:checked + label::after {
  margin-left: calc(1.9375rem * 0.8);
}
.switch.switch-lg {
  font-size: 1.25rem;
}
.switch.switch-lg input + label {
  min-width: calc(calc(3rem * 0.8) * 2);
  height: calc(3rem * 0.8);
  line-height: calc(3rem * 0.8);
  text-indent: calc(calc(calc(3rem * 0.8) * 2) + 0.5rem);
}
.switch.switch-lg input + label::before {
  width: calc(calc(3rem * 0.8) * 2);
}
.switch.switch-lg input + label::after {
  width: calc(calc(3rem * 0.8) - calc(2px * 2));
  height: calc(calc(3rem * 0.8) - calc(2px * 2));
}
.switch.switch-lg input:checked + label::after {
  margin-left: calc(3rem * 0.8);
}
.switch + .switch {
  margin-left: 1rem;
}

/* spinner */

.loader {
  border: 14px solid #f3f3f3; /* Light grey */
  border-top: 14px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 100px;
  height: 100px;
  animation: spin 3s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

dl > dd
/*dd > dl*/ {
  margin-left: 1rem;
}

a.anchor {
  display: block;
  position: relative;
  top: -60px;
  visibility: hidden;
}

div.card{
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
}

div.btn-group:not(.btn-group-sm) a {
    box-shadow: 1px 3px 7px rgba(0, 0, 0, 0.3);
}