@charset "UTF-8";
/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2015-10-23 10:41:55
 * @version $Id$
 */

/*body{
	padding-left: 0px; 
    padding-right: 0px; 

}*/

:root {
	/* material design color table : https://www.google.com/design/spec/style/color.html#color-color-palette */
	--color-primary-dark 	: #0d47a1; /*#2979FF;*/ /* blue A400 */ 
	--color-accent 			: #F50057; /* pink A400 */
	--color-gray-light  	: #FAFAFA; /* gray 50 */
	--font-family-default  	: "微軟正黑體"; 
}

/* md-button color */
.md-button.md-default-theme.md-primary.md-raised, 
.md-button.md-primary.md-raised, 
.md-button.md-default-theme.md-primary.md-fab, 
.md-button.md-primary.md-fab {
    /*color: rgba(255,255,255,0.87);*/
    /*background-color: rgb(63,81,181);*/
    background-color: var(--color-primary-dark);
}

.dateSelectNDyn_table td{
	padding 		:0px;
	margin 			:0px;
	border 			:0px;
	padding-bottom 	:15px;
}
.dateSelectNDyn_table td:first-child{

	padding-right:  	:15px;

}
.dateSelectNDyn_table md-switch{
	margin: 0px;
}

.md-select-menu-container.md-active,
md-backdrop.md-select-backdrop{
	z-index: 10001;
	/* must higher then ng-dialog */
}


.myFontFamily{
	font-family 			: "微軟正黑體";
}

.myPrimaryBtn {
	background 			: var(--color-primary-dark);
	color 				: white;
	outline 			: none;
	border 				: 0px;
	border-radius 		: 4px; 
	padding 			: 5px;
	padding-left 		: 10px;
	padding-right		: 10px;
}
.myArea{
	background-color 	: #F5F5F5;
	padding 			: 15px;
	border-radius 		: 0px;
	margin-bottom 		: 20px;
	border 				: 1px solid #E0E0E0; 
}

@font-face {
    font-family: "quartzl_regular";
    src:url(resource/fonts/DS-DIGI.TTF);
}
@font-face {
    font-family: "PingFang-Regular";
    src:url(resource/fonts/PingFang_Regular.ttf);
}

body {
	/*min-width 			: 768px;*/
	background 			: #FFFFFF;
	-webkit-user-select : none;
	-khtml-user-select 	: none;
	-moz-user-select 	: none;
	-ms-user-select 	: none;
	-o-user-select 		: none;
	user-select 		: none;
	font-family 		: "PingFang-Regular";
}
#canvas {}

#dragCanvas {}

.myToolbar{
 	z-index 		: 100;
 	position 		: fixed;
 	top 			: 0px;
 	left 			: 0px;
}
.myToolbarBtn{
	background 		: none;
	background 		: url(resource/images/pdf-icon.png);

	border-radius 	: 0px;
	border 			: 0px solid #CCC;
	width 			: 50px;
	height 			: 50px;
}
.myTabs{
 	z-index 		: 100;
 	position 		: fixed;
 	bottom 			: 0px;
 	left 			: 0px; 
 	width 			: 100%;
}

 /*
 .tab_blur{
 	height 			: 50px;
 	z-index 		: 99;
 	position 		: fixed;
 	bottom 			: 0px;
 	width 			: 100%;
 	background 		: #FFFFFF;
 	opacity 		: 0.5;
    -webkit-filter 	: blur(9px);
       -moz-filter 	: blur(10px);
        -ms-filter 	: blur(10px);    
            filter 	: blur(10px);  
 }
 */

/*-------------------------------------------------------------------------------------------------------- tab頁籤 */
.nav-tabs {}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {

	/* 已選取之分頁 */
  	opacity: 1;
  	color: #0066FF;
}
.nav-tabs > li > a {
	/* 未選取之分頁 */
	margin 			: 0px;
	border-right 	: 1px solid #ccc;
	background 		: #eee;
	opacity 		: 0.5;
	border-radius 	: 0px;
	font-size 		: 20px;
	font-weight 	: bolder;
  	opacity 		: 1;
  	color 			: #AAA;
}


/* --------------------------------------------------------------------------------------------------------------  */
.widget_chart_blur{
	
	position 		: absolute;
	top 			: 0px;
	left 			: 0px;
	height 			: 100%;
	width 			: 100%;
 	background 		: #FFF;
 	opacity 		: 0.5;

	z-index 		: -1;
    -webkit-filter 	: blur(10px);
       -moz-filter 	: blur(10px);
        -ms-filter 	: blur(10px);    
            filter 	: blur(10px);  
}
.widget_chart{
	padding 			: 0px; 
	border-radius 		: 0px;
	height 				: inherit; /* 從父元素繼承*/
	width 				: inherit;
	/*opacity 			: 1;*/
	/*box-shadow 		:1px 1px 12px #CCC;
	border 				: #DDD 1px solid;*/
}
.ui-resizable-helper { 
 	border 				: 1px dotted #555; 
 	z-index: 100000;
 }
.editmode{
	border 				: #CCC 1px solid;
}
.noteditmode{
	border 				: 0px;
}
.editmode_hover{
	border 				: 1px dotted #FFF;
	background-color 	: rgba(255, 0, 0, 0.1); 
}
.widget_text pre{
	border 				: 0px;
	background 			: none;
}


.widget_text{
	height 				: inherit; /* 從父元素繼承*/
	width 				: inherit;

}


.widget_text.ui-icon-gripsmall-diagonal-se { 
	background-position : -64px -224px; 
}


.widget_meter{
	/* text-shadow 	: 3px 3px 3px #cccccc; */
	/* line-height 	: 100%; */
	width: 100%;
	height: 100%;


}
.widget_meter_LOSI{
	opacity 			: 0.2;
}
.widget_meter_notLOSI{
	opacity 			: 1;
}

.pad { 
	padding 			: 25px; 
}

.container {
	width 				: 600px;
	height 				: 300px;
}

.overflowHidden{
	overflow 			: hidden; 	
	/*overflow 			: auto;*/
	white-space 		: nowrap; 	
	text-overflow 		: ellipsis;
}

/* 會讓datetimepicker醜化
table, th , td  {
	border: 1px solid grey;
	border-collapse: collapse;
	padding: 5px;
}
table tr:nth-child(odd) {
	background-color: #f1f1f1;
}
table tr:nth-child(even) {
	background-color: #ffffff;
}

*/


/**
 * 改變dialog之寬度 https://github.com/likeastore/ngDialog/issues/251
 */

.ngdialog.ngdialog-theme-plain.custom-width .ngdialog-content {
    width 			: 50%;
    /*min-width 		: 700px;*/
    /*border-radius 	: 5px;*/
	font-family 	: var(--font-family-default);
}
.ngdialog.ngdialog-theme-plain.custom-width-80 .ngdialog-content {
    width 			: 80%;
    /*min-width 		: 700px;*/
    /*border-radius 	: 5px;*/
	font-family 	: var(--font-family-default);
}
.ngdialog.ngdialog-theme-plain .ngdialog-content {
	font-family 	: var(--font-family-default);
    /*border-radius 	: 5px;*/
	padding 		: 0px;
}
/**
 * 覆蓋原本ngDialog的css(太下面了)
 */
.ngdialog.ngdialog-theme-plain {
  padding-bottom 	: 80px;
  padding-top 		: 80px;
}
.ngdialog.ngdialog-theme-default {
  padding-bottom 	: 80px;
  padding-top 		: 80px;
}

.margin10{
	margin: 10px;
}


/**
 * 讓元件們點選之後不要有淺藍色框
 */
.myOutlineNone{
	outline: none;
}

/**
 * widget button 的樣式
 */
.myWidgetButton{
	outline: none;
	border: 0;
	border-radius: 0px;
	cursor: pointer;
	font-size: .8em;
	letter-spacing: .1em;
	line-height: 1em;
	margin: 0 0 0 .5em;
	padding: .75em 2em;
	text-transform: uppercase;
	background-color:#3288e6;
	color:#FFFFFF;
	height:60px;
	width:100px;
}




/**
 * ngDialog's z-index is 10000, the default z-index of colorpicker is 9999(ckeditor)
 */
.colorpicker {
	z-index: 10001;
}

.textBtn{
	border-radius: 0px;
	padding: 0px;
	background-color: #0044AA;
}

.blink {
	color: #99FF33;
	/*
    animation-duration: 1s;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
	*/
}
@keyframes blink {

	from { opacity: 1.0; }
  	to { opacity: 0.0; }
  	/*
    0% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    81% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
    */
}


.LOSI{
	color: red;
}

.topRight{
	position: absolute;
	top: 3px;
	right:3px;

}
.myVersionCode{
	position: absolute;
	bottom:5px; 
	right:10px;
	/*font-style: italic;*/
	font-weight: bolder;
	color: #CCCCCC;
}



.myWidgetNumStyleClass{
	width: 100px;
	height: 70px;
}



.widget_DBInfo{
	background-color: none;
}


/*  ------------------------------------------------------------------------------------- templates for myTable -- */
.myTable{
	padding 	:20px;
  	font-size 	:inherit; 
}
.myTable td{
	padding 	: 5px;
	padding-left: 10px;
	padding-right: 10px;
}
.myTable tr:first-child td {
    /*font-weight: bolder;*/
}
.myTable tr:nth-child(even) {
	/*background 	: 	#F8F8FF8*/
}
.myTable tr:nth-child(odd) {
	/*background 	: #FFF*/
}

/*  /-- templates for myTable -- */

.mySelect {
	height:50px;
	width: 80px;
	border-radius:5px;
}




/* --------------------------------------------------------------------------------------------------------------  */
/*  ----------------------------------------------------------------------- templates for myStylePicker (table) -- */
.myStylePicker{

}
.myStylePicker td{
	padding 		: 5px;
	vertical-align 	: top;
}
.myStylePicker .mySelect,
.myStylePicker input[name='colorpicker']{
	height 			: 40px;
	width 			: 80px;
	border-radius 	: 5px;
}
.myStylePicker input[name='colorpicker']{
	font-size 	: 16px;
	color 		: #000;
	text-shadow : 0px 0px 8px #FFF;

}
/*  /-- templates for myStylePicker -- */

.manageStyleTable {

}
.manageStyleTable tr{
	vertical-align 	: top;
}
.manageStyleTable td{
	vertical-align 	: top;
	border: 0px solid #CCC;
	padding:0px;
}

/* ----------------------------------------------------------------------------------------------------------------  */
/*  --------------------------------------------------------------------------------------------------- login div -- */

.login_div{
	width 			: 100%;
	height 			: 100%;
	position 		: absolute;
	top 			: 0px;
	left 			: 0px;
	z-index 		: 99999999999999999999;
	margin 			: 0px;
	padding 		: 0px;

	background-color 			: #fff;
	/*background-image 			: url('resource/images/b4login.jpg');*/
	background-repeat 			: no-repeat;
	background-attachment 		: center center;
	background-position 		: fixed;
	background-size 			: cover;　
}

.login_div [name=loginForm]{
	height: 300px;
	width: auto;
	padding: 50px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -200px;
	margin-left: -230px;
	background: #FFF;
	opacity: 0.9;
	border-radius: 10px;
}

.ng-hide {
	transition: all linear 0.6s;
	height: 0;
	background-color: transparent;
}

video#bgvidB4Login  { 

  position : fixed ;  
  right : 0 ;  
  bottom : 0 ;
  min-width : 100% ;  
  min-height : 100% ;
  width : auto ;  
  height : auto ;  
  z-index : -100 ;
  background :  url('resource/images/b4login.jpg') no-repeat center center fixed no-repeat;
  background-size : cover ; 

}


/* ---------------------------------------------------------------------------------------------------------  */


.tooltip .tooltip-inner {
	/* z-index 與widget相同*/
	text-align:left; 
	z-index: 1000000;
}

table td{
	padding:5px;
}




/* ---------------------------------------------------------------- style of manage widget style */
#mng_wgt_style_tb{
	border          : #DDD 1px solid;
	border-top      : #CCC 1px solid;
	border-bottom   : #CCC 1px solid;
	border-radius   : 0px;
}
.mngStyle_table_tr{
	border-top      : #DDD 1px solid;
	border-bottom   : #DDD 1px solid;
}
#mng_wgt_style_tb td{
	border          : none;
}


/* --------------------------------------------------------------------------style of manage tabs */

  #magageTabTable{
    border          : none;
    border-top      : #CCC 1px solid;
    border-bottom   : #CCC 1px solid;
    border-radius   : 0px;
  }
  #magageTabTable tr{
    border-top      : #DDD 1px solid;
    border-bottom   : #DDD 1px solid;
  }
  #magageTabTable tr:first-child{
    border-top      : #CCC 2px solid;
    border-bottom   : #CCC 2px solid;
  }
  #magageTabTable td{
    text-align      : center;
    border          : none;
    padding         : 5px; 
  }

  /* image loader */
  .fileUploadDiv img{
    width           :100px;
    margin          : 0px;
    padding         : 0px;
  }
  .fileUploadDiv {
    position        : relative;
    overflow        : hidden;
  }
  .fileUploadDiv input.upload {
    position        : absolute;
    top             : 0px;
    right           : 0px;
    margin          : 0px;
    padding         : 0px;
    height          : 100%;
    font-size       : 20px;
    cursor          : pointer;
    opacity         : 0;
    filter          : alpha(opacity=0);
  }
  .fileUploadDiv.btn {
    padding         : 0px;
    border          : 1px solid transparent;
    border-radius   : 0px;
  }


/* -------------------------------------------------------------------------- */

/* -----------------------------------------------------headerContentDlg---新增widget畫面的dialog style---- */


.headerContentDlg .myheader{
	padding 	: 20px;
	color 		: white;
	width 		: 100%;
	height 		: auto;
	background 	: var(--color-primary-dark);
	text-align 	: center;
	font-size 	: 30px;   
	/*border-radius: 5px 5px 0px 0px;*/ /*邊框圓弧度可去 ".ngdialog.ngdialog-theme-plain.custom-width .ngdialog-content" 那邊改*/
}
.headerContentDlg .content{
	padding 	: 15px; 
}


/* -------------------------------------------------------------------------- */

.image_gallery img[name="img"]{
	background:#fff;
}
.image_gallery img[name="img"]:hover{
	background:var(--color-accent);
}



.manage_photos input.upload { /* 選圖上傳的input */
	position 			: absolute;
	top 				: 0px;
	left 				: 0px;
	width 				: 100%;
	height          	: 100%;

	margin          	: 0px;
    padding         	: 0px;
    
	outline 			: none;
    cursor          	: pointer;
    opacity         	: 0;
    filter          	: alpha(opacity=0);
 }

.myInputFileBtn{ /* 容器 */
    position        	: relative;
    overflow        	: hidden;
	background 			: #fff;
	border 				: 1px solid #DDD;
	border-radius 		: 4px; 
	padding 			: 6px;
	width 				: 70px;
	height          	: 35px;
	z-index 			: 5;

}


/* -------------------------------------------------------------------------- */

/*input 被選取時外框的藍色框*/
input{
	outline 			: none;
}









.myDb2csvGrid {
    width: 100%;
    height: 250px;
  }

.radioButtonMultiColumn .row {
  border-bottom: 1px dashed #ddd; }


/* Editable table */
.editable-table > tbody > tr > td {
  padding: 4px
}
.editable-text {
  padding-left: 4px;
  padding-top: 4px;
  padding-bottom: 4px;
  display: inline-block;
}
.editable-table tbody > tr > td > .controls {
  //width: 100%
}
.editable-input {
  padding-left: 3px;
}
.editable-input.input-sm {
  height: 30px;
  font-size: 14px;
  padding-top: 4px;
  padding-bottom: 4px;
}



/*"選取為群組" multiple selection (x draggable) 被選到的元件的樣式*/
.selected {
    /*opacity: 0.2;
    background-color: green !important;*/
}
.selecting {
    opacity: 0.2;
    background-color: yellow !important;
}
.select-helper {
    position: absolute;
    /*border: 1px dashed red;*/
    /*background: red;*/
    /*opacity: 0.2;*/
    z-index: 1090;
	border: 2px dashed #cbd3e3;
}

/*偏好設定中 mapping table editor 當"修改/新增/刪除"時的文字顏色。*/
.uigrid-edit-insert{
	color: green;
}
.uigrid-edit-update{
	color: blue;
}
.uigrid-edit-delete{
	color: red;
}


/*右鍵選單背景色*/
.dropdown .dropdown-menu li :hover{
	background: #eee;
}




/*
 *  STYLE  of scrollbar
 */

.customScrollber::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #FAFAFA;
}

.customScrollber::-webkit-scrollbar
{
	width: 6px;
	background-color: #FAFAFA;
}

.customScrollber::-webkit-scrollbar-thumb
{
	background-color: #ccc;
}


#breadCrumbBar div[name="btn"]:hover{
	background: rgba(204,204,204,0.2);
}

.pointer {
	cursor: pointer;
}