html, body {
  width: 100%;
  height: 100%; }

body {
  min-height: 100vh;
  font-family: Roboto, Arial;
  color: #ADAFB6;
  background: #171C28;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
      justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
      align-items: center; }

.btn-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
      align-items: center; }
  .btn-list > li {
    margin: 0 11px; }
    .btn-list > li > svg {
      width: 14px;
      height: 14px;
      display: block;
      fill: #2F3545;
      -webkit-transition: opacity .3s ease;
      transition: opacity .3s ease; }

.fileAdd {
  width: 32px;
  height: 24px;
  background: #5628EE;
  border-radius: 0 3px 3px 3px;
  position: relative;
  margin: 2px 0 0 0;
  -webkit-perspective: 160px;
  perspective: 160px;
  cursor: pointer;
  text-align: center; }
  .fileAdd:before {
    content: '';
    border-radius: 2px 2px 0 0;
    background: inherit;
    height: 2px;
    width: 20px;
    display: block;
    position: absolute;
    top: -2px;
    left: 0; }
  .fileAdd ul {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-perspective: 300px;
    perspective: 300px; }
    .fileAdd ul li {
      --translateY: 0;
      --translateX: 0;
      --scale: .92;
      bottom: 0;
      left: 6px;
      position: absolute;
      width: 20px;
      height: 26px;
      -webkit-transition: -webkit-transform .45s ease;
      transition: -webkit-transform .45s ease;
      transition: transform .45s ease;
      transition: transform .45s ease, -webkit-transform .45s ease;
      -webkit-transform: translateY(var(--translateY)) translateX(var(--translateX)) scaleX(var(--scale));
      transform: translateY(var(--translateY)) translateX(var(--translateX)) scaleX(var(--scale)); }
      .fileAdd ul li.word:before {
        background: #8969f3; }
      .fileAdd ul li.word:after {
        background: #DAEDFE;
        color: #46A7FE;
        content: 'W'; }
      .fileAdd ul li.powerpoint:before {
        background: #bba9f8; }
      .fileAdd ul li.powerpoint:after {
        background: #FDE5E1;
        color: #F57F65;
        content: 'P'; }
      .fileAdd ul li.excel:before {
        background: #fff; }
      .fileAdd ul li.excel:after {
        background: #D4F5DF;
        color: #2ACF62;
        content: 'E'; }
      .fileAdd ul li:before, .fileAdd ul li:after {
        --rotateY: 0deg;
        --rotateZ: 90deg;
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 2px;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transition: -webkit-transform .4s ease;
        transition: -webkit-transform .4s ease;
        transition: transform .4s ease;
        transition: transform .4s ease, -webkit-transform .4s ease;
        -webkit-transform: rotateY(var(--rotateY)) rotateZ(var(--rotateZ));
        transform: rotateY(var(--rotateY)) rotateZ(var(--rotateZ)); }
      .fileAdd ul li::after {
        --rotateY: -180deg;
        z-index: 1;
        text-align: center;
        font-size: 10px;
        font-weight: 600;
        color: #fff;
        line-height: 26px;
        font-family: 'Mukta Malar'; }
  .fileAdd div {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 20px;
    background: #8C6FF0;
    border-radius: 2px 2px 3px 3px;
    z-index: 2;
    -webkit-transition: -webkit-transform .25s ease;
    transition: -webkit-transform .25s ease;
    transition: transform .25s ease;
    transition: transform .25s ease, -webkit-transform .25s ease;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%; }
  .fileAdd .icon::before, .fileAdd .icon::after {
    content: '';
    width: 12px;
    height: 2px;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -6px;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out; }
  .fileAdd .icon::before {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  .fileAdd .icon::after {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg); }
  .fileAdd.open .icon::before {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg); }
  .fileAdd.open .icon::after {
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg); }
  .fileAdd.open ul li {
    --scale: 1; }
    .fileAdd.open ul li::before {
      --rotateY: 180deg;
      --rotateZ: 0deg; }
    .fileAdd.open ul li:after {
      --rotateY: 0deg;
      --rotateZ: 0deg; }
    .fileAdd.open ul li.word {
      --translateY: -32px;
      --translateX: -36px; }
    .fileAdd.open ul li.powerpoint {
      --translateY: -44px;
      --translateX: 0px; }
    .fileAdd.open ul li.excel {
      --translateY: -32px;
      --translateX: 36px; }