@charset "utf-8";
/* CSS Document */

/*
  CSS for 首頁(原工具箱頁)
*/
#startContainer {
	background: transparent;
}

/*20170411*/
#StartCotent
{
	height: 100%;
	/*width: calc(100% - 2.5em);*/
	/*background-color: #eee;*/
	width: 100%;
	background-color: rgba(255, 255, 255, 0.6);
	overflow: hidden;
}

/* 20170321 Kevin 套美工 */
.StartLogo {
	height: 50px;
	float: left;
	margin: 15px 15px 5px 15px;
}

/* 20170321 Kevin 套美工 */
.StartMain {
	background-image: linear-gradient(#ccc, #eef2f3);
	float: left;
	box-shadow: 3px 0 3px rgba(0,0,0,.15);
	margin: 0px 15px 15px 15px;
    overflow-x: auto;
    overflow-y: auto;
    border-radius: 20px;
    background-color: white;
}

.StartMain .ztree {
    overflow-x: auto;
    overflow-y: auto;
}

#StartLogo{
	width: 100%;
    height: 70px;
}

#StartLogoL {
	background-image:url(../IMAGE/ART/Start-Program.png);
	background-repeat: no-repeat;
	width:calc(35% - 40px);
}

/* 2017.4 - color scheme */
.cs-ly #StartLogoL {
	background-image:url(../IMAGE/ART/CS-LY/Start-Program.png); 
}
.cs-lg #StartLogoL {
	background-image:url(../IMAGE/ART/CS-LG/Start-Program.png); 
}
.cs-lp #StartLogoL {
	background-image:url(../IMAGE/ART/CS-LP/Start-Program.png); 
}

#StartLogoM {
	background-image:url(../IMAGE/ART/Start-Todo.png); 
	background-repeat  : no-repeat;
	width:calc(35% - 40px);
}

/* 2017.4 - color scheme */
.cs-ly #StartLogoM {
	background-image:url(../IMAGE/ART/CS-LY/Start-Todo.png); 
}
.cs-lg #StartLogoM {
	background-image:url(../IMAGE/ART/CS-LG/Start-Todo.png); 
}
.cs-lp #StartLogoM {
	background-image:url(../IMAGE/ART/CS-LP/Start-Todo.png); 
}

#StartLogoR {
	background-image:url(../IMAGE/ART/Start-Short.png); 
	background-repeat  : no-repeat;
	width:calc(30% - 40px);
}

/* 2017.4 - color scheme */
.cs-ly #StartLogoR {
	background-image:url(../IMAGE/ART/CS-LY/Start-Short.png); 
}
.cs-lg #StartLogoR {
	background-image:url(../IMAGE/ART/CS-LG/Start-Short.png); 
}
.cs-lp #StartLogoR {
	background-image:url(../IMAGE/ART/CS-LP/Start-Short.png); 
}

#StartMain{
	width: 100%;
    height: 100%;
}

#StartL {
	/* 20170321 Kevin 套美工 
    width: 300px;
  height: 100%;
  float:left;
  overflow-x:auto;
  overflow-y:auto;
	*/
	height: calc(100% - 100px);
	width:calc(35% - 40px);
	-webkit-overflow-scrolling: touch;
}

#StartL .Filter {
    width: calc(100% - 20px);
	height: 40px;
	text-align:center;
	margin:10px;
}

#StartM {
	/* 20170321 Kevin 套美工
    width: 40%;
  height: 100%;
  float:left;
  padding-top: 50px;
  overflow-x:auto;
  overflow-y:auto;
	*/
	height: calc(100% - 100px);
	width:calc(35% - 40px);
	overflow: hidden; /*修正瀏覽器放大時會有scrollbar*/
}

#StartR {
	/* 20170321 Kevin 套美工
    width: 300px;
  height: 100%;
  float:left;
    padding: 10px;
  padding-top: 50px;
  overflow-x:auto;
  overflow-y:auto;
	*/
    height: calc(100% - 130px);
	width:calc(30% - 40px);
	padding: 15px;
	-webkit-overflow-scrolling: touch;
}

#StartImpFlot {
	width: calc(100% - 50px);
	height:150px;
	text-align:center;
    margin-top: 10px;
    margin-left: 30px;
}

#StartTodoFlot {
	width: calc(100% - 20px);
	height:400px;
	margin:10px;
	text-shadow: 0 /*{b-page-shadow-x}*/ 0 /*{b-page-shadow-y}*/ 0 /*{b-page-shadow-radius}*/ #fff /*{b-page-shadow-color}*/;
}

/*20170413*/
#StartTodoMemo .FlotMemo{
	height:20px;
	position: absolute;
	top: 10px;
    right: 30px;
	border:1px solid grey;
	border-radius: 3px;
	text-shadow: none;
}

#popupPanel-popup {
    left: auto !important;
    right: 0 !important;
}

#popupPanel {
	width: auto;
	border:0;
    /*margin: -1px 0; 20170413*/
    margin: 0px; /*20170413*/
    height: 100%;
}

#popupPanel .ui-btn {
    margin: 1em 15px;
}

.ztree.Upztree {
    border: 1px solid #617775;
    background: rgba(255,255,255,.95);
    overflow-y: auto;
    overflow-x: auto;
    margin: 15px; /*20170413*/
    background-image: linear-gradient(#ccc, #eef2f3); /*20170413*/
    box-shadow: 3px 0 3px rgba(0,0,0,.15); /*20170413*/
	border-radius: 10px; /*20170413*/
}

#popupPanel-screen{
    background-color: black;
}

.upMenuPanel
{
	position: fixed;
	top: 60px;
    right: 60px;
	height: 600px;
    width: 400px;
    background-color: white;
	border: 1px;
    border-style: solid;
	border-radius: 10px;
	box-shadow: 4px 4px 1px rgba(16,16,16,0.5);
	background-image: linear-gradient(#4cade5, #eef2f3);
}

/* 2017.4 - color scheme */
.cs-ly .upMenuPanel {
    background-image: linear-gradient(#e5c565, #f2f3ee);
}
.cs-lp .upMenuPanel {
    background-image: linear-gradient(#e88bc2, #f2eef3);
}
.cs-lg .upMenuPanel {
    background-image: linear-gradient(#97b531, #f8f3ee);
}

#ColorSwitchTitle {
	margin: 15px 15px 0px 15px;
    font-size: 14pt;
    font-weight: bold;
	width: 280px;
}

.ColorSwitch{
	width: 50px;
	height: 50px;
	margin: 10px;
	float: left;
	border-width: 2px;
    border-style: solid;
	border-color: white;
	border-radius: 5px;
}

#ColorSwitchLB{
	background-color: #4cade5;
}

#ColorSwitchLG{
	background-color: #97b531;
}

#ColorSwitchLP{
	background-color: #e88bc2;
}

#ColorSwitchLY{
	background-color: #e5c565;
}

/*.cs-lb套在#ColorSwitchLB需要同時符合*/
.cs-lb#ColorSwitchLB{
	border-color: red;
}

.cs-ly #ColorSwitchLY {
    border-color: red;
}

.cs-lg #ColorSwitchLG {
    border-color: red;
}

.cs-lp #ColorSwitchLP {
    border-color: red;
}

/*1101220 David 下方有支援手機模式，取消原有的調整首頁寬度邏輯*/
/*@media screen and (max-width: 1200) and (orientation: landscape){
	
	#StartLogoL, #StartL {width: 270px;}
	#StartLogoM, #StartM {width: 400px;}
	#StartLogoR, #StartR {width: 250px;}
	
	#StartImpFlot {width: 370px;margin-left: 10px;}
	#StartTodoFlot {width: 370px;height: 350px;}

	.StartLogo {
		margin: 20px 10px 10px 10px;
	}
	.StartMain {
		margin: 0px 10px 5px 10px;
	}
	
	.upMenuPanel
	{
		position: fixed;
		top: 140px;
		left: 315px;
		height: 520px;
		width: 375px;
	}
}*/

/*1100218 David 1090927 新增手機模式*/
/*1101220 David 使用圓餅圖當寬度小於1015時畫面會跑版，改以1024為固定寬度模式判斷*/
/*@media screen and (max-width: 1000px) and (max-height: 450px) and (orientation: landscape) {*/
@media screen and (max-width: 1025px) and (orientation: landscape) {
	#StartCotent{
		overflow:auto;
	}
	#StartLogo{
		width:1024px;
	}
	 #StartMain{
		width:1024px;
		height:768px;
	 }

	.StartLogo {
		margin: 20px 10px 10px 10px;
	}
	.StartMain {
		margin: 0px 10px 5px 10px;
	}
	
	.upMenuPanel
	{
		position: fixed;
		top: 140px;
		left: 315px;
		height: 520px;
		width: 375px;
	}
}

/*1090306	Leslie[1081088]	新增Log功能*/
#LogProcess {
	position: absolute;
	bottom: 0px;
}

#LogProcess .LogProcessBtn {
	margin: 10px;
    border-width: 2px;
    border-style: solid;
    border-color: white;
    border-radius: 5px;
    float: left;
    width: 50px;
    height: 50px;
    line-height: 24px;
	text-align: center;
	background-color: gainsboro;
	cursor: pointer;
}

#LogProcess .LogProcessBtn:hover {
    border-color: coral;
	background-color: ghostwhite;
}

#LogProcess .LogProcessBtn:active {
    border-color: red;
}

/*1090812	Leslie[1090473]	配合公布欄區塊改為非同步，增加「載入中」*/
#StartR .LoadBulletin{
	text-align: center;
	font-size: 150%;
	font-weight: 700;
	background: url("/ms/image/sso/loading.gif");
	background-repeat: no-repeat;
	background-position: calc(50% + 60px);
	background-size: 30px;
}

/*1100810	Leslie[1100580]	Merge 新增MP客製化待辦資訊*/
/*定義欄位線條*/
.StartTodo > div:first-child{
    border-top: thick double black;
}

.StartTodo > .ST-FolderSum{
	border-top: thin solid;
    border-bottom: thin solid;
    border-color: black;
    padding: 2px;
}

.ST-TopBorder{
	border-top: thin solid;
	border-color: black;
}

/*可展開的黃色標題列*/
.ST-Title{
    font-weight: bold;
    background: #ffFE77;
	cursor: pointer;
}

.ST-Title::after{
    content:"▼";
    right:10px;
    position: absolute;
}

.ST-FolderSum{
	color: black;
}

/*公文夾，顯示藍色*/
.ST-Folder{
    color: blue;
    cursor: pointer;
}

/*公文夾SubFolder*/
.ST-SubFolder{
    display: inline-block;
}

.ST-SubFolder::before{
    content:"......";
}

/*連動特定作業，顯示綠色*/
.ST-Prog {
    color: green;
    cursor: pointer;
}

/*逾時類型，顯示紅色*/
.ST-Delay {
    color: red;
    cursor: pointer;
}

/*數字定位*/
.ST-NUM{
    position: absolute;
    display: inline-block;
	right: 20%;
}

.ST-Hide{
	display: none;
}