body
{
    overflow-x: hidden;
    background-color: #ddd;
    background-image: url(../img/layout/bkg-cityscape2.jpg);
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    background-attachment: fixed !important;
    min-height: 99vh;
}
h1 i, h2 i, h3 i, h4 i, h5 i, h6 i
{
    float: right;
    padding-right: .5em;
	color: rgba( 41,171,226, 1 );
}
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span
{
	margin-left: .5em;
	font-size: 0.75em;
	font-weight: 900;
	text-transform: uppercase;
	color: rgba( 41,171,226, 1 );
}
h1 span.i-inherit, h2 span.i-inherit, h3 span.i-inherit, h4 span.i-inherit, h5 span.i-inherit, h6 span.i-inherit
{
    margin-left: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    text-transform: none !important;
    color: inherit !important;
}
div.ck h1 span, div.ck h2 span, div.ck h3 span, div.ck h4 span, div.ck h5 span, div.ck h6 span
{
    margin-left: 0;
    font-weight: inherit;
    text-transform: none;
    color: inherit !important;
}
textarea, input.smaller-text
{
    font-size: 1em;
}

fieldset
{
    padding-top: .3em !important;
}
.fdatepicker, .fdatetimepicker
{
	background-image: url(../img/layout/calendar.png);
	background-position: 94% 50%;
	background-repeat: no-repeat;
	background-size: auto 68%;
}
div.contrast-top-bar
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 4;
    background-image: linear-gradient(to bottom right, rgba( 0,0,0, .95) , rgba( 0,0,0, .75));
    padding: 0.5em;
    color: #fff;

    border-bottom: 2px dotted rgba( 41,171,226, 1 );
}
div.contrast-title
{
    line-height: 2.1em;
}
div.contrast-title span
{
    font-weight: 900;
}
.success-hollow
{
    background-color: rgba( 155, 197, 61, .5 ) !important;
}
.margin0
{
    margin: 0 !important;
}
.margin-min
{
    margin-bottom: .4em !important;
}
.margin-lr-min
{
    margin-left: .2em !important;
    margin-right: .2em !important;
}
.pad0
{
    padding: 0 !important;
}
.pad1
{
    padding: 1em;
}
.pad2
{
    padding: 1em 1.2em 1em 1.2em;
}
.pad5
{
    padding: 0.5em;
}
div.bkg
{
    position: absolute;
    z-index: 1;
    top: 53px;
    left: 0px;
    width: 100%;
    height: 80px;
    background-image: url(../img/layout/bkg-4.jpg);
    border-bottom: 3px solid #666;
}
div.body
{
    /* border: 1px solid rgba( 41,171,226, 1 ); */
    /* border-top: 3px solid rgba( 41,171,226, 1 ); */
    position: relative;
    z-index: 2;
    margin-left: .3em;
    margin-right: .3em;
    margin-top: 3em;
    /* margin-top: 120px;
    margin-bottom: 30px;

    min-height: 90vh;
    background-image: linear-gradient(to bottom right, rgba( 51,51,51,1), rgba( 0,0,0,.95) ); */
}
div.view-side
{
    background-color: #222;
    color: #fff;
    border-bottom-right-radius: 1em;
    padding: 1em;

    border: 1px solid rgba( 0,0,0, .2 );
    border-top: 0;
    border-left: 0;

    font-size: 0.9em;
    margin-bottom: 1em;
}
div.view-side-alt
{
    border-top-right-radius: 1em;
    background-color: #444;
}
div.view-side a.button
{
    margin-bottom: .3em;
}
div.view-main
{
    padding: 1em;
}
div.history a.button
{
    margin-bottom: .3em;
}
.history-close
{
    margin-left: 0.5em;
}
div.card
{
    overflow: visible;
}
div.card-primary
{
    border-color: rgba( 41,171,226, 1 );
    border-color: rgba( 0,0,0, .75);
    border-style: solid;
    border-width: 2px;

    margin-top: 2em;
}
div.card-img
{
    height: 60px;
    width: 60px;
    border: 2px solid rgba( 255,255,255, 1 );
    border-radius: 2em;
    background-color: #fff;
    color: #222;
    position: absolute;
    top: -.5em;
    left: .4em;
    background-size: cover;
    background-position: center center;
    box-shadow: 0px 0px 6px rgba( 0,0,0, .75 );
}
div.card-title
{
    position: relative;
    background-color: rgba( 41,171,226, 1 );
    background-color: rgba( 0,0,0, .75 );
    padding: .4em .8em .4em .8em;
    color: #fff;
    font-weight: bold;
    text-align: right;
    line-height: 1em;
}
div.card-title small
{
    font-weight: normal;
}

div.card-body
{
    font-size: 0.9em;
}
div.history
{
    /* margin-left: 0.3em;
    margin-right: 0.3em; */
}
div.callout-shadow
{
    box-shadow: 0px 0px 12px rgba(0,0,0,.35);
}
ul.tabs
{
	background-color: transparent !important;
	border: none;
	border-left: 1px solid #e6e6e6;
	position: relative;
	top: 1px;
}
ul.tabs li.tabs-title.is-active a, ul.tabs li.tabs-link.is-active a, ul.accordion li.tabs-title.is-active a, ul.accordion li.tabs-link.is-active a
{
	background-color: #fff !important;
	border-bottom: 1px solid #fff !important;
}
li.is-active a.accordion-title
{
	background-color: #fff !important;
	border-bottom: 1px solid #fff !important;
}
li.tabs-title a, li.tabs-link a
{
	background-color: #fafafa;
	border-top: 1px solid #e6e6e6;
	border-right: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
}
li.tabs-title a:hover
{
	background-color: rgba( 49,53,116, .05 );
	border-top: 1px solid rgba( 228, 228, 228, 1 );
	border-right: 1px solid rgba( 228, 228, 228, 1 );
	border-bottom: 1px solid rgba( 228, 228, 228, 1 );
}
div.tabs-content
{
	border-top: 1px solid #e6e6e6;
    font-size: 0.9em;
}
/* .success, .warning
{
    color: #fff !important;
} */
div.signin-box
{
	box-shadow: 0px 5px 20px #666;
	background-color: rgba( 255,255,255, .9 );
	border-radius: .4em;
    padding: 1em;
}
.logo-signin
{
    text-align: center;
}
.logo-signin img
{
    max-height: 200px;
    padding: 1em;
    margin: 0 auto 0 auto;
}
div.signin
{
    margin: 1em;
}
div.ra
{
	padding: 0.4em 0.5em 0.4em 0.5em;
	font-size: 0.8em;
	line-height: 1.1em;
}
div.ra i
{
	float: right;
}
div.ra-type
{
	background-color: rgba( 30, 161, 238, 1 );
	background-color: #999;
	color: #fff;
	font-weight: bold;
	border-bottom-right-radius: .6em;
}
div.ra-type_profile
{
    background-color: rgba( 53,124,44, .95 );
}
div.ra-type_signin_attempt
{
    background-color: #c60f13;
}
div.ra-type_signin_worker, div.ra-type_signin_admin
{
    background-color: rgba( 77, 184, 72, .95 );
}
div.ra-type_user_worker, div.ra-type_user_admin
{
    background-color: #ffae00;
}
div.ra-type_user, .history_user i:first-child
{
	background-color: #222;
}
div.ra-name
{
	font-weight: bold;
}
div.ra-details
{
    padding: .5em;
    font-size: 0.9em;
}
div.ra-ago
{
	background-color: rgba( 128,128,128, .1 );
	text-align: right;
}
div.ra-column
{
	padding-right: 0;
}
div.show-info
{
	font-size:80%;
	padding: 0 1em 0 1em;
}

div.container-body
{
    background-image: linear-gradient( to bottom right, rgba( 255,255,255, .95), rgba( 255,255,255, .75));
    border-radius: .3em;
    border: 1px solid rgba( 0,0,0,.25 );
    box-shadow: 0px 0px 12px rgba(0,0,0,.35);
    padding: 1em;
}
div.container-side
{
    background-image: linear-gradient( to bottom right, rgba( 0,0,0, .75), rgba( 0,0,0, .5));
    color: #fff;
}
div.container-side label
{
    color: #fff;
}
div.container-side a.button
{
    margin-bottom: .3em;
}
div.container-quicklinks
{
    margin-top: 1.84em;
    position: relative;
    padding-bottom: 0;
    text-align: center;
    font-weight: bold;
    background-image: linear-gradient( to bottom right, rgba( 0,0,0, .75), rgba( 0,0,0, .5));
}
div.container-quicklinks h3
{
    color: #fff;
}
div.container-quicklinks p
{
    color: #fff;
    font-weight: normal;
}
div.container-quicklinks i
{
    display: block;
    text-align: center;
    font-size: 3em;
    color: #333;
}
div.container-quicklinks small
{
    font-weight: normal;
    display: block;
}
div.circle-imgs
{
    display: block;
    clear: both;
}
div.circle-imgs label
{
    font-weight: bold;
}
div.circle-img
{
    height: 42px;
    width: 42px;
    border: 2px solid rgba( 0,0,0, .5 );
    border-radius: 2em;
    background-color: #fff;
    color: #222;
    background-size: cover;
    background-position: center center;
    /* margin-right: .3em; */
    float: left;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    overflow: hidden;
    padding-top: .3em;
    padding-left: 1px;
    margin-bottom: 0.3em;
}
div.circle-img-alt
{
    font-size: 0.9em;
    line-height: 1em;
}
div.absences div.circle-img
{
    margin-right: 0.3em;
}
div.circle-img-alt
{
    border: 1px solid rgba( 0,0,0, .25 );
    margin-bottom: 0;
    width: 38px;
    height: 38px;
}
div.pending
{
    border: 2px dashed rgba( 0,0,0, .5 );
}
div.widget-vacation
{
    text-align: center;
    margin-bottom: 1em;
}
div.widget-vacation div.number
{
    width: 100%;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
}
div.notifications:first-child
{
    padding-top: 0 !important;
}
div.notifications:last-child
{
    border-bottom: none;
}
div.notifications
{
    border-bottom: 1px dotted #ddd;
    padding-top: 1em;
}
div.notifications:nth-child(2n)
{
    background-color: #fafafa;
}
div.notifications i.icon
{
    color: #999;
    margin: 0 auto 0 auto;
    font-size: 2em;
    text-align: center;
    position: relative;
    top: -.3em;
}
div.callout-em
{
    border-top: 3px solid rgba( 41,171,226, 1 );
}
div.callout-side
{
    border-left: 3px solid rgba( 41,171,226, 1 );
}
div.callout0
{
    padding-bottom: 0;
}
.fdatepicker, .fdatetimepicker
{
	background-image: url(../img/layout/calendar.png);
	background-position: 94% 50%;
	background-repeat: no-repeat;
	background-size: auto 68%;
}
table.tblData
{
    margin: 0;
}
table.tblData th
{
    text-align: left;
    font-size: 0.9em
}
table.tblData th.alt
{
    /* font-weight: normal; */
    padding-top: 0;
    vertical-align: top;
    font-size: 0.8em !important;
}
table.tblData th.alt2
{
    vertical-align: top;
}
table.tblData th.alt small, table.tblData th.alt2 small
{
    font-weight: normal;
}
table.tblData th .label
{
    font-size: 0.8em;
    padding: .3em .5em .3em .5em;
    border-radius: 1em;
}
table.tblData td
{
    font-size: 0.9em;
    vertical-align: top;
}
table.tblData th.border-left, table.tblData td.border-left
{
    border-left: 1px solid #ddd;
}
table.tblDataSmaller td, table.tblDataSmaller td
{
    font-size: 0.8em !important;
}
div.contrast-menu a.button
{
    margin: 0;
    color: #fff;
}
.localize
{
    cursor: pointer;
}
.localize-marked
{
    color: orange !important;
    text-decoration: underline;
}
#form_permissions table.tblData td
{
    font-size: 0.8em;
}
#form_permissions table.tblData .button
{
    margin: 0;
}
tr.permission-heading th
{
    background-color: #f6f6f6;
    border-top: 1px solid #ddd;
    font-size: 0.9em;
}
tr.permission-permission:hover td
{
    background-color: #fafafa;
}
#menu-small a
{
    /* margin-bottom: .5em; */
    float: none;
    text-align: left;
}
#menu-small a.hollow
{
    color: #222 !important;
}
.fdatepicker, .fdatetimepicker
{
	background-image: url(../img/layout/calendar.png);
	background-position: 94% 50%;
	background-repeat: no-repeat;
	background-size: auto 68%;
}
.is-admin
{
    margin-left: 1em;
    color: rgba( 0,0,0, .75 );
}
a.em
{
    text-decoration: underline;
    font-weight: bold;
}
span.label i
{
    margin-left: 0.5em;
    color: rgba( 255,255,255,.75);
}
span.label i:hover
{
    color: rgba( 255,255,255,1);
}
div.switch.alert input:checked ~ .switch-paddle
{
    background-color: #c3423f;
}
input.smaller
{
    font-size: 1em;
}
.c
{
    text-align: center !important;
}
.r
{
    text-align: right !important;
}
#chart_div table
{
    border-collapse: initial;
}

#chart_div table *
{
    background-color: transparent;
}
#chart_div table td.orgchart-node
{
    font-size: 0.9em;
    border: 1px solid #222;
    border-radius: .3em !important;
    background-color: #fafafa;
    /* box-shadow: inset 0px 0px 6px rgba( 41,171,226, .75 ); */
    color: #222;
}
#chart_div table td.orgchart-node-selected
{
    border: 1px solid #222;
}
#chart_div table td.orgchart-node div
{
    font-size: 0.8em;
}
#chart_div .google-visualization-orgchart-lineleft
{
    border-left: 1px solid rgba( 41,171,226, 1 );
}
#chart_div .google-visualization-orgchart-lineright
{
    border-right: 1px solid rgba( 41,171,226, 1 );
}
#chart_div .google-visualization-orgchart-linebottom
{
    border-bottom: 1px solid rgba( 41,171,226, 1 );
}
div.notification-save
{
    float: right;
}
.fixed-width
{
    font-family: monospace;
    font-weight: 900;
    font-size: 1.1em;
}
input.token
{
    font-family: monospace;
    font-size: 0.9em;
}
label.is-invalid-label
{
    font-weight: 500;
    border-top: 3px solid #c3423f !important;
    border-bottom: 3px solid #c3423f !important;
    border-left: 3px solid #c3423f !important;
    border-right: 3px solid #c3423f !important;
    border-radius: 0.2em;
    background-color: rgba( 195, 66, 63, 0.05);
    padding: 0.5em 0.5em 0 0.5em;
}
label.is-invalid-label input, label.is-invalid-label select, label.is-invalid-label textarea
{
    border: 1px dotted #c3423f !important;
}
.no-wrap
{
    white-space: nowrap;
}
.hidden
{
    display: none;
}
.show
{
    display: block !important;
}
.signature_pad
{
    border: 1px solid #ccc;
    background-color: #fff;
    width: 100%;
    height: 120px;
}
.verification_code
{
    font-family: monospace;
    font-size: 1.6em;
    font-weight: bold;
    text-align: center;
    color: rgba( 41,171,226, 1 );
}
.calendar
{
    border-left: 1px solid rgba( 0,0,0, .2 );
    border-top: 1px solid rgba( 0,0,0, .2 );
}
.calendar-day
{
    min-height: 120px !important;
    border-right: 1px solid rgba( 0,0,0, .2 );
    border-bottom: 1px solid rgba( 0,0,0, .2 );
    padding: 0.2em;
    font-size: 0.8em;
    background-color: rgba( 255,255,255, .5);
    position: relative;
}
.calendar-day-label
{
    border-right: 1px solid rgba( 0,0,0, .2 );
    border-bottom: 1px solid rgba( 0,0,0, .2 );
}
.calendar-label
{
    font-weight: bold;
    text-align: center;
    padding: 0.5em;
    font-size: 0.9em;
}
.calendar-weekend
{
    background-color: rgba( 41,171,226, 0.07 );
}
.calendar-off-month
{
    background-color: rgba( 0,0,0, .07);
    color: #999;
}
.calendar-date
{
    position: absolute;
    top: .2em;
    right: .2em;
    font-weight: 500;
    font-size: 0.9em;
    z-index: 9;
    background-color: rgba( 255,255,255, .9);
    padding: .2em .3em .2em .3em;
    border-radius: 1em;
    min-width: 1.8em;
    text-align: center;
    border: 1px solid rgba( 0,0,0, .25 );
}
#color-menu
{
	width: 100%;
	height: 120px;
	overflow: auto;
    margin: 0;
}
#color-menu li
{
	vertical-align: middle;
    margin: 0;
    padding: 0.2em 0.5em 0.2em 0.5em;
}
#color-menu li:hover
{
	background-color: #eeeeee;
	cursor: pointer;
}
#color-menu li i
{
	font-size: 1.2em;
	vertical-align: middle;
}
#color-menu li.color-selected
{
	background-color: #dddddd;
}
.button-group input{
  display: none;
}

.button-group input:checked + label,
.button-group input:checked + label:active {
  background-color: #29abe2;
}
.ex-banner
{
    height: 120px;
    background-size: cover;
    background-position: center center;
    margin-top: 1.5em !important;
}
table.table-filter th
{
    position: relative;
}
table.table-filter tr.ablesorter-filter-row th i
{
    position: absolute;
    top: 0em;
    right: 0.1em;
    font-size: 0.8em;
    color: rgba( 94,134,141, 1 );
}
table tr.tablesorter-filter-row td
{
    padding: .2em;
    border-top: 1px dotted rgba( 94,134,141, 1 );
}
table tr.tablesorter-filter-row td input
{
    height: 25px;
    font-size: 0.9em;
    width: 100%;
    border: 0;
    margin: 0;

    background-image: url(../img/layout/filter.png);
	background-position: top 5px right 5px;
	background-repeat: no-repeat;
	background-size: auto 25%;
}
table tr.tablesorter-filter-row td input:focus
{
    background-image: none;
}
table tr.tablesorter-filter-row td input:focus
{
    background-image: none;
}
.l
{
    text-align: left;
}
.r
{
    text-align: right;
}
.c
{
    text-align: center;
}
.poster-square
{
    max-height: 60px;
    overflow: hidden;
    border-radius: 3em;
    box-shadow: inset 0px 0px 25px rgba( 0,0,0, .5 );
}
.poster
{
    background-size: cover;
    background-position: center center;
    box-shadow: inset 0px 0px 25px rgba( 0,0,0, .5 );
}
.poster-test
{
    background-color: silver;
    display: inline-block;
    height: 0;
    padding-bottom: 100%;
    width: 100%;
    border-radius: 10em;
}
.x
{
    position: absolute;
    top: 0.5em;
    right: 0.5em;
}

.rel
{
    position: relative;
}
.zselect ul
{
    min-width: 350px;
}
.challenge-poster
{
    height: 250px;
    background-position: center center;
    background-size: cover;
    border: 1px solid rgba( 0,0,0, .2 );
    box-shadow: inset 0px 0px 25px rgba( 0,0,0, .5 );
    border-radius: 220px;
}
.challenge-banner
{
    /* box-shadow: inset 0px 0px 25px rgba( 0,0,0, .2 ); */
    border: 1px solid rgba( 0,0,0, .35 );
    border-radius: 2px;
}
.bottom
{
    position: absolute;
    bottom: 0px;
}
iframe
{
    border: 1px solid #ccc;
}
a div.card:hover
{
    border: 1px solid rgba(10, 10, 10, .35);
}
a.label:hover
{
    color: #eee;
}
#menu-sm a.accordion-title
{
    background-color: #ddd !important;
    color: #555;
    /* font-weight: bold !important; */
    font-size: 1em;
    padding: 1em;
}
#menu-sm li.accordion-item.is-active a.accordion-title
{
    background-color: rgba( 11, 114, 186, 1);
    color: #fff;
}
#menu-sm div.accordion-content
{
    padding: .6em 0em 0em 0em !important;
}
#menu-sm div.accordion-content hr
{
    margin: .1em 0em .5em 0em;
    border-color: #eee !important;
}
#menu-sm a.nav-sub
{
    display: block;
    font-size: 1em;
    font-weight: 900;
}
#menu-sm a.nav-sub small
{
    display: block;
    color: #222;
    font-weight: normal;
}
#menu-sm a.nav-sub
{
    font-size: 0.9em !important;
    padding: 0em 1.3em .6em 1.3em !important;
}
#menu-sm h5
{
    padding: 0em 1em 0em 1em !important;
}

#menu-sm a.nav-sub small
{
    display: block;
}
#menu-sm a.nav-sub i
{
    width: 100px;
}
#dropdown-multi-company
{
    padding: 0; 
    background-image: linear-gradient(to bottom right, rgba( 0,0,0, .95) , rgba( 0,0,0, .85)); 
    border: none;
}
#dropdown-multi-company label
{
    color: #fff;
    padding-left: 1em;
    margin-top: 0.5em;
    font-size: 0.8em;
}
#dropdown-multi-company a
{
    display: block;
    color: #fff;
    padding: 1em;
    font-size: 0.8em;
    border-bottom: 1px dashed rgba( 255,255,255, .12);
}
#dropdown-multi-company a:hover
{
    background-image: linear-gradient(to bottom right, rgba( 0,0,0, .95) , rgba( 0,0,0, .85)); 
}
.scrollbox
{
    max-height: 100px;
    overflow-y: scroll;
}
#menu-sm li.accordion-item.is-active a.accordion-title
{
    background-color: rgba( 41,171,226, 1) !important;
    color: #fff;
}
.drag-highlight
{
    background-color: #eee !important;
}