@import url('listlayout.css');
@import url('styles.css');
@import url('button.css');

.aio-card {
    padding: 10px;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(2px);
}
.card-item{
    margin:8px 8px 8px 8px;
}
.show {
    display: block;
}

.hide {
    display: none;
}
.container-list{
    display:flex;
    flex-direction:row;
}

.container-wrap{

}

.top {
    display: block;
    border: 0px 0px 1px 0px solid #EFEFEF;
    -moz-box-shadow: 0px 1px 3px #CCC;
    -webkit-box-shadow: 0px 1px 3px #CCC;
    box-shadow: 0px 2px 5px #CCC;
}

/*导航*/
.nav {
    display: flex;
}
.hover-visible{
    visibility:visible;
}
.hover-hide {
    visibility: hidden;
}
.nav-item-container {
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
}

.nav-item-container-place-holder {
}

.nav-item {
}

    .nav-item.active {
        background-color: #CCCCCC7F;
        color: #111;
    }

        .nav-item.active span {
            color: orange;
        }

    .nav-item span {
        /*margin: 10px;*/
        color: #666;
    }

.menu-item {
}

    .menu-item.active {
        background-color: #CCCCCC7F;
        color: #111;
    }

        .menu-item.active span {
            color: orange;
        }

    .menu-item span {
        margin: 10px;
        color: #666;
    }


.nav-menu-btn {
    display: none;
    background-color: orange;
    cursor: pointer;
}

.aio-flex-center {
   display:flex;
   align-items:center;
}
 

.aio-container {
    display: flex;
}

    .aio-container.child-stretch {
        align-items: stretch;
    }

    .aio-container.child-center {
        align-items: center;
    }

.aio-item {
    display: inline-block;
}

aio-item content {
    flex-grow: 1;
}

.auto2col-container {
    display: flex;
    flex-wrap: nowrap;
    border-top: 1px solid #DDDDDD;
}
.auto2col-first-container {
    /* width: 100%;*/
    flex-grow: 0;
    background-color: #F0F0F0;
    border-right: 1px solid #DDDDDD;
    flex-shrink:0;
    /*height: calc(100% - 50px);*/
    /*flex-wrap: wrap;*/
}

.auto2col-second-container {
    flex-grow: 1;
    min-height:100%;
    /*width: 100%;*/ 
    /*flex-wrap: wrap;*/
}



/*底部播放器*/

.bottom-player {
    width: 100%;
    height: 50px;
    background-color: white;
    position: fixed;
    bottom: 0px;
    z-index: 88;

    -moz-box-shadow: 0px -3px 3px #CCC;
    -webkit-box-shadow: 0px -2px 3px #CCC;
    box-shadow: 0px -2px 5px #CCC;
}
.bottom-player-content {
    display: flex;
}
.bottom-player-title
{ 
    margin:0px 10px 0px 10px;
}
.bottom-player-time {
    margin: 0px 10px 0px 10px;
}
.bottom-player-control {
    vertical-align: central;
    flex-grow: 1;
    /*background-color: gray;*/
    text-align: center;
    align-items: center;
    /*align-content: center;*/
    justify-content: center;
    display:flex;
}
.bottom-player-btns {
/*    text-align: center;
    align-items: center;
    align-content: center;
    background-color: red;
    vertical-align: central;
    align-self: center;*/
    justify-content: center;
}
.bottom-player-btn{

}

.bottom-player-slider
{ 
    margin:-4px -2px 0px -2px;
    margin-top:-4px;
    clear:both;
    display:block;
}

/*颜色*/
.icon-color-default {
    color: dodgerblue;
}

.icon-color-done {
    color: green;
}


/*.btn {
    background: none;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    display: flex;
    min-width: 20px;
    margin: 0px 5px 0px 0px;
    -webkit-transition-duration: 0.4s;*/ /* Safari */
    /*transition-duration: 0.4s;
    padding:0px;
}*/

    .btn:hover {
        background-color: #DDDDDD;
        border: none;
    }

 
  
.aio-divider {
    display: block;
    height: 1px;
    width: 100%;
    background-color: #EEEEEE;
    margin: 0px;
}
  
.aio-icon-btn {
    border: none;
    cursor: pointer;
    border-right-style: solid;
    border-right-width: 1px;
    border-right-color: #E0E0E0;
}

 
.title-color {
    color: #333;
}


.file-action {
    padding: 5px;
}

.menu-item-icon {
    margin: 5px;
}

.menu-item-name {
}

a.menu-item:hover {
    background-color: gray;
}
.aio-collapse {
    display: none;
}

.tile-line {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.txt-line {
   /* text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;*/
}
.collection-item-content {
    /*margin: 5px;*/ 
    border-width: 1px;
    border-style: solid;
    border-color: #F0F0F0;
    display: flex;   
    /*background-color: orange;*/ 
}

.grid-items {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 0px;
    padding: 0px;
}
.grid-items-m {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
    grid-gap: 0px;
    padding: 0px;
}

.collection-view-item {
    display: flex;
    position: relative;
    flex-direction: column;
    /*grid-gap: 10px;*/
    /*flex-grow: 0;*/
    min-width: 0;
    /*flex-shrink: 0;*/
    /*flex-basis: 250px;*/
    /*    width: 250px;*/
    cursor: pointer;
    /*display: flex;*/
    /*background-color: #FCFCFC;*/

    user-select: none; /* Chrome and Opera */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
} 
    .collection-view-item.selected {
        background-color: #F0F0F0;
    }
     
.collection-view-item-hover {
    background-color: #F8F8F8;
}

.tool-box{
    display:flex;
}

.tool-box-item {
    border: none;
    cursor: pointer;
    align-items: center;
    display:flex;
}
@media screen and (max-width: 3960px) {

    /*    .collection-view-item {
        flex-basis: 14.28%;
        width: 14.28%;
    }*/

    .grid-items {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }

    .grid-items-m {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }
}


@media screen and (max-width: 3700px) {

    /*    .collection-view-item {
        flex-basis: 14.28%;
        width: 14.28%;
    }*/

    .grid-items {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }

    .grid-items-m {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }
}


@media screen and (max-width: 3550px) {

    /*    .collection-view-item {
        flex-basis: 14.28%;
        width: 14.28%;
    }*/

    .grid-items {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }

    .grid-items-m {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }
}


@media screen and (max-width: 3300px) {

    /*    .collection-view-item {
        flex-basis: 14.28%;
        width: 14.28%;
    }*/

    .grid-items {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }

    .grid-items-m {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }
}


@media screen and (max-width: 3150px) {

    /*    .collection-view-item {
        flex-basis: 14.28%;
        width: 14.28%;
    }*/

    .grid-items {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }

    .grid-items-m {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }
}



@media screen and (max-width: 2800px) {

    /*    .collection-view-item {
        flex-basis: 14.28%;
        width: 14.28%;
    }*/

    .grid-items {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }

    .grid-items-m {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }
}


@media screen and (max-width: 2500px) {

    /*    .collection-view-item {
        flex-basis: 14.28%;
        width: 14.28%;
    }*/

    .grid-items {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }

    .grid-items-m {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }
}


@media screen and (max-width: 2200px) {

    /*    .collection-view-item {
        flex-basis: 14.28%;
        width: 14.28%;
    }*/

    .grid-items {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }

    .grid-items-m {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }
}

@media screen and (max-width: 1920px) {

/*    .collection-view-item {
        flex-basis: 14.28%;
        width: 14.28%;
    }*/

    .grid-items {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }
    .grid-items-m {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
    }
}

@media screen and (max-width: 1700px) {

/*    .collection-view-item {
        flex-basis: 16.66%;
        width: 16.66%;
    }*/

    .grid-items {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }
    .grid-items-m {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr ;
    }
}

@media screen and (max-width: 1550px) {
/*
    .collection-view-item {
        flex-basis: 20%;
        width: 20%;
    }*/
    .grid-items {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    }
    .grid-items-m {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }
}
@media screen and (max-width: 1280px) {

/*    .collection-view-item {
        flex-basis: 25%;
        width: 25%;
    }
*/
    .grid-items {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }
    .grid-items-m {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}
    @media screen and (max-width: 1000px) {

/*        .collection-view-item {
            flex-basis: calc(100%/3);
            width: calc(100%/3);
        }*/

        .grid-items {
            grid-template-columns: 1fr 1fr 1fr 1fr;
        }
        .grid-items-m {
            grid-template-columns: 1fr 1fr 1fr;
        }

        .auto2col-container {
            display: flex;
            flex-wrap: wrap;
            border-top: 1px solid #EEEEEE;
        }

        .auto2col-first-container {
            width: 100%;
            /*      order: 1;
        flex-grow: 0;*/
        }

        .auto2col-second-container {
            width: 100%;
            margin-top: 10px;
            /*    order: 2;
        flex-grow: 1;*/
        }
    }

    @media screen and (max-width: 640px) {
        .nav-menu-btn {
            display: inline-block;
        }

/*        .collection-view-item {
            flex-basis: calc(100%/3);
            width: calc(100%/3);
        }*/

        .grid-items {
            grid-template-columns: 1fr 1fr 1fr 1fr;
        }

        .grid-items-m {
            grid-template-columns: 1fr 1fr 1fr;
        }

        /*.nav-item-container {
            width: 100%;
            order: 3;
            flex-grow: 0;
        }

        .nav-item-container-place-holder {
            flex-grow: 1;
        }


        .nav-item {
            width: 30%;*/
            /*flex-grow: 0;*/
        /*}

        .nav-btn-collapse {
            display: none;
        }

        .nav-collapse {
            display: none;
        }*/


    }

    @media screen and (max-width: 500px) {

        .nav-item {
            /*width: 50%;*/
            /*flex-grow: 0;*/
        }

  /*      .collection-view-item {
            flex-basis: 49%;
            width: 49%;
        }*/
        .grid-items {
            grid-template-columns: 1fr 1fr 1fr;
        }
        .grid-items-m {
            grid-template-columns: 1fr 1fr;
        }
    }


@media screen and (max-width: 350px) {
     
    .grid-items {
        grid-template-columns: 1fr 1fr;
    }

    .grid-items-m {
        grid-template-columns: 1fr;
    }
}


.fill-height-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    /*height: 100%;*/
    /*overflow:auto;*/
}

.fill-height-item {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
   /* overflow:auto;*/
}

.manage-root {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    height: 100%;
}

.manage-nav {
    background-color: #EEEEEE;
    margin: 10px;
}

.manage-body {
    margin: 10px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

@media screen and (max-width: 720px) {

    .manage-root {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        height: 100%;
    }
}

.sg-item { 
    padding: 15px;
}

@media screen and (max-width: 450px) {




    .sg-item {
        width: 100%;
        padding: 15px;
    }
}


.page-title {
    color: var(--neutral-foreground-rest);
    margin-left: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-content-title {
    color: var(--neutral-foreground-rest);
    margin: 8px;
    font-size:15px;
    display: flex;  
}