#portalTree {
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: var(--font-default-color);
}

.search-checkBox,
.iconBar img,
.condensation-text-class,
.search-checkBox,
.userBar,
.uic-tree .curosr-pointer,
.searchBolck-botton-class,
.blazor-portal-tab-prefix,
.condensation-button,
.item-area {
    cursor: pointer;
}

.dev-portal-treetabparent {
    width: initial;
    height: calc(100% - 69px);
    /*扣除logoImg高度*/
    color: #393E46;
    scrollbar-width: auto;
}

.dev-portal-treetabparent .blazor-tree-container {
    overflow: hidden;
    height: 100%;
}

.dev-portal-treetabparent .blazor-tree-container>.blazor-tree {
    scrollbar-width: auto;
    max-height: 95%;
}

/* tabs */
#portalTab .blazor-tabs-header {
    border-bottom: 1px solid #eeeeee;
    box-sizing: border-box;
}

#portalTab .blazor-tabs-tag {
    color: #929AAB;
    border-bottom: 2px solid transition;
    transition: 0.3s ease;
}

#portalTab .blazor-tabs-tag:hover {
    color: #393E46;
}

#portalTab .blazor-tabs-active {
    color: #306ca1;
    border-bottom: 2px solid #306ca1;
}

/*
    This file is to show how CSS and other static resources (such as images) can be
    used from a library project/package.
*/

/*login*/
body {
    background: #ffffff;
}

.dev-portal-logoImg {
    display: block;
    padding: 0px 12px;
    box-sizing: border-box;
    position: sticky;
    top: 0px;
    box-shadow: rgba(149, 157, 165, 0.3) 0px 0px 6px;
}

.dev-portal-logoImg>td:first-child {
    width: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

}

.logoImage {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
}

.logoImage img {
    height: 90%;
}

.userBarandIconBar {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

.userBarandIconBar .fullScreen {
    margin-left: 6px;
}

.iconBar {}

.iconBar-icons {
    display: inline-block;
    position: relative;
    margin: 0px 2px;
}

.dev-doDoListCount-pc {
  position: relative;
}

  .dev-doDoListCount-pc div {
    min-width: 12px;
    min-height: 12px;
    background-color: #e41019;
    border-radius: 50%;
    color: white;
    font-size: 8px;
    padding: 1px;
    display: inline;
    position: absolute;
    top: -30px;
    left: 12px;
    text-align: center;
  }

.iconBar img {
    padding: 4px;
    border-radius: 3px;
    vertical-align: middle;
    border: 1px solid transparent;
    margin: 0px 1px;
}

.iconBar img:hover {
    background-color: #EEEEEE;
    border: 1px solid #306ca1;
}

.userBar {
    display: block;
    padding: 0 10px;
}

.userBar-box {
    text-align: center;
}

.userBar-box img {
    border-radius: 50%;
    border: 1px solid #393E46;
}

.userBar-box p {
    font-size: var(--font-size-xs);
    margin: 0px;
}

.userContext-box {
    position: absolute;
    display: block;
    right: 15px;
    background: #fff;
    box-shadow: 0 0 2px #bfbfbf9c;
    padding: 10px;
    width: 130px;
    margin-top: 5px;
    z-index: 100;
}

.userContext-Open {
    display: block;
}

.userContext-Close {
    display: none;
}

.userContext-box .context-menu-item:hover {
    background: rgb(242 243 244);
}

/* .userBar:hover .userContext-box {
    display: block;
} */

.userContext-box::after {
    width: 16px;
    height: 16px;
    background: #aaaaaa;
    content: "";
}

.context-menu-list {
    list-style-type: none;
    padding-bottom: 3px;
}

.context-personalmenu-list {
    border-top: 1px solid #e4e4e4;
    padding-top: 3px;
}

/* icon */

.icon.icon-password {
    background-image: url(../images/security.png);
}

.icon.icon-authorize {
    background-image: url(../images/authority.png);
}

.icon.icon-logout {
    background-image: url(../images/logout_black.png);
}

.icon.icon-personalSet {
    background-image: url(../images/config.png);
}

.icon.icon-theme {
    background-image: url(../images/themeManager.png);
}

.context-menu-item.icon {
    background-repeat: no-repeat;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 22px;
    background-position: 0px 3px;
}

.dev-project-Combobox {
    padding: 5px;
    outline: none;
    border: 0;
    border-bottom: 1px solid #EEEEEE;
    background: #ffffff;
    width: 100%;
}

.projectDiv {}

.projectCombobox {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
    width: 100%;
    box-sizing: border-box;
    margin: 0px auto;
}

.projectCombobox .dev-project-ItemTitle {
    display: inline-block;
    font-weight: bold;
    margin: 0px 5px;
}

.projectCombobox .dev-project-Section {
    display: inline-block;
}

.projectCombobox .dev-project-Section:focus {
    border: 0;
}

/* 樹 */
#projectPanel .TreeViewBox {
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.uic-tree .uic-tree {
    margin-left: 0.45em;
    padding-left: 0.6em;
    /*border-left: 1px dashed #d0d0d0;*/
}

.uic-tree--hidden {
    display: none;
}

.uic-tree__icon {
    margin-left: 0.4em;
    padding-left: 0.6em;
    /*border-left: 1px dashed #d0d0d0;*/
    float: left;
}

.uic-tree-range {
    margin-left: 3px;
}

.uic-tree__fileIcon {
    margin-left: 1.45em;
    padding-left: 0.85em;
    /*border-left: 1px dashed #d0d0d0;*/
}

.uic-tree__title {
    margin-left: 0;
}

.uic-tree__title span {
    margin-left: 0.2em;
}

.uic-tree__icon::before {
    /*content: '';
    border-left: 1px solid #000000;*/
}

.centerDiv #barImg img {
    width: 100%;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
}

.blazor-content p {}

.blazor-content .dev-template-item p {
    margin: 0 auto;
}

.dev-search-btn {
    position: absolute;
    top: 0;
    bottom: 0;
    border: 1px solid #d0d0d0;
    right: 5%;
}

.blazor-portal-tab-prefix {
    float: left;
    font-size: 12px;
    padding-left: 5px;
    padding-right: 5px;
}

/*AccordionPortal*/
.accordin-portal {
    overflow: hidden;
    padding: 0px 10px;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.accordin-portal-header {
    padding: 6px 12px;
    box-sizing: border-box;
    background-color: #F7F7F7;
    display: flex;
    align-items: center;
    width: calc(100% - 44px);
    margin-bottom:6px;
}

.accordin-portal-header>div:last-child {
    margin-left: auto;
}

.accordin-portal-menu {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;
    box-sizing: border-box;
    width: calc(100% - 44px);
    flex-grow: 1;
    scrollbar-width: auto;
}

.accordin-portal-expand {}

.dev-label-textparent {
    font-size: 14px;
}

.accordin-portal-expand img {
    margin-right: 6px;
    width: 12px;
    height: 12px;
}

.condensation-button {
    display: block;
    user-select: none;
}

.plus-icon {
    width: 16px;
    height: 16px;
    position: relative;
    transition: transform 0.35s ease-out;
    float: left;
    margin-right: 6px;
    /* background: #306ca1; */
    border-radius: 50px;
    padding: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.plus-icon:before,
.plus-icon:after {
    content: '';
    background: #393E46;
    position: absolute;
}

.plus-icon:before {
    width: 2px;
    height: 14px;
    left: 45%;
}

.plus-icon:after {
    width: 14px;
    height: 2px;
    top: 45%;
    opacity: 1;
    transition: opacity 0.35s ease-out;
}

.plus-icon-isOpen {
    transform: rotate(90deg);
}

.plus-icon-isOpen:after {
    opacity: 0;
}

.item-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin: 0px 2% 40px 2%;
    padding: 10px;
    box-sizing: border-box;
}

.isSearch .item-container .item-area {
    transition: all 0.2s ease-in;
}

.item-area {
    width: auto !important;
    height: 180px !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #ffffff;
    border: 1px solid #EEEEEE;
    position: relative;
    border-radius: 12px;
    box-sizing: border-box;
    transition: all 0.3s;
    vertical-align: middle;
    padding: 3px;
}

.item-area:hover {
    box-shadow: var(--card-box-shadow);
    color: #306ca1;
}

.item-area-imgDiv {
    width: auto;
    height: 140px;
    width: 100%;
    margin: 0px auto;
    display: flex;
    overflow: hidden;
    background-color: rgb(255, 255, 255);
    border-radius: 12px 12px 0px 0px;
    box-sizing: border-box;
}

.item-area-imgDiv img {
    object-fit: cover;
    margin: auto;
}

.item-area-title {
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    padding: 0px 6px;
    box-sizing: border-box;
    border-radius: 0px 0px 8px 8px;
}

.item-area-title p {
    font-style: normal;
    margin: auto;
    display: inline-block;
}

.item-area-title .fa {
    margin-right: 6px;
}

.item-area-title .fa-star-o:before,
.item-area-title .fa-star:before {
    font-size: 16px;
}

.project-select-class {
    border: none;
    border-bottom: solid 1px #bec4c8;
    background-color: #ff000000;
    height: 26px;
    min-width: 220px;
}

.accordin-portal-header .project-select-class {
    outline: none;
    background-color: #ffffff;
    border-bottom: solid 1px transparent;
}

.searchBlock-class {
    /* width: 40%; */
    float: left;
    height: 26px;
    margin-left: 32px;
    background: #ffff;
    padding: 0px 12px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    border-radius: 3px;
}

.search-checkBox[type="checkbox"] {
    accent-color: var(--checkbox-accent-color);
    width: var(--checkbox-width);
    height: var(--checkbox-height);
}

.searchBolck-botton-class {
    line-height: 29px;
    font-size: 16px;
    float: left;
    color: #666;
}

.searchBlock-input-class {
    width: 100%;
    height: 93%;
    border: none;
    background: none;
    margin-left: 5px;
    font-size: 16px;
}

.searchBlock-input-class:focus {
    outline: none;
}

.condensation-text-class {
    align-items: center;
    float: left;
    color: #393E46;
    margin-right: 12px;
    padding: 0px 12px;
    height: 24px;
    border-radius: 3px;
    background-color: #ffffff;
    border: 1px solid #393E46;
}

.condensation-text-class:hover {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 6px 15px;
}

.history-list {
    vertical-align: middle;
    border-bottom: 1px solid #ccc;
    background: #ffffff;
    padding: 4px;
    margin: 1px;
}

.history-list span {
    display: inline-block;
}

.history-list-icon {
    margin-right: 3px;
    vertical-align: top;
}

.history-list-div {
    display: inline-block;
}

.history-list-caption {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-list-date {
    white-space: nowrap;
    color: #aaa;
    font-size: 12px;
}

/* favoriteTree */
.dev-portal-treetabparent .favoriteTree {
    background-color: #ffffff;
    width: 30%;
    padding: 6px 12px;
    box-sizing: border-box;
    height: 100%;
    overflow: hidden;
}

.dev-folder-title {
    font-weight: bold;
    color: #393E46;
    font-size: 16px;
    height: 26px;
    line-height: 26px;
    padding: 0px 5px;
}

.dev-folder-title:hover {
    background-color: #EEEEEE;
}

/*scrollbar*/
@scope (.dev-portal-treetabparent, .blazor-tree-container) {

    ::-webkit-scrollbar-track {
        background: var(--scrollbar-track-color);
    }

    ::-webkit-scrollbar-thumb {
        background: var(--scrollbar-thumb-color);
        border-radius: var(--scrollbar-thumb-radius);
    }

    ::-webkit-scrollbar {
        width: var(--scrollbar-width);
        height: var(--scrollbar-height);
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--scrollbar-thumb-color-hover);
    }
}

.dev-portal-treetabparent .blazor-tree-container>.blazor-tree::-webkit-scrollbar-thumb:hover,
.accordin-portal-menu::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-color-hover);
}

#projectPanel .folder-block {}

#projectPanel .folder-block>div {
    align-items: center;
}

#portalTree .menuBar>div:first-child {
    display: flex;
    align-items: center;
}