.database-connection-layout{
  width: 100%;
  height: 100%;
  background-color: #f7f8fa;
  .title{
    background-color: #fff;
    border-bottom: 1px solid #e8eaed;
    .title-item{
      height: 39px;
      line-height: 39px;
      padding-left: 15px;
      padding-right: 15px;
      text-align: center;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      position: relative;
      flex-shrink: 0;
      font-weight: 700;
      cursor: pointer;
    }
  }
  .linkset{
    margin: 10px;
    bottom: 0px;
    background-color: #ffffff;
  }
  .linkStatus{
    margin: 10px;
    top: 40px;
    background-color: #ffffff;
  }
}

.database-left{
  border-right: 1px solid #e8eaed;
  .select-group{
    border-bottom: 1px solid #e8eaed;
    .select{
      margin: 10px;
      .database-link-items{
        padding-left:10px;
        .link-item{
          border-top: 1px solid #e8eaed;
        }
      }
    }
  }
  .left-list{
    margin: 10px;
    .left-item{
      height: 24px;
      line-height: 24px;
      cursor: pointer;
      &:hover{
        background-color: rgba(54,133,242,.05);
        .icons{
          display: inline;
        }
      }
      .icons{
        float: right !important;
        display: none;
        .b-font{
          font-size: 16px;
        }
      }
    }
    .left-item-selected{
      background-color: rgba(54,133,242,.05);
      .bi-text{
        color: #3685f2;
      }
    }
  }
}

.link-font .b-font:before {
  content: "\e759";
  color: inherit;
}
.link-text-font .b-font:before {
  content: "\e763";
  color: inherit;
}
.info-font .b-font:before {
  content: "\e63c";
  color: inherit;
}
.delete-font .b-font:before {
  content: "\e6c4";
  color: inherit;
}