[data-tooltip]{position:relative;cursor:pointer}[data-tooltip]:after,[data-tooltip]:before{text-transform:none;font-size:.9em;line-height:1;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;position:absolute;display:none;opacity:0}[data-tooltip]:before{content:"";border:5px solid transparent;z-index:2000}[data-tooltip]:after{content:attr(data-tooltip);text-align:left;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);overflow-wrap:break-word;min-width:18em;max-width:20em;padding:8px 16px;border-radius:8px;box-shadow:0 3px 6px 0 rgba(0,0,0,.08);background:#000;color:#fff;z-index:2000;font-size:12px;line-height:16px}[data-tooltip]:hover:after,[data-tooltip]:hover:before{display:block}[data-tooltip=""]:after,[data-tooltip=""]:before{display:none!important}[data-tooltip]:not([data-flow]):before,[data-tooltip][data-flow^=top]:before{bottom:100%;border-bottom-width:0}[data-tooltip]:not([data-flow]):after,[data-tooltip][data-flow^=top]:after{bottom:calc(100% + 5px)}[data-tooltip]:not([data-flow]):after,[data-tooltip]:not([data-flow]):before,[data-tooltip][data-flow^=top]:after,[data-tooltip][data-flow^=top]:before{left:50px;transform:translate(-50%,-.5em)}[data-tooltip][data-flow^=bottom]:before{top:100%;border-top-width:0;border-bottom-color:var(--gray-4)}[data-tooltip][data-flow^=bottom]:after{top:calc(100% + 5px)}[data-tooltip][data-flow^=bottom]:after,[data-tooltip][data-flow^=bottom]:before{left:50%;transform:translate(-50%,.5em)}[data-tooltip][data-flow^=left]:before{top:50%;border-right-width:0;border-left-color:var(--gray-4);left:calc(0em - 5px);transform:translate(-.5em,-50%)}[data-tooltip][data-flow^=left]:after{top:50%;right:calc(100% + 5px);transform:translate(-.5em,-50%)}[data-tooltip][data-flow^=right]:before{top:50%;border-left-width:0;border-right-color:var(--gray-4);right:calc(0em - 5px);transform:translate(.5em,-50%)}[data-tooltip][data-flow^=right]:after{top:50%;left:calc(100% + 5px);transform:translate(.5em,-50%)}@keyframes tooltips-vert{to{opacity:.9;transform:translate(-50%)}}@keyframes tooltips-horz{to{opacity:.9;transform:translateY(-50%)}}[data-tooltip]:not([data-flow]):hover:after,[data-tooltip]:not([data-flow]):hover:before,[data-tooltip][data-flow^=bottom]:hover:after,[data-tooltip][data-flow^=bottom]:hover:before,[data-tooltip][data-flow^=top]:hover:after,[data-tooltip][data-flow^=top]:hover:before{animation:tooltips-vert .3s ease-out forwards}[data-tooltip][data-flow^=left]:hover:after,[data-tooltip][data-flow^=left]:hover:before,[data-tooltip][data-flow^=right]:hover:after,[data-tooltip][data-flow^=right]:hover:before{animation:tooltips-horz .3s ease-out forwards}

.accordion {

  margin: 90px auto;
  color: rgb(17 24 39);
  background-color: white;
  padding: 25px 25px;
}

.accordion .container {
  position: relative;
  margin: 10px 10px;
}

/* Positions the labels relative to the .container. Adds padding to the top and bottom and increases font size. Also makes its cursor a pointer */

.accordion .label {
  position: relative;
  padding: 10px 0;
  font-size: 16px;
  color: black;
  cursor: pointer;
}

.accordion .label::before {
  content: '+';
  color: black;
  position: absolute;
  top: 50%;
  right: -5px;
  font-size: 16px;
  transform: translateY(-50%);
}

/* Hides the content (height: 0), decreases font size, justifies text and adds transition */

.accordion .content {
  position: relative;
  background: white;
  height: 0;
  font-size: 14px;
  text-align: justify;
  overflow: hidden;
  transition: 0.5s;
}

/* Adds a horizontal line between the contents */

.accordion hr {
  width: 100;
  margin-left: 0;
  border: 1px solid #E5E4E2;
}


/* Unhides the content part when active. Sets the height */

.accordion .container.active .content {
  height: auto;
  min-height:100px;
}

/* Changes from plus sign to negative sign once active */

.accordion .container.active .label::before {
  content: '-';
  font-size: 15px;
}
