/* THEME-COLOR: #0871F5(Light) #515151(Dark) */
/* html,body,page */
*{
    margin: 0;
    padding: 0;
    border: none;
    text-align: left;
    font-family: 'Noto Sans SC';
    font-size: 1rem;
    font-weight: normal;
}
html{
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-behavior: smooth;
    scrollbar-width: none;
    background-color: #f3f3f5;
    font-size: 16px;
}
body{
    height: 100%;
    width: 100%;
}
.page{
    padding: 1rem;
    width: calc(100vw - 2rem);
    height: calc(100vh - 2rem);
    display: flex;
    flex-direction: row;
    gap: 1rem;
}
.main{
    width: calc(100% - 3.5rem);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.small-screen-warning{
    display: none;
}
::selection{background-color: #D9F6FF;}
/* columns-division */
.col-1{width: 100%;}
.col-2{width: 50%;}
.col-3{width: calc(100% / 3);}
.col-3-2{width: calc(100% * 2 / 3);}
.col-4{width: 25%;}
.col-5{width: 20%;}
.col-6{width: calc(100% / 6);}
.col-7{width: calc(100% / 7);}
.col-8{width: 12.5%;}
.col-9{width: calc(100% / 9);}
.col-10{width: 10%;}
.col-11{width: calc(100% / 11);}
.col-12{width: calc(100% / 12);}
.col-5-3{width: 60%;}
.col-2-long{width: 100%;}
.col-2-short{width: 30%;}
@media(max-width: 2000px){
    .col-xxl-1{width: 100%;}
    .col-xxl-2{width: 50%;}
    .col-xxl-3{width: calc(100% / 3);}
    .col-xxl-4{width: 25%;}
    .col-xxl-5{width: 20%;}
    .col-xxl-6{width: calc(100% / 6);}
    .col-xxl-7{width: calc(100% / 7);}
    .col-xxl-8{width: 12.5%;}
    .col-xxl-9{width: calc(100% / 9);}
    .col-xxl-10{width: 10%;}
    .col-xxl-11{width: calc(100% / 11);}
    .col-xxl-12{width: calc(100% / 12);}}
@media(max-width: 1600px){
    .col-xl-1{width: 100%;}
    .col-xl-2{width: 50%;}
    .col-xl-3{width: calc(100% / 3);}
    .col-xl-4{width: 25%;}
    .col-xl-5{width: 20%;}
    .col-xl-6{width: calc(100% / 6);}
    .col-xl-7{width: calc(100% / 7);}
    .col-xl-8{width: 12.5%;}
    .col-xl-9{width: calc(100% / 9);}
    .col-xl-10{width: 10%;}
    .col-xl-11{width: calc(100% / 11);}
    .col-xl-12{width: calc(100% / 12);}
}
@media(max-width: 1200px){
    .col-lg-1{width: 100%;}
    .col-lg-2{width: 50%;}
    .col-lg-3{width: calc(100% / 3);}
    .col-lg-4{width: 25%;}
    .col-lg-5{width: 20%;}
    .col-lg-6{width: calc(100% / 6);}
    .col-lg-7{width: calc(100% / 7);}
    .col-lg-8{width: 12.5%;}
    .col-lg-9{width: calc(100% / 9);}
    .col-lg-10{width: 10%;}
    .col-lg-11{width: calc(100% / 11);}
    .col-lg-12{width: calc(100% / 12);}
}
@media(max-width: 900px){
    .col-md-0{width: 0;}
    .col-md-1{width: 100%;}
    .col-md-2{width: 50%;}
    .col-md-3{width: calc(100% / 3);}
    .col-md-4{width: 25%;}
    .col-md-5{width: 20%;}
    .col-md-6{width: calc(100% / 6);}
    .col-md-7{width: calc(100% / 7);}
    .col-md-8{width: 12.5%;}
    .col-md-9{width: calc(100% / 9);}
    .col-md-10{width: 10%;}
    .col-md-11{width: calc(100% / 11);}
    .col-md-12{width: calc(100% / 12);}
}
@media(max-width: 500px){
    .col-sm-1{width: 100%;}
    .col-sm-2{width: 50%;}
    .col-sm-3{width: calc(100% / 3);}
    .col-sm-4{width: 25%;}
    .col-sm-5{width: 20%;}
    .col-sm-6{width: calc(100% / 6);}
    .col-sm-7{width: calc(100% / 7);}
    .col-sm-8{width: 12.5%;}
    .col-sm-9{width: calc(100% / 9);}
    .col-sm-10{width: 10%;}
    .col-sm-11{width: calc(100% / 11);}
    .col-sm-12{width: calc(100% / 12);}
}
/* nav-group */
.nav-occupy{
    width: 2.5rem;
    height: 100%;
}
.nav-bar{
    position: fixed;
    z-index: 900;
    top: 1rem;
    left: 1rem;
    height: calc(100% - 2rem);
    width: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
}
.nav-bt{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    aspect-ratio: 1 / 1;
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}
.nav-bt:hover{
    background-color: #e9e9e9;
}
.nav-bt img{
    display: block;
    width: 1.5rem;
    aspect-ratio: 1 / 1;
}
/* margin, border, padding */
.px-1r{
    padding-left: 1rem;
    padding-right: 1rem;
}
.py-1r{
    padding-top: 1rem;
    padding-bottom: 1rem;
}
/* elements */
.greeting{
    padding: 1rem 0;
}
.file-list{
    flex-grow: 1;
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-behavior: smooth;
    scrollbar-width: none;
    background-color: #FFFFFF;
    border-radius: 1rem;
}
.file-list-row{
    padding: 1rem 2rem;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    background-color: #FFFFFF;
}
.file-list-head{
    padding: 1rem 2rem;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    background-color: #FFFFFF;
    position: sticky;
    top: 0;
    left: 0;
}
.file-list-head span{
    font-weight: bold;
}
.file-list-name{
    flex-grow: 1;
}
.file-list-size{
    width: 5rem;
}
.file-list-type{
    width: 5rem;
}
.file-list-date{
    width: 8rem;
}
.file-list-action{
    width: 10rem;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}
/* font */
.font-lighter{font-weight: lighter;}
.font-bold{font-weight: bold;}
.font-xxsmall{font-size: xx-small;}
.font-xsmall{font-size: x-small;}
.font-smaller{font-size: smaller;}
.font-small{font-size: small;}
.font-large{font-size: large;}
.font-larger{font-size: larger;}
.font-xlarge{font-size: x-large;}
.font-xxlarge{font-size: xx-large;}
a, .href{
    text-decoration: none;
    color: #0871f5;
    cursor: pointer;
    transition: all 0.3s ease;
}
a, .href:hover{
    color: #51A9FF;
}