/**
 * GENERAL
**/

.x-hasbadge .x-badge {
    z-index: 4!important;
}

/**
 * MessageBox
**/

.x-msgbox-inner .x-msgbox-text .x-innerhtml {
    font-size: 0.9em;
}

/**
 * Button
**/
.x-toolbar.toolbar-margin-top .x-button { /* Temporary fix for timereport toolbar */
    margin-top: .4em;
}

.x-toolbar.toolbar-nostyle.x-toolbar-dark .x-button {
    margin-top: .6em;
}

/**
 * Toolbar
**/
.x-toolbar .x-toolbar-inner .x-title {
    font-size: 17px;
    font-weight: bold;
    /*padding-top: 5px;*/
}

.x-toolbar.toolbar-nostyle.x-toolbar-dark,
.x-toolbar.toolbar-nostyle-bottom.x-toolbar-dark {
    background: none;
    font-size: 0.9em;
    border-top: 0;
}

.toolbar-nostyle-bottom {
    margin-top: 5px;
    margin-bottom: 5px;
    height: 30px;
}

/* Select field */
.x-field-select.x-field.selectsort {
    margin-top: 5px;
}

.x-toolbar .x-field {
    margin: .3em;
}

/**
 * Panels
**/

/* Collapsible panels */
.isflexed {
    -webkit-box-flex: 10!important;
}


/**
 * Login
**/

/* Logo */
.login-logo {
    background: url("../Images/logo.png") no-repeat scroll center center transparent;
    width: 100%;
    height: 50px;
}

.custom .login-logo {
    background-repeat: no-repeat;
    background-position: center center;
}

/* Form */
.loginForm .x-form-fieldset-title {
    font-size: 0.9em!important;
}

.loginForm .x-field.x-field-labeled .x-form-label {
    font-size: 0.9em;
    padding-top: 0.7em;
}

/**
 * Todopage
**/
.x-toolbar-listtitle .x-field-select .x-component-outer::before {
    padding-left: 12px;
    border-left: 0!important;
}

/**
 * Dayview
**/
.x-button.x-button-plain,
.x-toolbar .x-button.x-button-plain {
    padding-top: 0.6em;
}

/**
 * Timereporting
**/
.x-toolbar.x-toolbar-sub .x-toolbar-title {
    padding-top: 0;
}

.timereporting-form {
    font-size: 0.8em;
}

.timereporting-form .x-scroll-container > .x-inner {
    padding: 0.5em;
}

.x-form-fieldset-title {
    color: #434343!important;
    text-shadow: 1px 1px 0 #fff!important;
    font-weight: normal!important;
    font-size: 1em!important;
}

/**
 * Booking info
**/
.timereporting-form .x-field-input .x-input-el {
    font-size: 0.9em;
    padding-top: 0.6em;
}

/* BookingInfo state info buttons */
.x-button-accepted,
.x-button-declined {
    height: 25px;
}

.x-button-accepted.x-item-disabled .x-button-icon,
.x-button-accepted.x-item-disabled .x-button-icon,
.x-button-plain.x-item-disabled .x-button-icon {
    opacity: 1;
    margin-top: -5px;
}

.x-button-plain.acceptBtn.x-item-disabled .x-button-icon {
    background-color: #55AE21;
    background-image: -webkit-linear-gradient(#d0f864, #55ae21);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d0f864), to(#55ae21));
}

.x-button-plain.declineBtn.x-item-disabled .x-button-icon {
    background-color: #a00101;
    background-image: -webkit-linear-gradient(#e8565a, #db0101);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e8565a), to(#db0101));
}

.readOnlyField .x-item-disabled .x-form-label span,
.readOnlyField .x-item-disabled input,
.readOnlyField .x-item-disabled .x-input-el,
.readOnlyField .x-item-disabled .x-spinner-body,
.readOnlyField .x-item-disabled select,
.readOnlyField .x-item-disabled textarea,
.readOnlyField .x-item-disabled .x-field-clear-container {
    color: #000;
    -webkit-text-fill-color: #000;
}

/**
 * Help
**/
.x-panel .x-toolbar-sub .x-body {
    background:  transparent;
}

.x-button.small-btn {
    margin-top: 3px;
}

.helptext {
    font-size: 0.9em;
}

.helptext h3 {
    border-bottom: 1px solid #d0d0d0;
    padding-bottom: 0.6em;
    margin-bottom: 0.7em;
}

.helptext h4 {
    color: #555;
    font-weight: bold;
    margin-bottom: 0;
}


/**
 * Lists
**/

/* TodoOffersList */
.todoOffersList {
    border-top: 4px solid #f0f0f0;
}

/* List toolbar */
.x-toolbar-listtitle {
    height: 35px;
}

.x-toolbar.x-toolbar-listtitle.x-docked-top {
    border-bottom:  0.1em solid #888;
}
.x-toolbar-listtitle .x-toolbar-inner .x-title {
    font-size: 14px;
    color: #444;
}

.x-list.todolist .x-list-item .x-list-item-label,
.x-list.todoOffersList .x-list-item .x-list-item-label {
    padding:  0;
    min-height: 2.2em;
    border:  0;
    float: left;
    width: 100%;
}

.x-list .x-list-item {
    border: 0;
}

.x-list .x-list-item .x-list-item-label {
    float: left;
    width: 100%;
    padding: 0.5em 0.6em 0 0.6em;
}


.todolist .item-state-unreported,
.todolist .item-state-absence,
.todolist .item-state-offer,
.todoOffersList .item-state-offer {
    min-height: 2.6em;
    padding: 0.4em;
    width: 100%;
    float: left;
}

.todolist .toprow,
.todoOffersList .toprow {
    float: left;
    width: 100%;
    margin-bottom: 5px;
}

    .todolist .toprow .date,
    .todoOffersList .toprow .date {
        font-weight: bold;
        color: #fff;
        float: left;
        text-align: left;
    }

    .todolist .toprow .time,
    .todoOffersList .toprow .time {
        text-align: right;
        float: right;
        font-size: 14px;
        font-weight: bold;
    }

    .todolist .description,
    .todoOffersList .description {
        float: left;
        width: 100%;
        font-size: 0.7em;
        overflow: auto;
    }


/* Todolist */
.todolist .item-state-unreported .customer {
    color: #3e597f;
}

    .todolist .item-state-unreported .toprow .time {
        color: #6187ad;
    }

/* Workperiod list */
.workperiod .item-state-unreported,
.workperiod .item-state-confirmed,
.workperiod .item-state-absence,
.workperiod .item-state-offer,
.workperiod .item-state-offer-confirmed,
.workperiod .item-state-offer-declined {
    font-size: 0.7em;
    min-height: 2.6em;
    padding: 0.7em 0.6em 0.7em 0.6em;
    width: 100%;
    float: left;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

        .workperiod .toprow {
            float: left;
            width: 100%;
            margin-bottom: 6px;
        }

            .workperiod .toprow .date {
                font-weight: bold;
                color: #fff;
                float: left;
                text-align: left;
            }

            .workperiod .toprow .state {
                text-align: right;
                float: right;
            }

        .workperiod .description {
            float: left;
            width: 100%;
            height: 18px;
            overflow: hidden;
        }

.x-list.workperiod .x-list-item:last-child:nth-child(odd) .x-list-item-label,
.x-list.workperiod .x-list-item:first-child,
.x-list.workperiod .x-list-item:last-child .x-list-item-label,
.x-list.workperiod .x-list-item:first-child .x-list-item-label {
    border: 0;
}

/* Offers */
.item-state-offer .customer {
    color: #444;
}

    .item-state-offer .toprow .time {
        color: #666;
    }

.x-list.workOffersList .x-list-item:last-child {
    border: 0;
}

/* Selected list item style */
.x-list .x-list-item.x-item-selected .x-list-item-label,
.x-list .x-list-item.x-item-selected {
    background:  none;
    border: 0;
}


.x-list .x-list-item.x-item-selected .item-state-unreported,
.x-list .x-list-item.x-item-selected .item-state-confirmed,
.x-list .x-list-item.x-item-selected .item-state-absence,
.x-list .x-list-item.x-item-selected .item-state-offer,
.x-list .x-list-item.x-item-selected .item-state-offer-confirmed,
.x-list .x-list-item.x-item-selected .item-state-offer-declined,
.x-list .x-list-item.x-item-selected .absenceReason {
    border: 0;
    border-top: 1px solid #c0c0c0;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#797979), to(#3f3f3f));
    background-image: -webkit-linear-gradient(top, #797979, #3f3f3f);
    text-shadow: 0 0;
}
    .x-list .x-list-item.x-item-selected .date {
        color: #fff;
        text-shadow: 0 0;
    }

    .x-list .x-list-item.x-item-selected .state,
    .x-list .x-list-item.x-item-selected .time {
        color: #bbb;
    }

    .x-list .x-list-item.x-item-selected .description,
    .x-list .x-list-item.x-item-selected .customer {
        color: #ccc;
    }

/* isLocked styling */
.x-list .x-list-item .isLocked .toprow,
.x-list .x-list-item .isLocked .description{
    width: 85%;
}

.x-list .x-list-item .isLocked .locked {
    -webkit-mask-image: url('../images/lock_mask.png');
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    float: right;
    width: 35px;
    height: 35px;
}