html {
  font-size: 13px;
  height: 100%;
}

body {
  height: 100%;
}

h1, .h1 {
  margin-bottom: 0.7692rem;
  font-weight: 700;
  line-height: 1.1;
  font-size: 2rem;
  letter-spacing: -1px;
}

h2, h3, h4, h5, h6,
.h2, .h3, .h4, .h5, .h6 {
  margin-bottom: 0.7692rem;
  font-weight: 500;
  line-height: 1.1;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-control {
  padding: 0.81rem 0.7692rem;
  font-size: 1.077rem;
  line-height: 1;
  color: #000;
  border: 2px solid #ebebeb;
  border-radius: 0;
  height: auto;
}

.form-control.is-invalid {
  background-image: none;
}

.form-control.form-control-danger {
  padding-right: 2.3076rem;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F45846' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat;
  background-position: center right 0.8076925rem;
  background-size: 1.615385rem 1.615385rem;
}

.form-control::placeholder {
  color: #bababa;
  opacity: 1;
}

code {
  padding: 0.2rem 0.4rem;
  font-size: 90%;
  color: #bd4147;
  background-color: #f8f9fa;
}

a > code {
  padding: 0;
  color: inherit;
  background-color: inherit;
}

pre {
  font-size: 10px;
}

pre code {
  padding: 0;
  font-size: inherit;
  color: inherit;
  background-color: transparent;
  border-radius: 0;
}

.table {
  margin-bottom: 0;
}

.table th,
.table td {
  padding: 0.9rem;
  border: none;
}

.table thead th {
  border-bottom: 1px solid #dee2e6;
}

.table > tbody > tr > td {
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
}

.table-bordered {
  border-color: #eceeef;
}

.table-bordered th,
.table-bordered td {
  border-color: #eceeef;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: whitesmoke;
}

.table-striped tbody tr:nth-of-type(even) {
  background-color: #fff;
}

.lead {
  font-size: 1.615rem;
  font-weight: 300;
}

p, .long-text-formatting {
  font-size: 1.077rem;
  line-height: 1.5078rem;
  max-width: 534px;
}

.main-content {
  padding: 29px 34px 30px 17px;
}

@media (max-width: 767px) {
  .main-content {
    padding-top: 25px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Restore legacy flex-fill behavior (flex-basis: 0 instead of Bootstrap's auto)
   so that percentage height/width on siblings works correctly in flex containers
   like the playground split screen. */
.flex-fill {
  -ms-flex: 1 !important;
  flex: 1 !important;
}

/* SerpApi additions */

.alert-theme {
  padding: 0;
  border: 0;
  color: #FFFFFF;
  line-height: 25px;
}

.alert-theme.alert-success {
  background-color: #2ab97f;
}

.alert-theme.alert-info {
  background-color: #58C7EF;
}

.alert-theme.alert-warning {
  background-color: #FFDC42;
}

.alert-theme.alert-danger {
  background-color: #F45846;
}

#card-errors {
  margin: 20px 0px 20px 0px;
  text-align: center;
}

.footer-serp-api {
  color: #c3b8b7;
  margin: 20px;
}

.btn-playground {
  margin: 8px 14px 8px;
}

.tools a .icon {
  font-size: 1.8rem !important;
  margin-left: 8px !important;
}

.global-results-container pre.language-json {
  height: 100%;
}

.alert a {
  color: inherit;
  text-decoration: underline;
}

.alert a:hover {
  text-decoration: none;
}

.opacity-1 {
  opacity: 0.2;
}

.opacity-2 {
  opacity: 0.4;
}

.opacity-3 {
  opacity: 0.6;
}

.opacity-4 {
  opacity: 0.8;
}

span.icon.title {
  margin: 5px 12px 0px 9px;
  float: left;
}

table.sortable thead {
  cursor: pointer !important;
}

.modal.show {
  display: block;
}

.modal-backdrop {
  display: none;
}

.modal-backdrop.show {
  display: block;
}