@CHARSET "ISO-8859-1";
/** legend:
- page structure
- utility styles (override, generic, ...)
- footer

- body style
	- dialog (jquery)
	- feedback messages
	- checkin/checkout
	- calendar
	- legend: holidays, status
	- details pages
	- attendance
*/

/* --------------------------------------------------------------- 
	PAGE STRUCTURE 
*/
#menu a {
	color: black;
}
#menu a.active, 
#menu a:hover {
	/*text-decoration: underline;*/
	font-weight: bold;
	
}

#menu .title-bar {
	background:transparent;
}
#menu .top-bar-left {
	width: 100%;
}

@media screen and (max-width: 39.9375em) {
    #menu .top-bar-left {
    	background: #fff;
    	
    }
    #menu a {
        color: #003763;
    }
}

.dashboard-item table thead,
.dashboard-item table tfoot {
	color: #fff;
}

/* --------------------------------------------------------------- 
	UTILITY STYLES
*/


/* ---------------------------------------------------------------
	FOOTER
*/
.footer{
	position: absolute;
	bottom: 25;
	width: 100%;
	height: 2.5rem;
}

/* ---------------------------------------------------------------
	BODY
*/
.noty_message {
	font-size: 2.5em !important;
    height: 2em !important;
    padding: 0.6em !important;
}

/* dialogs */
.ui-dialog .ui-dialog-titlebar {
	padding-bottom: 0;
	background: none;
	border: none;
}
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close{
	color: #8a8a8a;
	background: none;
	border: none;
}
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-button-text{
	display:none;
}
.ui-button{
	margin-bottom: 0;
}
.ui-widget-overlay {
    background-image: url(/vendor/jquery/images/ui-bg_diagonals-thick_20_666666_40x40.png);
}

/* date container */
.date-container {
	max-width: 9em;
	position: relative;
}

.date-container input.date-type {
	max-width: 9em;
	margin-bottom: 0;
}

.date-container i {
	font-size: 1.5em;
	color: #aaa;
	position: absolute;
	right: 19px;
	top: 9px;
}



/* select2 */
.select2 {}

.select2 .select2-selection {
	/*background: rgba(51, 51, 51, 0.55) !important;
	color: #fff !important;
	border: none !important;*/
	border-radius: 0 !important;
	font-size: 13px !important;
	height: 34px !important;
}
.reveal .select2 .select2-selection {
	background: transparent !important;
	color: #0a0a0a !important;
	border: 1px solid #cacaca !important;
}

.select2-container .select2-search { }
.select2-container .select2-search .select2-search__field {
	height: 2em;
	font-size: 13px;
	margin-bottom: 0;
}

.select2-container .select2-results { }
.select2-container .select2-results__options, .select2-results__option {
	color: #0a0a0a !important;
	padding: 2px 6px !important;
}
.select2-container .select2-results__option--highlighted { }
.reveal .select2 .select2-selection__arrow b {
	border-color: #ccc transparent transparent transparent;
}


.select2-container--default.select2-container--disabled .select2-selection--single {
    cursor: not-allowed !important;
	background-color: #e6e6e6 !important;
}

/* timer-control */

.timer_controls {
	
}
.timer_controls .timer_control {
	float: left;
	width: 45px;
}
.timer_controls .timer_control .timer_up, 
.timer_controls .timer_control .timer_down
{
	text-align: center;
	/*width: 40px;*/
	cursor: pointer;
}
.timer_controls .timer_control .timer_data {
	text-align: center;
	margin: 5px 0;
	/*width: 40px;*/
	/*height: 20px;*/
}
.timer_controls .timer_control .timer_data input {
	width: 100%;
	margin: 0;
	color: #777;
	text-align: center;
	font-size: 1.5em;
	font-weight: bold; 	
}
.timer_controls .timer_control .timer_data input::-webkit-outer-spin-button,
.timer_controls .timer_control .timer_data input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0;
}

/* FEEDBACK MESSAGE */
.ui-dialog #dvMessage,
#dvMessage {
	margin-top: 1em;
	font-size: 0.8em;
}

.ui-dialog #file-upload {
    box-sizing: border-box;
    padding: .5rem;
    border: 1px solid #cacaca;
    background-color: #fefefe;
    box-shadow: inset 0 1px 2px hsla(0,0%,4%,.1);
    border-radius: 0;
    transition: box-shadow .5s,border-color .25s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
}


/* TABLES */
table thead th:not(:last-child) {
	border-right: 1px dashed #999;
}
table tbody td:not(:last-child) {
	border-right: 1px dashed #ddd;
}

table .border-right {
    border-right: 1px solid #ccc !important;
}
table .border-bottom {
   	border-bottom: 1px dashed #999;
}
table tr.separator {
	border-bottom: 5px solid #ccc;
}
table .isLate {
	color: #f04124;
	font-weight: bold;
}
table tr.holiday {
	color: #aaa;
}

/* CHECKIN/CHECKOUT */

.checkin-control .checkin, 
.checkin-control .checkout {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: solid 3px;
	width: 100%;
	color: #fff;
	font-size: 1.5em;
	margin: 0;
}
.checkin-control .checkin i, 
.checkin-control .checkout i {
	margin-right: 0.5em;
}
.checkin-control .checkin {
	border: none !important;
	border-color: rgba(21, 71, 52, 0.30) !important;
	background-color: rgba(21, 71, 52, 0.30) !important;
	color: #30234e !important;
}
.checkin-control .checkin:hover {
	border: none !important;
    border-color: #154734 !important;
    background-color: #154734 !important;
	color: #ffffff !important;
}

.checkin-control .checkin[disabled]{
	opacity: 0.4 !important;
	pointer-events: none !important;
}
.checkin-control .checkout {
	border: none !important;
	border-color: #dcb1b1 !important;
	background-color: #dcb1b1 !important;
	color: #30234e !important;
}
.checkin-control .checkout:hover {
	border: none !important;
    border-color: #991a1a !important;
    background-color: #991a1a !important;
	color: #ffffff !important;
}
.checkin-control .checkout[disabled]{
	pointer-events: none !important;
}
/*.checkin-control .checkout-action.close {
	background-color: #ca2216;
    border-color: #b31e13;
    cursor:
}*/

.message-tabs {
    list-style: none;
    font-weight: bold !important;
}

.message-tabs .message-item.selected {
    background-color: #154734;
    color: white;
	font-weight: bold !important
}
.message-tabs .message-item {
    padding: 0.5em 0.7em;
    background: rgba(51, 51, 51, 0.55);
    color: #fff;
    display: block;
	font-weight: bold !important
}

.message-tabs .message-new a {
    color: #154734;
	font-weight: bold !important
}

.checkin-today-control .working {
    font-size: 1.7em;
    font-weight: bold;
}


.table>tbody>tr>td{
	vertical-align: top !important;
}

.message-list {
    padding: 1em !important;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
    position: relative;
}
.message-list:hover, .message-list.selected {
    background-color: rgba(21, 71, 52, 0.30);
}
.message-list.unread .message-subject,  .message-list.unread .message-date{
    font-weight: bold;
}

.message-list.unread{
	border-left: solid 3px #154734;
}

.message-template .message-separate {
    height: 10px;
    border-bottom: 1px dashed #ccc;
}

/* >> holiday */
.message-list .message-readby {
    font-weight: bold;
    position: absolute;
    bottom: 2%;
    right: 2%;
    font-size: 60%;
    color: #777;
}
.message-template .message-subject {
    font-size: 1.5em;
}
.message-template .message-message {
    padding-top: 1em;
    white-space: pre-line;
    text-align: justify;
}

/* details pages */
.details-container {
	background: rgba(255, 255, 255, 0.4);
    padding: 0.9rem;
}
.details-container .title {
	border-bottom: 1px solid #e5e5e5;
    margin-bottom: 15px;
}
.details-container .header {
	font-weight: bold;
	cursor: pointer;
}
.details-container .header i {
	font-size: 1.4em;
	margin-right: 1em;
}
.details-container .header i.normal {
	font-size: 1em;
    margin-right: 0.5em;
}
.details-container .header .module {
	text-transform: uppercase;
	color: #154734;
}
.details-container .header .module::after {
	content: '::';
}
.details-container .columns {
	padding-top: 3px;
    padding-bottom: 3px;
	cursor: default;
}

.details-container .legend .item {
	margin-bottom: 5px;
}
.details-container .legend .item .box {
	width: 20px;
	height: 20px;
	
    font-size: 12px;
    text-align: center;
    font-weight: bold;
}
.details-container .message-list {
	cursor: default;
}
.isnot-active .active-apply {
    text-decoration: line-through;
}

.main-menu.side-nav > li{
	padding-bottom:30px;
}
