/* Dropdowns in Index */
  
  * {
    user-select: none;
  }
  [data-css-icon] {
    --animdur: 0.3s;
    --loading-animdur: 0.8s;
    --animtf: ease-in;
    --bdw: 2px;
    --bdrs: 50%;
    --bgc: transparent;
    --c: currentcolor;
    --dots-bgc: silver;
    --dots-size: 0.5rem;
    --icon-size: 1rem;
    --size: 2.5rem;
  
    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*="down"] i::after,
  [data-css-icon*="right"] i::after {
    background: transparent;
    border-color: var(--c);
    border-style: solid;
    box-sizing: border-box;
    content: "";
    display: inline-block;
    height: var(--icon-size);
    margin: 0;
    position: relative;
    width: var(--icon-size);
  }
  [data-css-icon*="down"] i::after {
    border-width: 0 var(--bdw) var(--bdw) 0;
    top: calc(0px - (var(--icon-size) / 4));
    transform: rotate(45deg);
  }
  
  /* STATE */
  [open] > summary > [data-css-icon*="down"] i::after {
    top: var(--bdw);
    transform: rotate(45deg) scale(-1);
  }
  [open] > summary > [data-css-icon*="right"] i::after {
    right: 0;
    top: calc(0px - (var(--icon-size) / 4));
    transform: rotate(135deg);
  }
  [open] > summary > [data-css-icon*="plus"] i::after {
    transform: rotate(180deg);
  }
  [open] > summary > [data-css-icon*="plus"] i::before {
    transform: rotate(-0deg);
  }
  
  [open] > summary > [data-css-icon*="equals"] i::after {
    transform: rotate(-45deg);
  }
  [open] > summary > [data-css-icon*="equals"] i::before {
    transform: rotate(45deg);
  }
  
  [open] > summary > [data-css-icon*="menu"] i {
    background-color: transparent;
  }
  [open] > summary > [data-css-icon*="menu"] i::after {
    transform: translateY(calc(0px - var(--m))) rotate(-45deg);
  }
  [open] > summary > [data-css-icon*="menu"] i::before {
    transform: translateY(var(--m)) rotate(45deg);
  }
  
  /* RTL: inset-block-end fails */
  [dir="rtl"] [data-css-icon*="right"] i::after {
    left: calc((var(--icon-size) / 4));
  }
  [dir="rtl"] [data-css-icon*="menu"] i {
    left: 0.5rem;
    right: auto;
  }
  
  /* MODIFIERS */
  [data-css-icon*="outline"] i {
    border: var(--bdw) solid var(--c);
  }
  [data-css-icon*="fill"] {
    --bgc: hsl(195, 10%, 30%);
    --c: hsl(195, 10%, 95%);
  }
  [data-css-icon*="square"] {
    --bdrs: 5px;
  }
  @media (max-width: 700px) {
    details {
      width: 7rem;
      border-color: rgb(21, 75, 252);
      z-index: 1000;
    }
    #dropdownMenuButton{
      width: 12.5rem;
      border-color: rgb(21, 75, 252);
    }
  }

  #dropdownMenuButton{
    width: 15.5rem;
    border-color: rgb(21, 75, 252);
  }

  details {
    width: 15.5rem;
    border-color: rgb(21, 75, 252);
  }
  button {
    font-family: inherit;
    font-size: inherit;
  }
  details {
    height: var(--collapsed);
    overflow: hidden;
    transition: height 300ms cubic-bezier(0.4, 0.01, 0.165, 0.99);
  }
  details[open] {
    height: var(--expanded);
  }
  button,
  summary {
    background-color: var(--bgc);
    border: 0;
    color: var(--c, inherit);
    list-style-type: none;
    margin: 0.3rem 0;
    outline: none;
    padding-bottom: 0.3rem;
    padding-top: 0.3rem;
    padding-inline-end: 0.3rem;
    padding-inline-start: 1rem;
    user-select: none;
  }
  summary::marker {
    display: none;
  }
  summary::-webkit-details-marker {
    display: none;
  }
  
  /* 4 States of summary */
  button,
  summary {
    --bgc: hsl(195, 10%, 90%);
  }
  [open] > summary {
    --bgc: hsl(0, 0%, 0%);
    --c: hsl(195, 10%, 92%);
  }
  button:focus,
  summary:focus {
    --bgc: hsl(204, 14%, 93%);
  }
  [open] > summary:focus {
    --bgc: hsl(216, 74%, 54%);
    --c: hsl(195, 10%, 99%);
  }
  [open] > summary:focus > [data-css-icon*="fill"],
  [open] > summary > [data-css-icon*="fill"] {
    --bgc: hsl(0, 0%, 97%);
    --c: hsl(0, 0%, 100%);
  }
  summary + * {
    color: #777;
    line-height: 1.1;
    padding: 0.5rem;
    background-color: aliceblue;
  }
  
  @keyframes dots {
    0% {
      background-color: var(--c);
    }
    50%,
    100% {
      background-color: var(--dots-bgc);
    }
  }
  
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(1turn);
    }
  }

  .kc_fab_main_btn {
    background-color: #b6261b;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: #b6261b;
    border: none;
    outline: none;
    color: #FFF;
    font-size: 36px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    transition: .3s;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  
  .kc_fab_main_btn:focus {
    transform: scale(1.1);
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }