/* HTML5 Reset and font-face */
@charset "utf-8";

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: top
}

:focus {
    outline: 0
}

article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}

.noselect,
.noselect * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

input[type=text],
input[type=email],
input[type=search],
input[type=password],
input[type=submit],
input[type=button],
textarea {
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    appearance: none;
    -webkit-appearance: none
}




/*

  Fonts

*/
@font-face {
    font-family: 'Open Sans';
    src: url(fonts/OpenSans-BoldItalic.woff2) format('woff2'), url(fonts/OpenSans-BoldItalic.woff) format('woff');
    font-weight: 700;
    font-style: italic
}

@font-face {
    font-family: 'Open Sans';
    src: url(fonts/OpenSans-ExtraBold.woff2) format('woff2'), url(fonts/OpenSans-ExtraBold.woff) format('woff');
    font-weight: 800;
    font-style: normal
}

@font-face {
    font-family: 'Open Sans';
    src: url(fonts/OpenSans-Light.woff2) format('woff2'), url(fonts/OpenSans-Light.woff) format('woff');
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: 'Open Sans';
    src: url(fonts/OpenSans-Bold.woff2) format('woff2'), url(fonts/OpenSans-Bold.woff) format('woff');
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: 'Open Sans';
    src: url(fonts/OpenSans-Italic.woff2) format('woff2'), url(fonts/OpenSans-Italic.woff) format('woff');
    font-weight: 400;
    font-style: italic
}

@font-face {
    font-family: 'Open Sans';
    src: url(fonts/OpenSans-SemiBoldItalic.woff2) format('woff2'), url(fonts/OpenSans-SemiBoldItalic.woff) format('woff');
    font-weight: 600;
    font-style: italic
}

@font-face {
    font-family: 'Open Sans';
    src: url(fonts/OpenSans-LightItalic.woff2) format('woff2'), url(fonts/OpenSans-LightItalic.woff) format('woff');
    font-weight: 300;
    font-style: italic
}

@font-face {
    font-family: 'Open Sans';
    src: url(fonts/OpenSans-ExtraBoldItalic.woff2) format('woff2'), url(fonts/OpenSans-ExtraBoldItalic.woff) format('woff');
    font-weight: 800;
    font-style: italic
}

@font-face {
    font-family: 'Open Sans';
    src: url(fonts/OpenSans-SemiBold.woff2) format('woff2'), url(fonts/OpenSans-SemiBold.woff) format('woff');
    font-weight: 600;
    font-style: normal
}

@font-face {
    font-family: 'Open Sans';
    src: url(fonts/OpenSans-Regular.woff2) format('woff2'), url(fonts/OpenSans-Regular.woff) format('woff');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: 'Open Sans';
    src: url(fonts/OpenSans-ExtraBold.woff2) format('woff2'), url(fonts/OpenSans-ExtraBold.woff) format('woff');
    font-weight: 800;
    font-style: normal
}



/*

  Colors

*/

@accent : #2189AD;
@accent2 : #c7e1e2;
@accent3 : #eaf6f7;
@grey : #293033;
@light : #F0F0F0;
@green : #14c130;
@red : #9B0303;
@highlight: #fffecf;

@headerHeight : 40px;



/*

  Helpers

*/
.boxShadow (@arguments: 0 1px 2px rgba(0, 0, 0, .25)) {
    -webkit-appearance: none;
    box-shadow: @arguments;
    -moz-box-shadow: @arguments;
    -webkit-box-shadow: @arguments;
}

.textShadow (@arguments: 0 0 4px #444) {
    text-shadow: @arguments;
    -moz-text-shadow: @arguments;
    -webkit-text-shadow: @arguments;
}

.borderRadius (@arguments: 4px) {
    border-radius: @arguments;
    -moz-border-radius: @arguments;
    -webkit-border-radius: @arguments;
}

.opacity (@num: 0.5, @ieNum: 50) {
    opacity: @num;
    /* standard: ff gt 1.5, opera, safari */
    -ms-filter: "alpha(opacity=@ieNum)";
    /* ie 8 */
    filter: alpha(opacity=@ieNum);
    /* ie lt 7 */
    -khtml-opacity: @num;
    /* safari 1.x */
    -moz-opacity: @num;
    /* ff lt 1.5, netscape */
}

.boxStyle {
    position: relative;
    display: inline-block;
    background: @light;
    color: #3d6b7c;
    padding: 5px;
    margin: 0 12px 17px 0;
    box-sizing: border-box;
    text-decoration: none;
    border: @light 1px solid;
    .borderRadius(8px);
}



/*

  HTML Elements & Basics

*/

html,
body {
    height: 100%;
    width: 100%;
}

body {
    background: @light;
    color: #000;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;

    &.no_overflow {
        overflow: hidden
    }
}

h1,
h2,
h3 {
    color: @accent;

    &.inline {
        display: inline-block;
        font-weight: 400
    }

    span {
        vertical-align: baseline
    }
}

h1 {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 5px;
    color: #000
}

h2 {
    font-size: 18px;
    margin-top: 10px;

    &.fullTitle {
        width: 100%;
        height: auto;
        position: relative;
        z-index: 4;
        background: @accent2;
        display: block;
        color: #000;
        font-size: 28px;
        padding: 10px 0 6px;
        text-transform: uppercase;
        text-indent: 270px
    }
}

h3 {
    font-size: 16px;
    font-weight: 100;

    &.title {
        padding: 0 0 10px;
        font-size: 1.2em
    }
}

strong {
    font-weight: bold
}

br.clear {
    clear: both;
    display: block;
}

.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.text-right {
    text-align: right
}

.left {
    float: left
}

.right {
    float: right
}

.hidden {
    display: none !important
}

ul {
    &.list {
        margin: 10px 0 0 20px;

        li {
            padding: 5px
        }
    }

    &.blank {
        list-style-type: none;
    }

    &.previewList {
        padding: 0;
        transition: all .25s ease;

        li {
            border-bottom: @light 1px solid;
            padding: 10px 10px 0;
            position: relative;
            box-shadow: 0 2px 2px rgba(0, 0, 0, .05), 0 1px 0 rgba(0, 0, 0, .15);

            &:before {
                content: "";
                width: 3px;
                height: 100%;
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                background: @accent;
            }

            &:last-child {
                border-bottom: none;
            }

            &.techStatusUnresolved:before {
                background: @red
            }

            &.techStatusResolved:before {
                background: @green
            }

            .subLinks {
                border-width: 1px 0 0;
                margin: 5px 0 0;
                height: 24px;
                line-height: 24px;
                width: calc(~'100% + 17px');
                position: relative;
                left: -7px;

                a {
                    height: 24px;
                    line-height: 24px;
                    padding: 0 10px !important;
                }
            }

            &.loadAllTasks {
                width: 155px;
                height: 24px;
                line-height: 24px;
                position: absolute;
                bottom: -23px;
                right: 50%;
                margin: 0 -77px;
                padding: 0;

                &:before {
                    display: none;
                }

                a {
                    display: block;
                    color: #fff;
                    height: 24px;
                    line-height: 24px;
                    text-decoration: none;
                    text-align: center;
                    text-transform: uppercase;
                    background: @grey;
                    transition: background .25s ease;

                    &:hover {
                        background: @accent;
                    }
                }
            }
        }

        &:hover-nope {
            background: #F0F0F0;
            cursor: pointer;

            li {
                border-bottom-color: #fff;
            }
        }
    }
}

.half {
    width: 50%;
    box-sizing: border-box;

    &.left {
        padding-right: 5px
    }

    &.right {
        padding-left: 5px
    }
}

.third {
    width: 33%;
    display: block;
    float: left;

    &.middle {
        width: 33%;
        margin: 0 .5%
    }
}

.col {
    display: block;
    float: left;

    &.span_1_of_8 {
        width: 12.5%
    }

    &.span_2_of_8 {
        width: 25%
    }

    &.span_3_of_8 {
        width: 37.5%;

        &.pad_left {
            padding-left: 30px;
            box-sizing: border-box;
        }
    }

    &.span_4_of_8 {
        width: 50%
    }

    &.span_5_of_8 {
        width: 62.5%
    }

    &.span_6_of_8 {
        width: 75%
    }

    &.span_7_of_8 {
        width: 87.5%
    }

    &.fifth {
        width: 20%
    }

    &.text-center {
        text-align: center
    }
}

.red {
    color: @red
}

.green {
    color: @green
}

a {
    color: @accent;

    &.red {
        color: @red
    }

    &.green {
        color: @green
    }

    &.nostyle {
        color: #000;
        text-decoration: none
    }

    &.block {
        display: block
    }
}

.faded a {
    color: @light
}

.faded {
    color: lighten(@grey, 40%)
}

.small {
    font-size: .8em;
    font-weight: 400
}

.redtext {
    color: @red
}

.upper {
    text-transform: uppercase
}

.highlightBG {
    background: @highlight;
    transition: background .25s ease;
}

hr {
    border: none;
    border-top: @accent2 1px solid
}

.spacer {
    display: block;
    width: 100%;
    height: 20px;

    &.x2 {
        height: 40px
    }
}

.pad-left {
    margin-left: 5px
}

.pad-right {
    margin-right: 5px
}

.pad-all {
    padding: 10px
}

.pad-top {
    padding-top: 10px
}

.black {
    color: #000 !important
}

.button {
    display: inline-block;
    width: auto;
    padding: 8px 12px;
    background: @accent;
    color: #fff;
    text-transform: uppercase;
    .borderRadius();
    border: none;
    text-decoration: none;
    transition: all .2s ease;
    cursor: pointer;

    &.block {
        display: block;
        width: 100%;
        text-align: center;
        box-sizing: border-box;
        padding: 6px 0
    }

    &:hover {
        background: lighten(@accent, 10%)
    }

    &.grey {
        background: @light;
        color: #000;

        &:hover {
            .boxShadow();
        }
    }

    &.white {
        background: #fff;
        color: #000;

        &:hover {
            .boxShadow()
        }
    }

    &.small {
        font-size: .8em
    }

    &.large {
        padding: 10px;
        font-size: .8em
    }

    &.confirm {
        background: @green;
        color: #fff;

        &:hover {
            background: lighten(@green, 10%)
        }
    }

    &.alert {
        background: @highlight;
        color: #fff;

        &:hover {
            background: darken(@highlight, 10%)
        }
    }

    &.error {
        background: @red;
        color: #fff;

        &:hover {
            background: lighten(@red, 10%)
        }
    }

    &:disabled {
        background: @light;
        color: #777;

        &:hover {
            background: @light;
            color: #777;
            cursor: default
        }
    }
}

label {
    display: block;
    margin: 4px 0 2px;

    &.inline {
        display: inline-block;
        padding: 0 5px;

        &.block {
            width: 100px;
            text-align: left;
            padding: 0
        }

        input[type=checkbox] {
            margin-right: -2px
        }

        &:first-child {
            padding-left: 0
        }
    }
}

textarea {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    border: @accent2 1px solid
}

input[type=text],
input[type=password],
input[type=email],
input[type=date],
input[type=datetime-local],
select {
    border: #c7e1e2 1px solid;
    padding: 6px;

    &.inputblock {
        width: 100%;
        box-sizing: border-box
    }

    &.minimal {
        width: auto;
        padding: 0 0 2px 2px;
        border-width: 0 0 1px;
        font-size: 12px;
        position: relative;
        top: -1px;
        background: #fff;

        &.casedate {
            cursor: pointer;
        }
    }
}

input[type=text].dateRange,
.input {
    border: #aaa 1px solid;
    padding: 4px 10px 5px;
    border-radius: 4px;
    font-size: 13px;
    width: 180px
}

.select2 {
    width: 250px !important;
    max-width: 100%;

    .full {
        width: 100%
    }
}

.input {
    width: 250px;
    box-sizing: border-box
}

.loading {
    width: 100%;
    height: 100%;
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, .6);
    color: #000;
    font-size: 40px;
    text-align: center;
    display: table;
}

/*

  Main Page Elements

*/
.tags-info-body {
    position: absolute;
    margin-top: 10px;
    width: 300px;
    padding: 10px;
    background-color: white;
    z-index: 99999;
    border: @accent 1px solid;
    .boxShadow(0 2px 4px rgba(0, 0, 0, .5));
    display: none;
    font-size: 11px;

    div {
        margin-bottom: 5px;
    }
}

header#main {
    width: 100%;
    height: @headerHeight;
    background: @grey;
    display: block;
    color: #fff;
    border-bottom: @grey 1px solid;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;

    .logo {
        width: auto;
        height: @headerHeight;
        line-height: @headerHeight;
        float: left;
        padding: 0 20px 0 10px;
        font-size: 26px;
        font-weight: bold;
        color: #fff;
        text-decoration: none;
        position: relative;
        cursor: pointer;
        text-indent: 10px;

        .mainNavToggle {
            display: block
        }

        .dropdown {
            width: 100%;
            max-height: 0px;
            overflow: hidden;
            background: @grey;
            position: absolute;
            top: @headerHeight;
            left: 0;
            transition: all .25s ease;
            .boxShadow(0 2px 6px rgba(0, 0, 0, .3));
            z-index: 20;

            &.down {
                max-height: 300px;
                z-index: 9999
            }

            a {
                height: 50px;
                line-height: 50px;
                font-size: 15px;
                font-weight: 100;
                text-decoration: none;
                color: #fff;
                display: block;
                text-indent: 20px;
                text-transform: uppercase;
                transition: all .25s ease;

                &:hover {
                    background: rgba(255, 255, 255, .2)
                }
            }
        }

        i,
        svg {
            transition: all .25s ease
        }

        &.show {
            .dropdown {
                max-height: 300px;
                z-index: 9999
            }

            i,
            svg {
                transform: rotate(180deg)
            }
        }
    }

    form.search {
        width: 400px;
        height: @headerHeight;
        display: block;
        position: relative;
        float: left;
        margin: 0 10px 0 0;

        .searchInput {
            width: 400px;
            height: @headerHeight;
            background: rgba(255, 255, 255, .4);
            border: none;
            text-indent: 10px;
            position: absolute;
            top: 0;
            left: 0;
            font-size: 16px;
            padding: 0;

            &:focus {
                background: #fff
            }

            &::-webkit-input-placeholder {
                color: #eee;
                font-weight: 100
            }
        }

        .searchSubmit,
        .closeSearch {
            width: @headerHeight;
            height: @headerHeight;
            border: none;
            display: block;
            color: #ccc;
            font-size: 20px;
            line-height: @headerHeight;
            text-align: center;
            position: absolute;
            top: 0;
            right: 0;
            transition: all .25s ease;
        }

        .closeSearch {
            right: 30px;
            display: none
        }

        .searchResults {
            position: absolute;
            width: 400px;
            top: 40px;
            left: 0;
            background: #fff;
            max-height: 200px;
            overflow: auto;

            a {
                display: block;
                width: 100%;
                padding: 10px;
                box-sizing: border-box;
                text-decoration: none;
                color: #555;
                font-size: 11px;

                &:hover {
                    background: @accent2;
                    color: #000
                }

                span {
                    float: right;
                    text-transform: uppercase;
                    color: #888;
                    font-size: 10px
                }
            }
        }
    }

    .icon {
        width: 50px;
        height: @headerHeight;
        line-height: @headerHeight;
        text-align: center;
        display: inline-block;
        color: #fff;
        text-decoration: none;
        font-size: 20px;
        transition: all .25s ease;
        .opacity(.8, 80);

        &:hover {
            .opacity(1, 100)
        }

        &.settings {
            line-height: 2px;

            .bar {
                width: 24px;
                height: 2px;
                display: inline-block;
                background: @light;
                margin: 5px 0 0;
                .borderRadius(2px);
                position: relative;

                &:first-child {
                    margin-top: 12px
                }

                &:before {
                    content: "";
                    width: 4px;
                    height: 4px;
                    display: block;
                    .borderRadius(2px);
                    background: @grey;
                    border: @light 1px solid;
                    position: absolute;
                    top: -2px;
                    left: 4px;
                    transition: all .25s ease
                }

                &:nth-child(2):before {
                    left: 16px
                }
            }

            &:hover {
                .bar {
                    &:before {
                        left: 12px
                    }

                    &:nth-child(2):before {
                        left: 4px
                    }

                    &:nth-child(3):before {
                        left: 8px
                    }
                }
            }
        }
    }

    .bubble {
        position: absolute;
        top: 5px;
        right: 5px;
        font-size: 10px;
        background: @red;
        width: auto;
        height: 16px;
        border-radius: 8px;
        line-height: 16px;
        text-align: center;
        min-width: 16px
    }

    .ddModalHolder {
        position: relative;
        overflow: visible;
        display: inline-block;

        .createCase {
            color: #fff;
            width: auto;
            height: @headerHeight;
            line-height: @headerHeight;
            display: inline-block;
            padding: 0 20px;
            text-decoration: none;
            font-size: 18px;
            text-transform: uppercase;
            font-weight: 100;
            transition: all .25s ease;

            i,
            svg {
                font-size: 20px;
                color: @green;
                transition: all .25s ease
            }

            &:hover {
                background: @light;
                color: @green
            }
        }

        .ddBox {
            width: 400px;
            height: auto;
            background: @light;
            border: @accent 1px solid;
            position: absolute;
            top: 70px;
            left: -15px;
            color: #000;
            padding: 20px;
            .boxShadow(0 2px 4px rgba(0, 0, 0, .5));
            display: none;

            &:before {
                content: "";
                width: 20px;
                height: 20px;
                display: block;
                background: @light;
                border: @accent 1px solid;
                border-width: 1px 1px 0 0;
                transform: rotate(-45deg);
                position: absolute;
                top: -11px;
                left: 30px
            }

            textarea {
                height: 100px
            }

            .tagsInput {
                width: auto;
                background: #fff;
                position: relative;
                z-index: 1
            }

            .tagList {
                background: #fff;
                border: @accent2 1px solid;
                border-bottom-color: #fff;
                position: relative;
                top: 1px;
                z-index: 6
            }

            &.ddRight {
                left: auto;
                right: -15px;

                &:before {
                    left: auto;
                    right: 30px
                }
            }
        }

        &.show {
            .createCase {
                background: @light;
                color: @grey;

                i,
                svg {
                    transform: rotate(-45deg);
                    color: @grey
                }
            }

            .ddBox {
                display: block
            }
        }

        .notifications {
            height: 300px;
            overflow: auto;
            display: block
        }

        .notification {
            display: block;
            font-size: 12px;
            text-decoration: none;
            border-bottom: @accent2 1px solid;
            padding: 5px 0;
            transition: all .25s ease;

            .timestamp {
                display: block;
                font-size: 10px;
                color: #888;
            }

            &:first-child {
                margin-top: 5px;
            }

            &:last-child {
                border: none
            }

            &.statusUnread {
                background: #F9F9F9;
                border-right: @red 3px solid;
                padding-left: 10px;

                &:hover {
                    background: #fff
                }
            }
        }

        /* Create a simple hover dd */
        &.hover {
            .ddBox {
                width: 250px;
                left: inherit;
                right: 5px;
                padding: 0;

                &:before {
                    right: 7px;
                    z-index: 1
                }

                a {
                    width: 100%;
                    height: auto;
                    line-height: 30px;
                    display: block;
                    box-sizing: border-box;
                    text-align: left;
                    padding: 5px 10px;
                    position: relative;
                    z-index: 2;
                    font-size: 14px;
                    color: @accent;
                    transition: none;

                    &:hover {
                        background: @accent;
                        color: #fff;

                        &:first-child {
                            &:before {
                                content: "";
                                width: 20px;
                                height: 20px;
                                display: block;
                                background: @accent;
                                border: @accent 1px solid;
                                border-width: 1px 1px 0 0;
                                transform: rotate(-45deg);
                                position: absolute;
                                top: -11px;
                                right: 7px
                            }
                        }
                    }

                    i,
                    svg {
                        margin-right: 10px
                    }
                }

                &.over:before {
                    background: @accent;
                }

                .subMenu {
                    a {
                        font-size: 12px;
                        padding: 2px 10px 2px 20px;
                        line-height: 25px;
                        background: rgba(0, 0, 0, .1);
                        transition: padding-left .25s ease;

                        &:first-child:before {
                            display: none;
                        }

                        &.selected:after {
                            content: "selected";
                            position: absolute;
                            top: 5px;
                            right: 5px;
                            font-size: 10px;
                            background: @accent;
                            color: #fff;
                            text-transform: uppercase;
                            height: 14px;
                            line-height: 14px;
                            padding: 2px 4px;
                            .borderRadius(4px);
                        }

                        &:hover {
                            color: @accent;
                            padding-left: 22px;

                            &.selected {
                                padding-left: 20px;
                                cursor: default
                            }
                        }
                    }
                }

            }
        }

        .newTicket {
            .ql-toolbar {
                padding: 0px;
            }

            .details {
                background: white;
            }
        }
    }
}

.entityManagment {
    .subfield {
        display: flex;
        margin-bottom: 10px;
        align-items: start;

        .options {
            display: flex;
            align-items: center;
            margin-left: 5px;
            column-gap: 5px;
        }
    }
}

.alertMessage {
    position: fixed;
    top: 40px;
    left: 0;
    width: 100%;
    padding: 10px;
    text-align: center;
    background: #333;
    color: #fff;
    z-index: 19;
    text-transform: uppercase;
    font-size: 12px;

    &.success {
        background: @green
    }

    &.error {
        background: @red
    }

    &.alert,
    &.warning {
        background: @highlight;
        color: #000
    }
}


.filterOptions {
    display: block;
    max-height: 0px;
    overflow: hidden;
    transition: all .25s ease;

    &.show {
        max-height: 500px
    }
}


.sectionOptions {
    display: inline-block;
    padding-top: 10px;

    a {
        text-decoration: none;
        font-size: 11px;

        &.button {
            padding: 6px 12px
        }
    }
}

.box {
    background: #fff;
    border: @accent2 1px solid;
    margin: 0 0 20px;
    padding: 20px;
    box-sizing: border-box;
    transition: all .25s ease;
    position: relative;
    border-radius: 10px;

    &.nopad {
        padding: 0
    }

    &:first-child {
        margin-top: 40px
    }

    &:after {
        content: "";
        display: block;
        clear: both;
    }

    &.highlight {
        background: @highlight;
    }

    .closeCase {
        position: absolute;
        top: 40px;
        left: -54px;
        background: #ccc;
        color: #888;
        transform: rotate(-90deg);
        padding: 5px 10px 3px;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 10px;
        transition: all .25s ease;

        &:hover {
            background: @red;
            color: #fff
        }
    }
}

.reopenCase {
    display: block;
    width: 770px;
    height: 40px;
    background: #fff;
    float: left;
    text-align: center;
    line-height: 40px;
    margin-top: 30px
}

.center {
    width: 300px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -150px -150px !important;

    h2 {
        margin-top: 0
    }
}

div[data-field=details] {
    padding: 10px 0 5px;
    white-space: pre-wrap;
}

.loader {
    padding-top: 40px;
    padding-bottom: 20px;

    .container,
    .wrap {
        width: 1100px;
        display: block;
        margin: 0 auto;
        overflow: visible;

        &.pad {
            padding-bottom: 50px
        }

        &.single {
            background: #fff;
            width: 900px;
            max-width: 100%;
            padding: 20px;
            box-sizing: border-box;

            li {
                list-style-type: none;
            }
        }

        .feed {
            width: 770px;
            float: left;
            margin: 30px 0 0;

            &:last-child {
                margin-bottom: 50px;
            }
        }

        .LOADING {
            -webkit-filter: blur(5px);
            -moz-filter: blur(5px);
            -o-filter: blur(5px);
            -ms-filter: blur(5px);
            filter: blur(5px);
        }

        &.compressed {
            .feed {
                margin-top: 10px;

                &:nth-child(2) {
                    margin-top: 30px;
                }
            }

            .toggleDetails {
                display: none
            }

            .compress {
                display: none
            }
        }

        .sidebar {
            width: 300px;
            position: fixed;
            top: 70px;
            left: 50%;
            margin: 0 245px
        }
    }

    .wrap {
        .feed {
            width: 100%;
            float: none;
        }
    }
}

.loadingicon {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    background-image: url(../img/loading_spinner.gif);
    background-size: 50px;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 99;
}

.autosize {
    min-width: 75px;
    max-width: 300px
}

.loader {
    transition: all .25s ease;

    &.blur {
        .opacity(.5, 50);
        filter: blur(4px);
        pointer-events: none;
    }
}

.modal {
    width: 400px;
    height: auto;
    display: block;
    padding: 20px;
    background: #fff;
    .boxShadow();
    box-sizing: border-box;
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -200px -200px;
    z-index: 2;

    h3 {
        font-size: 18px;
        font-weight: bold;
        padding-bottom: 5px;
        margin-bottom: 20px;
        border-bottom: @accent 1px solid
    }

    .closeModal {
        position: absolute;
        top: 5px;
        right: 5px
    }
}


/*

  Section Elements

*/



.blurb {
    position: relative;
    box-sizing: border-box;
    line-height: 1.4em;
    min-height: 75px;

    h1 {
        margin-bottom: 0
    }

    .small {
        position: relative;
        top: -2px
    }
}

.subLinks {
    width: 100%;
    height: 30px;
    line-height: 30px;
    border: @light 1px solid;
    border-width: 1px 0;

    a {
        width: auto;
        height: 30px;
        line-height: 30px;
        display: block;
        float: left;
        text-align: center;
        text-decoration: none;
        color: @grey;
        font-size: 11px;
        text-transform: uppercase;
        padding: 0 20px !important;
        border-right: @light 1px solid;
        transition: all .25s ease;

        &:hover,
        &.hover {
            background: @light;
            color: @accent;
        }

        &.selected {
            background: @highlight
        }

        &.taskFilterToggle {
            float: right;
            position: relative;
            overflow: visible;
            z-index: 2;

            .taskfilters {
                position: absolute;
                top: 30px;
                right: 0;
                display: none;

                label {
                    display: block;
                    width: 150px;
                    text-align: left;
                    padding-left: 10px !important;

                    input {
                        position: relative;
                        left: -4px;
                    }
                }
            }

            &:hover .taskfilters {
                display: block;
            }
        }
    }
}

.profileIMG {
    width: 75px;
    height: 75px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;

    img {
        width: 100%;
        position: absolute;
        top: 0
    }

    strong {
        width: 100%;
        height: auto;
        position: absolute;
        left: 0;
        bottom: -10px;
        line-height: 14px;
        text-align: center;
        padding: 2px 0 0;
        font-weight: 400;
        font-size: 9px;
        background: @accent2;
        z-index: 2;

        span {
            display: block;
            font-weight: 100;
            font-style: italic;
            font-size: .8em;
            .opacity(.8, 80)
        }
    }
}

.profileThumb {
    width: 30px;
    height: 30px;
    display: inline-block;
    margin: 5px;
    .borderRadius(20px);

    img {
        width: 100%;
        .borderRadius(15px)
    }
}

.editable {
    white-space: pre-wrap;

    &:hover {
        background: #ffffdb
    }

    &.editing {
        padding: 4px;
        background: #ffffdb;
        border: #888 1px solid;
    }
}

.autoUpdate {
    min-height: 75px !important
}

.section {
    overflow: visible;
    padding: 10px 0;

    &.collapsed {
        display: none
    }

    &.allTasks {
        padding: 0;

        h2:first-child {
            margin-top: 0
        }
    }

    .section:not(.collapsed) {
        border-bottom: @light 1px dashed;
    }
}

.sectionToggle {
    text-decoration: none;

    i,
    svg {
        transition: all .25s ease;
        transform: rotate(180deg)
    }

    &.down {

        i,
        svg {
            transform: rotate(0deg)
        }
    }
}



.tags {
    .tag {
        width: 150px;
        height: auto;
        .boxStyle();
        font-size: .8em;
        position: relative;
        box-sizing: border-box;
        margin: 5px;
        cursor: pointer;
        overflow: visible;

        &.type1 {
            width: 310px;
        }

        &.noedit {
            cursor: default
        }

        strong {
            color: @accent;
            display: block
        }

        .right {
            position: absolute;
            top: 5px;
            right: 5px;
            .opacity(0, 0);
            transition: all .25s ease;

            a {
                margin-left: 5px
            }
        }

        .editTag {
            position: absolute;
            top: 5px;
            right: 20px;
            .opacity(0, 0);
            transition: all .25s ease
        }

        .editField {
            &:before {
                content: ", "
            }

            &:nth-child(2):before {
                content: ""
            }
        }

        .editModal {
            width: 200px;
            height: auto;
            padding: 10px;
            background: #fff;
            position: absolute;
            top: 100%;
            left: 0;
            .boxShadow();
            z-index: 10;
            border: @accent 1px solid;
            margin-top: 10px;

            &.type1 {
                width: 350px
            }

            .addTagInput {
                text-decoration: none;
                position: absolute;
                top: 10px;
                right: 10px
            }

            h3 {
                text-align: center;
                border-bottom: @accent2 1px solid;
                font-weight: bold;
                padding-bottom: 5px
            }

            input[type=text] {
                width: 100%;
                box-sizing: border-box;
                font-size: 16px;
                margin-top: 10px
            }

            p {
                font-size: 14px;
                margin-top: 10px;
                position: relative;
                padding-right: 40px;

                .right {
                    top: 0;
                    font-size: 12px
                }

                &:hover {
                    .right {
                        .opacity(1, 100)
                    }
                }
            }

            .holder {
                position: relative;
                display: none;

                #inTag {
                    position: absolute;
                    top: 0;
                    left: 0
                }

                .addInTag {
                    position: absolute;
                    top: 14px;
                    right: 5px;
                    width: 20px;
                    height: 20px;
                    .borderRadius(10px);
                    display: block;
                    background: #2189AD;
                    color: #fff;
                    text-align: center;
                    line-height: 22px;
                }
            }

            .button {
                margin-top: 10px;
                .borderRadius();
                padding: 8px 16px;
                cursor: pointer;
                transition: all .25s ease;

                &:hover {
                    .boxShadow()
                }
            }
        }
    }

    &.inline {
        .tag {
            width: auto;
            padding-right: 20px;

            &.type1 {
                width: auto
            }
        }
    }
}


.tagsInput {
    width: 100%;
    height: auto;
    display: block;
    border: @accent2 1px solid;
    box-sizing: border-box;
    overflow: visible;
    position: relative;

    .clearTagSearch {
        position: absolute;
        top: 10px;
        right: 10px;
        .opacity(0, 0);
        transition: all .25s ease;

        &.show {
            .opacity(1, 100)
        }
    }

    .tag {
        width: auto;
        height: auto;
        font-size: 10px;
        padding: 4px;
        margin: 4px;
    }

    .newTag {
        margin: 4px;
        padding: 4px;
        font-size: 10px;
        border: none;
        width: auto;
    }

    .results {
        position: absolute;
        right: 0;
        top: 100%;
        width: 100%;
        background: #f6f6f6;
        border-bottom: @accent2 1px solid;
        max-height: 260px;
        overflow: auto;

        .result {
            padding: 10px 5px 10px 10px;
            margin: 5px 1%;
            border: @accent2 1px solid;
            background: #fff;
            font-size: 12px;
            width: 23%;
            float: left;
            box-sizing: border-box;

            .small {
                overflow: hidden;

                a {
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap
                }
            }

            &.wide {
                width: 98%;

                .parentTag {
                    display: inline-block;
                    padding: 0 5px;
                    margin: 0 0 8px 0;
                    border-left: #ccc 1px solid;

                    &:first-child {
                        border-left-color: transparent;
                        padding-left: 0
                    }
                }

                hr {
                    clear: both
                }
            }

            .associated {
                font-size: 10px;
                color: @grey;
                padding-top: 4px;
                margin-top: 4px;
                border-top: @grey 1px dashed;

                a {
                    font-size: 9px;

                    &:hover {
                        color: @grey
                    }
                }
            }
        }

        p.noresult {
            width: 100%;
            padding: 10px 0;
            text-align: center
        }

        &.wide {
            .result {
                width: 48%;

                &.wide {
                    width: 98%
                }
            }
        }

        .tagAssociationList {
            span {
                display: inline-block;
                padding: 5px 7px;
                margin: 2px;
                background: #ccc;
                color: #000;
                font-size: 10px;

                a {
                    color: #000;

                    &.right {
                        margin-left: 6px
                    }

                    &:hover {
                        color: @accent
                    }
                }
            }

            .addAllSub {
                text-decoration: none;
                position: relative;
                left: 4px;
                top: 3px;
            }
        }
    }
}


.commentCount {
    font-size: 14px;
    text-transform: uppercase;
    position: relative;
    top: 10px
}

.messageBoard {
    overflow: visible;
    height: auto;
    position: relative;
    padding: 0 0 20px;
    border: @light 1px solid;
    border-width: 0 0 1px 0;

    .loadMore,
    .moreToggle {
        display: block;
        width: 250px;
        height: 20px;
        color: @accent;
        margin: 0 auto;
        text-align: center;
        text-decoration: none;
        position: relative;

        &.moreToggle {
            margin-bottom: 20px
        }

        &:before,
        &:after {
            content: "";
            width: 20px;
            height: 1px;
            display: block;
            background: @accent;
            position: absolute;
            top: 8px
        }

        &:before {
            left: 0
        }

        &:after {
            right: 0
        }
    }

    .messages {
        overflow: visible;
        width: 100%;
        padding: 10px 15px;
        box-sizing: border-box;

        a.activityfilter {
            //width:100%; 
            height: auto;
            //line-he:30pxight:30px; 
            display: block;
            float: right;
            //text-align:center; 
            text-decoration: none;
            color: @grey;
            font-size: 11px;
            //text-transform:uppercase; 
            padding: 0 20px 5px 10px;
            //border-right:@light 1px solid; 
            transition: all .25s ease;
            z-index: 5;
            margin-right: 30px;

            &:hover {
                background: @light;
                color: @accent;

                .activityfilters {
                    display: block;
                    background: @light;
                }
            }

            &.activityFilterToggle {
                float: left;
                position: relative;
                overflow: visible;
                z-index: 5;
            }

            .activityfilters {
                //position:relative; 
                //overflow:visible; 
                position: absolute;
                float: left;
                //top:20px;
                width: 125px;
                display: none;
                z-index: 5;
                height: auto;
                margin-top: 5px;
                margin-right: 10px;

                label {
                    display: block;
                    text-align: left;

                    input {
                        position: relative;
                        text-align: left
                    }
                }
            }
        }
    }

    .messageHolder {
        width: 100%;
        clear: both;

        &.show {
            display: block
        }
    }

    .message {
        .boxStyle();
        padding-left: 30px;
        margin: 0 0 30px 30px;
        min-width: 60%;

        &>svg,
        &>i {
            position: absolute;
            top: 5px;
            left: -35px;
            font-size: 20px;
            .opacity(.5, 5)
        }

        .profileThumb {
            position: absolute;
            top: -10px;
            left: -10px
        }

        .timestamp {
            position: absolute;
            bottom: -20px;
            left: 10px;
            text-align: left;
            color: lighten(@grey, 50%);
            font-size: 12px;
            width: 400px;

            a {
                color: #a5b1b6;
            }
        }

        .visibility {
            display: none;
            width: auto;
            height: 20px;
            line-height: 20px;
            background: @light;
            color: @grey;
            .borderRadius();
            position: absolute;
            top: 0;
            right: -50px;
            padding: 0 5px;
            overflow: visible;

            svg:nth-child(2),
            i:nth-child(2) {
                margin-left: 4px;
                transition: all .25s ease
            }

            &.selected svg:nth-child(2),
            &.selected i:nth-child(2) {
                transform: rotate(-180deg)
            }

            .visibilitySelect {
                position: absolute;
                top: 22px;
                right: 0;
                background: #fff;
                .boxShadow();
                border: @accent2 1px solid;
                color: @grey;
                width: 200px;
                height: auto;
                z-index: 5;

                span {
                    display: block;
                    padding: 5px 10px
                }

                a {
                    display: block;
                    padding: 5px;
                    color: #000;
                    text-decoration: none;
                    text-indent: 18px;
                    position: relative;
                    color: #999;
                    transition: all .25s ease;

                    &.selected,
                    &:hover {
                        color: @grey;
                        text-indent: 20px;

                        &:before {
                            content: "✓";
                            position: absolute;
                            top: 5px;
                            left: -10px
                        }
                    }
                }
            }
        }

        img {
            max-width: 500px;
            clear: both;
            display: block
        }
    }

    .img-preview-container {
        display: flex;
        flex-wrap: wrap;
        max-height: 200px;
        margin-bottom: 5px;

        .image-preview {
            margin: 5px;
            position: relative;
            margin-right: 5px;
            max-height: 100px;
            max-width: 100px;

            img {
                width: 100%;
                height: 100%;
            }

            .remove-image {
                position: absolute;
                top: 0;
                right: 0;
                cursor: pointer;
                background: white;
                height: 15px;
                width: 15px;
                border: 1px solid black;
                display: flex;
                justify-content: center;
                z-index: 100;
            }
        }
    }

    .imagePreview:empty {
        display: none !important;
    }

    .imgLabel {
        font-size: 24px;
        cursor: pointer;
        color: #777;
        transition: all .25s ease;

        &:hover {
            color: #333
        }
    }

    .replyHolder {
        width: 100%;
        position: relative;

        .uploadimage {
            position: absolute;
            top: -2px;
            right: 45px;
            z-index: 2;

        }

        .messageReply {
            width: 100%;
            height: 40px;
            display: block;
            padding-left: 30px;
            box-sizing: border-box;
            position: relative;
            z-index: 1;

            .reply {
                width: 100%;
                height: 40px;
                padding: 10px;
                box-sizing: border-box;
                border: @grey 1px solid;
                .borderRadius(10px);
                font-size: 12px;
                font-family: "Open Sans", sans-serif;
                background: @light
            }

            .addReply {
                width: 28px;
                height: 28px;
                display: block;
                position: absolute;
                top: 5px;
                right: 5px;
                .borderRadius(15px);
                background: @green;
                color: #fff;
                text-align: center;
                cursor: pointer;

                i,
                svg {
                    font-size: 15px
                }
            }
        }
    }
}

@keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(359deg);
    }
}

.fileThumbnail {
    width: 75px;
    height: 75px;
    display: inline-block;
    margin: 5px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative
}

.fileViewer {
    width: 800px;
    height: 90%;
    position: fixed;
    top: 70px;
    left: 50%;
    margin: 0 -400px;
    box-sizing: border-box;
    background: #fff;
    border: @accent 1px solid;
    padding: 10px;
    z-index: 20;

    .closeViewer {
        position: absolute;
        top: 10px;
        right: 10px;
        color: #888;
        text-decoration: none;
        cursor: hover;
        z-index: 2;
    }

    .imgHolder {
        width: 500px;
        height: 100%;
        display: block;
        background-color: #000;
        background-size: contain;
        background-repeat: no-repeat;
        overflow: hidden;

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

    .viewerOptions {
        width: 270px;
        height: 100%;
        display: block;
        position: absolute;
        top: 10px;
        right: 10px;

        h2 {
            margin: 0
        }

        p {
            padding: 5px 0
        }

        label {
            font-size: 11px;
            text-transform: uppercase;
            display: block;
            margin: 0;
            color: #888
        }

        .rotateFile {
            padding-left: 25px;
            position: relative;

            i,
            svg {
                position: absolute;
                top: 10px;
                left: 10px;
                transition: all .25s ease;
            }

            &.rotating {
                background: #eee;
                cursor: default;

                i,
                svg {
                    animation: rotation 2s infinite linear;
                }
            }
        }

        .thumbnails {
            width: 100%;
            height: 340px;
            overflow: auto;
        }
    }
}

.blackout {
    width: 100%;
    height: 100%;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 19;
    background: rgba(0, 0, 0, .75)
}

.caseTasks {
    padding: 0;
    border-top: #ccc 1px solid;

    &>h2 {
        font-size: 18px
    }

    .taskTitle {
        background: rgba(255, 255, 255, .75);
        padding: 10px 20px;
        display: block;
        width: 100%;
        box-sizing: border-box
    }

    .sectionToggle {
        padding: 0;
        /*5px*/
    }

    .taskHolder {
        border-left: @light 2px solid;
        padding-left: 5px;
        margin-bottom: 10px;

        h2 {
            font-size: 18px
        }

        &[data-status='Closed'] {
            display: none
        }
    }

    .caseTask {
        padding: 5px;
        background: rgba(255, 255, 255, .75);

        h3.subtitle {
            font-size: 16px;
            font-weight: 400
        }
    }

    .sectionOptions {
        padding-top: 0
    }

    .blurb {
        padding-bottom: 10px;
    }

    .addTask {
        display: block;
        text-align: center;
        font-size: 16px;
        text-decoration: none;
        padding: 12px 0 8px;
        transition: all .25s ease;

        i,
        svg {
            color: @accent;
            transition: all .25s ease
        }

        &:hover {
            background: @accent2
        }

        &.show svg,
        &.show i {
            transform: rotate(-45deg)
        }
    }
}

.taskfilters {
    padding: 5px;
    background: #f6f6f6;
    margin-bottom: 5px;
}

.addTaskSection {
    background: @accent3;
    padding: 10px;
    color: @accent;

    label {
        font-weight: bold;
        text-transform: uppercase;
        padding: 10px 0 0
    }

    textarea {
        height: 75px
    }

    .tagsInput {
        background: #fff
    }
}


.sidebar {

    .box {
        padding: 20px 10px;

        &.statusFeed {
            padding: 20px 0;

            h3 {
                margin-bottom: 0
            }

            .messageBoard {
                padding: 0 0 0 20px;
                overflow: auto;

                .messages {
                    padding-top: 20px;

                    .message {
                        min-width: 60%;
                        max-width: 85%;
                        overflow-wrap: break-word;
                        word-wrap: break-word;

                        &.view-admin {
                            display: none
                        }

                        img {
                            max-width: 90%
                        }

                    }
                }
            }
        }

        &:first-child {
            margin-top: 0
        }

        .filterOptions {
            padding: 0 30px;
            font-size: 11px;

            &.show {
                padding: 5px 30px
            }
        }
    }

    h3 {
        text-transform: uppercase;
        font-size: 12px;
        font-weight: bold;
        text-align: center;
        border-bottom: @accent 1px solid;
        width: 80%;
        margin: 0 auto 15px;
        padding: 0 0 4px
    }

    .tag {
        color: @grey;
        font-weight: 400;
        font-size: 12px;
        text-decoration: none;
        width: 50%;
        float: left;
        text-align: center;

        i,
        svg {
            color: @accent;
            display: inline-block;
            width: 8px;
            height: 8px;
            padding: 4px;
            text-align: center;
            border: @accent 2px solid;
            .borderRadius(12px);
            position: relative;
            top: 4px
        }
    }

    .messageBoard {
        border: none;
        max-height: 100%;

        .message {
            font-size: 11px;
            padding: 5px 10px;
            margin: 0 0 0 15px;
            min-width: 80%;
            max-width: 85%;

            >svg,
            >i {
                left: -25px
            }
        }

        .messageSide {
            padding-bottom: 7px;

            &.view-admin {
                display: none
            }
        }

        .messageReply {
            display: none
        }

        .timestamp {
            top: 100%;
            padding-top: 1px;
            left: 10px;
            width: auto;
            font-size: 10px;
            color: #a5b1b6;
            max-width: 70%;
            margin-left: 15px;

            a {
                color: #a5b1b6;
            }
        }
    }
}






/*

  Case Routing

*/


#map {
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    padding-top: @headerHeight;
    box-sizing: border-box;
    display: block;
    position: absolute !important;
    top: 40px;
    left: 0;
    z-index: 1;

    .window {
        width: 500px;
        min-height: 250px
    }

    .taskHolder {
        h1 {
            font-size: 16px;

            .faded {
                font-weight: 400
            }
        }

        h2:first-child {
            min-width: 200px;
            min-height: 30px
        }

        h2 {
            font-size: 16px;

            a {
                color: #000;
                cursor: default;

                i,
                svg {
                    display: none
                }
            }
        }

        .blurb {
            padding-left: 0;
            min-height: auto;
            padding: 10px 0;

            .profileIMG {
                display: none
            }
        }

        .section,
        .messageBoard {
            padding: 0;
            min-width: 500px
        }

        .tag {
            font-size: .7em
        }

        footer {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 10px
        }
    }
}

.theTask {
    li {
        list-style-type: none;

        select[name="taskStatus"] {
            position: relative;
            right: 20px;
        }

        .smallDetails {
            font-size: .9em;
            display: block;
            padding: 5px 0 10px;
        }
    }

    .blurb {
        padding-left: 0
    }
}

#smallmap {
    width: 100%;
    height: 300px;
    display: block;
}

.floatbox {
    width: 310px;
    height: 100%;
    position: absolute;
    top: 70px;
    left: 20px;
    z-index: 2;
    padding: 0;
    .boxShadow(1px 0 4px rgba(0, 0, 0, .25));
    overflow-y: auto;
    box-sizing: border-box;

    .floatboxHeader {
        height: auto;
        padding: 10px 20px 10px 10px;
        background: #fff;
        z-index: 3;
        box-sizing: border-box;
    }

    &.box {
        margin: 0
    }

    &.singletask {
        width: 600px;
        padding: 20px;
        left: inherit;
        right: 20px;
        display: none;

        &.show {
            display: block
        }

        &>h1 {
            display: none
        }

        .taskHolder h2 {
            padding: 0;

            .sectionToggle {
                color: #000;
                cursor: default;
                margin-left: 5px;

                svg {
                    display: none
                }
            }

            .right {
                position: relative;
                right: 20px;
            }
        }

        .profileIMG {
            display: none
        }

        .etitable {
            padding: 0
        }

        .closeTask {
            position: absolute;
            top: 20px;
            right: 20px;
            color: #333
        }

        h1 {
            padding: 0 !important
        }
    }

    h1 {
        text-transform: uppercase;
        padding: 0 10px
    }

    h2 {
        text-transform: uppercase;
        padding: 0 10px 0 5px;
        color: @accent;
        font-size: 16px;
        margin-top: 0
    }

    .dateControl {
        padding: 0 10px 10px;
        text-align: center;

        .date {
            width: 20px;
            height: 20px;
            display: inline-block;
            text-align: center;
            line-height: 20px;
            position: relative;
            top: 5px
        }
    }

    .toggleAllTasks {
        font-size: 10px;
        text-transform: uppercase;
        position: absolute;
        top: 13px;
        right: 20px;
        text-decoration: none;

        &:before {
            content: "SHOW TICKETS"
        }

        svg {
            position: absolute;
            top: 2px;
            left: 100%;
            transform: rotate(-90deg);
            transition: all .15s ease
        }

        &.open {
            &:before {
                content: "HIDE TICKETS"
            }

            svg {
                left: -7px;
                top: 3px;
                transform: rotate(90deg)
            }
        }
    }

    .tech {
        border-top: @grey 1px solid;

        h3 {
            background: #ddd;
            color: #000;
            padding: 10px;

            .title {
                color: #000;
                text-decoration: none;
                font-weight: bold;
                font-size: .8em;
                line-height: 22px;

                i,
                svg {
                    margin-right: 10px;
                    transition: all .25s ease
                }
            }

            .right {
                display: none
            }

            .taskCount {
                display: inline-block;
                background: #fff;
                padding: 0 6px;
                margin-left: 5px;
                font-size: 10px;
                position: relative;
                top: -2px;
                border-radius: 12px;
                font-weight: 500;
                color: #888;
                height: 18px;
                line-height: 18px;
                opacity: 1;
                transition: all .25s ease;
            }
        }

        .tasklist {
            display: none
        }

        &.show {
            h3 {
                background: #fff;

                .title {

                    i,
                    svg {
                        transform: rotate(90deg)
                    }
                }

                .right {
                    display: block;
                    margin-top: -5px;

                    a {
                        width: 30px;
                        height: 30px;
                        display: inline-block;
                        font-size: 18px;
                        line-height: 10px;
                        text-decoration: none;
                        text-align: center;
                        color: #888;
                        transition: all .25s ease;

                        span {
                            font-size: 8px
                        }

                        &:hover {
                            color: @accent;
                        }
                    }
                }

                .taskCount {
                    opacity: 0
                }
            }

            .tasklist {
                display: block
            }
        }

        &:last-child {
            border-bottom: @grey 1px solid
        }
    }

    .tasklist {
        display: block;
        list-style-type: none;
        padding: 0 5px 5px;
        font-size: 11px;

        li {
            background: @light;
            margin: 2px 0;
            padding: 5px;
            position: relative;
            overflow: hidden;
            height: 40px;

            &.selected {
                background: @green
            }

            &.linked {
                background: @highlight
            }

            strong {
                display: block;

                .right {
                    position: absolute;
                    top: 4px;
                    right: 4px;
                    font-size: 11px
                }
            }

            .assigned {
                width: 20px;
                height: 30px;
                display: block;
                font-size: 24px;
                text-align: center;
                line-height: 30px;
                position: absolute;
                top: 50%;
                right: 10px;
                margin: -15px 0;
                overflow: visible;

                span {
                    display: none
                }

                &:hover {
                    span {
                        display: block;
                        width: 100px;
                        height: auto;
                        padding: 2px;
                        background: #fff;
                        position: absolute;
                        bottom: 35px;
                        right: -5px;
                        font-size: 11px;

                        &:after {
                            content: "";
                            border-top: #fff 6px solid;
                            border-left: transparent 6px solid;
                            border-right: transparent 6px solid;
                            position: absolute;
                            bottom: -6px;
                            right: 7px;
                            display: block
                        }
                    }
                }
            }

            p {
                width: 90%;
                float: left
            }

            .showTask {
                display: block;
                width: 100%;
                height: 50px;
                position: absolute;
                top: 0;
                left: 0;
                padding: 4px;
                box-sizing: border-box;
                transition: all .25s ease;

                .prettyID {
                    display: inline-block;
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    background: #fff;
                    padding: 2px 4px;
                    font-size: 10px;

                    &:before {
                        content: "#";
                    }
                }
            }

            .deleteTask {
                display: block;
                width: 0;
                overflow: hidden;
                height: 50px;
                line-height: 50px;
                z-index: 2;
                text-align: center;
                background: @red;
                color: #fff;
                position: absolute;
                top: 0;
                right: 0;
                transition: all .25s ease;

                &:hover {
                    background: lighten(@red, 10%)
                }
            }

            &:hover {
                .deleteTask {
                    width: 9%
                }
            }
        }

        &.sortable {
            li {
                cursor: pointer;

                &.selected {
                    background: @highlight
                }
            }
        }
    }

    &.technicians {
        left: 20px;
        z-index: 5;
        display: flex;
        flex-direction: column;

        .techHolder {
            position: relative;
            overflow-y: scroll;
            flex-grow: 1;
        }

        &.drag {
            overflow: visible !important;
        }

        .tasklist li {
            padding-right: 5px;
            border-left: @accent 3px solid;

            &.techStatusUnresolved {
                border-left-color: @red
            }

            &.techStatusResolved {
                border-left-color: @green
            }

            .assigned {
                display: none
            }
        }
    }

    &.alltasks {
        left: 20px;
        padding-left: 0;
        z-index: 2;
        transition: all .25s ease;
        .boxShadow(none);
        overflow: auto !important;

        &.drag {
            overflow: visible !important;
        }

        &.show {
            left: 330px;
            .boxShadow(1px 0 4px rgba(0, 0, 0, .25))
        }

        .tasklist {
            padding-top: 50px;

            li {
                border-left: @highlight 3px solid;

                &.assigned,
                &.resolved {
                    border-left-color: @green
                }

                &:hover {
                    opacity: 1;

                    .showTask {
                        width: 100%
                    }

                    .deleteTask {
                        display: none
                    }
                }
            }
        }

        &.hideAssigned li.assigned {
            display: none
        }
    }
}

/*

  Terminal View

*/

.terminalStart {
    width: 100%;
    height: 100%;
    display: block;
    background: @light;
    position: fixed;
    top: 0;
    left: 0;
    text-align: center;
    z-index: 2
}

#terminalview {
    margin-top: 50px;

    .terminalDetails {
        font-size: 16px;
        font-weight: 100;

        strong {
            display: block;
            font-size: 14px;
            padding-top: 10px
        }

        &.left strong:first-child {
            padding-top: 0
        }
    }

    .performanceHistory {
        font-size: 16px;
        font-weight: 100;

        strong {
            font-size: 14px;
            padding-top: 10px
        }

        &.left strong:first-child {
            padding-top: 0
        }
    }

}

.forecastDateChange {
    display: inline-block;
    margin-left: 5px;
    background: @accent;
    color: #fff;
    font-size: 14px;
    .borderRadius();
    text-align: center;
    padding: 0 8px 0 6px;
    line-height: 14px;
    transition: all .25s ease;

    &[data-dir='next'] {
        padding: 0 6px 0 8px
    }

    &:hover {
        background: lighten(@accent, 10%)
    }

    &.faded {
        .opacity(.3, 3);
        cursor: default;
        background: @accent !important
    }
}




/*

  Forecast Reporting

*/

#forecastreporting {
    padding-top: 30px;

    .box {
        section {
            display: none;

            &.show {
                display: block
            }
        }
    }
}

.tabs {
    list-style-type: none;
    overflow: auto;
    position: relative;
    top: 1px;
    z-index: 2;

    li {
        display: inline;
        padding: 0;
        margin: 0;

        a {
            padding: 10px 15px;
            background: #e0e0e0;
            color: #000;
            text-decoration: none;
            transition: all .25s ease;
            float: left;
            border: @accent2 1px solid;
            border-bottom-color: #fff;
            border-left-width: 0;
        }

        &.selected {
            a {
                background: #fff;
                .boxShadow(0 -2px 2px rgba(0, 0, 0, .2))
            }
        }

        &:first-child {
            a {
                border-left-width: 1px;
            }
        }
    }
}

.group {
    border: @accent 1px solid;

    .row {
        clear: both;
        zoom: 1;
        background: #fff;

        i,
        svg {
            transition: all .25s ease;
        }

        &.click {
            transition: all .25s ease;

            &:hover .col {
                cursor: pointer;
                background: @highlight
            }
        }

        &.highlight .col {
            background: @highlight
        }

        &.parent .col {
            font-weight: bold
        }

        &:before,
        &:after {
            content: "";
            display: table
        }

        &:after {
            clear: both
        }

        &:nth-child(odd) {
            background: @light
        }

        .col {
            text-align: center;
            padding: 5px 0;
            font-size: 11px;

            &.span_1_of_8 {
                position: relative;

                .expand {
                    position: absolute;
                    top: 5px;
                    left: 10px;
                }
            }

            &.options {
                padding: 7px 0;
            }
        }

        .details {
            display: none;
            font-size: 10px;
            margin: 10px 0;
            clear: both;
            overflow: auto;

            >.third {
                padding: 10px;
                box-sizing: border-box;
                position: relative;

                .gotocase {
                    position: absolute;
                    top: 10px;
                    right: 10px;

                    i,
                    svg {
                        transform: rotate(0deg) !important
                    }
                }

                &.middle {
                    height: 150px;

                    &:before,
                    &:after {
                        content: "";
                        width: 1px;
                        height: 100px;
                        display: block;
                        background: @accent;
                        position: absolute;
                        top: 25px;
                        .boxShadow(0 0 2px rgba(0, 0, 0, .25))
                    }

                    &:before {
                        left: 0
                    }

                    &:after {
                        right: 0
                    }
                }

                strong {
                    color: @accent
                }

                p {
                    padding-top: 10px;
                }

                .third input {
                    width: 80%
                }
            }
        }

        &.show {

            i,
            svg {
                transform: rotate(180deg);
            }

            .details {
                display: block
            }
        }

        &.confirm .col {
            background: #B8FCB8 !important
        }
    }

    &.pad .row .col {
        padding: 10px 0
    }

    &.text-left .row .col {
        text-align: left;
        text-indent: 5px;

        &.text-center {
            text-align: center
        }
    }

    .requestApproval.confirm .row .col {
        background: #B8FCB8 !important
    }

    header.row {
        background: @accent !important;
        color: #fff;
        font-size: 12px;
    }
}

.reportsGroup {
    height: 125px;
    position: relative;

    header {
        position: relative;
        z-index: 2
    }

    .grid {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 125px;
        display: block;
        padding-top: 22px;
        z-index: 1;
        overflow: auto;
        box-sizing: border-box
    }
}

.reportInfo {
    width: 100%;
    height: 125px;
    background: #fff;
    border: @accent 1px solid;
    box-sizing: border-box;
    padding: 20px;
    position: relative;

    .download {
        position: absolute;
        top: 10px;
        right: 10px;
        color: @grey;
        text-decoration: none;
        font-size: .8em
    }

    .button {
        position: absolute;
        bottom: 10px;
        right: 10px;
    }
}



.privacyPolicy {
    width: 90%;
    max-width: 900px;
    margin: 0 auto !important;
    position: relative;
    top: 0;
    left: 0;

    p {
        padding: 10px 0 0;
    }
}




/*

  Screen Sizes

*/


/* ----------- Smaller Screens ----------- */
@media screen and (max-device-width: 900px) {

    header#main {
        position: relative;

        .logo {
            font-size: 14px;
        }

        form.search {
            display: none;
        }

        .createCaseHolder {
            display: none;
        }

        .ddModalHolder {
            float: right;
        }
    }

    .loader {
        padding-top: 10px;

        .container,
        .wrap {
            width: 98%;
            margin: 0 auto;
            box-sizing: border-box;

            .feed {
                width: 100%;
                float: none;
            }

            .sidebar {
                display: none;
            }
        }
    }

    .subLinks {
        a {
            padding: 0 5px !important;
        }
    }

    select {
        padding: 2px;
    }

    .fileViewer {
        width: 98%;
        left: 1%;
        margin: 0;

        .imgHolder {
            width: 100%;
            height: 50%;
        }

        .viewerOptions {
            width: 100%;
            height: 50%;
            position: relative;
            overflow: auto;
            padding: 0 10px;
        }
    }

    .loader {
        .container {
            &.single {
                max-width: 98%;
                margin: 0 auto;

                .messageBoard {
                    .message {
                        .timestamp {
                            max-width: 100%;
                        }
                    }
                }
            }
        }
    }

    .privacyPolicy {
        left: 5%;
        margin: 0;
        max-height: 98%;
        overflow: auto;
    }

}




/*
 
 Date Range Picker
 
*/

.date-picker {
    width: 170px;
    height: 25px;
    padding: 0;
    border: 0;
    line-height: 25px;
    padding-left: 10px;
    font-size: 12px;
    font-family: Arial, sans-serif;
    font-weight: 700;
    cursor: pointer;
    color: #303030;
    position: relative;
    z-index: 2
}

.date-picker-wrapper {
    position: absolute;
    z-index: 1;
    border: 1px solid #bfbfbf;
    background-color: #efefef;
    padding: 5px 12px;
    font-size: 12px;
    line-height: 20px;
    color: #aaa;
    font-family: Arial, sans-serif;
    -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);
    box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);
    -webkit-box-sizing: initial;
    box-sizing: initial
}

.dp-clearfix {
    clear: both;
    height: 0;
    font-size: 0
}

.date-picker-wrapper.inline-wrapper {
    position: relative;
    -webkit-box-shadow: none;
    box-shadow: none;
    display: inline-block
}

.date-picker-wrapper.single-date {
    width: auto
}

.date-picker-wrapper.no-shortcuts {
    padding-bottom: 12px
}

.date-picker-wrapper.no-topbar {
    padding-top: 12px
}

.date-picker-wrapper .footer {
    font-size: 11px;
    padding-top: 3px
}

.date-picker-wrapper b {
    color: #666;
    font-weight: 700
}

.date-picker-wrapper a {
    color: #6bb4d6;
    text-decoration: underline
}

.date-picker-wrapper .month-name {
    text-transform: uppercase
}

.date-picker-wrapper .select-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle
}

.date-picker-wrapper .select-wrapper:hover {
    text-decoration: underline
}

.date-picker-wrapper .month-element {
    display: inline-block;
    vertical-align: middle
}

.date-picker-wrapper .select-wrapper select {
    position: absolute;
    margin: 0;
    padding: 0;
    left: 0;
    top: -1px;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: 0 0;
    border: 0;
    outline: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
    filter: alpha(opacity=1);
    opacity: .01
}

.date-picker-wrapper .month-wrapper {
    border: 1px solid #bfbfbf;
    border-radius: 3px;
    background-color: #fff;
    padding: 5px;
    cursor: default;
    position: relative;
    _overflow: hidden
}

.date-picker-wrapper .month-wrapper table {
    width: 190px;
    float: left
}

.date-picker-wrapper .month-wrapper table.month2 {
    width: 190px;
    float: left
}

.date-picker-wrapper .month-wrapper table td,
.date-picker-wrapper .month-wrapper table th {
    vertical-align: middle;
    text-align: center;
    line-height: 14px;
    margin: 0;
    padding: 0
}

.date-picker-wrapper .month-wrapper table .day {
    padding: 5px 0;
    line-height: 1;
    font-size: 12px;
    margin-bottom: 1px;
    color: #ccc;
    cursor: default
}

.date-picker-wrapper .month-wrapper table div.day.lastMonth,
.date-picker-wrapper .month-wrapper table div.day.nextMonth {
    color: #999;
    cursor: default
}

.date-picker-wrapper .month-wrapper table .day.checked {
    background-color: #9cdbf7
}

.date-picker-wrapper .month-wrapper table .week-name {
    height: 20px;
    line-height: 20px;
    font-weight: 100;
    text-transform: uppercase
}

.date-picker-wrapper .month-wrapper table .day.has-tooltip {
    cursor: help !important
}

.date-picker-wrapper .month-wrapper table .day.has-tooltip .tooltip {
    white-space: nowrap
}

.date-picker-wrapper .time label {
    white-space: nowrap
}

.date-picker-wrapper .month-wrapper table .day.toMonth.valid {
    color: #333;
    cursor: pointer
}

.date-picker-wrapper .month-wrapper table .day.toMonth.hovering {
    background-color: #cdecfa
}

.date-picker-wrapper .month-wrapper table .day.lastMonth,
.date-picker-wrapper .month-wrapper table .day.nextMonth {
    display: none
}

.date-picker-wrapper .month-wrapper table .day.real-today {
    background-color: #ffe684
}

.date-picker-wrapper .month-wrapper table .day.real-today.checked,
.date-picker-wrapper .month-wrapper table .day.real-today.hovering {
    background-color: #70ccd5
}

.date-picker-wrapper table .caption {
    height: 40px
}

.date-picker-wrapper table .caption>th:first-of-type,
.date-picker-wrapper table .caption>th:last-of-type {
    width: 27px
}

.date-picker-wrapper table .caption .next,
.date-picker-wrapper table .caption .prev {
    padding: 0 5px;
    cursor: pointer
}

.date-picker-wrapper table .caption .next:hover,
.date-picker-wrapper table .caption .prev:hover {
    background-color: #ccc;
    color: #fff
}

.date-picker-wrapper .gap {
    position: relative;
    z-index: 1;
    width: 15px;
    height: 100%;
    background-color: red;
    font-size: 0;
    line-height: 0;
    float: left;
    top: -5px;
    margin: 0 10px -10px;
    visibility: hidden;
    height: 0
}

.date-picker-wrapper .gap .gap-lines {
    height: 100%;
    overflow: hidden
}

.date-picker-wrapper .gap .gap-line {
    height: 15px;
    width: 15px;
    position: relative
}

.date-picker-wrapper .gap .gap-line .gap-1 {
    z-index: 1;
    height: 0;
    border-left: 8px solid #fff;
    border-top: 8px solid #eee;
    border-bottom: 8px solid #eee
}

.date-picker-wrapper .gap .gap-line .gap-2 {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    height: 0;
    border-left: 8px solid transparent;
    border-top: 8px solid #fff
}

.date-picker-wrapper .gap .gap-line .gap-3 {
    position: absolute;
    right: 0;
    top: 8px;
    z-index: 2;
    height: 0;
    border-left: 8px solid transparent;
    border-bottom: 8px solid #fff
}

.date-picker-wrapper .gap .gap-top-mask {
    width: 6px;
    height: 1px;
    position: absolute;
    top: -1px;
    left: 1px;
    background-color: #eee;
    z-index: 3
}

.date-picker-wrapper .gap .gap-bottom-mask {
    width: 6px;
    height: 1px;
    position: absolute;
    bottom: -1px;
    left: 7px;
    background-color: #eee;
    z-index: 3
}

.date-picker-wrapper .selected-days {
    display: none
}

.date-picker-wrapper .drp_top-bar {
    line-height: 1.4;
    position: relative;
    padding: 10px 40px 10px 0
}

.date-picker-wrapper .drp_top-bar .error-top,
.date-picker-wrapper .drp_top-bar .normal-top {
    display: none
}

.date-picker-wrapper .drp_top-bar .default-top {
    display: block
}

.date-picker-wrapper .drp_top-bar.error .default-top {
    display: none
}

.date-picker-wrapper .drp_top-bar.error .error-top {
    display: block;
    color: red
}

.date-picker-wrapper .drp_top-bar.normal .default-top {
    display: none
}

.date-picker-wrapper .drp_top-bar.normal .normal-top {
    display: block
}

.date-picker-wrapper .drp_top-bar.normal .normal-top .selection-top {
    color: #333
}

.date-picker-wrapper .drp_top-bar .apply-btn {
    position: absolute;
    right: 0;
    top: 6px;
    padding: 3px 5px;
    margin: 0;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    color: #d9eef7;
    border: solid 1px #0076a3;
    background: #0095cd;
    background: -moz-linear-gradient(top, #00adee, #0078a5);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
    color: #fff;
    line-height: initial
}

.date-picker-wrapper .drp_top-bar .apply-btn.disabled {
    cursor: pointer;
    color: #606060;
    border: solid 1px #b7b7b7;
    background: #fff;
    background: -moz-linear-gradient(top, #fff, #ededed);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed')
}

.date-picker-wrapper .time {
    position: relative
}

.date-picker-wrapper.single-month .time {
    display: block
}

.date-picker-wrapper .time input[type=range] {
    vertical-align: middle;
    width: 129px;
    padding: 0;
    margin: 0;
    height: 20px
}

.date-picker-wrapper .time1 {
    width: 180px;
    padding: 0 5px;
    text-align: center
}

.time2 {
    width: 180px;
    padding: 0 5px;
    text-align: center
}

.date-picker-wrapper .time1 {
    float: left
}

.date-picker-wrapper .time2 {
    float: right
}

.date-picker-wrapper .hour {
    text-align: right
}

.minute {
    text-align: right
}

.date-picker-wrapper .hide {
    display: none
}

.date-picker-wrapper .first-date-selected,
.date-picker-wrapper .last-date-selected {
    background-color: #49e !important;
    color: #fff !important
}

.date-picker-wrapper .date-range-length-tip {
    position: absolute;
    margin-top: -4px;
    margin-left: -8px;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .3);
    box-shadow: 0 0 3px rgba(0, 0, 0, .3);
    display: none;
    background-color: #ff0;
    padding: 0 6px;
    border-radius: 2px;
    font-size: 12px;
    line-height: 16px;
    -webkit-filter: drop-shadow(0 0 3px rgba(0, 0, 0, .3));
    -moz-filter: drop-shadow(0 0 3px rgba(0, 0, 0, .3));
    -ms-filter: drop-shadow(0 0 3px rgba(0, 0, 0, .3));
    -o-filter: drop-shadow(0 0 3px rgba(0, 0, 0, .3));
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, .3))
}

.date-picker-wrapper .date-range-length-tip:after {
    content: '';
    position: absolute;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #ff0;
    left: 50%;
    margin-left: -4px;
    bottom: -4px
}

.date-picker-wrapper.two-months.no-gap .month1 .next,
.date-picker-wrapper.two-months.no-gap .month2 .prev {
    display: none
}

.date-picker-wrapper .week-number {
    padding: 5px 0;
    line-height: 1;
    font-size: 12px;
    margin-bottom: 1px;
    color: #999;
    cursor: pointer
}

.date-picker-wrapper .week-number.week-number-selected {
    color: #49e;
    font-weight: 700
}