/*

#pc_main
    .pc_nav
        #pc_nav_head
            #pc_back
            #pc_title
            #pc_hide_nav
        #pc_nav_body
            #pc_category_div
                .pc_category
            #pc_item_div
                .pc_item
                    .pc_item_bullet
                    .pc_item_text
    .pc_content
        #pc_content_title
            p
            #open_edit_modal_btn if admin
        #pc_content_content
*/

/*
#edit_modal if admin

*/

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    display: flex;
    /* overflow: hidden; */
    font-family: 'NSimSun', 'SongTi Tc', serif;
    background-image: url('/20/layouts/homebg.jpg');
    touch-action: none;
    /* disable body pinch zoom */
}
main {
    flex-basis: 100%;
    overflow: hidden;
}

#pc_main {
    position: absolute;
    top: 85px;
    width: 100%;
    height: calc(100% - 85px);
    /* background-color: rgb(241, 241, 241); */
}
.pc_nav {
    position: absolute;
    width: 33%;
    height: 100%;
    
    display: flex;
    flex-direction: column;
    
    padding-right: 0.5vw;
    /* border-top: 0.07rem solid black; */
    border-right: 0.07rem solid black;
    user-select: none;
    z-index: 1010;
    transition: 1s;
    /* background-color: rgb(225, 225, 225); */
}
.pc_nav_hidden {
    transform: translate(-100%, 0);
}
.pc_content {
    position: absolute;
    left: 33%;
    width: 67%;
    height: 100%;

    padding: 15px 3vw;
    /* padding-left: 4vw; */
    overflow: auto;
    transition: 1s;

    /* for bottom right bg img decoration */
    display: flex;
    flex-direction: column;
}
.pc_content_full {
    left: 0;
    width: 100%;
    padding-left: 6vw;
}

#pc_nav_head {
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: aqua; */
}
#pc_nav_body {
    flex: 30;
    display: flex;
    overflow: hidden;
    /* background-color: greenyellow; */
}

#pc_to_menu {
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(1.3) translate(20%, 15%);
}
#pc_nav_head_mid {
    flex: 3;
    display: flex;
    justify-content: center;
    align-items: center;
}
#pc_title {
    font-size: x-large;
    margin-bottom: 0;
    transform: translate(15%, 0);
}
#pc_hide_nav_hover {
    position: absolute;
    width: 100%;
    height: 100%;
    /* display: flex; */  /* real */
    display: none; /* for start up */
    justify-content: center;
    align-items: center;
    /* border: 3px solid red; */

    transform: scale(0.40) translate(5%, -20%) rotate(-10deg);
}
#pc_hide_nav {
    flex: 5;
    /* height: 60%; */

    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;
    transform: scale(1.5) translate(15%, -15%);
}

#pc_category_div {
    flex: 4;

    display: flex;
    flex-direction: column;
    align-items: center;

    overflow-x: hidden;
    overflow-y: auto;
    margin-top: 5%;
    scrollbar-width: thin;
    scrollbar-color: rgb(205, 205, 205) rgba(0, 0, 0, 0);
}
#pc_item_div {
    flex: 6;

    padding-top: 10px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgb(205, 205, 205) rgba(0, 0, 0, 0);
}
#pc_category_div::-webkit-scrollbar, #pc_item_div::-webkit-scrollbar {
    width: 6px;
}
#pc_category_div::-webkit-scrollbar-thumb, #pc_item_div::-webkit-scrollbar-thumb {
    background: rgb(205, 205, 205);
}
#pc_category_div::-webkit-scrollbar-thumb:hover, #pc_item_div::-webkit-scrollbar-thumb:hover {
    background: rgb(166, 166, 166);
}

.pc_category {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    width: 58%;
    margin: 2.2vh 0;
    transform: rotate(-13deg);
}
.pc_category p {
    position: absolute;
    font-size: large;
    margin-bottom: 0;
    transform: rotate(13deg);
}
.pc_category_focused {
    cursor: auto;
}
/* .pc_category_focused p, .pc_category:hover p {
    color: white;
} */

.pc_item {
    height: 50px;
    display: flex;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
    /* padding: 2vh 2vw; */
}
.pc_item_focused .pc_item_bullet, .pc_item:hover .pc_item_bullet {
    visibility: visible;
}
.pc_item_focused {
    cursor: auto;
}
.pc_item_bullet {
    /* flex: 17; */
    flex: 0 0 50px;
    width: 50px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
}
.pc_item_text {
    /* flex: 83; */
    /* font-size: 1.6vw; */
    /* font-size: large; */
    font-size: 1.3rem;
    margin: 0 0 0 3%;
}

#pc_content_title {
    margin-bottom: 3vh;
}
#pc_content_title p {
    font-size: x-large;
    font-weight: bold;
    color: rgb(58, 154, 216);
    margin-bottom: 0;
    text-align: center;
    width: 100%;
    display: inline-block;
}
#pc_content_content {
    /* for bottom right bg img decoration */
    flex: 1;
    position: relative;
    padding-bottom: 1vh;
    /* old way for bottom right bg img decoration */
    /* display: flex;
    flex-direction: column; */
}
/* #pc_content_content::before { */
    /* for bottom right bg img decoration */
    /* this space grows when content not much */
    /* content: "";
    order: 1;
    flex: 1;
} */

/* .pc_content_bottom_decoration { */
    /* for bottom right bg img decoration */
    /* bottom right bg img decoration */
    /* content: ""; */
    /* order: 2;
    height: 20vh;
    background-image: url(hide_nav_cat.png);
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
    transform: scaleX(-1);
} */
.pc_dec {
    position: absolute;
    width: 100%;
    height: 110px;
    right: 0;
    pointer-events: none;
    transform: scaleX(-1);
    background-image: url(hide_nav_cat.png);
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
}
.top0 {
    top: 0;
}
.bottom0 {
    bottom: 0;
}
/* usage example:
top right:
<div class="pc_dec top0"></div>
top 234px right:
<div class="pc_dec" style="top: 234px;"></div>
bottom right:
<div class="pc_dec bottom0"></div>
bottom left height 50px no flip:
<div class="pc_dec bottom0" style="right: unset; transform: unset; height: 50px;"></div>
top 234px left height 50px no flip:
<div class="pc_dec bottom0" style="right: unset; transform: unset; height: 50px; top: 234px;"></div>
locate then put:
<div style="position: relative;"><div class="pc_dec top0">&nbsp;</div></div>
*/
/* old:
<img class="pc_dec top0"/>
<img class="pc_dec" style="top: 234px;"/>
<img class="pc_dec bottom0"/>
<img class="pc_dec bottom0" style="right: unset; height: unset; transform: unset; width: 400px;"/>
*/


/*
#phone_main
    #phone_category_div
        .phone_category
    #phone_body
        #phone_nav
            #phone_back
            #phone_title_bullet
            #phone_title_text p
            #phone_content_title p
        #phone_item_div
            .phone_item
                .phone_item_bullet
                .phone_item_text
        #phone_content
*/

#phone_main {
    position: absolute;
    top: 85px;
    width: 100%;
    height: calc(100% - 85px);

    /* display: flex; */
    display: none;
    flex-direction: column-reverse;
    /* overflow: hidden; */
    
    /* background-color: rgb(241, 241, 241); */
}
#phone_category_div {
    flex: 0 1 90px;
    /* height: 90px; */
    /* max-height: 90px; */
    display: flex;
    /* justify-content: center; */
    overflow: hidden;
    user-select: none;
    border-top: 1px solid black;
}
#phone_body {
    flex: 1;
    overflow: hidden;
    /* display: flex;
    flex-direction: column; */
}
.phone_category {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.phone_category img, .phone_category p {
    cursor: pointer;
}
.phone_category_focused img, .phone_category_focused p {
    cursor: auto !important;
}
.phone_category p {
    position: absolute;
    font-size: large;
    margin-bottom: 0;
}
/* .phone_category_focused p {
    color: white;
} */

#phone_nav {
    /* flex: 0 0 50px; */
    height: 50px;
    display: flex;
    overflow: hidden;
    margin-top: 5px;
    user-select: none;
}
#phone_item_div {
    flex: 1;
    height: calc(100% - 55px);
    overflow: auto;
    user-select: none;
    /* touch-action: pan-y; */
    /* Solves: Chrome: [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. */
    scrollbar-width: thin;
    scrollbar-color: rgb(205, 205, 205) rgba(0, 0, 0, 0);
}
#phone_item_div > img {
    position: fixed;
    z-index: -1;
    filter: grayscale();
    opacity: 0.2;
    bottom: 90px;
    /* bottom right */
    right: 0;
    max-width: 100%;
    max-height: 60%;
    /* center */
    /* max-width: 100%;
    max-height: 80%;
    left: 50%;
    transform: translateX(-50%); */
}
#phone_content {
    /* flex: 1; */
    width: 100%;
    height: calc(100% - 1vh - 55px);
    padding: 0 1vw 1vh 1vw;
    margin: 1vh 0 0 0;
    overflow: auto;
    display: none;
    scrollbar-width: thin;
    scrollbar-color: rgb(205, 205, 205) rgba(0, 0, 0, 0);
}
#phone_item_div::-webkit-scrollbar, #phone_content::-webkit-scrollbar {
    width: 6px;
}
#phone_item_div::-webkit-scrollbar-thumb, #phone_content::-webkit-scrollbar-thumb {
    background: rgb(205, 205, 205);
}
#phone_item_div::-webkit-scrollbar-thumb:hover, #phone_content::-webkit-scrollbar-thumb:hover {
    background: rgb(166, 166, 166);
}

#phone_back {
    /* margin: auto 5px auto 1px; */
    width: 50px;
    cursor: pointer;
}
#phone_title_bullet {
    flex: 0 0 50px;
    /* display: flex; */ /* real */
    display: none; /* for start up */
    justify-content: center;
    align-items: center;
}
#phone_title_text {
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-left: 5px; */
}
#phone_content_title {
    /* display: flex; */ /* real */
    display: none; /* for start up */
    justify-content: center;
    align-items: center;
    margin-left: 10px;
}
#phone_title_text p, #phone_content_title p {
    font-size: x-large;
    margin-bottom: 0;
    font-weight: bold;
    /* color: rgb(58, 154, 216); */
    /* text-align: center; */
    /* width: 100%; */
    /* display: inline-block; */
}

.phone_item {
    height: 50px;
    display: flex;
    align-items: center;
    cursor: pointer;
    /* overflow: hidden; */
    /* padding: 2vh 2vw; */
}
.phone_item_bullet{
    /* flex: 17; */
    width: 50px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 40px;
    visibility: hidden;
}
.phone_item_text {
    /* flex: 83; */
    /* font-size: 1.6vw; */
    font-size: large;
    margin: 0 0 0 5px;
    margin-bottom: 0;
}
.phone_item_focused .phone_item_bullet {
    visibility: visible;
}
/* .phone_item_focused {
    cursor: auto;
} */

.hover_img {
    display: none;
}
.img100 {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

#edit_modal_dialog {
    max-width: 85%;
}
/* #manage_modal_dialog */
#edit_content, #manage_textarea {
    height: 60vh;
}
#item_modal .modal-body {
    overflow-y: auto;
}
#item_modal p {
    margin-top: 3px;
    margin-bottom: 0;
}
#item_modal_div_head div, #item_modal_div div {
    margin: 5px 0;
    border-bottom: 1px solid black;
}
#item_modal_div_head .btn-danger {
    visibility: hidden;
}
#manage_textarea {
    width: 100%;
}
#item_modal_div {
    height: 55vh;
}
#remove_not_used_modal p {
    white-space: pre-line;
    margin-bottom: 0;
}

header {
    user-select: none;
}

/* narrow width (PC) */
@media (max-width: 992px) {
    .pc_nav {
        width: 45%;
        /* transform: translate(-100%, 0); */
        background-image: url('/20/layouts/homebg.jpg');
    }
    /* .pc_nav_hidden {
        transform: none;
    } */
    .pc_content {
        left: 0;
        width: 100%;
        padding-left: 6vw;
    }
}
/* phone (vertical) */
/* was 768px, but Pixel 2 XL's height is 823px */
@media (max-width: 823px) {
    #pc_main, .pc_dec { /* pc main or pc content decoration */
        display: none;
    }
    #phone_main {
        display: flex;
    }
}
/* narrow height (PC, phone horizontal) */
@media (max-height: 450px) { /* include 450px, for Chrome: Surface Duo */
    #phone_main {
        flex-direction: row;
    }
    #phone_category_div {
        flex-direction: column;
        max-height: unset;
        border-top: unset;
        /* max-width: 90px; */
        width: 90px;
        border-right: 1px solid black;
        /* overflow: hidden; */
    }
    #phone_item_div > img {
        bottom: 0;
        /* bottom right */
        max-height: calc(100vh - 85px);
        /* center */
        /* max-height: calc(100vh - 85px);
        max-width: calc(100% - 90px);
        left: calc(50% + 45px); */
    }
    .phone_category {
        flex-direction: column;
        overflow: hidden;
    }
    /* make phone nav & content scroll together */
    #phone_body {
        overflow: auto;
    }
    #phone_item_div, #phone_content {
        overflow: visible;
    }
}