@charset "utf-8";
body {
	font-family: 
    /* 英文 */
    "Roboto","Helvetica Neue", Helvetica, Arial,
    /* 繁-微軟正黑 */
    "Microsoft JhengHei", 
    /* 簡-微軟雅黑、中易黑體等 */
    "Microsoft Yahei UI", "Microsoft YaHei", SimHei,
    /* 簡-宋體 */
     "\5BBB\4F53", simsun,
     'sans-serif' ;
	color: #666;
	font-size: 17px;
     }
button, input, optgroup, option, select, textarea {
 font-family: 
 /* 英文 */
 "Roboto","Helvetica Neue", Helvetica, Arial,
 /* 繁-微軟正黑 */
  "Microsoft JhengHei",
 /* 簡-微軟雅黑、中易黑體等 */
 "Microsoft Yahei UI", "Microsoft YaHei", SimHei,
 /* 簡-宋體 */
     "\5BBB\4F53", simsun,
     'sans-serif'  !important;
}

@media (min-width: 768px){
#page-wrapper {
    min-height:1000px;
}
}
.bglogout {
    background:#6690a5 !important;
}
.btnlogin {
    background-color:#FFC400;border-color:#FFC400;color:#424242;
          }
 .btnlogin:hover {
        background-color:#FFB300; border-color:#FFB300; 
                  }
.btn-primaryreset {
    background-color:#FFC400;border-color:#FFC400;color:#FFFFFF;

                  }
.btn-primaryreset:hover {
    background-color:#FFB300; border-color:#FFB300; 
                        }

.retRed{
	color:red;
	text-align: center;
	
}
.modal-footer{
text-align: center !important;
}
select {
height: 34px;
padding: 6px 12px;
}
.control-label {
margin-top: 7px;
text-align: right;
}
.checkbox input[type=checkbox] {
margin-left: -190px;
}

input[type=checkbox] {
margin-top: -2px;
}
	
.width_50{
	width:50px;
}
.width_80{
	width:80px;
}
.width_100{
	width:100px;
}
.width_120{
	width:120px;
}
.width_150{
	width:150px;
}
.width_180{
	width:180px;
}
.width_200{
	width:200px;
}
.width_250{
	width:250px;
}

.min-width_20{
    min-width:20px;
}
.paddingb_10{
	padding-bottom:10px !important; 
}
/* margin */
.mt05{margin-top:.5em }
.mt10{margin-top:10px}
.mt15{margin-top:15px}
.mt20{margin-top:20px}
.mt25{margin-top:25px}
.mt30{margin-top:30px}
.mr0{margin-right: 0}
.mr8{margin-right:8px}
.mt3{margin-top:3px;}
.mb0{margin-bottom:0;}
.mb2{margin-bottom:2em;}
.mb1{margin-bottom:1em;}
.mg3a{margin:3px auto;}

@media (min-width: 768px){
.sm-mb1{margin-bottom:1em;}
}

/* padding */
.pda0{ padding:0px !important;}
.pd0{padding-right:0 !important;padding-left:0 !important}
.pda10{ padding:10px !important;}
.pda15-10{ padding:15px 10px !important;}
.pdr0{ padding-right:0}
.pdr3{ padding-right:3px}
.pdr10{ padding-right:10px}
.pdr36 {padding-right: 36px;}
.pdl0{ padding-left: 0; }
.pdt05{padding-top: .5em;}
.pdt01{padding-top:1px;}
.pdt1{padding-top:1em;}
.pdt10{padding-top: 10px;}
.pd_rl5{padding-right:5px;padding-left:5px }
.pd_r5{padding-right:5px;}
.pd_l5{padding-left:5px;}
.pd_l20{padding-left:20px;}
.pdleft20{padding-left:22px;}
.pdlformark {padding-left: 1.15em !important;}
.pdh4{padding-top: 4px;padding-bottom: 4px;}


.posit_r{
    position: relative;
}
.posit_a{
    position: absolute;
}
.posit_a.right_top_btn{
    right: 5px;
    top:8px;
}

.d_inline{display: inline;}
.d_inline+.d_inline{
margin-left:1em;
}
 .table > thead > tr > th, .table > tbody > tr > td {
	vertical-align: middle !important;
	text-align: center;
}


textarea.form-control {
height: 34px;
}
.btn-record{
	padding:6px 8px !important;
}
.resetnavbarbrand {
	float: left;
	height: 40px;
	padding-top: 18px;
	padding-left: 15px;
	padding-right: 15px;
	font-size: 18px;
	line-height: 20px;
}

.form-horizontal label {
	padding-top: 0px !important;
	margin-bottom: 0;
	text-align: right;
	/*padding-right: 20px;*/
	font-size: 16px;
	/* padding: 1px; */
}

.record_marleft {
	margin-left: -180px;
}

.name span {
	visibility: visible;
}

.col-sm-mar-pad {
	margin-left: 0px;
	padding-right: 9px;
	padding-left: 0px;
}

/* 20181121 */
/* 左側LOGO */
#side-menu >.nav-header >.dropdown.profile-element img{
width: 80%;
height: auto;
}
/* banner的標題  */
.headertop_tittle{
font-size: 24px;
font-weight: 100;
margin: 14px 5px 5px 20px;
}


/* 20181129 */
/* timeline */

.timeline-table tbody .timeline-date{
text-align: left;
}
.timeline-table tr td{
	padding:4px 0 !important;
}

.timeline-table .th-time,
.timeline-table .timeline-date,
.timeline-table .timeline-in,
.timeline-table .timeline-out,
.timeline-table .timeline-all
{
font-size: 14px;
}

.timeline-table .timeline-date,
.timeline-table .timeline-in,
.timeline-table .timeline-out,
.timeline-table .timeline-all
{box-shadow: -1px 0px 0 #ddd inset;}
.timeline-table .timeline-date .date{
	width: 80px;
}
.timeline-table .timeline-all div{
	width:100px;
}
.week.weekend{
color: #e85445;
}
.week{
padding-left: 4px;
}

.time-hour{
width:100%;
position: relative;
z-index: 1;
}
.time-hour >div{
width: 100%;
height:20px;
padding:6px 0;
}

.time-hour .worktime{
background:#48b1ec;
width: 100%;
height:100%; 
display: block;
position: relative;
z-index: 2
}
/* 20191217 */
.time-hour .presetworktime{
    background: #c5c4c4;
    position: absolute;
    top: 0;
    left: 3px;
    z-index: 1;
    height: 8px;
    display: block;
    width: 100%;
}

.time-hour .worktime[data-tooltip]:before{
	content: attr(data-tooltip);
    display: block;
    background: #33333391;
    border-radius: 3px;
    padding: 2px 8px;
    position: absolute;
    bottom: -21px;
    opacity: 0;
    color: #fff;
    font-size: 8px;
    width: max-content;

}
.time-hour .worktime[data-tooltip]:hover:before{
	opacity: 1;
}


.time-hour .overtime{
	background:#ffbb23;
}


.time-hour .firstmake{
position: absolute;
width: 2px;
height: 16px;
left: -2px;
top: 2px;
background: #48b1ec;
z-index:1;
}

.time-hour .lastmake{
position: absolute;
width: 2px;
height: 16px;
right: -1px;
bottom: 1px;
background: #48b1ec;
z-index: 1;
}

.phone_name.i-iphone:before{
content: "";
background: url('../img/i-iphone.png') no-repeat 50% 50%;
width: 16px;
height: 16px;
display:inline-block;
}

.phone_name.i-android:before{
content: "";
background: url('../img/i-android.png') no-repeat 50% 50%;
width: 16px;
height: 16px;
display:inline-block;
}
/* 框樣式 */
/* 藍 */
.box-blue{
	box-shadow: 0 0 0 2px #91cbe2;
	padding: 0;
	background:#dff4ff;
}
.box-blue.device_box.active{
box-shadow: 0 0 0 4px #5bc38e, 1px 1px 13px #33333399;
}
.box-blue.device_box.active .thumbnailbox{
    background: #95f4d7;
}


.thumbnailbox {
    width: 100%;
    text-align: center;
    vertical-align: middle;
    background:#dff4ff; 
}
.box-blue .thumbnailbox{
	width: 33%;
	display: table-cell;
}
.thumbnailbox img{
	width: 90%;
	height: auto;
}
.box-blue .thumbnailbox+.deviceinfo_box{
	width: 67%;
	display: table-cell;
	padding: 10px 5px;
	font-size: 15px;
	background:#fff; 

}
.deviceinfo_box .form-group{
	margin-bottom:8px; 
	display: table;
	word-break: break-all;
}
.deviceinfo_box .form-group>label{
	display: table-cell;
	min-width:75px;
	text-align: right;
}
.device_box,.device_box>a{
	position: relative;
	display:table;
    width: 100%;
    margin-bottom: 1.5em;
}
.device_box>.upperright{
	position: absolute;
	top:-2px;
	right: 0; 
    z-index: 2;
}
.device_box>.upperleft{
	position: absolute;
	top:2px;
	left:2px; 
    z-index: 2;
}

.device_box>.upperright .close-link,
.device_box>.upperright .close-btn01
{
	color: #ff4897;
	opacity: .85;
	font-size: 20px;
}
.device_box>.upperright:hover .close-link,
.device_box>.upperright:active .close-link,
.device_box>.upperright:hover .close-btn01,
.device_box>.upperright:active .close-btn01
{
	color: #ff0000;
	opacity: 1;
}

.device_box>.upperleft .item_number{
	border-radius: 50%;
    width: 20px;
    height: 20px;
    background: rgba(0, 156, 247, 0.7);
    color: #fff;
    line-height: 20px;
    text-align: center;
    padding: 0;
    font-size: 14px;
}
/* 只有樣式的假開關 */
.demo_switch{
	border-color: #5FB878;
    background-color: #5FB878;
    position: relative;
    height: 22px;
    line-height: 22px;
    width: 55px;
    padding:5px;
    border: 1px solid #d2d2d2;
    border-radius: 20px;
    cursor: pointer;
    top: 5px;
}
.demo_switch em {
	position: absolute;
    top: 0;
    width: 25px;
    padding: 0 !important;
    text-align: center !important;
    font-style: normal !important;
    font-size: 12px;
    left: 5px;
    right: auto;
    color: #fff !important;
}
.demo_switch i {
	position: absolute;
    top: 3px;
    width: 16px;
    height: 16px;
    border-radius: 20px;
    transition: .1s linear;
    left: 32px;
    background-color: #fff;
}


/* 開關off修正 */
.layui-form-switch em {
    font-size: 9px !important;
}
body .layui-form-switch{
	width:60px  !important;
}

/* 20190314 蓋掉圖表的圖示 */

.ibox-content #container foreignObject .apexcharts-legend .apexcharts-legend-series .apexcharts-legend-marker{
	background: transparent !important;
}
/* 20190509  裝置序號改高度*/
.minh47{min-height: 47px;display: block;}
.minh60{min-height: 60px;display: block;}


/* 20190703 年曆修改 */
.fc-basic-view tbody .fc-row {
    min-height: 2em;
}

.fc button.fc-button{
	background-color: #23c6c8;
    border-color: #23c6c8;
    color: #FFFFFF;
    border: 2px;
    box-shadow: 0 0 0 1px #32d8da inset;
}

.fc .fc-toolbar button.fc-button:focus,
.fc .fc-toolbar button.fc-button:active,
.fc .fc-toolbar button.fc-button:hover
{
	    background-color: #21b9bb;
    border-color: #21b9bb;
    color: #FFFFFF;
    border:1px;
}

/* 白色的區塊 */
.ibox_w{
	background: #fff;
	padding: 4px 12px;
	border-radius:5px;
    border: #e7eaec solid 1px;
}
.padding_v_4{
	padding: 4px 0px  4px 8px;
	float: left;
}
/*彈出視窗顏色 */
.modal-header.title_yellow {
    background: #ffdf4d;
    color: #233545;
    border-bottom-color: #eac829;
    border-radius: 5px 5px 0 0;
}

/* 綠 */
.modal-header.title_green {
    background: #23c6c8;
    color: #ffffff;
    border-bottom-color: #1d9b9c;
    border-radius: 4px 4px 0 0;
}
.modal-content .modal-header.title_green~.modal-body~.modal-footer {
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #f2ffff;
    border-radius: 0 0 6px 6px;
    border-top: 1px solid #d2ffff;
}


/* .pco的確定紐 */
.pco-checkbox2,.white-checkbox{
    margin: 0;
    padding: 0;
    display: inline-block;
}
.pco-checkbox2 input[type="checkbox"],.white-checkbox input[type="checkbox"]
{display: none;}
.pco-checkbox2 input[type="checkbox"]+label{
    display: inline-block;
    cursor: pointer;
    padding: 0;
    margin:0; 
    text-align: center;
    border-radius: 3px;
    width: 18px;
    height: 18px;
    min-height:18px;
    min-height:18px;
    font-size: 12px;
    background: -moz-linear-gradient(top, #0c99c5 0%, #05abe0 100%);
    background: -webkit-linear-gradient(top, #0c99c5 0%, #05abe0 100%);
    background: linear-gradient(to bottom, #0c99c5 0%, #05abe0 100%);
    -moz-box-shadow: inset 0px 1px 1px rgba(21, 112, 141, .5), 0px 1px 0px rgba(255, 255, 255, 0.4);
    -webkit-box-shadow: inset 0px 1px 1px rgba(21, 112, 141, .5), 0px 1px 0px rgba(255, 255, 255, 0.4);
    box-shadow: inset 0px 1px 1px rgba(21, 112, 141, .5), 0px 1px 0px rgba(255, 255, 255, 0.4);
}
.white-checkbox input[type="checkbox"]+label{
    display: inline-block;
    cursor: pointer;
    padding: 0;
    margin:0; 
    text-align: center;
    vertical-align: bottom;
    border-radius: 3px;
    width: 18px;
    height: 18px;
    min-height:18px;
    min-height:18px;
    font-size: 12px;
    background: -moz-linear-gradient(top, #e2f7ff 0%, #f5fdff 100%);
    background: -webkit-linear-gradient(top, #e2f7ff 0%, #f5fdff 100%);
    background: linear-gradient(to bottom, #e2f7ff 0%, #f5fdff 100%);
    -moz-box-shadow: inset 0px 1px 1px rgba(20,64,77, .65),inset -1px 0px 1px rgba(20,64,77, .3), 0px 1px 0px rgba(177, 187, 198, 0.45);
    -webkit-box-shadow:inset 0px 1px 1px rgba(20,64,77, .65),inset -1px 0px 1px rgba(20,64,77, .3), 0px 1px 0px rgba(177, 187, 198, 0.45);
    box-shadow: inset 0px 1px 1px rgba(20,64,77, .65),inset -1px 0px 1px rgba(20,64,77, .3), 0px 1px 0px rgba(177, 187, 198, 0.45);
}

.pco-checkbox2.not-allowed input[type="checkbox"]+label:hover,
.white-checkbox.not-allowed input[type="checkbox"]+label:hover
{cursor: not-allowed;}
.pco-checkbox2.opacity input[type="checkbox"]+label:hover,
.white-checkbox.opacity input[type="checkbox"]+label
{cursor: default !important;}
.pco-checkbox2 input[type="checkbox"]+label .fa,
.white-checkbox input[type="checkbox"]+label .fa
{
    opacity: 0; 
    position: relative;
}
.pco-checkbox2 input[type="checkbox"]:hover+label .fa{
    opacity: .3; 
    color: #fff;
}
.white-checkbox input[type="checkbox"]:hover+label .fa{
    opacity: .3; 
    color: #00c1ff;
}
.pco-checkbox2 input[type="checkbox"]:checked+label .fa,
.white-checkbox input[type="checkbox"]:checked+label .fa
{opacity: 1; }
.pco-checkbox2.left-checkbox input[type="checkbox"],
.pco-checkbox2.right-checkbox input[type="checkbox"],
.white-checkbox.left-checkbox input[type="checkbox"],
.white-checkbox.right-checkbox input[type="checkbox"]
{margin:0;}
.pco-checkbox2.left-checkbox input[type="checkbox"]+label,
.white-checkbox.left-checkbox input[type="checkbox"]+label
{border-radius:3px 0px 0 3px;}
.pco-checkbox2.right-checkbox input[type="checkbox"]+label,
.white-checkbox.right-checkbox input[type="checkbox"]+label
{border-radius:0px 3px 3px 0px;}
.pco-checkbox2 input[type="checkbox"]:checked+label .fa{
    color: #fff;
    vertical-align: middle;
}
.white-checkbox input[type="checkbox"]:checked+label .fa{
    color: #00b2ff;
    vertical-align: middle;
}
.pco-checkbox2+.checkword,.white-checkbox+.checkword {
    display: inline-block;
    vertical-align: text-top;
    width: 100%;
    margin-left: -30px;
    padding-left: 30px;
}

.control-sub {
    display: inline;
    vertical-align: top;
}
/* 20190710 */
.box-blue .thumbnailbox.pc_25 {
    width: 25%;
}
.box-blue .thumbnailbox.pc_25+.deviceinfo_box {
    width: 75%;
}
.tabrow_box{
    width: 100%;
    display: table-row
}

.fsize_3_5{
    font-size:3.5em
}

/* 群組按鈕 */
.bnt_calendar_group>.btn{
    border-radius:5px;
    margin: 0;
}
.bnt_calendar_group>.btn.active.btn-warning{
    background-color: #ffa23b;
    border-color: #f9972b;
    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.18);
    box-shadow: inset 0 3px 5px rgba(0,0,0,.18);
    font-weight:700;
}
.bnt_calendar_group>.btn:first-of-type{
    border-radius:5px 0 0 5px ;
}
.bnt_calendar_group>.btn:last-of-type{
    border-radius:0 5px 5px 0 ;
    margin-left: -4px;
}

/* 月曆 */
.calendarmonth_box .fc-toolbar .fc-center h2{
    float: left;
}
/* .calendarmonth_box .fc-toolbar .fc-center h2+.fc-today-button{
    float: left;
    margin-left:5px; 
}
.calendarmonth_box .fc-toolbar .fc-center .fc-today-button{
    color: transparent;
    width: 37px;
    border-radius: 5px;
    line-height: 16px;
}
.calendarmonth_box .fc-toolbar .fc-center .fc-today-button:before{
    content: "\f021";
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 18px;
    color: #fff;
    margin-right: 20px
} */

.hr-line-dashed-w {
    border-top: 1px dashed #ffffff;
    color: #ffffff;
    background-color: #ffffff;
    height: 1px;
    margin: 20px 0;
}

/* 20190715 帶刪除按鈕的li */
.listbox_blue{
    list-style-type: none;
    padding-left: 0;
}
.listbox_blue li{
    padding: 5px 8px;
    background: #fffbde;
    border-radius: 5px;
    font-size: .9em;
}

.listbox_blue li+li{
    margin-top: 5px;
}
button.close:active,button.close:focus{
    outline:none 
}

/* 灰框 */
.gray_box{
    background: #f3f3f3;
    padding:5px 8px;
    width: 100%;
    border-radius: 5px;
}
.gray_box+.gray_box{
    margin-top:5px; 
}

/* 20191113 有子表格的table */
.subformbox{
    margin: 8px 20px 20px 20px;
    border: 2px solid #7ee2ff;
    padding: .95em 1.2em;
    border-radius: 8px;
    border-style: dashed;
    position: relative;
    background: #ffffff;
}
.subformbox:before{
    content: "";
    border-bottom: 8px solid #a3eaff;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    display: inline-block;
    left:8px;
    right: auto;
    position: absolute;
    top: -8px;

}
.subformtab{
   border: 1px solid #ddd; 
}
.subformtab> thead > tr > th, .bootstrap-table .table.subformtab> thead > tr > th{
padding: 8px 8px;
}
.table.blacktop .subformbox thead,.subformbox>.subformtab > thead {
    background: #77aac3;
    color: #fff;
}
.table.blacktop .subformbox tbody tr:nth-of-type(odd),.subformbox .subformtab >tbody tr:nth-of-type(odd){
    background-color: #f6fdff;
}
/* 20191115 選擇排班種類時的單選按鈕 */
.singlebtnbox .btn-default:hover, 
.singlebtnbox .btn-default:focus, 
.singlebtnbox .btn-default:active, 
.singlebtnbox .btn-default:active:focus, 
.singlebtnbox .btn-default:active:hover, 
.singlebtnbox .btn-default.active:hover{
    color: #FFFFFF;
}

/* 20191119 手動選工作日期的checkbox */
.calendar-checkbox{
  position: relative;
    display: inline-block;
    width: 100%;
    min-height: 40px; 
}
.calendar-checkbox .white-checkbox{
    width: 100%;height: 100%;
}
.calendar-checkbox .white-checkbox input[type="checkbox"]+label{
    width: 100%;
    height: 100%;
    background: none;
    box-shadow:none;
}
.calendar-checkbox .checkword{
    font-size: 11px;
    padding-bottom: 4px;
}
.calendar-checkbox .white-checkbox input[type="checkbox"]+label .fa{
    font-size: 20px;
}
/* 20191119 單選的升縮區塊*/
.singlebtnbox_panel .panel{
    margin-bottom:0px;
}
/* 20191125 選部門 */
.graybox01{
    border: 1px #eeeeee solid;
    background: #f4f4f4;
    padding-top: 5px;
}
.graybox01+.bluebox02{
    margin-top:10px; 
}
.bluebox02{
    margin: 8px 0px 8px 0px;
    border: 2px solid #7ee2ff;
    padding: .95em 1.2em;
    border-radius: 8px;
    border-style: dashed;
    position: relative;
    background: #ffffff;
}
.bluebox02::before{
    content: "";
    border-bottom: 8px solid #a3eaff;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    display: inline-block;
    left: 8px;
    right: auto;
    position: absolute;
    top: -8px;
}

/* 20191227 */
.abnormalColor{
    border: 2px dashed #666666;
    min-width: 150px;
    padding: 3px 5px;
}
.widthauto,.white-checkbox+.checkword.widthauto{
    width:auto;
}