/* IAM Serif - Regular */
@font-face {
  font-family: 'iam-serif';
  src: url('../../fonts/iam-serif-regular.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* IAM Serif - Bold */
@font-face {
  font-family: 'iam-serif';
  src: url('../../fonts/iam-serif-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* IAM Serif - Light */
@font-face {
  font-family: 'iam-serif';
  src: url('../../fonts/iam-serif-light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* IAM Serif - Black */
@font-face {
  font-family: 'iam-serif';
  src: url('../../fonts/iam-serif-black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* IAM Sans Serif - Regular */
@font-face {
  font-family: 'iam-sans-serif';
  src: url('../../fonts/iam-sans-serif-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* IAM Sans Serif - Medium Italic */
@font-face {
  font-family: 'iam-sans-serif';
  src: url('../../fonts/iam-sans-serif-medium-italic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* Font Family Classes */
.iam-serif {
  font-family: 'iam-serif', serif !important;
}

.iam-sans-serif {
  font-family: 'iam-sans-serif', sans-serif !important;
  line-height: 1.4;
}

/* CSS Variables for easy use */
:root {
  --iam-serif: 'iam-serif', serif;
  --iam-sans-serif: 'iam-sans-serif', sans-serif;
}


p[data-quadrant],
div[data-quadrant],
p[data-field],
.line-label,
h1,
h2#text-element-title,
h2#icon-title,
h2#story-title,
h2#line-label-title,
.ce-header,
div[data-tippy-root] h4 {
  font-family: var(--iam-serif);
  letter-spacing: -0.03em;
  background: transparent;
}

.text-gray-600 {
  color: rgba(0, 0, 0, .8);
}

h1 {
  font-weight: 700 !important;

}

#centerTitle {
  border-radius: 4px !important;
  padding: .75rem 1.15rem;
  /* background-color: #F6F3F0 !important */
  background-color: rgba(255, 255, 255);
  /* border: 1px solid #E1E1E1; */
  box-shadow: 0 0 14px 0 rgba(0, 0, 0, .02), 0 0 0 1px #eee;
  opacity: .9;

}

.codex-editor--narrow .codex-editor__redactor {
  margin-right: 0;
}

.icon-container {
  background-color: rgba(255, 255, 255, .85);
}

#text-element-preview *,
#text-element-preview,
#icon-preview,
#icon-preview *,
.ce-paragraph,
div[data-tippy-root] p,
#line-label-preview,
.cdx-list__item {
  font-family: var(--iam-sans-serif) !important;
  line-height: 1.42 !important;
}

div[data-tippy-root] p {
  font-size: .9rem;
}

.h-\[73px\] {
  background-color: rgba(255, 255, 255, .65) !important;
}

.lens-level {
  background-color: rgba(255, 255, 255, .35);
}

.sliding-sidebar,
#layers-sidebar {
  background-color: #F6F3F0 !important;
}

button#open-story-sidebar,
button#open-layers-sidebar {
  font-family: var(--iam-serif) !important;
  background: linear-gradient(179.56deg, rgba(32, 32, 32, 0.77) -19.78%, rgba(0, 0, 0, 0.77) 124.43%) !important;
  box-shadow: 0px 3px 3px -1.5px #67675F, inset 0px 2px 1px #737373, inset 0px -1px 4px #000000;
  border-radius: 30px !important;
  text-transform: uppercase !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.05em !important;
  padding: 15px 2.1rem !important;
  color: #fff !important;
  border: none !important;
  cursor: pointer;
  transition: 0.2s ease;
  text-decoration: none;
  display: flex;
}

#open-layers-sidebar svg {
  color: white;
}

@media (min-width: 768px) {
  .md\:text-xl {
    font-size: 1.75rem;
  }
}

.-top-8 {
  top: -3rem;
}

.-top-10 {
  top: -2rem;
}

.-bottom-8 {
  bottom: -3rem;
}

.line-label,
p[data-quadrant] {
  background: transparent !important;
}

.icon-container.iam {
  width: 50px;
  height: 50px;
  border: 1px solid #eee;
}

.top-level-lens-container,
.top-level-outer-container {
  background: url("../images/iam-bgs/IAM-bg-big1.jpg");
}