.hidden{
    display: none;
    visibility: hidden;
}
#fileDialogWrapper{
    width: 100vw;
    height: 100vh;
   overflow: hidden;
   position: absolute;
   z-index: 2;
   top: 0;
   left: 0;
   place-items: center;
   background-color: #00000033;
   display: none;
}
#fileDialog, #infoDialog{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    background-color: #fff;
    box-shadow:0px 4px 6px 0px rgba(50,50,93,0.11) , 0px 1px 3px 0px rgba(0,0,0,0.08) ;
    position: absolute;
    z-index: 100;
}
#fileDialog {
    width: 60vw;
    height: 60vh;
}
#infoDialog {
    width: 500px;
    /* height: 300px; */
}
#fileDialog_top{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* height: 18%; */
}
#infoDialog > #fileDialog_top {
    height: auto;
}
#title_bar{
    width: inherit;
    padding: 4px;
    color: #ffff;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ed1c24;
}
#closeBtn{
    cursor:pointer;
}
#search_bar{
    display: flex;
    flex-direction: column;
    width: inherit;
    height: 75%;
    margin-top: 4px;
}
#nav_buttons{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 10%;
    color:#808080;
}
#nav_buttons img {
    cursor: pointer;
}
#nav_buttons img:hover{
    transform: scale(1.024);
}
#nav_buttons img:nth-child(1){
    transform: rotate(-180deg);
}
#nav_buttons img:last-child{
    transform: rotate(-90deg);
}
#nav_buttons img.disabled {
    opacity: 0.5;
    cursor: default;
}
.search_input{
    padding: 4px;
}
#search_btn{
    width: 15%;
    padding: 4px;
    background-color:#e7e7e7;
    border: 1px solid #808080;
    cursor: pointer;
    transition: 200ms all ease-in-out;
    border: 1px solid transparent;
}
#search_btn:hover{
    background-color:#d4d4d4;
    transition: 100ms background-color ease-in-out;
}
#search_dialog{
    width: 200px;
    height: fit-content;
    background-color: #f8f8f8;
    border: 1px solid #2228;
    position:absolute;
    top:12%;
    right: 8px;
    padding: 10px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap:6px;
    z-index: 120;
    box-shadow:0px 10px 15px -3px rgba(0,0,0,0.1) , 0px 4px 6px -2px rgba(0,0,0,0.05)  ;
}
#search_dialog input, #search_dialog select{
    width: 99%;
    padding: 3px 0px 3px 3px;
    border: 1px solid #3334;
}
#project_information {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 5%;
    gap: 5%;
    align-items: center;

}
#project_information input {
    /* padding: 3px; */
    height: 23px;
}
#project_information input, select {
    width: 100%;
    margin: 5px 0px;
}
#searchbtn{
    align-self: center;
    width: 50%;
    margin-top: 10px;
    padding: 4px!important;
    background-color:#e7e7e7;
    cursor: pointer;
    border: 1px solid #c1c1c1;
}
#searchbtn:hover{
    background-color:#d8d8d8;
}
#search_dialog button{
    padding: 3px 15px;
}
#search_text{
    width: 20%;
}
#save_path{
    width: 70%;
    pointer-events: none;
}
#search_bar_top{
    height: 60%;
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: 0 4px 0 4px;
    width: inherit;
    justify-content: space-between;
    padding: 0 4px;
}
#search_bar_bottom{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: inherit;
    padding: 3px 5px;
    background-color: #F5F6F7;
}
#sb_bottom_left{
    display: flex;
    align-items: center;
    gap: 10px;
    color:#1F3992;
}
.action-btn{
    border: none;
    background-color: transparent;
    padding: 4px 10px;
    cursor: pointer;
    color:#1F3992;
}
.action-btn:hover{
    background-color:#ececec;
}
.action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
#sb_bottom_right{
    display: flex;
    align-items: center;
    gap: 10px;
}
#fileDialog_content{
    /* height: 67%; */
    overflow: auto;
    flex: 1;
    width: inherit;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}
#folderTree{
    width: 25%;
    border-right: 2px dotted #e6e6e6;
    padding: 5px;
    background-color: rgb(252, 252, 252);
    max-height: 100%;
    overflow: scroll;

}
#folderGrid{
    width: 100%;
    min-width: 70%;
    display: grid;
    gap: 4%;
    grid-template-columns: repeat(5,1fr);
    grid-auto-rows: minmax(min-content, max-content);
    position: relative;
    padding: 10px;
    overflow-y: scroll;

}
#folderTree:not([style*="display: none"]) #folderGrid {
    width: 80%;
}
#folderList{
    width: 80%;
    min-width: 70%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;

}
#folderListGrid{
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    overflow-y: scroll;
}
#folderList-header{
    width: 100%;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content:  space-between;
    padding: 2px 5%;
    text-align:left;
    font-weight: 700;

}
.plistCard{
    width: 100%;
    padding: 10px 5px;
    border: 1px solid transparent;
    cursor: pointer;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-row: auto;
    border-bottom: 1px dotted rgba(153, 153, 153, 0.377);
}
.plistCard span{
    align-self: center;
    text-align: center;
}
.plistCard .list-card-left{

    pointer-events: none;
}
/* .list-card-left .pname{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: 5px;
} */

.projectCard{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    text-align: center;
}
.projectCard:hover,.plistCard:hover{
    border: 1px solid #3333;
}
.projectCard img,.plistCard img{
   width: 64px;
   height: 64px;
   pointer-events:  none;
}
.projectCard span,.plistCard span{
    pointer-events: none;
}
.projectCard_active{
    background-color: rgba(209, 236, 255, 0.473);
    border:1px dotted rgb(148, 182, 206) ;
}
#gridAlert{
    padding: 5px;
    width: 100%;
    background-color: #5e5e5e31;
    position: absolute;
    top:calc(50% - 20px) ;
    text-align: center;
    font-weight: 700;
}
#fileDialog_bottom{
    height: 15%;
    width: inherit;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    background-color: #F0F0F0;
}
#fileDialog_bottom_top, #fileDialog_bottom_bot{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 4px 6px;
    overflow: hidden;
}
#fileName{
    width: 79%;
}
.dialog_btn{
    height: 30px;
    /* width: 85px; */
    padding: 0px 10px;
    margin-left: 10px;
    background-color:#c7c7c7;
    cursor: pointer;
    transition: 200ms all ease-in-out;
    border: 1px solid transparent;
}
.dialog_btn:hover{
    background-color:#e7e7e7;
    border: 1px solid #1F3992;
    transition: 100ms background-color ease-in-out;
}
.dialog_btn:disabled {
    cursor: not-allowed;
}
ul.fancytree-container{
    border:none!important;
    background-color: rgb(252, 252, 252)!important;
}
ul.fancytree-container{
    outline: none!important;
}
span.fancytree-ico-c > span.fancytree-icon {
    pointer-events: none;
    background-position: 0 0;
    background-image: url("/images/dwg.png");
}

.forbidden-list {
    font-size: 12px;
    padding-top: 10px;
}
.forbidden-list div span:first-child {
    width: 15px;
    text-align: center;
    display: inline-block;
}
.forbidden-list div span:last-child {
    margin-left: 5px;
}