:root {
  --eot-primary-color: #00839c;
  --eot-secondary-color: #c92435;
  --eot-bg-color: #f7f7f780;

  --eot-font-size: small;
}
/* WRAPPER */
.eot-wrapper {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 2em;
}
@media only screen and (max-width: 768px) {
  .eot-wrapper {
    grid-template-columns: 1fr;
  }
}
/* EO */
.eot-eo-item {
  font-size: var(--eot-font-size);
  padding-bottom: 2em;
}
.eot-eo-item::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #eee;
  margin-top: 2em;
}
.eot-eo-item h3 {
  font-size: 1.6em !important;
  margin-bottom: 0.5em;
}
.eot-eo-number {
  margin-bottom: 10px;
}
/* EO Case Listing */
#eo-case-list > div:nth-child(odd) {
  background-color: var(--eot-bg-color);
}
/** 
 * EOT Case 
 */
.eot-case {
  border: 1px solid #eee;
  padding: 0;
  margin: 10px 0;
  display: grid;
  grid-template-columns: 1fr;
  font-size: var(--eot-font-size);
  gap: 0;
}
/*SUMMARY*/
.eot-case summary {
  cursor: pointer;
  padding: 0.3em 1.5em;
  background: #f9f9f9;
  font-weight: bold;
  list-style: none;
}
.eot-case summary::-webkit-details-marker {
  display: none;
}
summary::after {
  content: "▶";
  float: right;
  transition: transform 0.3s ease;
}
.eot-case summary h4 {
  margin-left: 0em;
  display: inline;
  font-size: medium;
  font-weight: normal;
}
/*CASE CONTENT*/
.eot-case-content {
  padding: 1.5em;
}
.eot-case[open] summary::after {
  /* content: "▼"; */
  transform: rotate(90deg);
}
.eo-case:not([open]) .eot-case-content {
  display: none;
}
.eot-case-meta {
  margin-bottom: 1.5em;
}
.eot-case-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5em;
}
.eot-case-details p,
.eot-case-documents p {
  margin-bottom: 7px;
}

/*SEARCH*/
.eot-search {
  max-width: 250px;
}
.eot-search label {
  font-size: var(--eot-font-size) !important;
  margin-bottom: 0.5em;
}
.eot-search h3 {
  font-size: 1.2em !important;
  margin-bottom: 0.5em;
}
#eot-topic-select,
#eot-eo-select {
  padding: 5px 15px;

  font-size: var(--eot-font-size) !important;
  margin-bottom: 10px;
  max-width: 100%;
}
#eot-search {
  padding: 5px 15px;
  font-size: var(--eot-font-size) !important;
  margin-bottom: 10px;
}
#eot-topic-select option,
#eot-eo-select option {
  font-size: var(--eot-font-size) !important;
}

.eot-button {
  background-color: var(--eot-primary-color);
  color: white;
  font-size: large;
  padding: 0.1em 0.5em;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  margin-top: 1em;
}
.eot-button:hover {
  background-color: #007080;
}
/*
 * FILTER BUTTONS
 */
#eot-search-filters {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 15px;
}
#eot-search-filters .eot-search-filter {
  display: table;
  background: var(--eot-secondary-color);
  color: white;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: var(--eot-font-size);
  cursor: pointer;
  gap: 5px;
}
#eot-search-filters .eot-search-filter:after {
  content: "−";
  margin-left: 10px;
  color: white;
}
#eot-search-filters .eot-search-filter:hover {
  background: #eee;
  color: #333;
}

/* LOADER: HTML: <div class="eot-loader"></div> */
.eot-loader {
  margin: 3em auto;
  width: 40px;
  aspect-ratio: 1;
  --c: linear-gradient(var(--eot-primary-color) 0 0);
  --r1: radial-gradient(
    farthest-side at bottom,
    var(--eot-primary-color) 93%,
    var(--eot-primary-color)
  );
  --r2: radial-gradient(
    farthest-side at top,
    #000 93%,
    var(--eot-primary-color)
  );
  background: var(--c), var(--r1), var(--r2), var(--c), var(--r1), var(--r2),
    var(--c), var(--r1), var(--r2);
  background-repeat: no-repeat;
  animation: l2 1s infinite alternate;
}

@keyframes l2 {
  0%,
  25% {
    background-size: 8px 0, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px, 8px 0,
      8px 4px, 8px 4px;
    background-position: 0 50%, 0 calc(50% - 2px), 0 calc(50% + 2px), 50% 50%,
      50% calc(50% - 2px), 50% calc(50% + 2px), 100% 50%, 100% calc(50% - 2px),
      100% calc(50% + 2px);
  }

  50% {
    background-size: 8px 100%, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px, 8px 0,
      8px 4px, 8px 4px;
    background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%,
      50% calc(50% - 2px), 50% calc(50% + 2px), 100% 50%, 100% calc(50% - 2px),
      100% calc(50% + 2px);
  }

  75% {
    background-size: 8px 100%, 8px 4px, 8px 4px, 8px 100%, 8px 4px, 8px 4px,
      8px 0, 8px 4px, 8px 4px;
    background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%,
      50% calc(0% - 2px), 50% calc(100% + 2px), 100% 50%, 100% calc(50% - 2px),
      100% calc(50% + 2px);
  }

  95%,
  100% {
    background-size: 8px 100%, 8px 4px, 8px 4px, 8px 100%, 8px 4px, 8px 4px,
      8px 100%, 8px 4px, 8px 4px;
    background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%,
      50% calc(0% - 2px), 50% calc(100% + 2px), 100% 50%, 100% calc(0% - 2px),
      100% calc(100% + 2px);
  }
}
@media only screen and (max-width: 768px) {
  .eot-case-details,
  .eot-case {
    grid-template-columns: 1fr;
  }
  .eot-case-header p {
    margin-bottom: 7px;
  }
}