/* Remove max-width settings for {rmp.maxWidth_Y_nonIndexPage} elements, to enable full width background image to show */
.isNotIndexPage.noVerticalMenu .mcShell {
    max-width: none !important;
}

/* Custompage folder name */
.folderName {
    font-weight: 600;
    font-size: 150%;
    margin-bottom: 1rem;
}

/* Page heading & top banner container*/
.pageHeadingAndBanner {
    position: relative;
}

.editAndVideo {
    position: absolute;
    right: 0px;
    bottom: 1vw;
}

.editThisPage {
    border: solid 1px black;
    font-size: 12px;
    line-height: 14px;
    background-color: orange;
    color: black;
    padding: 9px;
    margin: 0 0 1rem 0;
}

/* Edit icon on the to right corner for each paragraph */
.editThisParagraph {
    border: solid 1px black;
    font-size: 10px;
    line-height: 12px;
    background-color: orange;
    color: black;
    padding: 5px 10px 5px 10px;
    position: absolute;
    top: 0px;
    right: 0px;
}

/* Edit icon on the bottom right corner for gallery inside paragraph */
.editThisGallery {
    border: solid 1px black;
    font-size: 10px;
    line-height: 12px;
    background-color: orange;
    color: black;
    padding: 5px 10px 5px 10px;
    position: absolute;
    bottom: 0px;
    right: 0px;
}

/* Container of one paragraph, paragraph heading & content are inside */
.paraOutter {
    box-sizing: border-box;
    margin: 0;
}

/* Container inside .paraOutter */
.paragraph {
    padding: 1rem 0;
    margin: 0;
    vertical-align: top;
    box-sizing: border-box;
}

.paragraphContent {
    overflow: hidden;
}

/*Show horizontal scrollbar for large table*/
    .paragraphContent.horiScroll {
        overflow-x: auto;
    }
        .paragraphContent.horiScroll table {
            white-space: initial;
            min-width: max-content;
        }

        /* Container of thumbnail gallery inside paragraph */
        .paragraph .galleryContainer {
            max-width: 100%;
        }

        /* Container of one thumbnail */
        .paragraph .galleryContainer .eachImage {
            margin: 1rem;
            position: relative;
            border: none 0;
            overflow: hidden;
        }

    /* Caption text of each image */
    .paragraph .galleryContainer .eachImage .caption {
        font-size: 0.9em;
    }

    /* Download image icon */
    .paragraph .galleryContainer .eachImage .downloadLink {
        position: absolute;
        top: 5px;
        left: 5px;
        color: #FFFFFF !important;
        text-shadow: 1px 1px 1px #808080;
    }

    /* Content of paragraph */
    .paragraph .text {
        padding: 0;
        max-width : 100%;
    }

    /* first <p> inside paragraph content */
    .paragraph .text > p:first-child {
        margin-top: 0;
    }

    /* List <li> inside paragraph text */
    .paragraph li {
        line-height: 2rem;
    }

    .paragraph .galleryContainer {
        
    }
    /* Container of thumbnail gallery placed on top or bottom */
    .paragraph .galleryTop, .paragraph .galleryBottom {
        display: flex;
        flex-direction: row;
        justify-content: flex-start; /* 靠左對齊 */
        align-items: stretch;
        flex-wrap: wrap;
    }

/* Thumbnail gallery placed on left ot right side */
    .paragraph .pictureOnSide {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        flex-wrap: wrap;
    }

    /* Container of thumbnail gallery placed on left or right */
    .paragraph .pictureOnSide .galleryContainer {
        display: flex;
        flex-direction: column;
    }

    /* Container of thumbnail gallery placed on left or right */
    .paragraph .pictureOnSide .galleryRight, .paragraph .pictureOnSide .galleryLeft {
        flex-shrink: 1;
        flex-grow: 0;
    }
        
    /* Container of thumbnail gallery placed on right */
        .paragraph .pictureOnSide .galleryRight
        {
            padding-left : 20px;
        }

    /* Container of thumbnail gallery placed on left */
    .paragraph .pictureOnSide .galleryLeft
    {
        padding-right : 20px;
    }

    /* Container of paragraph main contain */
    .paragraph .pictureOnSide .text {
        flex-shrink: 0;
        flex-grow: 1;
    }

    .paragraph .thumbnail
    {
        max-width : 100%;
    }

/* Flex Box Left & Right Settings */
.cppLeftRight {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    box-sizing: border-box;
}

/* Content will not be smaller than 300px */
.cppLeft, .cppRight {
    /*min-width: 300px;*/
    box-sizing: border-box;
    padding: 10px;
}

    .cppLeftRight img
    {
        max-width : 100%;
        height : auto !important;
    }

.cppLeftRight55 .cppLeft, .cppLeftRight55 .cppRight {
    flex-basis: 50%;
}

.cppLeftRight19 .cppLeft, .cppLeftRight91 .cppRight {
    flex-basis: 10%;
}
.cppLeftRight19 .cppRight, .cppLeftRight91 .cppLeft {
    flex-basis: 90%;
}

.cppLeftRight28 .cppLeft, .cppLeftRight82 .cppRight {
    flex-basis: 20%;
}
.cppLeftRight28 .cppRight, .cppLeftRight82 .cppLeft {
    flex-basis: 80%;
}

.cppLeftRight37 .cppLeft, .cppLeftRight73 .cppRight {
    flex-basis: 30%;
}
.cppLeftRight37 .cppRight, .cppLeftRight73 .cppLeft {
    flex-basis: 70%;
}

.cppLeftRight46 .cppLeft, .cppLeftRight64 .cppRight {
    flex-basis: 40%;
}
.cppLeftRight46 .cppRight, .cppLeftRight64 .cppLeft {
    flex-basis: 60%;
}

/* Only show in mobile version */
.showInMobileOnly
{
    display : none;
}

/* Only show in bigger screen browser */
.showInDesktopOnly
{
    display : block;
}

/* Mobile Version */
@media (max-width: 767px) {

    .paragraph .pictureOnSide {
        display: block;
    }

        .paragraph .pictureOnSide .galleryLeft {
            padding-right: 0;
        }

        .paragraph .pictureOnSide .galleryRight {
            padding-left: 0;
        }

    .paragraph .galleryContainer .eachImage {
        width: auto;
    }

    
    /* 無指明 class 的 */
    
    .ctCustomPage img:not([class]), .ctCustomPage img[class=""]
    , .ctCustomPage div:not([class]), .ctCustomPage div[class=""]
    , .ctCustomPage iframe:not([class]), .ctCustomPage iframe[class=""]
    , .ctCustomPage video:not([class]), .ctCustomPage video[class=""] 
    {
        max-width: 100% !important;
    }


    /*.ctCustomPage table:not([class]), .ctCustomPage table[class=""]
    {

    }

    .ctCustomPage.horiScroll table:not([class]), .ctCustomPage.horiScroll table[class=""] {
        max-width: auto !important;
        width: initial !important;
    }*/
    .ctCustomPage:not(.horiScroll) table:not([class]), .ctCustomPage:not(.horiScroll) table[class=""] {
        max-width: 100% !important;
        width: auto !important;
    }


    .ctCustomPage img:not([class]) {
        height: auto !important;
    }

        .ctCustomPage iframe[src^="https://www.youtube.com"] {
            width: 100%;
        }

    .ctCustomPage iframe[src$=".pdf"] {
        width: 100%;
        height : 65vh;
    }

    .ctCustomPage video {
        width: 100%;
        height: auto;
    }

    .ctCustomPage a {
        word-break: break-all;
    }

    .cppLeftRight {
        display: block;
    }

    .cppLeft {
        padding-right: 0;
    }

    .cppRight {
        padding-left: 0;
    }

    .showInMobileOnly {
        display: block;
    }

    .showInDesktopOnly {
        display: none;
    }

}

/*===================================== Flex Table ==========================================================*/

.divFlexTable, .divFlexTable div {
    box-sizing: border-box;
}

    .divFlexTable .divFlexTableRow {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-items: flex-start;
        align-items: stretch;
    }

    .divFlexTable .divFlexTableCell {
        border: 0 none;
        flex-grow: 1;
        flex-shrink: 1;
        padding: 10px;
    }

        .divFlexTable .divFlexTableCell img {
            max-width: 100%;
        }

/*========================================================================================================*/
p {
    line-height: 1.5;
    overflow: hidden;
}

.paragraph img {
    max-width: 100%;
}

@media (max-width: 480px) {
    table .flexBox td
    {
        display : block;
    }
}

p.imageOnLeft img
{
    float : left;
    margin : 0 2em 2em 0;
}

p.imageOnRight img 
{
    float: right;
    margin: 0 0 2em 2em;
}

@media (max-width: 480px)
{
    p.imageOnLeft img, p.imageOnRight img 
    {
        display: block;
        margin: 0 0 2em 0;
        float: none;
    }
}