@import url("./remixicon.css");
*, *::before, *::after {
    box-sizing: border-box;
}
:root {
    --bg-color: #f6f6f7;
    --screen-sm: 100%;
    --screen-md: 720px;
    --screen-lg: 1024px;
    --radius:.5rem;
}

body{
    margin: 0;
    background-image: repeating-linear-gradient(135deg, rgba(189,189,189,0.1) 0px, rgba(189,189,189,0.1) 2px,transparent 2px, transparent 4px),linear-gradient(90deg, rgb(var(--color-canvas-rgb)),rgb(var(--color-canvas-rgb)));
}
.app {
    max-width: var(--screen-sm);
}
.side-nav{
    width: 100%;
}
.side-nav{
    
}
.side-nav-status{
    
}








.main {
    width: 100%;
}
/*.side-nav::before {*/
/*    --tw-bg-opacity: 1;*/
/*    content: '';*/
/*    position: absolute;*/
/*    top: 0.8rem;  */
/*    left: 1rem;   */
/*    width: 4.1rem;*/
/*    height: 0.7rem; */
/*    background: */
/*        radial-gradient(circle, rgba(var(--color-danger-400-rgb), var(--tw-bg-opacity)) 0 0.35rem, transparent 0.35rem 100%),*/
/*        radial-gradient(circle, rgba(var(--color-warning-300-rgb), var(--tw-bg-opacity)) 0 0.35rem, transparent 0.35rem 100%),*/
/*        radial-gradient(circle, rgba(var(--color-success-500-rgb), var(--tw-bg-opacity)) 0 0.35rem, transparent 0.35rem 100%);*/
/*    background-size: 0.7rem 0.7rem; */
/*    background-repeat: no-repeat;*/
/*    background-position: 0 0, 1rem 0, 2rem 0; */
/*}*/




/* 平板 ≥ 768px */
@media (min-width: 768px) {
    .app {
        display: flex;
        height: calc(100vh - 3rem);
        margin: 1.5rem auto;
        max-width: var(--screen-md);
        overflow: hidden;
    }
    .app {
        border-radius: var(--radius);
        background-color: #fff;
        box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--shadow,0 0 #0000);
    }
    .side-nav{
        width: 25%;
    }
    .main{
        width: 75%;
    }
}
/* 笔记本/桌面 ≥ 1024px */
@media (min-width: 1024px) {
    .app {
        max-width: var(--screen-lg);
    }
}