*, *::before, *::after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

html {
    font-size: 100%;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    color: #3c4443;
}

/**************************
*Rmove text-shadow in selection highlight
*These selection declaration have to be separate
*Customize the background color to match your design
***************************/

::selection {
    color: #fff;
    background-color: lightgray;
}

::-moz-selection {
    color: #fff;
    background-color: lightgrey;
}

.expiredDate {
    background-color: lightgrey;
}

.redDate {
    background-color: red;
    color: white;
}

.amberDate {
    background-color: orange;
    color: white;
}

.greenDate {
    background-color: green;
    color: white;
}

h1, h2, h3, h3, h4, h5, h6 {
    line-height: 1.1;
    margin: 0;
    padding: 0;
}

img {
    width: auto;
    max-width: 100%;
    height: auto;
}

svg:not(:root) {
    overflow: hidden;
}


input[type="checkbox"],
input[type="radio"] {
    margin: 0;
    padding: 0;
    min-height: 20px;
}

input[type="search"]::webkit-search-decoration {
    -webkit-appearance: none;
}


button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto;
    vertical-align: top;
    resize: vertical;
}


button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    cursor: pointer;
    -webkit-appearance: button;
    *overflow: visible;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Arial", Helvetica-Neue, Helvetica, sans-serif;
    margin-bottom: 10px !important;
}

    h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
        color: inherit;
        text-decoration: none;
    }

h1 {
    font-size: 30px;
    font-size: 1.875rem;
}

h2 {
    font-size: 26px;
    font-size: 1.625rem;
}

h3 {
    font-size: 24px;
    font-size: 1.5rem;
}

h4 {
    font-size: 22px;
    font-size: 1.375rem;
}

h5 {
    font-size: 20px;
    font-size: 1.25rem;
}

h6 {
    font-size: 18px;
    font-size: 1.125rem;
}

a {
    color: rgba(41, 103, 75, 0.88);
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-transition: border-color 0.15s ease;
    -moz-transition: border-color 0.15s ease;
    -ms-transition: border-color 0.15s ease;
    -o-transition: border-color 0.15s ease;
    transition: border-color 0.15s ease;
    color: #666;
}

.help-block {
    margin-top: -10px;
    margin-bottom: 0;
}

.has-error table.uib-timepicker {
    top: -11px;
}
/*==========================================
    Placeholder
  ===========================================*/
::-webkit-input-placeholder {
    color: #343434;
    opacity: 0.6;
    -webkit-transition: opacity 0.15s ease;
    -moz-transition: opacity 0.15s ease;
    -ms-transition: opacity 0.15s ease;
    -o-transition: opacity 0.15s ease;
    transition: opacity 0.15s ease;
}

:focus::-webkit-input-placeholder {
    opacity: 0.4;
}

::-moz-placeholder {
    color: #343434;
    opacity: 0.6;
}

:focus:-moz-placeholder {
    opacity: 0.4;
}

:-ms-input-placeholder {
    color: #343434;
}

dt {
    text-transform: uppercase;
    margin-bottom: 10px;
}

dd {
    margin-bottom: 20px;
}

.main-wrapper {
    height: 100%;
}

:focus-ms-input-placeholder {
    opacity: 0.4;
}

.sidebar-header {
    padding: 10px 14px 5px;
    font-size: 11px;
}

.spinner:after {
    background-color: rgba(0,0,0,0.3);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    content: " ";
    z-index: 800;
}

.spinner:before {
    background-color: transparent;
    color: #fff;
    top: 45%;
    left: 50%;
    width: 100%;
    height: 100%;
    position: relative;
    content: " ";
    z-index: 900;
}

a:hover {
    cursor: pointer;
}

.appLegend {
    font-size: 30px;
    font-weight: 300;
    display: block;
    width: 100%;
    padding: 0 0 15px 0;
    margin-bottom: 20px;
    font-size: 21px;
    line-height: inherit;
    color: #333;
    border-bottom: 1px solid #e5e5e5;
}

.table > tbody > tr > td, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    vertical-align: top;
}

.table > thead > tr > th {
    vertical-align: bottom;
}

tr:hover {
    cursor: pointer;
}

.row-extra {
    padding: 0 0 20px 0;
}

.row-top {
    padding-top: 20px;
}

.dataTables_filter {
    float: right;
}

    .dataTables_length label, .dataTables_filter label {
        font-weight: 500;
        text-align: left;
        white-space: nowrap;
    }

.dataTables_length select.pageSize {
    display: inline-table;
    width: 75px;
    
}

.dataTables_length label.pageSizeLabel {
    display: block;
    width: 75px;
    margin-bottom:0px;
}

.dataTables_length label.searchDate {
    display: inline-table;
    width: 200px;
    vertical-align: top;
    position: relative;
}

.dataTables_filter input.searchBox {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

.filter_clear_button {
    display: inline-block;
    width: auto;
    vertical-align: top;
}

span.helpBlock {
    margin-top: -10px;
    font-size: 13px;
    display: block;
}

.main-content-wrapper #main-content {
    margin-top: 85px;
}

/********************
    PAGINATION
*********************/
.pagination {
    margin: 0;
}

    .pagination > li > a, .pagination > li > span {
        color: #008165;
    }

    .pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
        background-color: #008165;
        border-color: #01775e;
    }

/********************
    LOGIN
*********************/

.login-wrap,
.password-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('../img/grahams_main_bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}

.logo-login {
    margin: -15px auto 30px auto;
    background-image: url('../img/logo-graham.jpg');
    background-repeat: no-repeat;
    width: 280px;
    height: 68px;
    display: block;
    background-size: 280px 68px;
}

.account-wall {
    position: absolute;
    margin: auto;
    padding: 70px 0 10px 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 360px;
    width: 100%;
    height: 420px;
    background-color: rgba(255, 255, 255, 0.35);
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}

.forgot__password {
    position: absolute;
    top: 238px;
    left: 270px;
    font-weight: 600;
}

    .account-wall a {
        text-decoration: none;
        color: #00775b
    }

.form-signin, form.form-signin {
    margin: 0 auto;
    max-width: 330px;
    padding: 15px;
}

    .form-signin .form-signin-heading {
        margin-bottom: 10px;
    }

    .form-signin .form-control {
        position: relative;
        font-size: 16px;
        min-height: 46px;
        border-radius: 5px;
        height: auto;
        padding: 10px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

        .form-signin .form-control:focus {
            z-index: 2;
        }

    .form-signin input {
        margin-bottom: 10px;
        border-radius: 0;
    }



.message-alert {
    margin-top: 12px;
    background-color: #fff;
    text-align: center;
}

.message-alert--warning {
    color: #b71111;
}

.message-alert--success {
    color: #3c763d;
}

.login-title {
    color: #555;
    font-size: 18px;
    font-weight: 400;
    display: block;
}

.form-control:focus {
    border-color: #175676;
}

#acceptForm label {
    font-size: .9em;
    font-weight: 500
}

#rejectionForm label {
    font-size: .9em;
    font-weight: 500
}

p.input-group.date {
    max-width: 195px;
    margin-bottom: 0;
    float: left;
}

    p.input-group.date:first-child {
        margin-right: 20px;
    }

.timepicker .dropdown-menu table {
    margin: 0 auto;
}

.timepicker .form-control[disabled] {
    background-color: #fff;
}

/*************************
    DASHBOARD
**************************/
.tile-width{
    width:18.66%;
}
#header {
    position: fixed;
    z-index: 1000;
    width: 100%;
}

.sidebar {
    position: fixed;
    padding-top: 60px;
    top: 76px;
}

.dashboard-tile {
    -webkit-border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
}

    .dashboard-tile:hover {
        cursor: pointer;
    }

.activeTile {
    border-bottom: 5px solid #008165;
}

#main-content .dashboard-tile .content ul li:first-child {
    font-size: 1.625rem;
}

/*************************
    PANELS / INPUT FORMATING
*************************/

.panel {
    border-radius: 0;
}

.app-select {
    max-width: 195px !important;
}

.form-horizontal .control-label {
    text-align: left;
}

#workOrder input {
    max-width: 450px;
}

#workOrder textarea.form-control {
    max-width: 500px;
    width: 100%;
}

table.uib-timepicker {
    position: absolute;
    top: -20px;
    left: 226px;
}

td.uib-increment.hours, td.uib-increment.minutes,
td.uib-decrement.hours, td.uib-decrement.minutes {
    display: none;
}

.file-box {
    position: relative;
    display: block;
    float: left;
    width: 100%;
    max-width: 620px;
    margin: 20px 0;
}

    .file-box .info-bar {
        padding: 10px 15px;
        background: rgba(41, 103, 75, 0.88);
        color: #FFF;
    }

table.file-list {
    background: #F8F8F8;
    border: 1px dashed #DDD;
}

    table.file-list i.fa-file-text-o {
        color: #437960;
    }


.drop-box {
    display: block;
    background: #F8F8F8;
    border: 1px dashed #DDD;
    max-width: 620px;
    width: 100%;
    /* height: 65px; */
    text-align: center;
    padding: 120px 0;
    color: #bdbdbd;
}

    .drop-box em {
        color: #00775b;
        font-weight: 600;
        font-style: normal;
    }

.additional-info-menu span {
    display: block;
}

.additional-info-menu li span:first-child {
    font-weight: 600;
}


.appLegend h3 i.ion-android-add-circle {
    color: #00775b;
}

.appLegend h3 i:hover {
    cursor: pointer;
}

.appFormSubmit {
    margin: 20px 0;
    padding: 10px 30px;
}

/***********************
    WORKORDER HISTORY 
*********************/

.history-list-item {
    background-color: #fff;
    border-left: 10px solid #008165;
    border-top: 1px solid rgba(51, 51, 51, 0.5);
    border-right: 1px solid rgba(51, 51, 51, 0.5);
    border-bottom: 1px solid rgba(51, 51, 51, 0.5);
    margin: 0px 0px 20px;
    padding: 0px;
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
}

    .history-list-item:nth-child(even) {
        border-left: 10px solid rgba(0, 129, 101, 0.5);
        border-top: 1px solid rgba(51, 51, 51, 0.25);
        border-right: 1px solid rgba(51, 51, 51, 0.25);
        border-bottom: 1px solid rgba(51, 51, 51, 0.25);
    }


.history-list-header {
    padding: 10px 15px;
    border-bottom: 1px solid #e2e2e2;
}

    .history-list-header span {
        font-size: 20px;
        font-weight: 600;
        color: #008165;
    }

.history-list-item:nth-child(even) .history-list-header span {
    color: rgba(0, 129, 101, 0.5);
}

.history-list-overview {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #f7f7f7;
    float: left;
    display: block;
}

    .history-list-overview ul {
        border-top: 1px solid #e2e2e2;
    }

        .history-list-overview ul li {
            float: left;
            display: block;
            list-style: none;
            width: 32.26%;
            margin: 0 0 0 1.6%;
            text-align: center;
            padding: 4px 0;
            border-right: 1px solid #e2e2e2;
        }

            .history-list-overview ul li:first-child {
                margin-left: 0;
            }

            .history-list-overview ul li:last-child {
                border-right: 0;
            }

    .history-list-overview span {
        display: block;
    }

        .history-list-overview span:first-child {
            font-size: 14px;
            font-weight: 600;
        }

        .history-list-overview span:last-child {
            text-transform: uppercase;
            font-weight: 600;
            color: #a7a7a7;
            font-size: 11px;
        }

.history-list-body {
    margin: 20px 0;
}

    .history-list-body h4 {
        margin-bottom: 5px;
        color: #46555f;
        font-size: 16px;
        font-weight: 600;
    }

    .history-list-body p {
        font-size: 13px;
        color: #676a6c;
    }

/*
    START FINISH TIME
*/

.start-finish-wrap {
    position: relative;
    max-width: 520px;
    width: 100%;
    padding: 5px 20px;
    border: 2px solid rgba(0, 129, 101, 0.21);
    border-radius: 6px;
    background-color: rgba(0, 129, 101, 0.10);
}

.start-finish {
    position: relative;
    margin-top: 10px;
    margin-left: 5px;
    max-width: 350px;
    width: 100%;
}

.start-finish p {
    padding: 6px 15px;
    font-size: 1rem;
}

    .start-finish strong {
        display: block;
        text-transform: uppercase;
        font-size: 0.75rem
    }

    .start-finish span {
        color: #194c41;
        font-size: 0.9rem;
    }

    .start-finish:before {
        content: "";
        position: absolute;
        left: 15px;
        top: 50%;
        width: 65%;
        height: 1px;
        background: #b4d9d1;
    }

.divider-path {
    position: absolute;
    left: -7px;
    top: 30px;
    width: 2px;
    height: 52px;
    background: -webkit-repeating-linear-gradient(#00775b, #00775b 3px, transparent 3px, transparent 6px);
    background: repeating-linear-gradient(#00775b, #00775b 3px, transparent 3px, transparent 6px);
    border-color: #00775b;
}

.divider-path:before {
    content: "";
    position: absolute;
    top: -21px;
    left: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid;
    border-color: inherit;
}

.divider-path:after {
    content: "";
    position: absolute;
    top: 62px;
    left: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid;
    border-color: inherit;
}



/**************************
    DOCUMENTS
***************************/

.documents-list {
    margin-top: 10px;
}

    .documents-list ul {
        margin: 45px 0 0 0;
        padding: 0;
    }

    .documents-list li {
        list-style-type: none;
        margin-bottom: 50px;
        display: inline-block;
    }


    .documents-list a {
        position: relative;
        border: 2px solid rgba(0, 129, 101, 0.21);
        border-radius: 6px;
        text-decoration: none;
        padding: 35px 20px 15px 60px;
        margin-right: 40px;
        font-weight: 600;
        color: #444;
        background: url(../img/download.png) 2px 0 no-repeat;
        background-color: rgba(0, 129, 101, 0.10);
    }

        .documents-list a:hover {
            border-color: #008165;
            box-shadow: 0 0 10px rgba(0, 129, 101, 0.5);
        }

        .documents-list a:active {
            border-color: #ccc;
            box-shadow: none;
        }

        .documents-list a[href$=".ppt"]:before,
        .documents-list a[href$=".pptx"]:before,
        .documents-list a[href$=".key"]:before,
        .documents-list a[href$=".pdf"]:before,
        .documents-list a[href$=".doc"]:before,
        .documents-list a[href$=".docx"]:before,
        .documents-list a[href$=".xls"]:before,
        .documents-list a[href$=".xlsx"]:before,
        .documents-list a[href$=".xlr"]:before,
        .documents-list a[href$=".zip"]:before,
        .documents-list a[href$=".txt"]:before,
        .documents-list a[href$=".csv"]:before,
        .documents-list a[href$=".png"]:before,
        .documents-list a[href$=".jpg"]:before,
        .documents-list a[href$=".jpeg"]:before,
        .documents-list a[href$=".gif"]:before,
        .documents-list a[href$=".tif"]:before,
        .documents-list a[href$=".tiff"]:before {
            position: absolute;
            width: 62px;
            height: 72px;
            top: 2px;
            left: 2px;
            transition: all .4s;
        }

        .documents-list a[href$=".ppt"]:before,
        .documents-list a[href$=".pptx"]:before,
        .documents-list a[href$=".key"]:before {
            content: url('../img/ppt.png');
        }

        .documents-list a[href$=".pdf"]:before {
            content: url('../img/pdf.png');
        }

        .documents-list a[href$=".txt"]:before,
        .documents-list a[href$=".csv"]:before {
            content: url('../img/text.png');
        }

        .documents-list a[href$=".doc"]:before,
        .documents-list a[href$=".docx"]:before {
            content: url('../img/doc.png');
        }

        .documents-list a[href$=".xls"]:before,
        .documents-list a[href$=".xlsx"]:before,
        .documents-list a[href$=".xlr"]:before {
            content: url('../img/xls.png');
        }

        .documents-list a[href$=".zip"]:before {
            content: url('../img/zip.png');
        }


        .documents-list a[href$=".png"]:before,
        .documents-list a[href$=".jpg"]:before,
        .documents-list a[href$=".jpeg"]:before,
        .documents-list a[href$=".tif"]:before,
        .documents-list a[href$=".tiff"]:before,
        .documents-list a[href$=".gif"]:before {
            content: url('../img/img.png');
        }


        .documents-list a[href$=".ppt"]:hover:before,
        .documents-list a[href$=".pptx"]:hover:before,
        .documents-list a[href$=".key"]:hover:before,
        .documents-list a[href$=".pdf"]:hover:before,
        .documents-list a[href$=".doc"]:hover:before,
        .documents-list a[href$=".docx"]:hover:before,
        .documents-list a[href$=".xls"]:hover:before,
        .documents-list a[href$=".xlsx"]:hover:before,
        .documents-list a[href$=".xlr"]:hover:before,
        .documents-list a[href$=".zip"]:hover:before,
        .documents-list a[href$=".txt"]:hover:before,
        .documents-list a[href$=".csv"]:hover:before,
        .documents-list a[href$=".png"]:hover:before,
        .documents-list a[href$=".jpg"]:hover:before,
        .documents-list a[href$=".jpeg"]:hover:before,
        .documents-list a[href$=".gif"]:hover:before,
        .documents-list a[href$=".tif"]:hover:before,
        .documents-list a[href$=".tiff"]:hover:before {
            opacity: 0;
        }

        .documents-list a[href$=".ppt"]:after,
        .documents-list a[href$=".pptx"]:after,
        .documents-list a[href$=".key"]:after,
        .documents-list a[href$=".pdf"]:after,
        .documents-list a[href$=".doc"]:after,
        .documents-list a[href$=".docx"]:after,
        .documents-list a[href$=".xls"]:after,
        .documents-list a[href$=".xlsx"]:after,
        .documents-list a[href$=".xlr"]:after,
        .documents-list a[href$=".zip"]:after,
        .documents-list a[href$=".txt"]:after,
        .documents-list a[href$=".csv"]:after,
        .documents-list a[href$=".png"]:after,
        .documents-list a[href$=".jpg"]:after,
        .documents-list a[href$=".jpeg"]:after,
        .documents-list a[href$=".gif"]:after,
        .documents-list a[href$=".tif"]:after,
        .documents-list a[href$=".tiff"]:after {
            content: "Download";
            position: absolute;
            top: 10px;
            left: 60px;
            color: #aaa;
        }


/**************************
    GRAHAMS BUTTONS
*************************/
.btn-table {
    padding: 5px 8px;
}

.btn-primary-grahams {
    color: #fff !important;
    border: solid 1px #0d7d63;
    background: #00775b;
    background: -webkit-gradient(linear, left top, left bottom, from(#1bb38f), to(#00775b));
    background: -moz-linear-gradient(top, #1bb38f, #00775b);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1bb38f', endColorstr='#00775b');
}

    .btn-primary-grahams:hover {
        color: #fff;
        background: #00775b;
        background: -webkit-gradient(linear, left top, left bottom, from(#00775b), to(#1bb38f));
        background: -moz-linear-gradient(top, #00775b, #1bb38f);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00775b', endColorstr='#1bb38f');
    }

    .btn-primary-grahams:active {
        position: relative;
        top: 1px;
        color: #005440;
    }

.btn-calendar {
    padding: 7px 13px;
    font-size: 14px;
}

/**********************
    ANIMATION
***********************/

[ng\:cloak], [ng-cloak], .ng-cloak {
    display: none !important;
}


.animate-repeat {
    box-sizing: border-box;
}

    .animate-repeat.ng-move,
    .animate-repeat.ng-enter,
    .animate-repeat.ng-leave {
        -webkit-transition: all ease-in-out 0.4s;
        transition: all ease-in-out 0.4s;
    }

        .animate-repeat.ng-leave.ng-leave-active,
        .animate-repeat.ng-move,
        .animate-repeat.ng-enter {
            opacity: 0;
        }

            .animate-repeat.ng-leave,
            .animate-repeat.ng-move.ng-move-active,
            .animate-repeat.ng-enter.ng-enter-active {
                opacity: 1;
            }


.contract-info .animate-repeat {
    line-height: 5em;
}

    .contract-info .animate-repeat.ng-leave.ng-leave-active,
    .contract-info .animate-repeat.ng-move,
    .contract-info .animate-repeat.ng-enter {
        height: 0;
    }

        .contract-info .animate-repeat.ng-leave,
        .contract-info .animate-repeat.ng-move.ng-move-active,
        .contract-info .animate-repeat.ng-enter.ng-enter-active {
            height: 5em;
        }



.work-order-detail {
    position: relative;
    -moz-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
    overflow: hidden;
    height: 0;
    opacity: 0;
}

    .work-order-detail.active-view {
        overflow: visible;
        max-height: 1500px;
        height: 100%;
        opacity: 1;
    }


.accept-popover {
    width: 500px;
}

/**********************
    NOTIFICATIONS
***********************/

.notificationunread {
    font-weight:bold;
}

.notificationsubjectlink {
    color:Highlight;
    text-decoration:underline;
}

.notificationWOlink {
    color: Highlight;
    text-decoration: underline;
}

.speech-bubble-from-you {
    position: relative;
    background: rgba(0,0,0,0.3);
    color:black;
    border-radius: .4em;
}

.speech-bubble {
    position: relative;
    /*background: #00aabb;*/
    background: #538018;
    background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
    background: -moz-linear-gradient(top, #6b9d28, #436b0c);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
    border-radius: .4em;
    color: #ffffff;
}

.notificationsUnreadNumber {
    display:inline;
    font-weight:bold;
}

    .notificationsUnreadNumber:before {
        content: " (";
    }

    .notificationsUnreadNumber:after {
        content: ")";
    }
    
.workOrdersAllTable, .reportsTable {
    display: block;
    overflow-x: auto;
}