@import url('../lib/font/montserrat.css');

.subject {display: flex;height: 100%;}
dd {font-size: 12px;color: var(--999);font-weight: normal;}

.sider {width: 260px;background: var(--f7);height: 100%;display: flex;flex-direction: column;
    x {position: absolute;top: 0;display: none;cursor: pointer;background: var(--sapphire);color: var(--fff);}
    .logo {display: flex;align-items: center;justify-content: center;padding: 20px 0;
        em {width: 20%;margin-right: 10px;}
        span {font-family: 'montserrat' !important;text-transform: uppercase;font-size: 34px;font-weight: 500;}
    }
}

fold {height: 100%;flex: 1;overflow: auto;
    &::-webkit-scrollbar {width: 5px;}
    &::-webkit-scrollbar-thumb {background: var(--eee);}
    fold-cont {
        a {display: block;text-transform: capitalize;line-height: 35px;padding: 0 20px;
            &:hover, &.active {background-color: var(--eee);}
            dd {display: inline-block;padding-left: 10px;}
        }
    }
}

.contant {flex: 1;min-width: 0;height: 100%;overflow: auto;padding: 30px;
    h2 {padding: 20px 0;font-size: 40px;font-weight: normal;display: flex;align-items: center;
        i {font-size: 48px;float: left;margin: 0 10px 0 0;}
    }
}

.absolute-logic {width: 300px;display: grid;grid-template-columns: repeat(3,1fr);grid-gap: 10px;
    a {height: 100px;background-color: var(--f7);display: flex;align-items: center;justify-content: center;font-size: 40px;color: var(--ddd);}
}
.wide-logic a {display: block;background-color: var(--f7);padding: 10px;margin: 10px 0;}

.cont {
    iframe {width: 100%;border: 1px var(--eee) solid;margin: 5px 0;}
    xmp {color: var(--tomato);white-space: pre-wrap;word-break: break-all;cursor: pointer;background-color: var(--f7);padding: 0 20px 20px;margin: 5px 0;}
    h3 {padding: 20px 0;margin-bottom: 10px;border-bottom-width: 1px;}
    h5 {padding: 10px 0;}
    p {padding: 10px 0;
        a,span {color: var(--sapphire);background-color: var(--f7);padding: 5px 10px;border-radius: 2px;margin: 0 5px;}
        span.warning {background-color: var(--red);color: white;}
        a:hover {background-color: var(--sapphire);color: white;}
    }
    .btn {width: 200px;margin: 10px 0;font-weight: bold;}
    .table {
        th, td {padding: 0;}
        td {padding: 0;}
        tbody tr:hover {background: none;}
        xmp {padding: 10px 0;line-height: 100%;}
    }
}



@media(max-width:640px){
    .sider {width: 60%;z-index: 3;transform: translateX(-100%);position: fixed;
        x {right: -.6rem;width: .6rem;height: .6rem;line-height: .6rem;display: block;}
        &.active {transform: translateX(0);}
        .logo {padding: .2rem 0;
            em {margin-right: .1rem;}
            span {font-size: .42rem;}
        }
    }

    fold {height: calc(100% - 3rem);overflow: auto;
        a {padding: 0 .1rem;height: .5rem;line-height: .5rem;font-size: .2rem;}
    }

    .contant {padding: .2rem;
        h2 {padding: .2rem 0;font-size: .5rem;
            i {font-size: .48rem;margin: 0 .1rem 0 0;}
        }
    }

    .absolute-logic {width: 3rem;grid-gap: .1rem;
        a {height: 1rem;font-size: .4rem;}
    }

    .wide-logic a {padding: .1rem;margin: .1rem 0;}

    .cont {
        iframe {margin: .1rem 0;}
        xmp {padding: 0 .2rem .25rem;margin: .1rem 0;border-radius: .1rem;}
        h3 {padding: .1rem 0;}
        h5,p {padding: .1rem 0;}
        p {
            a,span {padding: .05rem .1rem;margin: 0 .05rem;}
        }
        .btn {width:2.5rem;border-radius: .05rem;margin: .1rem 0;}
        .table xmp {padding: .2rem;}
    }
}