.dev{
  opacity: 0;
  &.dev-visible{
    opacity: 1;
  }
  transition: all .3s ease-in-out;
  position: fixed;
  z-index: 99999;
  left: $size-small;
  bottom: $size-small;
  width: 60px;
  height: 60px;
  border-radius: 10px;
  padding: $size-small;
  background-color: $theme-color-1;
  display: flex;
  justify-content: center;
  align-items: center;
  &.active{
    width: 150px;
    height: 250px;
  }
  svg{
    height: 40px;
    color: $white;
    cursor: pointer;
    transition: all .3s ease-in-out;
    &:hover{
      color: $primary-color;
      transition: all .3s ease-in-out;
    }
  }
  .dev-inner{
    color: $white;
    height: 100%;
    width: 100%;
    padding-top: $size-medium;
    padding-bottom: $size-small;
    .btn{
      display: block;
      width: 100%;
      padding: $size-small 0;
      text-align: center;
      border-radius: 7px;
      svg{
        height: 25px;
        //color: $primary-color;
      }
      &:hover{
        svg{
          color: $white;
          color: $primary-color;
        }
      }
      &.active{
        svg{
          color: $white
        }
      }
    }
    position: relative;
    .text-muted{
      color: $primary-color !important;
      font-weight: bold;
      margin-top: 5px;
      margin-bottom: 3px !important;
    }
  }
  .close-icon{
    position: absolute;
    top: 0;
    right: 0;
    svg{
      height: 15px;
    }
    cursor: pointer;
    &:hover{
      svg{
        color: $primary-color
      }
    }
  }
}