.container {
  padding: 20px;
}

.flex-box {
  display: flex;
}

.justify-content-center {
  justify-content: center;
}

.flex-grow-1 {
  flex-grow: 1;
}

.flex-grow-3 {
  flex-grow: 3;
}

.header-bb {
  border-bottom: 1px solid var(--shadow-color-secondary);
}

.btn {
  padding: 9px 16px;
  outline: none;
  transition: 0.5s;
  text-align: center;

  border: 1px solid var(--shadow-color-secondary);
  border-radius: 5px !important;
  font-size: 16px;
  cursor: pointer;
}

.btn-primary {
  background-color: var(--secondary-color);
  border: 1px solid var(--secondary-color);
  color: #fff;
}

.btn-secondary {
  background-color: var(--shadow-color-primary) !important;
  border: 1px solid var(--shadow-color-primary) !important;
  color: #4a4a4a !important;
}

.btn-secondary-light {
  color: #4a4a4a !important;
  background-color: #fff;
}

.btn-destructive {
  color: #db3700 !important;
  background-color: #fff;
}

.btn.btn-primary:hover {
  background-color: var(--accent-color-secondary);
}

.btn.btn-secondary:hover {
  background-color: var(--shadow-color-secondary) !important;
}

.btn-secondary-light:hover {
  border: 1px solid #4a4a4a;
}

.btn.btn-destructive:hover {
  border: 1px solid #db3700 !important;
}

.btn.btn-primary.disabled, .btn.btn-primary.disabled:hover {
  background: var(--accent-color-primary);
  opacity: .7;
  cursor: not-allowed;
}

.btn-icon > i {
  margin-right: 9px;
}

.btn.icon-only.btn-icon > i {
  margin: 0px;
}

.searchfield {
  position: relative;
  height: 100%;
}

.searchfield > input {
  border: none;
  border-bottom: 1px solid var(--shadow-color-secondary);
  border-radius: 0;
  padding: 10px 18px 8px;
  padding-left: 25px;
  transition: border-bottom-color .2s ease;
  height: 100%;
  min-width: 220px;
  max-height: calc(39.6px - 18px);
}
.searchfield.full > input {
  border: 1px solid var(--shadow-color-secondary);
  padding: 8px 8px 8px 35px;
  font-size: 15px;
  min-width: unset;
}

.searchfield > input:focus {
  border-bottom-color: var(--accent-color-secondary);
  box-shadow: none;
  outline: none;
}

.searchfield.full > input:focus {
  border: 1px solid var(--accent-color-secondary);
  box-shadow: 0 0 6px 3px var(--accent-color-primary);
  -moz-box-shadow: 0 0 6px 3px var(--accent-color-primary);
  -webkit-box-shadow: 0 0 6px 3px var(--accent-color-primary);
  -ms-box-shadow: 0 0 6px 3px var(--accent-color-primary);
}

.searchfield > i.searchicon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
}

.searchfield.full > i.searchicon {
  left: 5px;
  font-size: 22px;
}



.network-information {
  position: fixed;
  bottom: -300px;
  left: 50%;
  transform: translateX(-50%);
  background: #1b2932;
  padding: 15px 20px;
  border-radius: 8px;
  z-index: 999999;
  box-shadow: 0 6px 15px 0 rgba(0,0,0,.15);
  transition: bottom .5s cubic-bezier(.175,.885,.32,1.275);
}
.network-information.info-active {
  bottom: 90px;
}
.network-information.broken .icon {
  color: #db3700;
}
.network-information .icon {
  font-size: 20px;
  line-height: 20px;
  position: absolute;
  top: 23px;
  left: 20px;
}
.network-information .message {
  color: #fff;
  margin-left: 40px;
  font-size: 15px;
}
.network-information .message h2 {
  font-size: 15px;
}
.network-information .message div {
  color: #64737d;
  margin-top: 2px;
}