/* =============================================================================
 * CUSTOM FONTS
 * ========================================================================== */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700&subset=latin,latin-ext);

@font-face {
    font-family: 'Guersney';
    src: url('../fonts/Guersney/guersney-regular.woff2') format('woff2'),
         url('../fonts/Guersney/guersney-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* =============================================================================
 * OVERRIDES
 * ========================================================================== */
* {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, sans-serif;
    outline: none;
}

img, fieldset, iframe {
    border: none;
}

table {
    border-spacing: 0;
}

body {
    margin: 0;
    padding: 0;
    background-color: #1a3143;
    font-size: 80%;
    font-family: Verdana, Arial, sans-serif;
    color: #111;
}

a {
    color: #0b5daf;
    text-decoration: none;
}


p, h1, h2, h3, h4, h5, h6, ol, ul {
    margin: 10px 0;
}

h1 {
    display: inline-block;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.5em;
    font-weight: 700;
    line-height: 26px;
    vertical-align: top;
    padding: 20px 0;
}

    header h1 {
        position: relative;
        width: 360px;
        height: 72px;
        margin: 0;
        padding: 0;
        background: url(../images/layout/logo-ProjectileCRM-Large.jpg) no-repeat;
        line-height: 72px;
        text-indent: -9000px;
    }

    h1 a, .faqs h1, .help h1, .privacy h1, .terms h1 {
        color: #fff;
        text-shadow: 0 2px #000;
    }

        h1 i[class*=fa] {
            padding-right: 5px;
        }

        #container #contentContainer h1 a {
            font-family: Verdana;
            font-weight: 700;
        }

    h2, h3, h4 {
        margin: 0;
        color: #fff;
        font-family: 'Open Sans', sans-serif;
        font-size: 1.5em;
        text-shadow: 0 2px #000;
    }

        p + h2, ol + h2 {
            margin-top: 20px;
        }

        h2 a, h3 a, h4 a {
            color: #fff;
            font-family: 'Open Sans', sans-serif;
            text-shadow: 0 2px #000;
        }

        div#detailContent h2, div#tabbedContent h2, div#timeContainer h2 {
            color: #000;
            text-shadow: none;
        }

        .dashboard h2 {
            margin-top: 15px;
            padding-left: 35px;
            background: url(../images/layout/icons-Headings.png) no-repeat;
            overflow: auto;
        }

            .dashboard h2.email {
                margin-top: 0;
                background-position: 0 -40px;
            }

            .dashboard h2.calendar {
                background-position: 0 -120px;
            }

            .dashboard h2.notes {
                background-position: 0 -80px;
            }

            .dashboard h2 a {
                display: block;
                float: left;
            }

                .dashboard h2.notes a.add {
                    float: right;
                    width: 16px;
                    background: url(../images/layout/icons-Add.png) -24px 6px no-repeat;
                    text-indent: -9000px;
                }

        h2.time-week {
            margin: 0 0 10px 8px;
        }

    ol li, ul li {
        margin: 0;
        padding: 0;
    }

    ol, ul {
        padding-left: 30px;
    }

        .account ol li {
            clear: left;
        }

        .account ol ul {
            margin: 5px 0;
            overflow: auto;
            list-style-type: disc;
        }

            .account ol ul li {
                float: left;
                clear: none;
                width: auto;
                padding-right: 25px;
            }

    .projects p#retainerHours {
        margin-left: 5px;
    }

        .projects p#retainerHours span {
            display: inline-block;
            padding: 0 4px;
            background: #377cb3;
            border: 1px solid #2f638f;
            border-top-color: #29567c;
            border-bottom-color: #326a99;
            border-radius: 3px;
            color: #fff;
        }

            .projects p#retainerHours span.overallocated {
                background: #b43434;
                border-color: #882727 #882727 #a73030;
            }

            .projects p#retainerHours span.underallocated {
                background: #6c9633;
                border-color: #517126 #5e822c #648b2f;
            }

    p.label {
        line-height: 1.5em;
    }

/* Override Summerlite's styling of generic close class */
.close {
    float: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    opacity: inherit;
}

    .modal .close, .note-modal .close {
        float: right;
        font-size: 21px;
        line-height: 1;
        color: #000;
        opacity: 0.2;
    }


/* =============================================================================
 * FORM STYLES
 * ========================================================================== */
form {
    display: block;
    padding-bottom: 19px;
    overflow: hidden;
}

    .projects.lists form {
        overflow: visible;
    }

fieldset {
    display: block;
    float: left;
    width: 402px;
}

    fieldset.clear {
        clear: left;
    }

    fieldset.double {
        width: 804px;
    }

    fieldset.full {
        float: none;
        width: 100%;
        margin: 0;
    }

    fieldset legend {
        padding-bottom: 10px;
        font-weight: bold;
        font-size: 0.8em;
        color: #000;
    }

    fieldset ol {
        margin-right: 50px;
        padding: 0;
        list-style-type: none;
        overflow: hidden;
    }

        fieldset ol li {
            position: relative;
            float: left;
            clear: left;
            width: 100%;
            padding-top: 10px;
        }

            fieldset ol li:first-child {
                padding-top: 0;
            }

            fieldset ol li label {
                display: block;
                line-height: 1.5em;
                cursor: pointer;
            }

                fieldset ol li label.small {
                    font-size: 1.0em;
                    line-height: 1.2em;
                }

                fieldset ol li.checkbox label, fieldset ol li.radio label {
                    display: inline-block;
                    padding-bottom: 5px;
                    padding-top: 6px;
                    vertical-align: middle;
                }

                    fieldset ol li.checkbox label.alt, fieldset ol li.radio label.alt {
                        display: block;
                        padding-bottom: 0;
                        padding-top: 0;
                    }

                    fieldset ol li.checkbox input + label {
                        margin-right: 15px;
                    }

                        fieldset ol li.checkbox input + label:last-child {
                            margin-right: 0;
                        }

                fieldset ol li.error label {
                    color: #CC0000;
                    font-weight: bold;
                }

                fieldset.full ol li label {
                    width: auto;
                }

                fieldset ol li small {
                    display: block;
                    padding-top: 3px;
                    font-size: 0.85em;
                    line-height: 1.2em;
                }

            input, select, textarea {
                box-sizing: border-box;
                width: 100%;
                margin: 0;
                padding: 6px 5px;
                border: 1px solid #a9a9a9;
                border-radius: 0;
                font-family: Verdana, Arial, sans-serif;
                font-size: 1.0em;
            }

                input:not([type="submit"], [type="checkbox"], [type="radio"]), select, textarea {
                    border: 1px solid #bababa;
                }

                input[type="checkbox"], input[type="radio"] {
                    padding: 0;
                    border: none;
                }

                input.error, select.error, textarea.error
                {
                    background: #FEF1EC;
                    border: 1px solid #CD0A0A;
                    -moz-box-shadow      : inset 1px 1px 2px 0px rgba(205, 10, 10, .35);
                    -webkit-box-shadow: inset 1px 1px 2px 0px rgba(205, 10, 10, .35);
                    box-shadow          : inset 1px 1px 2px 0px rgba(205, 10, 10, .35);
                    outline: rgba(205, 10, 10, .25) solid 1px;
                }

                table#list tr td input {
                    width: auto;
                }

                fieldset ol li.currency input {
                    padding-left: 15px;
                    text-align: right;
                }

                fieldset ol li.percentage input {
                    padding-right: 18px;
                    text-align: right;
                }

                fieldset ol li.half {
                    width: 48%;
                    margin-right: 4%;
                }

                    fieldset ol li.half + li.half, fieldset ol li.half + li.half + li.half + li.half, fieldset ol li.half + li.half + li.half + li.half + li.half + li.half {
                        clear: none;
                        margin-right: 0;
                    }

                    fieldset ol li.half + li.half + li.half, fieldset ol li.half + li.half + li.half + li.half + li.half {
                        margin-right: 4%;
                    }

                fieldset ol li .to-do-files-thumbs {
                    display: flex;
                    flex-wrap: nowrap;
                    justify-content: space-around
                }

                fieldset ol li .to-do-files-thumbs img {
                    cursor: pointer;
                    border: 1px solid #1a3143
                }

                /* Webkit browsers only */
                :root::-webkit-media-controls-panel, select {
                    padding-right: 26px;
                    -webkit-appearance: textfield;
                    background-position: right 6px center;
                    width: 100%;
                    height: 30px;
                }

                fieldset.full ol li textarea {
                    height: 150px;
                }

                    fieldset.full ol li textarea.note {
                        height: 350px;
                    }

                fieldset.double ol li textarea.note {
                    height: 148px;
                }

                fieldset ol li.checkbox input, fieldset ol li.radio input, fieldset table tr td.radio input {
                    width: auto !important;
                    vertical-align: middle;
                }

                    fieldset ol li.checkbox input {
                        margin-right: 5px;
                    }

                    fieldset ol li.radio label + input, fieldset table tr td.radio label + input {
                        margin-left: 5px;
                        margin-right: 15px;
                    }

                        fieldset ol li.radio label + input:last-child, fieldset table tr td.radio label + input:last-child {
                            margin-right: 5px;
                        }

            fieldset ol li strong.input {
                line-height: 1.5em;
            }

            fieldset ol li.currency span.dollar_sign, fieldset ol li.percentage span.percentage_sign {
                position: relative;
            }

                fieldset ol li.currency span.dollar_sign span, fieldset ol li.percentage span.percentage_sign span {
                    position: absolute;
                    top: 1px;
                    left: 3px;
                    font-family: Verdana,Arial,sans-serif;
                    line-height: 1.0em;
                }

                    fieldset ol li.percentage span.percentage_sign span {
                        left: auto;
                        right: 3px;
                    }

        /* OL exceptions */
        fieldset .note-editable ol, table#list tr td span.main ol,
        fieldset .note-editable ul, table#list tr td span.main ul {
            margin: 0 !important;
            padding: 0 0 0 30px;
            list-style-type: decimal;
        }

        fieldset .note-editable ul, table#list tr td span.main ul {
            list-style-type: disc;
        }

            fieldset .note-editable li, table#list tr td span.main li {
                float: none !important;
                clear: none !important;
                padding-top: 0 !important;
            }

::-webkit-inner-spin-button
{
    -moz-appearance      : none;
    -webkit-appearance: none;

    /* // All browsers will be polyfilled because there is no way to detect existence of step buttons
    top: 2px;
    right: 2px;

    background: url(../images/modules/events/icons/icon-form-number.png) no-repeat;
    border: none;

    width: 14px;
    height: 12px;

    cursor: pointer;*/
}

::-webkit-outer-spin-button
{
    -moz-appearance      : none;
    -webkit-appearance: none;
}


/* =============================================================================
 * SEARCH FORM
 * ========================================================================== */
form#search-form {
    margin-top: 5px;
    padding-bottom: 0;
}

    form#search-form input {
        float: left;
        width: 510px;
        height: 30px;
        padding: 0 5px;
        border: 1px solid #cecece;
        border-right: none;
        color: #777;
        font-size: 1.2em;
        line-height: 28px;
        vertical-align: top;
    }

        form#search-form input.submit {
            float: none;
            width: auto;
            height: 30px;
            padding: 0;
            border: none;
        }


/* =============================================================================
 * FILTER FORM
 * ========================================================================== */
form#filter-form {
    float: right;
    padding-bottom: 0;
    vertical-align: top;
}

form#filter-form select {
    width: 195px;
    border: 2px solid #4e81a9;
    height: 35px;
    background-color: #ffffff;
}

form#filter-form input.submit {
    width: auto;
    padding: 5px 10px;
}


/* =============================================================================
 * FORM CONTROLS
 * ========================================================================== */
/* div.controls {
    position: absolute;
    bottom: 15px;
    right: 65px;
    width: auto;
    text-align: right;
} */

div.controls {
    width: 100%;
    margin-right: 50px;
    float: right;
    text-align: right;
}

    div.controls.todo-edit {
        float: none;
    }

    div.controls2 {
        position: relative;
        bottom: auto;
        right: auto;
        padding-bottom: 20px;
        text-align: left;
    }

div.controls input.submit {
    float: none;
    width: auto;
    margin-left: 10px;
    padding: 5px 10px;
    font-size: 1.2em;
}

div.controls a,
div.controls button.submit {
    display: inline-block;
    color: #4e81a9;
    background: linear-gradient(to right, #4e81a9, #4e81a9);
    background-repeat: no-repeat;
    background-size: 0 100%;
    transition: background-size 0.5s 0s;
    border: 2px solid;
    border-radius: 4px;
    padding: 10px;
    font-size: 15px;
    font-family: Verdana;
    cursor: pointer;
}

div.controls a:not(.password) {
    background: linear-gradient(to right, #cf2e1c, #cf2e1c);
    background-size: 0 100%;
    transition: background-size 0.5s 0s;
    background-repeat: no-repeat;
}

div.controls a:hover,
div.controls button.submit:hover {
    background-size: 100% 100%;
    color: #ffffff;
    border-color: #4e81a9;
}

div.controls a i,
div.controls button.submit i {
    padding-right: 7px;
    font-size: 20px;
    vertical-align: bottom;
}

table#list a.sort {
    color: #193246;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

table#list a.sort i {
    padding-left: 5px;
    font-size: 20px;
    line-height: 5px;
    vertical-align: bottom;
}

table#list a.sort i.fa-sort-down {
    vertical-align: baseline;
}

div.controls a:before {
    padding-right: 10px;
    font-family: "FontAwesome";
    font-size: 20px;
}


/* =============================================================================
 * CONTAINER
 * ========================================================================== */
div#container {
    width: 1250px;
    margin: 0 auto;
}


/* =============================================================================
 * HEADER
 * ========================================================================== */
header {
    background-color: #ffffff;
}

header .header-content {
    width: 1250px;
    height: 70px;
    margin: 0 auto;
    text-align: left;
    overflow: visible;
}

header p#client-logo {
    float: left;
    width: 270px;
    margin: 0 0 0 -10px;
    max-height: 75px;
}

    header p#client-logo img {
        max-width: 100%;
    }

header div.middle {
    display: inline-block;
    margin-left: 50px;
}


/* =============================================================================
 * PRIMARY NAVIGATION
 * ========================================================================== */
nav#primary {
    margin-top: 10px;
    text-transform: uppercase;
}

nav#primary ul {
    margin: 0;
    padding-left: 0;
    list-style-type: none;
}

nav#primary ul li {
    display: inline-block;
    margin: 0 10px;
}

nav#primary ul li:first-child {
    margin-left: 0;
}

nav#primary ul li a {
    color: #1c3144;
    font-family: 'Open Sans', sans-serif;
    font-weight: 900;
}


/* =============================================================================
 * ACCOUNT NAVIGATION
 * ========================================================================== */
nav#account {
    position: relative;
    float: right;
    margin-top: 15px;
    text-align: right;
}

    nav#account ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    nav#account ul li {
        display: inline-block;
        margin: 0 0 0 20px;
    }

    nav#account ul li a {
        color: #777777;
        font-family: 'Open Sans', sans-serif;
        font-weight: 600;
        text-shadow: 1px 1px #ddd;
    }

    nav#account ul li.login a {
        color: #65962B;
    }

    nav#account div.user {
        color: #777777;
    }

    nav#account ul li.user b {
        font-family: 'Open Sans', sans-serif;
        font-weight: 700;
        text-shadow: 1px 1px #ddd;
    }


/* =============================================================================
 * LOGIN
 * ========================================================================== */
div#login {
    position: relative;
    width: 580px;
    margin: 80px auto 0;
    padding: 80px 20px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-top-color: #629b28;
    border-radius: 6px;
    -webkit-box-shadow: 0px 7px 5px -4px rgba(0, 0, 0, 0.5);
       -moz-box-shadow: 0px 7px 5px -4px rgba(0, 0, 0, 0.5);
            box-shadow: 0px 7px 5px -4px rgba(0, 0, 0, 0.5);
    overflow: auto;
}

    div#login form {
        position: relative;
    }

    div#login div#image {
        position: absolute;
        top: 35px;
        left: -10px;
        width: 250px;
        height: 72px;
        text-align: right;
    }

    div#login div#image img {
        max-width: 100%;
    }

    div#login fieldset {
        width: 295px;
        margin: 20px 0 10px 255px;
    }

    div#login fieldset ol {
        margin-right: 0;
    }

    div#login fieldset ol li {
        position: static;
    }

    div#login fieldset ol li input {
        width: 100%;
        padding: 3px 7px;
    }

    div#login div.controls {
        position: static;
        float: right;
        width: 100%; /* 276px; */
        margin: 0 30px 30px 0;
    }


/* =============================================================================
 * CONTENT CONTAINER AREA
 * ========================================================================== */
div#contentContainer {
    position: relative;
    min-height: 350px;
    padding: 9px 6px 30px;
}

    .login div#contentContainer, .forgot-password div#contentContainer {
        padding: 0;
    }


/* =============================================================================
 * GLOBAL TABS
 * ========================================================================== */
ul.contentTabs, ul.innerContentTabs {
    position: relative;
    margin: 0;
    padding: 0;
    list-style-type: none;
    z-index: 5;
}

ul.innerContentTabs {
    top: 0;
    margin-top: 30px;
}

ul.contentTabs {
    top: 0;
    margin-top: 0px;
}

/* ul#settingsTabs.contentTabs,
ul#projectTabs.contentTabs {
    margin-top: 0px;
} */

ul.contentTabs li, ul.innerContentTabs li {
    float: left;
    margin-right: 5px;
}

ul.contentTabs li a, ul.innerContentTabs li a {
    display: block;
    border-radius: 6px 6px 0 0;
    padding: 0 12px;
    margin-top: 5px;
    color: #3d3d3d;
    font-family: 'Guersney', sans-serif;
    font-size: 15px;
    line-height: 35px;
    text-align: center;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,fdfdfd+50,fdfdfd+51,f9fafc+100 */
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #fdfdfd 50%, #fdfdfd 51%, #f9fafc 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#fdfdfd 50%,#fdfdfd 51%,#f9fafc 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #ffffff 0%,#fdfdfd 50%,#fdfdfd 51%,#f9fafc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f9fafc',GradientType=0 ); /* IE6-9 */

}

    ul.contentTabs#timeTabs li a,
    ul.innerContentTabs#timeTabs li a {
        position: relative;
        min-width: 70px;
        padding: 2px 20px 0;
        line-height: 24px;
        border: 1px solid #ebeaea;
        font-family: 'Guersney', sans-serif !important;
        font-weight: inherit;
    }

    ul.contentTabs#timeTabs li a:hover,
    ul.contentTabs#timeTabs li a.active,
    ul.innerContentTabs#timeTabs li a:hover,
    ul.innerContentTabs#timeTabs li a.active {
        background: #10b83f;
        line-height: 27px;
        font-weight: 600;
        border: 1px solid #10b83f
    }

    ul.contentTabs li a:hover, ul.contentTabs li a.active, ul.innerContentTabs li a:hover, ul.innerContentTabs li a.active {
        background: #10b83f;
        color: #fff;
        text-decoration: none;
        margin-top: 0;
        line-height: 40px;
    }

    ul.contentTabs li.previous, ul.innerContentTabs li.previous, ul.contentTabs li.next, ul.innerContentTabs li.next {
        width: 25px;
        height: 25px;
    }

            ul.contentTabs li.previous a, ul.innerContentTabs li.previous a, ul.contentTabs li.next a, ul.innerContentTabs li.next a {
                height: 100%;
                padding: 0;
            }


/* =============================================================================
 * DESCRIPTION CONTENT
 * ========================================================================== */
p.contentDescription {
    margin-left: 8px;
    color: #fff;
}

p.contentDescription a {
    color: #fff;
    text-decoration: underline;
}

p.contentDescription a:hover {
    color: #fff;
    text-decoration: none;
}

div#detailContent p.contentDescription, div#tabbedContent p.contentDescription, div#timeContent p.contentDescription {
    margin-left: 0;
    color: #111;
}

div#detailContent p.contentDescription a, div#tabbedContent p.contentDescription a, div#timeContent p.contentDescription a {
    color: #4e81a9;
}

div#detailContent {
    margin-top: 39px;
}

div#detailContent p.contentDescription,
div#tabbedContent div#innerTabbedContent p.contentDescription {
    margin-top: 22px;
    padding-top: 10px;
    clear: both;
}

div.spacer {
    padding: 10px 0;
}


/* =============================================================================
 * DETAIL CONTENT
 * ========================================================================== */
div#detailContent {
    position: relative;
    /* min-height: 491px; */
    padding: 20px 15px 30px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-top-color: #629b28;
    border-radius: 6px;
    -webkit-box-shadow: 0px 7px 5px -4px rgba(0, 0, 0, 0.5);
       -moz-box-shadow: 0px 7px 5px -4px rgba(0, 0, 0, 0.5);
            box-shadow: 0px 7px 5px -4px rgba(0, 0, 0, 0.5);
}

div#detailContent.no-records {
    margin-top: 39px;
    border-top-left-radius: 0;
}

div#detailContent table#list {
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
}

div#detailContent table#list tr th {
    color: #4e81a9;
    text-shadow: 1px 1px #ddd;
}

div#detailContent table#list tr:first-child td {
    border-top-color: #e0e0e0;
}


/* =============================================================================
 * TIME CONTENT
 * ========================================================================== */
div#timeContainer {
    position: relative;
    margin-top: 39px;
    background: #fff;
    border-top: 1px solid #629b28;
    border-radius: 6px;
    -webkit-box-shadow: 0px 7px 5px -4px rgba(0, 0, 0, 0.5);
       -moz-box-shadow: 0px 7px 5px -4px rgba(0, 0, 0, 0.5);
            box-shadow: 0px 7px 5px -4px rgba(0, 0, 0, 0.5);
}

    .credits div#timeContainer {
        margin-top: 0;
    }

    div#timeContainer.inner {
        margin: 59px -15px 0;
        padding: 0 15px;
        border-radius: 0;
        -webkit-box-shadow: none;
           -moz-box-shadow: none;
                box-shadow: none;
    }

    /* div#timeContainer div#toolsContainer {
        position: absolute;
        top: -35px;
        right: 0;
        margin-top: 0 !important;
    } */

    div#timeContainer div#toolsContainer {
        top: -35px;
        margin-top: 0 !important;
        float: none;
    }

    div#timeContainer div#toolsContainer form {
        float: right;
    }

    div#timeContainer.inner div#toolsContainer {
        right: 15px;
    }

    div#timeContainer div#timeForm {
        position: relative;
        padding: 20px 15px 30px;
    }

    div#timeContainer.inner div#timeForm {
        margin: 0 -15px;
        padding: 20px 15px 30px;
        border-radius: 0;
    }

    div#timeContainer ul#timeTabs {
        position: absolute;
        top: -41px;
        left: 0;
        margin-top: 30px;
    }

        div#timeContainer.inner ul#timeTabs {
            left: 15px;
        }

        ul#timeTabs li.previous, ul#timeTabs li.next {
                margin-top: 7px;
            }



        ul#timeTabs li.previous a, ul#timeTabs li.next a {
            min-width: 0;
            padding: 0;
            border-radius: 13px;
            font-size: 12px;
            line-height: 28px;
        }

        ul#timeTabs li.previous a:hover,
        ul#timeTabs li.next a:hover {
            margin-top: 5px;
        }

        /* ul#timeTabs li.active a {
            padding-left: 16px;
            padding-right: 24px;
            background-image: url(../images/icons/clock.png);
            background-position: right 4px top 8px;
            background-repeat: no-repeat;
        } */

        ul#timeTabs li a span {
            display: block;
            margin-top: -12px;
            font-size: 13px;
        }

        div#timeContainer div#timeDataContent {
            padding: 15px 15px 30px;
            border-top: 1px solid #629b28;
        }

            div#timeContainer.inner div#timeDataContent {
                margin: 0 -15px;
                padding-bottom: 0;
            }

            div#timeContainer div#timeDataContent > div {
                display: none;
            }

                div#timeContainer div#timeDataContent > div.active {
                    display: block;
                }


/* =============================================================================
 * TABBED CONTENT
 * ========================================================================== */
div#tabbedContent {
    position: relative;
    /* min-height: 400px; */
    padding: 20px 15px 30px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-top-color: #629b28;
    border-radius: 0 6px 6px 6px;
    margin-top: 39px;
    -webkit-box-shadow: 0px 7px 5px -4px rgba(0, 0, 0, 0.5);
       -moz-box-shadow: 0px 7px 5px -4px rgba(0, 0, 0, 0.5);
            box-shadow: 0px 7px 5px -4px rgba(0, 0, 0, 0.5);
}

    .jQuery div#contacts, .jQuery div#opportunities, .jQuery div#notes, /* .jQuery div#to-dos, */ .jQuery div#files, .jQuery div#team, .jQuery div#to-dos + div#general {
        display: none;
    }

    .jQuery div#files form,
    div#to-do_files form {
        clear: both;
    }

    .dashboard div#tabbedContent {
        min-height: 491px;
        padding: 0;
        border: none;
    }

    div#tabbedContent div#general {
        min-height: 1px;
    }

    div#tabbedContent > div:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    }

    div#tabbedContent table#list, div#timeDataContent table#list {
        -webkit-box-shadow: none;
           -moz-box-shadow: none;
                box-shadow: none;
    }

        div#tabbedContent table#list tr th, div#timeDataContent table#list tr th {
            color: #4e81a9;
            text-shadow: 1px 1px #ddd;
        }

        div#tabbedContent table#list tr:first-child td, div#timeDataContent table#list tr:first-child td {
            border-top-color: #e0e0e0;
        }

        table#list thead tr th.estimate,
        table.to-dos tbody tr td.estimate{
            width: 120px;
            text-align: center !important;
        }



/* =============================================================================
 * NAVIGATION BREADCRUMBS
 * ========================================================================== */
ul#breadcrumbs {
    display: inline-block;
    padding-left: 6px;
    list-style-type: none;
    color: #ddd;
    font-weight: bold;
    line-height: 65px; /*26*/
    text-shadow: 0 2px #000;
    vertical-align: top;
}

    ul#breadcrumbs li {
        float: left;
        padding: 0 0 0 4px;
    }

        ul#breadcrumbs li:before {
            content: "/";
            padding-right: 4px;
            color: #fff;
        }

        ul#breadcrumbs li a {
            color: #fff;
        }


/* =============================================================================
 * CONTENT TOOLS
 * ========================================================================== */
div#toolsContainer {
    position: relative;
    float: right;
    margin-top: 11px;
}

    div#dashboardContainer div#toolsContainer {
        margin: -35px 0 11px;
    }

    div#tabbedContent div#toolsContainer, div#detailContent div#toolsContainer {
        margin-top: -27px;
    }

    div#toolsContainer form {
        margin: 0;
        padding: 0;
    }

div#deleteBtnContainer {
        position: absolute;
        top: 30px;
        right: 30px;
    }

    div#deleteBtnContainer button {
        display: inline-block;
        color: #4e81a9;
        background: linear-gradient(to right, #cf2e1c, #cf2e1c);
        background-repeat: no-repeat;
        background-size: 0 100%;
        transition: background-size 0.5s 0s;
        border: 2px solid;
        border-radius: 4px;
        padding: 10px;
        font-size: 15px;
        font-family: Verdana;
        cursor: pointer;
    }
    div#deleteBtnContainer button:hover {
        background-size: 100% 100%;
        color: #ffffff;
        border-color: #4e81a9;
    }

ul#tools {
    position: relative;
    display: block;
    margin: 0 0 0 10px;
    padding: 4px 0;
    overflow: hidden;
    list-style-type: none;
}

    div#tabbedContent ul#tools, div#detailContent ul#tools {
        margin-top: -27px;
    }

    div#detailContent ul#tools.setting-time,
    div#tabbedContent ul#tools.setting-time {
        margin-top: 0px;
    }

    div#tabbedContent div#toolsContainer ul#tools, div#detailContent div#toolsContainer ul#tools {
        margin-top: 0;
    }

    ul#tools li {
        float: left;
    }

    div#detailContent ul#tools.setting-time li,
    div#tabbedContent ul#tools.setting-time li {
        float: none;
        margin-bottom: 10px;
    }

    ul#tools ul li.retainer-hours {
        position: absolute;
        left: 500px;
    }

    ul#tools li a {
        color: #fff;
        text-decoration: underline;
    }

    ul#tools li a:hover {
        text-decoration: none;
    }

    div#detailContent ul#tools.setting-time li a,
    div#to-do_files ul#tools li a,
    div#tabbedContent ul#tools li a {
        color: #4e81a9;
        background: linear-gradient(to right, #4e81a9, #4e81a9);
        background-repeat: no-repeat;
        background-size: 0 100%;
        transition: background-size 0.5s 0s;
    }

    div#detailContent ul#tools.setting-time li a:hover,
    div#to-do_files ul#tools li a:hover,
    div#tabbedContent ul#tools li a:hover {
        background-size: 100% 100%;
        color: #ffffff;
        border-color: #4e81a9;
    }

    ul#tools li a.add {
        display: inline-block;
        color: #ffffff;
        background: linear-gradient(to right, #f1f1f1, #ffffff);
        background-repeat: no-repeat;
        background-size: 0 100%;
        transition: background-size 0.5s 0s;
        border: 2px solid;
        border-radius: 4px;
        padding: 10px;
        width: 170px;
        text-align: center;
        text-decoration: none;
        font-size: 15px;
        font-family: arial;
    }

    ul#tools li a.add:hover {
        background-size: 100% 100%;
        color: #1a3143;
        border-color: #fff;
    }

    ul#tools.setting-time li a.add {
        width: 175px;
    }

    ul#tools li a.add i {
        padding-right: 7px;
        font-size: 20px;
        vertical-align: bottom;
    }

    ul#timeTabs li.active a:before {
        font-family: "FontAwesome";
        font-size: 15px;
        font-weight: 400;
        float: right;
        padding-left: 5px;
        color: #4e81a9;
        position: absolute;
        right: 4px;
    }

    ul#timeTabs li.active a.active:before {
        color: #ffffff;
    }

    ul#tools li a.add:before {
        padding-right: 10px;
        font-family: "FontAwesome";
        font-size: 20px;
    }

    /* div#tabbedContent ul#tools li a.add,
    div#detailContent div#to-do_files ul#tools li a.add {
        background-position: 0 1px;
    } */

    ul#tools li a.delete {
        display: inline-block;
        width: 16px;
        height: 18px;
        background: url(../images/layout/icons-Delete.png) -24px 1px no-repeat;
        text-indent: -9000px;
    }

    div#tabbedContent ul#tools li a.delete {
        background-position: 0 1px;
    }

    ul#tools li a.next {
        display: inline-block;
        width: 18px;
        height: 18px;
        background: url(../images/layout/icons-Arrows.png) -26px 1px no-repeat;
        text-indent: -9000px;
    }

    div#tabbedContent ul#tools li a.next {
        background-position: 0 1px;
    }

    ul#tools li a.previous {
        display: inline-block;
        width: 18px;
        height: 18px;
        background: url(../images/layout/icons-Arrows.png) -78px 1px no-repeat;
        text-indent: -9000px;
    }

    div#tabbedContent ul#tools li a.previous {
        background-position: -52 1px;
    }

    ul#tools li a.time {
        display: inline-block;
        width: 18px;
        height: 18px;
        background: url(../images/layout/icons-Time.png) no-repeat;
        text-indent: -9000px;
    }

    ul#tools li a.toggle {
        display: inline-block;
        width: 18px;
        height: 18px;
        background: url(../images/layout/icons-Toggle.png) no-repeat;
        text-indent: -9000px;
    }


/* =============================================================================
 * TABLE LISTING
 * ========================================================================== */
table#list {
    width: 100%;
    -webkit-box-shadow: 0px 7px 5px -4px rgba(0, 0, 0, 0.5);
       -moz-box-shadow: 0px 7px 5px -4px rgba(0, 0, 0, 0.5);
            box-shadow: 0px 7px 5px -4px rgba(0, 0, 0, 0.5);
}

    ul.contentTabs + div#general table#list {
        margin-top: -29px;
    }

    ul.innerContentTabs + div#innerTabbedContent table#list {
        margin-top: -7px;
    }

    table#list.time-tracking {
        margin: 10px 0 20px;
    }

    table#list a:hover {
        text-decoration: none;
    }

    /* table#list tr {} */

        table#list tr th, table#list tr td {
            padding: 6px 10px 8px;
            color: #666;
            text-align: left;
            vertical-align: bottom;
        }

        table#list thead th {
            background-color: #ffffff;
            border-bottom: 1px solid #e6eaed;
        }

        table#list thead th:last-child {
            border-top-right-radius: 6px;
        }

        table#list tr th {
            color: #193246;
            padding: 15px 10px;
            font-family: 'Open Sans', sans-serif;
            font-size: 12px;
            font-weight: 900;
            text-transform: uppercase;
        }

        table#list tr td {
            background: #fff;
            border-bottom: 1px solid #e6eaed;
            line-height: 1.5em;
        }

        table#list tr td.uuid .api-key-text {
            border: none;
            width: 45%;
        }

        table#list tr td.uuid button {
            padding: 5px 10px;
            background-color: transparent;
            border-radius: 4px;
            color: #4e81a9;
            cursor: pointer;
        }

        table#list tr td.uuid button:hover {
            background: #4e81a9;
            color: #fff;
        }

        table#list.time-tracking tr:first-child td {
            border-top: none;
        }

        table#list.time-tracking thead + tbody tr:first-child td {
            border-top: 1px solid #629b28;
        }

        table#list tr td:first-child {
            border-left: 1px solid #d6d6d6;
        }

        table#list tr td:last-child {
            border-right: 1px solid #d6d6d6;
        }

        table#list tr:hover td {
            background: #F8F8FF;
        }

        table#list tr td.container {
            padding-right: 0;
        }

        table#list.time-tracking tr td {
            cursor: pointer;
        }

        table#list.time-tracking tr.edit td {
            cursor: default;
        }

        #dashboardContainer table#list tr:first-child td:first-child {
            border-top-left-radius: 6px;
        }

        table#list.time-tracking tbody + tbody tr:first-child td:first-child {
            border-top-left-radius: 0;
        }

        #dashboardContainer table#list tr:first-child td:last-child {
            border-top-right-radius: 6px;
        }

        table#list.time-tracking tbody + tbody tr:first-child td:last-child {
            border-top-right-radius: 0;
        }

        table#list tr:last-child td:first-child {
            border-bottom-left-radius: 6px;
        }

        table#list.time-tracking tr:last-child td:first-child {
            border-bottom-left-radius: 0;
        }

        table#list.time-tracking tbody:last-child tr td:first-child {
            border-bottom-left-radius: 6px;
        }

        table#list.time-tracking tbody.visible:last-child tr td:first-child {
            border-bottom-left-radius: 0;
        }

        table#list.time-tracking tbody.visible:last-child tr:last-child td:first-child {
            border-bottom-left-radius: 6px;
        }

                table#list tr:last-child td:last-child {
                    border-bottom-right-radius: 6px;
                }

                    table#list.time-tracking tr:last-child td:last-child {
                        border-bottom-right-radius: 0;
                    }

                        table#list.time-tracking tbody:last-child tr td:last-child {
                            border-bottom-right-radius: 6px;
                        }

                            table#list.time-tracking tbody.visible:last-child tr td:last-child {
                                border-bottom-right-radius: 0;
                            }

                                table#list.time-tracking tbody.visible:last-child tr:last-child td:last-child {
                                    border-bottom-right-radius: 6px;
                                }


            table#list tr th.hours, table#list tr td.hours {
                width: 50px;
            }

            table#list tr th.total-hours, table#list tr td.total-hours {
                width: 60px;
            }

            table#list tr th.billable, table#list tr td.billable {
                width: 70px;
            }

            table#list tr th.date, table#list tr td.date, table#list tr th.value, table#list tr td.value, table#list tr th.filetype, table#list tr td.filetype, table#list tr th.filesize, table#list tr td.filesize {
                width: 95px;
            }

            table#list tr th.close, table#list tr td.close, table#list tr th.phone, table#list tr td.phone, table#list tr th.role, table#list tr td.role, table#list tr th.time, table#list tr td.time {
                width: 115px;
            }

            table#list tr th.retainer-hours, table#list tr td.retainer-hours, #timeDataContent table#list tr th.date-added, #timeDataContent table#list tr td.date-added {
                width: 150px;
            }

            table#list tr th.representative, table#list tr td.representative, table#list tr th.company, table#list tr td.company {
                width: 160px;
            }

            table#list tr th.date-added, table#list tr td.date-added, table#list tr th.date-retainer-effective, table#list tr td.date-retainer-effective {
                width: 170px;
            }

            table#list tr td div.cell span.main div.contact-info {
                margin-top: 10px;
            }

            table#list tr td.representative {
                vertical-align: top;
            }

            /*table#list tr td.representative div.toolbar */
            table#list tr td.email div.toolbar,
            table#list tr td.date div.toolbar {
                float: right;
                margin-top: 5px;
                margin-bottom: 10px;
                margin-right: 30%;
            }

            table#list tr td.representative div.toolbar.xxxtodos {
                float: none;
                margin-top: 5px;
                margin-bottom: 10px;
                margin-right: 0;
            }

            table#list tr td.email div.user-email,
            table#list tr td.representative div.user-name {
                clear: both;
            }

            table#list tr th.project-name {
                width: 200px;
            }

            table#list table.projects tr td.project-name {
                width: 170px;
            }


            table#list tr th.email, table#list tr td.email, table#list tr th.project, table#list tr td.project, table#list.time-tracking tr th.representative, table#list.time-tracking tr td.representative {
                width: 220px;
            }

            table#list tr th.note, table#list tr td.note, table#list tr th.source, table#list tr td.source {
                width: auto;
            }


            table#list tr td.to-do-list {
                padding-right: 0;
            }

            table#list tr th.buttons, table#list tr td.buttons {
                width: 25px;
                text-align: right;
            }

                table#list tr td.buttons img {
                    margin-bottom: -4px;
                }

            table#list tr td span.main {
                position: relative;
                display: inline-block;
                font-size: 1.1em;
                z-index: 50;
            }

                table#list tr td span.main.paused::before  {
                    content: "PAUSED";
                }

                table#list tr td span.main.paused,
                table#list tr td span.main.paused a {
                    color: red;
                    font-weight: 900;
                }

                table#list tr td span.main b {
                    position: relative;
                    z-index: 10;
                }

            table#list tr td img.handleTodo,
            table#list tr td img.handle {
                position: relative;
                float: right;
                margin-bottom: -2px;
                padding: 2px 6px 6px;
                cursor: move;
            }


            table#list tr td i.handleTodo,
            table#list tr td i.handle {
                float: right;
                padding: 2px 6px 6px;
                cursor: move;
                color: #4e81a9;
                font-size: 16px;
            }

            #dashboardContainer table#list tr td img.handle {
                display: none;
            }

            table#list tr td span.status {
                display: inline;
                float: none;
                padding: 3px 10px;
                background: #10b83f;
                color: #ffffff;
                margin-left: 5px;
                border-radius: 6px;
                text-transform: capitalize;
                font-style: italic;
            }

            table#list tr.sort {
                height: 20px;
            }

            table#list tr.sort table.to-dos {
                display: none;
            }

            table#list tr td.date-retainer-effective {
                vertical-align: middle !important;
            }


            table#list table.projects {
                width: 100%;
                padding-left: 20px;
            }

            table#list .project-todo-list {
                width: 100.9%;
                display: none;
                margin-left: -10px;
            }

                /* table#list table.projects tr {} */

            table#list tr td.container {
                background-color: #ffffff;
            }

            table#list tr td.container.selected {
                background-color: #ebf0f3;
                border-left: 6px solid #10b83f;
            }

            table#list table.projects tr td {
                padding: 5px 10px;
                border: none;
                font-size: 0.95em;
                vertical-align: top;
                background-color: #ffffff;
            }

            #dashboardProjects table#list table.projects tr td {
                padding: 5px 10px;
                border: none;
                font-size: 0.95em;
                vertical-align: top;
                background-color: transparent;
            }

            table#list table.projects.selected tr td {
                background-color: #ebf0f3;
            }

            table#list table.projects tr td.toolbar-col {
                vertical-align: middle;
                width: 115px;
            }

            table#list tr th.retainer-hours, table#list table.projects tr td.retainer-hours {
                text-align: left;
                width: 170px !important;
                padding-left: 50px;
                padding-right: 50px;
            }

            table#list table.projects tr td.retainer-hours {
                padding-bottom: 10px;
                padding-top: 0;
            }

            table#list table.projects tr td.retainer-hours span {
                display: inline-block;
                min-width: 38px;
                margin: 0 auto;
                padding: 0 4px;
                background: #377cb3;
                border: 1px solid #2f638f;
                border-top-color: #29567c;
                border-bottom-color: #326a99;
                border-radius: 3px;
                color: #fff;
                text-align: center;
            }

            table#list table.projects tr td.retainer-hours span.overallocated {
                background: #b43434;
                border-color: #882727 #882727 #a73030;
            }

            table#list table.projects tr td.retainer-hours span.underallocated {
                background: #6c9633;
                border-color: #517126 #5e822c #648b2f;
            }

            div.wrapper-progress-bar div.content-data,
            table#list table.projects tr td.retainer-hours div.wrapper-progress-bar div.content-data {
                position: relative;
                margin-bottom: 11px;
                line-height: -5px;
                height: 10px;
            }

            div.wrapper-progress-bar div.content-data sub,
            table#list table.projects tr td.retainer-hours div.wrapper-progress-bar div.content-data sub {
                position: absolute;
                top: 0;
                font-size: 10px;
            }

            div.wrapper-progress-bar div.content-data sub.left,
            table#list table.projects tr td.retainer-hours div.wrapper-progress-bar div.content-data sub.left {
                left: 0;
                text-align: left;
            }

            div.wrapper-progress-bar div.content-data sub.right,
            table#list table.projects tr td.retainer-hours div.wrapper-progress-bar div.content-data sub.right {
                right: 0;
                text-align: right;
            }


            div.progress-bar,
            table#list table.projects tr td.retainer-hours div.progress-bar {
                background: #d0d4dd;
                text-align: left;
                line-height: 6px;
                border-radius: 4px;
                min-height: 20px;
            }

            div.progress-bar span,
            table#list table.projects tr td.retainer-hours div.progress-bar span {
                height: 20px;
                border-radius: 4px 0 0 4px;
                min-width: 0;
                padding: 0;
                margin: 0;
                border: 0;
                float: left;
            }

            div.progress-bar span.complete,
            table#list table.projects tr td.retainer-hours div.progress-bar span.complete {
                display: inline-block;
                height: 20px;
                max-width: 100%;
                margin: 0 auto;
                /*background: #377cb3;
                border-top-color: #29567c;
                border-bottom-color: #326a99;*/
                background: #10b83f;
                border-radius: 4px;
                color: #fff;
                text-align: center;
            }

            div.progress-bar span.underallocated,
            table#list table.projects tr td.retainer-hours div.progress-bar span.underallocated {
                height: 20px;
                border-radius: 4px;
                min-width: 0;
                background: #10b83f;
                padding: 0;
                margin: 0;
                border: 0;
            }

            div.progress-bar span.overallocated,
            table#list table.projects tr td.retainer-hours div.progress-bar span.overallocated {
                background: #cf2e1c;
                border-color: #cf2e1c;
                border-radius: 4px;
                max-width: 100%;
                padding: 0;
            }

            div.progress-bar span.project-management,
            table#list table.projects tr td.retainer-hours div.progress-bar span.project-management {
                background: #4B2D73;
                border-color: #4B2D73;
                border-radius: 4px 0 0 4px;
                max-width: 100%;
                padding: 0;
            }

            table#list tr td.legends span {
                padding: 2px 0;
                width: 20px;
                display: inline-block;
                margin: 0 10px;
            }

            table#list tr td.bar-chart {
                padding: 20px 10px 30px 10px;
                background-color: #ebf0f3;
                border-left: 6px solid #10b83f;
                display: none;
            }

            table#list tr td.bar-chart ul.chart {
                display: table;
                table-layout: fixed;
                width: 60%;
                max-width: 700px;
                padding: 0;
                background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1) 2%, rgba(0, 0, 0, 0) 2%);
                background-size: 100% 30px;
                background-position: left top;
                border-spacing: 15px 0;
            }

            table#list tr td.bar-chart ul.chart li {
                position: relative;
                display: table-cell;
                vertical-align: bottom;
                height: 150px;
                width: 40px;
            }

            table#list tr td.bar-chart ul.chart li.axis {
                display: inline-block;
                margin-left: -45px;
            }

            table#list tr td.bar-chart ul.chart li.axis div {
                margin: 14px 0 0px 0;/*18px 0 20px 0*/
            }

            table#list tr td.bar-chart ul.chart li span {
                max-height: 80%;
                display: block;
                background: rgba(209, 236, 250, 0.75);
                animation: draw 1s ease-in-out;
                border-radius: 6px 6px 0 0;
                opacity: 0.75;
            }

            table#list tr td.bar-chart ul.chart li span::before {
                position: absolute;
                left: 0;
                right: 0;
                top: 100%;
                padding: 5px 0;
                display: block;
                text-align: center;
                content: attr(data-hours);
                word-wrap: break-word;
            }

            table#list tr td.bar-chart ul.chart li span.overallocated, table#list tr td.legends span.overallocated {
                background-color: #cf2e1c;
            }

            table#list tr td.bar-chart ul.chart li span.underallocated, table#list tr td.legends span.underallocated {
                background-color: #10b83f;
            }

            table#list tr td.bar-chart ul.chart li span.project-management, table#list tr td.legends span.project-management {
                background-color: #4B2D73;
                border-radius: 0;
            }

            table#list tr td.bar-chart ul.chart li span.project-management.rounded {
                border-radius: 6px 6px 0 0;
            }

            table#list tr td.bar-chart ul.chart li span.complete {
                background-color: #10b83f; /*#377cb3;*/
            }

            table#list tr td.bar-chart div.quarters {
                float: right;
                display: table-cell;
                width: 31%;
            }

            table#list tr td.bar-chart div.quarters div.wrapper-progress-bar {
                width: 70%;
                margin: 0 auto;
            }

            table#list tr td.bar-chart div.quarters div.wrapper-progress-bar span.title {
                text-align: center;
                display: inherit;
                padding: 10px 0;
                font-weight: 700;
            }


            table#list tr td.bar-chart ul.quarter-progress-bar {
                float: right;
                display: table-cell;
                width: 31%;
                margin-top: 3%;
            }

            table#list tr td.bar-chart ul.quarter-progress-bar li {
                list-style: none;
                float: left;
                width: 50%;
                padding: 3% 0;
                text-align: right;
            }

            table#list tr td.bar-chart ul.quarter-progress-bar li span.text {
                margin-right: 15%;
            }

            table#list tr td.bar-chart ul.quarter-progress-bar .quarter-circle {
                background-color: #cf2e1c;
                border-radius: 50%;
                width: 10%;
                padding: 4%;
                color: #fff;
                font-weight: bold;
                position: relative;
                font-size: 12px;
                line-height: 18px;
            }

            table#list tr td.bar-chart ul.quarter-progress-bar .quarter-circle .quarter-bar {
                height: 15px;
                border-radius: 0 9px 9px 0;
                background: #cf2e1c;
                width: 135px;
                position: absolute;
                left: 80%;
                top: 25%;
            }

            table#list tr td.bar-chart ul.quarter-progress-bar .quarter-circle.overallocated,
            table#list tr td.bar-chart ul.quarter-progress-bar .quarter-circle .quarter-bar.overallocated {
                background-color: #cf2e1c;
            }

            table#list tr td.bar-chart ul.quarter-progress-bar .quarter-circle.underallocated,
            table#list tr td.bar-chart ul.quarter-progress-bar .quarter-circle .quarter-bar.underallocated {
                background-color: #10b83f;
            }

            table#list tr td.bar-chart ul.quarter-progress-bar .quarter-circle.complete,
            table#list tr td.bar-chart ul.quarter-progress-bar .quarter-circle .quarter-bar.complete {
                background-color: #377cb3;
            }


            table#list tr td.bar-chart div.title {
                color: #3d3d3d;
                font-weight: bold;
                padding-left: 25px;
            }

            table#list tr td.bar-chart div.hours-legend {
                float: left;
                width: 3%;
                font-size: 9px;
                margin: 4% 2%;
                font-weight: bold;
                color: #3d3d3d;
            }

            table#list tr td.bar-chart div.hours-legend p {
                margin-bottom: 0;
            }

            table#list tr td.bar-chart div.wrapper-bar-chart {
                background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1) 2%, rgba(0, 0, 0, 0) 2%);
                background-position: left top;
                background-size: 100% 50px;
                float: left;
                width: 65%;
            }

            table#list tr td.bar-chart div.wrapper-bar {
                height: 200px;
                position: relative;
                width: 55px;
                float: left;
                margin-right: 10px;
                text-align: center;
            }

            table#list tr td.bar-chart div.bar {
                height: 100%;
            }

            table#list tr td.bar-chart div.month-legend {
                padding-top: 5px;
            }

            table#list tr td.bar-chart div.bar div.filling {
                position: absolute;
                bottom: 0;
                max-height: 100%;
                width: 100%;
                border-radius: 6px 6px 0 0;
            }

            table#list tr td.bar-chart div.bar div.filling.overallocated {
                background-color: #cf2e1c;
            }

            table#list tr td.bar-chart div.bar div.filling.underallocated {
                background-color: #10b83f;
            }

            table#list tr td.bar-chart div.bar div.filling.complete {
                background-color: #377cb3;
            }

            table#list table.projects tr td.retainer-hours small {
                display: block;
                line-height: 1.5em;
            }

            table#list table.to-dos {
                width: 100%;
                padding-left: 40px;
            }

                /* table#list table.to-dos tr {} */

                    table#list table.to-dos tr td {
                        padding: 5px 10px;
                        border: none;
                        font-size: 0.95em;
                        vertical-align: top;
                    }

                        table#list table.projects table.to-dos tr td {
                            font-size: 1.0em;
                        }

                        table#list table.to-dos tr.complete td {
                            text-decoration: line-through;
                            color: #aaa;
                        }

                        table#list table.to-dos tr td input {
                            float: left;
                            position: relative;
                            bottom: -4px;
                        }

                        table#list table.to-dos tr td span.label {
                            display: block;
                            margin-left: 22px;
                        }

                        table#list table.to-dos tr td span.label .todo-label-editable {
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

                        table#list table.to-dos tr td span.label .todo-label-editable:focus {
                            border: 1px solid blue;
                            padding: 3px;
                        }

                        table#list table.to-dos tr td span.label .todo-success {
                            border: 1px solid green;
                            display: inline-block;
                            padding: 3px;
                            margin-left: 5px;
                        }

                            table#list table.to-dos tr td span.text {
                                display: inline-block;
                            }

                            table#list table.to-dos tr td span.label a.comment_count {
                                display: inline-block;
                                width: 18px;
                                height: 21px;
                                margin: 0 0 -3px 3px;
                                padding-right: 1px;
                                color: #fff;
                                font-size: 10px;
                                line-height: 18px;
                                text-align: center;
                                text-decoration: none;
                                vertical-align: top;
                            }

                            table#list table.to-dos tr td span.label a.comment_count i {
                                font-size: 20px;
                                color: #10b83f;
                                position: relative;
                            }

                            table#list table.to-dos tr td span.label a.comment_count i span.badget {
                                font-size: 11px;
                                position: absolute;
                                color: #fff;
                                left: 0;
                                margin-top: 1px;
                                width: 100%;
                            }


            table#list tr td div.cell {
                position: relative;
                word-break: break-all;
            }

                table#list tr td div.cell.expanded {
                    word-break: normal;
                }


            table#list tbody.alt2 tr.hidden {
                display: table-row;
            }


            table.notes {
                width: 100%;
                color: #666;
            }

                /* table.notes tr {} */

                    table.notes tr td {
                        width: 33%;
                        padding: 10px 7px;
                    }

                        table.notes tr.first td {
                            padding-top: 0;
                        }

                        table.notes tr td.fullNote {
                            width: 100%;
                            padding-top: 0;
                            border-bottom: 1px solid #d6d6d6;
                        }

                            table.notes tr.last td.fullNote {
                                padding-bottom: 0;
                                border-bottom: none;
                            }


            /* table#list.time {} */

                /* table#list.time tr {} */

                    table#list.time tr td {
                        vertical-align: top;
                    }

                        table#list.time tr th.project, table#list.time tr td.project {
                            width: auto;
                        }

                        table#list.time tr td.time {
                            padding-top: 9px;
                            line-height: 1.0em;
                        }

                            table#list.time tr td.time b {
                                display: block;
                                padding-bottom: 3px;
                                font-size: 1.25em;
                            }

                        table#list.time tr td span.main span.label, table#list.time tr td span.main span.note {
                            font-size: 0.91em;
                        }

                            table#list.time tr td span.note {
                                display: block;
                                font-style: italic;
                            }

                                table#list.time tr td span.label + span.note {
                                    margin: 15px 0 10px;
                                }

                                table#list.time tr td span.note strong {
                                    font-style: normal;
                                }

                div.total-time {
                    overflow: hidden;
                    color: #666;
                    font-size: 1.1em;
                    line-height: 1.0em;
                }

                    div.total-time div {
                        float: right;
                    }

                    div.total-time p {
                        display: inline-block;
                        margin-top: 20px;
                        vertical-align: top;
                    }

                        div.total-time p.time {
                            width: 115px;
                            padding: 0 10px;
                        }

                        div.total-time p.time b {
                            display: block;
                            padding-bottom: 3px;
                            font-size: 1.25em;
                        }

            div.total-to-do-time {
                float: right;
                margin: 7px 0 -10px;
                overflow: hidden;
            }

            div.total-to-do-time p {
                width: auto !important;
                margin: 0;
            }

            div.total-to-do-time p.time b {
                display: inline
            }

            table#list tr td div.tools {
                display: none;
                position: absolute;
                top: -2px;
                left: -80px;
                width: 120px;
                height: 16px;
                padding: 3px 80px 7px 5px;
                background: url(../images/layout/tools-background.png) 0 0 no-repeat;
                line-height: 16px;
                text-align: left;
                z-index: 4;
            }

                table#list tr td.to-do div.tools {
                    left: -120px;
                }

                table#list:not(.projects-list) tr.hover > td > div.cell > div.tools {
                    display: block;
                }

                table.project-todo-list .to-dos tr td div.cell:hover  div.tools {
                    display: block !important;
                }

                .to-do-list .to-do-wrapper-lists .cell .to-dos .to-do .cell .tools {
                    top: 7px !important;
                }
                .to-do-list .to-do-wrapper-lists .cell .to-dos .to-do .cell:hover .tools {
                    display: block !important
                }

                table#list table.projects .to-do-list td {
                    padding: 5px 10px 5px 0;
                }

                table#list table.projects .to-do-list  {
                    display: none;
                }

                table#list table.projects .to-do-list td table.to-dos {
                    width: auto !important;
                }


                table#list table.projects .to-do-list td .cell {
                    width: 100%;
                    background: white;
                    margin-left: -30px;
                    padding: 10px 30px 10px 10px;
                }
                table#list table.projects .to-do-list td .cell table.to-dos tr td {
                    background: white;
                    padding: 0;
                }


                table.project-todo-list .to-do-wrapper-lists i.handle { display: none}

                table.project-todo-list tr td {
                    background-color: #ffffff !important;
                    border-radius: 0 !important;
                }

                table#list tr td div.toolbar a, table#list tr td div.toolbar button, table#list tr td div.toolbar form,
                table#list tr td div.tools a, table#list tr td div.tools button, table#list tr td div.tools form {
                    display: block;
                    float: left;
                    width: 18px;
                    height: 18px;
                    margin: 0 4px 0 2px;
                    padding-top: 1px;
                    overflow: hidden;
                    text-decoration: none;
                    color: #3f4a5c;
                    cursor: pointer;
                }

                table#list tr td div.tools button.approve {
                    margin-left: 6px;
                    background: url(../images/icons/accept.png) no-repeat;
                }

                table#list tr td div.toolbar button.delete,
                table#list tr td div.tools button.delete {
                    margin-right: 4px;
                    padding-top: 2px;
                    border: none;
                    background-color: transparent;
                }

                table#list tr td div.toolbar button.delete i,
                table#list tr td div.tools button.delete i {
                    font-size: 16px;
                    color: #d02d1a;
                }

                /* table#list tr td div.toolbar a.edit.fa-cog:before,
                table#list tr td div.toolbar a.edit.fa-stopwatch:before,
                table#list tr td div.toolbar a.edit.fa-rocket:before,
                table#list tr td div.tools a.edit.fa-cog:before { */
                table#list tr td div.toolbar a,
                table#list tr td div.tools a {
                    font-size: 17px;
                }

                /*table#list tr td div.tools a.opportunity {
                    background: url(../images/icons/star.png) no-repeat;
                }

                table#list tr td div.tools a.project {
                    background: url(../images/icons/book_add.png) no-repeat;
                }

                table#list tr td div.tools a.time {
                    background: url(../images/icons/clock.png) no-repeat;
                }

                table#list tr td div.tools a.addFile {
                    background: url(../images/icons/application_get.png) no-repeat;
                } */

                table#list tr td div.tools button {
                    margin: 0;
                    border: 0;
                    cursor: pointer;
                }

                table#list tr td div.tools form {
                    background: none;
                }


/* =============================================================================
 * CALENDAR PAGE
 * ========================================================================== */
table#calendar {
    width: 100%;
    -webkit-box-shadow: 0px 7px 5px -4px rgba(0, 0, 0, 0.5);
       -moz-box-shadow: 0px 7px 5px -4px rgba(0, 0, 0, 0.5);
            box-shadow: 0px 7px 5px -4px rgba(0, 0, 0, 0.5);
    table-layout: fixed;
}

    table#calendar a {
        text-decoration: underline;
    }

    table#calendar a.calendar-arrows {
        color: #ffffff;
        font-size: 25px;
    }

    table#calendar a.calendar-arrows:hover {
        color: #10b83f;
    }

    table#calendar a:hover {
        text-decoration: none;
    }

    /* table#calendar tr {} */

        table#calendar tr th,
        table#calendar tr td {
            padding: 6px 10px 8px;
            color: #666;
            text-align: left;
            vertical-align: bottom;
        }

            table#calendar tr th {
                color: #fff;
                font-family: 'Open Sans', sans-serif;
                font-size: 1.5em;
                text-align: center;
                text-shadow: 0 2px #000;
            }

            table#calendar tr td {
                height: 130px;
                padding: 25px 5px 5px;
                background: #fff;
                border: 1px solid #d6d6d6;
                border-width: 0 1px 1px 0;
                font-size: 1.1em;
                line-height: 1.5em;
                vertical-align: top;
            }

                table#calendar tr.row-days td
                {
                    height: auto;
                    padding: 5px 0 0;
                    background: #ddd;
                    border: none;
                    border-top: 1px solid #629b28;
                    border-bottom: 1px solid #666;
                    color: #4e81a9;
                    font-size: 1.1em;
                    font-weight: bold;
                    line-height: 30px;
                    text-align: center;
                }
                table#calendar tr:not(.row-days) td:hover {
                    background: #F8F8FF;
                }

                table#calendar tr td.today {
                    background: #38687c;
                }

                table#calendar tr td.today:hover {
                    background: #467589;
                }

                table#calendar tr td.today a {
                    color: #fff;
                }

                table#calendar tr td:first-child {
                    border-left: 1px solid #d6d6d6;
                }

                table#calendar tr td:last-child {
                    border-right: 1px solid #d6d6d6;
                }

                table#calendar tr.row-days td:first-child {
                    border-top-left-radius: 6px;
                }

                table#calendar tr.row-days td:last-child {
                    border-top-right-radius: 6px;
                }

                table#calendar tr:last-child td:first-child {
                    border-bottom-left-radius: 6px;
                }

                table#calendar tr:last-child td:last-child {
                    border-bottom-right-radius: 6px;
                }

                table#calendar tr td div.day {
                    float: right;
                    margin: -20px 1px 0 0;
                    color: #4e81a9;
                    font-size: 1.4em;
                }

                    table#calendar tr td.today div.day {
                        color: #fff;
                    }

                table#calendar tr td div.events {
                    font-size: 0.85em;
                    line-height: 1.4em;
                }

                table#calendar tr td div.events a,
                table#calendar tr td div.events span {
                    display: block;
                    margin: 5px 0;
                    padding: 3px;
                    color: #303030;
                    text-decoration: none;
                }

                table#calendar tr td.today div.events a,
                table#calendar tr td.today div.events span {
                    color: #fff;
                }

                table#calendar tr td div.events a br,
                table#calendar tr td div.events span br {
                    display: block;
                }

                table#calendar tr td div.events br {
                    display: none;
                }

                table#calendar tr td div.highlight a.strike,
                table#calendar tr td div.events a.strike {
                    text-decoration: line-through;
                }



/* =============================================================================
 * CALENDAR CONTEXT MENU
 * ========================================================================== */
.context-menu {
    position: absolute;
    top: 60%;
    left: 10%;
    width: 180px;
    z-index: 100;
    background: #fff;
    -moz-box-shadow      : 0 0 10px 1px rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, .5);
    box-shadow          : 0 0 10px 1px rgba(0, 0, 0, .5);
    text-align: left;
}

    .context-menu.hidden {
        display: none;
    }

    .context-menu ul {
        margin: 10px 10px -5px;
        padding: 0;
    }

        .context-menu ul li {
            display: block;
            margin: 0 0 15px;
            line-height: 30px;
            cursor: pointer;
        }

            .context-menu ul li a {
                display: block;
                color: #303030;
                text-decoration: none;
                text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
            }

            .context-menu ul li span {
                float: left;
                width: 34px;
                height: 30px;
                margin: -3px 5px 0 0;
                background: url(../images/modules/calendar/icons/sprite-popup-icons.png) top left no-repeat;
            }

                .context-menu ul li:hover {
                    text-decoration: underline;
                }

                .context-menu ul li.add-event span {
                    background-position: -70px 0;
                }

                .context-menu ul li.update-event span {
                    background-position: -105px 0;
                }

                .context-menu ul li.delete-event span {
                    background-position: -175px 0;
                }

                .context-menu ul li.add-to-do span {
                    background-position: -315px 0;
                }

                .context-menu ul li.update-to-do span {
                    background-position: -385px 0;
                }

                .context-menu ul li.delete-to-do span {
                    background-position: -350px 0;
                }


/* --------------------------------------------------
 * CALENDAR POPUP
 * ----------------------------------------------- */
.popup {
    position: absolute;
    top: 40%;
    left: 50%;
    width: 600px;
    margin-left: -300px;
    z-index: 20;
    background: #fff;
    -moz-box-shadow      : 0 0 10px 1px rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, .5);
    box-shadow          : 0 0 10px 1px rgba(0, 0, 0, .5);
    text-align: left;
}

    .popup#popup-select-users {
        z-index: 30;
    }

    .popup.hidden {
        display: none;
    }

    .popup h2 {
        height: 36px;
        margin-top: 0;
        margin-bottom: 0;
        padding: 5px 5px 0;
        background: #333;
        color: #fff;
        font-size: 16px;
        line-height: 30px;
    }

        .popup h2 span {
            float: left;
            width: 30px;
            height: 30px;
            margin: 0 5px 0 0;
            background: url(../images/modules/calendar/icons/sprite-popup-icons.png) top left no-repeat;
            background-position: 0 -35px;
        }

        #popup-delete-event h2 span {
            background-position: -175px -30px;
        }

        #popup-update-event h2 span, #popup-recurring-event h2 span {
            background-position: -280px -30px;
        }

    .popup .close {
        position: absolute;
        top: 0px;
        right: 0px;
        padding: 5px 10px;
        color: #fff;
        font-family: 'Open Sans', sans-serif;
        font-size: 18px;
        font-weight: 800;
        line-height: 30px;
        cursor: pointer;
    }

    .popup .content {
        padding: 12px;
    }

    #popup-recurring-event img {
        margin-right: 10px;
        vertical-align: middle;
    }

    .popup form {
        padding-bottom: 0;
    }

    .popup fieldset {
        float: none;
        width: auto;
        margin: 0;
    }

    .popup fieldset p.details {
        border-top: 1px solid #999;
        padding-top: 10px;
    }

        .popup fieldset p.details b.title {
            display: block;
            margin-bottom: 10px;
        }

    .popup ol {
        margin: 0;
        list-style-type: none;
        overflow: visible;
    }

        .popup ol li {
            position: relative;
            line-height: 20px;
        }

            .popup ol li:first-child {
                padding-top: 0;
            }

            .popup ol li label, .popup ol li.checkbox label.alt, .popup ol li.radio label.alt {
                display: inline-block;
                width: auto;
                margin-right: 4px;
                padding-top: 7px;
            }

            .popup ol li textarea {
                height: auto;
            }

            .popup input.image {
                float: right;
                margin-bottom: 0;
            }

            .popup ol li input[type="checkbox"], .popup ol li input[type="radio"] {
                display: inline-block;
                float: none;
                vertical-align: middle;
            }


            .popup ol li input.date {
                width: 249px;
                padding-right: 28px;
                background: #fff url(../images/modules/calendar/icons/icon-form-date.png) top right no-repeat;
            }

                /* .popup ol li .number-container {} */

                    .popup ol li .number-container span.number {
                        display: inline-block;
                        vertical-align: middle;
                        cursor: pointer;
                    }

                        .popup ol li .number-container span.number span {
                            width: 14px;
                            height: 12px;
                            background: url(../images/modules/calendar/icons/icon-form-number.png) no-repeat;
                            border: none;
                        }

                            .popup ol li .number-container span.number span.top {
                                margin-top: 4px;
                            }

                            .popup ol li .number-container span.number span.bottom {
                                background-position: 0 -14px;
                            }

                /* .popup ol li.event-date {} */

                    .popup ol li.event-date label {
                        width: auto;
                    }

                .popup ol li.title, .popup ol li.location {
                    white-space: nowrap;
                }

                    .popup ol li.title label, .popup ol li.location label, .popup ol li.users label, .popup.to-do ol li.projects label, .popup.to-do ol li.lists label {
                        width: 80px;
                    }

                    .popup ol li.title input, .popup ol li.location input, .popup ol li.users input, .popup.to-do ol li.lists input {
                        width: 485px;
                    }

                    .popup.to-do ol li.projects select, .popup.to-do ol li.lists select {
                        width: 487px;
                    }

                    .popup.to-do ol li.users label, .popup.to-do ol li.change-order label.alt {
                        width: 100px;
                        margin-right: 4px;
                    }

                /* .popup ol li#color_container {}

                    .popup ol li#color_container label {
                        width: 100px;
                    }

                    .popup ol li#color_container div {
                        display: inline;
                    }

                        .popup ol li#color_container div input {
                            width: 18px;
                            height: 18px;
                        }

                        .popup ol li#color_container div label {
                            width: 18px;
                            height: 18px;
                            margin-left: -18px;
                            border: 1px solid #000;
                            text-indent: -9000px;
                        }

                            .popup ol li#color_container div label:hover {
                                -moz-box-shadow      : inset 1px 1px 2px 0px rgba(0, 0, 0, .6);
                                -webkit-box-shadow: inset 1px 1px 2px 0px rgba(0, 0, 0, .6);
                                box-shadow          : inset 1px 1px 2px 0px rgba(0, 0, 0, .6);
                            }

                            .popup ol li#color_container div input:checked + label {
                                background-image: url(../images/modules/calendar/icons/icon-colors-check.png);
                                background-repeat: no-repeat;
                                -moz-box-shadow      : inset 1px 1px 2px 0px rgba(0, 0, 0, .35);
                                -webkit-box-shadow: inset 1px 1px 2px 0px rgba(0, 0, 0, .35);
                                box-shadow          : inset 1px 1px 2px 0px rgba(0, 0, 0, .35);
                            }
                */

                /* .popup ol li.event-recurrence {} */

                    .popup ol li.event-recurrence label {
                        width: 90px;
                        text-align: right;
                    }

                        .popup ol li.event-recurrence label.separation, .popup ol li.event-recurrence label.stop-type {
                            width: auto;
                            margin-left: 20px;
                        }

                    .popup ol li.event-recurrence input {
                        width: 150px;
                    }

                        .popup ol li.event-recurrence input.date {
                            width: 127px;
                        }

                        .popup ol li.event-recurrence input#separation {
                            width: 40px;
                        }

                    .popup ol li.event-recurrence select {
                        width: 150px;
                    }

                        .popup ol li.event-recurrence div select#repeat_by_week {
                            width: 90px;
                        }

                        .popup ol li.event-recurrence div select#repeat_by_day {
                            width: 130px;
                        }

                    .popup ol li.event-recurrence div {
                        display: inline-block;
                        vertical-align: top;
                    }

                        .popup ol li.event-recurrence .hidden {
                            display: none;
                        }

                    .popup ol li.event-recurrence #count_container, .popup ol li.event-recurrence #until_container {
                        display: block;
                        margin-top: 5px;
                    }

                        .popup ol li.event-recurrence #count_container.hidden, .popup ol li.event-recurrence #until_container.hidden {
                            display: none;
                        }

                        .popup ol li.event-recurrence #count_container span, .popup ol li.event-recurrence #until_container span {
                            line-height: 30px;
                        }

                        .popup ol li.event-recurrence #count_container #count {
                            width: 50px;
                        }

                        .popup ol li.event-recurrence #until_container #until {
                            margin-bottom: 0;
                        }

                    .popup ol li#recurrence_day_container div label, .popup ol li#recurrence_repeat_by_container div label {
                        width: auto;
                        text-align: left;
                    }

                    /* .popup ol li#recurrence_repeat_by_container {} */

                        .popup ol li#recurrence_repeat_by_container div#recurrence_repeat_by_options_container {
                            display: block;
                            margin-left: 18px;
                        }

                            .popup ol li#recurrence_repeat_by_container div#recurrence_repeat_by_options_container.hidden {
                                display: none;
                            }

                        .popup ol li#recurrence_day_container select#repeat_by_week {
                            width: 90px;
                        }

                        .popup ol li#recurrence_day_container select#repeat_by_day {
                            width: 130px;
                        }

                #popup-select-users #popup-user_ids ol li.checkbox {
                    clear: none;
                    width: 50%;
                    padding-top: 8px !important;
                }

                    #popup-select-users #popup-user_ids ol li.checkbox input {
                        margin-right: 7px;
                    }

    .popup div.controls {
        margin: 30px 0 0;
    }


/* =============================================================================
 * DASHBOARD PAGE
 * ========================================================================== */
div#dashboardContainer {
    position: relative;
    display: -webkit-box;    /* ANDROID <= 4.3 */
    display: -webkit-flex;    /* OLD CHROME */
    display: -ms-flexbox;    /* IE 10 */
    display: flex;            /* SPEC */
}

div#dashboardProjects {
    -webkit-box-flex: 1;    /* ANDROID <= 4.3 */
    -webkit-flex: 1;        /* OLD CHROME */
    -ms-flex: 1;            /* IE 10 */
    flex: 1;                /* SPEC */
}

    /* Deprecated for <= IE9 */
    .noflex div#dashboardProjects {
        margin-right: 300px;
    }

    /* div#dashboardProjects table#list {} */

        div#dashboardProjects table#list tr td {
            padding-bottom: 0;
        }

            div#dashboardProjects table#list tr td span.company b a {
                color: #929191;
                line-height: 1.4em;
            }

                div#dashboardProjects table#list tr.active td span.company b a {
                    color: #4e81a9;
                }

            div#dashboardProjects table#list tr td span.due-date {
                float: right;
                min-width: 38px;
                padding: 0 4px;
                background: #6c9633;
                border: 1px solid #5e822c;
                border-top-color: #517126;
                border-bottom-color: #648b2f;
                border-radius: 3px;
                color: #fff;
                text-align: center;
            }

                div#dashboardProjects table#list tr td span.due-date.past-due {
                    background: #b43434;
                    border-color: #882727 #882727 #a73030;
                }

                div#dashboardProjects table#list tr td span.due-date.today {
                    background: #3672a5;
                    border-color: #29567c #2f638f #326a99;
                }


        div#dashboardProjects table#list tr td table.projects {
            width: 100%;
            margin: 0;
            padding: 0;
        }

            /* div#dashboardProjects table#list tr.active td table.projects {
                display: table;
            } */

            div#dashboardProjects table#list tr td table.projects tr td {
                padding: 5px 10px 15px 20px;
                border-top: 1px solid #d6d6d6;
                border-radius: 0;
            }

                div#dashboardProjects table#list tr td table.projects tr:first-child td {
                    border-top: none;
                }

                div#dashboardProjects table#list tr td table.projects table.to-do-lists {
                    width: 100%;
                }

                    div#dashboardProjects table#list tr td table.projects table.to-do-lists tr td {
                        padding: 5px 0 5px 30px;
                        border: none;
                    }

                        div#dashboardProjects table#list tr td table.projects table.to-do-lists tr:last-child td {
                            padding-bottom: 0;
                        }

                    div#dashboardProjects table#list tr td table.projects table.to-dos tr td {
                        padding: 5px 0 5px 10px;
                        border: none;
                    }

                        div#dashboardProjects table#list tr td table.projects table.to-dos tr td.date {
                            text-align: right;
                        }


        div#dashboardProjects p#viewAllProjects {
            float: right;
            margin-top: 10px;
        }

            div#dashboardProjects p#viewAllProjects a {
                display: block;
                padding: 0 8px;
                background: #fff;
                border: 1px solid #e0e0e0;
                border-radius: 3px;
                color: #3b6477;
                font-family: 'Open Sans', sans-serif;
                font-size: 1.2em;
                font-weight: 600;
                line-height: 1.6em;
            }


div#dashboardWidgets {
    width: 270px;
    margin: -35px 0 0 30px;
    vertical-align: top;
}

    /* Deprecated for <= IE9 */
    .noflex div#dashboardWidgets {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
    }

    div#dashboardWidgets div#myNotes {
        -webkit-box-shadow: 0px 7px 5px -4px rgba(0, 0, 0, 0.5);
           -moz-box-shadow: 0px 7px 5px -4px rgba(0, 0, 0, 0.5);
                box-shadow: 0px 7px 5px -4px rgba(0, 0, 0, 0.5);
        margin-top: 10px;
    }

        div#dashboardWidgets div#myNotes ul {
            margin: 5px 0;
            padding: 0;
            background: #fff;
            border: 1px solid #e0e0e0;
            border-top-color: #629b28;
            border-radius: 6px;
            list-style-type: none;
        }

            div#dashboardWidgets div#myNotes ul li {
                padding: 6px 10px 8px;
                border-top: 1px solid #d6d6e6;
            }

                div#dashboardWidgets div#myNotes ul li:first-child {
                    border-top: none;
                }

                div#dashboardWidgets div#myNotes ul li a {
                    text-decoration: underline;
                }

                    div#dashboardWidgets div#myNotes ul li a:hover {
                        text-decoration: none;
                    }


/* =============================================================================
 * PROJECTS LIST PAGE
 * ========================================================================== */
ol#projectsList {
    height: 450px;
    overflow: scroll;
    overflow-x: hidden;
}

    ol#projectsList li {
        padding-top: 10px;
    }

        ol#projectsList li label {
            padding: 0;
        }

        ol#projectsList li span {
            display: block;
        }

        ol#projectsList li ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

            ol#projectsList li ul li {
                padding-bottom: 2px;
                padding-top: 0;
            }

                ol#projectsList li ul li label {
                    width: 235px;
                }

div.comments {
    padding: 5px 0;
    /*background: #eee;*/
    color: #666;
    line-height: 1.5em;
}

    table#list table.to-dos tr td div.comments {
        display: none;
        /*width: 385px;*/
        margin: 0 0 0 25px;
        word-break: normal;
    }

        table#list table.to-dos tr td div.comments.visible {
            display: block;
        }

    div.comments ul {
        margin: 0;
        padding: 0;
        /*border-top: 1px solid #fff;*/
        list-style-type: none;
    }

        div.comments ul li {
            position: relative;
            padding: 5px 25px 5px 10px;
        }

            div.comments ul li span.name {
                font-weight: bold;
            }

            div.comments ul li span.date {
                float: right;
                text-align: right;
            }

            div.comments ul li span.comment {
                display: block;
            }

            div.comments ul li button.delete {
                position: absolute;
                display: none;
                top: 7px;
                right: 3px;
                width: 16px;
                height: 16px;
                background-color: transparent;
                border: none;
                cursor: pointer;
            }

            div.comments ul li button.delete i {
                color: red;
                font-size: 15px;
            }

    div.comments form {
        margin: 0;
        padding: 8px 10px 4px;
        /*border-top: 1px solid #fff;*/
    }

        table#list table.to-dos tr td div.comments form > div {
            background: #fff;
            border: 1px solid #a9a9a9;
            overflow: hidden;
            line-height: 0;
        }

        div.comments form textarea {
            -webkit-box-sizing: border-box;
               -moz-box-sizing: border-box;
                    box-sizing: border-box;
            width: 100%;
            height: 150px;
            min-height: 150px;
        }

            table#list table.to-dos tr td div.comments form textarea {
                height: 28px;
                min-height: 28px;
                background: none;
                border: none;
                resize: none;
                -webkit-transition: height 0.4s, min-height 0.4s;
                -moz-transition: height 0.4s, min-height 0.4s;
                transition: height 0.4s, min-height 0.4s;
            }

                table#list table.to-dos tr td div.comments form textarea:focus {
                    height: 70px;
                    min-height: 70px;
                }

        div.comments form input {
            bottom: 0 !important;
            float: right !important;
            width: auto;
        }

            table#list table.to-dos tr td div.comments form input {
                display: none;
                margin: 8px;
            }

                table#list table.to-dos tr td div.comments form textarea:focus + input, table#list table.to-dos tr td div.comments form textarea.changed + input {
                    display: block;
                }


/* =============================================================================
 * PROJECTS PROJECT PAGE
 * ========================================================================== */
ul#retainer-history {
    display: none;
    padding: 0;
    list-style-type: none;
}

    /* ul#retainer-history li {} */

        ul#retainer-history li label {
            display: inline-block;
        }

        ul#retainer-history li input {
            width: 45px;
        }

            ul#retainer-history li input.type {
                width: 75px;
                margin-right: 10px;
            }

            ul#retainer-history li input.datepicker {
                width: 100px;
            }

div.filesDropzone {
    display: none;
}

.icon-jfi-trash {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(../images/icons/delete.png) no-repeat;
}

.icon-jfi-trash:before {
    content: none !important;
}


/* =============================================================================
 * SETTINGS IMPORT PAGE
 * ========================================================================== */
div#import {
    position: relative;
    overflow: scroll;
    overflow-y: visible;
}

    div#import table {
        margin-top: 20px;
        color: #666;
    }

        /* div#import table tr {} */

            div#import table tr th {
                padding: 5px;
                border-bottom: 1px solid #EFEFEF;
                vertical-align: bottom;
            }

            div#import table tr td {
                padding: 2px 5px;
                border-bottom: 1px solid #EFEFEF;
            }


/* =============================================================================
 * FOOTER
 * ========================================================================== */
footer {
    width: 1250px;
    margin: 0 auto;
}

    footer div {
        margin-bottom: 30px;
        color: #a3a3a3;
    }

        footer div a {
            color: #fff;
            font-weight: bold;
        }

    footer p {
        margin: 15px;
    }

        footer p.navigation {
            margin-bottom: 5px;
        }

            footer p.navigation a {
                padding-right: 5px;
            }

        footer p.legal {
            width: 800px;
            margin-top: 0;
        }

        footer p.legal a {
            color: #ffffff;
        }

        footer p.logo {
            float: right;
            margin: 7px 15px;
        }

            footer p.logo a {
                display: block;
                width: 155px;
                height: 40px;
                background: url(../images/layout/logo-ProjectileCRM-Small.png) no-repeat;
                text-indent: -9000px;
            }


/* =============================================================================
 * PAGINATION
 * ========================================================================== */
#pagination {
    clear: both;
    padding-top: 20px;
    color: #999;
    text-align: center;
}

    #pagination a {
        color: #fff;
    }

    #pagination span.next {
        padding-right: 20px;
    }

    #pagination span.previous {
        padding-left: 20px;
    }

    #pagination .page:before, #pagination .next:before {
        content: " | ";
    }

        #pagination .page:first-child:before {
            content: "";
        }


/* =============================================================================
 * MISCELLANEOUS STYLES
 * ========================================================================== */
.system-message {
    margin-bottom: 15px;
}

.system-message.ui-state-highlight {
    padding: 0 5px;
    margin-bottom: 10px;
}

.system-message.ui-state-highlight p {
    padding: 10px;
    margin: 10px;
}

.system-message.ui-state-highlight p i {
    font-size: 17px;
    color: #123465;
}

.opportunity .ui-state-highlight p {
    padding: 10px;
    margin: 10px;
}

.opportunity .ui-state-highlight {
    padding: 0 5px;
    margin-bottom: 10px;
}

.system-message.ui-state-highlight a, .ui-widget-content .system-message.ui-state-highlight a, .ui-widget-header .system-message.ui-state-highlight a {
    color: #2e83ff !important;
}

.ui-state-error {
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.ui-datepicker select {
    padding-top: 1px;
    padding-bottom: 1px;
}

.dialog {
    display: none;
}

.ui-widget {
    margin-bottom: 10px;
}

div.error, p.error {
    color: #cc0000;
}

div.success {
    color: #009900;
}

ul#error, div.error ul, div.error p, div#login div.error p {
    margin: 10px 0;
}

    .popup div.error p, .popup div.success p {
        margin-top: 0;
    }

    div.error ul, div#login div.error ul {
        margin: -5px 0 20px;
    }

.left {
    float: left;
}

.right {
    float: right;
}

.hidden, ul#list li span.hidden {
    display: none;
}


/* =============================================================================
   CLUETIP
 * ========================================================================== */
#cluetip-close img {
    border: 0;
}

#cluetip-title {
    overflow: hidden;
}

#cluetip-title #cluetip-close {
    position: relative;
    float: right;
}

#cluetip-close a {
    font-weight: 900;
}

#cluetip-waitimage {
    width: 43px;
    height: 11px;
    position: absolute;
    /*background-image: url(wait.gif);*/
}

.cluetip-arrows {
    display: none;
    position: absolute;
    top: 0;
    left: -11px;
    height: 22px;
    width: 11px;
    background-repeat: no-repeat;
    background-position: 0 0;
}

#cluetip-extra {
    display: none;
}


.cluetip-default {
    background-color: #FFF;
}

    .cluetip-default #cluetip-outer {
        position: relative;
        margin: 0;
        background-color: #FFF;
        border: 1px solid #999;
    }

    .cluetip-default h3#cluetip-title {
        margin: 0 0 5px;
        padding: 6px 10px;
        background-color: #999;
        font-size: 1.25em;
        font-weight: bold;
        color: #fff;
    }

        .cluetip-default #cluetip-title a {
            color: #d9d9c2;
            font-size: 0.95em;
        }

    .cluetip-default #cluetip-inner {
        padding: 10px;
    }

    .cluetip-default div#cluetip-close {
        margin: 0 5px 5px;
        color: #900;
        text-align: right;
    }

/* default arrows */

.clue-right-default .cluetip-arrows {
    background-image: url(../images/layout/darrowleft.gif);
}

.clue-left-default .cluetip-arrows {
    left: 100%;
    margin-right: -11px;
    background-image: url(../images/layout/darrowright.gif);
}

.clue-top-default .cluetip-arrows {
    top: 100%;
    left: 50%;
    width: 22px;
    height: 11px;
    margin-left: -11px;
    background-image: url(../images/layout/darrowdown.gif);
}

.clue-bottom-default .cluetip-arrows {
    top: -11px;
    left: 50%;
    width: 22px;
    height: 11px;
    margin-left: -11px;
    background-image: url(../images/layout/darrowup.gif);
}


/* =============================================================================
   JQUERY UI
 * ========================================================================== */
#ui-datepicker-div {
    z-index: 9999;
}

/* div.ui-dialog {} */

    div.ui-dialog ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

        div.ui-dialog ul li {
            clear: left;
            float: left;
            padding-bottom: 4px;
        }

            div.ui-dialog ul li label {
                display: block;
                float: left;
                width: 50px;
            }

            div.ui-dialog ul li input,div.ui-dialog ul li textarea {
                float: left;
                padding: 2px 5px;
            }

            div.ui-dialog ul li textarea {
                width: 400px;
            }

.uploadUploader {
    float: left;
}


/* =============================================================================
   SHADOWBOX
 * ========================================================================== */
#sb-title-inner, #sb-info-inner, #sb-loading-inner, div.sb-message {
    font-family: "HelveticaNeue-Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 200;
    color: #fff;
}

#sb-container {
    position: fixed;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    z-index: 999;
    text-align: left;
    visibility: hidden;
    display: none;
}

#sb-overlay {
    position: relative;
    width: 100%;
    height: 100%;
}

#sb-wrapper {
    position: absolute;
    width: 100px;
    visibility: hidden;
}

    #sb-wrapper-inner {
        position: relative;
        height: 100px;
        border: 1px solid #639a25;
        border-top-width: 3px;
        overflow: hidden;
    }

#sb-body {
    position: relative;
    height: 100%;
    background: #fff;
}

    #sb-body img {
        border: none;
    }

    #sb-body-inner {
        position: absolute;
        width: 100%;
        height: 100%;
    }

#sb-player.html {
    height: 100%;
    overflow: hidden;
}

#sb-loading {
    position: relative;
    height: 100%;
    background: #fff;
}

#sb-loading-inner {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 24px;
    margin-top: -12px;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
}

    #sb-loading-inner span {
        display: inline-block;
        padding-left: 34px;
        background: url(../jscripts/shadowbox/loading.gif) no-repeat;
    }

#sb-title, #sb-info {
    position: relative;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#sb-title, #sb-title-inner {
    height: 26px;
    line-height: 26px;
}

#sb-title-inner {
    font-size: 16px;
}

#sb-info, #sb-info-inner {
    height: 20px;
    line-height: 20px;
}

#sb-info-inner {
    font-size: 12px;
}

#sb-nav {
    float: right;
    width: 45%;
    height: 16px;
    padding: 2px 0;
}

    #sb-nav a {
        display: block;
        float: right;
        width: 16px;
        height: 16px;
        margin-left: 3px;
        background-repeat: no-repeat;
        cursor: pointer;
    }

        #sb-nav-close {
            background-image: url(../jscripts/shadowbox/close.png);
        }

        #sb-nav-next {
            background-image: url(../jscripts/shadowbox/next.png);
        }

        #sb-nav-previous {
            background-image: url(../jscripts/shadowbox/previous.png);
        }

        #sb-nav-play {
            background-image: url(../jscripts/shadowbox/play.png);
        }

        #sb-nav-pause {
            background-image: url(../jscripts/shadowbox/pause.png);
        }

        #sb-counter {
            float: left;
            width: 45%;
        }

    #sb-counter a {
        padding: 0 4px 0 0;
        text-decoration: none;
        cursor: pointer;
        color: #fff;
    }

        #sb-counter a.sb-counter-current {
            text-decoration: underline;
        }

div.sb-message {
    padding: 10px;
    font-size: 12px;
    text-align: center;
}

    div.sb-message a:link,  div.sb-message a:visited {
        color: #fff;
        text-decoration: underline;
    }


#sb-body div#login {
    width: auto;
    margin: 20px 0 0 20px;
    padding: 0;
    text-align: left;
}

#sb-body div#login fieldset {
    margin: 0;
}

table.files .main .success {
    padding: 5px 10px;
    background: green;
    border-radius: 4px;
    color: #fff;
}

#tabbedContent #hours div.float-right {
    width: 25%;
    float: right;
}

#tabbedContent #hours select#project_year {
    width: 100%;
    border: 2px solid #4e81a9;
    height: 35px;
    background: none;
    margin-bottom: 20px;
}

#tabbedContent #hours label {
    display: block;
    padding: 10px 0;
}

#tabbedContent #hours table#list {
    min-height: 450px;
}

#tabbedContent #hours table#list thead tr th:first-child {
    min-width: 639px;
}

#tabbedContent #hours table#list thead tr th:nth-child(2) {
    min-width: 527px;
}

.ui-dialog-buttonpane div.loading ,
#tabbedContent #hours table tbody tr td div.loading {
    background-image: url(../images/ajax-loader.gif);
    background-position: center;
    background-repeat: no-repeat;
    padding: 30px 0;
}

.ui-dialog-buttonpane div.loading {
    float: left;
    width: 20%;
    padding: 25px 0;
}

table#list table.to-dos tr td div.comments form textarea.mention,
table#list table.to-dos tr td div.comments div.mentions-input-box div.mentions {
    line-height: 22px;
}

.mentions-input-box .mentions > div > strong > span {
    padding: 1px 5px;
    margin: -1px -5px;
    border-radius: 8px;
    background: #1a3143;
    color: #fff !important;
    z-index: 999999;
    position: relative;
}


/* RETAINER HOURS USED CHART STYLES */
table#chart-container {
    width: 100%;
}

table#chart-container tr td.bar-chart {
    padding: 20px 10px 30px 10px;
    background-color: #ebf0f3;
}


table#chart-container tr td.bar-chart ul.chart {
    display: table;
    table-layout: fixed;
    width: 80%;
    padding: 0;
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1) 2%, rgba(0, 0, 0, 0) 2%);
    background-size: 100% 30px;
    background-position: left top;
    border-spacing: 15px 0;
}

table#chart-container tr td.bar-chart ul.chart li {
    position: relative;
    display: table-cell;
    vertical-align: bottom;
    height: 150px;
    width: 40px;
}

table#chart-container tr td.bar-chart ul.chart li.axis {
    display: inline-block;
    margin-left: -45px;
}

table#chart-container tr td.bar-chart ul.chart li.axis div {
    margin: 14px 0 0px 0;/*18px 0 20px 0*/
}

table#chart-container tr td.bar-chart ul.chart li span {
    max-height: 80%;
    display: block;
    background: rgba(209, 236, 250, 0.75);
    animation: draw 1s ease-in-out;
    border-radius: 6px 6px 0 0;
    opacity: 0.75;
}

table#chart-container tr td.bar-chart ul.chart li span::before {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: 5px 0;
    display: block;
    text-align: center;
    content: attr(data-hours);
    word-wrap: break-word;
}

table#chart-container tr td.bar-chart ul.chart li span.overallocated, table#list tr td.legends span.overallocated {
    background-color: #cf2e1c;
}

table#chart-container tr td.bar-chart ul.chart li span.underallocated, table#list tr td.legends span.underallocated {
    background-color: #10b83f;
}

table#chart-container tr td.bar-chart ul.chart li span.project-management, table#list tr td.legends span.project-management {
    background-color: #4B2D73;
    border-radius: 0;
}

table#chart-container tr td.bar-chart ul.chart li span.project-management.rounded {
    border-radius: 6px 6px 0 0;
}

table#chart-container tr td.bar-chart ul.chart li span.complete {
    background-color: #10b83f; /*#377cb3;*/
}

table#chart-container tr td.bar-chart div.quarters {
    float: right;
    display: table-cell;
    width: 31%;
}

table#chart-container tr td.bar-chart div.quarters div.wrapper-progress-bar {
    width: 70%;
    margin: 0 auto;
}

table#chart-container tr td.bar-chart div.quarters div.wrapper-progress-bar span.title {
    text-align: center;
    display: inherit;
    padding: 10px 0;
    font-weight: 700;
}


table#chart-container tr td.bar-chart ul.quarter-progress-bar {
    float: right;
    display: table-cell;
    width: 31%;
    margin-top: 3%;
}

table#chart-container tr td.bar-chart ul.quarter-progress-bar li {
    list-style: none;
    float: left;
    width: 50%;
    padding: 3% 0;
    text-align: right;
}

table#chart-container tr td.bar-chart ul.quarter-progress-bar li span.text {
    margin-right: 15%;
}

table#chart-container tr td.bar-chart ul.quarter-progress-bar .quarter-circle {
    background-color: #cf2e1c;
    border-radius: 50%;
    width: 10%;
    padding: 4%;
    color: #fff;
    font-weight: bold;
    position: relative;
    font-size: 12px;
    line-height: 18px;
}

table#chart-container tr td.bar-chart ul.quarter-progress-bar .quarter-circle .quarter-bar {
    height: 15px;
    border-radius: 0 9px 9px 0;
    background: #cf2e1c;
    width: 135px;
    position: absolute;
    left: 80%;
    top: 25%;
}

table#chart-container tr td.bar-chart ul.quarter-progress-bar .quarter-circle.overallocated,
table#chart-container tr td.bar-chart ul.quarter-progress-bar .quarter-circle .quarter-bar.overallocated {
    background-color: #cf2e1c;
}

table#chart-container tr td.bar-chart ul.quarter-progress-bar .quarter-circle.underallocated,
table#chart-container tr td.bar-chart ul.quarter-progress-bar .quarter-circle .quarter-bar.underallocated {
    background-color: #10b83f;
}

table#chart-container tr td.bar-chart ul.quarter-progress-bar .quarter-circle.complete,
table#chart-container tr td.bar-chart ul.quarter-progress-bar .quarter-circle .quarter-bar.complete {
    background-color: #377cb3;
}


table#chart-container tr td.bar-chart div.title {
    color: #3d3d3d;
    font-weight: bold;
    padding-left: 25px;
}

table#chart-container tr td.bar-chart div.hours-legend {
    float: left;
    width: 5%;
    font-size:12px;
    margin: 2.5% 2%;
    font-weight: bold;
    color: #3d3d3d;
}

table#chart-container tr td.bar-chart div.hours-legend p {
    margin-bottom: 0;
}

table#chart-container tr td.bar-chart div.wrapper-bar-chart {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1) 2%, rgba(0, 0, 0, 0) 2%);
    background-position: left top;
    background-size: 100% 50px;
    float: left;
    width: 65%;
}

table#chart-container tr td.bar-chart div.wrapper-bar {
    height: 200px;
    position: relative;
    width: 55px;
    float: left;
    margin-right: 10px;
    text-align: center;
}

table#chart-container tr td.bar-chart div.bar {
    height: 100%;
}

table#chart-container tr td.bar-chart div.month-legend {
    padding-top: 5px;
}

table#chart-container tr td.bar-chart div.bar div.filling {
    position: absolute;
    bottom: 0;
    max-height: 100%;
    width: 100%;
    border-radius: 6px 6px 0 0;
}

table#chart-container tr td.bar-chart div.bar div.filling.overallocated {
    background-color: #cf2e1c;
}

table#chart-container tr td.bar-chart div.bar div.filling.underallocated {
    background-color: #10b83f;
}

table#chart-container tr td.bar-chart div.bar div.filling.complete {
    background-color: #377cb3;
}