/* put your own styles to customize and override the theme */
/*
col-xx-# definition
Gutter width:	30px
xs: Extra small <576px	
sm: Small ≥576px	
md: Medium ≥768px	
lg: Large ≥992px	
xl: Extra large ≥1200px
*/

/* company info data hidden box */
.data-box {display: none; }
/*
.dataTable > thead > tr > th[class*="sort"]::after{display: none}
*/
/* data-table */
.hiding {opacity: 0;}

.sorting::after, .sorting_asc::after, .sorting_desc::after  {
	top:12px; 
}
.sorting::before, .sorting_asc::before, .sorting_desc::before  {
	top:6px;
}

#payday-table-1 th {font-weight: normal; text-transform: uppercase;  }
#payday-table-2 th {font-weight: normal; text-transform: uppercase;}
#employee-table tr th { padding:0 0 0 8px; vertical-align: middle; text-align:left;  text-transform: uppercase; font-weight: 500; font-size:11px;}
#employee-table tr td { padding:0 0 0 10px; vertical-align: middle; font-weight: normal; }

/* top space of datatable*/

.text-time{
	font-size:14px;
	color:#000;
	margin-right:10px;
}
.text-ot-time{	
	font-size:14px;
	color:#000;
}
.text-ot{
	margin:0 4px 0 0px;
	position:relative;
	top:-3px;	
	font-size:10px;
	color:#be1600;
}

.text-na{	
	font-size:12px;
	color:#a0a0a0;
}
.dollar::after{
	content: "$/hour";
	color:#575757;
	font-size:10px;	
	position:relative;
	top:-1px;
	margin-right:10px;
}

.dollar-left{
	position:relative;
	left:-6px;
	top:2px;	
	float:left;
}

.dollar-left::after{
	content: "$/h";
	color:#575757;
	font-size:10px;		
}


.fl-right{
	float:right;
}

.search {
	font-size:14px;
	color:black;
	font-family:arial, verdana;
}

.employee-table .s-result {	
	position:relative;	
	top:21px;
	left: 35px;
	color:#0b4692;	
}

.employee-table .s-result::after {	
	content: "employee(s)";
	color:#777B7E;
}

/* dt_search search input div, dsearch: input pageviews: show page*/

.dt-showing{	
	position:absolute;	
	top:-40px;	
	left:190px;		
}
.text-showing {
	font-size:11px;
	color:#777B7E;	
}

.dt_search {
	position:absolute;
	top:-40px;
	left:266px;	
}
.dSearch {	
	line-height: 1.5;	
	border-right:none;
	border-top-right-radius:0;
	border-bottom-right-radius:0;	  
}
.dt-btn {
	background-color: rgba(204,204,204,0.1);
	border:solid 1px rgba(102,102,102,0.5);
	border-radius: .2rem;
	border-top-left-radius:0;
	border-bottom-left-radius:0;		
    line-height: 1.5;	
}

.btn-employee {	
	border:solid 1px rgba(102,102,102,0.1);
	padding:3px 12px;
	border-radius: .2rem;	
    line-height: 14px;
	font-size:12px;
	background-color: rgba(204,204,204,0.1);	
}

.btn-employee:hover {	
	border:solid 1px rgba(102,102,102,0.3);
	background-color: rgba(255,255,255,0.8);	
}

.btn-new {
	color:rgba(255,255,255,0.8);
	background-color:rgba(65,154,0,1.00);
	border:solid 1px rgba(27,40,13,0.10);
}

.btn-new:hover {
	color:rgba(255,255,255,1);
	background-color: rgba(67,136,16,1.00);	
	border:solid 1px rgba(27,40,13,0.20);
}

.btn-cancel {
	background-color: rgba(204,204,204,0.1);
	border:solid 1px rgba(102,102,102,0.2);
}

.btn-cancel:hover {
	background-color: rgba(204,204,204,0.3);
	border:solid 1px rgba(102,102,102,0.4);
}

@media (min-width:768px) {
	.dt-btn { 		
		height: 29px;
	}
	.dSearch { 		
		width: 300px;
	}
}
	
@media screen and (max-width:767px) {
	.dt-btn { 		
		height: 31px;
		position:relative;
		top:1px;
	}
	.dSearch { 		
		width: 100px;
	}
}
	

.dt-btn .icon{
	font-size:12pt;	
}

.ch_td {
	text-align: center;
	padding:8px 0 0 0;
	vertical-align:bottom;
}



.i_search::after {
	content: "\f002";
    font-family: FontAwesome;
    font-style: normal;    
    font-size:13px;
} 

.td_name { padding:3px 0 0 12px;}
.s_name {
	position:relative;
	top:3px;
	left:10px;
}

.ws-input {
	background-color: #fff;   
    border: 0px;       
	height: 24px;
    padding: .15rem .25rem;   
    line-height: 12px;
	font-size:12px;
	width:40px;	
}

.ws-hours {
	background-color: #fff;   
    border: 0px;     
	height: 24px;
    padding: .15rem .25rem;    
	font-size:14px;	
}
/* table-week */
.table-week th { 
	padding:0;								
	font-size:10px;
	line-height: 14px;
	text-align: center;
	border:solid 1px #c6c9d5;
	border-radius:3px;	
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.table-week td { 								
	border:solid 1px #c6c9d5;
}
.re_off, .ot_off {color:rgba(162,162,162,1.00);}
.re_on {color:rgba(0,99,177,1.00);}
.ot_on {color:rgba(215,111,0,1.00);}
.text-re {color:rgba(0,99,177,1.00);}
.text-ot {color:rgba(215,111,0,1.00);}

/* font-family */
.arial { font-family:arial, verdana; }

/*paging previous next last first*/

.text-next { margin-right:15px; margin-left:15px; }
.text-previous { margin-right:15px; }
.text-last { margin-right:15px; }
.text-first { margin-right:15px; }

/* dropdown */
.list-group-tr .dropdown-menu{	
	min-width:240px !important;		
}


.work-schedule .dropdown-item {	
	background-color:#f6f7f9;
	padding:0px 15px 0px 10px;	
	font-size:13px;		
}
.work-schedule .dropdown-item:hover {
	background-color:#fff;
	color:#000;
}


.work-schedule .dropdown-item .weekday{
	margin-left:8px;
}

.SUN {
	color:#be1600; font-size:11px;
}
.SAT {
	color:#0f46aa; font-size:11px;
}
.MON, .TUE, .WED,.THU, .FRI {
	color:#6e6e6e; font-size:11px;
}



#payday-table-1 .dropdown-menu{	
	min-width:90px !important;		
}
	
.pick-hours .dropdown-item{
	background-color:#f6f7f9;
	padding:0px 8px 0px 2px;	
	font-size:14px;		
}
	
.pick-hours .dropdown-item:hover{
	background-color:#fff;
	color:#000;
}	
	

.pick-hour {
	cursor:pointer;
	margin-left:10px;
	font-size:14px;
}


/******* buttons ******/


.btn_save {
	color:white;
	opacity:0.8;
}
.btn_save:hover {
	color:white;
	opacity:1;
}

.btn_waiting {
	color:#c1c7d0;	
	background:#94a3b6;
}

.i_edit {
	position:relative;
	top:4px;
	padding:1px 1px 1px 4px;
	color:#0179a8;	
	border:1px solid transparent;	
	border-radius: 3px;
	font-size:12px;
	width:24px;
}

.i_edit:hover {	
	color:#009cff;	
	background: #fff;
}

/* input append */
.input-append-r-sm{
border:1px solid #c6c9d5; 
border-left:none;
height:29px;
padding:5px 5px 0 5px;
border-radius: 0 3px 3px 0;
font-size:12px;
color:#3F4E57;
background:#f3f3f3;
}

.input-append-l-sm{
border:1px solid #c6c9d5; 
border-right:none;
height:29px;
padding:5px 5px 0 5px;
border-radius: 3px 0 0 3px;
font-size:12px;
color:#3F4E57;
background:#f3f3f3;
}

.input-append-r-sm-alert{
border:1px solid #B830C5; 
border-left:none;
height:29px;
padding:5px 5px 0 5px;
border-radius: 0 3px 3px 0;
font-size:12px;
color:#fff;
background:#B830C5;
}

.input-append-l-sm-alert{
border:1px solid #B830C5; 
border-right:none;
height:29px;
padding:5px 5px 0 5px;
border-radius: 3px 0 0 3px;
font-size:12px;
color:#fff;
background:#B830C5;
}

.input-append-r-sm-good{
border:1px solid #00917c; 
border-left:none;
height:29px;
padding:5px 5px 0 5px;
border-radius: 0 3px 3px 0;
font-size:12px;
color:#fff;
background:#00a28a;
}

.input-append-l-sm-good{
border:1px solid #00917c; 
border-right:none;
height:29px;
padding:5px 5px 0 5px;
border-radius: 3px 0 0 3px;
font-size:12px;
color:#fff;
background:#00a28a;
}

SELECT OPTION {
	margin:3px 0px 5px 0px;
	height:28px;
}

.locked { color:#A5A5A5;}
.star { color:#FF0000;}
.gray { color:#838383;}
.navy { color:#0B5096;}
.white { color:#fff;}
.black { color:#000; }
.red {color:#DF2400; }
.sky { color:#53a1ff; }
.dark-gray { color:#3D3D3D;}
.teal { color:teal;}
.orange { color:#F49300;}

.tile a { color: #fff; opacity:0.7; }
.tile a:hover { opacity:1; }

/* icons */
.badge_m {
	border-radius: 2px;
	padding: 2px 10px;
	border: none;
}
.badge_hrs {
	border-radius: 2px;
	padding: 1px 3px;
	border: none;
	background:#0179a8;
	font-size:9px;
	color:white;
	position:relative;
	top:-1px;
}

.half-circle-20-r {	
	border-radius: 0 20px 20px 0;		
	border: none;
}
.half-circle-20-l {	
	border-radius: 20px 0 0 20px;		
	border: none;
}
.half-circle-20-t {	
	border-radius: 0 0 20px 20px;		
	border: none;
}
.half-circle-20-b {	
	border-radius: 10px 20px 0 0;		
	border: none;
}

.half-circle-10-r {	
	border-radius: 0 10px 10px 0;		
	border: none;
}
.half-circle-10-l {	
	border-radius: 10px 0 0 10px;		
	border: none;
}
.half-circle-10-t {	
	border-radius: 0 0 10px 10px;	
	border: none;
}
.half-circle-10-b {	
	border-radius: 10px 10px 0 0;	
	border: none;
}

.half-circle-5-t {	
	border-radius: 0 0 5px 5px;		
	border: none;
}
.half-circle-5-b {	
	border-radius: 5px 5px 0 0 ;		
	border: none;
}


.nowrap { 	
	overflow: hidden;
	white-space: nowrap; 
	text-overflow:ellipsis;
}

.tab_padding{	
	padding: 5px 10px 3px 10px;	
}

.roboto-100{font-family: Roboto, Fira, Sans, Arial; font-weight:100;}
.roboto-300{font-family: Roboto, Fira, Sans, Arial; font-weight:300;}
.roboto-400{font-family: Roboto, Fira, Sans, Arial; font-weight:400;}
.roboto-500{font-family: Roboto, Fira, Sans, Arial; font-weight:500;}
.roboto-700{font-family: Roboto, Fira, Sans, Arial; font-weight:700;}
.roboto-900{font-family: Roboto, Fira, Sans, Arial; font-weight:900;}
.roboto-condensed-300{font-family: Roboto, Fira, Sans, Arial; font-weight:300;}
.roboto-condensed-400{font-family: Roboto, Fira, Sans, Arial; font-weight:400;}
.roboto-condensed-700{font-family: Roboto, Fira, Sans, Arial; font-weight:700;}


/* position move: px */
.mvt_1 {position:relative; top:-1px}
.mvt_2 {position:relative; top:-2px}
.mvt_3 {position:relative; top:-3px}
.mvt_4 {position:relative; top:-4px}
.mvt_5 {position:relative; top:-5px}
.mvt_6 {position:relative; top:-6px}
.mvb_1 {position:relative; top:1px}
.mvb_2 {position:relative; top:2px}
.mvb_3 {position:relative; top:3px}
.mvb_4 {position:relative; top:4px}
.mvb_5 {position:relative; top:5px}
.mvb_6 {position:relative; top:6px}

/* height: px */
.h_0 { height:0px; }
.h_1 { height:1px; }
.h_2 { height:2px; }
.h_3 { height:3px; }
.h_4 { height:4px; }
.h_5 { height:5px; }
.h_6 { height:6px; }
.h_7 { height:7px; }
.h_8 { height:8px; }
.h_9 { height:9px; }
.h_10 { height:10px; }
.h_11 { height:11px; }
.h_12 { height:12px; }
.h_13 { height:13px; }
.h_14 { height:14px; }
.h_15 { height:15px; }
.h_16 { height:16px; }
.h_17 { height:17px; }
.h_18 { height:18px; }
.h_19 { height:19px; }
.h_20 { height:20px; }
.h_21 { height:21px; }
.h_22 { height:22px; }
.h_23 { height:23px; }
.h_24 { height:24px; }
.h_25 { height:25px; }
.h_26 { height:26px; }
.h_27 { height:27px; }
.h_28 { height:28px; }
.h_29 { height:29px; }
.h_30 { height:30px; }
.h_31 { height:31px; }
.h_32 { height:32px; }
.h_33 { height:33px; }
.h_34 { height:34px; }
.h_35 { height:35px; }
.h_36 { height:36px; }
.h_37 { height:37px; }
.h_38 { height:38px; }
.h_39 { height:39px; }
.h_40 { height:40px; }
.h_45 { height:45px; }
.h_50 { height:50px; }
.h_55 { height:55px; }
.h_60 { height:60px; }

/* width: px */
.w_5 { width:5px; }
.w_10 { width:10px; }
.w_15 { width:15px; }
.w_20 { width:20px; }
.w_25 { width:25px; }
.w_30 { width:30px; }
.w_35 { width:35px; }
.w_40 { width:40px; }
.w_45 { width:45px; }
.w_50 { width:50px; }
.w_55 { width:55px; }
.w_60 { width:60px; }
.w_65 { width:65px; }
.w_70 { width:70px; }
.w_75 { width:75px; }
.w_80 { width:80px; }
.w_85 { width:85px; }
.w_90 { width:90px; }
.w_95 { width:95px; }
.w_100 { width:100px; }
.w_105 { width:15px; }
.w_110 { width:110px; }
.w_115 { width:115px; }
.w_120 { width:120px; }
.w_125 { width:125px; }
.w_130 { width:130px; }
.w_140 { width:140px; }
.w_150 { width:150px; }
.w_160 { width:160px; }
.w_170 { width:170px; }
.w_180 { width:180px; }
.w_190 { width:190px; }
.w_200 { width:200px; }
.w_210 { width:210px; }
.w_220 { width:220px; }
.w_230 { width:230px; }
.w_240 { width:240px; }
.w_250 { width:250px; }
.w_260 { width:260px; }
.w_270 { width:270px; }
.w_280 { width:280px; }
.w_290 { width:290px; }
.w_300 { width:300px; }
.w_310 { width:310px; }
.w_320 { width:320px; }
.w_330 { width:330px; }
.w_340 { width:340px; }
.w_350 { width:350px; }
.w_360 { width:360px; }
.w_370 { width:370px; }
.w_380 { width:380px; }
.w_390 { width:390px; }
.w_400 { width:400px; }
.w_410 { width:410px; }
.w_420 { width:420px; }
.w_430 { width:430px; }
.w_440 { width:440px; }
.w_450 { width:450px; }
.w_500 { width:500px; }
.w_600 { width:600px; }

/* font size: px */
.f_8 { font-size:50%; }
.f_9 { font-size:56%; }
.f_10 { font-size:63%; }
.f_11 { font-size:69%; }
.f_12 { font-size:75%; }
.f_13 { font-size:81%; }
.f_14 { font-size:88%; }
.f_15 { font-size:94%; }
.f_16 { font-size:100%; }
.f_17 { font-size:110%; }
.f_18 { font-size:115%; }
.f_19 { font-size:120%; }
.f_20 { font-size:125%; }
.f_24 { font-size:150%; }
.f_30 { font-size:188%; }
.f_32 { font-size:200%; }
.f_40 { font-size:250%; }


/* line height: px */
.lh_12 { line-height:12px; }
.lh_14 { line-height:14px; }
.lh_16 { line-height:16px; }
.lh_18 { line-height:18px; }
.lh_20 { line-height:20px; }
.lh_25 { line-height:25px; }
.lh_30 { line-height:30px; }
.lh_40 { line-height:40px; }

/* margin */
.ml_0{ margin-left:0;}
.ml_1{ margin-left:1px;}
.ml_2{ margin-left:2px;}
.ml_3{ margin-left:3px;}
.ml_4{ margin-left:4px;}
.ml_5{ margin-left:5px;}
.ml_6{ margin-left:6px;}
.mr_0{ margin-right:0;}
.mr_1{ margin-right:1px;}
.mr_2{ margin-right:2px;}
.mr_3{ margin-right:3px;}
.mr_4{ margin-right:4px;}
.mr_5{ margin-right:5px;}
.mr_6{ margin-right:6px;}
.mr_7{ margin-right:7px;}
.mr_8{ margin-right:8px;}
.mr_9{ margin-right:9px;}
.mr_10{ margin-right:10px;}
.mr_11{ margin-right:11px;}
.mr_12{ margin-right:12px;}
.mr_13{ margin-right:13px;}
.mr_14{ margin-right:14px;}
.mr_15{ margin-right:15px;}
.mr_16{ margin-right:16px;}
.mr_17{ margin-right:17px;}
.mr_18{ margin-right:18px;}
.mr_19{ margin-right:19px;}
.mr_20{ margin-right:208px;}

.mt_0{ margin-top:0;}
.mt_1{ margin-top:1px;}
.mt_2{ margin-top:2px;}
.mt_3{ margin-top:3px;}
.mt_4{ margin-top:4px;}
.mt_5{ margin-top:5px;}
.mt_6{ margin-top:6px;}
.mb_0{ margin-bottom:0;}
.mb_1{ margin-bottom:1px;}
.mb_2{ margin-bottom:2px;}
.mb_3{ margin-bottom:3px;}
.mb_4{ margin-bottom:4px;}
.mb_5{ margin-bottom:5px;}
.mb_6{ margin-bottom:6px;}

/* padding */
.pl_0{ padding-left:0;}
.pl_1{ padding-left:1px;}
.pl_2{ padding-left:2px;}
.pl_3{ padding-left:3px;}
.pl_4{ padding-left:4px;}
.pl_5{ padding-left:5px;}
.pl_6{ padding-left:6px;}
.pl_7{ padding-left:7px;}
.pl_8{ padding-left:8px;}
.pl_9{ padding-left:9px;}
.pl_10{ padding-left:10px;}
.pr_0{ padding-right:0;}
.pr_1{ padding-right:1px;}
.pr_2{ padding-right:2px;}
.pr_3{ padding-right:3px;}
.pr_4{ padding-right:4px;}
.pr_5{ padding-right:5px;}
.pr_6{ padding-right:6px;}
.pr_7{ padding-right:7px;}
.pr_8{ padding-right:8px;}
.pr_9{ padding-right:9px;}
.pr_10{ padding-right:10px;}
.pt_0{ padding-top:0;}
.pt_1{ padding-top:1px;}
.pt_2{ padding-top:2px;}
.pt_3{ padding-top:3px;}
.pt_4{ padding-top:4px;}
.pt_5{ padding-top:5px;}
.pt_6{ padding-top:6px;}
.pt_7{ padding-top:7px;}
.pt_8{ padding-top:8px;}
.pt_9{ padding-top:9px;}
.pt_10{ padding-top:10px;}
.pt_11{ padding-top:11px;}
.pt_12{ padding-top:12px;}
.pt_13{ padding-top:13px;}
.pt_14{ padding-top:14px;}
.pt_15{ padding-top:15px;}
.pt_16{ padding-top:16px;}
.pt_17{ padding-top:17px;}
.pt_18{ padding-top:18px;}
.pt_19{ padding-top:19px;}
.pt_20{ padding-top:20px;}
.pt_21{ padding-top:21px;}
.pt_22{ padding-top:22px;}
.pt_23{ padding-top:23px;}
.pt_24{ padding-top:24px;}
.pt_25{ padding-top:25px;}


.pb_0{ padding-bottom:0;}
.pb_1{ padding-bottom:1px;}
.pb_2{ padding-bottom:2px;}
.pb_3{ padding-bottom:3px;}
.pb_4{ padding-bottom:4px;}
.pb_5{ padding-bottom:5px;}
.pb_6{ padding-bottom:6px;}



/* border */
.bl_0{ border-left:0;}
.bl_1{ border-left:1px;}
.bl_2{ border-left:2px;}
.bl_3{ border-left:3px;}
.br_0{ border-right:0;}
.br_1{ border-right:1px;}
.br_2{ border-right:2px;}
.br_3{ border-right:3px;}
.bt_0{ border-top:0;}
.bt_1{ border-top:1px;}
.bt_2{ border-top:2px;}
.bt_3{ border-top:3px;}
.bb_0{ border-bottom:0;}
.bb_1{ border-bottom:1px;}
.bb_2{ border-bottom:2px;}
.bb_3{ border-bottom:3px;}

/* border radius */
.bbr_0{ border-bottom-left-radius:0; border-bottom-right-radius:0; }
.btr_0{ border-top-left-radius:0; border-top-right-radius:0;}
.brr_0{ border-top-right-radius:0; border-bottom-right-radius:0; }
.bll_0{ border-top-left-radius:0; border-bottom-left-radius:0; }


/* password view icon */
.i_eye_r {
	border-radius:0 4px 4px 0;	
	padding-top:4px;
	border-left:0;
	font-size:12px;
}
/* nav-tabs redefined */
.nav-tabs .nav-link {
    color: #5c5f66;
    background-color: transparent;
    border-color: #dbdee4;
}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    border-color: #346cb0;
}
.nav-tabs .nav-link.active {
    color: #124d8f;
    background-color: transparent;
    border-color: #346cb0;
}