@charset "utf-8";

:root{
    --ddms-color-1: rgb(84, 188, 168);             /* 系統色 - 綠色 (DDMS Logo 色) */
    --ddms-color-2: rgb(38, 38, 38);               /* 系統色 - 淺灰色 (輸入方塊用) */
    --ddms-color-3: rgb(4, 65, 68);                /* 系統色 - 深綠色 (登入畫面用) */
    --ddms-color-4: rgba(84, 188, 168, 0.1);       /* 系統色 - 淺綠色 (表單底色) */

    --project-color-1: rgb(255, 255, 255);         /* 案件色 - 白色 */
    --project-color-2: rgb(112, 112, 112);         /* 案件色 - 灰色 */
    --project-color-3: rgb(245, 162, 0);           /* 案件色 - 橘色 */

    --user-color-1: rgb(73, 73, 73);               /* 使用者色 - 85% 黑 */
    --user-color-2: rgb(137, 137, 137);            /* 使用者色 - 55.11% 黑 */
}

body{
    background-color: #FFFFFF;
    background-image: linear-gradient(45deg, rgb(137, 137, 137) 25%, transparent 25%, transparent 75%, rgb(137, 137, 137) 75%, rgb(137, 137, 137)),
                      linear-gradient(45deg, rgb(137, 137, 137) 25%, transparent 25%, transparent 75%, rgb(137, 137, 137) 75%, rgb(137, 137, 137));
    background-size: 4px 4px;
    background-position: 0 0, 2px 2px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
html.main2 body{
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: flex-start;
}

.hidden{
    width: 1px;
    height: 1px;
    padding: 1px 0px 0px 1px;
    position: fixed;
    top: -1px;
    left: -1px;
    overflow: hidden;
}



/* =========================================================
 * 登入頁
 * ========================================================= */
.loginArea{
    width: calc(100% - 1px * 2);
    max-width: calc(1400px - 1px * 2);
    background-color: rgb(255, 255, 255);
    box-shadow: 4px 4px 12px 2px rgba(20%, 20%, 20%, 0.5);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    position: relative;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .loginArea{
        max-width: calc(930px - 1px * 2);
    }
}
.loginArea>.titleArea{
    width: calc(100% - 50px * 2);
    height: 165px;
    background-color: var(--ddms-color-3);
    border-bottom: 1px solid #A1A1A1;
    color: #000000;
    font-family: Arial, Microsoft JhengHei;
    font-size: 35px;
    font-weight: bold;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 0px 50px;
}
@media screen and (orientation: portrait){
    .loginArea>.titleArea{
        width: calc(100% - 8.904vw * 2);
        height: 31.111vw;
        padding: 0px 8.904vw;
    }
}
.loginArea>.titleArea>img{
    height: 96px;
}
@media screen and (orientation: portrait){
    .loginArea>.titleArea>img{
        height: 15.833vw;
    }
}
.loginArea>.titleArea>H1{
    color: var(--ddms-color-1);
    font-family: Arial, Microsoft JhengHei;
    font-size: 40px;
    font-style: italic;
    font-weight: bold;
    text-align: center;
    padding: 10px 0px 0px 0px;
}
.loginArea>.titleArea>.smallName{
    color: #000000;
    font-family: Arial, Microsoft JhengHei;
    font-size: 20px;
    font-weight: bold;
    text-align: right;
    text-shadow: 2px 2px 8px #FFFFFF;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
.loginArea>.centerArea{
    width: calc(100% - 50px * 2);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 40px 50px 75px 50px;
}
@media screen and (orientation: portrait){
    .loginArea>.centerArea{
        width: calc(100% - 8.904vw * 2);
        padding: 8.904vw;
    }
}
.loginArea>.centerArea>h2{
    color: rgb(73, 73, 73);
    font-family: Arial, Microsoft JhengHei;
    font-size: 24px;
    font-weight: bold;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 0px 20px 0px;
    padding: 0px 0px 0px 0px;
}
@media screen and (orientation: portrait){
    .loginArea>.centerArea>h2{
        font-size: 4.777vw;
        margin: 0px 0px 2.778vw 0px;
    }
}
.loginArea>.centerArea>h2>em{
    color: var(--ddms-color-1);
    font-family: Arial;
    margin: 0px 0px 0px 15px;
}
@media screen and (orientation: portrait){
    .loginArea>.centerArea>h2>em{
        font-size: 5.5vw;
        line-height: normal;
        margin: 0px;
        position: relative;
        top: 0.5vw;
    }
}
.loginArea>.centerArea>.dataArea.twoColumn{
    flex-wrap: wrap;
}
.loginArea>.centerArea>.dataArea.twoColumn>div{
    width: calc((100% - 5%) / 2);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: space-between;
    align-items: stretch;
}
@media screen and (orientation: portrait){
    .loginArea>.centerArea>.dataArea.twoColumn>div{
        width: 100%;
    }
}
.loginArea>.centerArea>.dataArea.twoColumn>div:nth-of-type(even){
    margin: 0px 0px 0px 5%;
}
@media screen and (orientation: portrait){
    .loginArea>.centerArea>.dataArea.twoColumn>div:nth-of-type(even){
        margin: 0px;
    }
}
.loginArea>.centerArea>.dataArea.twoColumn>div:only-child{
    margin: 0px;
}
.loginArea>.centerArea>.dataArea.form .dataRow{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
}
@media screen and (orientation: portrait){
    .loginArea>.centerArea>.dataArea ul.formArea{
        margin: 0px 0px 9.444vw 0px;
    }
}
.loginArea>.centerArea>.dataArea ul.formArea>li>input[type='tel'],
.loginArea>.centerArea>.dataArea ul.formArea>li>input[type='email'],
.loginArea>.centerArea>.dataArea ul.formArea>li>input[type='number'],
.loginArea>.centerArea>.dataArea ul.formArea>li>input[type='text'],
.loginArea>.centerArea>.dataArea ul.formArea>li>input[type='password'],
.loginArea>.centerArea>.dataArea ul.formArea>li>input[type='search'],
.loginArea>.centerArea>.dataArea ul.formArea>li>input[type='date'],
.loginArea>.centerArea>.dataArea ul.formArea>li>div,
.loginArea>.centerArea>.dataArea ul.formArea>li>div>#gCode,
.loginArea>.centerArea>.dataArea ul.formArea>li>textarea{
    background-color: var(--ddms-color-4);
}
.loginArea>.centerArea>.dataArea ul.formArea>li>div.noBackground{
    background-color: transparent;
}
.loginArea>.centerArea>.dataArea ul.memo{
    width: calc(100% - 40px * 2 - 1px * 2);
    min-height: calc(210px - 20px * 2 - 1px * 2);
    list-style-position: inside;
    border: 1px solid #DDDDDD;
    color: rgb(137, 137, 137);
    font-family: Arial, Microsoft JhengHei;
    font-size: 17px;
    font-weight: bold;
    line-height: normal;
    text-align: left;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 20px 40px;
}
@media screen and (orientation: portrait){
    .loginArea>.centerArea>.dataArea ul.memo{
        width: calc(100% - 3.889vw * 2 - 1px * 2);
        min-height: auto;
        font-size: 3.75vw;
        padding: 3.889vw;
    }
}
.loginArea>.centerArea>.dataArea ul.memo+ul.formArea{
    margin: 50px 0px 0px 0px;
}
.loginArea>.centerArea>.dataArea ul.memo>li{
    width: calc(100% - 24px);
    list-style-type: disc;
    text-align: justify;
    text-indent: -24px;
    margin: 0px 0px 0px 24px;
}
@media screen and (orientation: portrait){
    .loginArea>.centerArea>.dataArea ul.memo>li{
        width: calc(100% - 5.625vw);
        text-indent: -5.625vw;
        margin: 0px 0px 0px 5.625vw;
    }
}
.loginArea>.centerArea>.dataArea ul.memo>li em,
.loginArea>.centerArea>.dataArea ul.memo>li a{
    color: var(--ddms-color-1);
    font-style: normal;
}
.loginArea>.centerArea>.dataArea .buttonArea{
    font-size: 14px;
    font-weight: bold;
    margin: 40px 0px 0px 0px;
    outline: none;
}
@media screen and (orientation: portrait){
    .loginArea>.centerArea>.dataArea .buttonArea{
        margin: 0px;
    }
}
.loginArea>.centerArea>.dataArea .buttonArea .functionBtn{
    height: auto;
    background: linear-gradient(
        180deg,
        rgb(149, 149, 149) 0%,
        rgb(115, 115, 115) 100%
    );
    border: 1px solid rgb(140, 140, 140);
    border-radius: 3px;
    box-shadow: 0px 2px 2px 0px rgb(100, 100, 100);
    color: rgb(255, 255, 255);
    font-size: 14px;
    font-weight: bold;
    line-height: normal;
    padding: 2px 12px;
    margin: 0px 20px 0px 0px;
    position: relative;
    top: -1px;
    cursor: pointer;
    outline: none;
}
@media screen and (orientation: portrait){
    .loginArea>.centerArea>.dataArea .buttonArea .functionBtn{
        border-radius: 0.5vw;
        box-shadow: 0px 0.2vw 0.2vw 0px rgb(100, 100, 100);
        font-size: 3.75vw;
        padding: 0.5vw 3.889vw;
        margin: 0px 0px 0px 0px;
        top: 0px;
    }
}
.loginArea>.centerArea>.dataArea .buttonArea em{
    color: var(--ddms-color-1);
}
@media screen and (orientation: portrait){
    .loginArea>.centerArea>.dataArea .buttonArea em{
        display: none;
    }
}

.loginArea>.functionsArea{
    width: calc(100% - 50px * 2);
    background-color: var(--ddms-color-3);
    color: rgb(255, 255, 255);
    font-family: Arial, Microsoft JhengHei;
    font-size: 12px;
    font-weight: normal;
    text-decoration: none;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 14px 50px;
}
@media screen and (orientation: portrait){
    .loginArea>.functionsArea{
        width: 100%;
        font-size: 3.75vw;
        padding: 7px 0px;
    }
}
/* 設計者 */
.loginArea>.functionsArea>div{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 15px;
    cursor: pointer;
}
@media screen and (orientation: portrait){
    .loginArea>.functionsArea>div{
        flex-grow: 1;
        justify-content: center;
        margin: 0px 4.688vw;
    }
}
.loginArea>.functionsArea>div img{
    height: 18px;
    margin: 0px 5px;
}
@media screen and (orientation: portrait){
    .loginArea>.functionsArea>div img{
        height: 5.625vw;
        margin: 0px 1.563vw;
    }
}
.loginArea>.functionsArea>div.designer img{
    height: 22px;
}
@media screen and (orientation: portrait){
    .loginArea>.functionsArea>div.designer img{
        height: 6.875vw;
    }
}


/* =========================================================
 * 內頁
 * ========================================================= */
.rwdArea{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    position: absolute;
    top: 0px;
    left: 0px;
    /*overflow-x: hidden;*/
    overflow-y: auto;
}
.rwdArea>.pagesContent{
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: flex-start;
    position: relative;
}

/* =========================================================
 * 左邊選單區塊
 * ========================================================= */
.pagesContent>nav{
    width: calc(80px - 10px * 2);
    max-width: calc(100% - 20px * 2);
    height: calc(100% - 30px * 2);
    background-color: rgba(71, 71, 71, 0.9);
    opacity: 1;
    color: #999999;
    font-family: Arial, Microsoft JhengHei;
    font-weight: normal;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    padding: 30px 10px;
    overflow: hidden;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 999;
}
@media screen and (orientation: portrait){
    .pagesContent>nav{
        width: calc(100% - 6.111vw * 2);
        max-width: unset;
        height: calc(100% - 6.111vw * 2);
        background-color: rgba(71, 71, 71, 0.98);
        opacity: 0;
        color: #FFFFFF;
        padding: 6.111vw;
        left: -100%;
    }
}
.pagesContent>nav:hover,
.pagesContent>nav.open{
    width: auto;
    padding: 30px;
}
@media screen and (orientation: portrait){
    .pagesContent>nav:hover{
        width: calc(100% - 6.111vw * 2);
        padding: 6.111vw;
    }
    .pagesContent>nav.open{
        width: calc(100% - 6.111vw * 2);
        padding: 6.111vw;
        animation: 0.3s linear 0s normal forwards 1 animationMenuOpen;
    }
}
@keyframes animationMenuOpen{
    0%  { opacity: 0; left: -100%; }
    100%{ opacity: 1; left: 0px;   }
}
.pagesContent>nav a{
    color: #999999;
}
@media screen and (orientation: portrait){
    .pagesContent>nav a{
        color: #FFFFFF;
    }
}
.pagesContent>nav a:hover{
    color: #FFFFFF;
}
.pagesContent>nav>ul.block{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: flex-start;
}
@media screen and (orientation: portrait){
    .pagesContent>nav>ul.block{
        min-height: unset;
        max-height: 100%;
        flex-grow: 1;
    }
}
.pagesContent>nav>ul.block>li{
    width: 100%;
    display: none;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 25px 0px;
}
.pagesContent>nav:hover>ul.block>li,
.pagesContent>nav.open>ul.block>li{
    display: flex;
}

.pagesContent>nav>ul.block>li.logoArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
}
.pagesContent>nav>ul.block>li.logoArea>a{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
}
.pagesContent>nav>ul.block>li.logoArea>a>.logo{
    max-width: 60px;
}
.pagesContent>nav>ul.block>li.logoArea>a>.name{
    font-size: 23px;
    display: none;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin: 10px 0px 20px 0px;
    cursor: pointer;
}
.pagesContent>nav:hover>ul.block>li.logoArea>a>.name,
.pagesContent>nav.open>ul.block>li.logoArea>a>.name{
    /*display: flex;*/
    display: none;
}

.pagesContent>nav>ul.block>li.menuArea{
    font-size: 22px;
    font-weight: bold;
    flex-grow: 1;
}
@media screen and (orientation: portrait){
    .pagesContent>nav>ul.block>li.menuArea{
        flex-wrap: nowrap;
        flex-shrink: 1;
        overflow-x: hidden;
        overflow-y: auto;
    }
}
.pagesContent>nav>ul.block>li.menuArea>ul{
    width: calc(100% - 15px * 2);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    padding: 0px 15px;
}
.pagesContent>nav>ul.block>li.menuArea ul>li{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: flex-start;
    margin: 1px 0px;
    padding: 5px 0px;
}
.pagesContent>nav>ul.block>li.menuArea ul>li>label,
.pagesContent>nav>ul.block>li.menuArea ul>li>a{
    width: 100%;
    display: inline-flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: flex-start;
    cursor: pointer;
}
.pagesContent>nav>ul.block>li.menuArea ul>li>label:hover{
    color: #FFFFFF;
}
.pagesContent>nav>ul.block>li.menuArea ul>li>label:after{
    content: '';
    width: 10px;
    height: 10px;
    border-right: 1px solid rgb(137, 137, 137);
    border-bottom: 1px solid rgb(137, 137, 137);
    display: inline-flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    /*transform-origin: right bottom;*/
    transform: rotate(45deg);
    position: relative;
    top: 5px;
    left: -5px;
}
.pagesContent>nav>ul.block>li.menuArea ul>li>label:hover:after{
    border-right: 1px solid rgb(255, 255, 255);
    border-bottom: 1px solid rgb(255, 255, 255);
}
.pagesContent>nav>ul.block>li.menuArea ul>li.current>a,
.pagesContent>nav>ul.block>li.menuArea ul>li.current>label{
    color: var(--ddms-color-1);
}
@media screen and (orientation: portrait){
    .pagesContent>nav>ul.block>li.menuArea ul>li.current>a:hover,
    .pagesContent>nav>ul.block>li.menuArea ul>li.current>label:hover{
        color: var(--ddms-color-1);
    }
}
.pagesContent>nav>ul.block>li.menuArea ul>li.current>label:after{
    border-right: 1px solid var(--ddms-color-1);
    border-bottom: 1px solid var(--ddms-color-1);
    transform: rotate(225deg);
    top: 15px;
    left: -5px;
}
.pagesContent>nav>ul.block>li.menuArea>ul ul{
    width: calc(100% - 18px * 2);
    max-height: 0px;
    margin: 0px 0px 0px calc(18px * 2);
    padding: 0px 20px 0px 0px;
    overflow: hidden;
}
.pagesContent>nav>ul.block>li.menuArea>ul li.current>label+ul{
    margin: calc(1px + 5px) 0px 0px calc(18px * 2);
}
.pagesContent>nav>ul.block>li.menuArea>ul li:last-of-type{
    margin: 1px 0px 0px 0px;
    padding: 8px 0px 0px 0px;
}
.pagesContent>nav>ul.block>li.menuArea li.current>ul{
    max-height: max-content;
    transition: max-height 0.5s ease-in;
}

.pagesContent>nav>ul.block>li.optionArea{
    color: rgb(137, 137, 137);
    font-size: 12px;
    margin: 25px 0px 0px 0px;
}
.pagesContent>nav>ul.block>li.optionArea span{
    color: var(--ddms-color-1);
}
.pagesContent>nav>ul.block>li.optionArea .userArea{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
}
.pagesContent>nav>ul.block>li.optionArea .userArea>.logoutBtn{
    background: linear-gradient(
        180deg,
        rgb(149, 149, 149) 0%,
        rgb(115, 115, 115) 100%
    );
    border: 1px solid rgb(140, 140, 140);
    border-radius: 3px;
    box-shadow: 0px 2px 2px 0px rgb(100, 100, 100);
    color: rgb(214, 214, 214);
    font-size: 14px;
    font-weight: bold;
    padding: 2px 12px;
    margin: 0px 0px 0px 20px;
    position: relative;
    top: -1px;
    cursor: pointer;
    outline: none;
}
.pagesContent>nav>ul.block>li.optionArea .userArea>.logoutBtn:hover{
    color: rgb(255, 255, 255);
}
.pagesContent>nav>ul.block>li.optionArea .menuBtn{
    display: none;
}

/* =========================================================
 * 右邊主頁
 * ========================================================= */
.pagesContent>.rightContent{
    width: calc(100% - 10px - 80px - 1px * 2);
    max-width: calc(1400px - 10px - 80px - 1px * 2);
    min-height: calc(100vh - 10px * 2 - 1px * 2);
    background-color: rgb(255, 255, 255);
    box-shadow: 10px 10px 20px 0px rgba(72, 72, 72, 0.75);
    border: 1px solid #A1A1A1;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: stretch;
    margin: 10px 10px 10px 80px;
    padding: 0px 0px 0px 0px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent{
        max-width: calc(930px - 1px * 2);
    }
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent{
        width: 100%;
        min-height: 100vh;
        max-width: unset;
        box-shadow: none;
        border: 0;
        margin: 0px;
    }
}


/* =========================================================
 * 右邊主頁 - 上方區塊
 * ========================================================= */
.pagesContent>.rightContent>.topArea{
    width: calc(100% - 3.125% * 2);
    background-color: var(--user-color-1);
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: stretch;
    padding: 1.04% 3.125%;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.topArea{
        width: calc(100% - 5vw * 2);
        height: calc(31.111vw - 5vw * 2);
        background-color: rgb(28, 67, 70);
        justify-content: center;
        align-items: flex-end;
        padding: 5vw;
        position: relative;
    }
    .pagesContent>.rightContent>.topArea>.menuIcon{
        width: 9.812vw;
        height: 6.719vw;
        background-color: transparent;
        background-image: url(/images/iconMenu.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center center;
        border: 0px;
        color: transparent;
        overflow: hidden;
        position: absolute;
        bottom: 5vw;
        left: 6.111vw;
        z-index: 999;
    }
}


/* =========================================================
 * 右邊主頁 - 上方區塊 - 大標題
 * ========================================================= */
.pagesContent>.rightContent>.topArea>h1{
    color: rgb(255, 255, 255);
    font-family: Arial, Microsoft JhengHei;
    font-size: 22px;
    font-weight: bold;
    text-align: left;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.topArea>h1{
        position: relative;
        top: 2px;
    }
}


/* =========================================================
 * 右邊主頁 - 上方區塊 - 麵包屑
 * ========================================================= */
.pagesContent>.rightContent>.topArea>.breadcrumbs{
    color: rgb(255, 255, 255);
    font-family: Arial, Microsoft JhengHei;
    font-size: 14px;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-end;
    align-items: flex-end;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.topArea>.breadcrumbs{
        display: none;
    }
}
.pagesContent>.rightContent>.topArea>.breadcrumbs>li{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
}
.pagesContent>.rightContent>.topArea>.breadcrumbs>li:before{
    content: ">";
    color: rgb(255, 255, 255);
    font-family: Arial, Microsoft JhengHei;
    font-size: 14px;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    margin: 0px 5px;
}
.pagesContent>.rightContent>.topArea>.breadcrumbs>li:first-child:before{
    content: none;
}
.pagesContent>.rightContent>.topArea>.breadcrumbs a{
    color: rgb(255, 255, 255);
    text-decoration: none;
}
.pagesContent>.rightContent>.topArea>.breadcrumbs a:hover{
    text-decoration: underline;
}


/* =========================================================
 * 右邊主頁 - 中間區塊
 * ========================================================= */
.pagesContent>.rightContent>.centerArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.goToTop{
        width: 10vw;
        height: 10vw;
        background: linear-gradient(
            135deg,
            transparent 50%,
            rgb(0, 0, 0) 50%
        ),  linear-gradient(
            45deg,
            rgb(0, 0, 0) 50%,
            transparent 50%
        ), rgba(200, 200, 200, 0.7);
        background-position: calc(5vw - 3vw) calc(5vw - 3vw / 2), 5vw calc(5vw - 3vw / 2), center center;
        background-size: 3vw 3vw, 3vw 3vw, 100% 100%;
        background-repeat: no-repeat;
        -webkit-appearance: none;
        -webkit-border-radius: 5vw;
        -moz-border-radius: 5vw;
        border-radius: 5vw;
        border: 0px;
        color: transparent;
        display: none;
        position: fixed;
        right: 5px;
        bottom: 5vh;
        z-index: 2;
        overflow: hidden;
    }
}

/* =========================================================
 * 右邊主頁 - 中間區塊 - 籤頁
 * ========================================================= */
.pagesContent>.rightContent>.centerArea>.centerAreaTabs{
    max-width: 100%;
    /*display: flex;*/
    display: none;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    margin: 0px;
    padding: 0px 10px;
}
.pagesContent>.rightContent>.centerArea>.centerAreaTabs>ul{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}
.pagesContent>.rightContent>.centerArea>.centerAreaTabs>ul>li{
    /*min-width: 7%;*/
    height: 40px;
    background-color: #EFEFEF;
    border-top: 1px solid #A1A1A1;
    border-right: 1px solid #A1A1A1;
    border-left: 1px solid #A1A1A1;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    -moz-border-top-left-radius: 8px;
    -moz-border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    color: #333333;
    font-family: Arial, Microsoft JhengHei;
    font-size: 14px;
    font-weight: normal;
    line-height: 40px;
    text-align: center;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 0px 20px;
    cursor: pointer;
}
.pagesContent>.rightContent>.centerArea>.centerAreaTabs>ul>li:hover{
    background-color: #F5F5F5;
}
.pagesContent>.rightContent>.centerArea>.centerAreaTabs>ul>li.current{
    background-color: #FFFFFF;
    font-size: 18px;
    font-weight: bold;
    cursor: default;
}
.pagesContent>.rightContent>.centerArea>.centerAreaTabs>ul>li.current:hover{
    background-color: #FFFFFF;
    font-weight: bold;
}
.pagesContent>.rightContent>.centerArea>.centerAreaTabs>ul>li>a{
    color: #333333;
}
.pagesContent>.rightContent>.centerArea>.centerAreaTabs>input[type='button']{
    width: 30px;
    height: 30px;
    background-color: #FFFFFF;
    border: 1px solid #A1A1A1;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
/*
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    box-shadow: 1px 1px 1px 1px rgb(60%, 60%, 60%);
*/
    color: #333333;
    font-size: 18px;
    line-height: 20px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin: 0px 0px 0px 5px;
    padding: 0px ;
    cursor: pointer;
}
.pagesContent>.rightContent>.centerArea>.centerAreaTabs>input[type='button']:hover{
    color: #000000;
    font-size: 20px;
    line-height: 20px;
}
.pagesContent>.rightContent>.centerArea>.centerAreaTabs>input[type='button'].left{
    transform: rotate(180deg);
    margin: 0px 5px 0px 0px;
}


/* =========================================================
 * 右邊主頁 - 中間區塊 - 內容
 * ========================================================= */
.pagesContent>.rightContent>.centerArea>.centerAreaContents{
    width: calc(100% - 40px * 2);
    height: calc(100% - 40px * 2);
    padding: 40px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents{
        width: 100%;
        height: 100%;
        padding: 0px;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents img{
    max-width: 100%;
    max-height: 50vh;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents h2{
    color: rgb(73, 73, 73);
    font-family: Arial, Microsoft JhengHei;
    font-size: 22px;
    font-weight: bold;
    text-align: left;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 30px 0px 12px 0px;
    padding: 0px 0px 0px 0px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents h2{
        font-size: 20px;
    }
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents h2{
        width: calc(100% - 5vw * 2);
        height: 10.511vw;
        background-color: #000000;
        color: #FFFFFF;
        font-size: 4.104vw;
        align-items: center;
        margin: 0px;
        padding: 0px 5vw;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents h2:first-child{
    margin: 0px 0px 12px 0px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents h2:first-child{
        margin: 0px;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .paveContent{
    width: calc(100% - 25px * 2 - 80px);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    padding: 20px 25px 20px calc(80px + 25px);
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents .paveContent{
        width: calc(100% - 5vw * 2);
        padding: 5vw;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .paveContent>.viewArea{
    width: 100%;
    max-width: 1400px;
    background-color: rgb(255, 255, 255);
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents .paveContent>.viewArea{
        max-width: 930px;
    }
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents .paveContent>.viewArea{
        max-width: unset;
        background-color: transparent;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .paveContent>.viewArea .dataTable .th{
    background-color: var(--user-color-2);
    border-color: var(--user-color-2);
}

.pagesContent>.rightContent>.centerArea .checkboxAreaWithText{
    position: relative;
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}
.pagesContent>.rightContent>.centerArea .checkboxAreaWithText input[type='checkbox']{
    width: 1em;
    visibility: hidden;
    margin: 0px 1em 0px 0px;
}
.pagesContent>.rightContent>.centerArea .checkboxAreaWithText input[type='checkbox'] ~ i{
    width: calc(1em - 1px * 2);
    height: calc(1em - 1px * 2);
    background-color: rgb(255, 255, 255);
    opacity: 0.5;
    border: 1px solid #CCCCCC;
    display: flex;
    position: absolute;
    top: 0.25em;
    left: 0px;
    cursor: pointer;
}
.pagesContent>.rightContent>.centerArea .checkboxAreaWithText input[type='checkbox']:active ~ i,
.pagesContent>.rightContent>.centerArea .checkboxAreaWithText input[type='checkbox']:hover ~ i,
.pagesContent>.rightContent>.centerArea .checkboxAreaWithText input[type='checkbox']:checked ~ i{
    opacity: 1;
}
.pagesContent>.rightContent>.centerArea .checkboxAreaWithText input[type='checkbox'] ~ i:after{
    content: '';
    width: 0.25em;
    height: 0.5em;
    border: solid rgb(38.28, 38.28, 38.28);
    border-width: 0px 0.16em 0.16em 0px;
    display: none;
    position: absolute;
    left: 0.32em;
    bottom: 0.2em;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.pagesContent>.rightContent>.centerArea .checkboxAreaWithText input[type='checkbox']:active ~ i:after,
.pagesContent>.rightContent>.centerArea .checkboxAreaWithText input[type='checkbox']:checked ~ i:after{
    display: block;
}

/* =========================================================
 * 右邊主頁 - 中間區塊 - 內容 - 表單樣式
 * ========================================================= */
.dataArea{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: stretch;
}
@media screen and (orientation: portrait){
    .dataArea{
        flex-direction: column;
    }
}
.formArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0px 0px 20px 0px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .formArea{
        flex-wrap: wrap;
    }
}
@media all and (min-width: 1200px) {
    .formArea.twoColumn{
        width: calc((100% - 70px) / 2);
        margin: 0px 0px 20px 0px;
    }
    .formArea.twoColumn:nth-of-type(even){
        width: calc((100% - 70px) / 2);
        flex-grow: 1;
        margin: 0px 0px 20px 70px;
    }
    .formArea.twoColumn:nth-of-type(odd){
        flex-grow: 1;
    }
}
@media screen and (orientation: portrait){
    .formArea{
        width: calc(100% - 5vw * 2);
        margin: 5vw;
    }
    .formArea:last-child{
        margin: 0px 5vw 5vw 5vw;
    }
    .formArea.nonePadding{
        width: 100%;
        margin: 0px;
    }
}
.formArea>li{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    margin: 0px 0px 20px 0px;
}
@media screen and (orientation: portrait){
    .formArea>li{
        margin: 0px 0px 2.778vw 0px;
    }
}
.formArea>li:last-child{
    margin: 0px;
}
.formArea>li>H2{
    min-width: 100px;
    color: #000000;
    font-family: Arial, Microsoft JhengHei;
    font-size: 18px;
    font-weight: bold;
    line-height: 40px;
    text-align: right;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-end;
    align-items: flex-start;
    margin: 0px 10px 10px 0px;
    padding: 0px 0px 0px 0px;
}
.formArea>li>label{
    width: 110px;
    color: rgb(73, 73, 73);
    font-size: 18px;
    font-weight: bold;
    line-height: normal;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .formArea>li>label{
        font-size: 16px;
    }
}
@media screen and (orientation: portrait){
    .formArea>li>label{
        width: auto;
        min-width: 23vw;
        max-width: 26vw;
        font-size: 3.889vw;
        /*text-align-last: justify;*/
        text-align: right;
        display: inline;
        margin: 0px 3vw 0px 0px;
        padding: 2.744vw 0px;
    }
}
.formArea>li>label:before{
    content: '';
    margin: 0px 12px 0px 0px;
}
@media screen and (orientation: portrait){
    .formArea>li>label:before{
        margin: 0px;
    }
}
.formArea>li.required>label:before{
    content: '*';
    color: rgb(235, 97, 0);
    font-size: 18px;
    margin: 0px 3px 0px 0px;
}
@media screen and (orientation: portrait){
    .formArea>li.required>label:before{
        font-size: 3.889vw;
        margin: 0px 0.555vw 0px 0px;
    }
}
.formArea>li>label em{
    color: #666666;
    font-size: 18px;
    font-style: normal;
    font-weight: normal;
    position: absolute;
    right: 0px;
}
.formArea>li>label em span{
    color: #FF0000;
    font-size: 18px;
    font-weight: bold;
}
.formArea>li>div{
    background-color: rgb(248, 248, 248);
    color: rgb(73, 73, 73);
    font-size: 18px;
    font-weight: bold;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
    padding: 6px 25px;
}
@media screen and (orientation: portrait){
    .formArea>li>div{
        font-size: 3.889vw;
        padding: 2.22vw 3.889vw;
    }
}
.formArea>li>div.noBackground{
    background-color: transparent;
    padding: 6px 0px;
}
.formArea>li>input[type='tel'],
.formArea>li>input[type='email'],
.formArea>li>input[type='number'],
.formArea>li>input[type='text'],
.formArea>li>input[type='password'],
.formArea>li>input[type='search']{
    max-width: calc(100% - 25px * 2);
    min-width: 0px;
    background-color: rgb(248, 248, 248);
    border: 0px;
    color: rgb(38.28, 38.28, 38.28);
    font-size: 18px;
    font-weight: bold;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    padding: 6px 25px;
    outline: none;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .formArea>li>input[type='tel'],
    .formArea>li>input[type='email'],
    .formArea>li>input[type='number'],
    .formArea>li>input[type='text'],
    .formArea>li>input[type='password'],
    .formArea>li>input[type='search']{
        max-width: calc(100% - 20px * 2);
        font-size: 16px;
        padding: 6px 20px;
    }
}
@media screen and (orientation: portrait){
    .formArea>li>input[type='tel'],
    .formArea>li>input[type='email'],
    .formArea>li>input[type='number'],
    .formArea>li>input[type='text'],
    .formArea>li>input[type='password'],
    .formArea>li>input[type='search']{
        max-width: calc(100% - 3.889vw * 2);
        height: calc(10.479vw - 2.22vw * 2);
        font-size: 3.889vw;
        flex-shrink: 1;
        padding: 2.22vw 3.889vw;
    }
}
.formArea>li>input[type='date']{
    max-width: calc(100% - 25px * 2);
    min-width: 0px;
    border: 0px;
    color: rgb(38.28, 38.28, 38.28);
    font-size: 18px;
    font-weight: bold;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    padding: 6px 25px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .formArea>li>input[type='tel'],
    .formArea>li>input[type='email'],
    .formArea>li>input[type='number'],
    .formArea>li>input[type='text'],
    .formArea>li>input[type='password'],
    .formArea>li>input[type='search']{
        max-width: calc(100% - 20px * 2);
        font-size: 16px;
        padding: 6px 20px;
    }
}
@media screen and (orientation: portrait){
    .formArea>li>input[type='date']{
        max-width: calc(100% - 3.889vw * 2);
        height: calc(10.479vw - 2.22vw * 2);
        font-size: 3.889vw;
        flex-shrink: 1;
        padding: 2.22vw 3.889vw;
    }
}
.formArea>li>div>input[type='radio']{
    border: 1px solid #A1A1A1;
    margin: 0px 5px 0px 0px;
    outline: none;
}
.formArea>li>div>input[type='radio']+span{
    margin: 0px 20px 0px 0px;
}
.formArea>li>div>input[type='radio']+span:last-child{
    margin: 0px 0px 0px 0px;
}
.formArea>li>select{
    width: calc(100% - 25px * 2);
    background-color: rgb(248, 248, 248);
    border: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    color: rgb(38.28, 38.28, 38.28);
    font-size: 18px;
    font-weight: bold;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
    margin: 0px;
    padding: 6px 25px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .formArea>li>select{
        width: calc(100% - 20px * 2);
        font-size: 16px;
        padding: 6px 20px;
    }
}
@media screen and (orientation: portrait){
    .formArea>li>select{
        width: calc(100% - 3.889vw * 3);
        height: 10.479vw;
        font-size: 3.889vw;
        padding: 2.22vw 3.889vw;
    }
}
.formArea>li>select:invalid{
    color: #CCCCCC;
}
.formArea>li>select>option{
    color: #000000;
}
.formArea>li>select>option:disabled{
    color: #CCCCCC;
}
.formArea>li textarea{
    width: calc(100% - 25px * 2);
    min-height: calc(110px - 6px * 2);
    background-color: rgb(248, 248, 248);
    border: 0px;
    font-size: 18px;
    font-weight: bold;
    flex-wrap: nowrap;
    flex-grow: 1;
    flex-shrink: 1;
    padding: 6px 25px;
    resize: none;
}
@media screen and (orientation: portrait){
    .formArea>li textarea{
        width: calc(100% - 3.889vw * 2);
        min-height: calc((10.479vw - 2.22vw) * 5);
        font-size: 3.889vw;
        padding: 2.22vw 3.889vw 0px 3.889vw;
    }
}

.formArea>li>div>input:read-only{
    background-color: transparent;
    border: 0px;
}
.formArea>li>div>input.alert:focus{
    outline: none !important;
    border: 1px solid #CC0000;
}
.formArea label.switch{
    flex-wrap: wrap;
    padding: 0px 0px 58px 0px;
    cursor: pointer;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr>.td>label.switch,
    #cyMsgBox .dataTable.newItemsTable>.tr>.td>label.switch{
        width: 100%;
    }
}
.formArea label.switch input{
    width: 0px;
    height: 0px;
    opacity: 0;
}
.formArea label.switch .slider{
    height: 100%;
    max-height: 58px;
    background-color: #CCCCCC;
    position: absolute;
    left: 0px;
    bottom: 0px;
    transition: .4s;
    -webkit-transition: .4s;
}
.formArea label.switch .slider:before{
    content: '';
    height: calc(100% - 7px * 2);
    max-height: 44px;
    background-color: #FFFFFF;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 7px;
    transform: translateY(-50%);
    transition: .4s;
    -webkit-transition: .4s;
}
.formArea label.switch input:checked+.slider{
    background-color: #2196F3;
}
.formArea label.switch input:focus+.slider{
    box-shadow: 0px 0px 1px #2196F3;
}
.formArea label.switch input:checked+.slider:before{
    transform: translateX(100%) translateY(-50%);
    -webkit-transform: translateX(100%) translateY(-50%);
    -ms-transform: translateX(100%) translateY(-50%);
}
.formArea label.switch .slider{
    width: 100%;
    max-width: calc(115px * 2 + 7px * 2);
    border-radius: 58px;
}
.formArea label.switch .slider:before{
    content: attr(data-unChecked);
    width: calc(50% - 10px * 2 - 7px);
    max-width: calc(115px - 10px * 2);
    border-radius: calc(44px / 2);
    color: #000000;
    font-size: 18px;
    text-align: center;
    line-height: normal;
    padding: 0px 10px;
}
.formArea label.switch input:checked+.slider:before{
    content: attr(data-checked);
}
.formArea>li .CKEditor{
    width: 100%;
    height: 400px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: center;
    align-items: center;
    margin: 0px 10px 0px 0px;
}
.formArea>li .CKEditor.alert+div.cke_editor_content{
    border: 1px solid #CC0000;
}
.formArea>li div.cke_editor_content{
    width: calc(100% - 1px * 2);
    padding: 0px;
}
.formArea>li div.cke_editor_content .cke_inner{
    width: 100%;
}
.formArea>li>div>#gCodeImg{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 2vw;
    cursor: pointer;
}
@media screen and (orientation: portrait){
    .formArea>li>div>#gCodeImg{
        width: 33.333vw;
        height: 9.025vw;
        margin: 0px;
    }
}
.formArea>li>div>#gCode{
    width: auto;
    min-width: 0px;
    background-color: rgb(248, 248, 248);
    border: 0px;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
    padding: 6px 25px;
}
@media screen and (orientation: portrait){
    .formArea>li>div>#gCode{
        width: calc(100% - 3.889vw * 2);
        max-width: calc(100% - 3.889vw * 2);
        min-height: calc(10.479vw - 2.22vw * 2);
        font-size: 3.889vw;
        margin: 0px 0px 2.778vw 0px;
        padding: 2.22vw 3.889vw;
    }
}

.formArea .placeholderArea{
    background-color: rgb(248, 248, 248);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    padding: 0px;
    position: relative;
    overflow: hidden;
}
.formArea .placeholderArea>input{
    background-color: transparent;
    border: 0px;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    padding: 6px 25px;
}
@media screen and (orientation: portrait){
    .formArea .placeholderArea>input{
        font-size: 3.889vw;
        padding: 2.22vw 3.889vw;
    }
}
.formArea .placeholderArea>input:valid + .placeholder,
.formArea .placeholderArea>input:focus + .placeholder{
    display: none;
}
.formArea .placeholderArea>.placeholder{
    min-width: max-content;
    color: #CCCCCC;
    font-size: 18px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 0;
    position: absolute;
    justify-content: flex-start;
    align-items: center;
    left: 25px;
    pointer-events: none;
}
@media screen and (orientation: portrait){
    .formArea .placeholderArea>.placeholder{
        font-size: 3.889vw;
        left: 3.889vw;
    }
}
.formArea .placeholderArea>.placeholder>em{
    color: var(--ddms-color-1);
    font-style: normal;
}

.formArea *::-webkit-input-placeholder{
    color: #CCCCCC;
}
.formArea *:-moz-input-placeholder{
    color: #CCCCCC;
}
.formArea *::-moz-placeholder{
    color: #CCCCCC;
}
.formArea *:-ms-input-placeholder{
    color: #CCCCCC;
}

/* 說明區 */
.formArea div.memo>ol{
    list-style-type: decimal;
    width: calc(100% - 1.25vw);
    margin: 0px 0px 0px 1.25vw;
}
.formArea div.memo>ol>li{
    font-size: 18px;
    line-height: 1.875vw;
    text-align: justify;
    margin: 0px 0px 1.875vw 0px;
}
.formArea div.memo>ol>li>span{
    color: #FF0000;
    font-weight: bold;
}

/* 編輯區 */
.formArea>ul.editArea>li{
    display: none;
}
.formArea>ul.editArea.edit>div.memo{
    display: none;
}
.formArea>ul.editArea>div.btn{
    display: none;
}
.formArea>ul.editArea.edit>div.btn{
    display: block;
}

.flexRow{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
}
.flexDirectionRow{
    flex-direction: row !important;
}
.flexDirectionColumn{
    flex-direction: column !important;
}


/* =========================================================
 * 右邊主頁 - 中間區塊 - 內容 - 表單樣式 2
 * ========================================================= */
div.form{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: stretch;
    margin: 0px 0px 20px 0px;
}
@media screen and (orientation: portrait){
    div.form{
        width: calc(100% - 20px * 2);
        margin: 0px 20px 20px 20px;
    }
    #cyMsgBox div.form{
        margin: 0px;
    }
}
div.form>h2{
    margin: 0.52083vw 0px;
}
@media screen and (orientation: portrait){
    div.form>h2{
        margin: 1.5625vw 0px;
    }
}
div.form>ul.dataRow{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: space-between;
}
@media all and (min-width: 1200px) {
    div.form>ul.dataRow.twoColumn{
        width: calc((100% - 2.0833vw) / 2);
        margin: 0px 0px 20px 0px;
    }
    div.form>ul.dataRow.twoColumn:nth-of-type(odd),
    div.form>ul.dataRow.twoColumn.odd:nth-of-type(even){
        flex-grow: 1;
        margin: 0px 0px 20px 0px;
    }
    div.form>ul.dataRow.twoColumn:nth-of-type(even),
    div.form>ul.dataRow.twoColumn.even:nth-of-type(odd){
        width: calc((100% - 2.0833vw) / 2);
        flex-grow: 0;
        margin: 0px 0px 20px 2.0833vw;
    }

    div.form>ul.dataRow.threeColumn{
        width: calc((100% - 2.0833vw * 2) / 3);
        margin: 0px 2.0833vw 20px 0px;
    }
    div.form>ul.dataRow.threeColumn:nth-of-type(3n){
        flex-grow: 1;
        margin: 0px 0px 20px 0px;
    }

    div.form>ul.dataRow.fourColumn{
        width: calc((100% - 2.0833vw * 3) / 4);
        margin: 0px 2.0833vw 20px 0px;
    }
    div.form>ul.dataRow.fourColumn:nth-of-type(4n){
        flex-grow: 1;
        margin: 0px 0px 20px 0px;
    }
}
@media screen and (orientation: portrait){
    div.form>ul.dataRow{
        width: calc(100% - 5vw * 2);
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        margin: 5vw;
    }
}
div.form>ul.dataRow>li{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    margin: 0px 0px 20px 0px;
}
@media all and (min-width: 1200px) {
    div.form>ul.dataRow.twoColumn>li:last-child{
        margin: 0px;
    }
}
div.form .dragImageUploadArea>.configArea>.viewArea ul.form>li>label,
div.form>ul.dataRow>li>label{
    line-height: 50px;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    /*margin: 0px 20px 0px 0px;*/
    position: relative;
}
@media screen and (orientation: portrait){
    div.form .dragImageUploadArea>.configArea>.viewArea ul.form>li>label,
    div.form>ul.dataRow>li>label{
        line-height: 9.375vw;
    }
}
@media screen and (orientation: portrait){
    div.form .dragImageUploadArea>.configArea>.viewArea ul.form>li>label,
    div.form>ul.dataRow>li>label{
        width: 100%;
        line-height: 12.5vw;
        font-size: 4.375vw;
    }
}
div.form .dragImageUploadArea>.configArea>.viewArea ul.form>li.required>label:after,
div.form>ul.dataRow>li.required>label:after{
    content: '\2605';
    color: #FF0000;
    font-size: 18px;
    margin: 0px 0px 0px 0.3vw;
}
@media screen and (orientation: portrait){
    div.form .dragImageUploadArea>.configArea>.viewArea ul.form>li.required>label:after,
    div.form>ul.dataRow>li.required>label:after{
        font-size: 4.375vw;
    }
}
div.form .dragImageUploadArea>.configArea>.viewArea ul.form>li.required>label.switch:after,
div.form>ul.dataRow>li.required>label.switch:after{
    content: '';
}
div.form .dragImageUploadArea>.configArea>.viewArea ul.form>li>label em,
div.form>ul.dataRow>li>label em{
    color: #666666;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    line-height: normal;
    display: flex;
    align-items: center;
    position: absolute;
    right: 0px;
}
@media screen and (orientation: portrait){
    div.form .dragImageUploadArea>.configArea>.viewArea ul.form>li>label em,
    div.form>ul.dataRow>li>label em{
        width: 60%;
        font-size: 3.75vw;
        flex-wrap: nowrap;
        justify-content: flex-end;
    }
}
div.form .dragImageUploadArea>.configArea>.viewArea ul.form>li>label em span,
div.form>ul.dataRow>li>label em span{
    color: #FF0000;
    font-size: 18px;
    font-weight: bold;
}
@media screen and (orientation: portrait){
    div.form .dragImageUploadArea>.configArea>.viewArea ul.form>li>label em span,
    div.form>ul.dataRow>li>label em span{
        font-size: 4.375vw;
    }
}
div.form>ul.dataRow>li>div{
    width: calc(100% - ((50px - 18px) / 2 * 2));
    font-size: 18px;
    padding: calc((50px - 18px) / 2);
}
div.form>ul.dataRow>li>div.columnDisplay{
    background-color: rgba(239, 239, 239, 0.3);
    border: 1px solid #CCCCCC;
    color: rgb(84, 84, 84);
}
div.form>ul.dataRow>li>div.grayBackground{
    background-color: rgba(239, 239, 239, 0.3);
}
div.form input[type='tel'],
div.form input[type='email'],
div.form input[type='number'],
div.form input[type='text'],
div.form input[type='password'],
div.form input[type='date']{
    width: calc(100% - ((50px - 18px) / 2) * 2 - 1px * 2);
    border: 1px solid #CCCCCC;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    font-size: 18px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    margin: 0px;
    padding: calc((50px - 18px) / 2);
}
@media screen and (orientation: portrait){
    div.form input[type='tel'],
    div.form input[type='email'],
    div.form input[type='number'],
    div.form input[type='text'],
    div.form input[type='password'],
    div.form input[type='date']{
        width: calc(100% - 5vw * 2);
        font-size: 4.375vw;
        padding: 5vw;
    }
}
div.form select{
    width: 100%;
    border: 1px solid #CCCCCC;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    font-size: 18px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    margin: 0px;
    padding: calc((50px - 18px) / 2 - 1px);
}
@media screen and (orientation: portrait){
    div.form select{
        font-size: 4.375vw;
        padding: 5vw;
    }
}
div.form select:disabled{
    background-color: rgba(239, 239, 239, 0.3);
    border: 1px solid #CCCCCC;
    color: rgb(84, 84, 84);
}
div.form textarea{
    width: calc(100% - ((50px - 18px) / 2) * 2 - 1px * 2);
    min-height: calc(18px * 5 + ((50px - 18px) / 2) * 2);
    border: 1px solid #CCCCCC;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    font-size: 18px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0px;
    padding: calc((50px - 18px) / 2);
    resize: vertical;
}
div.form div.alert,
div.form input[type='tel'].alert,
div.form input[type='email'].alert,
div.form input[type='number'].alert,
div.form input[type='text'].alert,
div.form input[type='password'].alert,
div.form input[type='date'].alert,
div.form select.alert,
div.form textarea.alert{
    border: 1px solid #CC0000;
}
div.form label.switch{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    cursor: pointer;
}
div.form label.switch input{
    width: 0px;
    height: 0px;
    position: absolute;
    opacity: 0;
}
div.form label.switch .slider{
    min-width: calc(115px * 2 + 4px * 2);
    width: 100%;
    height: 38px;
    background-color: #CCCCCC;
    border-radius: 48px;
    display: flex;
    margin: 4px 0px;
    position: relative;
    transition: .4s;
    -webkit-transition: .4s;
}
@media screen and (orientation: portrait){
    div.form label.switch .slider{
        min-width: calc(16vw * 2 + 4px * 2);
        font-size: 3.889vw;
    }
}
div.form label.switch .slider:before{
    content: attr(data-unChecked);
    width: calc((50% - 4px) - 1vw * 2);
    height: 30px;
    background-color: #FFFFFF;
    border-radius: calc(38px / 2);
    color: #000000;
    text-align: center;
    line-height: normal;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 0px 1vw;
    position: absolute;
    left: 4px;
    bottom: 4px;
    transition: .4s;
    -webkit-transition: .4s;
}
@media screen and (orientation: portrait){
    div.form label.switch .slider:before{
        font-size: 3.889vw;
    }
}
div.form label.switch input:checked+.slider:before{
    content: attr(data-checked);
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
}
div.form label.switch input:checked+.slider{
    background-color: #2196F3;
}
div.form label.switch input:focus+.slider{
    box-shadow: 0px 0px 1px #2196F3;
}
div.form .CKEditor{
    width: 100%;
    height: 400px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: center;
    align-items: center;
    margin: 0px 10px 0px 0px;
}
div.form .CKEditor.alert+div.cke_editor_content{
    border: 1px solid #CC0000;
}
div.form>ul.dataRow>li>div.cke_editor_content{
    width: calc(100% - 1px * 2);
    padding: 0px;
}
div.form div.cke_editor_content .cke_inner{
    width: 100%;
}

div.form .newsTags{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: stretch;
}
div.form .newsTags>li{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    margin: 0px 40px 10px 40px;
}
div.form .newsTags>li>input[type='text']{
    width: auto;
    flex-grow: 1;
    margin: 0px 10px;
}
div.form .newsTags>li>input[type='color']{
    height: 45px;
    margin: 0px 0px 0px 10px;
}

div.form>ul.dataRow>li.muiltiRows>div,
div.form>ul.dataRow>li.muiltiRows>input[type='text'],
div.form>ul.dataRow>li.muiltiRows>input[type='password'],
div.form>ul.dataRow>li.muiltiRows>select{
    width: calc(100% - 10vw - 20px - 0.78125vw * 2);
    margin: calc(0.52083vw * 2) 0px 0px calc(10vw + 20px);
    padding: 0px 0.78125vw;
}
@media screen and (orientation: portrait){
    div.form>ul.dataRow>li.muiltiRows>div,
    div.form>ul.dataRow>li.muiltiRows>input[type='text'],
    div.form>ul.dataRow>li.muiltiRows>input[type='password'],
    div.form>ul.dataRow>li.muiltiRows>select{
        width: calc(100% - 21vw - 3.125vw * 2);
        margin: 3.125vw 0px 0px 21vw;
        padding: 0px 3.125vw;
    }
}

div.form>ul.dataRow>li>div:last-of-type,
div.form>ul.dataRow>li>input[type='text']:last-of-type,
div.form>ul.dataRow>li>input[type='password']:last-of-type,
div.form>ul.dataRow>li>select:last-of-type{
    margin: 0px;
}
div.form>ul.dataRow>li.muiltiRows>div:last-of-type,
div.form>ul.dataRow>li.muiltiRows>input[type='text']:last-of-type,
div.form>ul.dataRow>li.muiltiRows>input[type='password']:last-of-type,
div.form>ul.dataRow>li.muiltiRows>select:last-of-type{
    margin: calc(0.52083vw * 2) 0px 0px calc(10vw + 20px);
}
@media screen and (orientation: portrait){
    div.form>ul.dataRow>li.muiltiRows>div:last-of-type,
    div.form>ul.dataRow>li.muiltiRows>input[type='text']:last-of-type,
    div.form>ul.dataRow>li.muiltiRows>input[type='password']:last-of-type,
    div.form>ul.dataRow>li.muiltiRows>select:last-of-type{
        margin: 3.125vw 0px 0px 21vw;
    }
}

div.form>ul.dataRow>li.muiltiRows>div:first-of-type,
div.form>ul.dataRow>li.muiltiRows>input[type='text']:first-of-type,
div.form>ul.dataRow>li.muiltiRows>input[type='password']:first-of-type,
div.form>ul.dataRow>li.muiltiRows>select:first-of-type{
    width: auto;
    margin: 0px;
    padding: 0px 0.78125vw;
}
@media screen and (orientation: portrait){
    div.form>ul.dataRow>li.muiltiRows>div:first-of-type,
    div.form>ul.dataRow>li.muiltiRows>input[type='text']:first-of-type,
    div.form>ul.dataRow>li.muiltiRows>input[type='password']:first-of-type,
    div.form>ul.dataRow>li.muiltiRows>select:first-of-type{
        padding: 0px 3.125vw;
    }
}

/* 說明區 */
div.form>ul.dataRow>div.memo>h2{
    font-size: 18px;
    font-weight: bold;
    line-height: 50px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
}
div.form>ul.dataRow>div.memo>ol{
    list-style-type: decimal;
    width: calc(100% - 18px);
    margin: 0px 0px 0px 18px;
}
@media screen and (orientation: portrait){
    div.form>ul.dataRow>div.memo>ol{
        width: calc(100% - 5.25vw - 5vw * 2);
        margin: 2.778vw 5vw 0px calc(5.25vw + 5vw);
    }
}
div.form>ul.dataRow>div.memo>ol>li{
    font-size: 18px;
    text-align: justify;
    margin: 0px 0px 1.875vw 0px;
}
@media screen and (orientation: portrait){
    div.form>ul.dataRow>div.memo>ol>li{
        font-size: 4.375vw;
        line-height: normal;
        margin: 0px 0px 2.778vw 0px;
    }
}
div.form>ul.dataRow>div.memo>ol>li>span{
    color: #FF0000;
    font-weight: bold;
}

/* 編輯區 */
div.form>ul.editArea>li{
    display: none;
}
div.form>ul.editArea.edit>div.memo{
    display: none;
}
div.form>ul.editArea>div.btn{
    display: none;
}
div.form>ul.editArea.edit>div.btn{
    display: block;
}

/* 權限樣式 */
div.form>ul.dataRow ul.permission{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (orientation: portrait){
    div.form>ul.dataRow ul.permission{
        font-size: 3.889vw;
    }
}
div.form>ul.dataRow ul.permission li.permissionItem{
    background-color: rgb(250, 250, 250);
    padding: 0vw 2vw;
    position: relative;
}
@media screen and (orientation: portrait){
    div.form>ul.dataRow ul.permission li.permissionItem{
        padding: 0vw 3.5vw;
    }
}
div.form>ul.dataRow ul.permission>li.permissionItem{
    width: calc((100% - 2.0833vw) / 2 - 2vw * 2 - 1px * 2);
    border: 1px solid #CCCCCC;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0px 0px 2vw 0px;
    padding: 2vw;
}
@media all and (max-width: 1200px){
    div.form>ul.dataRow ul.permission>li.permissionItem{
        width: calc(100% - 2vw * 2 - 1px * 2);
        margin: 0px 0px 2vw 0px;
        padding: 2vw;
    }
}
div.form>ul.dataRow ul.permission>li.permissionItem:nth-of-type(odd){
    flex-grow: 1;
}
div.form>ul.dataRow ul.permission>li.permissionItem:nth-of-type(even){
    flex-grow: 0;
    margin: 0px 0px 2vw 2.0833vw;
}
@media all and (max-width: 1200px){
    div.form>ul.dataRow ul.permission>li.permissionItem:nth-of-type(even){
        flex-grow: 1;
        margin: 0px 0px 2vw 0px;
    }
}
div.form>ul.dataRow ul.permission div+ul{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
}
div.form>ul.dataRow ul.permission div+ul:after{
    content: '';
    width: 50%;
    height: calc(100% - 38px / 2);
    border-left: 1px solid #CCCCCC;
    position: absolute;
    top: calc(-0.5vw - 4px);
    left: 1.5vw;
}
@media screen and (orientation: portrait){
    div.form>ul.dataRow ul.permission div+ul:after{
        left: 3vw;
    }
}
div.form>ul.dataRow ul.permission div+ul>li.permissionItem:before{
    content: '';
    width: 50%;
    height: calc(38px / 2 + 0.5vw + 4px);
    border-bottom: 1px solid #CCCCCC;
    position: absolute;
    top: 0%;
    left: -0.5vw;
}
@media screen and (orientation: portrait){
    div.form>ul.dataRow ul.permission div+ul>li.permissionItem:before{
        left: 0px;
    }
}
div.form>ul.dataRow ul.permission li.permissionItem>div{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0.5vw 0px;
    position: relative;
    z-index: 1;
}
div.form>ul.dataRow ul.permission li.permissionItem>div>div{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 0px 0px 2vw;
}
@media screen and (orientation: portrait){
    div.form>ul.dataRow ul.permission li.permissionItem>div>div{
        margin: 0px 0px 0px 3.5vw;
    }
}
div.form>ul.dataRow ul.permission li.permissionItem>ul{
    padding: 0px 0px 0px 2vw;
}
@media screen and (orientation: portrait){
    div.form>ul.dataRow ul.permission li.permissionItem>ul{
        padding: 0px 0px 0px 3.5vw;
    }
}
div.form>ul.dataRow ul.permission li.permissionItem li.permissionItem:last-child{
    margin: 0px;
}


/* =========================================================
 * 右邊主頁 - 中間區塊 - 內容 - DIV 拖曳檔案上傳
 * ========================================================= */
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea>ul.dataRow>li>div.dragImageUploadArea,
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea{
    width: 100%;
    background-color: transparent;
    border: 0px;
    /*display: flex;*/
    display: none;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    padding: 0px;
    position: relative;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.uploadArea{
    width: calc(100% - 3px * 2);
    height: 100%;
    min-height: calc(134px - 3px * 2);
    background-color: rgb(248, 248, 248);
    border: 0px;
    border-radius: 8px;
    color: rgb(137, 137, 137);
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    line-height: 26px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    /*margin: 0px 0px 10px 0px;*/
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
@media all and (max-width: 599px) {
    .pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.uploadArea{
        width: calc(100% - 1px * 2);
        height: calc(134px - 1px * 2);
        border: 1px dashed #999999;
        line-height: normal;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea[configUploadArea='bottom' i]>.uploadArea{
    order: 2;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea[configDisabled='1' i]>.uploadArea{
    cursor: default;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea.alert>.uploadArea{
    border: 3px dashed #CC0000;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea[configUploadPicSize='big' i]>.uploadArea{
    min-height: calc(300px - 3px * 2);
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.uploadArea p>span{
    color: rgb(84, 188, 168);
    font-size: 18px;
    font-weight: bold;
    display: block;
    margin: 10px 0px 0px 0px;
}
@media all and (max-width: 599px) {
    .pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.uploadArea p>span{
        font-size: 12px;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>input[type='button'].youTubeBtn{
    width: 70px;
    height: 50px;
    background-color: rgb(255, 255, 255);
    background-image: url(/images/iconYouTube.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    border: 0px;
    color: transparent;
    margin: 0px;
    position: absolute;
    right: 4px;
    top: 4px;
    z-index: 2;
    overflow: hidden;
    cursor: pointer;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>input[type='file']{
    width: 0px;
    height: 0px;
    display: flex;
    overflow: hidden;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.alertMessage{
    width: 100%;
    background: none;
    color: #CC0000;
    font-family: Microsoft JhengHei, Arial;
    font-size: 14px;
    font-weight: normal;
    line-height: normal;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin: 10px 0px 0px 0px;
    padding: 0px;
    position: relative;
    left: 0px;
    top: 0px;
}

.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.viewFiles{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    overflow: hidden;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea[configUploadArea='bottom' i]>.viewFiles{
    order: 1;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.viewFiles>li{
    width: 134px;
    height: 134px;
    background-color: rgb(248, 248, 248);
    border: 0px;
    border-radius: 8px;
    margin: 5px 5px 0px 0px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}
@media all and (max-width: 599px) {
    .pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.viewFiles>li{
        width: calc(134px - 1px * 2);
        height: calc(134px - 1px * 2);
        border: 1px dashed #999999;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea[configUploadArea='bottom' i]>.viewFiles>li{
    margin: 0px 5px 5px 0px;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea[configUploadPicSize='big' i]>.viewFiles>li{
    width: 300px;
    height: 300px;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea[configMaxFiles='1']>.viewFiles>li{
    width: 100%;
    height: 100%;
    min-height: calc(134px - 1px * 2);
    margin: 0px;
    padding: 0px;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea[configUploadPicBackground='dark']>.viewFiles>li{
    background-color: rgb(137, 137, 137);
    border: 0px;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.viewFiles>li:last-child{
    margin: 5px 0px 0px 0px;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea[configUploadArea='bottom' i]>.viewFiles>li:last-child{
    margin: 0px 0px 5px 0px;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea[configMaxFiles='1']>.viewFiles>li:last-child{
    margin: 0px;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.viewFiles>li>img{
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.viewFiles>li>img.normalFile{
    width: 70%;
    height: 70%;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.viewFiles>li>.checkboxArea{
    width: 20px;
    height: 20px;
    position: absolute;
    left: 5px;
    top: 5px;
    z-index: 2;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.viewFiles>li>.checkboxArea>input[type='checkbox']{
    visibility: hidden;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.viewFiles>li>.checkboxArea>input[type='checkbox'] ~ span{
    width: calc(100% - 1px * 2);
    height: calc(100% - 1px * 2);
    background-color: rgb(255, 255, 255);
    opacity: 0.5;
    border: 1px solid #CCCCCC;
    display: flex;
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: pointer;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.viewFiles>li>.checkboxArea>input[type='checkbox']:active ~ span,
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.viewFiles>li>.checkboxArea>input[type='checkbox']:hover ~ span,
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.viewFiles>li>.checkboxArea>input[type='checkbox']:checked ~ span{
    opacity: 1;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.viewFiles>li>.checkboxArea>input[type='checkbox'] ~ span:after{
    content: '';
    width: 5px;
    height: 10px;
    border: solid rgb(38.28, 38.28, 38.28);
    border-width: 0px 3.2px 3.2px 0px;
    display: none;
    position: absolute;
    left: 6.4px;
    bottom: 4px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.viewFiles>li>.checkboxArea>input[type='checkbox']:active ~ span:after,
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.viewFiles>li>.checkboxArea>input[type='checkbox']:checked ~ span:after{
    display: block;
}

.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.viewFiles>li>.buttons{
    opacity: 0;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 2;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.viewFiles>li:hover>.buttons{
    animation: 0.3s linear 0s normal forwards 1 animationViewFilesButtons;
}
@keyframes animationViewFilesButtons{
    0%  { opacity: 0; top: -100%; }
    100%{ opacity: 1; top: 0px;   }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.viewFiles>li>.buttons>input[type='button']{
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.9);
    border: 0px;
    color: transparent;
    margin: 0px 0.5px;
    overflow: hidden;
    cursor: pointer;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.viewFiles>li>.buttons>input[type='button']:first-child{
    margin: 0px 0px 0px 0.5px;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.viewFiles>li>.buttons>input[type='button']:last-child{
    margin: 0px 0.5px 0px 0px;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.viewFiles>li>.buttons>input[type='button'].deleteBtn,
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.viewFiles>li>.buttons>input[type='button'].deleteBtn:hover{
    background-image: url(/images/iconError.svg);
    background-repeat: no-repeat;
    background-size: 50% 50%;
    background-position: center center;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.viewFiles>li>.buttons>input[type='button'].downloadBtn,
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.viewFiles>li>.buttons>input[type='button'].downloadBtn:hover{
    background-image: url(/images/iconDownload.svg);
    background-repeat: no-repeat;
    background-size: 50% 50%;
    background-position: center center;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.viewFiles>li>.buttons>input[type='button'].configBtn,
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.viewFiles>li>.buttons>input[type='button'].configBtn:hover{
    background-image: url(/images/iconConfig.svg);
    background-repeat: no-repeat;
    background-size: 50% 50%;
    background-position: center center;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.viewFiles>li>.info{
    width: calc(100% - 5px * 2);
    background-color: rgba(0, 0, 0, 0.9);
    opacity: 0;
    color: #FFFFFF;
    font-family: Microsoft JhengHei, Arial;
    font-size: 12px;
    font-weight: normal;
    line-height: normal;
    text-align: left;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 5px;
    position: absolute;
    left: 0px;
    bottom: 0px;
    overflow: hidden;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.viewFiles>li:hover>.info,
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.viewFiles>li:active>.info{
    animation: 0.3s linear 0s normal forwards 1 animationViewFilesInfo;
}
@keyframes animationViewFilesInfo{
    0%  { opacity: 0; bottom: -100%; }
    100%{ opacity: 1; bottom: 0;      }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.viewFiles>li>.info>div{
    width: 100%;
    word-break: word;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    overflow: hidden;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.configArea{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 999;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.configArea>.viewArea{
    min-width: 40%;
    background-color: rgb(255, 255, 255);
    padding: 20px;
    position: relative;
}

.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.configArea{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 999;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.configArea>.viewArea{
    min-width: 40%;
    max-width: 90%;
    max-height: 90%;
    background-color: rgba(255, 255, 255, 1);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 20px;
    position: relative;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.configArea>.viewArea>.form{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: space-between;
    align-items: stretch;
    overflow-x: hidden;
    overflow-y: auto;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.configArea>.viewArea>.form>li{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-basis: 550px;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: stretch;
    margin: 0px calc(2.0833vw / 2) 20px calc(2.0833vw / 2);
}
@media screen and (max-width: 919px){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.configArea>.viewArea>.form>li{
        flex-basis: 400px;
    }
}
@media screen and (min-width: 920px){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.configArea>.viewArea>.form>li:nth-of-type(odd){
        /*margin: 0px 2.0833vw 20px 0px;*/
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.configArea>.viewArea>.form>li{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    margin: 0px 0px 20px 0px;
}
@media all and (min-width: 1200px) {
    .pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.configArea>.viewArea>.form>ul.dataRow.twoColumn>li:last-child{
        margin: 0px;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.configArea>.viewArea>.form>li>label{
    line-height: 50px;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    /*margin: 0px 20px 0px 0px;*/
    position: relative;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.configArea>.viewArea>.form>li>label{
        line-height: 9.375vw;
        flex-basis: 21vw;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.configArea>.viewArea>.form>li.required>label:after{
    content: '\2605';
    color: #FF0000;
    font-size: 18px;
    margin: 0px 0px 0px 0.3vw;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.configArea>.viewArea>.form>li.required>label.switch:after{
    content: '';
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.configArea>.viewArea>.form>li>label em{
    color: #666666;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    line-height: normal;
    position: absolute;
    right: 0px;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.configArea>.viewArea>.form>li>label em span{
    color: #FF0000;
    font-size: 18px;
    font-weight: bold;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.configArea>.viewArea>.form>li input[type='tel'],
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.configArea>.viewArea>.form>li input[type='email'],
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.configArea>.viewArea>.form>li input[type='number'],
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.configArea>.viewArea>.form>li input[type='text'],
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.configArea>.viewArea>.form>li input[type='password'],
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.configArea>.viewArea>.form>li input[type='date']{
    width: calc(100% - ((50px - 18px) / 2) * 2 - 1px * 2);
    border: 1px solid #CCCCCC;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    font-size: 18px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    margin: 0px;
    padding: calc((50px - 18px) / 2);
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.configArea>.viewArea>.form>li select{
    width: 100%;
    border: 1px solid #CCCCCC;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    font-size: 18px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    margin: 0px;
    padding: calc((50px - 18px) / 2 - 1px);
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.configArea>.viewArea>.btn{
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin: 0px;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.configArea>.viewArea>.btn>em{
    width: 100%;
    color: #FF0000;
    font-style: normal;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin: 5px 0px;
}

.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.configArea>.viewArea>.btn{
    text-align: center;
    margin: 20px 0px 0px 0px;
}

/* =========================================================
 * 右邊主頁 - 中間區塊 - 內容 - 輸入工具 widget
 * ========================================================= */
.pagesContent>.rightContent>.centerArea>.centerAreaContents .ddmsInputToolArea{
    font-weight: bold;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 5px;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .ddmsInputToolArea>label{
    cursor: pointer;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .ddmsInputToolArea>div{
    color: var(--project-color-3);
    cursor: pointer;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .ddmsInputTool{
    width: 100%;
    background-color: #FFFFFF;
    border: 1px solid rgb(182, 182, 182);
    color: rgb(38.28, 38.28, 38.28);
    font-size: 20px;
    font-weight: bold;
    padding: 0px 8px;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .ddmsInputTool::placeholder{
    color: #CCCCCC;
}

/* =========================================================
 * 右邊主頁 - 中間區塊 - 內容 - 輸入工具 widget
 * ========================================================= */
.pagesContent>.rightContent>.centerArea>.centerAreaContents .searchKeywordsForSelectArea{
    overflow-y: visible;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .searchKeywordsForSelectArea .searchKeywordsForSelectMenu{
    height: 100%;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .searchKeywordsForSelectArea .searchKeywordsForSelectMenu[size]:not([size='1']){
    height: auto;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    align-self: flex-start;
    z-index: 2;
}


/* =========================================================
 * 右邊主頁 - 中間區塊 - 內容 - 表格樣式
 * ========================================================= */
/* DIV Table */
.pagesContent>.rightContent>.centerArea .dataTable,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable,
#cyMsgBox .dataTable{
    width: calc(100% - 1px * 2);
    background-color: transparent;
    border: 1px solid #CCCCCC;
    border-spacing: 5px;
    border-collapse: separate;
    color: rgb(0, 0, 0);
    font-size: 18px;
    display: table;
    padding: 0px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .dataTable,
    .pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable,
    #cyMsgBox .dataTable{
        width: 100%;
        border: 0px;
        border-spacing: 0.756vw 2.778vw;
        margin: 0px;
    }
}
.pagesContent>.rightContent>.centerArea .dataTable.noBorder,
#cyMsgBox .dataTable.noBorder{
    border: 0px;
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr,
#cyMsgBox .dataTable>.tr{
    display: table-row;
    /*margin: 0px 0px 5px 0px;*/
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr[onclick]:not([onclick='']),
#cyMsgBox .dataTable>.tr[onclick]:not([onclick='']){
    cursor: pointer;
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.th,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.th,
#cyMsgBox .dataTable>.tr>.th{
    background-color: var(--user-color-2);
    border: 1px solid var(--user-color-2);
    color: #FFFFFF;
    font-size: 18px;
    font-weight: bold;
    display: table-cell;
    vertical-align: middle;
    padding: 4px 8px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea .dataTable>.tr>.th,
    .pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.th,
    #cyMsgBox .dataTable>.tr>.th{
        font-size: 16px;
        padding: 3px 6px;
    }
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .dataTable>.tr>.th,
    .pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.th,
    #cyMsgBox .dataTable>.tr>.th{
        font-size: 4.104vw;
        padding: 4px 3px;
    }
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.th.required:before,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.th.required:before,
#cyMsgBox .dataTable>.tr>.th.required:before{
    content: '*';
    color: rgb(235, 97, 0);
    font-size: 18px;
    margin: 0px 3px 0px 0px;
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.th.sort,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.th.sort,
#cyMsgBox .dataTable>.tr>.th.sort{
    cursor: pointer;
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.th.sort:hover,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.th.sort:hover,
#cyMsgBox .dataTable>.tr>.th.sort:hover{
    background-color: rgb(239, 239, 239);
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.th.orderDesc:after,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.th.orderDesc:after,
#cyMsgBox .dataTable>.tr>.th.orderDesc:after{
    content: '\25BC';
    margin: 0px 0px 0px 0.3vw;
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.th.orderAsc:after,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.th.orderAsc:after,
#cyMsgBox .dataTable>.tr>.th.orderAsc:after{
    content: '\25B2';
    margin: 0px 0px 0px 0.3vw;
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td,
#cyMsgBox .dataTable>.tr>.td{
    background-color: rgb(248, 248, 248);
    color: rgb(38.28, 38.28, 38.28);
    font-size: 18px;
    font-weight: bold;
    line-height: 20px;
    word-break: break-all;
    display: table-cell;
    vertical-align: middle;
    padding: 8px;
    position: relative;
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td p.ellipsis,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td p.ellipsis,
#cyMsgBox .dataTable>.tr>.td p.ellipsis{
    width: calc(100% - 8px * 2);
    display: inline-block;
    text-overflow : ellipsis;
    white-space : nowrap;
    overflow: hidden;
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea .dataTable>.tr>.td,
    .pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td,
    #cyMsgBox .dataTable>.tr>.td{
        font-size: 16px;
        line-height: 18px;
    }
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .dataTable>.tr>.td,
    .pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td,
    #cyMsgBox .dataTable>.tr>.td{
        font-size: 4.104vw;
        word-break: break-all;
    }
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.enabled,
.pagesContent>.rightContent>.centerArea .dataTable.noHoverBg>.tr:hover .td.enabled,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.enabled,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable.noHoverBg>.tr:hover .td.enabled,
#cyMsgBox .dataTable>.tr>.td.enabled,
#cyMsgBox .dataTable.noHoverBg>.tr:hover .td.enabled{
    background-color: var(--ddms-color-1);
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.disabled,
.pagesContent>.rightContent>.centerArea .dataTable.noHoverBg>.tr:hover .td.disabled,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.disabled,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable.noHoverBg>.tr:hover .td.disabled,
#cyMsgBox .dataTable>.tr>.td.disabled,
#cyMsgBox .dataTable.noHoverBg>.tr:hover .td.disabled{
    background-color: rgb(73, 73, 73);
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode,
#cyMsgBox .dataTable>.tr>.td.textMode{
    padding: 0px 8px;
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input[type='tel'],
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input[type='email'],
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input[type='number'],
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input[type='text'],
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input[type='password'],
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input[type='search'],
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input[type='date'],
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input[type='tel'],
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input[type='email'],
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input[type='number'],
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input[type='text'],
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input[type='password'],
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input[type='search'],
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input[type='date'],
#cyMsgBox .dataTable>.tr>.td.textMode input[type='tel'],
#cyMsgBox .dataTable>.tr>.td.textMode input[type='email'],
#cyMsgBox .dataTable>.tr>.td.textMode input[type='number'],
#cyMsgBox .dataTable>.tr>.td.textMode input[type='text'],
#cyMsgBox .dataTable>.tr>.td.textMode input[type='password'],
#cyMsgBox .dataTable>.tr>.td.textMode input[type='search'],
#cyMsgBox .dataTable>.tr>.td.textMode input[type='date']{
    width: 100%;
    background-color: transparent;
    opacity: 1;
    border: 0px;
    color: rgb(38.28, 38.28, 38.28);
    -webkit-text-fill-color: unset;
    font-size: 18px;
    font-weight: bold;
    padding: 0px;
    outline: none;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input[type='tel'],
    .pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input[type='email'],
    .pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input[type='number'],
    .pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input[type='text'],
    .pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input[type='password'],
    .pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input[type='search'],
    .pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input[type='date'],
    .pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input[type='tel'],
    .pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input[type='email'],
    .pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input[type='number'],
    .pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input[type='text'],
    .pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input[type='password'],
    .pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input[type='search'],
    .pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input[type='date'],
    #cyMsgBox .dataTable>.tr>.td.textMode input[type='tel'],
    #cyMsgBox .dataTable>.tr>.td.textMode input[type='email'],
    #cyMsgBox .dataTable>.tr>.td.textMode input[type='number'],
    #cyMsgBox .dataTable>.tr>.td.textMode input[type='text'],
    #cyMsgBox .dataTable>.tr>.td.textMode input[type='password'],
    #cyMsgBox .dataTable>.tr>.td.textMode input[type='search'],
    #cyMsgBox .dataTable>.tr>.td.textMode input[type='date']{
        font-size: 16px;
    }
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input[type='tel'],
    .pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input[type='email'],
    .pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input[type='number'],
    .pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input[type='text'],
    .pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input[type='password'],
    .pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input[type='search'],
    .pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input[type='tel'],
    .pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input[type='email'],
    .pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input[type='number'],
    .pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input[type='text'],
    .pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input[type='password'],
    .pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input[type='search'],
    #cyMsgBox .dataTable>.tr>.td.textMode input[type='tel'],
    #cyMsgBox .dataTable>.tr>.td.textMode input[type='email'],
    #cyMsgBox .dataTable>.tr>.td.textMode input[type='number'],
    #cyMsgBox .dataTable>.tr>.td.textMode input[type='text'],
    #cyMsgBox .dataTable>.tr>.td.textMode input[type='password'],
    #cyMsgBox .dataTable>.tr>.td.textMode input[type='search']{
        width: calc(100% - 3.889vw * 3);
        height: auto;
        font-size: 3.889vw;
        margin: 0px;
        padding: 2.22vw 3.889vw;
    }
    .pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input[type='date'],
    .pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input[type='date'],
    #cyMsgBox .dataTable>.tr>.td.textMode input[type='date']{
        height: auto;
        font-size: 3.889vw;
        margin: 0px;
        padding: 2.22vw 3.889vw;
    }
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input[type='tel']:disabled,
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input[type='email']:disabled,
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input[type='number']:disabled,
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input[type='text']:disabled,
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input[type='password']:disabled,
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input[type='search']:disabled,
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input[type='date']:disabled,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input[type='tel']:disabled,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input[type='email']:disabled,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input[type='number']:disabled,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input[type='text']:disabled,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input[type='password']:disabled,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input[type='search']:disabled,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input[type='date']:disabled,
#cyMsgBox .dataTable>.tr>.td.textMode input[type='tel']:disabled,
#cyMsgBox .dataTable>.tr>.td.textMode input[type='email']:disabled,
#cyMsgBox .dataTable>.tr>.td.textMode input[type='number']:disabled,
#cyMsgBox .dataTable>.tr>.td.textMode input[type='text']:disabled,
#cyMsgBox .dataTable>.tr>.td.textMode input[type='password']:disabled,
#cyMsgBox .dataTable>.tr>.td.textMode input[type='search']:disabled,
#cyMsgBox .dataTable>.tr>.td.textMode input[type='date']:disabled{
    color: rgb(38.28, 38.28, 38.28);
    -webkit-text-fill-color: rgb(38.28, 38.28, 38.28);
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input::-webkit-input-placeholder,
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input[type='tel']:disabled::-webkit-input-placeholder,
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input[type='email']:disabled::-webkit-input-placeholder,
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input[type='number']:disabled::-webkit-input-placeholder,
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input[type='text']:disabled::-webkit-input-placeholder,
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input[type='password']:disabled::-webkit-input-placeholder,
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input[type='search']:disabled::-webkit-input-placeholder,
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input[type='date']:disabled::-webkit-input-placeholder,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input::-webkit-input-placeholder,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input[type='tel']:disabled::-webkit-input-placeholder,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input[type='email']:disabled::-webkit-input-placeholder,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input[type='number']:disabled::-webkit-input-placeholder,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input[type='text']:disabled::-webkit-input-placeholder,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input[type='password']:disabled::-webkit-input-placeholder,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input[type='search']:disabled::-webkit-input-placeholder,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input[type='date']:disabled::-webkit-input-placeholder,
#cyMsgBox .dataTable>.tr>.td.textMode input::-webkit-input-placeholder,
#cyMsgBox .dataTable>.tr>.td.textMode input[type='tel']:disabled::-webkit-input-placeholder,
#cyMsgBox .dataTable>.tr>.td.textMode input[type='email']:disabled::-webkit-input-placeholder,
#cyMsgBox .dataTable>.tr>.td.textMode input[type='number']:disabled::-webkit-input-placeholder,
#cyMsgBox .dataTable>.tr>.td.textMode input[type='text']:disabled::-webkit-input-placeholder,
#cyMsgBox .dataTable>.tr>.td.textMode input[type='password']:disabled::-webkit-input-placeholder,
#cyMsgBox .dataTable>.tr>.td.textMode input[type='search']:disabled::-webkit-input-placeholder,
#cyMsgBox .dataTable>.tr>.td.textMode input[type='date']:disabled::-webkit-input-placeholder{
    color: #CCCCCC;
    -webkit-text-fill-color: #CCCCCC;
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode input[type='date'],
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode input[type='date'],
#cyMsgBox .dataTable>.tr>.td.textMode input[type='date']{
    background-color: rgb(248, 248, 248);
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode select,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode select,
#cyMsgBox .dataTable>.tr>.td.textMode select{
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: 0px;
    color: rgb(38.28, 38.28, 38.28);
    font-size: 18px;
    font-weight: bold;
    outline: none;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode select,
    .pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode select,
    #cyMsgBox .dataTable>.tr>.td.textMode select{
        font-size: 16px;
    }
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode select,
    .pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode select,
    #cyMsgBox .dataTable>.tr>.td.textMode select{
        font-size: 3.889vw;
    }
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode select:invalid,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode select:invalid,
#cyMsgBox .dataTable>.tr>.td.textMode select:invalid{
    color: #CCCCCC;
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode select:disabled,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode select:disabled,
#cyMsgBox .dataTable>.tr>.td.textMode select:disabled{
    color: #CCCCCC;
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.textMode select option,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.textMode select option,
#cyMsgBox .dataTable>.tr>.td.textMode select option{
    color: rgb(38.28, 38.28, 38.28);
    font-size: 18px;
    font-weight: bold;
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td label.checkBox,
.pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr>.td>label.checkBox,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td label.checkBox,
#cyMsgBox .dataTable>.tr>.td label.checkBox,
#cyMsgBox .dataTable.newItemsTable>.tr>.td>label.checkBox{
    width: auto;
    max-width: unset;
    min-width: unset;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0px 0px 0px 0px;
    position: relative;
    cursor: pointer;
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td label.checkBox input[type='checkbox'],
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td label.checkBox input[type='checkbox'],
#cyMsgBox .dataTable>.tr>.td label.checkBox input[type='checkbox']{
    visibility: hidden;
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td label.checkBox span,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td label.checkBox span,
#cyMsgBox .dataTable>.tr>.td label.checkBox span{
    width: 20px;
    height: 20px;
    background-color: rgb(255, 255, 255);
    position: absolute;
}
/*
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td label.checkBox:hover input ~ span,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td label.checkBox:hover input ~ span,
#cyMsgBox .dataTable>.tr>.td label.checkBox:hover input ~ span{
    background-color: rgb(238, 238, 238);
}
*/
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td label.checkBox input:active ~ span,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td label.checkBox input:active ~ span,
#cyMsgBox .dataTable>.tr>.td label.checkBox input:active ~ span{
    background-color: rgb(255, 255, 255);
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td label.checkBox input:checked ~ span,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td label.checkBox input:checked ~ span,
#cyMsgBox .dataTable>.tr>.td label.checkBox input:checked ~ span{
    background-color: rgb(255, 255, 255);
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td label.checkBox span:after,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td label.checkBox span:after,
#cyMsgBox .dataTable>.tr>.td label.checkBox span:after{
    content: '';
    width: 5px;
    height: 10px;
    border: solid rgb(38.28, 38.28, 38.28);
    border-width: 0px 3.2px 3.2px 0px;
    display: none;
    position: absolute;
    left: 6.4px;
    bottom: 4px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td label.checkBox input:checked ~ span:after,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td label.checkBox input:checked ~ span:after,
#cyMsgBox .dataTable>.tr>.td label.checkBox input:checked ~ span:after{
    display: block;
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr:nth-of-type(odd)>.td,
.pagesContent>.rightContent>.centerArea .dataTable>.tr:nth-of-type(odd)>a>.td,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr:nth-of-type(odd)>.td,
#cyMsgBox .dataTable>.tr:nth-of-type(odd)>.td,
#cyMsgBox .dataTable>.tr:nth-of-type(odd)>a>.td{
    background-color: rgb(230, 230, 230);
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .dataTable>.tr:nth-of-type(odd)>.td,
    .pagesContent>.rightContent>.centerArea .dataTable>.tr:nth-of-type(odd)>a>.td,
    .pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr:nth-of-type(odd)>.td,
    #cyMsgBox .dataTable>.tr:nth-of-type(odd)>.td,
    #cyMsgBox .dataTable>.tr:nth-of-type(odd)>a>.td{
        background-color: rgb(248, 248, 248);
    }
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr:nth-of-type(odd)>.td input[type='date'],
.pagesContent>.rightContent>.centerArea .dataTable>.tr:nth-of-type(odd)>a>.td input[type='date'],
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr:nth-of-type(odd)>.td input[type='date'],
#cyMsgBox .dataTable>.tr:nth-of-type(odd)>.td input[type='date'],
#cyMsgBox .dataTable>.tr:nth-of-type(odd)>a>.td input[type='date']{
    background-color: rgb(230, 230, 230);
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .dataTable>.tr:nth-of-type(odd)>.td input[type='date'],
    .pagesContent>.rightContent>.centerArea .dataTable>.tr:nth-of-type(odd)>a>.td input[type='date'],
    .pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr:nth-of-type(odd)>.td input[type='date'],
    #cyMsgBox .dataTable>.tr:nth-of-type(odd)>.td input[type='date'],
    #cyMsgBox .dataTable>.tr:nth-of-type(odd)>a>.td input[type='date']{
        background-color: rgb(248, 248, 248);
    }
}

.pagesContent>.rightContent>.centerArea .dataTable.hoverColor>.tr:hover .td,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow.hoverColor>li>div.dataTable>.tr:hover .td,
#cyMsgBox .dataTable.hoverColor>.tr:hover .td{
    background-color: #FFF7EE;
}

.pagesContent>.rightContent>.centerArea .dataTable.noHoverBg>.tr:hover .td,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable.noHoverBg>.tr:hover .td,
#cyMsgBox .dataTable.noHoverBg>.tr:hover .td{
    background-color: rgb(248, 248, 248);
}
.pagesContent>.rightContent>.centerArea .dataTable.noHoverBg>.tr:nth-of-type(odd):hover .td,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable.noHoverBg>.tr:nth-of-type(odd):hover .td,
#cyMsgBox .dataTable.noHoverBg>.tr:nth-of-type(odd):hover .td{
    background-color: rgb(230, 230, 230);
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.th,
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.alignCenter,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.th,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.alignCenter,
#cyMsgBox .dataTable>.tr>.th,
#cyMsgBox .dataTable>.tr>.td.alignCenter{
    text-align: center;
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.alignRight,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td.alignRight,
#cyMsgBox .dataTable>.tr>.td.alignRight{
    text-align: right;
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.th [class^='flag'],
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td [class^='flag'],
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.th [class^='flag'],
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td [class^='flag'],
#cyMsgBox .dataTable>.tr>.th [class^='flag'],
#cyMsgBox .dataTable>.tr>.td [class^='flag']{
    -webkit-border-radius: 0.260417vw;
    -moz-border-radius: 0.260417vw;
    border-radius: 0.260417vw;
    font-size: 0.729167vw;
    line-height: normal;
    display: inline-block;
    padding: 0.20833vw 0.52083vw;
    margin: 0px 0.52083vw 0px 0px;
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.th .flagGray,
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td .flagGray,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.th .flagGray,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td .flagGray,
#cyMsgBox .dataTable>.tr>.th .flagGray,
#cyMsgBox .dataTable>.tr>.td .flagGray{
    background-color: #666666;
    color: #FFFFFF;
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.th .flagBlue,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.th .flagBlue,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td .flagBlue,
#cyMsgBox .dataTable>.tr>.th .flagBlue{
    background-color: #2196F3;
    color: #FFFFFF;
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.th .flagRed,
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td .flagRed,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.th .flagRed,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td .flagRed,
#cyMsgBox .dataTable>.tr>.th .flagRed,
#cyMsgBox .dataTable>.tr>.td .flagRed{
    background-color: #CC0000;
    color: #FFFFFF;
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td .deleteIcon,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td .deleteIcon,
#cyMsgBox .dataTable>.tr>.td .deleteIcon{
    width: 30px;
    height: 30px;
    background-color: transparent;
    background-image: url(/images/iconDelete.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    border: 0px;
    box-shadow: unset;
    color: transparent;
    line-height: normal;
    display: inline-block;
    margin-right: 0.5vw;
    padding: 0px;
    filter: none;
    cursor: pointer;
}
@media screen and (orientation: portrait){
    #cyMsgBox .dataTable>.tr>.td>.deleteIcon{
        margin: 1.5vw 0.5vw 0px 0px;
    }
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td .deleteIcon:first-of-type,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td .deleteIcon:first-of-type,
#cyMsgBox .dataTable>.tr>.td .deleteIcon:first-of-type{
    margin: 0px 0.5vw 0px 0px;
}
@media screen and (orientation: portrait){
    #cyMsgBox .dataTable>.tr>.td>.deleteIcon:first-of-type{
        margin: 1.5vw 0.5vw 0px 0px;
    }
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td .deleteIcon:last-of-type,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td .deleteIcon:last-of-type,
#cyMsgBox .dataTable>.tr>.td .deleteIcon:last-of-type{
    margin: 0px;
}
@media screen and (orientation: portrait){
    #cyMsgBox .dataTable>.tr>.td>.deleteIcon:last-of-type{
        margin: 1.5vw 0px 0px 0px;
    }
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td .addIcon,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td .addIcon,
#cyMsgBox .dataTable>.tr>.td .addIcon{
    width: 30px;
    height: 30px;
    background-color: transparent;
    background-image: url(/images/iconAdd.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    border: 0px;
    box-shadow: unset;
    color: transparent;
    line-height: normal;
    display: inline-block;
    margin-right: 0.5vw;
    padding: 0px;
    filter: none;
    cursor: pointer;
}
@media screen and (orientation: portrait){
    #cyMsgBox .dataTable>.tr>.td>.addIcon{
        margin: 1.5vw 0.5vw 0px 0px;
    }
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td .addIcon:last-of-type,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td .addIcon:last-of-type,
#cyMsgBox .dataTable>.tr>.td .addIcon:last-of-type{
    margin: 0px;
}
@media screen and (orientation: portrait){
    #cyMsgBox .dataTable>.tr>.td>.addIcon:last-of-type{
        margin: 1.5vw 0px 0px 0px;
    }
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td .editIcon,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td .editIcon,
#cyMsgBox .dataTable>.tr>.td .editIcon{
    width: 30px;
    height: 30px;
    background-color: transparent;
    background-image: url(/images/iconEdit.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    border: 0px;
    box-shadow: unset;
    color: transparent;
    line-height: normal;
    display: inline-block;
    margin-right: 0.5vw;
    padding: 0px;
    filter: none;
    cursor: pointer;
}
.pagesContent>.rightContent>.centerArea .dataTable>.tr>.td .editIcon:last-of-type,
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable>.tr>.td .editIcon:last-of-type,
#cyMsgBox .dataTable>.tr>.td .editIcon:last-of-type{
    margin: 0px;
}
.pagesContent>.rightContent>.centerArea .dataTable input[type='button'],
.pagesContent>.rightContent>.centerArea .formArea>ul.dataRow>li>div.dataTable input[type='button'],
#cyMsgBox .dataTable input[type='button']{
    min-width: auto;
}



/* =========================================================
 * 右邊主頁 - 中間區塊 - 內容 - 項目式表格樣式 (手機版用)
 * ========================================================= */
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable,
    #cyMsgBox .dataTable.newItemsTable{
        width: 100%;
        font-size: 4.104vw;
        font-weight: bold;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr.theader,
    #cyMsgBox .dataTable.newItemsTable>.tr.theader{
        display: none;
    }
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr,
    #cyMsgBox .dataTable.newItemsTable>.tr{
        width: calc(100% - 5vw * 2);
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: 5vw;
    }
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.reverColor>.tr,
    #cyMsgBox .dataTable.newItemsTable.reverColor>.tr{
        background-color: #F0F0F0;
    }
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(odd),
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(odd){
        background-color: #F0F0F0;
    }
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.reverColor>.tr:nth-of-type(odd),
    #cyMsgBox .dataTable.newItemsTable.reverColor>.tr:nth-of-type(odd){
        background-color: transparent;
    }
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr>.td,
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:hover>.td,
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(odd):hover .td,
    #cyMsgBox .dataTable.newItemsTable>.tr>.td,
    #cyMsgBox .dataTable.newItemsTable>.tr:hover>.td,
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(odd):hover .td{
        background-color: transparent;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        flex-grow: 1;
        flex-shrink: 1;
        justify-content: flex-start;
        align-items: stretch;
        margin: 0px 0px 2.778vw 0px;
        padding: 0px;
    }
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr>.td:last-child,
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:hover>.td:last-child,
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(odd):hover .td:last-child,
    #cyMsgBox .dataTable.newItemsTable>.tr>.td:last-child,
    #cyMsgBox .dataTable.newItemsTable>.tr:hover>.td:last-child,
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(odd):hover .td:last-child{
        margin: 0px;
    }
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr>.td>label,
    #cyMsgBox .dataTable.newItemsTable>.tr>.td>label{
        width: 18vw;
        color: rgb(73, 73, 73);
        font-size: 3.889vw;
        font-weight: bold;
        line-height: normal;
        /*text-align-last: justify;*/
        text-align: right;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        flex-grow: 0;
        flex-shrink: 0;
        justify-content: flex-end;
        align-items: flex-start;
        margin: 0px 3vw 0px 0px;
        padding: 2.744vw 0px;
        position: relative;
    }
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr>.td>label~div,
    #cyMsgBox .dataTable.newItemsTable>.tr>.td>label~div{
        width: auto;
        color: #000000;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        flex-grow: 1;
        flex-shrink: 1;
        justify-content: flex-start;
        align-items: center;
        padding: 1.667vw 2.778vw;
    }
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(even)>.td>input[type='tel']:nth-child(2),
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(even)>.td>input[type='email']:nth-child(2),
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(even)>.td>input[type='number']:nth-child(2),
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(even)>.td>input[type='text']:nth-child(2),
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(even)>.td>input[type='password']:nth-child(2),
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(even)>.td>input[type='search']:nth-child(2),
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(even)>.td>input[type='date']:nth-child(2),
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(even)>.td>textarea:nth-child(2),
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(even)>.td>select:nth-child(2),
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(even)>.td>div.textMode:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(even)>.td>input[type='tel']:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(even)>.td>input[type='email']:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(even)>.td>input[type='number']:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(even)>.td>input[type='text']:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(even)>.td>input[type='password']:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(even)>.td>input[type='search']:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(even)>.td>input[type='date']:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(even)>.td>textarea:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(even)>.td>select:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(even)>.td>div.textMode:nth-child(2){
        background-color: rgb(248, 248, 248);
    }
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.reverColor>.tr:nth-of-type(even)>.td>input[type='tel']:nth-child(2),
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.reverColor>.tr:nth-of-type(even)>.td>input[type='email']:nth-child(2),
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.reverColor>.tr:nth-of-type(even)>.td>input[type='number']:nth-child(2),
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.reverColor>.tr:nth-of-type(even)>.td>input[type='text']:nth-child(2),
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.reverColor>.tr:nth-of-type(even)>.td>input[type='password']:nth-child(2),
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.reverColor>.tr:nth-of-type(even)>.td>input[type='search']:nth-child(2),
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.reverColor>.tr:nth-of-type(even)>.td>input[type='date']:nth-child(2),
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.reverColor>.tr:nth-of-type(even)>.td>textarea:nth-child(2),
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.reverColor>.tr:nth-of-type(even)>.td>select:nth-child(2),
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.reverColor>.tr:nth-of-type(even)>.td>div.textMode:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable.reverColor>.tr:nth-of-type(even)>.td>input[type='tel']:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable.reverColor>.tr:nth-of-type(even)>.td>input[type='email']:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable.reverColor>.tr:nth-of-type(even)>.td>input[type='number']:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable.reverColor>.tr:nth-of-type(even)>.td>input[type='text']:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable.reverColor>.tr:nth-of-type(even)>.td>input[type='password']:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable.reverColor>.tr:nth-of-type(even)>.td>input[type='search']:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable.reverColor>.tr:nth-of-type(even)>.td>input[type='date']:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable.reverColor>.tr:nth-of-type(even)>.td>textarea:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable.reverColor>.tr:nth-of-type(even)>.td>select:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable.reverColor>.tr:nth-of-type(even)>.td>div.textMode:nth-child(2){
        background-color: #FFFFFF;
    }
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>input[type='tel'],
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>input[type='email'],
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>input[type='number'],
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>input[type='text'],
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>input[type='password'],
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>input[type='search'],
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>input[type='date'],
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>textarea,
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>select,
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>div.textMode,
    #cyMsgBox .dataTable.newItemsTable.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>input[type='tel'],
    #cyMsgBox .dataTable.newItemsTable.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>input[type='email'],
    #cyMsgBox .dataTable.newItemsTable.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>input[type='number'],
    #cyMsgBox .dataTable.newItemsTable.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>input[type='text'],
    #cyMsgBox .dataTable.newItemsTable.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>input[type='password'],
    #cyMsgBox .dataTable.newItemsTable.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>input[type='search'],
    #cyMsgBox .dataTable.newItemsTable.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>input[type='date'],
    #cyMsgBox .dataTable.newItemsTable.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>textarea,
    #cyMsgBox .dataTable.newItemsTable.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>select,
    #cyMsgBox .dataTable.newItemsTable.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>div.textMode{
        background-color: #FFFFFF;
    }
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>input[type='tel']:nth-child(2),
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>input[type='email']:nth-child(2),
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>input[type='number']:nth-child(2),
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>input[type='text']:nth-child(2),
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>input[type='password']:nth-child(2),
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>input[type='search']:nth-child(2),
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>input[type='date']:nth-child(2),
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>textarea:nth-child(2),
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>div.textMode:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>input[type='tel']:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>input[type='email']:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>input[type='number']:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>input[type='text']:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>input[type='password']:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>input[type='search']:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>input[type='date']:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>textarea:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>div.textMode:nth-child(2){
        background-color: #FFFFFF;
    }
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>select:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>select:nth-child(2){
        background-color: #FFFFFF;
        /*
        background-image: linear-gradient(
            45deg,
            transparent 50%,
            rgb(38.28, 38.28, 38.28) 50%
        ), linear-gradient(
            135deg
            , rgb(38.28, 38.28, 38.28) 50%,
            transparent 50%
        );
        background-position: calc(100% - 2.5vw) 4vw, calc(100% - 0.9375vw) 4vw;
        background-size: 1.5625vw 1.5625vw, 1.5625vw 1.5625vw;
        background-repeat: no-repeat;
        */
    }
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.reverColor.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>input[type='tel'],
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.reverColor.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>input[type='email'],
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.reverColor.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>input[type='number'],
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.reverColor.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>input[type='text'],
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.reverColor.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>input[type='password'],
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.reverColor.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>input[type='search'],
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.reverColor.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>input[type='date'],
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.reverColor.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>textarea,
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.reverColor.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>select,
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.reverColor.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>div.textMode,
    #cyMsgBox .dataTable.newItemsTable.reverColor.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>input[type='tel'],
    #cyMsgBox .dataTable.newItemsTable.reverColor.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>input[type='email'],
    #cyMsgBox .dataTable.newItemsTable.reverColor.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>input[type='number'],
    #cyMsgBox .dataTable.newItemsTable.reverColor.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>input[type='text'],
    #cyMsgBox .dataTable.newItemsTable.reverColor.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>input[type='password'],
    #cyMsgBox .dataTable.newItemsTable.reverColor.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>input[type='search'],
    #cyMsgBox .dataTable.newItemsTable.reverColor.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>input[type='date'],
    #cyMsgBox .dataTable.newItemsTable.reverColor.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>textarea,
    #cyMsgBox .dataTable.newItemsTable.reverColor.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>select,
    #cyMsgBox .dataTable.newItemsTable.reverColor.editColor>.tr:nth-of-type(odd)>.td:nth-of-type(even)>div.textMode{
        background-color: rgb(248, 248, 248);
    }
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.reverColor>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>input[type='tel']:nth-child(2),
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.reverColor>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>input[type='email']:nth-child(2),
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.reverColor>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>input[type='number']:nth-child(2),
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.reverColor>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>input[type='text']:nth-child(2),
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.reverColor>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>input[type='password']:nth-child(2),
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.reverColor>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>input[type='search']:nth-child(2),
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.reverColor>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>input[type='date']:nth-child(2),
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.reverColor>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>textarea:nth-child(2),
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.reverColor>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>select:nth-child(2),
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable.reverColor>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>div.textMode:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable.reverColor>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>input[type='tel']:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable.reverColor>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>input[type='email']:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable.reverColor>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>input[type='number']:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable.reverColor>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>input[type='text']:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable.reverColor>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>input[type='password']:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable.reverColor>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>input[type='search']:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable.reverColor>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>input[type='date']:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable.reverColor>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>textarea:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable.reverColor>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>select:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable.reverColor>.tr:nth-of-type(odd)>.td:nth-of-type(odd)>div.textMode:nth-child(2){
        background-color: rgb(248, 248, 248);
    }
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr>.td input[type='tel'],
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr>.td input[type='email'],
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr>.td input[type='number'],
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr>.td input[type='text'],
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr>.td input[type='password'],
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr>.td input[type='search'],
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr>.td input[type='date'],
    #cyMsgBox .dataTable.newItemsTable>.tr>.td input[type='tel'],
    #cyMsgBox .dataTable.newItemsTable>.tr>.td input[type='email'],
    #cyMsgBox .dataTable.newItemsTable>.tr>.td input[type='number'],
    #cyMsgBox .dataTable.newItemsTable>.tr>.td input[type='text'],
    #cyMsgBox .dataTable.newItemsTable>.tr>.td input[type='password'],
    #cyMsgBox .dataTable.newItemsTable>.tr>.td input[type='search'],
    #cyMsgBox .dataTable.newItemsTable>.tr>.td input[type='date']{
        /*width: calc(100% - 3.889vw * 2);*/
        min-width: 0px;
        height: calc(10.479vw - 2.22vw * 2);
        border: 0px;
        border-radius: 0;
        color: rgb(38.28, 38.28, 38.28);
        font-size: 3.889vw;
        font-weight: bold;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        flex-grow: 1;
        flex-shrink: 1;
        justify-content: flex-start;
        align-items: center;
        padding: 2.22vw 3.889vw;
        outline: none;
        -webkit-appearance: none;
    }
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(even)>.td input[type='tel'],
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(even)>.td input[type='email'],
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(even)>.td input[type='number'],
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(even)>.td input[type='text'],
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(even)>.td input[type='password'],
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(even)>.td input[type='search'],
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(even)>.td input[type='date'],
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(even)>.td input[type='tel'],
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(even)>.td input[type='email'],
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(even)>.td input[type='number'],
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(even)>.td input[type='text'],
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(even)>.td input[type='password'],
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(even)>.td input[type='search'],
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(even)>.td input[type='date']{
        background-color: rgb(248, 248, 248);
    }
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td input[type='tel'],
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td input[type='email'],
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td input[type='number'],
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td input[type='text'],
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td input[type='password'],
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td input[type='search'],
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td input[type='date'],
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td input[type='tel'],
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td input[type='email'],
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td input[type='number'],
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td input[type='text'],
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td input[type='password'],
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td input[type='search'],
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td input[type='date']{
        background-color: #FFFFFF;
    }
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr>.td textarea,
    #cyMsgBox .dataTable.newItemsTable>.tr>.td textarea{
        width: calc(100% - 3.889vw * 2);
        min-width: 0px;
        min-height: calc(10.479vw * 2);
        border: 0px;
        border-radius: 0;
        color: rgb(38.28, 38.28, 38.28);
        font-size: 3.889vw;
        font-weight: bold;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        flex-grow: 1;
        flex-shrink: 1;
        justify-content: flex-start;
        align-items: center;
        padding: 2.22vw 3.889vw 0px 3.889vw;
        outline: none;
        -webkit-appearance: none;
        resize: none;
    }
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(even)>.td textarea,
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(even)>.td textarea{
        background-color: rgb(248, 248, 248);
    }
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr>.td select,
    #cyMsgBox .dataTable.newItemsTable>.tr>.td select{
        max-width: calc(100% - 3.889vw - 3.125vw);
        min-width: 0px;
        height: 10.479vw;
        background-color: #FFFFFF;
        background-image: linear-gradient(
            45deg,
            transparent 50%,
            rgb(38.28, 38.28, 38.28) 50%
        ), linear-gradient(
            135deg
            , rgb(38.28, 38.28, 38.28) 50%,
            transparent 50%
        );
        background-position: calc(100% - 2.5vw) 4vw, calc(100% - 0.9375vw) 4vw;
        background-size: 1.5625vw 1.5625vw, 1.5625vw 1.5625vw;
        background-repeat: no-repeat;
        border: 0px;
        border-radius: 0;
        color: rgb(38.28, 38.28, 38.28);
        font-size: 3.889vw;
        font-weight: bold;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        flex-grow: 1;
        flex-shrink: 1;
        justify-content: flex-start;
        align-items: center;
        padding: 2.22vw calc(2.5vw + 1.5625vw * 2) 2.22vw 3.889vw;
        outline: none;
        -webkit-appearance: none;
    }
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(even)>.td select,
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(even)>.td select{
        background-color: rgb(248, 248, 248);
    }
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td select,
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td select{
        background-color: #FFFFFF;
    }
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr>.td>label~div.address,
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(even)>.td>div.address:nth-child(2),
    #cyMsgBox .dataTable.newItemsTable>.tr>.td>label~div.address,
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(even)>.td>div.address:nth-child(2){
        background-color: transparent;
        padding: 0px;
    }
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(even)>.td>label~div.address>div.zipcode,
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(even)>.td>label~div.address>div.zipcode{
        background-color: rgb(248, 248, 248);
    }
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td>label~div.address>div.zipcode,
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(odd)>.td>label~div.address>div.zipcode{
        background-color: #FFFFFF;
    }
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr>.td>label~div.address>div.zipcode,
    #cyMsgBox .dataTable.newItemsTable>.tr>.td>label~div.address>div.zipcode{
    }
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr>.td>label~div.address>select.city,
    #cyMsgBox .dataTable.newItemsTable>.tr>.td>label~div.address>select.city{
        padding: 2.22vw 0px;
    }
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr>.td>label~div.address>select.town,
    #cyMsgBox .dataTable.newItemsTable>.tr>.td>label~div.address>select.town{
        width: auto;
        padding: 2.22vw 0px;
    }
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr>.td>label~div.address,>input#address,
    #cyMsgBox .dataTable.newItemsTable>.tr>.td>label~div.address,>input#address{
        background-color: rgb(248, 248, 248);
        margin: 2.778vw 0px 0px 25vw;
    }

    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr>.td>div.buttonArea,
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr>.td:nth-of-type(odd)>div.buttonArea,
    .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr:nth-of-type(even)>.td:nth-of-type(odd)>div.buttonArea,
    #cyMsgBox .dataTable.newItemsTable>.tr>.td>div.buttonArea,
    #cyMsgBox .dataTable.newItemsTable>.tr>.td:nth-of-type(odd)>div.buttonArea,
    #cyMsgBox .dataTable.newItemsTable>.tr:nth-of-type(even)>.td:nth-of-type(odd)>div.buttonArea{
        background-color: transparent;
        justify-content: center;
    }

    .pagesContent>.rightContent>.centerArea .itemsTable{
        width: 100%;
        font-size: 4.104vw;
        font-weight: bold;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .pagesContent>.rightContent>.centerArea .itemsTable>ul{
        width: calc(100% - 5vw * 2);
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 7.778vw 5vw;
    }
    .pagesContent>.rightContent>.centerArea .itemsTable>ul:nth-of-type(even){
        background-color: #F0F0F0;
    }
    .pagesContent>.rightContent>.centerArea .itemsTable>ul>li{
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content: flex-start;
        align-items: stretch;
        margin: 0px 0px 2.778vw 0px;
    }
    .pagesContent>.rightContent>.centerArea .itemsTable>ul>li:last-child{
        margin: 0px;
    }
    .pagesContent>.rightContent>.centerArea .itemsTable>ul>li>label{
        width: 17vw;
        color: #333333;
        /*text-align-last: justify;*/
        text-align: right;
        margin: 0px 3vw 0px 0px;
        padding: 1.667vw 0px;
    }
    .pagesContent>.rightContent>.centerArea .itemsTable>ul>li>div{
        color: #000000;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        flex-grow: 1;
        flex-shrink: 1;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 1.667vw 2.778vw;
    }
    .pagesContent>.rightContent>.centerArea .itemsTable>ul>li:nth-of-type(odd)>div{
        background-color: #F0F0F0;
    }
    .pagesContent>.rightContent>.centerArea .itemsTable>ul:nth-of-type(even)>li:nth-of-type(odd)>div{
        background-color: #FFFFFF;
    }
    .pagesContent>.rightContent>.centerArea .itemsTable>ul>li>div.buttonArea,
    .pagesContent>.rightContent>.centerArea .itemsTable>ul>li:nth-of-type(odd)>div.buttonArea,
    .pagesContent>.rightContent>.centerArea .itemsTable>ul:nth-of-type(even)>li:nth-of-type(odd)>div.buttonArea{
        background-color: transparent;
        justify-content: center;
    }
}


/* =========================================================
 * 右邊主頁 - 中間區塊 - 內容 - 排序樣式
 * ========================================================= */
.pagesContent>.rightContent>.centerArea>.centerAreaContents img.sortIcon{
    height: 0.9375vw;
    margin: 0px 0.2604vw;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents img.sortIcon{
        height: 5.625vw;
        margin: 0px 1vw;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents em img.sortIcon{
    height: 0.7292vw;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents em img.sortIcon{
        height: 4.375vw;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents ul.sortable{
    width: calc(100% - 5px * 2);
    border: 1px solid #CCCCCC;
    font-size: 18px;
    padding: 5px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents ul.sortable{
        width: calc(100% - 1vw * 2);
        font-size: 4.375vw;
        padding: 1vw;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents ul.sortable .dragged{
    position: absolute;
    opacity: 0.5;
    z-index: 2000;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents ul.sortable ul{
    width: calc(100% - 5px * 2 - 40px);
    margin: 5px 0px 0px 40px;
    padding: 5px
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents ul.sortable li{
    width: calc(100% - 5px * 2 - 1px * 2);
    background-color: #EFEFEF;
    border: 1px solid #CCCCCC;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 0px 5px 0px;
    padding: 5px;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents ul.sortable li:hover{
    background-color: #DFDFDF;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents ul.sortable li>ul{
    background-color: #FFFFFF;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents ul.sortable li:last-child{
    margin: 0px;
}

.pagesContent>.rightContent>.centerArea>.centerAreaContents ul.sortable li.placeholder{
    position: relative;
    margin: 0;
    padding: 0;
    border: none;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents ul.sortable li.placeholder:before{
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    margin-top: -0.5vw;
    left: -0.5vw;
    top: -0.4vw;
    border: 0.5vw solid transparent;
    border-left-color: #FF0000;
    border-right: none;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents ul.sortable li>.sortMoveIcon{
    width: 18px;
    height: 18px;
    background-image: url(/images/iconSort.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    line-height: 18px;
    display: inline-block;
    margin-right: 0.5vw;
    cursor: move;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents ul.sortable li>.sortMoveIcon{
        margin-right: 2vw;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents ul.sortable li>.info{
    width: calc(100% - 18px - 0.5vw - 5px * 2);
    background-color: #FCFCFC;
    font-size: 0.729167vw;
    line-height: 18px;
    display: none;
    margin: 5px 0px 0px calc(18px + 0.5vw);
    padding: 5px;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents ul.sortable li>.info>dl{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents ul.sortable li>.info>dl dt{
    width: 120px;
    min-height: 30px;
    background-color: #2196F3;
    color: #FFFFFF;
    text-align: center;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin: 1px 2px 1px 0px;
    padding: 5px;
    float: left;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents ul.sortable li>.info>dl dd{
    width: calc(100% - 120px - 5px * 2 * 2 - 2px);
    min-height: 30px;
    background-color: #EFEFEF;
    color: #333333;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: center;
    align-items: flex-start;
    margin: 1px 0px;
    padding: 5px;
    overflow-x: auto;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents ul.sortable li>.buttonArea{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: flex-end;
    align-items: center;
    margin: 5px 0px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents ul.sortable li>.buttonArea{
        margin: 5vw 0px;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents ul.sortable li>.buttonArea input{
        font-size: 3.75vw;
    }
}


/* =========================================================
 * 右邊主頁 - 中間區塊 - 內容 - 按鈕樣式
 * ========================================================= */
.pagesContent>.rightContent>.centerArea>.centerAreaContents .btn{
    width: 100%;
    text-align: right;
    margin: 20px 0px 20px 0px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents .btn{
        width: calc(100% - 5vw * 2);
        margin: 5vw;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents div.form>ul.dataRow .btn{
        width: 100%;
        margin: 5vw 0px;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .btn input[type='button']:first-child{
    margin-left: 0px;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .btn input[type='button']:last-child{
    margin-right: 0px;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents input[type='button']{
    height: 35px;
    background-color: #555555;
    border: 0px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    box-shadow: 1px 1px 1px 1px rgb(60%, 60%, 60%);
    color: #FFFFFF;
    font-family: Arial, Microsoft JhengHei;
    font-size: 18px;
    font-weight: normal;
    line-height: 35px;
    text-align: center;
    margin: 0px 6px 0px 6px;
    padding: 0px 15px 0px 15px;
    cursor: pointer;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents input[type='button']{
        height: 33px;
        font-size: 16px;
        line-height: 33px;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents input[type='button']:hover{
    background-color: #333333;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents input.smallBtn{
    height: auto;
    background: linear-gradient(
        180deg,
        rgb(149, 149, 149) 0%,
        rgb(115, 115, 115) 100%
    );
    border: 1px solid rgb(140, 140, 140);
    border-radius: 3px;
    box-shadow: 0px 2px 2px 0px rgb(100, 100, 100);
    color: rgb(214, 214, 214);
    font-size: 14px;
    font-weight: bold;
    line-height: normal;
    padding: 2px 12px;
    margin: 0px 0px 0px 20px;
    position: relative;
    top: -1px;
    cursor: pointer;
    outline: none;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents input.smallBtn{
        background: linear-gradient(
            180deg,
            rgb(149, 149, 149) 0%,
            rgb(115, 115, 115) 100%
        );
        border-radius: 0.9375vw;
        box-shadow: 0px 0.625vw 0.625vw 0px rgb(100, 100, 100);
        color: rgb(255, 255, 255);
        font-size: 4.375vw;
        padding: 0.625vw 3.75vw;
        margin: 0px 0px 0px 6.25vw;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents input.smallBtn:hover{
    background: linear-gradient(
        180deg,
        rgb(149, 149, 149) 0%,
        rgb(115, 115, 115) 100%
    );
    color: rgb(255, 255, 255);
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents input.smallBtn:first-child{
    margin: 0px;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents input.smallBtn.enabled{
    color: rgb(255, 255, 255);
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents input.smallBtn.disabled{
    color: rgb(73, 73, 73);
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents input.middleBtn{
    height: auto;
    background: linear-gradient(
        180deg,
        rgb(149, 149, 149) 0%,
        rgb(115, 115, 115) 100%
    );
    border: 1px solid rgb(140, 140, 140);
    border-radius: 3px;
    box-shadow: 0px 2px 2px 0px rgb(100, 100, 100);
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: bold;
    line-height: normal;
    padding: 5px 15px;
    margin: 0px 0px 0px 3px;
    position: relative;
    top: -1px;
    cursor: pointer;
    outline: none;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents input[type='button'].middleBtn:first-child{
    margin: 0px 0px 0px 0px;
}


/* =========================================================
 * 右邊主頁 - 中間區塊 - 內容 - 搜尋樣式
 * ========================================================= */
.pagesContent>.rightContent>.centerArea>.centerAreaContents .searchBar{
    background-color: #F5F5F5;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    box-shadow: 1px 1px 1px 0px rgba(60%,60%,60%,1);
    color: #000000;
    font-family: Arial, Microsoft JhengHei;
    font-size: 18px;
    font-weight: normal;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    margin: 0px 0px 40px 0px;
    padding: 20px;
    position: relative;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents .searchBar{
        font-size: 16px;
    }
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents .searchBar{
        width: calc(100% - 5vw * 2);
        min-height: auto;
        background-color: transparent;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        box-shadow: none;
        font-size: 4.104vw;
        font-weight: bold;
        margin: 7.778vw 5vw;
        padding: 0px;
    }
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents .searchBar .formArea{
        width: 100%;
        margin: 0px 0px 5vw 0px;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .searchBar>p{
    min-height: calc(35px + 2px);
    margin: 0px 0px 10px 0px;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .searchBar input[type='tel'],
.pagesContent>.rightContent>.centerArea>.centerAreaContents .searchBar input[type='email'],
.pagesContent>.rightContent>.centerArea>.centerAreaContents .searchBar input[type='number'],
.pagesContent>.rightContent>.centerArea>.centerAreaContents .searchBar input[type='text'],
.pagesContent>.rightContent>.centerArea>.centerAreaContents .searchBar input[type='password'],
.pagesContent>.rightContent>.centerArea>.centerAreaContents .searchBar input[type='search'],
.pagesContent>.rightContent>.centerArea>.centerAreaContents .searchBar input[type='date'],
.pagesContent>.rightContent>.centerArea>.centerAreaContents .searchBar select{
    background-color: #FFFFFF;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents .searchBar label{
        min-width: 17vw;
        font-size: 4.104vw;
        /*text-align-last: justify;*/
        text-align: right;
        display: inline;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents .searchBar input[type='tel'],
    .pagesContent>.rightContent>.centerArea>.centerAreaContents .searchBar input[type='email'],
    .pagesContent>.rightContent>.centerArea>.centerAreaContents .searchBar input[type='number'],
    .pagesContent>.rightContent>.centerArea>.centerAreaContents .searchBar input[type='text'],
    .pagesContent>.rightContent>.centerArea>.centerAreaContents .searchBar input[type='password'],
    .pagesContent>.rightContent>.centerArea>.centerAreaContents .searchBar input[type='search'],
    .pagesContent>.rightContent>.centerArea>.centerAreaContents .searchBar input[type='date']{
        height: 10.791vw;
        background-color: #F0F0F0;
        color: #000000;
        font-size: 4.104vw;
        font-weight: bold;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        flex-grow: 1;
        flex-shrink: 1;
        justify-content: flex-start;
        align-items: center;
        padding: 0px 2.778vw;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents .searchBar select{
        height: 10.791vw;
        background-color: #F0F0F0;
        color: #000000;
        font-size: 4.104vw;
        font-weight: bold;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        flex-grow: 1;
        flex-shrink: 1;
        justify-content: flex-start;
        align-items: center;
        padding: 0px 2.778vw;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .searchBar>p:last-child{
    margin: 0px;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .searchBar .buttonArea{
    width: 100%;
    text-align: right;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents .searchBar .buttonArea{
        display: flex;
        flex-wrap: wrap;
        flex-direction: row-reverse;
        flex-grow: 1;
        flex-shrink: 1;
        justify-content: flex-start;
        align-items: center;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents .searchBar .buttonArea input[type='button']{
        margin: 0px 20px 0px 0px;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents .searchBar .buttonArea input[type='button']:first-child{
        margin: 0px;
    }
}

/* =========================================================
 * 右邊主頁 - 中間區塊 - 內容 - 文章標籤編輯區
 * ========================================================= */
.pagesContent>.rightContent>.centerArea>.centerAreaContents ul.tagsArea{
    width: 100%;
    min-height: calc(32px * 2);
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    float:left;
    clear: both;
    position: relative;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents ul.tagsArea>li{
    background-color: #EEEEEE;
    border: 1px solid #999999;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: #000000;
    font-family: Microsoft JhengHei, Arial;
    font-size: 18px;
    font-weight: normal;
    text-align: left;
    line-height: 26px;
    margin: 0px 5px 5px 0px;
    padding: 0px 0px 0px 10px;
    /*float:left;*/
    position: relative;
    top: 3px;
    cursor: all-scroll;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents ul.tagsArea>li:hover{
    background-color: #CCCCCC;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents ul.tagsArea>li>input[type='button']{
    width: auto;
    height: auto;
    background-color: transparent;
    border: 0px;
    box-shadow: none;
    color: #999999;
    font-family: Arial;
    font-size: 18px;
    font-weight: bold;
    line-height: 18px;
    padding: 0px 0px 0px 0px;
    outline: none;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents ul.tagsArea>li>input[type='button']:hover{
    color: #000000;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents ul.tagsArea>.inputArea{
    display: inline;
    position: relative;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents ul.tagsArea>.inputArea>input[type='text']{
    min-width: 50px;
    max-width: 300px;
    height: 18px;
    border: 0px;
    color: #000000;
    font-family: Microsoft JhengHei, Arial;
    font-size: 18px;
    font-weight: normal;
    text-align: left;
    line-height: 26px;
    margin: 3px 0px 5px 5px;
    position: relative;
    /*float:left;*/
    outline: none;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents ul.tagsArea>.inputArea>input[type='text']::-ms-clear,
.pagesContent>.rightContent>.centerArea>.centerAreaContents ul.tagsArea>.inputArea>input[type='text']::-ms-reveal{
    width: 0px;
    height: 0px;
    display: none;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents ul.tagsArea>.inputArea>ul{
    display: inline-block;
    position: absolute;
    top: 24px;
    left: 0px;
    z-index: 20;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents ul.tagsArea>.inputArea>ul>li{
    background-color: #EEEEEE;
    border: 1px solid #999999;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: #000000;
    font-family: Microsoft JhengHei, Arial;
    font-size: 18px;
    font-weight: normal;
    text-align: left;
    line-height: 24px;
    white-space: nowrap;
    margin: 0px 0px 1px 0px;
    padding: 0px 10px 0px 10px;
    cursor: pointer;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents ul.tagsArea>.inputArea>ul>li:hover{
    background-color: #CCCCCC;
}

/* =========================================================
 * 右邊主頁 - 中間區塊 - 內容 - 排序按鈕
 * ========================================================= */
.pagesContent>.rightContent>.centerArea>.centerAreaContents .sortBtn{
    width: 20px;
    height: 20px;
    background:url(/images/sort.png) no-repeat center center;
    margin: 0px 0px 0px 0px;
    cursor: row-resize;
    float: right;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .sortBtn:hover{
    background:url(/images/sortCurrent.png) no-repeat center center;
}

/* =========================================================
 * 右邊主頁 - 中間區塊 - 內容 - 頁碼
 * ========================================================= */
.pagesContent>.rightContent>.centerArea>.centerAreaContents #pageArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;
    margin: 20px 0px;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents #pageArea>#pageContent{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents #pageArea>#pageContent{
        width: calc(100% - 5vw * 2);
        align-items: center;
        margin: 0px 5vw;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents #pageArea>#pageContent>div.info{
    width: calc(100% - 10px * 2);
    border-bottom: 1px solid #999999;
    color: #666666;
    font-family: Microsoft JhengHei, Arial;
    font-size: 14px;
    font-weight: normal;
    line-height: 25px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    margin: 0px 0px 5px 0px;
    padding: 0px 10px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents #pageArea>#pageContent>div.info{
        width: calc(100% - 3.125vw * 2);
        font-size: 3.75vw;
        justify-content: center;
        margin: 0px 0px 1.5625vw 0px;
        padding: 0px 3.125vw;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents #pageArea>#pageContent>div.info b{
    color: #333333;
    font-family: Arial;
    padding: 0px 5px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents #pageArea>#pageContent>div.info b{
        padding: 0px 1.5625vw;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents #pageArea>#pageContent>.buttonArea{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents #pageArea>#pageContent>.buttonArea>input[type='button']{
    height: 25px;
    border: 0px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    box-shadow: 1px 1px 1px 1px rgb(60%, 60%, 60%);
    color: #FFFFFF;
    font-family: Arial, Microsoft JhengHei;
    font-size: 14px;
    font-weight: normal;
    line-height: normal;
    margin: 0px 6px;
    padding: 0px 15px;
    cursor: pointer;
    outline: none;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents #pageArea>#pageContent>.buttonArea>input[type='button']{
        height: 7.8125vw;
        -webkit-border-radius: 0.9375vw;
        -moz-border-radius: 0.9375vw;
        border-radius: 0.9375vw;
        box-shadow: 0.3125w 0.3125w 0.3125w 0.3125w rgb(60%, 60%, 60%);
        font-size: 4.375vw;
        margin: 0px 1.5625vw;
        padding: 0px 3.125vw;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents #pageArea>#pageContent>.buttonArea>.activeBtn{
    background: #555555;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents #pageArea>#pageContent>.buttonArea>.grayBtn{
    background: #BBBBBB;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents #pageArea>#pageContent>.buttonArea>input.first,
    .pagesContent>.rightContent>.centerArea>.centerAreaContents #pageArea>#pageContent>.buttonArea>input.last{
        display: none;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents #pageArea>#pageContent>.buttonArea>ul{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents #pageArea>#pageContent>.buttonArea>ul>li{
    min-width: 25px;
    height: 25px;
    color: #333333;
    font-size: 13px;
    font-family: Arial;
    font-weight: normal;
    line-height: normal;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0px 5px;
    cursor: pointer;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents #pageArea>#pageContent>.buttonArea>ul>li{
        min-width: 7.8125vw;
        height: 7.8125vw;
        font-size: 4.0625vw;
        margin: 0px 1.5625vw;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents #pageArea>#pageContent>.buttonArea>ul>li:hover{
    text-decoration: underline;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents #pageArea>#pageContent>.buttonArea>ul>.current{
    background: #555555;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    box-shadow: 1px 1px 1px 1px rgb(60%, 60%, 60%);
    color: #FFFFFF;
    cursor: text;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents #pageArea>#pageContent>.buttonArea>ul>.current{
        -webkit-border-radius: 0.9375vw;
        -moz-border-radius: 0.9375vw;
        border-radius: 0.9375vw;
        box-shadow: 0.3125w 0.3125w 0.3125w 0.3125w rgb(60%, 60%, 60%);
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents #pageArea>#pageContent>.buttonArea>ul>.current:hover{
    text-decoration: none;
}


/* =========================================================
 * 右邊主頁 - 中間區塊 - 案件列表
 * ========================================================= */
html[class^='project'] .pagesContent>.rightContent,
html[class^='jobs'] .pagesContent>.rightContent{
    width: 100%;
    max-width: none;
    background-color: transparent;
    box-shadow: none;
    border: 0px;
    margin: 0px;
}
@media screen and (orientation: portrait){
    html[class^='project'] .pagesContent>.rightContent,
    html[class^='jobs'] .pagesContent>.rightContent{
        background-color: rgb(255, 255, 255);
    }
}
html[class^='project'] .pagesContent>.rightContent>.topArea,
html[class^='jobs'] .pagesContent>.rightContent>.topArea{
    width: calc(100% - 25px * 2);
    background-color: transparent;
    display: none;
    justify-content: flex-end;
    padding: 25px;
    position: absolute;
    top: 0px;
    right: 0px;
}
@media screen and (orientation: portrait){
    html[class^='project'] .pagesContent>.rightContent>.topArea,
    html[class^='jobs'] .pagesContent>.rightContent>.topArea{
        width: calc(100% - 5vw * 2);
        background-color: rgb(28, 67, 70);
        display: flex;
        justify-content: center;
        padding: 5vw;
        position: relative;
        top: unset;
        left: unset;
    }
}
html[class^='project'] .pagesContent>.rightContent>.topArea>h1,
html[class^='jobs'] .pagesContent>.rightContent>.topArea>h1{
    display: none;
}
@media screen and (orientation: portrait){
    html[class^='project'] .pagesContent>.rightContent>.topArea>h1,
    html[class^='jobs'] .pagesContent>.rightContent>.topArea>h1{
        display: flex;
    }
}
html[class^='project'] .pagesContent>.rightContent>.centerArea>.centerAreaContents,
html[class^='jobs'] .pagesContent>.rightContent>.centerArea>.centerAreaContents{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    padding: 0px;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.title,
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.title{
    width: calc(100% - 25px * 2 - 80px);
    height: calc(215px - 30px * 2);
    background-color: var(--project-color-2);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: flex-end;
    padding: 30px 25px 30px calc(80px + 25px);
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.title,
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.title{
        height: calc(180px - 30px * 2);
    }
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.title,
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.title{
        display: none;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.title>.viewArea,
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.title>.viewArea{
    width: 100%;
    max-width: 1260px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-end;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.title>.viewArea>img,
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.title>.viewArea>img{
    max-width: unset;
    height: 100px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.title>.viewArea>img,
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.title>.viewArea>img{
        height: 80px;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu,
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu{
    width: calc(100% - 25px * 2 - 80px);
    height: 75px;
    background-color: var(--user-color-1);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 0px 25px 0px calc(80px + 25px);
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu,
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu{
        height: 60px;
    }
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu,
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu{
        width: calc(100% - 5vw * 2);
        height: auto;
        min-height: auto;
        background-color: transparent;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        box-shadow: none;
        font-size: 4.104vw;
        font-weight: bold;
        margin: 0px;
        padding: 7.778vw 5vw;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul{
    width: 100%;
    max-width: 1260px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: stretch;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul{
        flex-direction: column;
        flex-grow: 1;
        justify-content: flex-start;
        align-items: flex-start;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu>ul{
    width: 100%;
    max-width: 1260px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-end;
    align-items: stretch;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li,
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu>ul>li{
    /*max-width: calc((100% - 60px - 160px * 2 - (10px * 2 * (4 - 1))) / 4);*/
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: stretch;
    margin: 0px 10px;
    position: relative;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li,
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu>ul>li{
        margin: 0px 5px;
    }
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li,
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu>ul>li{
        width: 100% !important;
        max-width: unset !important;
        margin: 0px 0px 5vw 0px !important;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li:last-child,
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu>ul>li:last-child{
        margin: 0px !important;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li:first-child,
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu>ul>li:first-child{
    max-width: 60px;
    margin: 0px 10px 0px 0px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li:first-child,
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu>ul>li:first-child{
        max-width: 40px;
    }
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li:first-child,
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu>ul>li:first-child{
        max-width: none;
    }
}

.pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li:nth-child(2),
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu>ul>li:nth-child(2){
    max-width: 100px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li:nth-child(2),
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu>ul>li:nth-child(2){
        max-width: 80px;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li:nth-child(3),
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu>ul>li:nth-child(3){
    max-width: 153px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li:nth-child(3),
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu>ul>li:nth-child(3){
        max-width: 110px;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li:nth-child(4),
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu>ul>li:nth-child(4){
    max-width: 139px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li:nth-child(4),
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu>ul>li:nth-child(4){
        max-width: 110px;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li:nth-child(5),
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu>ul>li:nth-child(5){
    /*max-width: calc((100% - 60px - 100px - 153px - 139px - 116px - 116px - 139px - 55px - (10px * 2 * 2)) / 2);*/
    max-width: calc(100% - 60px - 100px - 110px - 100px - 116px - 153px - 139px - 55px - (10px * 2));
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li:nth-child(5),
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu>ul>li:nth-child(5){
        max-width: calc(100% - 60px - 100px - 153px - 139px - 85px - 110px - 100px - 55px - (10px * 2));
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li:nth-child(6),
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu>ul>li:nth-child(6){
    max-width: 116px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li:nth-child(6),
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu>ul>li:nth-child(6){
        max-width: 90px;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li:nth-child(7),
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu>ul>li:nth-child(7){
    max-width: 153px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li:nth-child(7),
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu>ul>li:nth-child(7){
        max-width: 120px;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li:nth-child(8),
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu>ul>li:nth-child(8){
    max-width: 139px;
    margin: 0px 0px 0px 10px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li:nth-child(8),
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu>ul>li:nth-child(8){
        max-width: 110px;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li:last-child{
    max-width: 55px;
    margin: 0px 0px 0px 10px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li:last-child{
        max-width: 30px;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu>ul>li:last-child{
    max-width: none;
    flex-grow: 0;
    margin: 0px;
}

.pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li>div,
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu>ul>li>div{
    width: 100%;
    color: rgb(255, 255, 255);
    font-size: 20px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li>div,
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu>ul>li>div{
        font-size: 16px;
    }
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li>div,
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu>ul>li>div{
        color: rgb(73, 73, 73);
        font-size: 4.104vw;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li>div label,
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu>ul>li>div label{
    font-weight: bold;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    cursor: pointer;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li>div label,
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu>ul>li>div label{
        min-width: 8vw;
        max-width: 26vw;
        color: rgb(73, 73, 73);
        font-size: 4.104vw;
        line-height: normal;
        /*text-align-last: justify;*/
        text-align: right;
        display: inline;
        position: relative;
        margin: 0px 3vw 0px 0px;
        padding: 2.744vw 0px;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li>div>em,
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu>ul>li>div>em{
    font-style: normal;
    font-weight: bold;
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li>div .multipleSelect{
    min-height: 24px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li>div .multipleSelect{
        min-height: 23px;
    }
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li>div .multipleSelect{
        height: auto;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li>div .multipleSelect input{
    width:100%;
    background-color: transparent;
    opacity: 1;
    border: 0px;
    color: var(--project-color-3);
    -webkit-text-fill-color: var(--project-color-3);
    font-size: 20px;
    font-weight: bold;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: flex-start;
    outline: none;
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li>div .multipleSelect input{
        font-size: 16px;
    }
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li>div .multipleSelect input{
        display: none;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li>div .multipleSelect>select{
    width: max-content;
    background-color: #FFFFFF;
    opacity: 1;
    border: 1px solid rgb(182, 182, 182);
    color: rgb(38.28, 38.28, 38.28);
    -webkit-text-fill-color: rgb(38.28, 38.28, 38.28);
    font-size: 20px;
    /*display: block;*/
    display: none;
    position: absolute;
    top: 100%;
    z-index: 2;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li>div .multipleSelect>select{
        font-size: 16px;
    }
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li>div .multipleSelect>select{
        width: auto;
        height: 10.791vw;
        background-color: #F0F0F0;
        border: 0px;
        color: #000000;
        font-size: 4.104vw;
        font-weight: bold;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        flex-grow: 1;
        flex-shrink: 1;
        justify-content: flex-start;
        align-items: center;
        padding: 0px 2.778vw;
        position: relative;
        top: 0px;
    }
}
@media screen and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li>div .multipleSelect>select[multiple='true']{
        color: #FFFFFF;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li>div .multipleSelect>select option:not(:checked){
        color: rgb(38.28, 38.28, 38.28);
        -webkit-text-fill-color: rgb(38.28, 38.28, 38.28);
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li>div .multipleSelect>select option:checked{
        color: #FFFFFF !important;
        background-color: rgb(145, 145, 145);
        outline-color: rgb(145, 145, 145);
    }
}

.pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li>div .ddmsInputToolArea,
.pagesContent>.rightContent>.centerArea>.centerAreaContents.job>.menu>ul>li>div .ddmsInputToolArea{
    width: calc(100% - 5px * 2);
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li>div .ddmsInputToolArea,
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.job>.menu>ul>li>div .ddmsInputToolArea{
        width: auto;
        margin: 0px;
    }
}

.pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li>div input[type='search'].ddmsInputTool,
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu>ul>li>div input[type='search'].ddmsInputTool{
    color: var(--project-color-3);
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li>div input[type='search'].ddmsInputTool,
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu>ul>li>div input[type='search'].ddmsInputTool{
        width: calc(100% - 2.778vw * 2);
        height: 10.791vw;
        background-color: #F0F0F0;
        border: 0px;
        color: #000000;
        font-size: 4.104vw;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        flex-grow: 1;
        flex-shrink: 1;
        justify-content: flex-start;
        align-items: center;
        padding: 0px 2.778vw;
    }

}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li>div .ddmsInputToolArea>div,
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu>ul>li>div .ddmsInputToolArea>div{
    max-width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li>div .ddmsInputToolArea>div,
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu>ul>li>div .ddmsInputToolArea>div{
        display: none;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li>div a{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li>div a>img{
    height: 40px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu>ul>li>div a>img{
        height: 30px;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .dataTable{
    margin: 0px 0px 22px 0px;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .dataTable#projectDetail{
    margin: 0px 0px 10px 0px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .dataTable#projectDetail>.tr>.td>label:not(.checkBox){
        min-width: 24vw;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project #projectDetail input{
    font-size: 16px !important;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project #projectDetail input{
        font-size: 3.889vw !important;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project #projectDetail input[name='unit']{
    text-align: center;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project #projectDetail input[name='unit']{
        text-align: left;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project #projectDetail>.tr.light input,
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project #projectDetail>.tr.light textarea,
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project #projectDetail>.tr.light>.td p.ellipsis{
    color: rgb(214, 214, 214) !important;
    -webkit-text-fill-color: rgb(214, 214, 214) !important;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project #projectDetail>.tr select:disabled{
    opacity: 1;
    color: rgb(38.28, 38.28, 38.28);
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project #projectDetail>.tr.light select{
    color: rgb(214, 214, 214) !important;
    -webkit-text-fill-color: rgb(214, 214, 214) !important;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project #projectDetail>.tr>.td.name,
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project #projectDetail>.tr>.td.detail,
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project #projectDetail>.tr>.td.vendor,
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project #projectDetail>.tr>.td.cost{
    cursor: pointer;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project #projectDetail>.tr>.td.name>div,
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project #projectDetail>.tr>.td.detail>div{
    position: relative;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project #projectDetail>.tr>.td.name p,
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project #projectDetail>.tr>.td.detail p{
    text-align: left;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project #projectDetail>.tr>.td.vendor>input[name='vendor'],
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project #projectDetail>.tr>.td.cost>input[name='cost']{
    cursor: pointer;
}

.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectDetailButtons{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 0px 40px 0px;
    padding: 0px 6%;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectDetailButtons{
        padding: 0px 5px;
    }
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectDetailButtons{
        width: calc(100% - 5vw * 2);
        flex-wrap: wrap;
        align-items: flex-start;
        margin: 0px 0px 5vw 0px;
        padding: 0px 5vw;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectDetailButtons>div{
    width: 50%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectDetailButtons>div{
        width: 100%;
        flex-wrap: wrap;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectDetailButtons>div:nth-child(2){
    justify-content: space-between;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectDetailButtons input[type='button']{
        font-size: 3.889vw;
        flex-grow: 1;
        margin: 2vw 3px 0px 3px;
        padding: 5px 12px;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectDetailButtons input[name='rent']{
        order: 1;
    }
}


.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary{
    width: calc(100% - 6% * 2);
    background-color: rgb(145, 145, 145);
    color: #504D4E;
    font-size: 16px;
    font-weight: bold;
    padding: 20px 6%;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary{
        width: calc(100% - 20px * 2);
        padding: 20px;
    }
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary{
        width: calc(100% - 5vw * 2);
        font-size: 3.889vw;
        padding: 5vw;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li{
    width: calc(25% - 10px * 2);
    margin: 5px 10px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li{
        width: 100%;
        margin: 0px 0px 5vw 0px;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.customerContact{
        order: 5;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.customerMail{
        order: 6;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.sum{
        order: 1;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.sumWithTax{
        order: 2;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.customerTel{
        order: 7;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.customerFax{
        order: 8;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.cost{
        order: 3;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.profit{
        order: 4;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.sales{
        order: 9;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.invoiceBuyer{
        order: 10;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.invoiceDate{
        order: 13;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.invoiceDate>div{
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.invoiceDate>div>input#invoiceDate{
    width: auto;
    background-color: rgb(145, 145, 145);
    flex-grow: 0;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.invoiceDate>div>input#invoiceDate::-webkit-calendar-picker-indicator{
        margin-left: -20px;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.invoiceDate>div>input#invoiceDate + em{
        max-width: unset;
    }
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.invoiceDate>div>input#invoiceDate{
        flex-grow: 1;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.invoiceDate>div>em{
        color: #FFFFFF;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.designer{
        order: 12;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.paymentDate{
        order: 13;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.paymentDate>div{
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.paymentDate>div>input#paymentDate{
    width: auto;
    background-color: rgb(145, 145, 145);
    flex-grow: 0;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.paymentDate>div>input#paymentDate::-webkit-calendar-picker-indicator{
        margin-left: -20px;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.paymentDate>div>input#paymentDate + em{
        max-width: unset;
    }
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.middleBtns.buttons1{
        width: calc(59% - 10px * 2);
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.middleBtns.buttons2{
        width: calc(41% - 10px * 2);
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.middleBtns>div input[type='button']{
        padding: 5px 7px;
    }
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.paymentDate>div>input#paymentDate{
        flex-grow: 1;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.paymentDate>div>em{
        color: #FFFFFF;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.middleBtns{
        order: 14;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.middleBtns div{
        width: 100%;
        flex-wrap: wrap;
        align-items: flex-start;
        margin: 0px;
        padding: 0px;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.middleBtns>div input[type='button']{
        font-size: 3.889vw;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        flex-grow: 1;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        margin: 2vw 3px 0px 3px;
        padding: 5px 12px;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.middleBtns.buttons1>div>input[type='button']{
        width: calc(50% - 12px * 2 - 3px * 2);
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.middleBtns.buttons1>div>input[name='projectCost']{
        width: calc(100% - 3px * 2);
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.middleBtns.buttons2>div{
    justify-content: space-between;
}

.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.twoColumn{
    width: calc(50% - 10px * 2);
}
@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1399px) {
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.twoColumn input{
        padding: 5px 10px;
    }
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.twoColumn{
        width: 100%;
        margin: 0px 0vw 5vw 0vw;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li label{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li label{
        width: 24vw;
        color: #FFFFFF;
        -webkit-text-fill-color: #FFFFFF;
        /*text-align-last: justify;*/
        text-align: right;
        display: inline;
        margin: 0px 3vw 0px 0px;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li input[type='tel'],
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li input[type='email'],
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li input[type='number'],
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li input[type='text'],
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li input[type='password'],
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li input[type='search'],
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li input[type='date'],
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li select{
    width: 100%;
    background-color: transparent;
    opacity: 1;
    border: 0px;
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: flex-start;
    outline: none;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li input[type='tel'],
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li input[type='email'],
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li input[type='number'],
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li input[type='text'],
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li input[type='password'],
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li input[type='search'],
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li input[type='date'],
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li select{
        background-color: #FFFFFF;
        color: rgb(38.28, 38.28, 38.28);
        -webkit-text-fill-color: rgb(38.28, 38.28, 38.28);
        font-size: 3.889vw;
        padding: 2.22vw 3.889vw;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li input[type='date']{
        background-color: #FFFFFF;
        background-image: linear-gradient(45deg, transparent 50%, rgb(38.28, 38.28, 38.28) 50%), linear-gradient(135deg, rgb(38.28, 38.28, 38.28) 50%, transparent 50%);
        background-position: calc(100% - 2.5vw) 4vw, calc(100% - 0.9375vw) 4vw;
        background-size: 1.5625vw 1.5625vw, 1.5625vw 1.5625vw;
        background-repeat: no-repeat;
        -webkit-appearance: none;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.invoiceDate>div>input#invoiceDate,
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li.paymentDate>div>input#paymentDate{
        height: calc(9.375vw - 2.22vw * 2);
        background-color: #FFFFFF;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li input[type='date']::-webkit-calendar-picker-indicator {
    filter: invert(1);
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li select option{
    color: rgb(38.28, 38.28, 38.28);
    font-weight: bold;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li .multipleSelect{
    min-height: 24px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    cursor: pointer;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li .multipleSelect{
        flex-direction: column;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li .multipleSelect input{
        width: calc(100% - 3.889vw * 2);
        /*
        color: transparent;
        -webkit-text-fill-color: transparent;
        */
        display: none;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li .multipleSelect>select{
    width: 100%;
    background-color: #FFFFFF;
    border: 1px solid rgb(182, 182, 182);
    color: rgb(38.28, 38.28, 38.28);
    display: none;
    position: absolute;
    top: 100%;
    z-index: 2;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li .multipleSelect>select{
        background-color: #FFFFFF;
        background-image: linear-gradient(45deg, transparent 50%, rgb(38.28, 38.28, 38.28) 50%), linear-gradient(135deg, rgb(38.28, 38.28, 38.28) 50%, transparent 50%);
        background-position: calc(100% - 2.5vw) 4vw, calc(100% - 0.9375vw) 4vw;
        background-size: 1.5625vw 1.5625vw, 1.5625vw 1.5625vw;
        background-repeat: no-repeat;
        border: 0px;
        color: rgb(38.28, 38.28, 38.28);
        -webkit-text-fill-color: rgb(38.28, 38.28, 38.28);
        display: block;
        position: relative;
        top: 0px;
        -webkit-appearance: none;
        overflow: hidden;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li .multipleSelect>select[multiple='true']:focus{
        background-color: #FFFFFF;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li .multipleSelect>select[multiple='true']{
    color: #FFFFFF;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li .multipleSelect>select option:not(:checked){
    color: rgb(38.28, 38.28, 38.28);
    -webkit-text-fill-color: rgb(38.28, 38.28, 38.28);
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li .multipleSelect>select[multiple='multiple'] option:not(:checked){
        display: none;
    }
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li .multipleSelect>select[multiple='multiple']:focus option:not(:checked){
        display: block;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li .multipleSelect>select option:checked{
    color: #FFFFFF!important;
    background-color: rgb(145, 145, 145);
    outline-color: rgb(145, 145, 145);
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li .multipleSelect>select option:checked{
        background-color: transparent;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li em{
    font-style: normal;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary>ul>li em{
        max-width: 40%;
    }
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectSummary .ddmsInputTool{
    font-size: 16px;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectMemo{
    width: calc(100% - 6% * 2);
    font-size: 18px;
    font-weight: bold;
    padding: 40px 6%;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectMemo>.dataTable{
    border: 1px solid #919191;
    border-spacing: 0px;
    font-size: 16px;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectMemo>.dataTable.items>.tr>.td:nth-child(1){
    color: #504D4E;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectMemo>.dataTable.items>.tr>.td:nth-child(2){
    color: #504D4E;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectMemo>.dataTable.items>.tr>.td input[type='text']{
    font-size: 16px;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectMemo>.dataTable.items>.tr>.td input[type='text']::placeholder{
    color: #CCCCCC;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectMemo>.dataTable.items>.tr>.td input[type='text']::-webkit-input-placeholder{
    color: #CCCCCC;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectMemo>.dataTable.items>.tr>.td input[type='text']:-moz-input-placeholder{
    color: #CCCCCC;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectMemo>.dataTable.items>.tr>.td input[type='text']::-moz-placeholder{
    color: #CCCCCC;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.project .projectMemo>.dataTable.items>.tr>.td input[type='text']:-ms-input-placeholder{
    color: #CCCCCC;
}

.pagesContent>.rightContent>.centerArea .projectDetailMenu{
    width: calc(100% - (80px + 25px) - 25px);
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    /*display: flex;*/
    display: none;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: flex-start;
    padding: 0px 25px 0px calc(80px + 25px);
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 999;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu{
        width: calc(100% - 80px);
        padding: 0px 0px 0px 80px;
    }
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu{
        width: 100%;
        height: 100%;
        padding: 0px;
        z-index: 999;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea{
    width: calc(100% - 20px * 2);
    max-width: 1400px;
    height: 100%;
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0px 20px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea{
        max-width: 930px;
    }
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea{
        width: 100%;
        max-width: none;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.header{
    width: calc(100% - 50px * 2);
    height: calc(120px - 10px * 2);
    background-color: var(--project-color-2);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 10px 50px;
    position: relative;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.header{
        width: calc(100% - 3vw * 2);
        height: auto;
        padding: 3vw;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.header>img{
    height: 80px;
    position: absolute;
    top: 20px;
    left: 50px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.header>img{
        height: 40px;
        display: none;
        position: relative;
        top: 5vw;
        left: 0px;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.header>.menu{
    width: 100%;
    height: 45px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.header>.menu>li{
    color: rgb(159, 159, 160);
    font-size: 20px;
    font-weight: bold;
    margin: 0px 18px;
    cursor: pointer
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.header>.menu>li{
        font-size: 3.889vw;
        margin: 0px 3vw;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.header>.menu>li:hover{
    color: rgb(200, 200, 200);
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.header>.menu>li.current{
    color: rgb(255, 255, 255);
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu.edit>.viewArea>.header>.menu>li.current>input{
    background: transparent;
    border: 0px;
    color: #FFFFFF;
    font-size: 20px;
    font-weight: bold;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu.edit>.viewArea>.header>.menu>li.current>input{
        font-size: 3.889vw;
        text-align: center;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.header>.editIcon{
    width: 30px;
    height: 30px;
    background-color: rgb(159, 159, 160);
    background-image: url(/images/iconEdit.svg);
    background-repeat: no-repeat;
    background-size: 70% 70%;
    background-position: center center;
    border: 0px;
    border-radius: 5px;
    box-shadow: unset;
    color: transparent;
    line-height: normal;
    display: inline-block;
    margin: 0px;
    padding: 0px;
    position: absolute;
    bottom: 18px;
    right: 50px;
    filter: none;
    cursor: pointer;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.header>.editIcon{
        width: 22px;
        height: 22px;
        border-radius: 5px;
        bottom: 6vw;
        right: 5vw;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu.edit>.viewArea>.header>.editIcon{
    display: none;
}

.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content{
    width: calc(100% - 50px * 2);
    font-size: 20px;
    font-weight: bold;
    line-height: 150%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 20px 50px;
    overflow: hidden;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content{
        width: calc(100% - 3vw * 2);
        font-size: 3.889vw;
        padding: 5vw 3vw;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.topArea{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0px 0px 12px 0px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.topArea{
        flex-wrap: nowrap;
        flex-direction: column;
        margin: 0px 0px 5vw 0px;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.topArea>div{
    width: calc((100% - 10px) / 2);
    color: rgb(0, 0, 0);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 0px 10px 0px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.topArea>div{
        width: 100%;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.topArea>div:last-child{
    margin: 0px 0px 0px 10px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.topArea>div:last-child{
        margin: 0px;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.topArea>div>label{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 10px 0px 0px;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.topArea>div>div{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.topArea>div>div:before{
    content: '_';
    color: var(--project-color-3);
    font-size: 20px;
    font-weight: normal;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.topArea>div>div:before{
        font-size: 3.889vw;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.topArea>div>div>input{
    border: 0px;
    color: var(--project-color-3);
    font-size: 20px;
    font-weight: normal;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.topArea>div>div>input{
        font-size: 3.889vw;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.topArea>div>div>input::placeholder{
    color: #CCCCCC;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea{
    width: 100%;
    color: rgb(159, 159, 160);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: flex-start;
    overflow-X: hidden;
    overflow-y: auto;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea{
        overflow-y: scroll;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea ul{
    width: calc(100% - 10px - 20px);
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0px 10px 0px 20px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea ul{
        width: calc(100% - 3.889vw);
        padding: 0px 0px 0px 3.889vw;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu.edit>.viewArea>.content>.centerArea ul{
    width: calc(100% - 40px);
    flex-direction: column;
    margin: 6px 0px 0px 0px;
    padding: 0px 0px 0px 40px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu.edit>.viewArea>.content>.centerArea ul{
        width: calc(100% - 20px);
        padding: 0px 0px 0px 20px;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul{
    display: none;
    flex-direction: column;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul{
        width: 100%;
        padding: 0px;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu.edit>.viewArea>.content>.centerArea>ul{
    width: 100%;
    flex-direction: column;
    padding: 0px;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul:first-child{
    display: flex;
}
html.ios .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.print select{
    min-width: 125px;
    background-image: linear-gradient(45deg, transparent 50%, var(--project-color-3) 50%), linear-gradient(135deg, var(--project-color-3) 50%, transparent 50%);
    background-position: calc(100% - 9px) 13px, calc(100% - 4px) 13px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    padding: 0px calc(5px + 10px + 5px) 0px 5px;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing{
    width: 100%;
    max-height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing{
        max-height: unset;
        flex-direction: column;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div{
    max-height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0px;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.spec{
    width: calc(54% - 20px);
    flex-shrink: 0;
    padding: 0px 20px 0px 0px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.spec{
        width: 100%;
        padding: 0px;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div>ul{
    width: auto;
    flex-grow: 1;
    flex-shrink: 1;
    padding: 0px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.spec>ul{
        border-bottom: 1px solid #CCCCCC;
        margin: 0px 0px 5vw 0px;
        padding: 0px 2vw 0px 0px;
    }
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div>ul>li{
        flex-grow: 1;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>.clothing .checkboxAreaWithText input[type='checkbox'] ~ i{
    opacity: 1;
    border-color: #000000;
    border-radius: 5px;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>.clothing .checkboxAreaWithText input[type='checkbox']:active ~ i,
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>.clothing .checkboxAreaWithText input[type='checkbox']:checked ~ i{
    background: var(--project-color-3);
    border-color: var(--project-color-3);
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>.clothing .checkboxAreaWithText input[type='checkbox']:active ~ i:after,
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>.clothing .checkboxAreaWithText input[type='checkbox']:checked ~ i:after{
    border-color: var(--project-color-3);
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>.clothing .checkboxAreaWithText input[type='checkbox']:active ~ span,
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>.clothing .checkboxAreaWithText input[type='checkbox']:checked ~ span{
    color: var(--project-color-3);
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.spec>ul>li>.checkboxAreaWithText input[type='checkbox'] ~ i{
    border: 0px;
    cursor: default;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.spec .checkboxAreaWithText input[type='checkbox'] ~ span{
    min-width: 91px;
    display: inline-block;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.spec .checkboxAreaWithText input[type='checkbox'] ~ span{
        min-width: 95px;
    }
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.analytics{
        width: 100%;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.analytics>div.total{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0px 0px 30px 0px;
    padding: 0px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.analytics>div.total{
        flex-wrap: wrap;
        margin: 0px 0px 5vw 0px;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.analytics>.total>div{
    flex-basis: 30%;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.analytics>.total>div{
        flex-basis: unset;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.analytics>.total>.sex{
    flex-basis: 40%;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.analytics>div.total>.sex{
        width: 100%;
        flex-basis: unset;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.analytics>.total>.sex input[type='checkbox'] ~ i{
    opacity: 1;
    border-color: #000000;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.analytics>.total>.sex input[type='checkbox'] ~ i{
    opacity: 1;
    border-color: #000000;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.analytics>.total>.sex input[type='checkbox']:active ~ i,
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.analytics>.total>.sex input[type='checkbox']:checked ~ i{
    background: var(--project-color-3);
    border-color: var(--project-color-3);
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.analytics>.total>.sex input[type='checkbox']:active ~ i:after,
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.analytics>.total>.sex input[type='checkbox']:checked ~ i:after{
    border-color: var(--project-color-3);
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.analytics>.total>.sex input[type='checkbox']:active ~ span,
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.analytics>.total>.sex input[type='checkbox']:checked ~ span{
    color: var(--project-color-3);
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.analytics>.total>.sex input[type='checkbox'] ~ span{
    min-width: 60px;
    color: #000000;
    display: inline-block;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.analytics>.total>.sex input[type='checkbox'] ~ span{
        min-width: 108px;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.analytics>.total>.quantity{
    color: #000000;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.analytics>.total>.quantity{
        min-width: 138px;
        margin: 5vw 0px 0px 0px;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.analytics>.total>.quantity>span{
    color: var(--project-color-3);
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.analytics>div.excelName{
    width: calc(100% - 5px * 2 - 1px * 2 - 1.8rem);
    border: 1px solid #F7F8F8;
    border-radius: 10px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0px 1.8rem 30px 0px;
    padding: 3px 5px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.analytics>div.excelName{
        width: calc(100% - 5px * 2 - 1px * 2);
        margin: 0px 0px 5vw 0px;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.analytics input[name='excelName']{
    border-radius: 10px;
    font-weight: bold;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.analytics input[name='excelName']::placeholder{
    color: #E5E6E6;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.analytics>div.memo{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0px 0px 30px 0px;
    padding: 0px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.analytics>div.memo{
        margin: 0px 0px 5vw 0px;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.analytics>div.memo>textarea{
    width: calc((100% - 10px) / 2 - 5px * 2);
    height: 120px;
    border: 1px solid #333333;
    color: var(--project-color-3);
    font-size: 1.1rem;
    line-height: 160%;
    flex-grow: 1;
    flex-shrink: 1;
    padding: 5px;
    overflow-x: hidden;
    overflow-y: auto;
    resize: none;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.analytics>div.memo>textarea[name='memo1']{
    margin: 0px 10px 0px 0px;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.analytics>.customers{
    width: 100%;
    flex-grow: 1;
    flex-shrink: 1;
    padding: 0px;
    overflow-x: hidden;
    overflow-y: auto;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.analytics>.customers{
        border-top: 1px solid #CCCCCC;
        padding: 5vw 0px 3vw 0px;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.analytics>.customers>li{
    min-width: calc(20% - 5px * 2);
    flex-grow: 0;
    justify-content: flex-start;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul.clothing>div.analytics>.customers>li.current{
    color: var(--project-color-3);
}

.pagesContent>.rightContent>.centerArea .projectDetailMenu.edit>.viewArea>.content>.centerArea>ul>li>ul{
    width: calc(100% - 20px);
    padding: 0px 0px 0px 20px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu.edit>.viewArea>.content>.centerArea>ul>li>ul{
        width: calc(100% - 10px);
        padding: 0px 0px 0px 10px;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea ul>li{
    max-width: calc(100% - 5px * 2);
    color: rgb(0, 0, 0);
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0px 0px 12px 0px;
    padding: 0px 5px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea ul>li{
        max-width: 100%;
        flex-wrap: nowrap;
        flex-direction: column;
        margin: 0px 0px 3vw 0px;
        padding: 0px;
    }
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea ul>li.portraitReplaceItem{
        flex-grow: 1;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu.edit>.viewArea>.content>.centerArea ul>li{
    width: 100%;
    max-width: unset;
    flex-wrap: wrap;
    flex-direction: row;
    margin: 0px;
    padding: 6px 0px;
    position: relative;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu.edit>.viewArea>.content>.centerArea>ul>li{
    max-width: unset;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul>li>div.btn.main>input[type='button']{
    color: rgb(80, 77, 78);
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea li.oneRow{
    flex-wrap: nowrap;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu.edit>.viewArea>.content>.centerArea ul>li:before{
    content: '';
    width: 20px;
    border-bottom: 1px dashed #CCCCCC;
    position: relative;
    top: 18px;
    left: 0px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu.edit>.viewArea>.content>.centerArea ul>li:before{
        width: 10px;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu.edit>.viewArea>.content>.centerArea>ul>li:before{
    display: none;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu.edit>.viewArea>.content>.centerArea ul>li:after{
    content: '';
    height: 100%;
    border-left: 1px dashed #CCCCCC;
    position: absolute;
    top: 0px;
    left: 0px;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu.edit>.viewArea>.content>.centerArea>ul>li:after{
    display: none;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu.edit>.viewArea>.content>.centerArea ul>li:first-of-type:after{
    height: calc(100% + 6px + 1px);
    top: -6px;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu.edit>.viewArea>.content>.centerArea ul>li:last-of-type:after{
    height: calc(32px / 2 + 6px + 1px);
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu.edit>.viewArea>.content>.centerArea ul>li:only-child:after{
    height: calc(32px / 2 + 6px + 1px);
    top: 0px;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea li.oneRow>div{
    width: auto;
    flex-shrink: 0;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea li.oneRow ul{
    width: auto;
    margin: 0px;
    flex-grow: 1;
    flex-shrink: 1;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu.edit>.viewArea>.content>.centerArea li.oneRow ul{
    margin: 6px 0px 0px 0px;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea div.main{
    margin: 0px 0px 12px 0px;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea div.btn{
    line-height: 150%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: baseline;
    padding: 2px 5px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea div.btn{
        width: calc(100% - 5px * 2);
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu.edit>.viewArea>.content>.centerArea div.btn{
    width: calc(100% - 20px);
    margin: 0px;
    padding: 2px 0px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu.edit>.viewArea>.content>.centerArea div.btn{
        width: calc(100% - 10px);
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu.edit>.viewArea>.content>.centerArea>ul>li>div.btn{
    width: 100%;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea div.btn:before{
    content: '_';
    color: rgb(159, 159, 160);
    font-size: 20px;
    font-weight: normal;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea div.btn.main:before{
    font-weight: bold;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea div.btn.current:before{
    color: var(--project-color-3);
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu.edit>.viewArea>.content>.centerArea div.btn:before{
    display: none;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea input[type='button']{
    border: 0px;
    background: none;
    color: rgb(159, 159, 160);
    font-size: 20px;
    font-weight: normal;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea input[type='button']{
        font-size: 3.889vw;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea div.btn.main>input[type='button']{
    color: rgb(126, 126, 126);
    font-weight: bold;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu.edit>.viewArea>.content>.centerArea div.btn.main>input[type='text']{
    font-weight: bold;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea div.btn>input{
    max-width: 100%;
    text-align: left;
    white-space: normal;
    padding: 0px;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu.edit>.viewArea>.content>.centerArea div.btn>input{
    min-width: 0px;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul>li>div.btn.main.current>input[type='button'],
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea div.btn.current>input[type='button']{
    color: var(--project-color-3);
}

.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea div.btn>.buttons{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-end;
    align-items: center;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea div.btn>.buttons>input[type='button'],
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.footer .memo input[type='button']{
    width: 30px;
    height: 30px;
    background-color: #EEEEEE;
    background-repeat: no-repeat;
    background-position: center center;
    border: 0px;
    border-radius: 5px;
    box-shadow: unset;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    color: transparent;
    line-height: normal;
    display: inline-block;
    margin: 0px 5px;
    padding: 0px;
    cursor: pointer;
    overflow: hidden;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea div.btn>.buttons>input[type='button'],
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.footer .memo input[type='button']{
        margin: 0px 2px;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea div.btn>.buttons>input[type='button']:hover,
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.footer .memo input[type='button']:hover{
    background-color: #DDDDDD;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea div.btn>.buttons>input[type='button'].boldBtn,
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.footer .memo input[type='button'].boldBtn{
    background-image: url(/images/iconBold.svg);
    background-size: auto 50%;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.footer .memo input[type='button'].boldBtn{
    width: 18px;
    height: 18px;
    border-radius: 3px;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea div.btn.main>.buttons>input[type='button'].boldBtn{
    background-color: var(--project-color-3);
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea div.btn.main>.buttons>input[type='button'].boldBtn:hover{
    background-color: var(--project-color-3);
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea div.btn>.buttons>input[type='button'].addLevelBtn,
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.footer .memo input[type='button'].addLevelBtn{
    background-image: url(/images/iconAddLevel.svg);
    background-size: auto 50%;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.footer .memo input[type='button'].addLevelBtn{
    width: 18px;
    height: 18px;
    border-radius: 3px;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea div.btn.hasChild>.buttons>input[type='button'].addLevelBtn{
    display: none;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul>li>ul>li>ul>li>ul>li>div.btn>.buttons>input[type='button'].addLevelBtn{
    display: none;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea div.btn>.buttons>input[type='button'].deleteBtn{
    background-image: url(/images/iconDelete.svg);
    background-size: auto 70%;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea>ul>li:only-child>div.btn>.buttons>input[type='button'].deleteBtn{
    display: none;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea div.btn>.buttons>input[type='button'].addBtn{
    background-image: url(/images/iconAdd.svg);
    background-size: auto 70%;
    display: none;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea li:last-of-type>div.btn>.buttons>input[type='button'].addBtn,
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea li:only-child>div.btn>.buttons>input[type='button'].addBtn{
    display: flex;
}

.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea div.input{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea div.input{
        width: 100%;
        align-items: flex-end;
    }
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea li.portraitReplaceItem>div.input{
        align-items: flex-start;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea div.input:before{
    content: '_';
    color: var(--project-color-3);
    font-size: 20px;
    font-weight: normal;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea div.input:before{
        font-size: 3.889vw;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea input[type='tel'],
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea input[type='email'],
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea input[type='number'],
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea input[type='text'],
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea input[type='password'],
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea input[type='search'],
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea input[type='date']{
    border: 0px;
    color: var(--project-color-3);
    font-size: 20px;
    font-weight: normal;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
    outline: none;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea input[type='tel'],
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea input[type='email'],
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea input[type='number'],
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea input[type='text'],
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea input[type='password'],
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea input[type='search'],
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea input[type='date']{
        font-size: 3.889vw;
    }
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea textarea{
        width: 100%;
        height: calc(3.889vw * 1.5);
        border: 0px;
        color: var(--project-color-3);
        font-size: 3.889vw;
        font-weight: normal;
        outline: none;
        resize: none;
    }
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea textarea::-webkit-input-placeholder{
        color: #CCCCCC;
    }
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea textarea:-moz-input-placeholder{
        color: #CCCCCC;
    }
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea textarea::-moz-placeholder{
        color: #CCCCCC;
    }
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea textarea:-ms-input-placeholder{
        color: #CCCCCC;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu.edit>.viewArea>.content>.centerArea input{
    border-bottom: 1px solid #999999;
    color: #000000;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea input:disabled{
    background-color: transparent;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea input:disabled{
        display: none;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea input::placeholder{
    color: #CCCCCC;
}
/*
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea input[type='date']::-webkit-calendar-picker-indicator{
    filter: invert(1);
}
*/
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea select{
    border: 0px;
    background-color: transparent;
    color: var(--project-color-3);
    font-size: 20px;
    font-weight: normal;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea select{
        font-size: 3.25vw;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea select option{
    color: rgb(38.28, 38.28, 38.28);
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea .multipleSelect{
    min-height: 24px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    cursor: pointer;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea .multipleSelect>select{
    width: 100%;
    background-color: #FFFFFF;
    border: 1px solid rgb(182, 182, 182);
    /*display: block;*/
    color: rgb(38.28, 38.28, 38.28);
    display: none;
    position: absolute;
    top: 100%;
    z-index: 2;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea .multipleSelect>select{
        display: block;
        position: relative;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea .multipleSelect>select[multiple='true']{
    color: #FFFFFF;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea .multipleSelect>select option:not(:checked){
    color: rgb(38.28, 38.28, 38.28);
    -webkit-text-fill-color: rgb(38.28, 38.28, 38.28);
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea .multipleSelect>select option:not(:checked){
        color: #CCCCCC;
        -webkit-text-fill-color: #CCCCCC;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.centerArea .multipleSelect>select option:checked{
    color: #FFFFFF !important;
    background-color: rgb(145, 145, 145);
    outline-color: rgb(145, 145, 145);
}

.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.bottomArea{
    width: 100%;
    border-top: 6px solid rgb(159, 159, 160);
    border-right: 0px;
    border-bottom: 6px solid rgb(159, 159, 160);
    border-left: 0px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 6px 0px;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.bottomArea>textarea{
    width: calc(100% - 30px * 2);
    height: 90px;
    border-top: 2px solid rgb(159, 159, 160);
    border-right: 0px;
    border-bottom: 2px solid rgb(159, 159, 160);
    border-left: 0px;
    color: var(--project-color-3);
    -webkit-text-fill-color: var(--project-color-3);
    font-size: 20px;
    font-weight: normal;
    line-height: 150%;
    padding: 10px 30px;
    resize: none;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.content>.bottomArea>textarea{
        width: 100%;
        height: 15.556vw;
        font-size: 3.889vw;
        padding: 3vw 0px;
        resize: none;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.footer{
    width: calc(100% - 50px * 2);
    height: calc(60px - 10px * 2);
    background-color: var(--project-color-2);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 10px 50px;
    position: relative;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.footer{
        width: calc(100% - 3vw * 2);
        height: auto;
        flex-wrap: wrap;
        padding: 3vw;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.footer input[type='button']{
    height: auto;
    background: linear-gradient(
        180deg,
        rgb(149, 149, 149) 0%,
        rgb(115, 115, 115) 100%
    );
    border: 1px solid rgb(140, 140, 140);
    border-radius: 3px;
    box-shadow: 0px 2px 2px 0px rgb(100, 100, 100);
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: bold;
    line-height: normal;
    padding: 5px 30px;
    margin: 0px 0px 0px 20px;
    position: relative;
    top: -1px;
    cursor: pointer;
    outline: none;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.footer input[type='button']{
        border-radius: 0.6vw;
        box-shadow: 0px 0.4vw 0.4vw 0px rgb(100, 100, 100);
        font-size: 3.889vw;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        flex-grow: 1;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        padding: 1vw 4vw;
        margin: 0px 1vw 2vw 1vw;
    }
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.footer input[name='inquiry']{
        margin: 0px 0px 2vw 0px;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.footer input[type='button']:first-child{
    margin: 0px 0px 0px 0px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.footer input[type='button']:first-child{
        margin: 0px 1vw 2vw 1vw;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu.edit>.viewArea>.footer>input[type='button']{
    display: none;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.footer>input.projectDetailMenuEditBtn{
    display: none;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu.edit>.viewArea>.footer>input.projectDetailMenuEditBtn{
    display: flex;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.footer .memo{
    display: none;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    right: 50px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.footer .memo{
        position: relative;
        right: unset;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu.edit>.viewArea>.footer .memo{
    display: flex;
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.footer .memo>li{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 0px 0px 10px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.footer .memo>li input[type="button"]{
        margin: 0px;
    }
}
.pagesContent>.rightContent>.centerArea .projectDetailMenu>.viewArea>.footer .memo>li p{
    color: #CCCCCC;
    margin: 0px 0px 0px 5px;
}

.pagesContent>.rightContent>.centerArea .projectCost{
    width: calc(100% - (80px + 25px) - 25px);
    height: calc(100% - 20px * 2);
    background-color: rgba(0, 0, 0, 0.9);
    /*display: flex;*/
    display: none;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: flex-start;
    padding: 20px 25px 20px calc(80px + 25px);
    position: fixed;
    top: 0px;
    left: 0px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectCost{
        width: calc(100% - 5vw*2);
        height: calc(100% - 5vw * 2);
        padding: 5vw;
        z-index: 999;
    }
}
.pagesContent>.rightContent>.centerArea .projectCost>.viewArea{
    width: calc(100% - 20px * 2);
    max-width: 1400px;
    height: calc(100% - 20px * 2);
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 20px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea .projectCost>.viewArea{
        max-width: 930px;
    }
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectCost>.viewArea{
        width: 100%;
        max-width: none;
        height: 100%;
        margin: 0px;
    }
}
.pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.header{
    width: calc(100% - 50px * 2);
    height: calc(100px - 10px * 2);
    background: var(--project-color-2);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 10px 50px;
    position: relative;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.header{
        width: calc(100% - 5vw * 2);
        height: auto;
        justify-content: space-between;
        padding: 5vw;
    }
}
.pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.header>img{
    height: 60px;
    position: absolute;
    top: 20px;
    left: 50px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.header>img{
        height: 40px;
        position: relative;
        top: 0px;
        left: 0px;
    }
}
.pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.header>h1{
    color: rgb(255, 255, 255);
    font-size: 30px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.header>h1{
        font-size: 6vw;
    }
}
.pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.content{
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    line-height: 150%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 5px 0px 0px 0px;
    overflow-x: hidden;
    overflow-y: auto;
}
.pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.content .dataTable{
    width: 100%;
    border-spacing: 2px;
}
.pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.content .dataTable .th{
    background-color: #919191;
    border-color: #919191;
}
.pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.content .dataTable .th.itemsIndex{
    width: 12%;
}
.pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.content .dataTable .th.vendor{
    width: 15%;
}
.pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.content .dataTable .th.name{
    width: 20%;
}
.pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.content .dataTable .th.estimateCost,
.pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.content .dataTable .th.finalCost{
    width: 14%;
}
.pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.content .dataTable .th.actions{
    width: 80px;
}

@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.content .dataTable .td[name='vendor']{
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.content .dataTable .td>label{
        width: 26vw;
    }
    .pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.content .dataTable .td>select{
        max-width: calc(100% - 26vw - 3vw);
    }
    .pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.content .dataTable .td>input,
    .pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.content .dataTable .td>textarea{
        max-width: calc(100% - 3.889vw * 2 - 26vw - 3vw);
    }
}
.pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.content .dataTable .td select{
    background-image: linear-gradient(45deg, transparent 50%, rgb(38.28, 38.28, 38.28) 50%), linear-gradient(135deg, rgb(38.28, 38.28, 38.28) 50%, transparent 50%);
    background-position: calc(100% - 9px) 10px, calc(100% - 4px) 10px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    -webkit-appearance: none;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.content .dataTable .td select,
    .pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.content .dataTable.newItemsTable.reverColor>.tr:nth-of-type(even)>.td>select:nth-child(2){
        background-image: linear-gradient(45deg, transparent 50%, rgb(38.28, 38.28, 38.28) 50%), linear-gradient(135deg, rgb(38.28, 38.28, 38.28) 50%, transparent 50%);
        background-position: calc(100% - 2.5vw) 4vw, calc(100% - 0.9375vw) 4vw;
        background-size: 1.5625vw 1.5625vw, 1.5625vw 1.5625vw;
        background-repeat: no-repeat;
        border: 0px;
        color: rgb(38.28, 38.28, 38.28);
        -webkit-text-fill-color: rgb(38.28, 38.28, 38.28);
        display: block;
    }
}
.pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.content .dataTable select[name='vendorType']:disabled{
    display: none;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.content .dataTable .td select[name='vendorType']:disabled{
        display: flex;
    }
}
.pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.content .dataTable .td select[name='vendor']{
    display: flex;
    flex-grow: 1;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.content .dataTable .td select[name='vendor']{
        background-color: #FFFFFF;
        flex-grow: 0;
        margin: 2vw 0px 0px 0px;
    }
}
.pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.content .dataTable select:disabled{
    opacity: 1;
    color: rgb(38.28, 38.28, 38.28);
}
.pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.content .dataTable#costTotal>.tr>.td:nth-child(1){
    width: 47%;
    height: 46px;
    padding: 0px 20px;
}
.pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.content .dataTable#costTotal>.tr>.td:nth-child(2),
.pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.content .dataTable#costTotal>.tr>.td:nth-child(3){
    width: 14%
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.content .dataTable.costTotalPortrait>.tr>.td:nth-child(1){
        width: 34vw;
        line-height: normal;
    }
    .pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.content .dataTable.costTotalPortrait>.tr>.td:nth-child(2)>input{
        width: auto;
        max-width: calc(100% - 3.889vw * 2);
        min-width: 0px;
        height: calc(10.479vw - 2.22vw * 2);
        border: 0px;
        border: 0px;
        border-radius: 0;
        color: rgb(38.28, 38.28, 38.28);
        -webkit-text-fill-color: rgb(38.28, 38.28, 38.28);
        font-size: 3.889vw;
        font-weight: bold;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        flex-grow: 1;
        flex-shrink: 1;
        justify-content: flex-start;
        align-items: center;
        padding: 2.22vw 3.889vw;
        outline: none;
        -webkit-appearance: none;
    }
}

.pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.footer{
    width: calc(100% - 50px * 2);
    height: calc(60px - 10px * 2);
    background-color: var(--project-color-2);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 10px 50px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.footer{
        width: calc(100% - 5vw * 2);
        height: auto;
        flex-wrap: wrap;
        padding: 3vw 5vw;
    }
}
.pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.footer input[type='button']{
    height: auto;
    background: linear-gradient(
        180deg,
        rgb(149, 149, 149) 0%,
        rgb(115, 115, 115) 100%
    );
    border: 1px solid rgb(140, 140, 140);
    border-radius: 3px;
    box-shadow: 0px 2px 2px 0px rgb(100, 100, 100);
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: bold;
    line-height: normal;
    padding: 5px 30px;
    margin: 0px 0px 0px 20px;
    position: relative;
    top: -1px;
    cursor: pointer;
    outline: none;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.footer input[type='button']{
        border-radius: 0.6vw;
        box-shadow: 0px 0.4vw 0.4vw 0px rgb(100, 100, 100);
        font-size: 3.889vw;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        flex-grow: 1;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        padding: 1vw 4vw;
        margin: 0px 0px 0vw 2vw;
    }
}
.pagesContent>.rightContent>.centerArea .projectCost>.viewArea>.footer input[type='button']:first-child{
    margin: 0px 0px 0px 0px;
}

.pagesContent>.rightContent>.centerArea .clothingOrder{
    width: calc(100% - (80px + 25px) - 25px);
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    /*display: flex;*/
    display: none;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: flex-start;
    padding: 0px 25px 0px calc(80px + 25px);
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 2;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .clothingOrder{
        width: 100%;
        padding: 0px;
        z-index: 999;
    }
}
.pagesContent>.rightContent>.centerArea .clothingOrder>.viewArea{
    width: calc(100% - 20px * 2);
    max-width: 1400px;
    height: 100%;
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0px 20px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea .clothingOrder>.viewArea{
        max-width: 930px;
    }
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .clothingOrder>.viewArea{
        width: 100%;
        max-width: none;
        margin: 0px;
    }
}
.pagesContent>.rightContent>.centerArea .clothingOrder>.viewArea>.header{
    width: calc(100% - 50px * 2);
    height: calc(120px - 10px * 2);
    background: var(--project-color-2);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 10px 50px;
    position: relative;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .clothingOrder>.viewArea>.header{
        width: calc(100% - 3vw * 2);
        height: auto;
        flex-direction: column;
        justify-content: stretch;
        align-items: center;
        padding: 3vw;
    }
}
.pagesContent>.rightContent>.centerArea .clothingOrder>.viewArea>.header>img{
    height: 80px;
    position: absolute;
    top: 20px;
    left: 50px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .clothingOrder>.viewArea>.header>img{
        height: 40px;
        position: relative;
        top: 0px;
        left: 0px;
    }
}
.pagesContent>.rightContent>.centerArea .clothingOrder>.viewArea>.header>h1{
    color: #FFFFFF;
    font-size: 27px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .clothingOrder>.viewArea>.header>h1{
        font-size: 1.2rem;
        margin: 3vw 0px 0px 0px;
    }
}
.pagesContent>.rightContent>.centerArea .clothingOrder>.viewArea>.content{
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    line-height: 150%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 5px 0px 0px 0px;
    overflow-x: hidden;
    overflow-y: auto;
}
.pagesContent>.rightContent>.centerArea .clothingOrder>.viewArea>.content>.orderMembers>li{
    margin: 0px 0px 20px 0px;
}
.pagesContent>.rightContent>.centerArea .clothingOrder>.viewArea>.content>.orderMembers>li:last-child{
    margin: 0px;
}
.pagesContent>.rightContent>.centerArea .clothingOrder>.viewArea>.content .dataTable{
    width: 100%;
    border-spacing: 2px;
}
.pagesContent>.rightContent>.centerArea .clothingOrder>.viewArea>.content .dataTable .th{
    background-color: rgb(73, 73, 73);
    border-color: rgb(73, 73, 73);
}
.pagesContent>.rightContent>.centerArea .clothingOrder>.viewArea>.content .dataTable .th.itemsIndex{
    width: 12%;
}
.pagesContent>.rightContent>.centerArea .clothingOrder>.viewArea>.content .dataTable .th.vendor{
    width: 15%;
}
.pagesContent>.rightContent>.centerArea .clothingOrder>.viewArea>.content .dataTable .th.name{
    width: 20%;
}
.pagesContent>.rightContent>.centerArea .clothingOrder>.viewArea>.content .dataTable .th.estimateCost,
.pagesContent>.rightContent>.centerArea .clothingOrder>.viewArea>.content .dataTable .th.finalCost{
    width: 14%;
}
.pagesContent>.rightContent>.centerArea .clothingOrder>.viewArea>.content .dataTable .th.actions{
    width: 80px;
}

.pagesContent>.rightContent>.centerArea .clothingOrder>.viewArea>.footer{
    width: calc(100% - 50px * 2);
    height: calc(60px - 10px * 2);
    background-color: var(--project-color-2);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 10px 50px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .clothingOrder>.viewArea>.footer{
        width: calc(100% - 5vw * 2);
        height: auto;
        flex-wrap: wrap;
        padding: 3vw 5vw;
    }
}
.pagesContent>.rightContent>.centerArea .clothingOrder>.viewArea>.footer input[type='button']{
    height: auto;
    background: linear-gradient(
        180deg,
        rgb(149, 149, 149) 0%,
        rgb(115, 115, 115) 100%
    );
    border: 1px solid rgb(140, 140, 140);
    border-radius: 3px;
    box-shadow: 0px 2px 2px 0px rgb(100, 100, 100);
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: bold;
    line-height: normal;
    padding: 5px 30px;
    margin: 0px 0px 0px 20px;
    position: relative;
    top: -1px;
    cursor: pointer;
    outline: none;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .clothingOrder>.viewArea>.footer input[type='button']{
        border-radius: 0.6vw;
        box-shadow: 0px 0.4vw 0.4vw 0px rgb(100, 100, 100);
        font-size: 3.889vw;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        flex-grow: 1;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        padding: 1vw 4vw;
        margin: 0px 0px 0vw 2vw;
    }
}
.pagesContent>.rightContent>.centerArea .clothingOrder>.viewArea>.footer input[type='button']:first-child{
    margin: 0px 0px 0px 0px;
}


.pagesContent>.rightContent>.centerArea .clothingPackingList{
    width: calc(100% - (80px + 25px) - 25px);
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    /*display: flex;*/
    display: none;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: flex-start;
    padding: 0px 25px 0px calc(80px + 25px);
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 2;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .clothingPackingList{
        width: 100%;
        padding: 0px;
        z-index: 999;
    }
}
.pagesContent>.rightContent>.centerArea .clothingPackingList>.viewArea{
    width: calc(100% - 20px * 2);
    max-width: 1400px;
    height: 100%;
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0px 20px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    .pagesContent>.rightContent>.centerArea .clothingPackingList>.viewArea{
        max-width: 930px;
    }
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .clothingPackingList>.viewArea{
        width: 100%;
        max-width: none;
        margin: 0px;
    }
}
.pagesContent>.rightContent>.centerArea .clothingPackingList>.viewArea>.header{
    width: calc(100% - 50px * 2);
    height: calc(100px - 10px * 2);
    background: var(--project-color-2);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 10px 50px;
    position: relative;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .clothingPackingList>.viewArea>.header{
        width: calc(100% - 3vw * 2);
        height: auto;
        flex-direction: column;
        justify-content: stretch;
        align-items: center;
        padding: 3vw;
    }
}
.pagesContent>.rightContent>.centerArea .clothingPackingList>.viewArea>.header>img{
    height: 60px;
    position: absolute;
    top: 20px;
    left: 50px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .clothingPackingList>.viewArea>.header>img{
        height: 40px;
        position: relative;
        top: 0px;
        left: 0px;
    }
}
.pagesContent>.rightContent>.centerArea .clothingPackingList>.viewArea>.header>h1{
    color: #FFFFFF;
    font-size: 27px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .clothingPackingList>.viewArea>.header>h1{
        font-size: 1.2rem;
        margin: 3vw 0px 0px 0px;
    }
}
.pagesContent>.rightContent>.centerArea .clothingPackingList>.viewArea>.content{
    width: calc(100% - 5px * 2);
    font-size: 20px;
    font-weight: bold;
    line-height: 150%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: space-between;
    align-items: flex-start;
    padding: 5px;
    overflow-x: hidden;
    overflow-y: auto;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .clothingPackingList>.viewArea>.content{
        width: calc(100% - 3vw * 2);
        flex-direction: column;
        justify-content: flex-start;
        padding: 3vw;
    }
}
.pagesContent>.rightContent>.centerArea .clothingPackingList>.viewArea>.content>div{
    width: calc(50% - 1px * 2 - 5px * 2);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 20px 5px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .clothingPackingList>.viewArea>.content>div{
        width: calc(100% - 1px * 2);
        margin: 5vw 0px;
    }
}
.pagesContent>.rightContent>.centerArea .clothingPackingList>.viewArea>.content>div>h2{
    font-size: 20px;
    line-height: 150%;
    margin: 0px 0px 10px 0px;
}
.pagesContent>.rightContent>.centerArea .clothingPackingList>.viewArea>.content>div>cke{
    width: 100%;
}

.pagesContent>.rightContent>.centerArea .clothingPackingList>.viewArea>.footer{
    width: calc(100% - 50px * 2);
    height: calc(60px - 10px * 2);
    background-color: var(--project-color-2);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 10px 50px;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .clothingPackingList>.viewArea>.footer{
        width: calc(100% - 5vw * 2);
        height: auto;
        flex-wrap: wrap;
        padding: 3vw 5vw;
    }
}
.pagesContent>.rightContent>.centerArea .clothingPackingList>.viewArea>.footer input[type='button']{
    height: auto;
    background: linear-gradient(
        180deg,
        rgb(149, 149, 149) 0%,
        rgb(115, 115, 115) 100%
    );
    border: 1px solid rgb(140, 140, 140);
    border-radius: 3px;
    box-shadow: 0px 2px 2px 0px rgb(100, 100, 100);
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: bold;
    line-height: normal;
    padding: 5px 30px;
    margin: 0px 0px 0px 20px;
    position: relative;
    top: -1px;
    cursor: pointer;
    outline: none;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.centerArea .clothingPackingList>.viewArea>.footer input[type='button']{
        border-radius: 0.6vw;
        box-shadow: 0px 0.4vw 0.4vw 0px rgb(100, 100, 100);
        font-size: 3.889vw;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        flex-grow: 1;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        padding: 1vw 4vw;
        margin: 0px 0px 0vw 2vw;
    }
}
.pagesContent>.rightContent>.centerArea .clothingPackingList>.viewArea>.footer input[type='button']:first-child{
    margin: 0px 0px 0px 0px;
}


.pagesContent>.rightContent>.centerArea>.centerAreaContents .projectPics .dragImageUploadArea{
    background-color: rgb(248, 248, 248);
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .projectPics .dragImageUploadArea>.uploadArea{
    width: calc(100% - 20px * 2 - 5px * 2);
    min-height: 190px;
    /*border: 5px dashed rgb(137, 137, 137);*/
    margin: 20px;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea[configUploadPicSize='big' i]>.viewFiles>li{
    width: calc((100% - 5px * 3) / 4);
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea[configUploadPicSize='big' i]>.viewFiles>li:nth-child(4n){
    margin: 0px 0px 5px 0px;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents .projectPics .dragImageUploadArea>.viewFiles>li>img{
    object-position: center top;
}


.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs .waterfall{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: stretch;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs .waterfall>.items{
    width: calc((100% - (1px * 2) * 3) / 3);
    border: 1px solid rgb(163, 163, 163);
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs .waterfall>.items>h2{
    width: calc(100% - 20px * 2);
    min-height: calc(60px - 15px * 2);
    /*background-color: rgb(145, 145, 145);*/
    background-color: var(--user-color-2);
    color: rgb(255, 255, 255);
    font-size: 20px;
    justify-content: center;
    margin: 0px;
    padding: 15px 20px;
    cursor: pointer;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs .waterfall>.items>h2:hover{
    /*background-color: rgb(97, 97, 97);*/
    background-color: var(--user-color-1);
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs .waterfall>.items>.content{
    width: calc(100% - 10px * 2);
    font-weight: bold;
    padding: 10px;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs .waterfall>.items>.content>ol{
    list-style: decimal-leading-zero;
    margin: 0px;
    padding: 0px;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs .waterfall>.items>.content>ol>li{
    margin: 15px 0px 15px 27px;
    padding: 0px 0px 0px 0px;
    cursor: pointer;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs .waterfall>.items>.content>ol>li:hover{
    background-color: #D8F0B3;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs .waterfall>.items>.content>ol>li>ul>li{
    width: 100%;
    word-break: break-word;
    margin: 15px 0px 15px 0px;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs .waterfall>.items>.content>ol>li>ul>li.disabled{
    color: #C3C3C1;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs .waterfall>.items>.content>ol>li>ul>li.delay{
    color: #18ACC8;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs .waterfall>.items>.content>ol>li>ul>li.final{
    color: #E67817;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs .waterfall>.items>.content hr{
    border: 0px;
    border-top: 2px dotted rgb(164, 164, 164);
    margin: 15px 0px;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs .waterfall>.items>.content>ul{
    list-style-type: disc;
    margin: 0px;
    padding: 0px;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs .waterfall>.items>.content>ul>li{
    width: calc(100% - 27px);
    word-break: break-word;
    margin: 15px 0px 15px 27px;
    padding: 0px 0px 0px 0px;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs .waterfall>.items>.content>ul>li.disabled{
    color: #C3C3C1;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs .waterfall>.items>.content>ul>p{
    cursor: pointer;
}
.pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs .waterfall>.items>.content>ul>p:hover{
    background-color: #D8F0B3;
}



/* =========================================================
 * 登入頁 - 使用者註冊 / 公司註冊 / 忘記密碼
 * ========================================================= */
html.login .formArea>li>div{
    max-width: calc(100% - 110px);
}
@media screen and (orientation: portrait){
    html.login .formArea>li>div{
        max-width: unset;
    }
    html.userRegister .loginArea>.centerArea>.dataArea ul.formArea,
    html.companyRegister .loginArea>.centerArea>.dataArea ul.formArea{
        margin: 0px 0px 2.778vw 0px;
    }
    html.userRegister .loginArea>.centerArea>.dataArea.twoColumn>div:nth-child(2) ul.formArea,
    html.companyRegister .loginArea>.centerArea>.dataArea.twoColumn>div:nth-child(2) ul.formArea{
        order: 1;
    }
    html.userRegister .loginArea>.centerArea>.dataArea.twoColumn>div:nth-child(2) div.buttonArea,
    html.companyRegister .loginArea>.centerArea>.dataArea.twoColumn>div:nth-child(2) div.buttonArea,
    html.userForgetPassword .loginArea>.centerArea>.dataArea.twoColumn>div:nth-child(2) div.buttonArea{
        text-align: center;
        margin: 0px 0px 9.444vw 0px;
        order: 2;
    }
    html.userRegister .loginArea>.centerArea>.dataArea.twoColumn>div:nth-child(2) ul.memo,
    html.companyRegister .loginArea>.centerArea>.dataArea.twoColumn>div:nth-child(2) ul.memo,
    html.userForgetPassword .loginArea>.centerArea>.dataArea.twoColumn>div:nth-child(2) ul.memo{
        order: 3;
    }
}
html.login #cyMsgBox>.contentArea .contactPave,
html.userRegister #cyMsgBox>.contentArea .contactPave,
html.userForgetPassword #cyMsgBox>.contentArea .contactPave{
    color: var(--ddms-color-3);
    font-size: 2.6vw;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    padding: 2.6vw;
}
@media screen and (orientation: portrait){
    html.login #cyMsgBox>.contentArea .contactPave,
    html.userRegister #cyMsgBox>.contentArea .contactPave,
    html.userForgetPassword #cyMsgBox>.contentArea .contactPave{
        font-size: 5vw;
    }
}
html.login #cyMsgBox>.contentArea .contactPave a,
html.userRegister #cyMsgBox>.contentArea .contactPave a,
html.userForgetPassword #cyMsgBox>.contentArea .contactPave a{
    color: #72B8AE;
}
html.login #cyMsgBox>.contentArea .contactPave>p,
html.userRegister #cyMsgBox>.contentArea .contactPave>p,
html.userForgetPassword #cyMsgBox>.contentArea .contactPave>p{
    text-align: left;
}
html.login #cyMsgBox>.contentArea .contactPave>div,
html.userRegister #cyMsgBox>.contentArea .contactPave>div,
html.userForgetPassword #cyMsgBox>.contentArea .contactPave>div{
    width: 23.7vw;
    min-width: 110px;
    margin: 3vw 0px 0px 0px;
}
@media screen and (orientation: portrait){
    html.login #cyMsgBox>.contentArea .contactPave>div,
    html.userRegister #cyMsgBox>.contentArea .contactPave>div,
    html.userForgetPassword #cyMsgBox>.contentArea .contactPave>div{
        width: 40vw;
        margin: 8vw 0px 0px 0px;
    }
}
html.login #cyMsgBox>.contentArea .contactPave>div>img,
html.userRegister #cyMsgBox>.contentArea .contactPave>div>img,
html.userForgetPassword #cyMsgBox>.contentArea .contactPave>div>img{
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}


/* =========================================================
 * 右邊主頁 - 中間區塊 - 首頁
 * ========================================================= */
html.index .customerRent>.tr>.th.customerRentTitle{
    width: 25%;
}
html.index .customerRent>.tr>.th.depositDate{
    width: 14%;
}
html.index .customerRent>.tr>.th.endDate{
    width: 14%;
}
html.index .customerRent>.tr>.th.status{
    width: 14%;
}
html.index .customerRent>.tr>.th.actions{
    width: 8%;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.index .customerRent>.tr>.th.actions{
        width: 30px;
    }
}

html.index .companyRegister>.tr>.th.createTime{
    width: 140px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.index .companyRegister>.tr>.th.createTime{
        width: 95px;
    }
}
html.index .companyRegister>.tr>.th.vatNumber{
    width: 140px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.index .companyRegister>.tr>.th.vatNumber{
        width: 80px;
    }
}
html.index .companyRegister>.tr>.th.name{
    width: 280px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.index .companyRegister>.tr>.th.name{
        width: 140px;
    }
}
html.index .companyRegister>.tr>.th.employeeName{
    width: 140px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.index .companyRegister>.tr>.th.employeeName{
        width: 80px;
    }
}
html.index .companyRegister>.tr>.th.employeeAccount{
    width: 150px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.index .companyRegister>.tr>.th.employeeAccount{
        width: 100px;
    }
}
html.index .companyRegister>.tr>.th.actions{
    width: 8%;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.index .companyRegister>.tr>.th.actions{
        width: 30px;
    }
}

html.index .companyExpire>.tr>.th.endDate{
    width: 140px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.index .companyExpire>.tr>.th.endDate{
        width: 95px;
    }
}
html.index .companyExpire>.tr>.th.vatNumber{
    width: 140px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.index .companyExpire>.tr>.th.vatNumber{
        width: 80px;
    }
}
html.index .companyExpire>.tr>.th.employeeName{
    width: 140px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.index .companyExpire>.tr>.th.employeeName{
        width: 80px;
    }
}
html.index .companyExpire>.tr>.th.employeeAccount{
    width: 150px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.index .companyExpire>.tr>.th.employeeAccount{
        width: 100px;
    }
}
html.index .companyExpire>.tr>.th.actions{
    width: 8%;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.index .companyExpire>.tr>.th.actions{
        width: 30px;
    }
}

html.index .userRegister>.tr>.th.createTime{
    width: 140px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.index .userRegister>.tr>.th.createTime{
        width: 95px;
    }
}
html.index .userRegister>.tr>.th.title{
    width: 140px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.index .userRegister>.tr>.th.title{
        width: 80px;
    }
}
html.index .userRegister>.tr>.th.mail{
    width: 320px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.index .userRegister>.tr>.th.mail{
        width: 200px;
    }
}
html.index .userRegister>.tr>.th.name{
    width: 140px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.index .userRegister>.tr>.th.name{
        width: 80px;
    }
}
html.index .userRegister>.tr>.th.account{
    width: 150px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.index .userRegister>.tr>.th.account{
        width: 100px;
    }
}
html.index .userRegister>.tr>.th.actions{
    width: 8%;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.index .userRegister>.tr>.th.actions{
        width: 30px;
    }
}

html.index .loginInfo>.tr>.th{
    width: 25%;
}

/* =========================================================
 * 右邊主頁 - 中間區塊 - 廠商、客戶列表
 * ========================================================= */
html.customer .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.index,
html.vendor .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.index{
    width: 50px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.customer .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.index,
    html.vendor .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.index{
        width: 40px;
    }
}
html.customer .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.type,
html.vendor .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.type{
    width: 120px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.customer .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.type,
    html.vendor .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.type{
        width: 85px;
    }
}
html.customer .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.vatNumber,
html.vendor .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.vatNumber{
    width: 100px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.customer .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.vatNumber,
    html.vendor .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.vatNumber{
        width: 80px;
    }
}
html.customer .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.tel,
html.vendor .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.tel{
    width: 200px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.customer .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.tel,
    html.vendor .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.tel{
        width: 110px;
    }
}
html.customer .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.contact,
html.vendor .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.contact{
    width: 150px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.customer .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.contact,
    html.vendor .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.contact{
        width: 90px;
    }
}
html.customer .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.mobile,
html.vendor .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.mobile{
    width: 130px;
}
html.customer .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.actions,
html.vendor .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.actions{
    width: 80px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.customer .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.actions,
    html.vendor .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.actions{
        width: 60px;
    }
}
@media screen and (orientation: portrait){
    html.customer .pagesContent>.rightContent>.centerArea .dataTable,
    html.vendor .pagesContent>.rightContent>.centerArea .dataTable{
        width: calc(100% - 5vw * 2);
        border: 0px;
        border-spacing: 0.756vw 2.778vw;
        margin: 0px 5vw;
    }
    html.customer .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.index,
    html.customer .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.type,
    html.customer .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.vatNumber,
    html.customer .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.mobile,
    html.customer .pagesContent>.rightContent>.centerArea .dataTable .td.index,
    html.customer .pagesContent>.rightContent>.centerArea .dataTable .td.type,
    html.customer .pagesContent>.rightContent>.centerArea .dataTable .td.vatNumber,
    html.customer .pagesContent>.rightContent>.centerArea .dataTable .td.mobile,
    html.customer .pagesContent>.rightContent>.centerArea .dataTable .td.actions .deleteIcon,
    html.vendor .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.index,
    html.vendor .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.type,
    html.vendor .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.vatNumber,
    html.vendor .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.mobile,
    html.vendor .pagesContent>.rightContent>.centerArea .dataTable .td.index,
    html.vendor .pagesContent>.rightContent>.centerArea .dataTable .td.type,
    html.vendor .pagesContent>.rightContent>.centerArea .dataTable .td.vatNumber,
    html.vendor .pagesContent>.rightContent>.centerArea .dataTable .td.mobile,
    html.vendor .pagesContent>.rightContent>.centerArea .dataTable .td.actions .deleteIcon{
        display: none;
    }
    html.customer .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.name,
    html.vendor .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.name{
        width: 18.6vw;
    }
    html.customer .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.tel,
    html.vendor .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.tel{
        width: auto;
    }
    html.customer .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.contact,
    html.vendor .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.contact{
        width: 18.2vw;
    }
    html.customer .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.actions,
    html.vendor .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.actions{
        width: 10vw;
    }
    html.customer .pagesContent>.rightContent>.centerArea .dataTable .td.actions>div,
    html.vendor .pagesContent>.rightContent>.centerArea .dataTable .td.actions>div{
        justify-content: center;
    }
    html.customer .pagesContent>.rightContent>.centerArea .dataTable .td.actions .editIcon,
    html.vendor .pagesContent>.rightContent>.centerArea .dataTable .td.actions .editIcon{
        width: 6vw;
        height: 6vw;
    }
}



/* =========================================================
 * 右邊主頁 - 中間區塊 - 廠商、客戶修改頁
 * ========================================================= */
html.customerEdit .pagesContent>.rightContent>.centerArea .dataArea>.dataRow>li.address,
html.vendorEdit .pagesContent>.rightContent>.centerArea .dataArea>.dataRow>li.address{
    flex-wrap: wrap;
}
html.customerEdit .pagesContent>.rightContent>.centerArea .dataArea li.address>div.zipcode,
html.vendorEdit .pagesContent>.rightContent>.centerArea .dataArea li.address>div.zipcode{
    flex-grow: 0;
    justify-content: center;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.customerEdit .pagesContent>.rightContent>.centerArea .dataArea li.address>div.zipcode,
    html.vendorEdit .pagesContent>.rightContent>.centerArea .dataArea li.address>div.zipcode{
        font-size: 16px;
        padding: 6px 20px;
    }
}
@media screen and (orientation: portrait){
    html.customerEdit .pagesContent>.rightContent>.centerArea .dataArea li.address>div.zipcode,
    html.vendorEdit .pagesContent>.rightContent>.centerArea .dataArea li.address>div.zipcode{
        width: calc(15vw - 3.889vw * 2);
        padding: 2.22vw 3.889vw;
    }
}
html.customerEdit .pagesContent>.rightContent>.centerArea .dataArea li.address>select.city,
html.vendorEdit .pagesContent>.rightContent>.centerArea .dataArea li.address>select.city{
    width: auto;
}
@media screen and (orientation: portrait){
    html.customerEdit .pagesContent>.rightContent>.centerArea .dataArea li.address>select.city,
    html.vendorEdit .pagesContent>.rightContent>.centerArea .dataArea li.address>select.city{
        padding: 2.22vw 0px;
    }
}
html.customerEdit .pagesContent>.rightContent>.centerArea .dataArea li.address>select.town,
html.vendorEdit .pagesContent>.rightContent>.centerArea .dataArea li.address>select.town{
    width: auto;
}
@media screen and (orientation: portrait){
    html.customerEdit .pagesContent>.rightContent>.centerArea .dataArea li.address>select.town,
    html.vendorEdit .pagesContent>.rightContent>.centerArea .dataArea li.address>select.town{
        padding: 2.22vw 0px;
    }
}
@media all and (min-width: 1200px) {
    html.customerEdit .pagesContent>.rightContent>.centerArea .dataArea li.address>input#address,
    html.vendorEdit .pagesContent>.rightContent>.centerArea .dataArea li.address>input#address{
        margin-left: 110px;
    }
}
@media screen and (orientation: portrait){
    html.customerEdit .pagesContent>.rightContent>.centerArea .dataArea li.address>input#address,
    html.vendorEdit .pagesContent>.rightContent>.centerArea .dataArea li.address>input#address{
        margin: 2.778vw 0px 0px 25vw;
    }
}

html.customerEdit .pagesContent>.rightContent>.centerArea #contactList .th.mainContact,
html.vendorEdit .pagesContent>.rightContent>.centerArea #contactList .th.mainContact{
    width: 80px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.customerEdit .pagesContent>.rightContent>.centerArea #contactList .th.mainContact,
    html.vendorEdit .pagesContent>.rightContent>.centerArea #contactList .th.mainContact{
        width: 75px;
    }
}
html.customerEdit .pagesContent>.rightContent>.centerArea #contactList .th.name,
html.vendorEdit .pagesContent>.rightContent>.centerArea #contactList .th.name{
    width: 100px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.customerEdit .pagesContent>.rightContent>.centerArea #contactList .th.name,
    html.vendorEdit .pagesContent>.rightContent>.centerArea #contactList .th.name{
        width: 90px;
    }
}
html.customerEdit .pagesContent>.rightContent>.centerArea #contactList .th.title,
html.customerEdit .pagesContent>.rightContent>.centerArea #contactList .th.mobile,
html.vendorEdit .pagesContent>.rightContent>.centerArea #contactList .th.title,
html.vendorEdit .pagesContent>.rightContent>.centerArea #contactList .th.mobile{
    width: 200px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.customerEdit .pagesContent>.rightContent>.centerArea #contactList .th.title,
    html.customerEdit .pagesContent>.rightContent>.centerArea #contactList .th.mobile,
    html.vendorEdit .pagesContent>.rightContent>.centerArea #contactList .th.title,
    html.vendorEdit .pagesContent>.rightContent>.centerArea #contactList .th.mobile{
        width: 110px;
    }
}
html.customerEdit .pagesContent>.rightContent>.centerArea #contactList .th.memo,
html.vendorEdit .pagesContent>.rightContent>.centerArea #contactList .th.memo{
    width: 120px;
}
html.customerEdit .pagesContent>.rightContent>.centerArea #contactList .th.actions,
html.vendorEdit .pagesContent>.rightContent>.centerArea #contactList .th.actions{
    width: 90px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.customerEdit .pagesContent>.rightContent>.centerArea #contactList .th.actions,
    html.vendorEdit .pagesContent>.rightContent>.centerArea #contactList .th.actions{
        width: 70px;
    }
}
@media screen and (orientation: portrait){
    html.customerEdit .pagesContent>.rightContent>.centerArea #contactList>.tr>.td>label,
    html.vendorEdit .pagesContent>.rightContent>.centerArea #contactList>.tr>.td>label{
        min-width: 23vw;
    }
    html.customerEdit .pagesContent>.rightContent>.centerArea #contactList>.tr>.td>div.textMode,
    html.vendorEdit .pagesContent>.rightContent>.centerArea #contactList>.tr>.td>div.textMode{
        padding: 2.22vw 3.889vw;
    }
    html.customerEdit .pagesContent>.rightContent>.centerArea #contactList>.tr>.td>div.textMode>input[type='radio'],
    html.vendorEdit .pagesContent>.rightContent>.centerArea #contactList>.tr>.td>div.textMode>input[type='radio']{
        margin: 0px;
    }
}
html.customerEdit .pagesContent>.rightContent>.centerArea #contactList input[name='mobile'],
html.vendorEdit .pagesContent>.rightContent>.centerArea #contactList input[name='mobile']{
    text-align: center;
}
@media screen and (orientation: portrait){
    html.customerEdit .pagesContent>.rightContent>.centerArea #contactList input[name='mobile'],
    html.vendorEdit .pagesContent>.rightContent>.centerArea #contactList input[name='mobile']{
        text-align: left;
    }
}

html.customerEdit .pagesContent>.rightContent>.centerArea #invoiceList .th.vatNumber{
    width: 100px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.customerEdit .pagesContent>.rightContent>.centerArea #invoiceList .th.vatNumber{
        width: 90px;
    }
}
html.customerEdit .pagesContent>.rightContent>.centerArea #invoiceList .th.name{
    width: 200px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.customerEdit .pagesContent>.rightContent>.centerArea #invoiceList .th.name{
        width: 120px;
    }
}
html.customerEdit .pagesContent>.rightContent>.centerArea #invoiceList .th.memo{
    width: 120px;
}
html.customerEdit .pagesContent>.rightContent>.centerArea #invoiceList .th.actions{
    width: 90px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.customerEdit .pagesContent>.rightContent>.centerArea #invoiceList .th.actions{
        width: 70px;
    }
}
@media screen and (orientation: portrait){
    html.customerEdit .pagesContent>.rightContent>.centerArea #invoiceList>.tr>.td>div.textMode{
        padding: 2.22vw 3.889vw;
    }
    html.customerEdit .pagesContent>.rightContent>.centerArea #invoiceList>.tr>.td>div.textMode>input[type='radio']{
        margin: 0px;
    }
}
html.customerEdit .pagesContent>.rightContent>.centerArea #invoiceList input[name='vatNumber']{
    text-align: center;
}
@media screen and (orientation: portrait){
    html.customerEdit .pagesContent>.rightContent>.centerArea #invoiceList input[name='vatNumber']{
        text-align: left;
    }
}
html.customerEdit .pagesContent>.rightContent>.centerArea #invoiceList>.tr>.td.address>div{
    overflow: hidden;
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
}
@media screen and (orientation: portrait){
    html.customerEdit .pagesContent>.rightContent>.centerArea #invoiceList div.address{
        align-items: stretch;
    }
    html.customerEdit .pagesContent>.rightContent>.centerArea #invoiceList>.tr>.td.address>div{
        position: relative;
        left: 0px;
        top: 0px;
        transform: none;
    }
}
html.customerEdit .pagesContent>.rightContent>.centerArea #invoiceList div.address>div.zipcode{
    width: calc(90px - 25px * 2);
    flex-grow: 0;
    justify-content: center;
}
@media screen and (orientation: portrait){
    html.customerEdit .pagesContent>.rightContent>.centerArea #invoiceList div.address>div.zipcode{
        width: calc(15vw - 3.889vw * 2);
        color: rgb(38.28, 38.28, 38.28);
        font-size: 3.889vw;
        line-height: normal;
        flex-shrink: 1;
        padding: 2.22vw 3.889vw;
    }
}
html.customerEdit .pagesContent>.rightContent>.centerArea #invoiceList div.address>select.city{
    width: auto;
    display: flex;
    flex-grow: 0;
    margin-right: 5px;
}
@media screen and (orientation: portrait){
    html.customerEdit .pagesContent>.rightContent>.centerArea #invoiceList div.address>select.city{
        flex-grow: 1;
        flex-shrink: 1;
        margin: 0px;
        padding: 2.22vw 0px;
    }
}
html.customerEdit .pagesContent>.rightContent>.centerArea #invoiceList div.address>select.town{
    width: auto;
    display: flex;
    flex-grow: 0;
    margin-right: 5px;
}
@media screen and (orientation: portrait){
    html.customerEdit .pagesContent>.rightContent>.centerArea #invoiceList div.address>select.town{
        flex-grow: 1;
        flex-shrink: 1;
        margin: 0px;
        padding: 2.22vw 0px;
    }
}
html.customerEdit .pagesContent>.rightContent>.centerArea #invoiceList div.address>input[name='address']{
    width: auto;
    display:flex;
    flex-grow: 2;
}
html.customerEdit .pagesContent>.rightContent>.centerArea div[name='rent']{
    border: 1px solid #CCCCCC;
    margin: 20px 0px;
    padding: 10px;
}
@media screen and (orientation: portrait){
    html.customerEdit .pagesContent>.rightContent>.centerArea div[name='rent']{
        margin: 5vw 0px;
        padding: 0px;
    }
}
html.customerEdit .pagesContent>.rightContent>.centerArea div[name='rent'] .dataArea>.formArea>li.title{
    margin-bottom: 0px;
}
html.customerEdit .pagesContent>.rightContent>.centerArea div[name='rent'] div[name='rentList'] .tr .th.startDate,
html.customerEdit .pagesContent>.rightContent>.centerArea div[name='rent'] div[name='rentList'] .tr .th.depositDate,
html.customerEdit .pagesContent>.rightContent>.centerArea div[name='rent'] div[name='rentList'] .tr .th.alertDate,
html.customerEdit .pagesContent>.rightContent>.centerArea div[name='rent'] div[name='rentList'] .tr .th.endDate{
    width: 17%;
}
html.customerEdit .pagesContent>.rightContent>.centerArea div[name='rent'] div[name='rentList'] .tr .th.useYear{
    width: 10%;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.customerEdit .pagesContent>.rightContent>.centerArea div[name='rent'] div[name='rentList'] .tr .th.useYear{
        width: auto;
    }
}
html.customerEdit .pagesContent>.rightContent>.centerArea div[name='rent'] div[name='rentList'] .tr .th.status{
    width: 12%;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.customerEdit .pagesContent>.rightContent>.centerArea div[name='rent'] div[name='rentList'] .tr .th.status{
        width: 130px;
    }
}
html.customerEdit .pagesContent>.rightContent>.centerArea div[name='rent'] div[name='rentList'] .tr .th.actions{
    width: 10%;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.customerEdit .pagesContent>.rightContent>.centerArea div[name='rent'] div[name='rentList'] .tr .th.actions{
        width: 70px;
    }
}
html.customerEdit .pagesContent>.rightContent>.centerArea div[name='rent'] div[name='rentList'] .tr .td>input[name='startDate'],
html.customerEdit .pagesContent>.rightContent>.centerArea div[name='rent'] div[name='rentList'] .tr .td>input[name='depositDate'],
html.customerEdit .pagesContent>.rightContent>.centerArea div[name='rent'] div[name='rentList'] .tr .td>input[name='alertDate'],
html.customerEdit .pagesContent>.rightContent>.centerArea div[name='rent'] div[name='rentList'] .tr .td>input[name='endDate']{
    text-align: center;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.customerEdit .pagesContent>.rightContent>.centerArea div[name='rent'] div[name='rentList'] .tr .td>input[name='startDate']::-webkit-calendar-picker-indicator,
    html.customerEdit .pagesContent>.rightContent>.centerArea div[name='rent'] div[name='rentList'] .tr .td>input[name='depositDate']::-webkit-calendar-picker-indicator,
    html.customerEdit .pagesContent>.rightContent>.centerArea div[name='rent'] div[name='rentList'] .tr .td>input[name='alertDate']::-webkit-calendar-picker-indicator,
    html.customerEdit .pagesContent>.rightContent>.centerArea div[name='rent'] div[name='rentList'] .tr .td>input[name='endDate']::-webkit-calendar-picker-indicator{
        margin-left: -5px;
    }
}
html.customerEdit .pagesContent>.rightContent>.centerArea div[name='rent'] div[name='rentList'] .tr .td>input[name='useYear']{
    text-align: center;
}
@media screen and (orientation: portrait){
    html.customerEdit .pagesContent>.rightContent>.centerArea div[name='rent'] div[name='rentList'] .tr .td.startDate,
    html.customerEdit .pagesContent>.rightContent>.centerArea div[name='rent'] div[name='rentList'] .tr .td.depositDate,
    html.customerEdit .pagesContent>.rightContent>.centerArea div[name='rent'] div[name='rentList'] .tr .td.endDate,
    html.customerEdit .pagesContent>.rightContent>.centerArea div[name='rent'] div[name='rentList'] .tr .td.useYear,
    html.customerEdit .pagesContent>.rightContent>.centerArea div[name='rent'] div[name='rentList'] .tr .td.actions{
        width: auto;
    }
    html.customerEdit .pagesContent>.rightContent>.centerArea div[name='rent'] div[name='rentList'] .tr .td>input[name='startDate'],
    html.customerEdit .pagesContent>.rightContent>.centerArea div[name='rent'] div[name='rentList'] .tr .td>input[name='depositDate'],
    html.customerEdit .pagesContent>.rightContent>.centerArea div[name='rent'] div[name='rentList'] .tr .td>input[name='endDate'],
    html.customerEdit .pagesContent>.rightContent>.centerArea div[name='rent'] div[name='rentList'] .tr .td>input[name='useYear']{
        text-align: left;
    }
    html.customerEdit .pagesContent>.rightContent>.centerArea div[name='rent'] div[name='rentList'].newItemsTable select[name='status']{
        padding: 2.22vw 3.889vw;
    }

    html.customerEdit .pagesContent>.rightContent>.centerArea>.centerAreaContents>.btn{
        background-color: #000000;
        margin: 0px;
        padding: 5vw;
    }
}



/* =========================================================
 * 右邊主頁 - 中間區塊 - 案件管理 - 案件列表
 * ========================================================= */
@media screen and (orientation: portrait){
    html.project .pagesContent>.rightContent>.centerArea .menu>ul>li.new{
        order: 999;
    }
    html.project .pagesContent>.rightContent>.centerArea .menu>ul>li.new>div{
        justify-content: flex-end;
    }
    html.project .pagesContent>.rightContent>.centerArea .menu>ul>li.new>div>label{
        width: auto;
        min-width: unset;
        height: auto;
        background: linear-gradient(
            180deg,
            rgb(149, 149, 149) 0%,
            rgb(115, 115, 115) 100%
        );
        border: 1px solid rgb(140, 140, 140);
        border-radius: 0.9375vw;
        box-shadow: 0px 0.625vw 0.625vw 0px rgb(100, 100, 100);
        color: rgb(255, 255, 255);
        font-size: 4.375vw;
        font-weight: bold;
        line-height: normal;
        text-align-last: unset;
        margin: 0px 0px 0px 20px;
        padding: 0.625vw 3.75vw;
        position: relative;
        top: -1px;
        cursor: pointer;
        outline: none;
    }
    html.project .pagesContent>.rightContent>.centerArea .menu>ul>li.searchProject,
    html.project .pagesContent>.rightContent>.centerArea .menu>ul>li.searchSales,
    html.project .pagesContent>.rightContent>.centerArea .menu>ul>li.searchDesigner{
        /*display: none;*/
    }
    html.project .pagesContent>.rightContent>.centerArea .menu>ul>li.back{
        display: none;
    }
}
html.project .pagesContent>.rightContent>.centerArea .dataTable>.tr.theader>.th.customerShortName{
    width: 14%;
}
html.project .pagesContent>.rightContent>.centerArea .dataTable>.tr.theader>.th.sum,
html.project .pagesContent>.rightContent>.centerArea .dataTable>.tr.theader>.th.sumWithTax,
html.project .pagesContent>.rightContent>.centerArea .dataTable>.tr.theader>.th.quotationDate{
    width: 12%;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.project .pagesContent>.rightContent>.centerArea .dataTable>.tr.theader>.th.sum,
    html.project .pagesContent>.rightContent>.centerArea .dataTable>.tr.theader>.th.sumWithTax,
    html.project .pagesContent>.rightContent>.centerArea .dataTable>.tr.theader>.th.quotationDate{
        width: 13%;
    }
}
html.project .pagesContent>.rightContent>.centerArea .dataTable>.tr.theader>.th.cost{
    width: 12%;
}
html.project .pagesContent>.rightContent>.centerArea .dataTable>.tr.theader>.th.profit{
    width: 12%;
}
html.project .pagesContent>.rightContent>.centerArea .dataTable>.tr.theader>.th.detail{
    width: 22%;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.project .pagesContent>.rightContent>.centerArea .dataTable>.tr.theader>.th.detail{
        width: 18%;
    }
}
@media screen and (orientation: portrait){
    html.project .pagesContent>.rightContent>.centerArea .dataTable>.tr.theader>.th.customerShortName{
        width: 19vw;
    }
    html.project .pagesContent>.rightContent>.centerArea .dataTable>.tr.theader>.th.sumWithTax{
        width: 22vw;
    }
    html.project .pagesContent>.rightContent>.centerArea .dataTable>.tr.theader>.th.actions{
        width: 10vw;
    }
    html.project .pagesContent>.rightContent>.centerArea .dataTable>.tr.theader>.th.sum,
    html.project .pagesContent>.rightContent>.centerArea .dataTable>.tr.theader>.th.quotationDate,
    html.project .pagesContent>.rightContent>.centerArea .dataTable>.tr.theader>.th.cost,
    html.project .pagesContent>.rightContent>.centerArea .dataTable>.tr.theader>.th.profit,
    html.project .pagesContent>.rightContent>.centerArea .dataTable>.tr.theader>.th.detail,
    html.project .pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.sum,
    html.project .pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.quotationDate,
    html.project .pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.cost,
    html.project .pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.profit,
    html.project .pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.detail{
        display: none;
    }
    html.project .pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.sumWithTax{
        text-align: left;
    }
    html.project .pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.actions>div{
        justify-content: center;
    }
    html.project .pagesContent>.rightContent>.centerArea .dataTable>.tr>.td.actions .editIcon{
        width: 6vw;
        height: 6vw;
    }

    html.project .pagesContent>.rightContent>.centerArea .dataTable>.tr.revenue{
        display: none;
    }
    html.project .pagesContent>.rightContent>.centerArea .dataTable.revenue .td.value{
        width: calc(22vw + 7vw);
    }
    html.project .pagesContent>.rightContent>.centerArea .dataTable.revenue .td{
        text-align: right;
    }
}


/* =========================================================
 * 右邊主頁 - 中間區塊 - 案件管理 - 案件編輯
 * ========================================================= */
@media screen and (orientation: portrait){
    html.projectDetail .pagesContent>.rightContent>.centerArea>.centerAreaContents.project>.menu{
        display: none;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.centerAreaContents .paveContent{
        width: 100%;
        padding: 0px;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.centerAreaContents .paveContent>.viewArea>.dataTable.projectMainInfo{
        width: calc(100% - 5vw * 2);
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        flex-grow: 0;
        flex-shrink: 0;
        justify-content: flex-start;
        align-items: flex-start;
        margin: 0px;
        padding: 5vw;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.centerAreaContents .paveContent>.viewArea>.dataTable.projectMainInfo>.tr{
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        flex-grow: 0;
        flex-shrink: 0;
        justify-content: flex-start;
        align-items: stretch;
    }
}
html.projectDetail .pagesContent>.rightContent>.centerArea>.centerAreaContents .paveContent>.viewArea>.dataTable.projectMainInfo>.tr>.th{
    width: 15%;
}
@media screen and (orientation: portrait){
    html.projectDetail .pagesContent>.rightContent>.centerArea>.centerAreaContents .paveContent>.viewArea>.dataTable.projectMainInfo>.tr>.th{
        width: auto;
        width: 23vw;
        background: none;
        border: 0px;
        color: rgb(73, 73, 73);
        /*text-align-last: justify;*/
        text-align: right;
        display: inline;
        position: relative;
        margin: 0px 3vw 5vw 0px;
        padding: 2.744vw 0px;
    }
}
html.projectDetail .pagesContent>.rightContent>.centerArea>.centerAreaContents .paveContent>.viewArea>.dataTable.projectMainInfo>.tr>.td:last-child{
    width: 20%;
}
@media screen and (orientation: portrait){
    html.projectDetail .pagesContent>.rightContent>.centerArea>.centerAreaContents .paveContent>.viewArea>.dataTable.projectMainInfo>.tr>.td:last-child{
        width: auto;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.centerAreaContents .paveContent>.viewArea>.dataTable.projectMainInfo input[for='customerCompanyName']{
        display: none;
    }
}
html.projectDetail .pagesContent>.rightContent>.centerArea>.centerAreaContents .paveContent>.viewArea>.dataTable.projectMainInfo select#customerCompanyName.searching{
    background-color: #EEEEEE;
    border: 1px solid #666666;
    position: absolute;
    left: 0px;
    top: 100%;
}
html.projectDetail .pagesContent>.rightContent>.centerArea>.centerAreaContents .paveContent>.viewArea>.dataTable.projectMainInfo>.tr>.td.textMode select#customerCompanyType{
    width: auto;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 20px 0px 0px;
}
html.projectDetail .pagesContent>.rightContent>.centerArea>.centerAreaContents .paveContent>.viewArea>.dataTable.projectMainInfo>.tr>.td.textMode select#customerCompanyType option{
    width: 100%;
}
@media screen and (orientation: portrait){
    html.projectDetail .pagesContent>.rightContent>.centerArea>.centerAreaContents .paveContent>.viewArea>.dataTable.projectMainInfo>.tr>.td.textMode{
        width: calc(100% - 23vw - 3vw);
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        flex-grow: 1;
        flex-shrink: 1;
        justify-content: flex-start;
        align-items: center;
        margin: 0px 0px 5vw 0px;
        padding: 0px;
    }
}
@media screen and (orientation: portrait){
    html.projectDetail .pagesContent>.rightContent>.centerArea>.centerAreaContents .paveContent>.viewArea>.dataTable.projectMainInfo>.tr>.td.textMode>.searchKeywordsForSelectArea{
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        flex-grow: 1;
        flex-shrink: 1;
        justify-content: flex-start;
        align-items: center;
        overflow: hidden;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.centerAreaContents .paveContent>.viewArea>.dataTable.projectMainInfo>.tr>.td.textMode>.searchKeywordsForSelectArea>select{
        width: auto;
        min-width: 0px;
        height: 10.791vw;
        background-color: rgb(248, 248, 248);
        font-size: 4.104vw;
        display: flex;
        padding: 0px 3.889vw;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.centerAreaContents .paveContent>.viewArea>.dataTable.projectMainInfo>.tr>.td.textMode>.searchKeywordsForSelectArea>select:last-child{
        flex-grow: 1;
        flex-shrink: 1;
    }

    html.projectDetail .pagesContent>.rightContent>.centerArea>.centerAreaContents .dataTable.newItemsTable>.tr:nth-of-type(odd) label.checkBox>span{
        background-color: rgb(248, 248, 248);
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.centerAreaContents .dataTable.newItemsTable>.tr:nth-of-type(even) label.checkBox>span{
        background-color: #FFFFFF;
    }
}
html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder input[type='number'],
html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder input[name='name'],
html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder input[name='clothing'],
html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder select[name='sex']{
    text-align: center;
}
html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers{
    width: 100%;
    counter-reset: item;
}
@media screen and (orientation: portrait){
    html.projectDetail .pagesContent>.rightContent>.centerArea .clothingOrder>.viewArea>.content{
        padding: 0px;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea .clothingOrder>.viewArea>.content>.orderMembers>li{
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        flex-grow: 0;
        flex-shrink: 0;
        justify-content: flex-start;
        align-items: flex-start;
        margin: 0px;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.memberDetail{
        width: calc(100% - 5vw * 2);
        background: #000000;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        flex-grow: 0;
        flex-shrink: 0;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 5vw;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.memberDetail>.tr{
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        flex-grow: 0;
        flex-shrink: 0;
        justify-content: flex-start;
        align-items: flex-start;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.memberDetail>.tr.theader{
        margin: 0px 0px 5vw 0px;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.memberDetail>.tr.theader>.th.index,
    html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.memberDetail>.tr.theader>.th.name,
    html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.memberDetail>.tr.theader>.th.height,
    html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.memberDetail>.tr.theader>.th.sex{
        display: none;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.memberDetail>.tr.theader>.th.memo{
        width: calc(100% - 3px * 2);
        color: transparent;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.memberDetail>.tr>.td{
        width: 100%;
        background: transparent;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        flex-grow: 0;
        flex-shrink: 0;
        justify-content: flex-start;
        align-items: stretch;
        margin: 0px 0px 5vw 0px;
        padding: 0px;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.memberDetail>.tr>.td:last-child{
        margin: 0px;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.memberDetail>.tr>.td::before{
        content: attr(data-portraitName);
        width: 20%;
        color: #FFFFFF;
        text-align: right;
        display: block;
        padding: 2.744vw 5vw;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.memberDetail>.tr>.td::after{
        width: auto;
        height: 36px;
        background: rgb(248, 248, 248);
        display: flex;
        flex-grow: 1;
        flex-shrink: 1;
        justify-content: center;
        align-items: center;
        margin: 0px;
        padding: 0px;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.memberDetail>.tr>.td>input{
        width: auto;
        height: 36px;
        background: rgb(248, 248, 248);
        flex-grow: 1;
        flex-shrink: 1;
        margin: 0px;
        padding: 0px;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.memberDetail>.tr>.td>select{
        width: auto;
        height: 36px;
        background: rgb(248, 248, 248);
        flex-grow: 1;
        flex-shrink: 1;
        margin: 0px;
        padding: 0px;
    }

    html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.clothingList{
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        flex-grow: 0;
        flex-shrink: 0;
        justify-content: flex-start;
        align-items: flex-start;
        margin: 0px;
        padding: 0px;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.clothingList>.tr.theader{
        display: none;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.clothingList>.tr{
        width: calc(100% - 5vw * 2);
        padding: 5vw;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.clothingList>.tr:nth-child(odd){
        background: #F0F0F0;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.clothingList:nth-child(odd)>.tr:nth-child(even){
        background: #F0F0F0;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.clothingList:nth-child(odd)>.tr:nth-child(odd){
        background: #FFFFFF;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.clothingList>.tr>.td{
        width: 100%;
        background: transparent;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        flex-grow: 0;
        flex-shrink: 0;
        justify-content: flex-start;
        align-items: stretch;
        margin: 0px 0px 5vw 0px;
        padding: 0px;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.clothingList>.tr>.td:not([data-portraitname]),
    html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.clothingList>.tr>.td[data-portraitName=""]{
        display: none;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.clothingList>.tr>.td:last-child{
        margin: 0px;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.clothingList>.tr>.td::before{
        content: attr(data-portraitName);
        width: 20%;
        color: rgb(73, 73, 73);
        text-align: right;
        display: block;
        padding: 2.744vw 5vw;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.clothingList>.tr>.td>div,
    html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.clothingList>.tr>.td>input{
        width: auto;
        background: rgb(248, 248, 248);
        text-align: center;
        flex-grow: 1;
        flex-shrink: 1;
        margin: 0px;
        padding: 2.744vw 5vw;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.clothingList>.tr:nth-child(odd)>.td>div,
    html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.clothingList>.tr:nth-child(odd)>.td>input{
        background: #FFFFFF;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.clothingList:nth-child(odd)>.tr:nth-child(even)>.td>div,
    html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.clothingList:nth-child(odd)>.tr:nth-child(even)>.td>input{
        background: #FFFFFF;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.clothingList:nth-child(odd)>.tr:nth-child(odd)>.td>div,
    html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.clothingList:nth-child(odd)>.tr:nth-child(odd)>.td>input{
        background: rgb(248, 248, 248);
    }
}
html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.memberDetail .td.index::after{
    counter-increment: item;
    content: counter(item);
}
html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.memberDetail .th.memo{
    position: relative;
}
html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.memberDetail .th>.actionButtons{
    display: flex;
    position: absolute;
    top: 50%;
    right: 1px;
    transform: translateY(-50%);
}
html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.memberDetail .th>.actionButtons>button{
    width: 27px;
    height: 27px;
    background: #000000;
    border: 0px;
    border-radius: 3px;
    color: transparent;
    margin: 0px 3px;
    padding: 0px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.memberDetail .th>.actionButtons>button.sortUp:before{
    content: '';
    width: 0px;
    height: 0px;
    border-right: 5.4px solid transparent;
    border-bottom: 10.8px solid #FFFFFF;
    border-left: 5.4px solid transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li:first-child>.memberDetail .th>.actionButtons>button.sortUp{
    display: none;
}
html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.memberDetail .th>.actionButtons>button.sortDown:before{
    content: '';
    width: 0px;
    height: 0px;
    border-top: 10.8px solid #FFFFFF;
    border-right: 5.4px solid transparent;
    border-left: 5.4px solid transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li:last-child>.memberDetail .th>.actionButtons>button.sortDown{
    display: none;
}
html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.memberDetail .th>.actionButtons>button.add{
    display: none;
}
html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.memberDetail .th>.actionButtons>button.add:before{
    content: '';
    width: 1px;
    height: 13.5px;
    border-right: 3px solid #FFFFFF;
    position: absolute;
    top: 50%;
    left: calc(50% - 0.6px);
    transform: translateX(-50%) translateY(-50%);
}
html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.memberDetail .th>.actionButtons>button.add:after{
    content: '';
    width: 13.5px;
    height: 1px;
    border-top: 3px solid #FFFFFF;
    position: absolute;
    top: calc(50% + 0.5px);
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li:last-child>.memberDetail .th>.actionButtons>button.add{
    display: block;
}
html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.memberDetail .th>.actionButtons>button.delete{
    display: none;
}
html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li>.memberDetail .th>.actionButtons>button.delete:after{
    content: '';
    width: 13.5px;
    height: 1px;
    border-top: 3px solid #FFFFFF;
    position: absolute;
    top: calc(50% + 0.5px);
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers>li:not(:only-child)>.memberDetail .th>.actionButtons>button.delete{
    display: block;
}
html.projectDetail .pagesContent>.rightContent>.centerArea>.clothingOrder .orderMembers .clothingList .tr.theader .th{
    background: #9F9FA0;
    border-color: #9F9FA0;
}


html.projectDetail .pagesContent>.rightContent>.centerArea>.centerAreaContents .dataTable.newItemsTable>.tr>.td input[name='unit']{
    text-align: right;
}
@media screen and (orientation: portrait){
    html.projectDetail .pagesContent>.rightContent>.centerArea>.centerAreaContents .dataTable.newItemsTable>.tr>.td input[name='unit']{
        text-align: left;
    }

    html.projectDetail .pagesContent>.rightContent>.centerArea>.centerAreaContents .projectMemo{
        width: calc(100% - 5vw * 2);
        margin:  0px;
        padding: 5vw;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.centerAreaContents .projectMemo>.dataTable{
        font-size: 3.889vw;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.centerAreaContents .projectMemo>.dataTable>.tr>.td{
        font-size: 3.889vw;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.centerAreaContents .projectMemo>.items{
        width: 100%;
        background-color: rgb(248, 248, 248);
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        flex-grow: 0;
        flex-shrink: 0;
        justify-content: flex-start;
        align-items: flex-start;
        margin: 0px;
        padding: 0px;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.centerAreaContents .projectMemo>.items>.tr{
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        flex-grow: 0;
        flex-shrink: 0;
        justify-content: flex-start;
        align-items: flex-start;
        margin: 0px;
        padding: 5vw 0px;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.centerAreaContents .projectMemo>.items>.tr>.td{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        flex-grow: 0;
        flex-shrink: 0;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 0px;
    }
}
html.projectDetail .pagesContent>.rightContent>.centerArea>.centerAreaContents .projectMemo>.dataTable>.tr>.td.title{
     width: 15%;
}
@media screen and (orientation: portrait){
    html.projectDetail .pagesContent>.rightContent>.centerArea>.centerAreaContents .projectMemo>.items>.tr>.td.title{
        width: calc(100% - 5vw * 2);
        padding: 0px 5vw;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.centerAreaContents .projectMemo>.items>.tr>.td.textMode{
        margin: 5vw 0px 0px 0px;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.centerAreaContents .projectMemo>.items>.tr>.td.textMode>textarea{
        width: calc(100% - 5vw * 2 - 5vw * 2);
        border: 0px;
        font-size: 3.889vw;
        margin: 0px 5vw;
        padding: 5vw 5vw 0px 5vw;
        resize: none;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.centerAreaContents .projectPics{
        width: 100%;
        margin: 0px;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.centerAreaContents .projectPics ul.viewFiles{
        width: calc(100% - 5vw * 2);
        margin: 5vw 5vw 0px 5vw;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea #projectPics>.viewFiles>li{
        width: calc(100vw - 5vw * 2 - 1px * 2);
        height: calc(100vw - 5vw * 2 - 1px * 2);
        margin: 0px 0px 5px 0px;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.centerAreaContents .projectPics #projectPics>.viewFiles>li>img{
        object-position: center center;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea #projectPics>.uploadArea{
        width: calc(100% - 5vw * 2 - 1px * 2);
        margin: 5vw;
    }
    html.projectDetail .pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea #projectPics>.configArea>.viewArea>.form>li>label{
        font-size: 3.889vw;
    }
}


/* =========================================================
 * 右邊主頁 - 中間區塊 - 案件管理 - 工作管理
 * ========================================================= */
@media screen and (orientation: portrait){
    html.jobs .pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu{
        width: auto;
        padding: 0px;
        position: absolute;
        top: calc((12.5vw - 8vw) / 2);
        right: 5vw;
    }
    html.jobs .pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.menu>ul>li.modify>div>label{
        width: auto;
        color: var(--project-color-3);
        margin: 0px;
        padding: 0px;
    }
    html.jobs .pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs>.paveContent{
        width: 100%;
        padding: 0px;
    }
    html.jobs .pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs .waterfall>.items{
        width: 100%;
        border: 0px;
    }
    html.jobs .pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs .waterfall>.items>h2{
        width: calc(100% - 5vw * 2);
        height: 10.511vw;
        background-color: #000000;
        color: #FFFFFF;
        font-size: 4.104vw;
        justify-content: flex-start;
        align-items: center;
        margin: 0px;
        padding: 0px 5vw;
    }
    html.jobs .pagesContent>.rightContent>.centerArea>.centerAreaContents.jobs .waterfall>.items>.content{
        width: calc(100% - 5vw * 2);
        font-size: 4.104vw;
        padding: 5vw;
    }
    html.jobs #cyMsgBox{
        width: calc(100% - 5vw * 2);
        height: calc(100% - 5vw * 2);
        padding: 5vw;
    }
    html.jobs #cyMsgBox>.contentArea{
        max-width: calc(100% - 5vw * 2);
        max-height: calc(100% - 5vw * 2);
        padding: 5vw;
    }
}
html.jobs #cyMsgBox>.contentArea .dataTable#popUserList .th.actions{
    width: 90px;
}
@media screen and (orientation: portrait){
    html.jobs #cyMsgBox>.contentArea .dataTable#popUserList .th.actions{
        width: auto;
    }
}

@media screen and (orientation: portrait){
    html.jobs #cyMsgBox>.contentArea .dataTable:not([name='popProjectList']) .th{
        width: 18vw;
    }
}
html.jobs #cyMsgBox>.contentArea .dataTable[name='popProjectList']{
    min-width: 800px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.jobs #cyMsgBox>.contentArea .dataTable[name='popProjectList']{
        min-width: auto;
    }
}
@media screen and (orientation: portrait){
    html.jobs #cyMsgBox>.contentArea .dataTable[name='popProjectList']{
        min-width: auto;
    }
    html.jobs #cyMsgBox>.contentArea .dataTable[name='popProjectList']>.tr>.td>label{
        min-width: 8vw;
    }
}
html.jobs #cyMsgBox>.contentArea .dataTable[name='popTodayList']{
    min-width: 800px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.jobs #cyMsgBox>.contentArea .dataTable[name='popTodayList']{
        min-width: auto;
    }
}
@media screen and (orientation: portrait){
    html.jobs #cyMsgBox>.contentArea .dataTable[name='popTodayList']{
        min-width: auto;
    }
    html.jobs #cyMsgBox>.contentArea .dataTable[name='popTodayList']>.tr>.td>label{
        min-width: 8vw;
    }
}
html.jobs #cyMsgBox>.contentArea input[name='date']{
    text-align: center;
}
@media screen and (orientation: portrait){
    html.jobs #cyMsgBox>.contentArea input[name='date']{
        text-align: left;
    }
    html.jobs #cyMsgBox>.contentArea input[type='button']{
        flex-grow: 0;
    }
    html.jobs #cyMsgBox>.contentArea>.buttons>ul>li.deleteBtn{
        width: 100%;
        order: 1;
    }
    html.jobs #cyMsgBox>.contentArea>.buttons>ul>li.deleteBtn>input[type='button']{
        width: calc(100% - 6px * 2);
        background-color: rgba(150, 0, 0, 1);
    }
    html.jobs #cyMsgBox>.contentArea>.buttons>ul>li.cancelBtn{
        order: 2;
    }
    html.jobs #cyMsgBox>.contentArea>.buttons>ul>li.cancelBtn>input[type='button']{
        width: calc(100% - 6px * 2);
    }
    html.jobs #cyMsgBox>.contentArea>.buttons>ul>li.submitBtn{
        order: 3;
    }
    html.jobs #cyMsgBox>.contentArea>.buttons>ul>li.submitBtn>input[type='button']{
        width: calc(100% - 6px * 2);
    }
}


/* =========================================================
 * 右邊主頁 - 中間區塊 - 案件管理 - 工作管理
 * ========================================================= */
html.jobs #cyMsgBox .dataTable>.tr>.th.date{
    width: 180px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.jobs #cyMsgBox .dataTable>.tr>.th.date{
        width: 90px;
    }
}
html.jobs #cyMsgBox .dataTable>.tr.disabled>.td>input[type='date'],
html.jobs #cyMsgBox .dataTable>.tr.disabled>.td>input[type='text'],
html.jobs #cyMsgBox .dataTable>.tr.disabled>.td>textarea,
html.jobs #cyMsgBox .dataTable>.tr.disabled>.td>select{
    color: #C3C3C1;
}
html.jobs #cyMsgBox .dataTable>.tr.delay>.td>input[type='date'],
html.jobs #cyMsgBox .dataTable>.tr.delay>.td>input[type='text'],
html.jobs #cyMsgBox .dataTable>.tr.delay>.td>textarea,
html.jobs #cyMsgBox .dataTable>.tr.delay>.td>select{
    color: #18ACC8;
}
html.jobs #cyMsgBox .dataTable>.tr.final>.td>input[type='date'],
html.jobs #cyMsgBox .dataTable>.tr.final>.td>input[type='text'],
html.jobs #cyMsgBox .dataTable>.tr.final>.td>textarea,
html.jobs #cyMsgBox .dataTable>.tr.final>.td>select{
    color: #E67817;
}

/* =========================================================
 * 右邊主頁 - 中間區塊 - 廠商管理 - 廠商分類
 * ========================================================= */
@media screen and (orientation: portrait){
    html.vendorCatalog div.form>ul.dataRow{
        width: 100%;
        margin: 5vw 0px;
    }
}

/* =========================================================
 * 右邊主頁 - 中間區塊 - 客戶管理 - 客戶分類
 * ========================================================= */
@media screen and (orientation: portrait){
    html.customerCatalog div.form>ul.dataRow{
        width: 100%;
        margin: 5vw 0px;
    }
}

/* =========================================================
 * 右邊主頁 - 中間區塊 - 使用公司管理
 * ========================================================= */
html.systemUseCompany .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.startDate,
html.systemUseCompany .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.endDate{
    width: 150px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.systemUseCompany .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.startDate,
    html.systemUseCompany .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.endDate{
        width: 110px;
    }
}
html.systemUseCompany .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.vatNumber{
    width: 150px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.systemUseCompany .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.vatNumber{
        width: 80px;
    }
}
html.systemUseCompany .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.contact{
    width: 200px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.systemUseCompany .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.contact{
        width: 115px;
    }
}
html.systemUseCompany .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.showStatus{
    width: 100px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.systemUseCompany .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.showStatus{
        width: 50px;
    }
}
html.systemUseCompany .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.actions{
    width: 70px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.systemUseCompany .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.actions{
        width: 40px;
    }
}

/* =========================================================
 * 右邊主頁 - 中間區塊 - 公司基本設定
 * ========================================================= */
html.systemUseCompanyEdit .centerAreaContents .systemColors{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (orientation: portrait){
    html.systemUseCompanyEdit .centerAreaContents .systemColors{
        width: calc(100% - 5vw * 2);
        padding: 5vw;
    }
}
html.systemUseCompanyEdit .centerAreaContents .systemColors>ul{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: stretch;
}
html.systemUseCompanyEdit .centerAreaContents .systemColors>ul>li{
    width: 120px;
    height: 23px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
}
@media screen and (orientation: portrait){
    html.systemUseCompanyEdit .centerAreaContents .systemColors>ul>li{
        width: 25%;
    }
}
html.systemUseCompanyEdit .centerAreaContents .systemColors>ul>li>input[type='color']{
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
html.systemUseCompanyEdit .centerAreaContents .systemColors>ul.org>li:nth-child(1){
    background-color: rgb(73, 73, 73);
    cursor: pointer;
}
html.systemUseCompanyEdit .centerAreaContents .systemColors>ul.new>li:nth-child(1){
    background-color: var(--user-color-1);
    cursor: pointer;
}
html.systemUseCompanyEdit .centerAreaContents .systemColors>ul.org>li:nth-child(2){
    background-color: rgb(137, 137, 137);
}
html.systemUseCompanyEdit .centerAreaContents .systemColors>ul.new>li:nth-child(2){
    background-color: var(--user-color-2);
}
html.systemUseCompanyEdit .centerAreaContents .systemColors>ul>li:nth-child(3){
    background-color: rgb(230, 230, 230);
}
html.systemUseCompanyEdit .centerAreaContents .systemColors>ul>li:nth-child(4){
    background-color: rgb(248, 248, 248);
}
html.systemUseCompanyEdit .centerAreaContents .systemColors>div{
    margin: 35px 0px;
}
html.systemUseCompanyEdit .centerAreaContents .systemColors>div>p{
    font-weight: bold;
}
@media screen and (orientation: portrait){
    html.systemUseCompanyEdit .centerAreaContents .systemColors>div>p{
        font-size: 3.889vw;
    }
}
html.systemUseCompanyEdit .centerAreaContents .systemColors>div>p>em{
    color: var(--ddms-color-1);
    font-style: normal;
}
@media screen and (orientation: portrait){
    html.systemUseCompanyEdit .pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea>h2:first-child{
        display: none;
    }
}
html.systemUseCompanyEdit .pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea.files{
    width: calc(100% - 110px);
    flex-direction: row;
    justify-content: space-between;
    margin: 40px 0px 0px 0px;
    padding: 0px 110px 0px 0px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.systemUseCompanyEdit .pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea.files{
        width: 100%;
        padding: 0px;
    }
}
@media screen and (orientation: portrait){
    html.systemUseCompanyEdit .pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea.files{
        width: calc(100% - 5vw * 2);
        flex-direction: column;
        margin: 0px;
        padding: 5vw;
    }
}
html.systemUseCompanyEdit .pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea.files>li{
    width: auto;
    flex-direction: row;
}
@media screen and (orientation: portrait){
    html.systemUseCompanyEdit .pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea.files>li{
        width: 100%;
        flex-direction: column;
    }
}
html.systemUseCompanyEdit .pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea.files>li>label{
    align-items: flex-start;
}
@media screen and (orientation: portrait){
    html.systemUseCompanyEdit .pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea.files>li>label{
        width: auto;
        margin: 5vw 0px;
        padding: 0px;
    }
    html.systemUseCompanyEdit .pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea.files>li>label>br{
        display: none;
    }
    html.systemUseCompanyEdit .pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea.files>li>.dragImageUploadArea>ul{
        justify-content: center;
    }
}
html.systemUseCompanyEdit .pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea>.uploadArea{
    width: 250px;
    min-height: 190px;
}
html.systemUseCompanyEdit .pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea.full>.uploadArea{
    width: 100%;
    min-height: 190px;
}
html.systemUseCompanyEdit .pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea li.darkLogo .dragImageUploadArea>.uploadArea{
    background-color: rgb(137, 137, 137);
    color: rgb(255, 255, 255);
}
html.systemUseCompanyEdit .pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea[configMaxFiles='1']>.viewFiles>li{
    width: 250px;
    min-height: 190px;
}
html.systemUseCompanyEdit .pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea[configMaxFiles='1'].full>.viewFiles>li{
    width: 100%;
    min-height: 190px;
}
html.systemUseCompanyEdit .pagesContent>.rightContent>.centerArea>.centerAreaContents .fullWidthArea{
    width: 100%;
}
html.systemUseCompanyEdit .pagesContent>.rightContent>.centerArea>.centerAreaContents .fullWidthArea>.title{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-end;
    margin: 30px 0px 12px 0px;
}
@media screen and (orientation: portrait){
    html.systemUseCompanyEdit .pagesContent>.rightContent>.centerArea>.centerAreaContents .fullWidthArea>.title{
        flex-direction: column;
        align-items: flex-start;
        margin: 5vw 0px 0px 0px;
    }
}
html.systemUseCompanyEdit .pagesContent>.rightContent>.centerArea>.centerAreaContents .fullWidthArea>.title>h2{
    width: 110px;
    margin: 0px;
}
@media screen and (orientation: portrait){
    html.systemUseCompanyEdit .pagesContent>.rightContent>.centerArea>.centerAreaContents .fullWidthArea>.title>h2{
        width: 100%;
    }
}
html.systemUseCompanyEdit .pagesContent>.rightContent>.centerArea>.centerAreaContents .fullWidthArea>.title>h2+span{
    color: rgb(73, 73, 73);
    font-size: 18px;
    font-weight: bold;
    line-height: normal;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    margin: 0px 0px 0px 0px;
}
@media screen and (orientation: portrait){
    html.systemUseCompanyEdit .pagesContent>.rightContent>.centerArea>.centerAreaContents .fullWidthArea>.title>h2+span{
        font-size: 3.889vw;
        margin: 5vw 0px 0px 5vw;
    }
}
html.systemUseCompanyEdit .pagesContent>.rightContent>.centerArea>.centerAreaContents .fullWidthArea>.title>h2+span:before{
    content: '';
    margin: 0px 12px 0px 0px;
}
html.systemUseCompanyEdit .pagesContent>.rightContent>.centerArea>.centerAreaContents .fullWidthArea>.title>h2+span.required:before{
    content: '*';
    color: rgb(235, 97, 0);
    font-size: 18px;
    margin: 0px 3px 0px 0px;
}
@media screen and (orientation: portrait){
    html.systemUseCompanyEdit .pagesContent>.rightContent>.centerArea>.centerAreaContents .fullWidthArea>.title>h2+span.required:before{
        font-size: 3.889vw;
        margin: 0px 1.5625vw 0px 0px;
    }
}

html.systemUseCompanyEdit .pagesContent>.rightContent>.centerArea>.centerAreaContents .fullWidthArea>ul{
    width: calc(100% - 110px * 2);
    margin: 0px 110px;
}
@media only screen and (max-width: 1400px) and (orientation: landscape){
    html.systemUseCompanyEdit .pagesContent>.rightContent>.centerArea>.centerAreaContents .fullWidthArea>ul{
        width: 100%;
        margin: 0px;
    }
}
@media screen and (orientation: portrait){
    html.systemUseCompanyEdit .pagesContent>.rightContent>.centerArea>.centerAreaContents .fullWidthArea>ul{
        width: calc(100% - 5vw * 2);
        margin: 0px 5vw;
    }
}
html.systemUseCompanyEdit .pagesContent>.rightContent>.centerArea>.centerAreaContents .fullWidthArea>ul>li:first-child{
    margin: 20px 0px;
}
@media screen and (orientation: portrait){
    html.systemUseCompanyEdit .pagesContent>.rightContent>.centerArea>.centerAreaContents .fullWidthArea>ul>li:first-child{
        margin: 5vw 0px;
    }
}
html.systemUseCompanyEdit .pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea .dragImageUploadArea#companyInfoLogo>.viewFiles>li{
    background: none;
}

/* =========================================================
 * 右邊主頁 - 中間區塊 - 員工基本設定
 * ========================================================= */
html.systemEmployee .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.name{
    width: calc(160px - 8px * 2);
}
@media only screen and (max-width: 1400px){
    html.systemEmployee .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.name{
        width: 100px;
    }
}
html.systemEmployee .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.title{
    width: calc(160px - 8px * 2);
}
@media only screen and (max-width: 1400px){
    html.systemEmployee .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.title{
        width: 100px;
    }
}
html.systemEmployee .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.account{
    width: calc(160px - 8px * 2);
}
@media only screen and (max-width: 1400px){
    html.systemEmployee .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.account{
        width: 100px;
    }
}
html.systemEmployee .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.memo{
    width: calc(160px - 8px * 2);
}
@media only screen and (max-width: 1400px){
    html.systemEmployee .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.memo{
        width: 100px;
    }
}
html.systemEmployee .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.status{
    width: calc(160px - 8px * 2);
}
@media only screen and (max-width: 1400px){
    html.systemEmployee .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.status{
        width: 60px;
    }
}
html.systemEmployee .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.actions{
    width: calc(110px - 8px * 2);
}
@media only screen and (max-width: 1400px){
    html.systemEmployee .pagesContent>.rightContent>.centerArea .dataTable .tr.theader .th.actions{
        width: 40px;
    }
}

/* =========================================================
 * 右邊主頁 - 中間區塊 - 員工基本設定
 * ========================================================= */
@media screen and (orientation: portrait){
    html.systemEmployeeEdit .centerAreaContents .formArea>li.mail{
        font-size: 3.889vw;
        flex-wrap: wrap;
        justify-content: flex-end
    }
    html.systemEmployeeEdit .pagesContent>.rightContent>.centerArea .dataTable.newItemsTable>.tr>.td>label,
    html.systemEmployeeEdit .formArea>li>label{
        min-width: 18vw;
    }
    html.systemEmployeeEdit .centerAreaContents .formArea>li.account,
    html.systemEmployeeEdit .centerAreaContents .formArea>li.password,
    html.systemEmployeeEdit .centerAreaContents .formArea>li.rePassword{
        width: calc(100% - 5vw * 2);
        margin: 0px 5vw 2.778vw 5vw;
    }
}

/* =========================================================
 * 右邊主頁 - 中間區塊 - 郵件版型修改
 * ========================================================= */
@media screen and (orientation: portrait){
    html.systemMail .pagesContent>.rightContent>.centerArea>.centerAreaContents div.memo>ol{
        width: calc(100% - 5.25vw);
        margin: 2.778vw 0px 0px 5.25vw;
    }
    html.systemMail .pagesContent>.rightContent>.centerArea>.centerAreaContents div.memo>ol>li{
        font-size: 4.375vw;
        line-height: normal;
        margin: 0px 0px 2.778vw 0px;
    }
    html.systemMail .pagesContent>.rightContent>.centerArea>.centerAreaContents .dataTable{
        width: calc(100% - 5vw * 2);
        padding: 5vw;
    }
}
html.systemMail .pagesContent>.rightContent>.centerArea>.centerAreaContents .dataTable>.th.actions{
    width: 80px;
}
@media screen and (orientation: portrait){
    html.systemMail .pagesContent>.rightContent>.centerArea>.centerAreaContents .dataTable>.th.actions{
        width: 5vw;
    }
}


/* =========================================================
 * 右邊主頁 - 中間區塊 - 郵件版型修改
 * ========================================================= */
@media screen and (orientation: portrait){
    html.systemMailTplEdit .pagesContent>.rightContent>.centerArea>.centerAreaContents .formArea>.content{
        flex-direction: column;
    }
}

/* =========================================================
 * 右邊主頁 - 下方區塊
 * ========================================================= */
.pagesContent>.rightContent>.bottomArea{
    display: none;
}
@media screen and (orientation: portrait){
    .pagesContent>.rightContent>.bottomArea{
        width: 100%;
        background-color: rgb(28, 67, 70);
        color: rgb(255, 255, 255);
        font-family: Arial, Microsoft JhengHei;
        font-size: 3.75vw;
        font-weight: normal;
        text-decoration: none;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        flex-grow: 0;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        padding: 7px 0px;
    }
    .pagesContent>.rightContent>.bottomArea{
        width: 100%;
        font-size: 3.75vw;
        padding: 7px 0px;
    }
    .pagesContent>.rightContent>.bottomArea>div{
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        flex-grow: 1;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        margin: 0px 4.688vw;
    }
    .pagesContent>.rightContent>.bottomArea>div img{
        height: 5.625vw;
        margin: 0px 1.563vw;
    }
    .pagesContent>.rightContent>.bottomArea>div.designer img{
        height: 6.875vw;
    }
}


/* =========================================================
 * 提示數字
 * ========================================================= */
.alertNumber{
    background-color: #CA1D04;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    box-shadow: 1px 1px 1px 1px rgb(100%, 100%, 100%, 0.5);
    color: #FFFFFF;
    font-family: Arial, Microsoft JhengHei;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    line-height: 24px;
    margin: 0px 0px 0px 0px;
    padding: 0px 6px 0px 6px;
    display: inline-block;
    position: relative;
    top: -18px;
    right: 0px;
    z-index: 10;
}


/* =========================================================
 * 上傳進度條
 * ========================================================= */
#uploadProgress{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: none;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 9999;
    cursor: default;
}
#uploadProgress.uploading{
    display: flex;
}
#uploadProgress>.barArea{
    width: 80%;
    height: 30px;
    background-color: #EEEEEE;
    border: 1px solid #999999;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
#uploadProgress>.barArea>.bar{
    width: 0%;
    height: 100%;
    animation: uploadProgressBarAnimation 1s infinite alternate;
    -moz-animation: uploadProgressBarAnimation 1s infinite alternate;
    -webkit-animation: uploadProgressBarAnimation 1s infinite alternate;
}
@keyframes uploadProgressBarAnimation{
    from {  background-color: rgb(74, 158, 216); }
    to {    background-color: rgb(44, 140, 205);}
}
@-moz-keyframes uploadProgressBarAnimation{
    from {  background-color: rgb(74, 158, 216); }
    to {    background-color: rgb(44, 140, 205);}
}
@-webkit-keyframes uploadProgressBarAnimation{
    from {  background-color: rgb(74, 158, 216); }
    to {    background-color: rgb(44, 140, 205);}
}
#uploadProgress>.status{
    width: 100%;
    color: #FFFFFF;
    font-size: 18px;
    text-align: center;
    text-shadow: -2px 0px 2px #333333, 2px 0px 2px #333333, 0px -2px 2px #333333, 0px 2px 2px #333333;
    margin: 10px 0px 0px 0px;
}