.job-page {}
.joblist {

}

#your-jobs #jobs { margin-top: 30px; }
    .dashboard #your-jobs #jobs { margin-top: 20px; }
    .dashboard #your-jobs { margin-top: 50px; }
    .dashboard .view-all-jobs { margin-top: 10px; }
    .dashboard .staff-primary { margin-bottom: 30px; }

    @media(max-width: 767px) {
        .dashboard #your-jobs { margin-bottom: 40px; }
    }

.jobBoards { 
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 10px;
    row-gap: 10px;
}
    .jobBoards.no-boards { display: block; }

    .jobBoard {
        padding: 10px;
        background: #eee;
        border-radius: 2px;
    }    

        .jobBoard .title {
            text-transform: uppercase;
            font-size: 16px;
            margin-bottom: 5px;
        }

        @media(min-width: 800px) {
            .jobBoards {
                grid-template-columns: repeat(4, 1fr);
            }

            .jobBoard { padding: 20px; }
        }


.job {
    font-size: 14px;
    padding: 20px;
    margin: 10px 0;
    background: #f6f6f6;
}
    .new-job-template { display: none !important; }
    .new-task-template { display: none !important; }
    .job-header { 
        margin-bottom: 10px;
    }
        .job-header .job-name { 
            font-size: 18px;
        }
        .job-header .job-name, .job-header .job-desc {
            cursor: pointer;
        }

        .job .job-header .view { display: block; }
        .job .job-header .edit { display: none; }

        .job.editing .job-header .view { display: none; }
        .job.editing .job-header .edit { display: block; }

        .job .job-header .details { 
            float: left;
            min-width: 50%;
            max-width: calc(100% - 400px);
        }
            .job .job-desc { margin-top: 5px; }

            @media(max-width: 799px) {
                .job .job-header .details { 
                    float: left;
                    width: calc(100% - 50px);
                }
                .job.collapsed .job-desc { display: none; }
            }

        .job-header .expander {  }
            .job-header .expander { 
                float: right;
                padding: 12px 5px;
                cursor: pointer;
                opacity: 0.5;
                margin-top: 2px;
            }
            .job-header .expander:after {
                text-transform: uppercase;
                font-size: 12px;
                margin-left: 10px;
                content: "▲";
                display: inline;
                margin-right: -5px;
            }
            .job-header .expander:hover { opacity: 1; }
            .job.collapsed .job-header .expander:after {
                content: "▼";
            }

            @media(max-width: 799px) {
                .job-header .expander { 
                    padding: 5px 15px;
                }
                .job-header .expander:after {
                    margin: 0;
                }
            }

            .job-header .job-status {
                float: left;
            }


            .job .job-header .allocations {
                float: right;
                margin-left: 20px;
                margin-top: 25px;
            }

            @media(min-width: 800px) {
                .job .job-header .allocations {
                    margin-top: 10px;
                }
                .job-header .job-status {
                    float: right;
                }
            }
            @media(max-width: 799px) {
                .job-header .job-status { clear: left; }
                .job .job-header .allocations { clear: right; }

                .job.collapsed .job-header .allocations { margin-top: 10px; }
                .job.collapsed .job-status .status { 
                    margin-top: 4px;
                }
            }
                .job-status .status { 
                    text-transform: uppercase;
                    font-size: 14px;
                    line-height: 25px;
                    margin-top: 20px;
                }
                    .job-status[data-attr-status='NEW'] .status { color: #990000; }

                .job-header .job-status .due {
                    font-size: 12px;
                    opacity: 0.5;
                }
                .job-header .job-status .due:not([data-attr-dueStatus = ""]) { opacity: 1; }
                .job-header .job-status .due:not([data-attr-dueStatus = ""]):before {
                    content: "DUE";
                    display: inline-block;
                    padding-right: 5px;
                    font-size: 11px;
                }


                @media(min-width: 800px) {
                    .job-status .status { 
                        margin-top: 4px;
                        text-align: right;
                    }

                    .job-status.no-due .status {
                        margin-top: 14px;
                    }
                }


    .job .job-details {  }

        .job.collapsed .job-details { display: none; }

        .job.editing .job-tasks { opacity: 0.2; }
        .job .form-control { opacity: 1; }

        .job-tasks { margin-top: 20px; }
        .job-taskgroup {
            margin: 10px 0 25px 0;
        }    
            .job-taskgroup-details { 
                font-size: 14px;
                padding: 15px 20px;
                background-color: #333;
                color: #fff;
            }
            .job-taskgroup-completed { 
                float: right;
            }
                .job-taskgroup-completed .expander { 
                    padding: 10px 5px;
                    cursor: pointer;
                    opacity: 0.5;
                }
                .job-taskgroup-completed .expander:after {
                    text-transform: uppercase;
                    font-size: 12px;
                    margin-left: 10px;
                    content: "▲";
                    display: inline;
                    margin-right: -5px;
                }
                .job-taskgroup-completed .expander:hover { opacity: 1; }
                .job-taskgroup.collapsed .expander:after {
                    content: "▼";
                }

            .taskgroup[data-attr-taskGroupID="0"] .tasklist, .job-taskgroup.collapsed .tasklist {
                display: none;
            }
            .job-taskgroup.collapsed { margin-bottom: 10px; }

            .new-taskgroup-template { display: none; }
            .job-actions a {
                padding: 10px 20px;
                font-size: 12px;
                margin-top: 10px;
                margin-left: 10px;
                float: right;
            }
            a.add-taskgroup { background-color: #999; }
            .job[data-attr-jobID="0"] .job-actions { display: none; }

            a.add-comment { margin-left: 0; float: none; }

        .job-tasks .tasklist {
            list-style-type: none;
            padding: 0 10px;
            margin: 0;
            background: #fff;
            border: 1px solid #ddd;
            display: block;
            width: 100%;
        }
            .taskgroup .job-taskgroup-details .edit { display: none; }
            .taskgroup .job-taskgroup-details .view { display: block; }

            .taskgroup.editing .job-taskgroup-details .view { display: none; }
            .taskgroup.editing .job-taskgroup-details .edit { display: block; }

                .taskgroup.editing .job-taskgroup-details .edit input[type="text"] {
                    background: #fff;
                    opacity: 100%;
                }


            .job-tasks .tasklist .task, .job-tasks .tasklist .add-task {
                margin: 0;
                padding: 10px;
                font-size: 14px;
                border: 0;
                border-bottom: 1px solid #f0f0f0;
                height: auto;
                color: #222;
            }
                .job-tasks .tasklist .task .view { display: block; vertical-align: top; }
                .job-tasks .tasklist .task .edit { display: none; }
                .job-tasks .tasklist .task.editing .view { display: none; }
                .job-tasks .tasklist .task.editing .edit { display: block; }


                .job-tasks .tasklist .task.checked { color: #666; }


                .task .inline-label, .job input.date, .job input.time, .job .inline-label { float: left; width: auto; }
                .task .inline-label, .job .inline-label { line-height: 40px; text-transform: uppercase; color: #999; font-size: 12px; padding-right: 10px; }
                .job input.date, .job input.time { min-width: 200px; }


            .job-tasks .tasklist .task input, .job-header input { 
                margin-right: 10px;
            }
            .job-tasks .tasklist .task input[type="Checkbox"] { 
                cursor: pointer;
                vertical-align: top;
                margin-top: 9px;
            }



            .job-tasks .tasklist .task[data-attr-taskID="0"] input[type="Checkbox"] { visibility: hidden; }

            .job-allocations .typeahead__container { margin: -2px 0; }
            .task .typeahead__container { margin: -8px 0; }

            .task .taskname {
                cursor: pointer;
                padding: 5px 20px 5px 0;
                display: inline-block;
            }

                @media(max-width: 767px) {

                    .job-tasks .tasklist .task input[type="Checkbox"] { 
                        vertical-align: top;
                        margin-top: 4px;
                    }

                    .task .taskname {
                        max-width: 70%;
                        display: inline-block;
                    }
                    .task .taskname {
                        padding: 0 5px 0 0;
                    }
                }
                @media(min-width: 1080px) {
                    .task .taskname {
                        max-width: calc(100% - 200px);
                    }
                }


            .task .view .due, .task .completed {
                padding-top: 0;
                font-size: 12px;
                color: #999;
                line-height: 20px;
            }

            .task .view .due {
                float: right;
                margin-left: 15px;
            }
                .task .view .due:before {
                    content: "DUE: ";
                    display: inline;
                    font-size: 11px;
                }
                .task .view .due[data-attr-duestatus="overdue"], .job-header .job-status .due[data-attr-duestatus="overdue"], .your-tasks .due[data-attr-duestatus="overdue"] {
                    color: #990000;
                }
                .task .view .due[data-attr-duestatus=""], .job-header .job-status .due[data-attr-duestatus=""] {
                    display: none;
                }

            .task .completed { 
                display: none;
                padding-top: 0;
                font-size: 12px;
                color: #999;
                line-height: 20px;
            }
                .task.completed .completed { display: block; color: #ccc; }

            .task .allocations { 
                float: right;
                margin-left: 20px;
                margin-right: -10px;
            }
                .task[data-attr-taskID="0"] .allocations, .job[data-attr-jobID="0"] .allocations { display: none; }

                    @media(max-width: 1200px) {
                        .task.completed .completed { margin-top: 4px; }
                    }

                    @media(min-width: 1081px) {
                        .task .view { position: relative; }
                        .task .allocations.adding { padding-bottom: 70px; }
                        .task .allocations.adding .add { 
                            position: absolute;
                            right: -15px;
                            bottom: 0px;
                            width: 150px;
                        }
                    }


                .profile-pic, a.add-allocation { 
                    width: 30px;
                    height: 30px;
                    display: block;
                    overflow: hidden;
                    background-size: cover;
                    border-radius: 20px;
                    /*  margin-top: -4px; */
                    margin-bottom: -10px;
                    background-position: center center;
                    float: right;
                    margin-right: 2px;
                }
                    .profile-pic.initials {
                        border: 0;
                        background: #e6e6e6;
                        color: #222;
                    }
                        .profile-pic.initials span {
                            line-height: 30px;
                            vertical-align: middle;
                            text-align: center;
                            display: block;
                            height: 100%;
                            font-size: 12px;
                        }

                    .profile-pic img { 
                        max-width: 100%;
                        max-height: 100%;
                        border-radius: 10px;
                        visibility: hidden;
                    }
                    .profile-pic:hover { position: relative; }
                    .profile-pic:hover:after {
                        display: block;
                        position: absolute;
                        content: "X";
                        background: rgba(155, 0, 0, 0.6);
                        color: #fff;
                        font-size: 14px;
                        line-height: 30px;
                        text-align: center;
                        font-weight: 200;
                        z-index: 50;
                        top: 0;
                        /* bottom: 0; */
                        width: 100%;
                        height: 100%;
                    }
                    .profile-pic.initials:hover:after { background: rgba(155,0,0,0.75); }
                    .profile-pic.initials:hover span { opacity: 0.5; }

                    .allocations .add { float: right; }
                    .task .allocations .add {
                        width: 30px;
                        height: 30px;
                    }
                    .task .allocations.adding .add { width: auto; }

                    .allocations .add-allocation { display: block; }
                    .allocations .allocate-new-member { display: none; }
                    .allocations.adding .add-allocation { display: none; }
                    .allocations.adding .allocate-new-member { display: block; margin-right: 5px; }

                    a.add-allocation { 
                        background: #e6e6e6;
                        color: #fff;
                        font-size: 21px;
                        line-height: 28px;
                        text-align: center;
                        font-weight: 200;
                    }
                    a.add-allocation:hover { background: #222; text-decoration: none; }

                    @media(max-width: 1080px) {
                        .task .view { position: relative; }
                        .task .taskname { max-width: calc(70% - 15px); }
                        .task .allocations {
                            max-width: calc(30% - 20px);
                            margin-left: 10px;
                        }
                        .task .allocations .add {
                            margin-bottom: 5px;
                        }
                        .profile-pic, a.add-allocation {
                            float: right;
                            margin-top: 0;
                            margin-bottom: 5px;
                        }
                        .task .allocations.adding {
                            padding-bottom: 60px;
                            min-height: 80px;
                        }
                        .task .allocations.adding .add { 
                            width: 100%;
                            height: auto;
                            position: absolute;
                            left: 0;
                            right: 0;
                            bottom: 0;
                        }
                        .task .allocations.adding .allocate-new-member { 
                            width: 100%;
                            margin-top: 10px;
                        }
                        .task .typeahead__container { margin: 0; }
                        
                    }

                    /* Job Allocations Size Adjustments */
                    .job-header .allocations { margin-top: 5px; }
                    .job-header .profile-pic, .job-header a.add-allocation { 
                        width: 40px;
                        height: 40px;
                    }
                        .job-header a.add-allocation { line-height: 34px; }
                        .job-header .profile-pic.initials span { line-height: 40px; }
                        .job-header .profile-pic:hover:after { line-height: 40px; }


            .job-tasks .tasklist .add-task {
                color: rgba(0,0,0,0.5);
                border-bottom: none;
            }
                .job-tasks .tasklist .add-task:hover { color: #222; cursor: pointer; }

            .job-tasks .tasklist .task .edit div:first-child {

            }
                .task .edit input { 
                    /* Maybe later add allocations to the right here */
                }
                .task .edit a, .taskgroup .edit a, .job-header .edit a, .job-comment .edit a {
                    width: 80px;
                    height: 40px;
                    text-align: center;
                    font-size: 12px;
                    padding: 11px;
                }
                .task .edit .mani-btn.save, .taskgroup .edit .mani-btn.save, .job-header .edit .mani-btn.save, .job-comment .edit .mani-btn.save {
                    margin-right: 20px;
                }    
                    .job-taskgroup-details .edit .mani-btn.save, .job-header .edit .mani-btn.save, .job-comment .edit .mani-btn.save { 
                        background-color: #900;
                    }

                .task .edit .cancel, .job-header .edit .cancel, .job-comment .edit .cancel { color: #222; }
                .job-taskgroup-details .edit .cancel { color: #ccc; }
                .task .edit .delete, .job-taskgroup-details .edit .delete, .job-header .edit .delete, .job-comment .edit .delete { float: right; }
                .job-taskgroup-details .edit .delete { color: #f66; }
                .job .mani-btn:hover { text-decoration: none; }





            .job-comments { 
                margin-bottom: 30px;
                margin-top: 30px;
                border: 1px solid #ddd;
                background: #fff;
            }
                .job-comments.no-comments { display: none; }
                .job[data-attr-jobID="0"] .job-comments { display: none; }


                .job-comments-header {
                    padding: 10px 15px;
                    border-bottom: 1px dashed #ddd;
                    text-transform: uppercase;
                    font-size: 12px;
                }

                .job-comment {
                    padding: 10px 15px;
                    border-bottom: 1px dashed #ddd;
                }

                    .job-comment:last-child { border-bottom: 0; }    
                    .job-comment.mine { 
                        cursor: pointer;
                     }
                    .new-comment-template { display: none; }

                    .job-comment .view { display: block; }
                    .job-comment .edit { display: none; }

                    .job-comment.editing .view { display: none; }
                    .job-comment.editing .edit { display: block; }

                    .job-comment .details { 
                        font-size: 12px;
                        color: #999;
                        line-height: 20px;
                        margin-top: 5px;
                    }

                    @media (min-width: 767px) {
                        .job-comment .comment-text {
                            max-width: calc(100% - 200px);
                            float: left;
                        }
                        .job-comment .details { 
                            max-width: 200px;
                            float: right;
                            margin-top: 0;
                        }
                    }


/* Work Dashboard */

.work-dashboard .table-widget {
    display: block;
    clear: both;
    padding-top: 15px;
    padding-left: 0;
    padding-right: 0;
}   

    @media(min-width: 768px) {
        .work-dashboard .table-widget { 
            width: 100%;
            padding-top: 30px;
        }
    }

        .work-dashboard .table-widget h3 {
            margin-bottom: 20px;
            font-size: 18px;
            text-transform: uppercase;
            display: inline-block;
        }

        .work-dashboard .table-widget-inner { 
            border: 1px solid rgba(0, 0, 0, 0.25);
            display: table;
            width: 100%;
        }

        .work-dashboard .table-widget a, .work-dashboard .table-widget-heading {
            color: #222;
        }
            .work-dashboard .table-widget a.view-more {
                text-transform: uppercase;
                display: inline-block;
                margin-left: 20px;
                font-size: 14px;
                float: right;
                margin-top: 25px;
                line-height: 30px;
            }

        .work-dashboard .table-widget-row {
            font-size: 16px;
            color: #222;
            width: 100%;
            display: table-row;
            clear: both;
            text-transform: uppercase;
        }
            .work-dashboard .table-widget-row:after { content: ''; display: block; clear: both; }
            
            .work-dashboard .table-widget-row:nth-child(odd) {
                background: #eee;
            }
            .work-dashboard .table-widget-row:nth-child(even) {
                background: #f9f9f9;
            }

            .work-dashboard .table-widget-row.heading .col  {
                border-top: 1px solid rgba(0,0,0,0.25);
                border-bottom: 1px solid rgba(0,0,0,0.25);
            }
            .work-dashboard .table-widget-row.heading:first-child .col {
                border-top: 0;
            }

            .work-dashboard .table-widget-row .col { 
                display: table-cell;
                line-height: 20px;
                min-height: 20px;
                border-right: 1px solid rgba(0,0,0,0.25);
                padding: 8px 16px;
                font-size: 12px;
            }
            .work-dashboard .table-widget-row .col:last-child { border-right: 0; }
            .work-dashboard .table-widget.small-only { display: none; }

            @media(max-width: 767px) {
                .work-dashboard .table-widget.mobile-adjust .table-widget-row,
                .work-dashboard .table-widget.small-only .table-widget-row { 
                    padding: 15px 15px;
                    display: block;
                }
                .work-dashboard .table-widget.small-only .table-widget-row { 
                    border-bottom: 1px solid #bbb;
                }
                .work-dashboard .table-widget.small-only .table-widget-row:last-child { border-bottom: none; }

                .work-dashboard .table-widget.mobile-adjust .table-widget-row:first-child { display: none; }

                .work-dashboard .table-widget.mobile-adjust .table-widget-row .col,
                .work-dashboard .table-widget.small-only .table-widget-row .col { 
                    font-size: 13px;
                    padding: 0;
                    display: block;
                    opacity: 0.8;
                    border-right: 0 !important;
                }
                .work-dashboard  .table-widget.mobile-adjust .table-widget-row .col:first-child {
                    font-size: 16px;
                    opacity: 1;
                    padding: 5px 0;
                }
                .work-dashboard .table-widget.mobile-adjust .col.link { margin-top: 12px; }

                .work-dashboard  .table-widget.mobile-adjust .col.email:before {
                    content: "Email: ";
                    color: #999;
                }
                .work-dashboard .table-widget.mobile-adjust .col.mobile:before {
                    content: "Mobile: ";
                    color: #999;
                }
                .work-dashboard .table-widget.mobile-adjust .col.age:before {
                    content: "Age: ";
                    color: #999;
                }
                .work-dashboard .table-widget.mobile-adjust .col.medical:before {
                    content: "Medical Issues: ";
                    color: #999;
                }
                .work-dashboard .table-widget.mobile-adjust .col.emergency:before {
                    content: "Emergency Contact: ";
                    color: #999;
                }
                .work-dashboard .table-widget.mobile-adjust .col.interests:before {
                    content: "Interests: ";
                    color: #999;
                }
                .work-dashboard .table-widget.large-only { display: none; }
                .work-dashboard .table-widget.small-only { display: block; }

                .work-dashboard .table-widget.small-only .col { 
                    display: block;
                }
            }

            /* Table Specific */
            .your-jobs .status .completed-count { float: right; }

            #booktrial .form-controls[data-attr-elementname='submit'] {
                float: left;
            }
            .trial-booking .name.col a { display: inline-block; margin-top: 5px; }
            .trial-booking .name.col .contact-details {
                color: #999;
                padding: 5px 0;
                font-size: 12px;
            }
                .trial-booking .date.col .fulldate, .trial-booking .sessiontime {
                    color: #999;
                    font-size: 12px;
                }
                .trial-booking .span-status { 
                    font-size: 16px;
                    text-transform: uppercase;
                    color: #999;
                }
                    .trial-booking .span-status:before, .trial-booking .span-status:after {
                        display: inline-block;
                        margin: 0 5px;
                        font-size: 18px;
                        color: #aaa;
                    }
                    .trial-booking .span-status:before {
                        content: "[";
                        margin-left: 10px;
                    }
                    .trial-booking .span-status:after {
                        content: "]";
                        margin-right: 10px;
                    }

                    .trial-booking .span-status.deleted, .trial-booking .span-status.deleted:before, .trial-booking .span-status.deleted:after { color: #880000; }

            .trial-booking .additional-options { padding: 10px 0 20px 0; }

            @media(min-width: 767px) {
                .trial-booking .additional-options { 
                    float: right;
                    margin-top: -30px;
                    padding: 0;
                }
            }

            .scanlog .table-widget-row.status-closed, .scanlog .table-widget-row.status-inactive, .scanlog .table-widget-row.status-suspended  { 
                background-color: rgba(241, 43, 74, 0.25);
            }
            .scanlog .table-widget-row.status-closed .col, .scanlog .table-widget-row.status-inactive .col, .scanlog .table-widget-row.status-suspended .col {
                border-bottom: 1px solid rgba(0,0,0, 0.25);
            }
            .scanlog #table-widget-row-template { display: none; }

            .work-dashboard.scan-log { position: relative; }
            .scan-log .scanlog .table-widget-heading { display: none; }

            .report-dashboard .heading span {
                font-size: 11px;
                color: #a00;
                margin-left: 5px;
            }
                .report-dashboard .large-only .agedistribution span {
                    display: inline-block;
                    text-align: left;
                }
                .report-dashboard .small-only .agedistribution span { 
                    padding-right: 5px;
                    color: #666;
                }
                .report-dashboard .small-only .agedistribution .col > div:first-child { 
                    font-size: 15px;
                    margin-bottom: 6px;
                }

                .report-dashboard .large-only .agedistribution .col > span:last-child { color: #a00; float: right; }
                .report-dashboard .large-only .agedistribution .table-widget-row.totals .col > span:last-child { color: #222; }
                .report-dashboard .large-only .agedistribution span:first-child span, .report-dashboard span.sublabel { color: #999; margin-left: 5px; }
                
                .report-dashboard span.splitcell { width: 50%; }
                .report-dashboard span.splitcell:last-child { float: right; }

                @media(max-width:992px) {
                    .report-dashboard span.splitcell { width: 100%; }
                    .report-dashboard span.splitcell:last-child { float: none; }
                }

        .work-dashboard .scanlog a.scanloglink { float: right; color: #880000; }