: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;
    }
}

.table {
  th,
  td {
    border-top: 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('../mp-utility-0.1.0/images/cbm_login_bg.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(../mp-utility-0.1.0/images/icons/user-solid.png) no-repeat 7px 10px;
}

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

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

.loginTable td input[type="password"] {
    background: url(../mp-utility-0.1.0/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: #265902;
    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.no-paddingbottom {
    padding-bottom: 0;
}

.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 .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 #265902;
}

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

.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 #265902;
    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 !important;
    cursor: pointer !important;
    text-decoration:underline !important;
}

/* 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: #003e19;
    border-bottom: 3px #003e19 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 #044019;
    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 #044019;
    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: #265902;
    border: 1px solid #044019;
    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: #265902;
    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: #00682F;
    vertical-align: top;
}

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


/* button CSS */
.button {
    align-items: center;
    color: #fff;
    background-color: #265902;
    border: 1px solid #044019;
    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: #265902;
    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 #044019;
    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: #265902;*/
/*    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: #375623;
    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: #265902;
    color: #fff;
    border-color: #044019;
}

.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: #375623;
    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 #003e19;
}

.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 #265902;
    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: #375623;
    cursor: pointer;
}

@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;
    }
}

	img[class^="jqZoomImg"] {
	    cursor: pointer;
	    cursor: -webkit-zoom-in;
	    cursor: zoom-in
	}
	
	.k-grid .k-table-th {
	    border-block-end-width: 1px;
	    white-space: nowrap;
	    justify-content: center !important;
	          text-align: center !important; 
	}
	
	.k-searchbox.k-input.k-input-md.k-rounded-md.k-input-solid.k-grid-search {
		width: 300px;
	}
	
	.k-column-title {
		font-weight: bold
	}
	
	.k-grid .k-table-tbody > .k-table-row:not(.k-detail-row):hover,
	.k-grid .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover {
	    background-color: #cfe8d3;
	}
	
	.k-grid-content .k-table-row:last-child > td,
	.k-grid-content .k-table-row:last-child > .k-table-td,
	.k-grid-content-locked .k-table-row:last-child > td,
	.k-grid-content-locked .k-table-row:last-child > .k-table-td {
	    border-bottom-width: 1px;
	}
	
	.k-grid td.k-selected,
	.k-grid .k-table-row.k-selected > td,
	.k-grid .k-table-td.k-selected,
	.k-grid .k-table-row.k-selected > .k-table-td {
	    background-color: rgba(134, 166, 20);
	}
	
	.k-pager-info {display: flex;background-color: rgb(38, 89, 2);color: rgb(255, 255, 255);border-radius: 4px;padding: 0px 6px;line-height: 30px;flex: 0; margin-left: auto;}

	.k-no-data{
       display: table;
       min-height: 40px;
       width: 100%;
       padding: 5px;
       text-align: left;
     }
     
     .file-icon {
         display: inline-block;
         width: 30px;
         height: 30px;
         margin-left: 10px;
         margin-top: 13.5px;
     }
     
     .checkbox-cell {
      text-align: center !important; 
      padding: 0 !important;    
    }  
    
     .checkbox-header-cell {      
      text-align: center !important; 
      padding: 0 !important;
    }
    .checkbox-header-cell .k-checkbox-label:before {
      margin-top: -12px  !important;

    }
    
    	/* Kendo Upload ui for ExternalDropZoneUploader */
       .k-external-dropzone-500px{
       		width: 500px;
        } 
        
        .uploadImg{
		    vertical-align: middle; /* 垂直對齊到文字中間 */
		    padding-bottom: 5px;
		    margin-right: 10px;      /* 與文字的間距 */
		    width: 50px;            /* 如果需要，定義圖片大小 */
		    height: auto;           /* 保持圖片比例 */
        }
        .k-external-dropzone {
        	cursor: pointer;
        }
        .uploadTag {
         margin-bottom: var(--kendo-spacing-2, .5rem);
		    font-size: 11pt;
		    color: #00682F;
		    text-align:center;
		}
		
		.k-dropzone-note a {
			text-decoration:underline !important;
		}
		
		.upload-wrapper,
		.fileselect-wrapper {
		  display: flex;
		  flex-direction: column;
		}
		
		.k-external-dropzone {
		    height: calc(220px * 0.75);
		    display: flex;
		    flex-flow: row nowrap;
		}
		
		[class*="k-external-dropzone"] .k-upload,
		[class*="k-external-dropzone"] .k-upload-files {
		    border: 0;
		}
		
		[class*="k-external-dropzone"] div.k-dropzone ,[class*="k-external-dropzone"] div.k-upload-dropzone {
		    display: none !important;
		}
		
       .dropzone-hint{
       	margin-bottom: var(--kendo-spacing-2, .5rem);
	    font-size: 16px;
	    margin-top: 15px;
	    color: #028c6a;
       }
       
       .k-dropzone-hint.k-hidden {
		    display: block !important;
		}
       
	    .colored-icon-green {
	        color: #265902;
	        vertical-align: middle;
	    }
	    
	    .k-icon-16 {
	        font-size: 16px; /* Sets icon size to 16px */
	    }
	    
	    .k-icon-25 {
	        font-size: 25px; /* Sets icon size to 25px */
	    }
	    
	    .k-icon-32 {
	        font-size: 32px; /* Sets icon size to 32px */
	    }