

h1 {
  background-color: var(--secondary-color-1);
  border-radius: 2rem;
  height: 4rem;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 1rem 5.5rem 2rem 4.5rem;
  position: relative;
}

h1::before {
  content: "";
  height: 4.8rem;
  width: 1.6rem;
  position: absolute;
  left: -3.5rem;
  border-radius: .8rem;
  bottom: -.5rem;
  transform: rotate(30deg);
  background-color: var(--secondary-color-2);
}

h1::after {
  content: "";
  padding: .6rem;
  position: absolute;
  right: -5.5rem;
  border-radius: 2.2rem;
  background-color: transparent;
  border: 1.4rem solid var(--primary-color);
}

@media (width <= 800px) {
  h1 {
    font-size: 1.5rem;
    margin: 1rem 0 2rem 2rem;
  }

  h1::after {
    content: none;
  }
}

/* with margot fun, primary and seconry are light, so we need to write with neutral instead of neutral-light */
.label {
  color: var(--neutral-color) !important;
  padding: .2rem .5rem .1rem !important;
}

.label-default {
  background-color: var(--neutral-light-color);
}

.label-info {
  opacity: 1;
}

.panel-heading {
  color: var(--neutral-color) !important;

  --chevron-color: var(--neutral-color) !important;
}

.panel-default:not(.note-editor) > .panel-heading {
  background-color: var(--neutral-light-color);
  border-color: var(--neutral-light-color);
}

.panel-default {
  border-color: var(--neutral-light-color);
}

h1, h3, h4, h5, h6 {
  color: var(--neutral-color) !important;
}

.bazar-card .floating-area .date,
.bazar-card .floating-area .text {
  color: var(--neutral-color) !important;
}

.bazar-card .title-area + .subtitle-area {
  font-weight: bold !important;
}

.bazar-card .floating-area .field-default {
  color: var(--neutral-color) !important;
}

.results-container .filter-box:nth-of-type(2),
.results-container .filter-box:nth-of-type(5) {
  --neutral-color: var(--neutral-color);
  --checkbox-color: var(--secondary-color-1);
  --neutral-light-color: var(--secondary-color-1);
}

.results-container .filter-box:nth-of-type(3),
.results-container .filter-box:nth-of-type(6) {
  --neutral-color: var(--neutral-color);
  --checkbox-color: var(--secondary-color-2);
  --neutral-light-color: var(--secondary-color-2);
}

.nav-tabs {
  border-bottom: 3px solid var(--neutral-color);

  --primary-color: var(--neutral-color);
  --link-color: var(--neutral-color);
}

.table-condensed>tbody>tr>td:first-child strong, .table-condensed>tbody>tr>td:first-child h1, .table-condensed>tbody>tr>td:first-child h2, .table-condensed>tbody>tr>td:first-child h3, .table-condensed>tbody>tr>td:first-child h4, .table-condensed>tbody>tr>td:first-child h5, .table-condensed>tbody>tr>td:first-child h6 {
  color: var(--neutral-color);
}

.input-group-addon {
  color: var(--neutral-color);
}

.form-group .control-label,
input.form-control[type="file"]::before {
  color: var(--neutral-color);
}

.bazar-list .panel-heading[data-toggle="collapse"] {
  background-color: var(--main-bg-color);
}

.btn {
  color: var(--neutral-color) !important;
}

.btn.btn-neutral {
  background-color: var(--neutral-light-color);
}

section h2 {
  color: var(--neutral-color);
}

.ace-body {
  --primary-color: #2196f3;
  --secondary-color-1: #a93612;
}

.ace-body .ace_comment {
  opacity: .7;
} 