/**==[ 10管理系統通用 Area Css ]==**/

/**===[ Dom & Area ]=== - 系統區域設定 **/

body{ 
  background:#eee; 
  padding-top: 54px;
}

  div.system_main_area{
    position:relative;
	z-index:1;
	height:100%;
	min-height:100%;
  }
    
  /*** 系統預設區塊 ***/
  
  div.system_message_area{
    position:fixed;
	z-index:100;
	left:30px;
	right:30px;
	top:0px;
	opacity:0.8;
	font-size:15px;
	display:none;
  }
    div.alert{ background-color:#47885e;}	
	div.error{ background-color:#c53d43;}
	
    div.message_block{
	  position:relative;
	  padding:10px 15px;
	  color:#FFFFFF;
	  height:25px;
	  line-height:25px;
	  height:100%;
	  text-align:center;
	}
  
      div.msg_title{  font-weight:bold; }
	  div.msg_info{   }
	  
	
  
  div.system_loading_area{
    z-index:120;
    display:none;
    position:fixed;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	background-color:rgba(0,0,0,0.6);
	text-align:center;
  }
    div.loading_block{
	  color:#FFFFFF;
	  position:absolute;
	  width:250px;
	  left:50%;
	  margin-left:-125px;
	  top:40%;
	}
	  div.loading_string{
	    
	  }
	  div.loading_image{
		padding:5px;
	  }
	  div.loading_info{
	    opacity:0;
	  }
	  
	  div.loading_info{
	    margin:10px 0;
		font-size:14px;
		color:#dcdddd;
	    line-height:18px;
	  }
  
     
  /* 影像loading */
  #svg_loading{ display:none;}
	 
	  
  /* feedback dom*/	  

div.system_feedback_area{
    z-index:110;
	position:fixed;
	width:650px;
	height:690px;
	left:50%;
	top:100px;
	margin-left:-300px;
	border-radius:8px;
    font-size:14px;
    color:#000000;
	box-shadow:0px 1px 7px rgba(65, 50, 50, 0.79);
	display:none;  
  }	
    
  div.feedback_block{
    width:100%;
	height:100%;
    background-color:#ee827c;
	border-radius:8px;
  }	
	
	
	div.feedback_header{
	  padding:10px;
	}
	  span.fbh_title{  font-weight:bold; color:#ffffff;}
      a.fbh_option{ display:inline-block;  float:right; cursor:pointer;}
	
	
	div.feedback_body{
	  position:relative;
	}
	
	  div.fb_imgload{
	    width:100%;
		position:absolute;
		top:100px;
		text-align:center;
	    color:#eb6238;
	    font-size:13px;
		display:none;
	  }
	  
	  div.fb_preview{ 
	    margin:0 20px 10px;
		border:1px #888888 solid;
		background-color:#cdcdcd;
		height:340px;
		overflow:hidden;
		border-radius:5px;
		display:flex;
		align-items:center;
		justify-content:space-around;
	  }
	  
	    img.fp_img{ height:99%; }
        img.fp_img_w{ width:99%; }
		
		
	  div.fb_areasel{
	    text-align:center;
		color:#583822;
	  }
	    input#feedback_img_upload{  width:200px;}
	  
	  
	  
	  div.fb_descrip{
	    margin:10px 25px;
	  }
	    div.fb_descrip div{  padding:5px 0;}
    	
		.fbd_title{ font-weight:bold; }
		
		input.fbd_type_other{  
		  background-color:rgba(255,255,255,0);
		  border:0px #FFFFFF solid;
		  border-bottom:1px #444444 dotted;
		  width:100px;
		}
		
		
		
		textarea.feedback_content{
		  border:1px #CDCDCD dotted;
		  width:100%;
		  line-height:1.5em;
		  height:10em;
		  color:#007bbb;
		  resize: none;		  
		}
		
		
	div.feedback_bottom{
	  position:relative;
	  display:flex;
	  align-items:center;
	  justify-content:space-between;
	  margin:0 25px;
	}  	
		.captcha{
			display:inline-flex;
			align-items:center;
			justify-content:center;
		}
		
		#captcha_inputf{width:90px; height:35px; border:0; text-align:center; font-size:1.8em; font-weight:bold;}
		#captchaf{height:35px;width:70px;}
		.captcha > a{color:green;}
		
	    a.btn_feedback{
			margin-left:10px;
		}
		
		a#act_feedback_cancel{
		  color:#a73836;
		}  
		
		
		a#act_feedback_submit{
		  
		  color:#769164;
		}
		  span.btmark{
		    position:relative;
			top:3px;
		  }
		  
		#act_feedback_close{color:#ffffff;}  
	
  .sysbtn{
    display:inline-flex;
	font-size:0.9em;
	font-weight:bold;
	align-items:center;
	justify-content:space-around;
	height:25px;
	padding:3px 5px;
	min-width:50px;
    text-align:center;
	cursor:pointer;
	border-radius:3px;
	color:#757575;
	border:1px #AAAAAA solid;
	background-color:#e5e4e6;
	background: linear-gradient(to bottom, rgba(242,242,242,1) 41%,rgba(206,206,206,1) 100%); /* W3C */
  }
  
  .sysbtn:hover{
	color:#444444;
	background: rgb(239,239,239); /* Old browsers */
	background: linear-gradient(to bottom, rgba(239,239,239,1) 41%,rgba(186,186,186,1) 100%); /* W3C */
  }
  
  .sysbtn:active{
	box-shadow:inset 0px 0px 2px #949495;
  }
  
    .btn_plus{
	  min-width:16px;
      min-height:16px;	
	  line-height:16px;	
      font-size:20px;
	  font-weight:900;
	  text-shadow:0px 0px 3px #7b7c7d;
	}
		  
	.btn_plus:hover{
	  color:#444444;
	  text-shadow:0px 0px 3px #444444;
	}
		  
    .btn_act{
	  min-width:35px;
      height:20px;
	  line-height:20px;	
	}
	
	.btn_login{
	  min-width:100px;
	}
	
	.btn_feedback{
	  min-width:100px;
	  height:35px;
	  line-height:35px;	
	}
	
	.btn_fbop{
	  min-width:80px;
	  height:40px;
	  line-height:40px;	
	}
	
	.btn_mark{
	  position:relative;
	  width:16px;
	  height:16px;
	  display:block;
	  margin:0 auto;
	}
	
	.mark30{
      display:inline-block;
	  width:30px;
	  height:30px;  
	  vertical-align:middle; 
	  content:" ";
    }
	
    .mark26{
      display:inline-block;
	  width:26px;
	  height:26px;  
	  vertical-align:middle; 
	  content:" ";
    }  
  
    .mark16{
      display:inline-block;
	  vertical-align:middle; 
	  width:16px;
	  height:16px;  
    } 
	
	.btn_activate{
	  background-color:red;
	}
	
	/*[ SYSTEM HEADER AREA ] : top side */
	div.system_header_area{
	  position:fixed;	
	  top:0; left:0; right:0;
	  padding:10px 0;
      height:54px;
      z-index:5;
      display:flex;
      align-items:center;
	  background-color:#ffffff;
	  box-shadow:0 0 10px -1px rgba(0,0,0,0.3);
	}
	
	  .header_brand{
		flex:0 0 250px;
		display:flex;
		align-items:center;
		padding:0 15px;
	  }
		.manual_switch{
		  flex:0 0 32px;
          font-size:2em;		  
		}
		
	    .system_title{
	      flex:1;
		  text-align:left;
		  vertical-align:middle;
	      padding-left:20px;
		}
	      .mark_title_word{   font-size:20px; font-weight:bold;  margin-bottom:5px;}
	      .mark_version_word{  font-size:10px;  } 

		
		
	  .top_block{
		flex:1;   
	    position:relative;
		display:flex;
		align-items:center;
		padding:0 30px;
	  }
	    
		ol.system_breadcrumbs{
		  flex:1 1 200px;
		  display:inline-block;
		  line-height:16px;
		  font-size:14px;
		  overflow:hidden;
		  white-space:nowrap;
		}
		  li.breadcrumb{
			display:inline-block;
			text-align:center;
			vertical-align:middle;
			padding-right:6px;
		  }
		  li.breadcrumb+li:before{
			display:inline-block;
            width:20px;
            text-align:center;			
			content: "/";
			position:relative;
			top:-1px;
          }
		  
		  li.breadcrumb a{color:#7b7c7d;}
		
		
		span#system_alert{}
		span#system_setting{}
        span#system_search{ }
		
		div.system_announcement{
		  flex:1;	
		}
		
		
		div.system_function{
		  display:flex;
		}
		  
		#system_notification_module{
		  flex:0 0 40px;
		  position:relative;
		  margin-right:20px;
		}
		  .notice_mark{
			position:relative;  
			display:inline-flex;
            align-items:center;			
			width:30px; height:30px;  
			border-radius:15px;
			background-color:#eee;
			justify-content:space-around;
			cursor:pointer;
		  }
		  .notice_mark:hover > i{ color:#AAAAAA;}
		  .notice_mark:active{ box-shadow:0 0 7px -1px rgba(0,0,0,0.3);}
		  .notice_mark > i{color:#7b7c7d;font-size:1.8em;}
		  .notice_mark::after{
			position:absolute; top:-5px; left:-7px;
			display:inline-block;
			width:16px; height:16px; border-radius:8px;
            line-height:18px;
			text-align:center;
			background-color:#c75757; 			
			content:attr(notice);
		    font-size:8px;
			color:#ffffff;
			font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
			opacity:1; 
			transition: all 0.2s ease-in-out;
		  }
		  .notice_mark[notice='0']::after{
			opacity:0; 
			transform:scale(2);
			transition: all 0.2s ease-in-out;
		  }
		  
		  
		  #system_notification_module[viewed='1'] .notice_block{
			display:block;  
		  }
		  
		  .notice_block{
			position:absolute; top:49px; right:-240px;
			width:300px;
			height:423px;
			background-color:#ffffff;
		    border:1px #cdcdcd solid;
			font-size:0.9em;
			display:none;
		  }
		  .notice_block:after, .notice_block:before {
			bottom: 100%;
			left: 11.5%;
			border: solid transparent;
			content: " ";
			height: 0;
			width: 0;
			position: absolute;
			pointer-events: none;
		  }
		  .notice_block:after {
			border-color: rgba(186, 186, 186, 0);
			border-bottom-color: #ffffff;
			border-width: 10px;
			margin-left: -10px;
		  }
		  .notice_block:before {
			border-color: rgba(150, 150, 150, 0);
			border-bottom-color: #cdcdcd;
			border-width: 12px;
			margin-left: -12px;
			right: 0.5%;
		  }
		  
		  .notice_block > .container > *{
			padding-left:10px;
			padding-right:10px;
		  }
		  .notice_block  header{ 
		    position:relative;
			border-bottom:1px #cdcdcd solid;
			padding-top:15px;
			padding-bottom:15px;
		  }
		  .notice_block h1{}
		    #notice_update{
			  position:absolute;	
			  right:10px;
              top:10px;
              font-size:0.8em;	
              color:#00bfff;			  
			}
		  
		  #system_notification_module #notice_update > i{opacity:1;}
		  #system_notification_module[loading='0']  #notice_update > i{ opacity:0; transition: all 1s ease-in-out; }
		  #system_notification_module[loading='1']  #notice_update > i{ animation: lds-dual-ring 1.3s linear infinite;}
		  
		  .notice_block ul{
			margin:10px 0;
			height:calc(100% - 110px);  
			overflow:auto;
		  }
		  
		  .notice_block ul li{
			padding-bottom:5px;  
			margin-bottom:5px;
			border-bottom:0.8px #cdcdcd dotted;  
		  }
		  
		  .notice_record{}
		  .notice_record.fadeout{
			opacity:0; 
			transition: all 0.2s ease-in-out;
		  }
	   
		  .notice_block ul li.format{
			display:none;  
		  }
		  
		  .notice_block ul li h2{
			display:flex;
			align-items:center;
			justify-content:space-between;
			padding-bottom:5px;
		  }
		    .ntype{
			  background-color:#eec362;
			  border-radius:3px;
			  padding:5px;
			}
			.ntime{
			  font-size:0.8em;	
			}
		  
		  .notice_block ul li p{
            color:#595857;   			
		  }
		  
		  .notice_block footer{
			border-top:1px #cdcdcd solid;
			height:45px;
			display:flex;
            align-items:center;
            justify-content:space-between;  			
			background-color:#f3f3f2; 
		  }
		
		
		
		#system_backgroundtask_module{
		  position:relative;
		  margin-right:35px;
		  flex:0 0 300px;
		}
		  .task_mark{
			position:relative;  
			display:inline-flex;
            align-items:center;			
			width:30px; height:30px;  
			border-radius:15px;
			background-color:#eee;
			justify-content:space-around;
			cursor:pointer;
		  }
		  .task_mark:hover > i{ color:#AAAAAA;}
		  .task_mark:active{ box-shadow:0 0 7px -1px rgba(0,0,0,0.3);}
		  .task_mark > i{color:#7b7c7d;font-size:1.8em;}
		  .task_mark::after{
			position:absolute; top:-5px; left:-7px;
			display:inline-block;
			width:16px; height:16px; border-radius:8px;
            line-height:18px;
			text-align:center;
			background-color:#c75757; 			
			content:attr(notice);
		    font-size:8px;
			color:#ffffff;
			font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
			opacity:1; 
			transition: all 0.2s ease-in-out;
		  }
		  .task_mark[notice='0']::after{
			opacity:0; 
			transform:scale(2);
			transition: all 0.2s ease-in-out;
		  }
		  
		  
		  #system_backgroundtask_module[viewed='1'] .task_block{
			display:block;  
		  }
		  
		  .task_last{
			flex:1;  
			margin:0 5px;
			font-size:0.85em;
			position:relative;
		  }
		  .task_info{
			color:#626063;
		    border-radius:5px;
			 
		  }
		  .done_time{
			position:absolute;
			bottom:-1.1em;
			margin-top:3px; font-size:0.8em; color:#9fa09e;
			display:none;
			
		  }
		  
		  .task_block{
			position:absolute;  top:49px; right:-5px;
			width:300px;
			height:423px;
			background-color:#ffffff;
		    border:1px #cdcdcd solid;
			font-size:0.9em;
			display:none;
		  }
		  .task_block:after, .task_block:before {
			bottom: 100%;
			right: 3%;
			border: solid transparent;
			content: " ";
			height: 0;
			width: 0;
			position: absolute;
			pointer-events: none;
		  }
		  .task_block:after {
			border-color: rgba(186, 186, 186, 0);
			border-bottom-color: #ffffff;
			border-width: 10px;
			margin-left: -10px;
		  }
		  .task_block:before {
			border-color: rgba(150, 150, 150, 0);
			border-bottom-color: #cdcdcd;
			border-width: 12px;
			margin-left: -12px;
			right: 2.5%;
		  }
		  
		  .task_block > .container > *{
			padding-left:10px;
			padding-right:10px;
		  }
		  .task_block  header{ 
		    position:relative;
			border-bottom:1px #cdcdcd solid;
			padding-top:15px;
			padding-bottom:15px;
		  }
		  .task_block h1{}
		    #task_update{
			  position:absolute;	
			  right:10px;
              top:10px;
              font-size:0.8em;	
              color:#00bfff;			  
			}
		  
		  #system_backgroundtask_module #task_update > i{opacity:1;}
		  #system_backgroundtask_module[loading='0']  #task_update > i{ opacity:0; transition: all 1s ease-in-out; }
		  #system_backgroundtask_module[loading='1']  #task_update > i{ animation: lds-dual-ring 1.3s linear infinite;}
		  
		  .task_block ul{
			margin:10px 0;
			height:calc(100% - 110px);  
			overflow:auto;
		  }
		  
		  .task_block ul li{
			padding-bottom:5px;  
			margin-bottom:5px;
			border-bottom:0.8px #cdcdcd dotted;  
		  }
		  
		  .task_record{}
		  .task_record.fadeout{
			opacity:0; 
			transition: all 0.2s ease-in-out;
		  }
	   
		  .task_block ul li.format{
			display:none;  
		  }
		  
		  .task_block ul li h2{
			display:flex;
			align-items:center;
			padding-bottom:5px;
		  }
		    .ctype{
			  background-color:#eec362;
			  border-radius:3px;
			  padding:5px;
			}
			.ctime{
			  flex:1;	
			  margin-left:5px;
			  font-size:0.8em;	
			}
			.cexec > i {display:none; font-size:1.2em;}
			.task_record[status='REGIST']  .cexec > i.regist{display:inline-block; color:#636363;}
			.task_record[status='ACTIVE']  .cexec > i.active{display:inline-block; color:#0075c2; animation: lds-dual-ring 1.3s linear infinite;}
			.task_record[status='FINISH']  .cexec > i.finish{display:inline-block; color:#65ab31;}
			.task_record[status='ERROR']   .cexec > i.error{display:inline-block; color:#d70035;}
			
		    .task_record p.cdescrip{ color:#595857; }
			.task_record p.cresult{  color:#0075c2; display:none; }
			
			.task_record progress{  position:relative; width:100%; display:none; }
			.task_record progress::before{
			  position:absolute;
              content:attr(value);	
              right:1em;			  
			}
			.task_record progress::after{
			  position:absolute;
              content:"%";	
              right:0;			  
			}
			
			.task_record[status='ACTIVE'] progress{display:block;}
			.task_record[status='FINISH'] p.cresult{display:block;}
			.task_record[status='ERROR']  p.cresult{display:block; color:red;}
			
		  
		  .task_block footer{
			border-top:1px #cdcdcd solid;
			height:45px;
			display:flex;
            align-items:center;
            justify-content:space-between;  			
			background-color:#f3f3f2; 
		  }
		 
		
		
        div.system_account{ 
		  flex:0 0 230px;
		  position:relative; 
		}
          
		  div.account_info{ 
		    cursor:pointer;
		    display:inline-flex;
		    align-items:center;
		  }
		    
			span#acc_mark{
			  display:inline-block;  
			  width:30px; 
			  height:30px; 
			  text-align:center; 
			  background-color:#eee;
			  overflow:hidden;
			  position:relative;
			  border-radius:15px;
			  position:relative;
			 /* box-shadow:0 0 7px -1px rgba(0,0,0,0.3);*/
			}
			 
			  i.m_head{display:block;width:14px; height:14px; border-radius:7px; background-color:#7b7c7d;margin-left:8px;margin-top:4px;}
			  i.m_body{display:block;width:28px; height:28px; border-radius:14px; background-color:#7b7c7d;margin-left:1px;}
			span#acc_mark:hover > i{ background-color:#AAAAAA;} 
			
			span#acc_string{
			  margin:0 10px;
			  width:170px; 
			  display:inline-flex; 
			  flex-direction:column; 
			  justify-content:center; 
			
			}
			  i.acc_name{  display:block; font-weight:bold; font-size:18px; line-height:18px; margin-bottom:5px;color:#595857; }
			  i.acc_group{ display:block; font-size:10px; color:#595857; line-height:7px;padding-left:2px;}
			  
		    span#acc_option{ display:inline-block; }
			span#acc_option.open{
			  transform: rotate(0.5turn);
			  transition: all 0.3s ease-in-out;	
			}
			
		  
		  div.account_control{ 
		    width:240px; 
		    display:none;
			position:absolute;
		    z-index:100;
			top:50px;
		  }
	      
		  
		  .arrow_box {
			position: relative;
			background: #ffffff;
			border: 1px solid #cdcdcd;
		  }
		  .arrow_box:after, .arrow_box:before {
			bottom: 100%;
			left: 7%;
			border: solid transparent;
			content: " ";
			height: 0;
			width: 0;
			position: absolute;
			pointer-events: none;
		  }

		  .arrow_box:after {
			border-color: rgba(186, 186, 186, 0);
			border-bottom-color: #ffffff;
			border-width: 10px;
			margin-left: -10px;
		  }
		  .arrow_box:before {
			border-color: rgba(150, 150, 150, 0);
			border-bottom-color: #cdcdcd;
			border-width: 12px;
			margin-left: -12px;
		  }
		  
		    ul.acc_option_list{
			  min-height:100px;
			  line-height:30px;
			  font-size:13px;
			}
			  
			ul.acc_option_list > li{ margin:3px 5px; display:flex;  align-items:center;  }  
			ul.acc_option_list > li > label{ margin:0 5px; flex:0 0 50px;}
			ul.acc_option_list > li > label > i{min-width:15px; opacity:0.4;}
			ul.acc_option_list > li > *:not(label){flex:1; color:#7d7d7d;}
			ul.acc_option_list > li > span{ padding-left:5px;}
			
		    div.acc_option_final{
			  height:50px;
			  line-height:50px;
			  border-top:1px #CDCDCD solid;
			  background-color:#f3f3f2;
			  position:relative;
			}
		      span#acc_logout{
			    display:inline-block;
				padding:5px 6px;
				min-height:20px;
				line-height:20px;
			    cursor:pointer;
			    border:1px #cdcdcd solid;
				border-radius:3px;
				position:absolute;
				right:10px;
				top:10px;
				color:#7d7d7d;
				font-size:14px;
			  }
		      
		      span#acc_logout:hover{
			    background-color:#dcdddd;
			  }
	        
			ul.acc_option_test{
			  background-color:#e5c1cd;	
			  font-size:0.9em;
			}
			ul.acc_option_test > li{border-top:1px #9f166a solid; padding:5px;}
			ul.acc_option_test label{display:block;padding:5px 0;} 
			  .test_selecter *{ width:99%; background-color:rgba(255,255,255,0.7); border:1px #ffffff solid;}
			  .test_function{ display:flex; justify-content:flex-end; }
	  
	  
	  
	      #system_feedback_module{
			margin-left:20px;   
		  }
	        #act_feedback_option > i{
			  opacity:0.6;
			}
			#act_feedback_option:hover > i{
			  color:#ef857d;  
			  opacity:1;	
			}
			#act_feedback_option:active > i{
			  color:red;
              transform:scale(2);
			  transition: all 0.2s ease-in-out;			  
			  opacity:0;	
			}
	  
	/*[ SYSTEM MANUAL AREA ] : left side */
    div.system_manual_area{
	  position:fixed;
	  top:54px;
	  left:0;
	  height: calc(100vh - 55px); 
	  width:250px;
	  background-color:#2c2e2f;  
	  overflow-y:auto;
	  z-index:2;
	  color:#FFFFFF;
	}
	
	  div.manual_continer{
		width:250px;
        height:100%;	
        min-height:100%;		
		position:relative;  
		overflow-x:hidden;
	  }
	   
	  ul.main_manual{
	    
	  }
	  
	  @media (max-height: 760px){
        li.option_group > div.opgroup_name{display:none;} 
      }
	  
	  
	  ul.main_manual i{
		color:#e5e4e6;		   
	  }
	  
	  ul.main_manual span{
		margin-left:2em;  
	  }
	  
	    li.option_group{
		  
		}
	      div.opgroup_name{ 
		    padding:13px 20px;
            border-bottom:1px #383c3c solid;
            color:#47885e;
            font-weight:bold;
		    display:flex;
			align-items:center;
		  }
		  
		  ul.group_manuel{border-bottom:1px #383c3c solid;}
	      ul.group_manuel li{ 
		    padding:8px 5px 8px 20px; 
			position:relative; 
			display:flex;
		    align-items:center;
		  }
		  ul.group_manuel li > span{ 
		    position:absolute;
			left:2em;
			top:50%;
			margin-top:-0.5em;
		  }
	      ul.group_manuel li.inthis{ background-color:rgba(255,255,255,0.1);}
		    
			li.func_activate::after{
			  display:inline-flex;
			  justify-content:space-around;
			  align-items:center;
			  
              width:16px;  min-width:16px; height:16px; line-height:16px; 
              color:#FFFFFF; 
              background-color:#ec6d51; 
              border-radius:7px; 
              text-align:center; 
              font-size:12px;
              position:absolute;  top:3px;  left:10px;
			  content:attr(alert);
			}
			li.func_activate[alert='']::after,
			li.func_activate[alert='0']::after{
			  display:none;	
			}
			
			
			
			
			
			
			a.alert{
              display:inline-block;
              width:13px; height:13px; line-height:13px; 
              color:#FFFFFF; 
              background-color:#ec6d51; 
              border-radius:5px; 
              text-align:center; 
              font-size:12px;
              position:absolute; 
              bottom:6px;
              left:30px;
            }
			a.alert[num='0']{display:none;}
			._undo::after{
			  position:absolute;
              right:0;
              content:"coming soon..";	
              font-size:0.7em;	
              opacity:0.4;			  
			}
			
		  
			
		  ul.group_manuel li  i.material-icons{font-size:1.3em;}
		  ul.group_manuel li._undo{display:none;}
	   
			
	/*[ SYSTEM CONTENT AREA ] : right side */		
		  
	div.system_content_area{
	  min-width:800px;
	  width:calc(100% - 250px);
	  position: relative;
	  left:250px;
	  z-index:3;
	  background-color:#eee;
	  min-height:100%;
	}
	  
	div.wide_mode{
	  left:60px;
	  width:calc(100% - 60px);
	}
	div.full_mode{
	  left:0;
	  width:100%;
	}
	  
      div.pager_header{
	    padding:20px 30px;
		height:80px;
		min-height:80px;
		display:flex; 
        align-items:center;
	  }
	    
        /* 功能標題&說明 */
		div.module_topic{
		  flex:0 1 300px;
		  display:inline-flex;
		  flex-direction:column;		  
		  justify-content:space-between;
		  
		}
		  div.topic_title{ 
            font-weight:bold;
			font-size:1.3em;
			color:#000000;
		  }
		  div.topic_descrip{ 
		    font-size:15px;
            margin-top:5px;
			color:#595857;
		  }
      	
		
        /* 模組訊息區塊 */
		.module_information{
		  flex:1;	
		}
		
	    
        /* 模組功能區塊 */
		.module_function{
		  flex:0 1 300px;	
		  display:inline-flex;
		  justify-content:flex-end;
		  align-items:center;
		}
		 
		  ul.mdconfig{
			display:flex;
			flex-wrap:wrap;  
		  }
		    ul.mdconfig > li{
			  font-size:0.9em;	
			  display:inline-flex;
			  align-items:center;
			}  
		
		/* [ Mode Switch ] */ 
		  ul.mode_select{
			display:flex; 
			font-size:0.95em;
		  }
		  ul.mode_select > li{
			width:120px; 
			padding:8px 10px;
			border:0px #CDCDCD solid;
			border-bottom:2px #FFFFFF solid;
			text-align:center;
		  }
		  
		  ul.mode_select > li:nth-child(n+2){margin-left:-1px;}
		  li.mode_switch{cursor:pointer;opacity:0.4;}
		  li.mode_switch.atthis{ cursor:default;opacity:1; border-bottom:2px #CDCDCD solid;}
		
	
		 
	/*== [ 頁面主題  Record List 區塊  ] ==*/
	  
	  div.main_content{
	    position:relative;
	    margin:0 30px;
		min-height: calc(100% - 60px);
	  }
	  
	    div.data_record_block:nth-child(n+2){display:none;}
		
		div.data_record_block{
		  position:relative;
		  float:left;
		  width:100%;
		  padding:10px 30px 20px;
		  min-height:calc(100% - 20px); 
		  font-size:15px;
		  background-color:#ffffff;
		}

		
		 
	      div.record_header{
		    position:relative;
			height:50px;
			border-bottom: 2px solid #f5f5f5;
		  }		
		  div.record_header > *{
			height:100%;  
		  }
		  
	        .module_level{ 
			  display:inline-flex;
			  align-items:center;  
			}
			.module_level a.option{
			  text-decoration:underline;	
			  color:#4682b4;
			  opacity:1;
			}
			.module_level i.fa{
			  font-size:1.1em;
			  font-weight:bold;
              margin:0 5px 0 10px; 			  
			}
			
			  
			span.record_name{}
			i.meta_id{color:#2792c3;}
			
			
			
			span._return_list{
			  cursor:pointer;
			  text-decoration:underline;
			}
			
			span.record_filter,span.record_function{
			  position:absolute;
              right:0;	
              top:0;
              height:100%;			  
			  display:inline-flex;
			  align-items:center;
			}
			
			  .func_set{
				display:inline-flex;
				align-items:center;
				line-height: normal;
			  }
			  .func_set > label{padding-right:5px;}
			  .func_set > *{
				height:25px;  
			  }
			
			  
			  span.record_search_field{
				display:inline-block;
				position:relative;
			    display:inline-flex;
				align-items:center;
			  }
			  span.record_search_field > input[type='text']{ 
			    border-radius:3px 0 0 3px;  
				padding-left:5px;
			    height:30px;
			  }
			    button#act_record_search{
				  border-radius:0 3px 3px 0;
				  height:30px;
			    }
			
			span.record_target{ color:#007bbb; }
			span.record_target:before{ content:" / "; font-size:13px; color:#000000;}
			
			span.record_option{
			  display:inline-flex;
			  align-items:center;
			}
			span.record_option a.option{
			  padding-left:10px;
			}
	        
		   
		   
	    div.record_body{
		   
		}  
             		  
	      div.record_control{
		    position:relative;
			color:#979898;
			padding:18px 0;
			line-height:30px;
		  }
		    
			span.record_search{
			  position:absolute;
			  right:0;
			}
		    
			span.record_limit select , span.record_search input{
			  padding:5px;
			  border:1px #dcdddd solid;
			  color:#979898;
			  
			}
			
			span.record_pages{
			  position:absolute;
			  right:0;
			  display:inline-flex;
			  align-items:center;
			  user-select:none;
			  -moz-user-select: none;
			  -webkit-user-select: none;
			  -ms-user-select: none;
			}
		 
		      a.page_tap{
			    display:inline-block;
			    min-width:30px;
				height:30px;
				line-height:30px;
				text-align:center;
				margin-left:10px;
			  }
		      
			  a.page_now{
			    font-weight:bold;
				background-color: #DEDEDE;
				border: 1px #DEDEDE solid;
				
			  }
		 
		      a.page_to{
			    border: 1px #dcdddd solid;
				cursor:pointer;
			  }
			  
			  .record_pages > select.page_jump{
				height:30px;
				line-height:30px;  
				padding:0;
                margin-left:5px;				
			  }
			  
			  
			  
	/*== [ 頁面主題  Record List 區塊  ] ==*/
	    
	
  /*== ---------------------------------------- ==*/
    
  div.system_footer_area{
	z-index:3;  
    position:fixed;
	bottom:0;
	left:0; right:0;
	height:50px;
  }
  
  div.system_footer_area{
    background-color:#888888;
	border-top-left-radius: 0em 2em;
  }
    div.connect_block{
	  height:25px;
	  line-height:25px;
	  font-size:13px;
	  text-align:center;
	}
	
	  ul.navigation{
	    list-style-type:none;
        margin:0;
        padding:0;
	  }
	    li.link_list , li.mail_list{
		  display:inline-block;
		}
		  li.link_list a , li.mail_list a{
			border-left:#FFFFFF 1px solid;
			padding-left:3px;
		    color:#F0FFFF;
		  }
		  
		  li.mail_list a{
			border-right:#FFFFFF 1px solid;
			padding-right:3px;
			color:#FFEE99;
		  }
		 
    div.copyright_block{
	  height:25px;
	  line-height:25px;
	  text-align:center;
	  color:#FFFFFF;
	  font-size:13px;
	  display:flex;
	  align-items:center;
	  justify-content:center;
	}
	div.copyright_block > span{
	  padding:0 10px;	
	}
	
	
	
	div.system_print_area{
	  visibility: hidden;	
	  position:fixed;
	  top:0;
	  left:0;
	  right:0;
	  bottom:0;
	  z-index:500;  
	  background-color:#ffffff;	
	}
	  div.page_print_container{
		position:absolute;
	    width:1024px;
	  }
	  
	

	
	/*== [ 自訂區塊  ] ==*/
	
    .syscustomdom{}
    .syscustomdom > .container > *{position:relative; }
	
	.syscustomdom  header{}
	.syscustomdom  main{ overflow:auto;}
	.syscustomdom  footer{}
    
	/* 定義組件 */
    .syscustomdom .act_domclose{
	  position:absolute; 
	  font-size:2em;
	  left:-12px; top:-12px; 
	  
	} 
	
	/* 定義顯示與不顯示類別 */ 
	.syscustomdom.inview{}
	.syscustomdom.exview{}
	
	
	
	

	
    /*********************************************************/
	.mark{background-color:#e8d3d1;}
	
	.option{  cursor:pointer; opacity:0.5; }
	.option:hover { opacity:0.8; }
	.option:active{ opacity:1; }
	
	
	.option > i.material-icons{font-size:1em;}
	
	._order_status_0{ background:url('../image/staff_mark_account_off.png') 0 0; }
	._order_status_1{ background:url('../image/staff_mark_account_on.png') 0 0; }
	
	
	.pic_reflash{ background:url('../image/login_mark_reload.png') 0 0; } 
	.pic_sell{ background:url('../image/manual_mark_sell.png') 0 0;}
	
	
	 /***-- pic ******************************************************/
  
    .pic_save{ background:url('../images/mark_img16.png') -20px -60px; }
	.pic_dele{ background:url('../images/mark_img16.png') -40px -60px; }
	.pic_mbrjoin{  background:url('../images/mark_img16.png') -60px -60px; }
	.pic_mail{ background:url('../images/mark_img16.png') -80px -60px; }
	.pic_restore{ background:url('../images/mark_img16.png') -100px -60px; }
	.pic_search{background:url('../image/mark_search.png') 0 0;}	
	
	/* page use */
	.pic_area_close{background:url('../image/mark_area_close_l.png') 0 0;}
	.pic_close { background:url('../image/mark_area_close_s.png') 0 0; }
	
	/* manual */
	
	 
	
    
	.pic_post{background:url('../image/mark_manual_post.png') 0 0; }
	.pic_bugfix{background:url('../image/mark_manual_sysbugs.png') 0 0;  }
	
	
	
	
	.pic_class{background:url('../image/mark_manual_class.png') 0 0;  }
	.pic_report{background:url('../image/mark_manual_report.png') 0 0;}
	.pic_record{background:url('../image/mark_manual_record.png') 0 0;}
	
	
	/* user account area  */
	
	.pic_delete {background:url('../image/mark_delete.png') 0 0; }
	.pic_save { background:url('../image/mark_save.png') 0 0; }
	.pic_done{ background:url('../image/act_mark_done.png') 0 0; }
	
	
	.pic_status_start{ background:url('../image/mark_O_V.png') 0 0; }
	.pic_status_stop{ background:url('../image/mark_O_－.png') 0 0; }
	.pic_status_error{ background:url('../image/mark_A_I.png') 0 0; }

	.pic_active0{ background:url('../image/staff_mark_account_off.png') 0 0; }
	.pic_active1{ background:url('../image/staff_mark_account_on.png') 0 0; }
		
	.pic_account_on { background:url('../image/staff_mark_account_on.png') 0 0; }
	.pic_account_off{ background:url('../image/staff_mark_account_off.png') 0 0; }
		
	.pic_account_status0{ background:url('../image/mark_O_X.png') 0 0; }
	.pic_account_status1{ background:url('../image/staff_mark_account_new.png') 0 0;}
	.pic_account_status2{ background:url('../image/staff_mark_account_new.png') 0 0;}
	.pic_account_status3{ background:url('../image/staff_mark_account_mailed.png') 0 0;}
	.pic_account_status4{ background:url('../image/staff_mark_account_mailed.png') 0 0;}
	.pic_account_status5{ background:url('../image/mark_O_V.png') 0 0; }
		
	.pic_account_logs{background:url('../image/mark_logs.png') 0 0;}    
		
	.pic_group_leave{background:url('../image/staff_leave_group.png') 0 0; }	
	
	
	/*  post */
	.pic_post_display_1{background:url('../image/mark_O_V.png') 0 0;}
	.pic_post_display_0{background:url('../image/mark_O_－.png') 0 0;}
	
	/*  meta */
	.pic_meta_open_1{background:url('../image/mark_O_V.png') 0 0;}
	.pic_meta_open_0{background:url('../image/mark_O_－.png') 0 0;}
	
	
	
	
	/*  photo */
	.pic_photo_meta_edit{ background:url('../image/mark_edit.png') 0 0;}
	.pic_photo_meta_save{ background:url('../image/mark_save.png') 0 0;}
	.pic_photo_meta_tags{ background:url('../image/mark_tags.png') 0 0;}
	
	.pic_photo_tag_add{background:url('../image/mark_O_+.png') 0 0;}
	.pic_meta_field_add{background:url('../image/mark_O_+.png') 0 0;}
	.pic_meta_field_del{background:url('../image/mark_O_X.png') 0 0;}
	.pic_func_manual{background:url('../image/mark_manual_small.png') 0 0;}
	.pic_myfolder{background:url('../image/mark_myfolder.png') 0 0;}
	
	.pic_photo_unselect{ background:url('../image/mark_unselect.png') 0 0;}
	
	.pic_photo_task_alert{background:url('../image/mark_icon16_alert.png') 0 0;}
	
	.pic_photo_export{background:url('../image/mark_icon26_download.png') 0 0;}
	.pic_photo_select_edit{ background:url('../image/mark_icon24_edit.png') 0 0;}
	.pic_photo_upload{ background:url('../image/mark_icon26_upload.png') 0 0;}
	.pic_photo_tofolder{background:url('../image/mark_icon24_folder_add.png') 0 0;}
	
	.pic_photo_delete{background:url('../image/mark_icon26_del.png') 0 0;}
	
	.pic_photo_upload_delete{background:url('../image/mark_delete02.png') 0 0;}
	
	.pic_uplpho_success{ background:url('../image/mark_upload_success.png') 0 0;}
	.pic_uplpho_error{ background:url('../image/mark_upload_error.png') 0 0;}
	
	.pci_area_close_x{background:url('../image/mark_area_close_s.png') 0 0;}
	
	
	.pic_photo_up{background:url('../image/mark_img16.png') -140px -140px;}
	.pic_photo_dw{background:url('../image/mark_img16.png') -160px -140px;}
	
	.pic_photo_checked{background:url('../image/mark_O_V.png') 0 0;}
	
	
	/*  classify */
	.pic_term_delete{background:url('../image/mark_delete02.png') 0 0;}
	.pic_term_edit{background:url('../image/mark_edit.png') 0 0;}
	.pic_term_save{background:url('../image/mark_save.png') 0 0;}
	
	
	
	/* catalog */
	
	.pic_excel_file{background:url('../image/mark_file-xls.png') 0 0;}
	.pic_excel_file_s{background:url('../image/mark_file-xlsx16.png') 0 0;}
	.pic_image_file_s{background:url('../image/mark_file-imgx16.png') 0 0;}
	.pic_pdf_file_s{background:url('../image/mark_file-pdf16.png') 0 0;}
	
	.pic_data_view{background:url('../image/mark_data_view.png') 0 0;}
	
	
	.mark24{
      display:inline-block;
	  width:24px;
	  height:24px;  
	  vertical-align:middle; 
	  content:" ";
    }  
	
	.mark32{
      display:inline-block;
	  width:32px;
	  height:32px;  
	  vertical-align:middle; 
	  content:" ";
    }
	
	.mark48{
      display:inline-block;
	  width:48px;
	  height:48px;  
	  vertical-align:middle; 
	  content:" ";
    }
	
	input[type=text],input[type=date],input[type=password],input[type=number]{  padding:5px; border:1px #dcdddd solid; }
	textarea{  padding:5px; border:1px #dcdddd solid; }
	select{  padding:5px; border:1px #dcdddd solid; }
	
	input[type=text]:focus ,input[type=number]:focus, textarea:focus , select:focus { outline: 0;}
	button[type=button]{
		position:relative;
		border-radius:5px;
		color: #f3f3f2;
		cursor:pointer;
		letter-spacing:2px;
		border:1px #eee solid;
		outline:none;
		padding-top:7px;
		padding-bottom:7px;
	}
	
	button[type=button]::-moz-focus-inner { border: 0; }  /* cancel click outline*/
	button{min-height:25px;}
    
	button.iconv{ border-color:#dcdddd; border-radius:1px;}
	button.iconv:hover{  border-color:#949495; }
	button.iconv:active{ border-color: #007bbb;}
	button{}
	
	button.active{ background-color:#5cb85c; border-color:#4cae4c;}
	button.active:enabled:hover{ background-color: #449d44; border-color: #398439; }
	button.active:enabled:active{ box-shadow: inset 0px 0px 73px -14px #215C12; }　
	button{}
    
	button.cancel{ color:#888888; }
	button.cancel:enabled:hover{ color:#FFFFFF; background-color: #c9302c; border-color: #ac2925; }
	button.cancel:enabled:active{ color:#FFFFFF; background-color: #c9302c; box-shadow: inset 0px 0px 73px -14px #8f2e14; }
    
	button.orange{  background: linear-gradient(to bottom, #ffa84c 0%,#ff7b0d 100%); }
    button.orange:hover{  background: linear-gradient(to bottom, #ff7400 0%,#ff7400 100%);}
    button.orange:active{  background: linear-gradient(to bottom, #ff670f 0%,#ff670f 100%); }

    button.blue{  background: linear-gradient(to bottom, #63b6db 0%,#309dcf 100%); }
    button.blue:hover{ background: linear-gradient(to bottom, #4f85bb 0%,#4f85bb 100%); }
    button.blue:active{  background: linear-gradient(to bottom, #356aa0 0%,#356aa0 100%); }

    button.green{ background: linear-gradient(to bottom, #6bba70 0%,#6bba70 100%); }
    button.green:hover{  background: linear-gradient(to bottom, #8fc800 0%,#8fc800 100%);}
    button.green:active{  background: linear-gradient(to bottom, #6bba70 0%,#6bba70 100%); }

    button.yellow{  background: linear-gradient(to bottom, #ffd65e 0%,#febf04 100%); }
    button.yellow:hover{background: linear-gradient(to bottom, #febf01 0%,#febf01 100%); }
    button.yellow:active{  background: linear-gradient(to bottom, #eab92d 0%,#c79810 100%);}
	
	
	button[type=button] > i.material-icons{font-size:1.3em; }
	
	
/* button active loader loading按鈕處理*/
.processing{
  display:inline-block;
  position:relative;
  background-color:rgba(0,0,0,1);
}
.processing::after{
  content:"";
  display:block;
  position:absolute;
  left:0; right:0; top:0; bottom:0;
  background-color:rgba(0,0,0,0.4);  
  z-index:11; 	  
}
.processing > *{ z-index:10; }
.processing > i{
  z-index:12; 	
  position:absolute;
  left:14px; top:50%;
  margin-left:-8px;
  margin-top:-8px;
  display:none;
}
.processing > i.fa-exclamation-triangle{color:red;}
.processing > i.fa-check{color:#00ff00;}
.processing[status="L"] > .loader{ display: block;}
.processing[status="F"] > i.fa-exclamation-triangle{display:block;}
.processing[status="Y"] > i.fa-check{display:block;}

.loader{
  height: 15px;
  width: 15px;
  text-align: center;
  display: block;
  vertical-align: top;
}

@keyframes lds-dual-ring {
  0%{
	-webkit-transform: rotate(0);
	transform: rotate(0);
  }
  100% {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
  }
}
.lds-dual-ring {
  position: relative;
}
.lds-dual-ring div {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #000;
  border-color: #FF8800  transparent #FF8800  transparent;
  animation: lds-dual-ring 1.3s linear infinite;
}	
	
	
	
  /* select dosn't have readonly prop */

  /* RWD */
  @media (max-width: 400px){
    div.connect_block{display:none;}
	div.copyright_block{ 
	  flex-direction:column;
	  height:100%;
	}
  }
  
  @media (max-width: 1300px){
     
  }
  
  
  /* page print */
  @media print{
	body{padding:0;}  
	div.system_header_area,.system_manual_area{display:none;}
	div.system_content_area{ left: 0;	width: 100%; }
  }