/*----------------------------------------------*/
/*                      LOGIN                   */
/************************************************/

#pgLogin {
}

#pgLogin .header .logo {
    margin: 10px 0;
}

/* Username Reminder                  
---------------------------*/
#pgAccount .field {
    margin: 20px 0px 20px 0px;
}

#pgAccount .message {
    height: 35px;
}

/*----------------------------------------------*/
/*              MAIN MENU (HOME)                */
/************************************************/

#pgMainMenu .content {
   padding:0px !important;
   
}

#pgMainMenu .ui-grid-a {
    margin-top:3px;
    margin-left:3px;
}

#pgMainMenu .home-block {
    text-align:center;
    border:solid 1px #fff;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    cursor:pointer;
    margin:2px;
   width: 46% !important;
    float: left !important;
    display: block !important;
    padding: 20px 1% 1% 1% !important;
}

#pgMainMenu .home-block:hover {
    box-shadow: 0 1px 3px !important;
    -webkit-box-shadow: 0 1px 3px !important;
}

#pgMainMenu .home-block a {
     -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
   border:none !important;
    box-shadow: 0 0px 0px !important;
    -webkit-box-shadow: 0 0px 0px !important;
    background:transparent !important;
     font-weight:normal !important;   
}

#pgMainMenu .ui-icon-user {
    
}

#pgMainMenu .home-block-label {
    
}

#pgMainMenu .content li a img {
    margin-top: 8px;
    margin-left: 8px;
}

#pgMainMenu .content li a h2 {
    margin-top: 3px;
}

#pgMainMenu .content li a p {
    margin-bottom: 0px;
}

#pgMainMenu .content li.my-messages h2 {
    margin-bottom: 0px;
}

#pgMainMenu .content li .message-count {
    padding: 4px;
    display: inline-block;
    position: absolute;
    top: 42px;
}

#pgMainMenu .content .ui-li-has-thumb .ui-btn-inner a.ui-link-inherit {
    min-height: 45px;
}

/*----------------------------------------------*/
/*              MANAGEMENT MENU                 */
/************************************************/

#pgManagementMenu .content {
   padding:0px !important;
}

#pgManagementMenu .content .ui-li-has-thumb .ui-btn-inner a.ui-link-inherit {
    min-height: 45px;
}

#pgManagementMenu .ui-grid-a {
    margin-top:3px;
    margin-left:3px;
}

#pgManagementMenu .home-block {
    text-align:center;
    border:solid 1px #fff;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    cursor:pointer;
    margin:2px;
    width: 45% !important;
    float: left !important;
    display: block !important;
    padding: 20px 1% 1% 1% !important;
}

#pgManagementMenu .home-block:hover {
    box-shadow: 0 1px 3px !important;
    -webkit-box-shadow: 0 1px 3px !important;
}

#pgManagementMenu .home-block a {
     -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
   border:none !important;
    box-shadow: 0 0px 0px !important;
    -webkit-box-shadow: 0 0px 0px !important;
    background:transparent !important;
     font-weight:normal !important;   
}

/*----------------------------------------------*/
/*                CLOCKING                      */
/************************************************/

#pgClocking {
}

#pgClocking .content {
    text-align: center;
}

#pgClocking .ui-field-contain label {
    line-height: 2.3em;
}

#pgClocking .content .controls {
    margin-bottom: 2.5em;
}

#pgClocking .content .currently {
    margin: 0px;
    padding: 0px;
}

#pgClocking .content .clocked-status-in {
    margin-top: 5px;
    color: green;
}

#pgClocking .content .clocked-status-out {
    margin-top: 5px;
    color: darkred;
}

#pgClocking .geolocation-error {
    display: none;
    color: red;
    font-size: 0.8em;
    padding: 1.1em;
}

.clocking-action-message {
    min-height: 40px;
    text-align: center;
}

.clocking-action-message #action-message {
    font-style: italic;
    text-align: center;
}

#dlgComments {
}

#dlgComments .content #txtComments {
    min-height: 8em;
}

#dlgComments .content .chars-remaining {
    float: right;
}

#dlgComments .content .warning {
    display: none;
    color: red;
}

#dlgComments .content .error {
    display: none;
    color: red;
}

#pgTransfer {
}

#pgTransfer .geolocation-error {
    text-align: center;
    display: none;
    color: red;
    font-size: 0.8em;
    padding: 1.1em;
}

#pgTransfer .errors {
    display: none;
    color: red;
    font-size: 0.8em;
    padding: 1.1em;
}

#pgTransfer .ui-field-contain label {
    line-height: 2.3em;
}

.ui-btn-start-work, .ui-btn-start-break, .ui-btn-clock-out {
    color: white !important;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2) !important;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.075);
}

.ui-btn-start-work:active, .ui-btn-start-break:active, .ui-btn-clock-out:active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
    box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
}

.ui-btn-start-work {
    background-image: -webkit-linear-gradient(top,#5cb85c 0,#419641 100%);
    background-image: linear-gradient(to bottom,#5cb85c 0,#419641 100%);
    background-repeat: repeat-x;
    border-color: #3e8f3e !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c',endColorstr='#ff419641',GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false)
}

.ui-btn-start-work:hover, .ui-btn-start-work:focus {
    background-color: #419641;
}

.ui-btn-start-work:active, .ui-btn-start-work.active {
    background-color: #419641;
    border-color: #3e8f3e
}

.ui-btn-start-break {
    background-image: -webkit-linear-gradient(top,#f0ad4e 0,#eb9316 100%);
    background-image: linear-gradient(to bottom,#f0ad4e 0,#eb9316 100%);
    background-repeat: repeat-x;
    border-color: #e38d13 !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e',endColorstr='#ffeb9316',GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false)
}

.ui-btn-start-break:hover, .ui-btn-start-break:focus {
    background-color: #eb9316;
}

.ui-btn-start-break:active, .ui-btn-start-break.active {
    background-color: #eb9316;
    border-color: #e38d13
}

.ui-btn-clock-out {
    background-image: -webkit-linear-gradient(top,#d9534f 0,#c12e2a 100%);
    background-image: linear-gradient(to bottom,#d9534f 0,#c12e2a 100%);
    background-repeat: repeat-x;
    border-color: #b92c28 !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f',endColorstr='#ffc12e2a',GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.ui-btn-clock-out:hover, ui-btn-clock-out:focus {
    background-color: #c12e2a;
}

.ui-btn-clock-out:active, ui-btn-clock-out.active {
    background-color: #c12e2a;
    border-color: #b92c28
}

/*----------------------------------------------*/
/*                 MY DETAILS                   */
/************************************************/
#pgEmployee {
}

#pgEmployee .content .ui-field-contain .field-validation-error {
    text-align: left;
}

#pgEmployee .footer .navbar .ui-btn-text {
    font-size: 0.7em;
}



/*----------------------------------------------*/
/*                MESSAGE LIST                  */
/************************************************/
#pgMessages {
}

#pgMessages .content .top-controls-bar {
    position: relative;
    min-height: 30px;
    margin-top: -10px;
}

#pgMessages .content .toggle-notifications {
    position: absolute;
    left: 0;
}

#pgMessages .content .toggle-unread {
    /*
    position:absolute;
    right:0px;
    */
    position: relative;
    text-align: center;
}

#pgMessages .content .toggle-unread .refresh-messages {
    position: absolute;
    top: 12px;
    right: 5px;
}

#pgMessages .content .no-messages {
    text-align: center;
    padding-top: 10px;
}

#pgMessages .content .message-list li.unread {
}

#pgMessages .content .message-list li.unread h2 {
    font-style: italic;
    font-weight: bold;
}

#pgMessages .content .message-list li .highlight {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 10px;
}

#pgMessages .content .message-list li.unread .highlight {
    background-color: #FFE044;
}

/*----------------------------------------------*/
/*               MESSAGE DETAIL                 */
/************************************************/
#pgMessageDetail {
}

#pgMessageDetail .content .controls {
    margin-top: 30px;
}

/*----------------------------------------------*/
/*               MESSAGE CREATE                 */
/************************************************/
#pgMessageCreate {
}

#pgMessageCreate .content li.selectable.selected {
    background: #FFE044;
}

#pgMessageCreate .content .top-controls {
    min-height: 70px;
    margin-top: -5px;
    position: relative;
}

#pgMessageCreate .content .top-controls .selection-count {
    line-height: 50px;
}

#pgMessageCreate .content .top-controls .all-none-btngroup {
    display: inline-block;
}

#pgMessageCreate .content .top-controls .toggle-filters-btngroup {
    position: absolute;
    right: 5px;
    top: 0px;
}


/*----------------------------------------------*/
/*               MESSAGE FILTER                 */
/************************************************/
#pgMessageFilters {
}

#pgMessageFilters .content li.selectable.selected {
    background: #FFE044;
}

#pgMessageFilters .footer .navbar .ui-btn-text {
    font-size: 0.7em;
}


/*----------------------------------------------*/
/*              AUTHORISATION LIST              */
/************************************************/
#pgAuthorisation {
}

#pgAuthorisation .content .top-controls-bar {
    position: relative;
    min-height: 30px;
    margin-top: -10px;
    padding-bottom: 20px;
    border-bottom: 1px solid gray;
}

#pgAuthorisation .content .top-controls-bar .refresh-list {
    position: absolute;
    top: 4px;
    right: 5px;
}

#pgAuthorisation .content .top-controls-bar .date-selector {
    width: 100%;
}

#pgAuthorisation .content .top-controls-bar .date-selector td.left {
    width: 40px;
    text-align: center;
}

#pgAuthorisation .content .top-controls-bar .date-selector td.middle input {
    text-align: center;
}

#pgAuthorisation .content .top-controls-bar .date-selector td.right {
    width: 40px;
    text-align: center;
}

#pgAuthorisation .content ul.authorisation-list li {
}

#pgAuthorisation .content ul.authorisation-list li .controls {
    position: absolute;
    top: 0;
    right: 0;
}

#pgAuthorisation .content ul.authorisation-list li .controls a {
    float: right;
    margin-left: 1.2em;
    margin-right: 0.7em;
}

#pgAuthorisation .content ul.authorisation-list li .controls .spacer {
    float: right;
    display: inline-block;
    width: 26px;
    height: 26px;
    margin-left: 1.2em;
    margin-right: 0.7em;
}

#pgAuthorisation .content ul.authorisation-list li .details {
    margin-top: 0.25em;
    padding-left: 1em;
    font-size: 0.8em;
}

#pgAuthorisation .content ul.authorisation-list li .details .rostered {
    float: left;
    margin-right: 1em;
}

#pgAuthorisation .content ul.authorisation-list li .details .adjusted {
    float: left;
}

#pgAuthorisation .content ul.authorisation-list li .details .reason {
    clear: both;
    font-size: 0.8em;
}

#pgAuthorisation .content ul.authorisation-list li label.emp-code {
}

#pgAuthorisation .content ul.authorisation-list li label.emp-name {
    color: gray;
}

#pgAuthorisation .content ul.authorisation-list li .show-locked {
    float: right;
    margin-top: -25px;
}



/* Roster                  
---------------------------*/

#pgRoster {
}

#pgRoster .ui-collapsible-set {
    margin:0px !important;
    -webkit-border-top-left-radius: 0px;
    border-top-left-radius: 0px;
    -moz-border-radius-topleft: 0px;    
}

#pgRoster div.rosterItem-title {
    float: left;
}

#pgRoster div.unconfirmed {
    background-image: url('/content/images/tt_icons/question.gif');
    background-repeat: no-repeat;
    background-position: bottom right;
    height: 18px;
    width: 18px;
    float: left;
    padding: 0 0 0 10px;
}

#pgRoster div.info {
    background-image: url('/content/images/tt_icons/info.png');
    background-repeat: no-repeat;
    background-position: bottom right;
    height: 18px;
    width: 18px;
    float: left;
    padding: 0 0 0 10px;
}

#pgRoster div.accepted {
    background-image: url('/content/images/tt_icons/tick.gif');
    background-repeat: no-repeat;
    background-position: bottom right;
    height: 18px;
    width: 18px;
    float: left;
    padding: 0 0 0 10px;
}

#pgRoster div.rejected {
    background-image: url('/content/images/tt_icons/cross.gif');
    background-repeat: no-repeat;
    background-position: bottom right;
    height: 18px;
    width: 18px;
    float: left;
    padding: 0 0 0 10px;
}

#pgRoster table tr td {
    padding: 10px 0 0 0;
}

#pgRoster table tr td.label {
    text-align: right;
    font-weight: bold;
    width: 78px;
    padding-right: 10px !important;
}

#pgRoster table tr td a {
    text-align: center;
    width: 120px;
}

#pgRoster table tr.confirm p.message {
    margin: 0 10px 8px 10px;
    font-size: 17px;
    font-weight: bold;
}

#pgRoster #dlgRoster-action ul li a,
#pgRoster #dlgConfirm-action ul li a {
    margin-left: 10px;
    margin-right: 10px;
}

#pgRoster #dlgConfirm-action #message {
    margin: 10px;
    font-size: 15px;
}

#pgRoster p.morelink {
    padding-left: 15px;
    text-decoration: underline;
    cursor: pointer;
}

#pgRoster button.accept-offer img, 
#pgRoster button.reject-offer img {
    margin-top: 5px;
    width: 27px;
}

#pgRoster button.accept-offer.processing,
#pgRoster button.reject-offer.processing
 {
    padding: 0px;
    height: 38px;
    width: 100px;
}

#pgRoster li.roster-comments {
    text-overflow: initial;
    overflow: visible; 
    white-space:normal; 
}

/* Timesheet                  
---------------------------*/

#pgTimesheet {
}

/*#pgTimesheet div.timesheet-title {
    float: left;
}

#pgTimesheet table tr td {
    padding: 10px 0 0 0;
}

#pgTimesheet table tr td.label {
    text-align: right;
    font-weight: bold;
    padding-right: 10px !important;
}

#pgTimesheet table tr td.subtitle {
    font-weight: bold;
    font-size: 16px;
    padding-top: 20px;
}

#pgTimesheet p.morelink {
    padding-left: 15px;
    text-decoration: underline;
    cursor: pointer;
}*/

/* Timesheet Editor
---------------------------*/

/*#pgTimesheetEditor .mobile-breaks-grid, #pgTimesheetEditor .mobile-allowances-grid {
    width: 100%;
}

#pgTimesheetEditor .mobile-breaks-grid th, #pgTimesheetEditor .mobile-allowances-grid th {
    text-align: left;
    padding: 3px;
    border: none;
}

#pgTimesheetEditor .mobile-breaks-grid .firstth, #pgTimesheetEditor .mobile-allowances-grid .firstth {
    text-align: left;
    padding: 3px;
    border: none;
    -webkit-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
}

#pgTimesheetEditor .mobile-breaks-grid .lastth, #pgTimesheetEditor .mobile-allowances-grid .lastth {
    text-align: left;
    padding: 3px;
    border: none;
    -webkit-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-topright: 5px;
}

#pgTimesheetEditor .mobile-breaks-grid .check-box, #pgTimesheetEditor .mobile-allowances-grid .check-box {
    text-align: left;
    left: 10px;
    font-size: 15px;
}

#pgTimesheetEditor .mobile-breaks-grid tbody td, #pgTimesheetEditor .mobile-allowances-grid tbody td {
    padding: 3px;
}

#pgTimesheetEditor .mobile-breaks-grid tbody .lastColumn a, #pgTimesheetEditor .mobile-allowances-grid tbody .lastColumn a {
    left: 10px;
}

#pgTimesheetEditor .mobile-breaks-grid tfoot, #pgTimesheetEditor .mobile-allowances-grid tfoot {
    height: 20px;
}

#pgTimesheetEditor .payTypes, #pgTimesheetEditor .attachmentType {
    display: none;
}

#pgTimesheetEditor .totals {
    font-weight: bold;
}

#pgTimesheetEditor .ui-select .ui-btn-text {
    font-size: 70%;
}*/

.mobile-attachments-grid {
    width: 100%;
}

.mobile-attachments-grid .attachment-preview {
    display: block;
    vertical-align: top;
    background: #fff;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    padding: 5px;
}

.mobile-attachments-grid .attachment-delete {
    text-align: right;
    border-bottom: solid 1px silver;
    padding-bottom: 3px;
}

.mobile-attachments-grid .attachment-details {
    vertical-align: middle;
}

.mobile-attachments-grid .download-link {
    background: url('/content/images/tt_icons/disk.png') 0px 2px no-repeat;
    padding-left: 20px;
    vertical-align: top;
}

.timesheet-mobile-attachments .k-widget {
    display: none;
}

.timesheet-mobile-attachments .ui-body-c {
    border: none;
}

.mobile-attachments-grid .timesheet-attachment-item {
    vertical-align: top;
}

#btnAllowances label, #btnAllowances table {
    display: none;
}


/* Availability                  
---------------------------*/

#pgAvailability {
    margin: auto;
}

#availabilityContent {

}

#pgAvailability .ui-content {
    
}


#pgAvailability .leave-list li{
    cursor:pointer !important;
}

#pgAvailability .ui-shift-icon {
    width:30px;
    height:30px;
    float:left;
    display:block;
    margin-right:5px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-border-radius: 4px;
}

#pgAvailability .ui-shift-icon.avail {
    background:green;
}

#pgAvailability .ui-shift-icon.unavail {
    background:red;
}

#pgAvailability .ui-shift-icon.preferred {
    background:orange;
}

#pgAvailability .ui-shift-text.avail {
    color:green;
    font-weight:bold;
    display:block;
}

#pgAvailability .ui-shift-text.unavail {
    color:red;
    font-weight:bold;
    display:block;
}

#pgAvailability .ui-shift-text.preferred {
    color:orange;
    font-weight:bold;
    display:block;
}


#pgAvailability .menu {
    width: 157px;
    margin: auto;
    display: block;
}

#pgAvailability .title {
    font-weight: bold;
    font-size: 1.4em;
    line-height: 1.9em;
}

#pgAvailability table.legend {
    border-collapse: collapse;
    background-color: #eee;
    width: 100%;
}

#pgAvailability .day-title {
    font-size: 1.2em;
    border-radius: 0px;
    font-variant: small-caps;
    text-align: center;
    border-bottom: solid 2px #aaa;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    font-weight: bold;
    width: 14%;
    height: 30px;
}

#pgAvailability tr.week-summary td.week-day {
    text-align: center;
    width: 14%;
    height: 45px;
}

#pgAvailability tr.week-summary td.week-day .cell {
    cursor: pointer;
    position: relative;
    height: 45px;
    border: solid 1px #666;
    border-radius: 5px;
}

#pgAvailability tr.week-summary td.week-day .cell .times {
    position: absolute;
    margin-left: 2px;
}

#pgAvailability .cell .times div {
    float: left;
    padding-left: 2px;
    height: 20px;
    width: 22px;
}

#pgAvailability tr.week-summary td.week-day .cell .day {
    font-size: 1.6em;
    font-weight: bold;
    text-align: right;
    line-height: 1.2em;
    margin-right: 5px;
    padding-top: 20px;
}

#pgAvailability tr.week-summary div.available {
    background: url('/content/images/tt_icons/availicons16.png') 0px 3px no-repeat;
}

#pgAvailability tr.week-summary div.unavailable {
    background: url('/content/images/tt_icons/availicons16.png') 0px -23px no-repeat;
}

#pgAvailability tr.week-summary div.preferred {
    background: url('/content/images/tt_icons/availicons16.png') 0px -49px no-repeat;
}

#pgAvailability tr.week-summary div.leave {
    background: url('/content/images/tt_icons/availicons16.png') 0px -49px no-repeat;
}

#pgAvailability tr.week-summary div.leave.approved {
    background: url('/content/images/tt_icons/buttons.png') 0px -1240px no-repeat;
}

#pgAvailability tr.week-summary div.leave.requested {
    background: url('/content/images/tt_icons/buttons.png') 0px -1270px no-repeat;
}

#pgAvailability tr.week-summary div.leave.declined {
    background: url('/content/images/tt_icons/buttons.png') 0px -1300px no-repeat;
}

#pgAvailability table tr td {
    text-align: left;
    font-weight: normal;
}

#pgAvailability table tr td.label {
    font-weight: bold;
    padding-right: 10px !important;
}

#pgAvailability table tr td.label .time {
    font-weight: normal;
    font-size: 12px;
    margin-left: 10px;
}

#pgAvailability span.detaillink {
    text-decoration: underline;
    cursor: pointer;
}

#pgAvailability .ui-recurring-day {
    display:block;
    float:left;
    margin-right:5px;
    width:100px;
}

/* Availability Edit               
---------------------------*/
#pgAvailabilityEdit, label {
    font-size: 0.8em;
    font-weight: bold;
}

#pgAvailabilityEdit .available {
    background: #4c4;
    border-left: 1px solid #292;
    border-top: 1px solid #292;
    border-bottom: 1px solid #292;
}

#pgAvailabilityEdit .unavailable {
    background: #c44;
    border-left: 1px solid #922;
    border-top: 1px solid #922;
    border-bottom: 1px solid #922;
}

#pgAvailabilityEdit .preferred {
    background: #cc4;
    border-left: 1px solid #992;
    border-top: 1px solid #992;
    border-bottom: 1px solid #992;
}

#pgAvailabilityEdit .leave {
    background: #0080ff;
    border-left: 1px solid #0080ff;
    border-top: 1px solid #0080ff;
    border-bottom: 1px solid #0080ff;
}

#pgAvailabilityEdit #fullday-container,
#pgAvailabilityEdit #current-container,
#pgAvailabilityEdit #comment-container,
#pgAvailabilityEdit #leave-container {
   
}

#pgAvailabilityEdit #fullday-container div.title {
    width: 75px;
    margin: auto;
    color: #666;
    font-weight: bold;
    font-size: 1.2em;
    line-height: 1.9em;
}

#pgAvailabilityEdit div.leavetypes {
    width: 250px;
}

#pgAvailabilityEdit div.leaveadvance {
    width: 250px;
    margin-top: 10px;
}

#pgAvailabilityEdit div.leavebutton-container {
    width: 200px;
    margin-top: 10px;
}


/*----------------------------------------------*/
/*                      ATTENDANCE              */
/************************************************/
#pgAttendance .attendance-summary li {
    border-top:solid 1px #fff !important;
    border-bottom:none !important;
}