* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
font-family: 'Microsoft JhengHei';
}
button,
select,
input {
font-family: 'Microsoft JhengHei';
outline: none;
}
h1,
h2,
h3,
h4,
h5 {
margin: 0;
}
.clear {
clear: both;
}
.MainBody {
overflow: hidden;
width: 100%;
}
.Frame {
float: left;
width: 1280px;
min-height: 1024px;
padding-bottom: 50px;
background-color: #ebeff2;
}
.navBar {
text-align: center;
float: left;
width: 140px;
height: 100%;
float: left;
background-color: #353a3e;
padding-bottom: 500em;
margin-bottom: -500em;
}
.logo {
margin: 70px 0;
}
.logo img {
width: 90px;
height: auto;
}
.navLink {
padding: 40px 0;
width: 100%;
}
.activeNav {
background-color: #191c1f;
}
.navLink a {
color: #fff;
font-size: 16px;
text-decoration: none;
}
.navLink img {
height: 30px;
width: auto;
}
.RightContainer {
float: left;
width: 1140px;
height: 100%;
background-color: #ebeff2;
}
.container {
width: 1080px;
margin: 0 auto;
}
.header {
position: relative;
float: left;
width: 100%;
padding: 20px 0;
background-color: #fff;
}
.Title img {
width: auto;
height: 22px;
margin-right: 5px;
}
.Title span {
margin: 0;
font-weight: bold;
color: #191c1f;
font-size: 24px;
}
.Title {
float: left;
}
.Login img {
width: auto;
height: 22px;
margin-bottom: -5px;
}
.Login {
float: right;
text-align: right;
margin-top: 5px;
}
.ActionControl {
float: left;
width: 100%;
background-color: #17a085;
text-align: right;
padding: 10px 0;
}
.controlOption {
font-size: 16px;
color: #191c1f;
font-weight: bold;
border: 0;
background-color: #fff;
padding: 8px 18px;
margin-left: 10px;
}
.controlOption img {
width: auto;
height: 15px;
}
.ManagementContainer,
.SystemContent {
width: 100%;
height: auto;
}
.Col-Full {
width: 100%;
float: left;
margin-top: 30px;
}
.selectStyle {
font-size: 16px;
padding: 10px;
width: 130px;
border: none;
}
.department {
margin-right: 20px;
}
[type="date"] {
background: #fff url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/calendar_2.png) 97% 50% no-repeat;
}
[type="date"]::-webkit-inner-spin-button {
display: none;
}
[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0;
}
.datePicker {
font-size: 16px;
border: 0;
background-color: #fff;
padding: 10px;
width: 150px;
}
.DateTo {
margin: 0 20px;
}
.ShiftOption {
background-color: #fff;
padding: 15px;
}
.Shift-Red,
.Shift-Yellow,
.Shift-Blue,
.Shift-Grey {
color: #fff;
padding: 10px 15px;
font-size: 16px;
border: none;
margin: 0 10px;
}
.deleteBTN {
background:url(../img/bin-grey.png) no-repeat;
background-size: 35%;
background-position: center;
background-color: #efefef;
border: none;
color: #8e8e8e;
font-size: 0;
width: 50px;height: 43px;
border: 1px solid #efefef;
margin-top: 0px;
position: absolute;
}
.deleteBTNActive{
background:url(../img/bin-white.png) no-repeat;
background-size: 35%;
background-position: center;
background-color: #a40002;
border: none;
color: #8e8e8e;
font-size: 0;
width: 50px;height: 43px;
border: 1px solid #a40002;
margin-top: 0px;
position: absolute;
}
.Shift-Red {
background-color: #e53935;
}
.Shift-Yellow {
background-color: #f39c11;
}
.Shift-Blue {
background-color: #2a547e;
}
.Shift-Grey {
color: #8e8e8e;
background-color: #e5e5e5;
}
.Shift-Holiday {
width: 100%;
font-size: 15px;
padding: 15px;
border: none;
border-top: 1px solid #fff;
color: #8f8f8f;
background-color: #fff;
}
.Shift-Holiday:hover {
cursor: pointer;
color: #fff;
background-color: #17a085;
}
.Shift-Red br,
.Shift-Yellow br,
.Shift-Blue br,
.Shift-Grey br {
display: none;
}
.PickHoliday {
font-size: 16px;
padding: 10px;
width: 130px;
border: 1px solid #e7e7e7;
color: #afafaf;
}
.PickHolidayActive {
font-size: 16px;
padding: 10px;
width: 130px;
color: #000;
border: 1px solid #17a086;
}
.RosterTable table,
.RosterTable td,
.RosterTable th {
border: none;
}
.RosterTable table {
border-collapse: collapse;
width: 100%;
}
.RosterTable th,
.RosterTable td {
padding: 5px;
font-size: 14px;
text-align: center;
}
.RosterMonth {
background-color: #fff;
}
.RosterCate {
background-color: #f9fafc;
}
.Roster {
background-color: #fff;
}
.RosterMonth th,
.RosterCate td {
padding: 14px 0;
}
.Roster td {
border: 1px solid #eeeeee;
padding: 5px;
}
.Roster h3 {
font-size: 20px;
font-weight: bold;
}
.Roster h4 {
font-size: 18px;
font-weight: bold;
}
.Roster h5 {
font-size: 16px;
font-weight: bold;
color: #959595;
}
.Roster-Red {
background-color: #e53935;
color: #fff;
width: 103px;
height: 68px;
border: none;
font-size: 14px;
}
.Roster-Yellow {
background-color: #f39c11;
color: #fff;
width: 103px;
height: 68px;
border: none;
font-size: 14px;
}
.Roster-Blue {
background-color: #2a547e;
color: #fff;
width: 103px;
height: 68px;
border: none;
font-size: 14px;
}
.Roster-Grey {
background-color: #7d7d7d;
color: #fff;
width: 103px;
height: 68px;
border: none;
font-size: 14px;
}
.Roster-Green {
background-color: #17a085;
color: #fff;
width: 103px;
height: 68px;
border: none;
font-size: 14px;
}
.Roster-LightGrey {
background-color: #e5e5e5;
color: #8e8e8e;
width: 103px;
height: 68px;
border: none;
font-size: 14px;
}
.dropbtn {
width: 106px;
text-align: center;
background-color: #fff;
color: #afafaf;
padding: 9px 20px;
font-size: 16px;
border: 1px solid #e7e7e7;
}
.dropbtnActive {
background-color: #17a085;
color: #fff;
padding: 9px 20px;
font-size: 16px;
border: 1px solid #17a085;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #f1f1f1
}
.show {
display: block;
}
.ShiftOption input,
.ShiftOption input {
width: 0;
padding: 0;
margin: 0;
border-radius: 0;
border: none;
outline: none;display: none;
}
.check-custom,
.check-custom-label {
display: inline-block;
vertical-align: middle;
margin: 10px;
cursor: pointer;
}
.check-custom-label {
position: relative;
font-size: 18px;
}
.check-custom + .check-custom-label:before {
content: '';
background: #fff;
background-color: #fff;
border: 1px solid #b3b3b3;
display: inline-block;
vertical-align: middle;
width: 24px;
height: 22px;
padding: 2px;
text-align: center;
}
.check-custom + .check-custom-label:before {
border-radius: 0%;
}
.check-custom:checked + .check-custom-label:before {
content: "\f00c";
font-family: 'FontAwesome';
color: #087d6c;
background-color: #fff;
border: 1px solid #b3b3b3;
}
.check-custom:checked + .check-custom-label {
outline: 0;
color: #087d6c;
}
.system-Full {
position: relative;
float: left;
width: 100%;
background-color: #fff;
padding: 20px;
margin: 60px 0 20px 0;
}
.system-Full h2 {
font-size: 24px;
margin: 0 0 15px 10px;
}
.system-Full h2 img {
width: auto;
height: 24px;
margin-right: 10px;
}
.systemGrid {
width: 20%;
float: left;
padding: 0 10px;
}
.GridElement button {
float: left;
width: 100%;
margin: 10px 0;
font-size: 20px;
color: #191c1f;
line-height: 80px;
text-align: center;
text-decoration: none;
border: 1px solid #b6b6b6;
background-color: #fff;
}
.GridElement button:hover {
background-color: #ff9900;
border: 1px solid #ff9900;
color: #fff;
cursor: pointer;
}
.systemControl {
top: 20px;
right: 30px;
position: absolute;
}
.system-DelectBTN {
padding: 3px 8px;
font-size: 16px;
color: #a40002;
border: 1px solid #a40002;
background-color: #fff;
}
.system-AddButton {
padding: 3px 8px;
font-size: 16px;
color: #191c1f;
margin-left: 10px;
border: 1px solid #191c1f;
background-color: #fff;
}
.system-DelectBTN img,
.system-AddButton img {
height: 16px;
width: auto;
margin: 0 5px 0 0;
}
.systemTime button,
.staffContent button {
line-height: 20px;
padding: 20px 0;
}
.systemTime span {
font-size: 18px;
}
.staffContent span {
font-size: 14px;
}
.staff-Cate {
width: 120px;
padding: 2px 8px;
font-size: 16px;
color: #191c1f;
margin-left: 10px;
border: 1px solid #191c1f;
background-color: #fff;
}
.Grid-4 {
width: 25%;
float: left;
padding: 0 10px;
margin-bottom: 20px;
}
.Grid-2 {
width: 50%;
float: left;
padding: 0 10px;
margin-bottom: 20px;
}
.Grid-4 select {
width: 100%;
padding: 7px;
border: 1px solid #d2d2d2;
font-size: 14px;
max-height: 37px;
}
.Grid-4 input,
.Grid-2 input {
width: 100%;
padding: 8px;
border: 1px solid #d2d2d2;
font-size: 14px;
max-height: 37px;
}
.Grid-4 input:focus,
.Grid-2 input:focus,
.Grid-4 select:focus {
border: 1px solid #ff9900;
}
.RadioChoice {
width: 100%;
margin-top: 8px;
}
.RadioShift {
margin: 10px 0 15px 0;
}
.RadioChoice input[type=radio],
.RadioChoice input[type=checkbox] {
display: none;
}
.RadioChoice input[type=radio] + label,
.RadioChoice input[type=checkbox] + label {
text-align: center;
width: 100px;
background-color: #e5e5e5;
border: 1px solid #e5e5e5;
padding: 7px 20px;
margin-right: 6px;
letter-spacing: -0.1px;
color: #8e8e8e;
}
.BlockChoice input[type=radio] + label {
width: auto;
margin-bottom: 0;
}
.RadioChoice input[type=radio]:checked + label,
.RadioChoice input[type=checkbox]:checked + label {
background-color: #ff9900;
color: #fff;
border: 1px solid #ff9900;
}
.staff-timeslot {
position: relative;
}
.PopupBTN {
display: none;
text-align: center;
position: absolute;
width: 100%;
height: 100%;
top: 0;
background-color: none;
left: 0;
outline: none;
}
.PopupBTNActive {
display: block;
text-align: center;
position: absolute;
width: 100%;
height: 100%;
top: 0;
background-color: none;
left: 0;
outline: none;
}
.ModifyShiftContainer {
width: 600px;
min-height: 300px;
height: auto;
padding: 0px 0 0 0;
}
.ModifyShiftContainer h3 {
text-align: center;
margin-bottom: 15px;
}
.TimeContainer {
box-sizing: border-box;
width: 50%;
float: left;
margin: 0;
padding: 15px;
}
.AddMinusBTN{
width: 15%;
padding: 10px 8px;
font-size: 20px;
text-align: center;
background-color: #d2d2d2;
color: #8f8f8f;
font-weight: bold;
border: none;
margin: 0;
cursor: pointer;
}
.AddMinusBTN:hover{
background-color: #fe9900;
color: #fff;
}
.ComfirmModify {
width: 100%;
float: left;
margin-top: 20px;
text-align: center;
}
.confirmEditing {
font-size: 16px;
padding: 10px 50px;
background-color: #17a085;
color: #fff;
border: none;
cursor: pointer;
}
.InputBoxShift {
width: 68%;
margin: 0 -5px;
background-color: #efefef;
padding: 10px 8px;
color: #444444;
font-size: 20px;
text-align: center;
border: none;
font-weight: bold;
}
.ReportContainer{
margin-top: 30px;
}
ul.tabs {
margin: 0px;
padding: 0px 10px;
list-style: none;
}
ul.tabs li {
background: none;
color: #222;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}
ul.tabs li.current {
background: none;
color: #222;
font-weight: bold;
border-bottom: 3px solid #ff9900;
}
.tab-content {
display: none;
padding: 15px;
}
.tab-content.current {
display: inherit;
}
.Report-md-select,.Report-sm-select{padding: 0 10px;}
.Report-md-select{
width: 20%;float: left;
}
.Report-md-select select,.Report-sm-select select{width: 100%;padding: 6px;font-size: 15px;border: 1px solid #000;}
.Report-sm-select{
width: 15%;float: left;
}
.ReportTable{width: 100%;background-color: #fff;float: left;}
.ReportTable table {
border-collapse: collapse;
width: 100%;
}
.ReportTable th {
background-color: #f9fafc;
padding: 14px;
text-align: center;
}
.ReportTable td{
padding: 14px;
border: 1px solid #eeeeee;
text-align: center;
}
.TableHeading{
margin-top: 30px;float: left;
width: 100%;background-color: #fff;padding: 20px 0;}
.ShiftManager,.ManagerTitle,.ContractrHours{
float: left;
text-align: center;
}
.ShiftManager{width: 20%;}.ManagerTitle{width: 20%;}.ContractrHours{width: 60%;}
.MarginTop-30{margin-top: 30px;}
.HolidayTable h3{margin: 0 20px;}