// 去除ul li的默认样式
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

::-webkit-scrollbar {
  width: 3px;
  height: 4px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
  border-radius: 3px;
  background: #918783;
}

::-webkit-scrollbar-thumb{
  border-radius: 3px;
  background: @color-master;
}

@color-master: #44667c;
@color-second: #383A3F;
@color-third:#ebe2db;
@color-fourth:#a5a5a5;

#app{
  font-family: 'Noto Sans TC', "微軟正黑體";

  --el-color-primary: #37455a;
  --el-color-primary-light-3: #3c506c;
  --el-color-primary-light-5: #44667c;
  --el-color-primary-light-7: #3b6e84;
  --el-color-primary-light-8: #397697;
  --el-color-primary-light-9: #1f77a7;
  
  //leftMmenu start =========
  .el-menu{
    background-color: @color-third;
    box-shadow: -4px 0 4px rgba(#5f554d, .1) inset;
    .logo{
      background-color:  @color-second;
    }
    .el-menu-item{
      color: #5f554d;
      font-weight: bold;
      border-top: 1px #dfd8d0 solid;
      .el-icon{
        color: #d39982;
      }      
      &:hover{
        background-color: #faf7f5;
      }
      &.is-active{
        color: #5f554d;
        border-right: 6px @color-master solid;
        background-color: #faf7f5;
        .el-icon{
          color: @color-master;
        }
      }
    }

    .el-sub-menu{
      color: #5f554d;
      font-weight: bold;
      border-top: 1px #dfd8d0 solid;
      &:last-child{
        border-bottom: 1px #dfd8d0 solid;
      }
      .el-sub-menu__title{
        color: #5f554d !important;
        background-color: transparent !important;
        .el-icon{
          color: #d39982;
        }
      }
      .el-menu-item{
        font-weight: bold;
        background-color: #d9d1ca;
        border-top: 1px #bfb8b0 solid;        
        &.is-active{
          color: #5f554d;
          background-color: #f2f0ee;
        }
      }
      &.is-active{
        border-right: 2px @color-master solid;
      }
    }

    
  }
  //leftMmenu end =========


  .el-container {
    height: 100%;
    .admin-header{
      background-color:  @color-second;
      border-left: 1px #333 solid;
    }
    .el-main {
      padding: 0;
      background-color: #faf7f5;
      color: #333;
      height: calc(100vh - 80px);
      .tabs-block{
        width: 100%;
        // overflow: hidden;
        // overflow-x: auto;
        .el-tabs{
          background-color: #505050; 
          .el-tabs__nav-prev,.el-tabs__nav-next{
            background-color: #faf7f5;
          }         
          .el-tabs__nav{
            border-bottom: 1px transparent solid;          
            border-radius: 0;
            background-color: transparent;
            .el-tabs__item{
              display: flex;
              justify-content: space-between;
              align-items: center;
              // width:150px;
              padding: 0 35px 0 35px;
              color:  @color-second;
              border-bottom: 1px #dfd8d0 solid;
              background-color: #faf7f5;
              transition: all .3s;
              opacity: .9;
              &:nth-child(1){
                width:auto;
                padding: 0 17px;
                .el-icon{
                  position: relative;
                  top:initial;
                  right:initial;
                  color:  @color-second !important;  
                }
              }
              &.is-active{
                border-bottom: none;
                background: linear-gradient(#faf7f5, #faf7f5 );
                opacity: 1;
              }
              &:hover{
                .el-icon{
                  color: #97989c;  
                }
              }
              .el-icon:nth-child(1){
                position: absolute;
                left:10px;
                top:12px;
                color: #dfd8d0;               
              }
              .el-icon:nth-child(2){
                position: absolute;
                right:10px;
                top:12px;
                color: #dfd8d0;               
              }
            }
          }
        }   
        .el-dropdown{
          padding: 0 15px;
          // display: none;          
          .el-dropdown-link{
            color:  @color-second;
            outline: none;
          }
        }
      }

      .main {
        padding: 10px;
        .el-page-header{
          padding: 10px;
        }
        .breadcrumb-section {
            display: flex;
            align-items: center;            
            margin: 0 0 10px;
            line-height: 1.2;
            font-weight: 500;
            >div:nth-child(1){
              padding: 10px 0 10px 5px;
              flex: 1;
            }
            .el-breadcrumb {
                font-size: 14px;
                color: #606266;
                min-width: 180px;      
                .el-breadcrumb__inner {
                    display: inline-block;
                    vertical-align: middle;      
                    .el-breadcrumb__separator {
                        color: #c0c4cc;
                    }
                }
            }
        }
      }
    }

    .el-header {
      --el-header-height: auto;
      --el-header-padding: 0;
      background-color: #ffffff;
      height: 50px;
    }
  
    .el-footer{
      height: 30px;
      font-size: 12px;
      line-height: 30px;
      text-align: center;
      color: #666;
      background-color: #faf7f5;
    }

    .el-card{
      margin-bottom: 15px;
      border: 1px @color-master solid;
      .el-card__header{
        position: relative;
        font-size: 16px;
        font-weight: bold;
        padding: 12px 20px;
        // background-color: rgb(255, 206, 122);  
        box-shadow: 0 4px 4px #f0ebe9;
        z-index: 10;
      }
    }    

    .el-collapse{
      border: none;
      padding: 0 15px;
      margin-bottom: 20px;
      .el-collapse-item{
        &.is-active .el-collapse-item__header{
          color: @color-master;
        }
        
      }
    }
  }
  
  .pagination-block{
    display: flex;
    justify-content: flex-end;
    padding: 6px 5px;
    background-color: #f3f3f3;
  }

  .el-aside {
    background-color: #545c64;
    color: #fff;
  }

  .el-table{
    .el-table__cell.el-table__expanded-cell{
      padding-left: 50px;
      background-color: #edeff1;
    }
    thead th{
      color: #333;
      font-weight: bold;
    }
  } 

  
  
  // 隱藏滾動條, 但是滾動條還是可以使用
  .side-scroll {
    scrollbar-width: none;
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .el-drawer,.el-dialog{
    // width:600px;
    // max-width: 90%;
    background-color: #faf7f5;
    .el-drawer__header,.el-dialog__header{
      background-color: @color-master;
      margin: 0;
      padding: 10px 20px;
      *{
        color: #faf7f5;
      }
      .el-drawer__title{
        font-size: 18px;
      }
      .el-dialog__headerbtn{
        width: 50px;
        height: 50px;
        top: 0;
      }
    }
    .el-tabs__content{
      padding-top: 10px;
      .el-tabs{
        background-color: #505050;               
        .el-tabs__nav{
          border-bottom: 1px transparent solid;          
          border-radius: 0;
          background-color: transparent;
          .el-tabs__item{
            display: flex;
            justify-content: space-between;
            align-items: center;
            // width:150px;
            padding: 0 45px 0 15px;
            color:  @color-second;
            border-bottom: 1px #dfd8d0 solid;
            background-color: #faf7f5;
            transition: all .3s;
            opacity: .9;
            &:nth-child(1){
              width:auto;
              padding: 0 15px;
              .el-icon{
                position: relative;
                top:initial;
                right:initial;
                color:  @color-second !important;  
              }
            }
            &.is-active{
              border-bottom: none;
              background: linear-gradient(#faf7f5, #faf7f5 );
              opacity: 1;
            }
            &:hover{
              .el-icon{
                color: #97989c;  
              }
            }
            .el-icon{
              position: absolute;
              right:10px;
              top:12px;
              color: #dfd8d0;               
            }
          }
        }
      }   


    }
  }
}



.el-menu--popup{
  padding: 0 !important;
  background-color: #ebe2db !important;
  .el-menu-item{
    color: #5f554d;
    font-weight: bold;
    border-top: 1px #dfd8d0 solid;
    .el-icon{
      color: #d39982;
    }      
    &:hover{
      background-color: #faf7f5;
    }
    &.is-active{
      color: #5f554d;
      border-right: 6px @color-master solid;
      background-color: #faf7f5 !important;
      .el-icon{
        color: @color-master;
      }
    }
  }
}

@media only screen and (max-width: 768px) {
  .el-drawer {
      width: 100% !important;
  }

  .el-input,.el-button{
    margin-bottom: 10px;
  }
}




























