.content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    padding: 0 30px;
    h1 {
      margin-top: 60px;
      text-align: center;
      color: #0065EE;
    }
    p {
      margin: 0 auto 30px;
      width: 700px;
      line-height: 1.8;
      text-align: center;
      @media (max-width: 767px) {
        width: 100%;
      }
    }
  }
  
 
  .contentDemo {
    &:empty {
      margin: auto;
      width: 500px;
      height: 600px; /* change height to see repeat-y behavior */
      background-image: radial-gradient(
          circle 50px at 50px 50px,
          lightgray 99%,
          transparent 0
        ),
        linear-gradient(
          100deg,
          rgba(255, 255, 255, 0),
          rgba(255, 255, 255, 0.5) 50%,
          rgba(255, 255, 255, 0) 80%
        ),
        linear-gradient(lightgray 20px, transparent 0),
        linear-gradient(lightgray 20px, transparent 0),
        linear-gradient(lightgray 20px, transparent 0),
        linear-gradient(lightgray 20px, transparent 0);
      background-repeat: repeat-y;
      background-size: 100px 200px, /* circle */ 50px 200px,
        /* highlight */ 150px 200px, 350px 200px, 300px 200px, 250px 200px;
      background-position: 0 0, /* circle */ 0 0, /* highlight */ 120px 0,
        120px 40px, 120px 80px, 120px 120px;
    }
  }
  

  .fixedSidebar {
 
    &.fixedSidebarRight {
      position: fixed;
      z-index: 99;
      top: 30%;
      right: 0;
      transform: translateY(-50%);
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      row-gap: 15px;
      width: 90px;
      background-color: #FFF;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      border: 1px solid #EEE;
      box-shadow: 0 0 #0000, 0 0 #0000, 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
      
      transition: .25s;
        &.active {
          right: -90px;
      }
      .sidebarItem {
        position: relative;
        display: flex;
        flex-flow: column;
        align-items: center;
        width: 100%;
        padding: 10px 5px;
        border-bottom: 1px solid #EEE;
        text-decoration: none;
        transition: 0.25s;
        &:last-child {
          border-bottom: 0;
        }
        &:nth-last-child(2) {
          border-bottom: 0;
        }
        &:hover {
          svg {
            fill: #0065ee;
          }
        }
        svg {
          width: 30px;
          height: 30px;
          fill: #333;
          transition: .25s;
        }
      }
      .buttonTrigger {
        position: absolute;
        top: 50%;
        right: calc(100% + -1px);
        transform: translateY(-50%);
        padding: 20px 2px;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        border-top: 1px solid #FAFAFA;
        border-bottom: 1px solid #FAFAFA;
        border-left: 1px solid #fAFAFA;
        background-color: #ffffff;
        transition: .25s;
        svg {
          width: 20px;
          height: 20px;
          fill: #333;
          transform: rotate(180deg);
          transition: .25s;
        }
        &.active {
          background-color: #0065ee;
          svg {
            fill: #FFF;
            transform: rotate(0);
          }
        }
      }
      [data-tooltip] {
        &::after {
          content: attr(data-tooltip);
          display: block;
          padding: 7px 5px 0 5px;
          color: #333;
          text-align: center;
          font-size: 12px;
          line-height: 1.4;
          border-radius: 4px;
          text-decoration: none;
          transition: all 0.2s ease-in-out;
        }
        &:hover::after {
          opacity: 1;
          visibility: visible;
        }
      }
    }
    
    &.fixedSidebarLeft {
      
        position: fixed;
        z-index: 99;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        display: flex
;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 54px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        background-color: #FFF;
        border: 1px solid #EEE;
        box-shadow: 0 0 #0000, 0 0 #0000, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
        transition: 0.25s;
      &.active {
        left: -75px;
      }
      .sidebarItem {
        position: relative;
        z-index: 10;
        display: inline-block;
        text-align: center;
        width: 100%;
        padding: 15px 5px;
        transition: 0.25s;
        &:hover {
          svg {
            fill: #0065EE;
          }
        }
        svg {
          width: 30px;
          height: 30px;
          fill: #555;
        }
      }
      .buttonTrigger {
        display: inline-block;
        text-align: center;
        width: 100%;
        padding: 20px 5px;
        &:hover {
          svg {
            fill: #0065EE;
          }
        }
        svg {
          width: 20px;
          height: 20px;
          fill: #333;
          transform: rotate(0deg);
          transition: 0.25s;
        }
        &.active {
          position: absolute;
          left: 100%;
          bottom: 0;
          width: auto;
          background-color: #0065EE;
          border-top-right-radius: 10px;
          border-bottom-right-radius: 10px;
          &:before {
            content: "Show";
          }
          svg {
            width: 20px;
            height: 20px;
            fill: #FFF;
            transform: rotate(180deg);
          }
        }
      }
      [data-tooltip] {
        &::before {
          top: 50%;
          left: 100%;
          transform: translateY(-50%);
        }
        &:hover::before {
          left: calc(100% + 10px);
        }
      }
      [data-tooltip] {
        position: relative;
        z-index: 9;
        &::before {
          position: absolute;
          content: attr(data-tooltip);
          display: block;
          padding: 7px;
          text-align: center;
          font-size: 0.8em;
          white-space: nowrap;
          color: #FFF;
          border-radius: 5px;
          background: #0065EE;
          opacity: 0;
          visibility: hidden;
          cursor: default;
          pointer-events: none;
          transition: all 0.2s ease-in-out;
        }
        &:hover::before {
          opacity: 1;
          visibility: visible;
        }
      }
    }
  }