:root{    
    --fsize:large;
    --dwidth:40rem;
  }
  @media all and (max-width: 1370px) {

    :root{ 
      --dwidth:30rem;
    }
  }
  @media all and (max-width: 979px) {

    :root{
      --dwidth:25rem;
    }
  }
  @media all and (max-width: 540px) {

    :root{
      --dwidth:20rem;
    }
  }
  [data-css-icon] {
    --animdur: 0.3s;
    --loading-animdur: 0.8s;
    --animtf: ease-in;
    --bdw: 2px;
    --bdrs: 50%;
    --bgc: transparent;
    --c: currentcolor;       
    --icon-size: 1rem;
    --size: 4rem; 
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: space-between;   
  }
  [data-css-icon] i {
    align-items: center;
    background-color: var(--bgc);
    border-radius: var(--bdrs);
    box-sizing: border-box;
    display: inline-flex;
    height: var(--size);
    justify-content: center;
    position: relative;
    transition: background-color var(--animdur) var(--animtf);
    width: var(--size);
  }
  [data-css-icon] i::after,
  [data-css-icon] i::before {
    transform-origin: 50% 50%;
    transition: all var(--animdur) var(--animtf);
  }
  
  [data-css-icon*="plus"] i::after,
  [data-css-icon*="plus"] i::before {
    /* Width need to be the diagonal of the down-arrow side-length (--size): sqrt(2) * --size. */
    --w: calc(var(--icon-size) * 1.4142135623730950488016887242097);
    background: var(--c);
    content: "";
    height: var(--bdw);
    position: absolute;
    width: var(--w);
  }
  
  [data-css-icon*="plus"] i::before {
    transform: rotate(90deg);
  }
 
  [open] > summary > [data-css-icon*="plus"] i::after {
    transform: rotate(180deg);
  }
  [open] > summary > [data-css-icon*="plus"] i::before {
    transform: rotate(-0deg);
  }
 
  details {
    width: var(--dwidth);
  }
 
  details {
    height: var(--collapsed);
    overflow: hidden;
    transition: height 300ms cubic-bezier(0.4, 0.01, 0.165, 0.99);
  }
  details[open] {
    height: var(--expanded);
  }
  summary {
    background-color: var(--bgc);
    border: 0;
    border-radius: 15px;
    color: var(--c, inherit);
    list-style-type: none;
    margin-top: 20px;
    outline: none;
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
    padding-inline-end: 0.5rem;
    padding-inline-start: 1rem;
    user-select: none;
    
  }
  summary::marker {
    display: none;
  }
  summary::-webkit-details-marker {
    display: none;
  }
  
  /* 4 States of summary */

  summary {
    font-weight: bold;
    font-size: var(--fsize);
    --bgc: #d1a01d;
  }
  [open] > summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    --bgc: #a97721;
    --c: black;
  }
  summary:focus {
    --bgc: #a97721;
  }
  [open] > summary:focus {
    --bgc: #a97721;
    --c: black;
  }
  
  summary + * {
    background-color: #d1a01d;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    color: black;
    line-height: 1.6;
    padding: 0.5rem;
    transition: all 0.3s ease-in;
    height: 60px;
  }
  
  @keyframes dots {
    0% {
      background-color: var(--c);
    }
    50%,
    100% {
      background-color: var(--dots-bgc);
    }
  }
  
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(1turn);
    }
  }