/* THEME-COLOR: #0871F5(Light) #515151(Dark) */
/* html,body,page */
html{
    height: 100%;
    width: 100%;
}
body{
    height: 100%;
    width: 100%;
    text-align: center;
    overflow-x: hidden;
    background-color: #f3f3f5;
    margin: 0;
}
.page{
    height: 100%;
    display: flex;
    flex-direction:row;
}
.small-screen-warning{
    display: none;
}
/* 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);}
}
.content-body{width: calc(100% - 2rem);}
/* selection */
::selection{background-color: #D9F6FF;}
/* background-color */
.bg-warning{background-color: red;}
.bg-attention{background-color: #FFF6BB;}
.bg-fresh{background-color: #DBFFBB;}
.bg-light{background-color: white;}
.bg-dark{background-color: black;}
.bg-lively{background-color: #EFFFCE;}
/* box */
.full-screen{
    width: 100%;
    height: 100%;
}
/* nav-group */
.nav-occupy{
    width: 70px;
    height: 100%;
}
.nav-bar{
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    height: calc(100% - 30px);
    width: 45px;
    margin: 5px;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}
.nav-bt{
    display: block;
    margin: 5px;
    width: 25px;
    height: 25px;
    padding: 5px;
    border-width: 0px;
    border-radius: 5px;
}
.nav-bt:hover{
    background-color: #e9e9e9;
}
.nav-bt-occupy{
    height: calc(100% / 2 - 60px - 180px);
    width: 20px;
}
.nav-icon{
    width: 50px;
}
.hide-sm{
    height: calc(100% - 30px);
}
.nav-brand{width: max-content;}
.nav-ul{display: inline-block;}
#show-menu{
    position: fixed;
    left: 10px;
}
/* main-board */
.text-before-view{
    width: calc(100% - 1rem - 5em);
}
.view-bt{
    margin-left: 1rem;
    width: 3em;
    padding: 1em;
    text-align: center;
}
.main-bt-box{
    margin: 1rem;
    padding: 1rem;
    border-radius: 10px;
    background-color: #FFFFFF;
    align-items: center;
}
.hov-eps-on:hover{
    background-color: #ffceae;
}
/* button */
.bt-img{
    width: 25px;
}
.bt{
    padding: 7px;
    border-radius: 5px;
}
.bt-on{
    background-color: #D4E9FF;
}
.bt-off{
    background-color: #FFFFFF;
}
.bt-off:hover{
    background-color: #D4E9FF;
}
/* toggled-list */
.toggled-bt img{
    width: 1.25em;
    margin: 0.2em;
}
.toggled-ul{
    width: calc(100% - 1.65em);
}
/* pieces */
.piece{
    margin: 0.25rem;
    padding: 0.5rem;
    background-color: #ffffff;
    border-radius: 0.2em;
    text-align: center;
    align-items: center;
}
/* div-line */
.div-line{
    background-color: #C5C5C5;
    margin-top: 1rem;
    margin-bottom: 1rem;
    border-width: 0;
    width: 100%;
    height: 0.2px;
}
/* side-panel */
.side-panel{
    background-color: #ffede1;
    height: fit-content;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}
.hover-shake:hover{
    animation: shake 0.5s linear;
}
@keyframes shake{
    0%{
        transform: rotate(0);
    }
    12%{
        transform: rotate(-20deg);
    }
    34%{
        transform: rotate(20deg);
    }
    66%{
        transform: rotate(-10deg);
    }
    88%{
        transform: rotate(10deg);
    }
    100%{
        transform: rotate(0);
    }
}
.hover-rotate:hover{
    animation: rotate 0.5s linear;
}
@keyframes rotate{
    0%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(180deg);
    }
}
.clout-spot{
    width: 1rem;
    height: 1rem;
    margin: calc(100% / 14 - 0.5rem);
    border-radius: 0.5rem;
    background-color: #ffede1;
}
.clout-spot-occupy{
    width: calc(100% / 7);
    height: 1rem;
}
/* float-tool-group */
.roll-top{
    position: fixed;
    display: block;
    width: 30px;
    height: 30px;
    right: 15px;
    bottom: 15px;
    padding: 10px;
    border-width: 0px;
    border-radius: 15px;
    background-color: #FFFFFF;
}
.roll-top:hover{
    background-color: #ffceae;
}
.roll-top-img{
    width: 30px;
}
@media(max-width: 850px){
    .roll-top{
        width: 20px;
        height: 20px;
        padding: 9px;
    }
    .roll-top-img{
        width: 20px;
    }
}
/* font */
h0{
    display: block;
    margin-top: 1rem;
    margin-bottom: 1rem;
    line-height: 1.5em;
    width: 100%;
    text-align: justify;
    font-size: xx-large;
    font-weight: normal;
}
.h0{
    line-height: 1.5em;
    font-size: xx-large;
}
h0l{
    display: block;
    margin-top: 1rem;
    margin-bottom: 1rem;
    line-height: 1.5em;
    width: 100%;
    text-align: justify;
    font-size: xxx-large;
    font-weight: normal;
}
.h0l{
    line-height: 1.5em;
    font-size: xxx-large;
}
.h3{
    display: block;
    font-size: large;
    font-weight: bold;
}
a{
    text-decoration: none;
    color: #0871f5;
    transition: all 0.7s;
}
a:hover{
    color: #51A9FF;
    transition: all 0.7s;
}
p{
    color: #333333;
    font-weight: normal;
    text-align: justify;
    text-indent: 2em;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
}
.bold{
    font-weight: bold;
}
.font-sm{
    font-size: small;
}
.hline-2{line-height: 2em;}
.text-indent-2{text-indent: 2em;}
.code,.inline-code{background-color: #F4F1ED;padding: 1rem;border-radius: 0.3rem;text-align: left;font-family: 'Courier New', Courier, monospace;font-size: small;font-weight: 1000;color: #636363;}
.inline-code{padding: 0.3rem;border-radius: 0.3rem;}
.font-normal{font-weight: normal;}
.font-warning,.pointer{color: #EF4069;}
.font-hv-warning:hover{color: #EF4069;}
.font-warm{color: #EF8F18;}
.font-hv-warm:hover{color: #EF8F18;}
.font-emphasize{color: #FFE600;}
.font-hv-emphasize:hover{color: #FFE600;}
.font-sky,.data{color: #51A9FF;}
.font-hv-sky:hover{color: #51A9FF;}
.font-darksky,.ctrl{color: #002EE2;}
.font-hv-darksky:hover{color: #002EE2;}
.font-water,.func{color: #00BABD;}
.font-hv-water{color: #00BABD;}
.font-forest,.text{color: #67B73E;}
.font-hv-forest:hover{color: #67B73E;}
.font-vigorous{color: #9CE52D;}
.font-hv-vigorous:hover{color: #9CE52D;}
.font-special,.hfile{color: #C6359A;}
.font-hv-special:hover{color: #C6359A;}
.font-chocolate{color: #640B0B;}
.font-hv-chocolate:hover{color: #640B0B;}
.font-wine{color: #A11616;}
.font-hv-wine:hover{color: #A11616;}
.font-light{color: #ffffff;}
.font-hv-light:hover{color: #ffffff;}
.font-dark{color: #000000;}
.font-hv-dark:hover{color: #000000;}
.font-grey{color: #939393;}
.font-lgr{font-size: larger;}
.font-xxlg{font-size: xx-large;}
.line-thr{text-decoration: line-through;}
.annotation{color: #C9C9C9;}
.annotation:hover{color: #C9C9C9;}
.pub{color: #636363;text-align: center;margin-bottom: 1rem;}
.font-black-100{color: #000000;}
.font-black-80{color: #333333;}
.font-black-60{color: #505050;}
.font-black-40{color: #8B8B8B;}
.font-black-20{color: #C5C5C5;}
.font-black-0{color: #E2E2E2;}
.bold{
    font-weight: bold;
}
/* position */
.row{display: flex;flex-wrap: wrap;}
.column{display: flex;flex-direction: column;}
.fixed{position: fixed;}
.center{
    text-align: center;
    align-items: center;
    justify-content: center;
}
.middle{vertical-align: middle;}
.left{text-align: left;}
.right{text-align: right;}
.v-bottom{vertical-align: bottom;}
.x-10{margin-left: 10px;}
.x-2r{
    margin-left: 2rem;
}
.x-1r{
    margin-left: 1rem;
}
.x-1r-inv{
    margin-left: -1rem;
}
.y-5{
    margin-top: 5px;
}
.y-15{margin-top: 15px;}
.y-2r{
    margin-top: 2rem;
}
.y-0r75-inv{
    margin-top: -0.75rem;
}
.y-1e-inv{
    margin-top: -1em;
}
.mg-0r25{
    margin: 0.25rem;
}
.mg-0r5{
    margin: 0.5rem;
}
.mg-1r{
    margin: 1rem;
}
.mg-2r{
    margin: 2rem;
}
.mg-2r-top{
    margin-top: 2rem;
}
.mg-2r-btm{
    margin-bottom: 2rem;
}
.pd-5{padding: 5px;}
.pd-10{padding: 10px;}
.pd-1r{padding: 1rem;}
.pd-2r{padding: 2rem;}
.pd-5r{padding: 5rem;}
.rd-0r5{
    border-radius: 0.5rem;
}
.rd-1r{
    border-radius: 1rem;
}
.rd-0e2{
    border-radius: 0.2em;
}
.content{
    width: calc(50% - 2rem);
    margin-left: 25%;
    padding: 1rem;
}
@media(max-width:1200px){
    .content{
        width: calc(100% - 2rem);
        padding: 1rem;margin-left: 0;
    }
}
/* card */
.card{
    background-color: #FFFFFF;
    margin: 1rem;
    padding: 1rem;
    border-radius: 2rem;
    width: calc(100% - 4rem);
    height: fit-content;
}
.normal-card{
    background-color: #FFFFFF;
    width: calc(100% - 4rem);
    margin-top: 2rem;
    /* margin-bottom: 2rem; */
    padding: 2rem;
    border-radius: 2rem;
}
.none-additional-height{
    max-height: 0;
}
.card-block{
    position: relative;
    display: flex;
    flex-direction: column;
}
.card-read p{
    color: #000000;
    text-align: left;
}
.noindent{
    text-indent: 0;
}
/* tag */
.circled-tag{
    height: calc(1em - 4px - 1rem);
    padding: 0.5rem;
    border-width: 2px;
    border-color: #ffceae;
    border-style: solid;
    border-radius: 9em;
    font-size: 0.5em;
    vertical-align: -0.5em;
}
/* cover */
@media(max-width:3000px){
    #cover{
        width: 330px;
    }
    .right-min-lg{
        text-align: right;
    }
    .left-min-lg{
        text-align: left;
    }
}
@media(max-width:850px){#cover{width: calc(80% - 2rem);}.right-min-lg{text-align: center;}.left-min-lg{text-align: center;}}
/* align */
.flex-row{
    display: flex; flex-direction: row;
}
/* size */
.h-12{
    height: 12px;
}
.h-20{
    height: 20px;
}
.h-28{
    height: 28px;
}
.h-1r{
    height: 1rem;
}
.h-1r5{
    height: 1.5rem;
}
.h-shrink-1{
    height: calc(50% - 1.83em - 61.25px);
}
.w-50{
    width: 50px;
}
.w-100{
    width: 100px;
}
/* input */
.inputbox{
    padding: 5px;
    margin-top: 2.5px;
    margin-bottom: 2.5px;
    border-color: #51A9FF;
    border-top-width: 0;
    border-left-width: 0;
    border-right-width: 0;
    border-bottom-width: 2px;
    border-radius: 2px;
    font-size: 20px;
    text-align: left;
}
/* transition */
.trans{
    transition: all 0.3s;
}
.main-card{
    background-color: #ecf4fe;
    border-radius: 10px;
}
/* display */
@media(min-width: 850px) and (max-height: 600px), (max-width: 850px) and (max-height: 452px){
    .small-screen-warning{
        display: unset;
    }
}
@media(max-width: 1000px){.hide-1k{display: none;}}
.occupy{height: 1px;}
.h-occupy-1r{
    height: 1rem;
    width: 1px;
}
.flex-grow-1{
    flex-basis: 0px;flex-grow: 1;
}
.flex-grow-3{
    flex-basis: 0px;flex-grow: 3;
}
.hiden{
    display: none;
}
.fit-width{
    width: fit-content;
}
.block{
    display: block;
}
.flex{
    display: flex;
}