.layout{

  .header{
    height: 60px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    inset: 0;
    background-color: $page;
    z-index: 1;

    .notify-circle{
      width: 6px;
      height: 6px;
      border-radius: 3px;
      background-color: $red;
    }
  }

  .header-block{
    height: 60px;
    &::before{
      content: " ";
    }
  }

  .header-bg-color{
    color: $white;
    background-image: url('../assets/header-bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .pages{
    height: 100%;
    width: 100%;
    overflow: hidden;
    overflow-y: scroll;
    &::-webkit-scrollbar{display: none;}
  }

  .tabbar{
    width: 370px;
    height: 65px;
    position: fixed;
    left: 30px;
    background-color: $white;
    bottom: 20px;
    box-shadow: 8px 8px 20px 0px rgba(0, 0, 0, 0.1);
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:  0px 40px;

    .img{
      @include img-size(24px,24px)
    }

    .circle{
      width: 6px;
      height: 6px;
      border-radius: 3px;
      background-color: $primary;
    }
  }

  .tabbar-block{
    display: block;
    height: 100px;
    width: 100%;
  }
}

.rv-popup::-webkit-scrollbar{
  display: none;
}

.notify-box{
  padding: 10px 20px;
  border: 1px solid #eeeeee;
  box-shadow: 8px 8px 20px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px;

  .img{
    @include img-size(32px,32px)
  }
}

.rv-popup{
  position: relative;

  .close{
    position: absolute;
    top: 49%;
    left: 0;
  }
}

.connect-button{

  .button{
    margin: 0;
    padding: 0;
    width: 126px;
    height: 32px;
    border-radius: 5px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .rv-popover__content{
    width: 126px;
  }

}