/*@import*/

:root{
    /*--barwidth: 300px;
    --barSwidth: 65px;*/
    /*--insideBarWidth:280px;*/
    --barwidth: calc(var(--tipset) * 2.5 + var(--tipset) * 2.5);
    --barSwidth: calc(var(--tipset) * 0.542 + var(--tipset) * 0.542);
    --insideBarWidth: calc(var(--barwidth) + 0.6rem);
    
}

.sidebar{
    position:fixed;
    top:0;
    left:0;
    height:100%;
    width:var(--barwidth);
    /*background:#352415;*//*深色版*/
    background:#633f1d;/*淺色版*/
    z-index:100;
    transition:all .5s ease;
}
.sidebar.barclose{
    width:var(--barSwidth);
}
.sidebar .logo-details{
    /*height:60px;*/
    padding-top: 20px;
    width:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sidebar .logo-details i{
    /*font-size:30px;*/
    color:#fff;
    width: 30%;
    /*height:100px;*/
    /*min-width:200px;*/
    text-align:center;
}
.sidebar.barclose .logo-details i{
    /*font-size:30px;*/
    color:#fff;
    height:50px;
    min-width:var(--barSwidth);
    text-align:center;
    line-height:50px;
    padding: 5px;
}
.sidebar .logo-details .logo_name{
    /*font-size:22px;font-weight: 600;*/
    color: #fff;
    width: 100%;
    text-align: center;
    transition: .3s ease;
    transition-delay: .1s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sidebar.barclose .logo-details .logo_name{
    transition-delay: 0s;
    opacity: 0;
    pointer-events: none;
    display: none;
    width: 1%;
}
.logo_name img{
    width: calc(100% - 1.45rem);
}
.sidebar .nav-links{
    /*height:100%;*/
    padding: 20px 0 80px 0;
    overflow: auto;
    position: relative;
    /*background-color: #352516;*//*深色版*/
    background-color: #633f1d;/*淺色版*/
    z-index: 500;
}
.sidebar.barclose .nav-links{
    overflow:visible;
}
.sidebar .nav-links::-webkit-scrollbar{
    display:none;
}
.sidebar .nav-links li{
    position:relative;
    list-style:none;
    transition:all .4s ease;
}
.sidebar .nav-links li:hover{
    /*background:#5E4630;*//*深色版*/
    background:#815E3B;/*淺色版*/
}
.sidebar .nav-links .showMenu.active{
    /*background:#5E4630;*//*深色版*/
    background:#815E3B;/*淺色版*/
}
.sidebar .nav-links li .iocn-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.sidebar.barclose .nav-links li .iocn-link{
    display:block
}
.sidebar .nav-links li i{
    /*height:50px;*/
    height: calc(2.6rem - 2px);
    min-width:var(--barSwidth);
    text-align:center;
    /*line-height:50px;*/
    color:#fff;
    font-size:1rem;
    cursor:pointer;
    transition:all .3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sidebar .nav-links li.showMenu i.arrow{
    transform:rotate(-180deg);
}
.sidebar.barclose .nav-links i.arrow{
    display:none;
}
.sidebar .nav-links li a{
    display:flex;
    align-items:center;
    text-decoration:none;
    white-space: nowrap;
    /*min-width: 200px;*/
}
.sidebar .nav-links li a .link_name{
    font-size:1rem;
    font-weight:400;
    color:#fff;
    transition:all .4s ease;
}
.sidebar.barclose .nav-links li a .link_name{
    opacity:0;
    pointer-events:none;
}
.sidebar .nav-links li .sub-menu{
    /*padding:10px 25px;*/
    margin-top:0;
    /*background:#2A2017;*//*深色版*/
    background:#55310e;/*淺色版*/
    display:none;
}
.sub-menu{
    transition:all .4s ease;
}
    
.sidebar .nav-links li.showMenu .sub-menu{
    display:block;
    border-bottom: 1px solid #65513E;
}
.sidebar .nav-links li .sub-menu a{
    color:#fff;
    font-size:0.9rem;
    padding:12px 5px 12px 18px;
    white-space:nowrap;
    opacity:0.7;
    transition:all .3s ease;
    justify-content: space-between;
}
.sidebar .nav-links li .sub-menu a:hover{
    opacity:1;
}
.sidebar .nav-links li .sub-menu i {
    height: 20px;
    min-width: 15px;
    text-align: center;
    line-height: 20px;
}
.sidebar.barclose .nav-links li .sub-menu{
    position:absolute;
    left:100%;
    top:-10px;
    z-index: 300;
    margin-top:0;
    /*padding:10px 20px;*/
    border-radius:0 6px 6px 0;
    opacity:0;display:block;
    pointer-events:none;
    transition:0s;
    overflow: hidden;
}
.sidebar.barclose .nav-links li:hover .sub-menu{
    top:0;
    opacity:1;
    pointer-events:auto;
    transition:all .4s ease
}
.sidebar .nav-links li .sub-menu .link_name{
    display:none;
}
.sidebar.barclose .nav-links li .sub-menu .link_name{
    font-size: 1rem;
    opacity:1;
    padding: 13px;
    display:block;
}
.sidebar .nav-links li .sub-menu.blank{
    opacity:1;
    pointer-events:auto;
    /*padding:3px 20px 6px 16px;*/
    opacity:0;
    pointer-events:none;
}
.sidebar .nav-links li:hover .sub-menu.blank{
    top:50%;
    transform:translateY(-50%);
}
.sidebar .profile-details{
    position:fixed;
    bottom:0;
    width:var(--barwidth);
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:#1d1b31;
    padding:6px 0;
    transition:all .5s ease;
}
.sidebar.barclose .profile-details{
    background:0;
}
.sidebar.barclose .profile-details{
    width:var(--barSwidth);
}
.sidebar .profile-details .profile-content{
    display:flex;
    align-items:center;
}
.sidebar .profile-details img{
    height:52px;
    width:52px;
    object-fit:cover;
    border-radius:16px;
    margin:0 14px 0 12px;
    background:#1d1b31;
    transition:all .5s ease;
}
.sidebar.barclose .profile-details img{
    padding:10px;
}
.sidebar .profile-details .profile_name,
.sidebar .profile-details .job{
    color:#fff;
    font-size:18px;
    font-weight:500;
    white-space:nowrap;
}
.sidebar.barclose .profile-details i,
.sidebar.barclose .profile-details .profile_name,
.sidebar.barclose .profile-details .job{
    display:none;
}
.sidebar .profile-details .job{
    font-size:12px;
}
.home-section{
    position:relative;
    background:#FBF6F1;
    height:100vh;
    left:var(--barwidth);
    width:calc(100% - var(--barwidth));
    transition:all .5s ease;
    overflow: hidden;
}
.sidebar.barclose ~ .home-section{
    left:var(--barSwidth);
    width:calc(100% - var(--barSwidth));
}

.home-section .home-content{
    height:45px;
    display:flex;
    align-items:center;
}
.home-section .home-content .bx-menu,
.home-section .home-content .text{
    color:#352415;
    font-size:32px;
}
.home-section .home-content .bx-menu{
    margin:0 15px;
    cursor:pointer;
}
.home-section .home-content .text{
    font-size:26px;
    font-weight:600;
}

/*.sidebar div,.sidebar ul,.sidebar li,.sidebar a{
    transition: all .3s linear;
}*/
.insideBar{
    border-bottom: 1px solid #65513E;
    /*padding: 0 10px 0 20px;*/
}
.insideBar:last-child{
    border-bottom: 1px solid #352415;
}
.insideBar a{
    /*width: auto;*/
}
.insideBar.active a{
    opacity: 1 !important;
}
.insideBartag{
    
    width: var(--insideBarWidth);
}
.sidebar .nav-links .insideBar:hover{
    background: none;
}
.secondary{
    width: auto;
    display: none;
    padding-left: 30px;
    padding-right: 5px;
    padding-bottom: 15px;
    /*min-width: var(--insideBarWidth);*/
    min-width: calc(var(--insideBarWidth) - 1rem);
    /*-webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;*/
}
.sidebar .nav-links li .sub-menu .secondary li a{
    padding: 5px 0;
    font-size: 0.8rem;
    justify-content: flex-start;
    /*color: #b19f8b;*//*深色版*/
    color: #dbc7b1;/*淺色版*/
    white-space: break-spaces;
}
.sidebar .nav-links li .sub-menu .secondary li.active a{
    color: #ffffff;
}
.sidebar .nav-links li .sub-menu .secondary li:hover{
    background: none;
}
.sidebar .nav-links li .sub-menu .secondary li:hover a{
    color: #ffffff;
}
.arrowRot {
    transform: rotate(0deg);
    transition: transform 0.4s linear;
    /*-webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);*/
}


.TopBlock{
    min-height: var(--topBlock);
    /*z-index: 500;
    position: relative;*/
}
.infoBlock {
    overflow: auto;
    height: calc(100vh - var(--topBlock));
}
.sidebar.barclose .footer {
    opacity: 0;
    pointer-events: none;
    /*display: none;
    /*width: 1%;*/
        
}
.footer{
    min-width: var(--barwidth);
    transition: .3s ease;
    transition-delay: .1s;
}


/*--彩色標籤--*/

.ColorBarTags_L{
    width: 36px;
    /*height: 18px;*/
    height:calc(0.9rem + 1px);
    /*line-height: 1;*/
    margin-right: 10px;
    font-size: 0.8rem;/*16px*/
    font-weight: bold;
    background-color: #9C764C;
    border-radius: 5px;
    text-align: center;
    display: inline-block;
    /*padding: 0 10px;*/
}
.ColorBarTags_M{
    width: 42px;
    /*height: 16px;*/
    height:calc(0.8rem + 1px);
    /*line-height: 1;*/
    margin-right: 5px;
    font-size: 0.7rem;/*16px*/
    font-weight: bold;
    background-color: #9C764C;
    border-radius: 5px;
    text-align: center;
    display: inline-block;
    flex: none;
    color: #ffffff;
    /*padding: 0 10px;*/
}
.secondary .active .ColorBarTags_M:before{
    content: "\f0da";
    font: normal normal normal 18px / 1 FontAwesome;
    position: absolute;
    left: -12px;
}
.BarTagsColor_Green .ColorBarTags_L{
    background-color: #619E12;
}
.BarTagsColor_Green .ColorBarTags_M{
    background-color: #619E12;
}
.BarTagsColor_Green .ColorBarTags_M:before{
    color: #99B92E;
}
.BarTagsColor_Blue .ColorBarTags_L{
    background-color: #4778BA;
}
.BarTagsColor_Blue .ColorBarTags_M{
    background-color: #4778BA;
}
.BarTagsColor_Blue .ColorBarTags_M:before{
    color: #598CD1;
}
.BarTagsColor_GreenBlue .ColorBarTags_L{
    background-color: #269D84;
}
.BarTagsColor_GreenBlue .ColorBarTags_M{
    background-color: #269D84;
}
.BarTagsColor_GreenBlue .ColorBarTags_M:before{
    color: #269D84;
}
.BarTagsColor_Pink .ColorBarTags_L{
    background-color: #BA47B6;
}
.BarTagsColor_Pink .ColorBarTags_M{
    background-color: #BA47B6;
}
.BarTagsColor_Pink .ColorBarTags_M:before{
    color: #BA47B6;
}
.BarTagsColor_Purple .ColorBarTags_L{
    background-color: #5247BA;
}
.BarTagsColor_Purple .ColorBarTags_M{
    background-color: #5247BA;
}
.BarTagsColor_Purple .ColorBarTags_M:before{
    color: #5247BA;
}
/*B3原水監測*/
.BarTagsColor_Orange .ColorBarTags_L{
    background-color: #D4661D;
}
.BarTagsColor_Orange .ColorBarTags_M{
    background-color: #D4661D;
}
.BarTagsColor_Orange .ColorBarTags_M:before{
    color: #D4661D;
}
/*B4污泥監測*/
.BarTagsColor_RedPink .ColorBarTags_L{
    background-color: #DE4962;
}
.BarTagsColor_RedPink .ColorBarTags_M{
    background-color: #DE4962;
}
.BarTagsColor_RedPink .ColorBarTags_M:before{
    color: #DE4962;
}