:root{
    --bodyMinWidth: 1000px;
    --unitWidth: calc(100vw / 32);
    --unitHeight: calc(100vh / 20);
    --screenPadding: 30px;
    --newExampleTop: 0;
}    

@media screen and (max-width: 400px){
    :root {
        --unitWidth: calc(100vw / 8);
        --unitHeight: calc(100vh / 15);
        --newExampleTop: 0;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 11pt;
	font-family: "微軟正黑體", "新細明體", "Verdana";
}

.bodyMinWidth {
    min-width: var(--bodyMinWidth);
}



.mainImage img {
    width: 80%;
	display:block; 
	margin:auto;
	
}

.mainContainer {
    margin: 20px 0;
}

.mainContainer > div {
    border-bottom: 1px solid #cccccc;
    padding: 5px 0;
}

.mainContainer > span, 
.mainContainer div > span {
    font-size: 20pt;
    font-weight: bold;
}


.loginLogo {
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url('./images/login1.jpg');
}

.bodyContainer {
    margin: 0 var(--screenPadding);
}

.alignCenter {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.alignRight {
    text-align: right;
    padding-right: 2px;
}

.loginTable {
    color: black;
    position: absolute;
    width: 25%;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.loginTable td {
    padding: 8px;
}

.loginTable td i {
    font-size: 30px;
}

.searchTable td input[type="textglass"] {
    padding-left:35px;
	background: url(./images/icons/magnifying-glass-solid_20.png) no-repeat 7px 10px;
}

.loginTable td input[type="submit"] {
    padding: 3px;
}

.loginTable td input[type="text"] {
    background: url(./images/icons/user-solid.png) no-repeat 7px 10px;
}

.loginTable td input[type="pen"] {
    background: url(./images/icons/pen-solid.png) no-repeat 7px 10px;
}

.loginTable td input[type="email"] {
    background: url(./images/icons/envelope-solid.png) no-repeat 7px 10px;
}

.loginTable td input[type="password"] {
    background: url(./images/icons/lock-solid.png) no-repeat 7px 10px;
}

.loginTable td input[type="pen"],
.loginTable td input[type="email"],
.loginTable td input[type="text"],
.loginTable td input[type="password"]{
    border: 1px solid #BCBCBC;
    padding-left:35px;
    height: 50px;
    border-radius: 5px;
    width: 100%;
}

.loginBtn {
    width: 35%;
    height: 35px;
    background-color: #034744;
    color: #ffffff;
    border-radius: 5px;
    font-size: 12px;
}

.loginTable img {
    width: 30px;
}

.title {
    position: sticky;
    top: 0;
    padding-top: var(--screenPadding);
    z-index: 10;
    background: #fff;
}

.title p {
    font-size: 16pt;
    font-weight: bold;
    height: var(--unitHeight);
    line-height: var(--unitHeight);
    min-height: 30px;
}

.title .floatLeft {
    float: left;
}

.title .tool {
    float: right;
    height: var(--unitHeight);
    line-height: var(--unitHeight);
    min-height: 35px;
}

/* 查詢結果頁碼樣式 */
.title #pager {
    float: left;
    line-height: var(--unitHeight);
    height: var(--unitHeight);
    min-height: 30px;
    
    background: #fff;
    -webkit-user-select:none;
    -moz-user-select:none;
    -o-user-select:none;
    user-select:none;
}

.title #pager #pagination {
    display: inline-block;
    height: 18px;
    margin-right: 5px;
}


.title #pager span {
    display: inline-block;
    background-color: #034744;
    color: #fff;
    height: 30px;
    line-height: 30px;
    border-radius: 4px;
    padding: 0 6px;
}

.title .clearFloat,
.tab-title .clearFloat{
    clear: both;
}

.gridContainer {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.table{
    width: 100%;
    border-spacing: 0px;
}

.table thead tr th {
    position: sticky;
    line-height: var(--unitHeight);
    height: var(--unitHeight);
    top: max(calc(var(--unitHeight)*2 + var(--screenPadding) + 10px), 75px + var(--screenPadding));
	color: black;
	background-color: #fff;
	font-weight: bold;
    padding: 2px;
    margin-right: 0px;
    border-bottom: 3px solid #034744;
}

.table thead tr th .dividingLine {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 60%;
    border-right: 1px solid #034744;
}

.table thead tr th:last-child .dividingLine {
    border: none;
}

.table tr td {
    line-height: var(--unitHeight);
    height: var(--unitHeight);
    padding: 0 5px;
    border: 1px solid #034744;
    border-width: 0 1px 1px 0;
    white-space: nowrap;
}

.table tr td:nth-last-child(1) {
    border-right-width: 0;
}

.table tr td input[type="text"] {
    width: 100%;
    height: 35px;
    line-height: 35px;
    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid #cccccc;
    outline: none;
    margin: 5px 0;
    padding: 0 5px;
}

.twentyPercentWidth {
    width: 20%;
}

.twentyFivePercentWidth{
    width: 25%;
}

.thirtyPercentWidth {
    width: 30%;
}

.fiftyPercentWidth{
    width: 50%;
}


.modifyWordColor {
    color: green;
}

/* Tab分頁 */
.tabContainer > input[type="radio"] {
    display: none;
}

.tab-title {
    position: sticky;
    padding: 5px 0;
    z-index: 10;
    top: max(calc(var(--unitHeight) + var(--screenPadding)), 30px + var(--screenPadding));
    right: 10px;
    left: 10px;
    background: #fff;
}

.tabContainer .tab-title .tool {
    float: right;
    height: var(--unitHeight);
    line-height: var(--unitHeight);
    min-height: 35px;
}

.tabContainer .tab-title .tab-bar {
    float: left;
    border-bottom: 1px #e8e8e8 solid;
    /*
    height: var(--unitHeight);
    line-height: var(--unitHeight);
    */
    min-height: 30px;
}

.tabContainer .tab-title .tab-bar .tab-name {
    font-size: 13pt;
    font-weight: bold;
    margin: 0 20px 0 5px;
    height: var(--unitHeight);
    line-height: var(--unitHeight);
    display: inline-flex;
    float: left;
    cursor: pointer;
    min-height: 30px;
}

.tabContainer .tab-title .tab-bar .tab-name:hover {
    border-bottom: 3px #e8e8e8 solid;
}

#first:checked ~ .tab-title .tab-bar .first,
#second:checked ~ .tab-title .tab-bar .second,
#third:checked ~ .tab-title .tab-bar .third,
#fourth:checked ~ .tab-title .tab-bar .fourth,
#fifth:checked ~ .tab-title .tab-bar .fifth,
#sixth:checked ~ .tab-title .tab-bar .sixth,
#seventh:checked ~ .tab-title .tab-bar .seventh,
#eighth:checked ~ .tab-title .tab-bar .eighth,
#ninth:checked ~ .tab-title .tab-bar .ninth,
#tenth:checked ~ .tab-title .tab-bar .tenth {
    color: #034744;
    border-bottom: 3px #034744 solid;
    transition: all 0.3s ease;
}

.tabContainer .content-block .tab-content {
    display: none;
}

#first:checked ~ .content-block .first,
#second:checked ~ .content-block .second,
#third:checked ~ .content-block .third,
#fourth:checked ~ .content-block .fourth,
#fifth:checked ~ .content-block .fifth,
#sixth:checked ~ .content-block .sixth,
#seventh:checked ~ .content-block .seventh,
#eighth:checked ~ .content-block .eighth,
#ninth:checked ~ .content-block .ninth,
#tenth:checked ~ .content-block .tenth {
    display: block;
}


.content-block .tab-content img {
    width: 60%;
}

.formulaTable img {
    width: 20px !important;
}

.indexBG img {
    width: 100%;
}


/* 輔助視窗 */
.helpWindowBackground {
    display: none;
    position: absolute;
    z-index: 100;
    left: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    
}

.helpWindow {
    background-color: white;
    margin: 1px;
    padding: 20px;
    border: 1px solid #034744;
    height: 50%;
    width: 50%;
    border-radius: 5px;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

/*For F0009(欄位多加大視窗)*/
.helpWindow2 {
    background-color: white;
    margin: 1px;
    padding: 20px;
    border: 1px solid #034744;
    height: 80%;
    width: 80%;
    border-radius: 5px;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.helpWindowLoad {
    width: 100%;
    height: 100%;
    border: 0;
}

.helpButton {
    align-items: center;
    color: #fff;
    background-color: #034744;
    border: 1px solid #034744;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    height: 30px;
    width: auto;
    margin: 0;
    padding: 0 6px;
    text-decoration: none;
    transition: all 250ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: baseline;
}

.helpButton:hover,
.helpButton:focus {
    border-color: #034744;
    box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
}

.helpButton:hover {
    transform: translateY(-1px);
}

/* 查詢條件 */
.searchTable {
    width: 100%;
}

.searchTable td {
    vertical-align: top;
    padding: 5px 0;
    width: 50%;
}

.searchTable tr td:nth-child(2) {
    padding-left: 8px;
}

.searchTable td input{
    width: 100%;
    height: 35px;
    line-height: 35px;
    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid #5D7273;
    outline: none;
    margin: 5px 0 0 0;
    padding: 0 5px;
}

.searchTable td input[type="radio"]{
    width: auto;
    vertical-align: middle;
    margin: 5px;
}

.searchTable td input[type="checkbox"]{
    width: auto;
}

.searchTable td select {
    width: 100%;
    height: 35px;
    line-height: 35px;
    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid #5D7273;
    outline: none;
    margin: 5px 0 0 0;
    padding: 0 5px;
}

.searchTable td > span {
    font-size: 10pt;
    color: #034744;
    vertical-align: top;
}

.searchTable td .toggle-switchy {
    margin: 5px 0 0 0;
}


/* button CSS */
.button {
    align-items: center;
    color: #fff;
    background-color: #034744;
    border: 1px solid #034744;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    height: 30px;
    width: auto;
    margin: 0;
    padding: 0 6px;
    text-decoration: none;
    transition: all 250ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: baseline;
}

.button:hover,
.button:focus {
    border-color: #034744;
    box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
}

.button:hover {
    transform: translateY(-1px);
}


.buttonOk {
    align-items: center;
    color: #fff;
    background-color: #86A614;
    border: 0px solid #034744;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    height: 30px;
    width: auto;
    margin: 0;
    padding: 0 6px;
    text-decoration: none;
    transition: all 250ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: baseline;
}

.buttonOk:hover,
.buttonOk:focus {
    border-color: #86A614;
    box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
}

.buttonOk:hover {
    transform: translateY(-1px);
}



.buttonNg {
    align-items: center;
    color: #000;
    border: 0px;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
    box-sizing: border-box;
    cursor: pointer;
    justify-content: center;
    height: 30px;
    width: auto;
    margin: 0;
    padding: 0 6px;
    text-decoration: none;
    transition: all 250ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: baseline;
}

.buttonNg:hover,
.buttonNg:focus {
    border-color: #BFAE56;
    box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
}

.buttonNg:hover {
    transform: translateY(-1px);
}


.mainTable {
    width: 70%;
	margin-left: auto;
	margin-right: auto;
}

.mainTable tr td {
    padding: 0 10px 10px 0;
	align-items: center;
}


.mainTable button {
    align-items: center;
    color: #000;
	font-size: 14px;
    height: 32px;
    width: 140px;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
	border-bottom-style:solid;
    border-bottom-width:1px;
    background: #FFFFFF;

    margin: 0;
    padding: 0 6px;
    text-decoration: none;
    transition: all 250ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: baseline;
}

.mainTable button:hover,
.mainTable button:focus {
    border-color: #86A614;

}

.mainTable button:hover {
    transform: translateY(-1px);
}
/*
.buttonMain1 {
	background-image: linear-gradient(to right bottom, #EDBE9C, #ED7D31);
}
.buttonMain2 {
	background-image: linear-gradient(to right bottom, #A6C5D9, #1569A7);
}
.buttonMain3 {
	background-image: linear-gradient(to right bottom, #C7DDBD, #70AD47);
}
.buttonMain4 {
	background-image: linear-gradient(to right bottom, #E9D491, #E2A805);
}
.buttonMain5 {
	background-image: linear-gradient(to right bottom, #ABD6F3, #37A3F4);
}
*/



/* 匯入檔案 */
.uploadFile {
    width: 100%;
    border-radius: 5px;
    padding-top: 5px;
}

.uploadFile form {
    height: 170px;
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 5px;
    border: 2px dashed #e3e3e3;
}

.uploadFile form.active {
    border: 2px dashed #028c6a;
}

.uploadFile form i {
    font-size: 50px;
    color: #028c6a;
}

.uploadFile form i img {
    width: 50px;
}

.uploadFile form p {
    font-size: 16px;
    margin-top: 15px;
    color: #028c6a;
}

.uploaded-area li, 
.uploading-area li {
    list-style: none;
    display: flex;
    margin-bottom: -20px;
}

.uploaded-area li .row, 
.uploading-area li .row {
    /*background: #034744;*/
/*    margin-top: 10px;*/
    padding: 15px 20px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    float: left;
    width: 100%;
}

.uploading-area li > i, 
.uploaded-area li > i {
    font-size: 25px;
    color: #CCF779;
    padding: 13px 0 0 5px;
    margin: auto;
    cursor: pointer;
}

.uploading-area li > i img, 
.uploaded-area li > i img {
    width: 25px;
}

.uploaded-area li .row .content, 
.uploading-area li .row .content {
    display: flex;
    align-items: center;
}

.uploaded-area li .row .content i, 
.uploading-area li .row .content i {
    font-size: 30px;
    color: #5D7273;
    padding-top: 5px;
}

.uploaded-area li .row .content i img, 
.uploading-area li .row .content i img {
    width: 30px;
}

.content .details {
    display: flex;
    margin-left: 15px;
    flex-direction: column;
}

.content .details .name {
    font-size: 14px;
    color: black;
}

.content .details .size {
    font-size: 11px;
    color: #404040;
}

.uploaded-area .row i, 
.uploading-area .row i {
    font-size: 30px;
    color: #028c6a;
}


/* 排序的table */
.sortableTableContainer {
    margin: 20px 0;
}

.sortableTableContainer > div {
    border-bottom: 1px solid #cccccc;
    padding: 5px 0;
}

.sortableTableContainer > span, 
.sortableTableContainer div > span {
    font-size: 13pt;
    font-weight: bold;
}

.sortableTableContainer button {
    height: 25px;
    background-color: #034744;
    color: #fff;
    border-color: #034744;
}

.sortableTable {
    width: 100%;
    margin-top: 5px;
    border-spacing: 0;
}

.sortableTable tr td {
    padding: 0 5px 5px 0;
    width: 33%;
}

.sortableTable tr td:first-child:nth-last-child(2) {
    width: 99%;
}

.sortableTable tr td:nth-child(2):nth-last-child(2){
    width: 66%;
}

.sortableTable tr td:nth-last-child(1) {
    width: 1%;
}

.sortableTable tr td > i {
    font-size: 20px;
    color: #CCF779;
    vertical-align: middle;
    cursor: pointer;
}

.sortableTable tr td > i img {
    width: 20px;
}

.sortableTable tr td input{
    width: 100%;
    height: 35px;
    line-height: 35px;
    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid #5D7273;
    outline: none;
    padding: 0 5px;
    margin: 5px 0;
}

.sortableTable thead tr th {
    position: relative;
    line-height: var(--unitHeight);
    height: var(--unitHeight);
    font-weight: bold;
    text-align: left;
    background-color: #fff;
    color: black;
    padding: 2px 5px;
    border-bottom: 3px solid #034744;
}

.sortableTable thead tr th .dividingLine {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 60%;
    border-right: 1px solid #dddddd;
}

.sortableTable thead tr th:last-child .dividingLine {
    border: none;
}

.sortableTable .sortable tr td {
    line-height: var(--unitHeight);
    height: var(--unitHeight);
    padding: 0 5px;
    border: 1px solid #034744;
    border-width: 0 0 1px 0;
}

/* 多選 */
.multiSelectContainer {
    margin: 10px 0;
}

.multiSelectContainer > p:first-child{
    font-weight: bold;
    padding-bottom: 5px;
}


/* 公式設定 */
.formulaTable {
    width: 100%;
    margin: 10px 0;
}

.formulaTable tr td {
    padding: 5px 5px 5px 0;
    width: 33%;
}

.formulaTable tr td:nth-last-child(1) {
    width: 1%;
}

.formulaTable tr:first-child td {
    border-bottom: 1px solid #cccccc;
    font-size: 13pt;
    font-weight: bold;
}

.formulaTable tr:nth-child(2) td {
    font-size: 12pt;
    font-weight: bold;
}

.formulaTable td button {
    height: 20px;
}

.formulaTable td input{
    width: 100%;
    height: 35px;
    line-height: 35px;
    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid #cccccc;
    outline: none;
    padding: 0 5px;
}

.formulaTable td i {
    font-size: 20px;
    color: #CCF779;
    cursor: pointer;
}


/* 輔助視窗的查詢結果不固定欄位名稱 */
.notFixed {
    padding-top: 10px
}

@media screen and (max-width: 400px){
    
    .loginTable td {
        display: block;
    }
    .bodyMinWidth {
        min-width: 0;
    }
    
    .searchTable td {
        display: block;
        width: 100%;
        padding: 0;
    }
    
    .title p {
        padding-left: var(--unitWidth);
    }
    
    #result .title .tool {
        float: none;
    }
    
    .tab-title {
        position: sticky;
        padding: 5px 0 0 0;
        z-index: 10;
        right: 10px;
        left: 10px;
        background: #fff;
    }
    
    .tabContainer .tab-title .tool {
        float: left;
    }
    
    .tabContainer .tab-title .tab-bar {
        clear: both;
    }

}