@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap");


.bodyBG{
	background:url("../../img/bgSystem.png")no-repeat fixed,
             linear-gradient(to top, #f1f1f1 0%, #f1f1f1 100%);		  
}

/* loginPanel style */

.loginPanel{
  width:500px;
  height:100%;
  background:#0366d6;
  color:#fff;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position:relative;
  float:left;
}

.loginPanels{
	width:400px;
	position:absolute;
	top:50px;
	left:50px;
	margin:0 0 0 0;
}

.loginPanels .name_main{
	font-size:27px;
	font-weight:bold;
}

.loginPanels .name_sub{
	font-size:17px;
	margin:10px 0;
}


.loginPanels input[type=text],
.loginPanels input[type=password]
{
	width:100%;
	height:40px;
	border:none;
	border:1px #ccc solid;
	font-weight:normal;
	padding:0 20px;
	border:none;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;		
	font-size:17px;
}


/* sideMemu style */

.sideMemu{
	width:300px;
	height:100%;
	background:#f1f1f1;
	position:fixed;
	top:0;
	left:0;	
	color:#000;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	overflow-x:hidden;
	overflow-y:auto;
	z-index:10;
}

.sideMemus{
	width:240px;
	padding:30px;
}

.loginInfo{
	padding:0 0 10px 0;
	font-size:15px;
	
}

.loginInfo a{
	height:30px;
	line-height:30px;
	text-align:center;
	margin:0 2px 0 0;
	padding:2px 20px;
	text-align:center;
	color:#508EF3;
	background:#fff;
	border:2px #508EF3 solid;
	display:inline-block;
	border-radius:5px;
	font-size:14px;
	font-weight:bold;
}

.loginInfo a:hover{
	color:#fff;
	background:#508EF3;
	text-decoration:none;
}



.loginInfo span{
	font-size:19px;
}

.loginInfo table td{
	vertical-align:top;
	text-align:left;
}

.loginInfo table td:first-child{
	font-weight:bold;
	white-space:nowrap;
}



ul.menu{
	display:block;
	list-style:none;
	margin:0;
	padding:0;	
	border-top:1px #ddd solid;
}

ul.menu li{
	min-height:30px;
	padding:5px 0;
	display:block;
	line-height:30px;
	list-style:none;
	border-bottom:1px #ddd solid;
}

ul.menu li .name{
	font-size:19px;
	font-weight:bold;
	text-decoration:underline;
}

ul.menu li .menuSub{
	font-size:15px;
	padding:10px 0 10px 15px;
}

ul.menu li .menuPub{
	padding:5px 0 5px 15px;
}

ul.menu li a{
	display:block;
	color:#000;
}


#sortable,
#sortable2
{
	overflow-y:scroll; /* 加入overflow-y:scroll拖曳不再因出現scrollbar時跑位*/
}

#sortable tr:nth-child(odd),
#sortable2 tr:nth-child(odd)
{
	background-color:#ffffff;
}

#sortable tr:nth-child(even),
#sortable2 tr:nth-child(even)
{
	background-color:#f1f1f1;
}

#sortable tr:hover,
#sortable2 tr:hover
{
	background-color:#f1f1f1;
}

#sortable .ti-menu,
#sortable2 .ti-menu
{
	cursor: move;
}


/* sideWrap style */
.sideWrap{
	width:calc(100% - 300px);
	height:100%;
	position:fixed;
	top:0;
	left:300px;	
	color:#000;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	z-index:10;		
}

/* element style */


input[type=text].form{
	width:100%;
	height:28px;
	border:none;
	border:1px #ccc solid;
	font-weight:normal;
	padding:3px 10px;
}


input[type=text].formDate,
input[type=text].formDatim
{
	width:auto;
	height:28px;
	border:none;
	border:1px #ccc solid;
	font-weight:normal;
	padding:0 10px 0 40px;
	background:url("../../img/elemt/svg/calendar-and-clock-time.svg")no-repeat left 10px center / 20px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box  
}


input[type=date].formDate,
input[type=date].formDatim
{
	width:270px;
	height:28px;
	border:none;
	border:1px #ccc solid;
	font-weight:normal;
	padding:3px 10px 3px 40px;
	background:url("../../img/elemt/svg/calendar-and-clock-time.svg")no-repeat left 10px center / 20px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box    
}

input[type=text].fomDateAuto{
  width:100%;
	height:28px;
	border:none;
	border:1px #ccc solid;
	font-weight:normal;
	padding:0px 10px 0px 40px;
	background:url("../../img/elemt/svg/calendar-and-clock-time.svg")no-repeat left 10px center / 20px;	
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;		
}


input[type=text].formAid{
	width:100px;
	height:28px;
	border:none;
	border:1px #ccc solid;
	font-weight:normal;
	padding:3px 10px;
	text-align:right;
}

.formColorBox{
	width:82px;
	height:36px;
	position:relative;
	display:inline-block;
	top:1px;
}


input[type=text].formColor{
	width:100px;
	height:28px;
	border:none;
	border:1px #ccc solid;
	font-weight:normal;
	padding:3px 10px 3px 30px;
	text-align:right;
	position:relative;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box   	
}

.minicolors-theme-default .minicolors-swatch {
	top:2px !important;
	left:2px !important; /* LTR */
	width:22px !important;
	height:22px !important;
}


select.form{
	background: #fff;
	cursor:pointer;
	height:28px;
	border:none;
	border:1px #ccc solid;
	font-weight:normal;
	padding: 0 60px 0 10px;
	width:auto;
	background: #fff url(../../img/elemt/svg/arrow-point-to-down.svg)no-repeat right 10px center / 9px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;		  
}

select.formAuto{
	background: #fff;
	cursor:pointer;
	height:28px;
	padding: 0 60px 0 10px;
	width:100%;
	background: #fff url(../../img/elemt/svg/arrow-point-to-down.svg)no-repeat right 10px center / 9px;
}

textarea.form{
	width:100%;
	height:200px;
	border:none;
	border:1px #ccc solid;
	font-weight:normal;
	padding:10px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;	
}

textarea.form2{
	height:28px;
	border:none;
	border:1px #ccc solid;
	font-weight:normal;
	padding:2px 10px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;	
}



/* form style */

.formLoginBtnBox{
	margin:10px 0 0 0;
	padding:10px 0 0 0;
	border-top:1px #ddd solid;
	display:flex;
	flex-wrap:wrap;
}

.formTips{
	font-weight:bold;
	background:#ffd7e0;
	color:#e5496e;
	display:none;
	padding:0px 10px;
	font-size:15px;
}

.formTable div{
	width:100%;
	min-height:10px;
	position:relative;
	margin-bottom:10px;
	position:relative;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box	
}


.formTable div span{
	width:90px;
	position:absolute;
	top:7px;
	left:15px;
	font-weight:bold;
	color:#000;
	display:block;
	z-index:1;
	font-weight:bold;
	border-right:1px #ddd solid;
	
}

.formTable div span i{
	vertical-align:top;
	font-size:22px;
}

.formTable div.imp{
	border-left:2px #d51519 solid;
	position:relative;
}


.formTable select, option{
	cursor:pointer;
	padding: 8px 60px 8px 10px;
	width:auto;
	min-width:175px;
	background:#fff url("../../img/elemt/svg/drop.svg")no-repeat right 10px center; 
	background-size:20px 20px;	
}


/* btn style */


.btnBox{
	margin:5px 0;
}

.btnBox .filename{
	margin:5px 0;
}



 a.btn{
	width:auto;
	font-size:17px;
	height:40px;
	line-height:40px;
	display:block;
	text-align:center;
	color:#fff;
	background:#333;
	-moz-box-sizing: order-box;
	-webkit-box-sizing: order-box;
	box-sizing: order-box;	
	padding:0 30px;
	border-radius:2px;
	font-weight:bold;
}

a.btn:hover{
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	opacity:0.7;
}


a.btnNormal{
	display:inline-block;
	text-align:center;
	height:40px;
	line-height:35px;
	color:#508EF3;
	background:#fff;
	border:2px #508EF3 solid;
	font-size:15px;
	padding:0 20px;
	border-radius:5px;
	font-weight:bold;
	top:-1px;
	position:relative;
	box-sizing: border-box;
}

a.btnNormal:hover{
	color:#fff;
	background:#508EF3;
	text-decoration:none;
}

a.btnNormal i,
a.btnNormal span
{
	margin-right:5px;
	font-size:1.5em;
}

a.btnSmall{
	width:60px;
	height:30px;
	line-height:25px;
	display:inline-block;
	text-align:center;
	color:#508EF3;
	background:#fff;
	border:2px #508EF3 solid;
	font-size:13px;
	margin-right:5px;
	border-radius:2px;
	font-weight:bold;
	position:relative;
	box-sizing: border-box;	

}

a.btnNormal.delete,
a.btnSmall.delete
{
	border:2px #e8464b solid;
	margin:0;
	color:#e8464b;
}

a.btnSmall:hover{
	background:#508EF3;
	color:#fff;
	text-decoration:none;
	opacity:0.9;
}

a.btnNormal.delete:hover,
a.btnSmall.delete:hover
{
	background:#e8464b;
	color:#fff;
	margin:0;
}



a.btnNormal:hover{
	color:#fff;
	background:#508EF3;
	text-decoration:none;
}





/* wrap style */

.wrap{
	width:auto;
	padding:30px;
	position:relative;
}

.wrap.wrapList{
	padding:40px 30px 130px 30px;
	top:100px; 
	white-space:nowrap;
}

.wrap.wrapList.Row2{
	top:130px !important; 
}


.wrap.wrapUpt{
	padding:40px 30px 30px 30px;
	width:auto;
	left:0;
	top:100px; 
}

.wrapOption{
	width:100%;
	min-width:800px;
	padding:30px;
	position:fixed;
	z-index:10;
	top:0;
	left:0;
	background:rgba(255,255,255,0.7);
	border-bottom:1px #eee solid;
}


.wrapOption h2 a{
	text-decoration:underline;
	font-size:17px;
	font-weight:bold;
}


.wrapOption.Row2{
	height:100px !important;
}


.wrapOptionUpt{
	width:100%;
	height:70px;
	padding:30px;
	position:fixed;
	z-index:10;
	top:0;
	left:0;
	background:rgba(255,255,255,0.7);
	border-bottom:1px #eee solid;
}



/* other style */

.itemName{
	font-size:16px;
	font-weight:bold;
	margin:20px 0;
}

.itemNames{
	font-size:14px;
	font-weight:bold;
	margin:20px 0;
}


.formNote{
	padding:10px;
	margin:5px 0;
	position:relative;
	display:flex;
}

.formNote.normalStatus{
	background-color:#ECF5FF;
	color:#005757;
}

.formNote .icon{
	width:30px;
	height:30px;
}

.formNote .info{
	flex:1;
	font-size:15px;
	font-weight:bold;
}

.formNote .info ol, ul{
	margin:0;
	margin-left:20px;
	padding:0;	
	font-size:14px;
	font-weight:bold;
}

.formNote .info li{
	margin:0;
	padding:0;
	font-size:14px;
	font-weight:bold;
}


/* icon style */
.icon_status{
	width:10px;
	height:10px;
	background:url(../../img/elemt/png/checkbox_cho.png)no-repeat center center;
}


/* tag style */
.tagResult{
	height:28px;
	line-height:28px;
	padding:0 10px 0 0;
	background:#ddd;
	display:inline-block;
	margin-right:2px;
}


/* imgs_preview style */

ul.imgs_preview{
	display:block;
	margin:20px 0 0 0;
	position:relative;	
}

ul.imgs_preview li{
	display:inline-block;
	width:100px;
	height:100px;
	margin:0 20px 20px 0;
	position:relative;
	background:#f1f1f1;
}

ul.imgs_preview li .img{
	width:100px;
	height:60px;
}

ul.imgs_preview li .name{
	height:20px;
	margin:5px;
}

ul.imgs_preview li .btn_delete{
	display:block;
	width:26px;
	height:26px;
	line-height:26px;
	border-radius:26px;
	background:#e8464b;
	color:#fff;
	font-size:9px; 
	-webkit-transform:scale(0.75);
	text-align:center;
	position:absolute;
	top:-9px;
	right:-9px;
	font-weight:bold;
}

ul.imgs_preview li .btn_delete:hover{
	opacity:0.9;
	text-decoration:none;
}


ul.imgs_preview li .btn_delete span{
	font-size:9px; 
	-webkit-transform:scale(0.75);
}

label.file_upload{
	width:100px;
	height:100px;
	line-height:100px;
    display:inline-block;
    text-align:center;
    color:#ddd;
    font-size:13px;
	cursor:pointer;
	border:1px #555 dotted;
	position:relative;
}

label.file_upload .file_preview{
	width:100px;
	height:100px;
	position:absolute;
	z-index:1;
	top:0;
	left:0;
}

label.file_upload input[type=file].img{
	display:none;
}

label.file_upload span{
	margin-right:5px;
	font-size:12px;
}


.container_checkbox{
	width:100%;
	display:flex;
	flex-wrap:wrap;
	gap:10px;
}

.container_checkbox .item{
}



/* file upload style */

#imgBox{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
}

.imgAddition{
	width:50px;
	height:50px;
	border:1px #eee dotted;
	margin:0 5px 5px 0;
	cursor:pointer;
	text-align:center;
	line-height:50px;
}


#imgBox .imgOperate{
	width:100px;
	height:100px;	
	position:relative;
}


#imgBox .imgOperate .btn_delete{
	width:40px;
	height:20px;
	line-height:24px;
	background:#e8464b;
	display:block;
	bottom:5px;
	right:5px;
	z-index:2;
	color:#fff;
	text-align:center;
	position:absolute;
	border-radius:2px;
	font-weight:bold;
}

#imgBox .imgOperate .btn_delete:hover{
	opacity:0.9;
	text-decoration:none;
}

#imgBox .img {
	width:100px;
	height:100px;
	background:#eee url(../../img/img_preview.png)no-repeat center center / cover;
	margin:0 5px 5px 0;
	position:relative;	
	display:block;
	cursor:pointer;
}

#imgBox .img .mask{
	width:100px;
	height:100px;
	position:absolute;
	background:rgba(0,0,0,0.5);
	top:0;
	left:0;
	display:none;
	z-index:1;
	cursor:pointer;
}

#imgBox .img:hover .mask
{
	display:block;
}


/* imgsPreview style*/


/* imgsPreview style*/

.imgsPreviewBox{
}

.imgsPreviewBox .Name{
	font-weight:bold;
	text-decoration:underline;
	margin-bottom:10px;
}

.imgsPreviewBox .Box{
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
}


.imgsPreviewBox .Box .Bok{
	width:19%;
	margin-bottom:10px;
	margin:0 1% 1% 0;
	background:#ddd;
	position:relative;
}

.imgsPreviewBox .Box .Bok .Img{
	width:100%;
	height:90px;
	cursor:move;
}

.imgsPreviewBox .Box .Bok .Input{
	position:relative;
	text-align:right;
}


.imgsPreviewBox .Box .Bok .Input .icon{
	width:25px;
	height:30px;
	line-height:30px;
	text-align:center;
	float:left;
}

.imgsPreviewBox .Box .Bok .Input .icon i{
	font-size:12px;
}


.imgsPreviewBox .Box .Bok .Input input[type=text]{
	width:calc(100% - 25px);
	height:30px;
	padding:0 3px;
	float:right;
}

.imgsPreviewBox .Box .Bok a.btnDelete{
	width:40px;
	height:20px;
	line-height:20px;
	background:#e8464b;
	text-align:center;
	border-radius:2px;
	position:absolute;
	top:3px;
	right:3px;
	color:#fff;
	font-weight:bold;
}

.imgsPreviewBox .Box .Bok a.btnDelete:hover{
	text-decoration:none;
	opacity:0.9;
}



/* other style */

.apart_line{
	border-top:0.5px dashed #ccc;
	margin:50px 0;
}