@import "Shared";

// Document Layout
body {
    font-size: @FontSizeDefault;
    font-family: @FontFamilyBody;
    margin: 0;
    padding: 0;
    color: @FontBodyColour;

    &.layout {
        background: url(data:image/png;base64,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) /*Images/BackgroundDocument.png*/ left top repeat-x @BackgroundColour;
        background: linear-gradient(to bottom, @BackgroundColourGradient 0px, @BackgroundColour 370px) left top repeat-x @BackgroundColour;
        min-height: 370px;
    }
}

// Primary Layout Elements
.page {
    max-width: 1232px;
    min-width: 768px;
    margin-left: auto;
    margin-right: auto;
}

header, #header {
    position: relative;
    background-color: @HeaderBackgroundColour;
    margin: 0;
    padding: 0;
    height: 34px;

    #heading {
        float: left;
        height: 34px;

        i {
            display: block;
            height: 34px;
            width: 34px;
            background-image: url(data:image/png;base64,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) /*Images/Heading.png*/;
        }
    }

    nav {
        float: left;
        height: 34px;
        padding: 0;
        margin: 0;

        ul#menu {
            height: 26px;
            padding: 0;
            margin: 8px 0 0 4px;
            list-style: none;
            z-index: 100000;
            font-size: 0;
            line-height: 0;

            & > li {
                display: inline-block;
                z-index: 100000;
                font-size: @FontSizeDefault * 1.1;
                line-height: @FontSizeDefault * 1.6;

                &.moveRight {
                    margin-left: 20px;
                }

                & > a {
                    display: inline-block;
                    padding: 2px 10px 4px 10px;
                    height: 20px;
                    color: @white;
                    font-weight: 400;
                    text-transform: uppercase;
                    text-decoration: none;

                    &:active {
                        text-decoration: none;
                    }
                }

                &.active > a {
                    background-color: @MenuActiveBackgroundColour;
                }

                &:hover > a {
                    background-color: @MenuHoverBackgroundColour;
                    text-decoration: none;
                }

                & > ul {
                    z-index: 100000;
                    display: none;
                    list-style: none;
                    position: absolute;
                    margin: 0;
                    border-left: 1px solid @BackgroundColour;
                    border-right: 1px solid @BackgroundColour;
                    background-color: hsla(hue(@BackgroundColour), saturation(@BackgroundColour), 95%, 1);
                    padding: 0;
                    min-width: 180px;
                    box-shadow: 2px 2px 5px fade(@BackgroundColour, 50%);

                    li {
                        position: relative;
                        background-position: top;
                        background-repeat: repeat-x;
                        border-top: 1px solid hsla(hue(@BackgroundColour), saturation(@BackgroundColour), 90%, 1);

                        &:first-child {
                            border-top: 1px solid @BackgroundColour;
                        }

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

                        &:hover {
                            border-top: 1px solid hsla(hue(@BackgroundColour), saturation(@BackgroundColour), 85%, 1);
                            background-color: hsla(hue(@BackgroundColour), saturation(@BackgroundColour), 90%, 1);
                        }

                        a {
                            display: block;
                            color: @black;
                            padding: 4px 8px;
                            text-decoration: none;

                            &:hover {
                                color: @HyperLinkColour;
                                text-decoration: none;
                            }

                            &:active {
                                text-decoration: none;
                            }
                        }

                        i.fa-caret-right {
                            cursor: pointer;
                            color: lighten(@HeaderBackgroundColour, 20%);
                            font-size: 16px;
                            position: absolute;
                            display: block;
                            right: 12px;
                            top: 7px;
                        }

                        &:hover i.fa-caret-right {
                            color: @HeaderBackgroundColour;
                        }
                    }

                    ul {
                        display: none;
                        list-style: none;
                        position: absolute;
                        top: -1px;
                        left: 180px;
                        background-color: hsla(hue(@BackgroundColour), saturation(@BackgroundColour), 95%, 1);
                        border-left: 1px solid @BackgroundColour;
                        border-right: 1px solid @BackgroundColour;
                        padding: 0;
                        min-width: 180px;
                        box-shadow: 2px 2px 5px fade(@BackgroundColour, 50%);
                    }
                }
            }
        }
    }

    #headerMenu {
        float: right;
        height: 24px;
        padding: 5px 8px;
        font-size: .9em;
        line-height: 24px;
        text-align: right;
        color: @white;

        a {
            color: @white;
            text-decoration: none;
        }

            a:hover {
                color: @MenuHoverColour;
                text-decoration: none;
            }
    }

    #SearchQuery {
        font-size: 0.9em;
        margin-left: 6px;
        width: 130px;
        background-color: #eee;
        -moz-transition-property: width;
        -o-transition-property: width;
        -webkit-transition-property: width;
        transition-property: width;
        -moz-transition-duration: .1s;
        -o-transition-duration: .1s;
        -webkit-transition-duration: .1s;
        transition-duration: .1s;

        &:hover, &:focus {
            background-color: @white;
            width: 190px;
        }
    }

    .watermark {
        background-color: #888;
    }
}

#QuickSearchMenu {
    max-height: 400px;
    font-size: .9em;
    background: none;
    background-color: @BackgroundColourLight;

    li {
        &:not(:last-child) {
            border-bottom: 1px solid @TableDataDarkBorderColour;
        }

        & > a {
            padding: 2px;

            & > i {
                margin-right: 2px;
            }

            & > div {
                padding-left: 1.2857142857142858em;
                margin-left: 2px;
            }
        }
    }
}

#layout_PageHeading {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAA8CAYAAABfESsNAAAAOUlEQVRIx+2SuREAIAzDFELL/uOSFVLx3Mm1C8nnABaNDJq5WJzAVkZGZXyPMg7+jUwCIeNZmdcZC2pxCZOpoRNgAAAAAElFTkSuQmCC) /*Images/BackgroundPage.png*/ left top repeat-x @white;
    background: linear-gradient(to bottom, @BackgroundColourGradient 0px, @white 50px) @white;
    height: 50px;
    padding: 6px 20px 4px 20px;
    font-size: 2em;
    color: @black;
    line-height: 50px;
    position: relative;
    border-left: 1px solid @BackgroundColour;
    border-right: 1px solid @BackgroundColour;

    a {
        text-decoration: none;
    }
}

#layout_Page {
    background-color: @white;
    overflow: auto;
    border-left: 1px solid @BackgroundColour;
    border-right: 1px solid @BackgroundColour;
    border-bottom: 1px solid @BackgroundColour;
    // min-height: 400px;
    padding: 0 30px 15px 30px;
    .border-radius4(0, 0, 4px, 4px);
}

#layout_Error {
    min-height: 200px;

    table {
        background-color: @white;
    }

    h1, h2, h3, h4, h5 {
        color: @white;
        white-space: pre-wrap;
    }

        h2.error {
            margin-bottom: 10px;
        }

    .stacktrace {
        white-space: pre;
        overflow: auto;
    }

    & > div {
        margin: 0 auto;
        width: 650px;
    }
}

#layout_uiExtensions {
    display: none;
}

footer, #footer {
    color: #777;
    padding: 10px 0;
    text-align: center;
    margin: 0;
    font-size: 0.9em;

    a {
        &:link, &:visited, &:active {
            color: #777;
        }

        &:link, &:active {
            text-decoration: underline;
        }

        &:hover {
            color: @HyperLinkHoverColour;
            text-decoration: none;
        }
    }
}

// Element Resets
p {
    margin: 0 0 2px 0;
    line-height: 1.6em;
}

ul {
    margin: 0;
    padding: 0 0 0 25px;
    list-style: square;
    line-height: 1.6em;
}

header, footer, nav, section {
    display: block;
}

form {
    display: inline;
}

img {
    border: none;
    padding: 0;
    margin: 0;
    vertical-align: bottom;
}

code {
    font-family: @FontFamilyMono;
}

hr {
    border: none;
    border-bottom: 1px dashed #aaa;
    margin-top: 15px;
}

strong {
    font-weight: @FontWeightBodyBold;
}

// Anchor Tags (Default)
a {
    &:link {
        color: @HyperLinkColour;
        text-decoration: none;
    }

    &:visited {
        color: @HyperLinkColour;
    }

    &:hover {
        color: @HyperLinkHoverColour;
        text-decoration: underline;
    }

    &:active {
        color: @HyperLinkColour;
    }

    &[disabled] {
        color: @ButtonBorderHoverColour;
        text-decoration: none;
        cursor: default;
    }
}
    // Anchor Tags (Button)
    a.button {
        display: inline-block;
        padding: 4px 10px;
        margin: 2px;
        border: 1px solid @ButtonBorderColour;
        background: @ButtonColour;
        color: @white;
        font-weight: 600;
        text-transform: uppercase;
        cursor: pointer;
        white-space: nowrap;
        text-decoration: none;

        &[disabled], &.disabled {
            background: @ButtonHoverColour;
            border: 1px solid @ButtonBorderHoverColour;
            cursor: default;
        }

        &.alert {
            border-color: @ButtonBorderAlertColour;
            background-color: @ButtonAlertColour;
        }

        &.small {
            padding: 2px 5px;
            font-size: .9em;
        }

        &:hover {
            border: 1px solid @ButtonBorderHoverColour;
            background: @ButtonHoverColour;
        }

        i {
            margin-right: 10px;
        }
    }

div.actionBar {
    margin: 0 -30px 0 -30px;
    padding: 10px;
    border-top: 1px solid @ActionBarBorder;
    text-align: right;
    background-color: @ActionBarBackgound;
    clear: both;

    &:not(:first-child) {
        margin-top: 10px;
    }

    &:last-child {
        margin-bottom: -15px;
        .border-radius4(0, 0, 6px, 6px);
    }
}

h1, h2, h3, h4, h5, h6 {
    color: @black;
    font-family: @FontFamilyHeading;
    font-weight: @FontWeightHeading;
    font-stretch: @FontStretchHeading;
    margin: 0;

    &:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    & > a:link {
        text-decoration: none;
    }
}

h1 {
    font-size: 24px;
}

h2 {
    font-size: 20px;
    padding: 8px 0 4px 0;
}

h3 {
    font-size: 18px;
}

h4 {
    font-size: 14px;
}

h5, h6 {
    font-size: 12px;
    font-family: @FontFamilyHeading;
    font-stretch: normal;
    font-weight: @FontWeightBodyBold;
}

table {
    border: none;
    border-collapse: collapse;
    width: 100%;

    td {
        padding: 5px;
        margin: 0;
        border: none;
        vertical-align: top;
    }

    th {
        padding: 5px;
        margin: 0;
        text-align: left;
        font-weight: @FontWeightBodyBold;
        vertical-align: top;
    }
}

    table.none {
        border: none !important;

        tr, td, th {
            padding: 0 !important;
            margin: 0 !important;
            background: none !important;
            border: none !important;
        }
    }

    table.genericData {
        .tableData;

        td.id {
            text-align: center;

            a {
                padding: 0 6px;
            }
        }
    }

.smallTable {
    th, td {
        font-size: .9em;
    }
}

/* Data Table Styles */
.dataTables_wrapper {
    position: relative;

    .dataTables_filter {
        position: absolute;
        height: 20px;
        margin-top: -20px;
        right: 0;
        font-size: .9em;
        -moz-opacity: 0.3;
        opacity: 0.3;

        input {
            font-size: .95em;
            padding: 0;
            height: 1.4em;
            width: 150px;
        }
    }

    .dataTables_length {
        position: absolute;
        height: 20px;
        margin-top: -20px;
        right: 200px;
        font-size: .9em;

        select {
            font-size: .95em;
            padding: 0;
            height: 1.4em;
        }

        -moz-opacity: 0.3;
        opacity: 0.3;
    }

    .dataTables_paginate {
        text-align: right;
        background-color: @TableDataBorderColour;
        padding: 2px 4px;
        font-size: .9em;

        a {
            cursor: pointer;
            padding: 2px;
            margin: 0 3px;
            color: @HyperLinkColour;
            background-repeat: no-repeat;
            -moz-opacity: 0.3;
            opacity: 0.3;
            text-transform: uppercase;
        }

        .first {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAYAAAA1WQxeAAAAKklEQVQI12NgQALGUe0SQPwfnY0iCcVwNjZJFAxT8J+QAvwmEHQDPl8AAAYqTAY6Jng6AAAAAElFTkSuQmCC) /*Images/Actions/dataTableFirst.png*/;
            background-position: left center;
            padding-left: 12px;

            &.paginate_button_disabled {
                background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAYAAAA1WQxeAAAAKklEQVQI12NgQAKxsbESQPwfnY0iCcVwNjZJFAxT8J+QAvwmEHQDPl8AAEm8TIFT3+fIAAAAAElFTkSuQmCC) /*Images/Actions/dataTableFirstDisabled.png*/;
            }
        }

        .previous {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAYAAAA1WQxeAAAAJUlEQVQI12NgwAGMo9olgPg/XkmsCpAlcSn4T0gBfhMIugFdEQCMVyg5CPiC8wAAAABJRU5ErkJggg==) /*Images/Actions/dataTablePrev.png*/;
            background-position: left center;
            padding-left: 12px;

            &.paginate_button_disabled {
                background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAYAAAA1WQxeAAAAJUlEQVQI12NgwAH6+vokgPg/XkmsCpAlcSn4T0gBfhMIugFdEQDzojUdMBAGjgAAAABJRU5ErkJggg==) /*Images/Actions/dataTablePrevDisabled.png*/;
            }
        }

        .next {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAYAAAA1WQxeAAAAJUlEQVQI12Mwjmr/D8QSDLgAVAFuRUgKsCtCU/CfIhPwugGnLwCZ1Cg5w6CPqwAAAABJRU5ErkJggg==) /*Images/Actions/dataTableNext.png*/;
            background-position: right center;
            padding-right: 12px;

            &.paginate_button_disabled {
                background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAYAAAA1WQxeAAAAJUlEQVQI12Po6+v7D8QSDLgAVAFuRUgKsCtCU/CfIhPwugGnLwDwPjUdLMfQ6AAAAABJRU5ErkJggg==) /*Images/Actions/dataTableNextDisabled.png*/;
            }
        }

        .last {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAYAAAA1WQxeAAAAK0lEQVQI12Mwjmr/D8QSDECAzIYDqCBYApmNTQE6liCk4D/JJuB1A05fAABJ/EwGJKVDGAAAAABJRU5ErkJggg==) /*Images/Actions/dataTableLast.png*/;
            background-position: right center;
            padding-right: 12px;

            &.paginate_button_disabled {
                background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAYAAAA1WQxeAAAAK0lEQVQI12OIjY39D8QSDECAzIYDqCBYApmNTQE6liCk4D/JJuB1A05fAACQykyB48rZCQAAAABJRU5ErkJggg==) /*Images/Actions/dataTableLastDisabled.png*/;
            }
        }

        .paginate_active {
            font-weight: @FontWeightBodyBold;
            color: @ButtonColour;
        }

        .paginate_button_disabled {
            color: #ccc;
            cursor: default;
        }

        .paginate_enabled_previous {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAYAAAA1WQxeAAAAJUlEQVQI12NgwAGMo9olgPg/XkmsCpAlcSn4T0gBfhMIugFdEQCMVyg5CPiC8wAAAABJRU5ErkJggg==) /*Images/Actions/dataTablePrev.png*/;
            background-position: left center;
            padding-left: 12px;
        }

        .paginate_disabled_previous {
            color: #ccc;
            cursor: default;
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAYAAAA1WQxeAAAAJUlEQVQI12NgwAH6+vokgPg/XkmsCpAlcSn4T0gBfhMIugFdEQDzojUdMBAGjgAAAABJRU5ErkJggg==) /*Images/Actions/dataTablePrevDisabled.png*/;
            background-position: left center;
            padding-left: 12px;
        }

        .paginate_enabled_next {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAYAAAA1WQxeAAAAJUlEQVQI12Mwjmr/D8QSDLgAVAFuRUgKsCtCU/CfIhPwugGnLwCZ1Cg5w6CPqwAAAABJRU5ErkJggg==) /*Images/Actions/dataTableNext.png*/;
            background-position: right center;
            padding-right: 12px;
        }

        .paginate_disabled_next {
            color: #ccc;
            cursor: default;
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAYAAAA1WQxeAAAAJUlEQVQI12Po6+v7D8QSDLgAVAFuRUgKsCtCU/CfIhPwugGnLwDwPjUdLMfQ6AAAAABJRU5ErkJggg==) /*Images/Actions/dataTableNextDisabled.png*/;
            background-position: right center;
            padding-right: 12px;
        }
    }

    &:hover {
        .dataTables_filter, .dataTables_length, .dataTables_paginate a {
            -moz-opacity: 1;
            opacity: 1;
        }
    }

    table > thead tr > th {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAD6CAYAAACoLMeFAAAAdElEQVRo3u3bOwqAMBAFwBwjh/CUluKRhfVTiil0UYjMwJLqLfmUYUuBtw3jUreKfc2E43aTi/C9Jo3wUR4WAAAAAAAAejBPc90q9jUTjkdNTuGjPj9/bgfpO0i/AgAAAAAAAPQnPZ6YHpBsNEnNefrt4+9Wmn6nW/cZ1MQAAAAASUVORK5CYII=) /*Images/Actions/dataTableSort.png*/;
        background-repeat: no-repeat;

        &.sorting {
            background-position: right center;
            cursor: pointer;
        }

        &.sorting_desc {
            background-position: right bottom;
            cursor: pointer;
        }

        &.sorting_asc {
            background-position: right top;
            cursor: pointer;
        }

        &.sorting_disabled {
            background-image: none;
        }
    }
}

table.userTable {
    div.flags {
        display: inline-block;
        float: right;

        & > i {
            cursor: default;

            & > .details {
                display: none;
            }
        }
    }
}

.jobStatus {
    color: @StatusUnknown;

    &.Closed {
        color: @StatusClosed;
    }

    &.Open {
        color: @StatusOpen;
    }

    &.AwaitingWarrantyRepair, &.AwaitingRepairs {
        color: @StatusAwaitingRepair;
    }

    &.AwaitingDeviceReturn, &.AwaitingUserAction, &.AwaitingAccountingPayment, &.AwaitingAccountingCharge {
        color: @StatusAwaitingUser;
    }

    &.AwaitingInsuranceProcessing {
        color: @StatusAwaitingProcessing;
    }
}

.deviceStatus {
    color: @StatusUnknown;

    &.Decommissioned {
        color: @StatusClosed;
    }

    &.Active {
        color: @StatusOpen;
    }

    &.NotEnrolled {
        color: @StatusAwaitingUser;
    }
}

table.jobTable {
    .tableData;
    table-layout: fixed;

    td {
        white-space: nowrap;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }

    &.hideStatusClosed {
        tr[data-status=Closed] {
            display: none;
        }
    }

    td.id, th.id {
        width: 50px;
        text-align: center;

        a {
            padding: 0 6px;
        }
    }

    tr {
        &.statusSlaWarning td {
            background-color: mix(lighten(@StatusSlaWarning, 32%), @white, 50%);

            &:not(:last-child) {
                border-right: 1px solid average(lighten(@StatusSlaWarning, 32%), @TableDataBorderColour);
            }
        }

        &.statusSlaExpired td {
            background-color: mix(lighten(@StatusSlaExpired, 38%), @white, 50%);

            &:not(:last-child) {
                border-right: 1px solid average(lighten(@StatusSlaExpired, 38%), @TableDataBorderColour);
            }
        }

        &:nth-child(odd) {
            &.statusSlaWarning td {
                background-color: mix(lighten(@StatusSlaWarning, 32%), @TableDataRowBackgroundColor, 50%) !important;
            }

            &.statusSlaExpired td {
                background-color: mix(lighten(@StatusSlaExpired, 38%), @TableDataRowBackgroundColor, 50%) !important;
            }
        }

        &:hover {
            &.statusSlaWarning td {
                background-color: darken(mix(lighten(@StatusSlaWarning, 32%), @TableDataRowBackgroundColor, 50%), 1%) !important;
            }

            &.statusSlaExpired td {
                background-color: darken(mix(lighten(@StatusSlaExpired, 38%), @TableDataRowBackgroundColor, 50%), 1%) !important;
            }
        }
    }

    div.queues {
        display: inline-block;
        float: right;
    }

    td.lastActive, th.lastActive {
        width: 130px;
    }

    td.dates, th.dates {
        width: 130px;
    }

    td.type, th.type {
        width: 50px;
    }

    td.device, th.device {
        width: 110px;
    }

    td.user, th.user {
        width: 240px;
    }

    td.technician, th.technician {
        width: 80px;
    }

    td.location, th.location {
        width: 200px;
    }
}

div.jobTable {
    & > a.dataTables_showStatusClosed {
        margin: 10px 5px;
    }

    & > h3, & > div.allClosed_container {
        margin: 50px 20px !important;

        a.button {
            margin-top: 10px;
        }
    }
}


table.deviceTable {
    tr.decommissioned {
        background-color: @SubtleColour;
    }
}

textarea {
    font-size: 12px;
    font-family: @FontFamilyBody;
    border: 1px solid #ccc;
    min-height: 75px;
    padding: 2px;
    color: #444;
    width: 200px;
}

input[type="text"], input[type="password"], input[type="file"], input[type="number"] {
    font-size: 12px;
    font-family: @FontFamilyBody;
    border: 1px solid #ccc;
    padding: 2px;
    color: #444;
    width: 200px;
}

    input[type="text"].small, input[type="password"].small, input[type="file"].small, input[type="number"].small {
        padding: 0 2px;
        width: 150px;
    }

    input[type="text"].discreet, input[type="password"].discreet, input[type="file"].discreet, input[type="number"].discreet {
        border: 1px solid @white;

        &:hover, &:focus {
            border: 1px solid #ccc;
        }
    }

input[type="checkbox"], input[type="radio"] {
    margin-right: 4px;
    vertical-align: sub;
}

select {
    font-family: @FontFamilyBody;
    font-size: 12px;
    border: 1px solid #ccc;
    padding: 2px;
    color: #444;
}

    select.small {
        padding: 0;
    }

input[type="submit"], button {
    font-family: @FontFamilyBody;
    padding: 5px;

    &.button {
        font-size: 12px;
        padding: 4px 10px 4px 10px;
        margin: 2px;
        border: 1px solid @ButtonBorderColour;
        background: @ButtonColour;
        color: @white;
        font-weight: 600;
        text-transform: uppercase;
        cursor: pointer;

        &.alert {
            border-color: @ButtonBorderAlertColour;
            background-color: @ButtonAlertColour;
        }

        &.small {
            padding: 2px 5px;
            font-size: .9em;
        }

        &[disabled] {
            background: @ButtonHoverColour;
            border: 1px solid @ButtonBorderHoverColour;
            cursor: default;
        }

        &:hover {
            border: 1px solid @ButtonBorderHoverColour;
            background: @ButtonHoverColour;
        }
    }
}

ul.none {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
        margin: 0;
    }
}

div.form {
    margin: 0 auto;

    & > p.actions {
        text-align: right;
    }

    & > table {
        border-top: 6px solid @FormBorderColour;
        border-left: 1px solid @FormBorderColour;
        border-right: 1px solid @FormBorderColour;
        border-bottom: 3px solid @FormBorderColour;
        background-color: @FormBackgroundEvenColour;

        & > tbody {
            & > tr {
                & > td, & > th {
                    background: none;
                    border: none;
                    margin: 0;
                    padding: 8px 5px;
                }

                & > th {
                    font-weight: normal;
                    text-align: right;
                }

                &:nth-child(odd) {
                    background-color: @FormBackgroundOddColour;
                    margin: 0;
                    padding: 0;
                }

                & > td.details {
                    padding: 0;
                }

                & > th.name {
                    width: 150px;
                    text-align: right;
                }
            }
        }

        table.sub {
            & > tbody {
                & > tr:not(:first-child) {
                    & > th, & > td {
                        border-top: 1px dashed #aaa;
                    }
                }

                & > tr {
                    & > th {
                        font-weight: normal;
                        text-align: right;
                    }

                        & > th.name {
                            text-align: right;
                        }
                }
            }
        }
    }
}

#pageMenu {
    td {
        border-right: 1px dashed #aaa;
        width: 33%;
        padding: 10px;

        .pageMenuArea {
            & > .fa {
                font-size: 1.3em;
                color: @ButtonBorderHoverColour;
                margin-right: 4px;
            }

            & > a, & > h3 {
                text-decoration: none;
                font-size: 1.2em;
            }

            .pageMenuBlurb {
                font-size: 0.9em;
                color: #888;
                margin-bottom: 10px;

                a {
                    text-decoration: none;
                }
            }
        }

            .pageMenuArea:not(:last-child) {
                border-bottom: 1px dashed #aaa;
            }

            .pageMenuArea.noSeperator {
                border-bottom: none;
            }
    }

        td:first-child {
            padding-left: 0;
        }

        td:last-child {
            border-right: none;
            padding-right: 0;
        }
}

div.info-box {
    margin: 0.4em 0;
    padding: 0.4em;
    border: 1px solid lighten(@StatusHighlight, 35%);
    background-color: lighten(@StatusHighlight, 54%);

    i {
        color: @StatusInformation;
    }

    &.alert {
        border: 1px solid @StatusAlert;
        background-color: lighten(@StatusAlert, 49%);
        color: @FontBodyColour;

        i {
            color: @StatusAlert;
        }
    }

    &.error {
        border: 1px solid @StatusError;
        background-color: lighten(@StatusError, 54%);
        color: @StatusError;

        i {
            color: @StatusError;
        }
    }

    p {
        line-height: 1.2em;
    }
}

p.fa-p {
    text-indent: -1.48em;
    margin-left: 1.48em;

    & > i:first-child {
        text-indent: 0;
        width: 1.28em;
        margin-right: 0.2em;
    }
}

// Attachment Uploader
div.Disco-AttachmentUpload-DropTarget {
    display: none;

    &.dragHighlight {
        display: block;
        position: absolute;
        z-index: 1000;
        top: 0;
        left: 0;
        width: calc(~"100% - 6px");
        height: calc(~"100% - 6px");
        background-color: fadeOut(lighten(@ThemeAmber, 30%), 50%);
        border: 3px dashed @ThemeAmber;

        h2 {
            margin-top: 3em !important;
            color: darken(@ThemeAmber, 40%);
            text-align: center;
            font-weight: @FontWeightBodyBold;
        }

        &.dragHover {
            background-color: fadeOut(lighten(@ThemeGreen, 30%), 50%);
            border: 3px dashed @ThemeGreen;

            h2 {
                color: darken(@ThemeGreen, 40%);
            }
        }
    }
}

div.Disco-AttachmentUpload-Progress {
    position: absolute;
    right: 0px;
    bottom: 48px;

    & > div {
        background-color: @BackgroundColourLight;
        padding: 4px 8px;

        i {
            color: @StatusInformation;
            margin-right: 4px;
        }
    }
}

div.Disco-AttachmentUpload-CommentDialog {
    padding: 0.25em 0.5em !important;

    table {
        .tableData;
        table-layout: fixed;

        th {
            width: 80px;
        }

        td.filename {
            font-family: @FontFamilyMono;
            white-space: nowrap;
            overflow: hidden;
            -ms-text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
        }

        input.comments {
            width: calc(~"100% - 5px");
        }

        td.thumbnail {
            display: none;
            text-align: center;

            img {
                border: 1px solid @ButtonHoverColour;
                max-height: 250px;
                max-width: 374px;
            }
        }
    }
}

div.Disco-AttachmentUpload-ImageDialog {
    background-color: @black !important;
    padding: 0 !important;
    overflow: hidden !important;
    width: 720px !important;
    height: 540px !important;
}

body > .User_FlagAssignment_Tooltip {
    span.name {
        display: block;
        font-weight: @FontWeightBodyBold;
    }

    span.comments {
        display: block;
        padding: 2px 0 2px 4px;
    }

    span.added {
        font-style: italic;
        font-size: 0.9em;
    }
}

// Priority Colours
.d-priority-high {
    color: @PriorityHigh;
    width: 1.2857142857142858em;
    text-align: center;

    &:before {
        content: "\f12a";
    }
}

.d-priority-normal {
    color: @PriorityNormal;
    width: 1.2857142857142858em;
    text-align: center;

    &:before {
        content: "\f068";
    }
}

.d-priority-low {
    color: @PriorityLow;
    width: 1.2857142857142858em;
    text-align: center;

    &:before {
        content: "\f063";
    }
}

.fa-stack .d-priority-high, .fa-stack .d-priority-normal, .fa-stack .d-priority-low {
    width: 100%;
    font-size: .8em;
    margin-left: .5em;
    margin-top: .4em;
    opacity: .6;
}

// Theme Colours
.d-lime {
    color: @ThemeLime;
}

.d-green {
    color: @ThemeGreen;
}

.d-emerald {
    color: @ThemeEmerald;
}

.d-teal {
    color: @ThemeTeal;
}

.d-cyan {
    color: @ThemeCyan;
}

.d-cobalt {
    color: @ThemeCobalt;
}

.d-indigo {
    color: @ThemeIndigo;
}

.d-violet {
    color: @ThemeViolet;
}

.d-pink {
    color: @ThemePink;
}

.d-magenta {
    color: @ThemeMagenta;
}

.d-crimson {
    color: @ThemeCrimson;
}

.d-red {
    color: @ThemeRed;
}

.d-orange {
    color: @ThemeOrange;
}

.d-amber {
    color: @ThemeAmber;
}

.d-yellow {
    color: @ThemeYellow;
}

.d-brown {
    color: @ThemeBrown;
}

.d-olive {
    color: @ThemeOlive;
}

.d-steel {
    color: @ThemeSteel;
}

.d-mauve {
    color: @ThemeMauve;
}

.d-sienna {
    color: @ThemeSienna;
}


table.subtleHighlight {
    border: 1px solid @SubtleBorderColour;
    background-color: @SubtleColour;
    .border-radius(3px);
}

td.subtleHighlight {
    border: 1px solid @SubtleBorderColour;
    background-color: @SubtleColour;
    .border-radius(3px);
}

.field-validation-error {
    color: @StatusError !important;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid @StatusError !important;
    background-color: #fff7f7 !important;
}

.validation-summary-errors {
    font-weight: bold !important;
    color: @StatusError !important;
}

.validation-summary-valid {
    display: none;
}

.ajaxLoading {
    height: 11px;
    width: 16px;
    display: inline-block;
    background-repeat: no-repeat;
    background-image: url(data:image/gif;base64,R0lGODlhEAALAPQAAP///zNah+Hm7dng6O7x9DddiTNah1d3nJqtw3+Xs8fS3k5vlm6JqaGzx4KatcrU4FFymDZciHGMq+ru8t/l7Pb3+V9+oeLo7vT2+MTP3LLB0dTc5fHz9gAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCwAAACwAAAAAEAALAAAFLSAgjmRpnqSgCuLKAq5AEIM4zDVw03ve27ifDgfkEYe04kDIDC5zrtYKRa2WQgAh+QQJCwAAACwAAAAAEAALAAAFJGBhGAVgnqhpHIeRvsDawqns0qeN5+y967tYLyicBYE7EYkYAgAh+QQJCwAAACwAAAAAEAALAAAFNiAgjothLOOIJAkiGgxjpGKiKMkbz7SN6zIawJcDwIK9W/HISxGBzdHTuBNOmcJVCyoUlk7CEAAh+QQJCwAAACwAAAAAEAALAAAFNSAgjqQIRRFUAo3jNGIkSdHqPI8Tz3V55zuaDacDyIQ+YrBH+hWPzJFzOQQaeavWi7oqnVIhACH5BAkLAAAALAAAAAAQAAsAAAUyICCOZGme1rJY5kRRk7hI0mJSVUXJtF3iOl7tltsBZsNfUegjAY3I5sgFY55KqdX1GgIAIfkECQsAAAAsAAAAABAACwAABTcgII5kaZ4kcV2EqLJipmnZhWGXaOOitm2aXQ4g7P2Ct2ER4AMul00kj5g0Al8tADY2y6C+4FIIACH5BAkLAAAALAAAAAAQAAsAAAUvICCOZGme5ERRk6iy7qpyHCVStA3gNa/7txxwlwv2isSacYUc+l4tADQGQ1mvpBAAIfkECQsAAAAsAAAAABAACwAABS8gII5kaZ7kRFGTqLLuqnIcJVK0DeA1r/u3HHCXC/aKxJpxhRz6Xi0ANAZDWa+kEAA7AAAAAAAAAAAA) /*Images/Status/loading.gif*/;
    margin-bottom: 0;
}

.ajaxOk {
    color: @StatusSuccess;
}

.ajaxSave {
    color: @StatusInformation;
    cursor: pointer;
}

.ajaxRemove {
    color: @StatusRemove;
    cursor: pointer;
    opacity: .8;

    &:hover {
        opacity: 1;
    }
}

#layout_Page div.hiddenDialog {
    display: none;
}

// Clearfix
/* float clearing for IE6 */
* html .clearfix {
    height: 1%;
    overflow: visible;
}
/* float clearing for IE7 */
* + html .clearfix {
    min-height: 1%;
}
    /* float clearing for everyone else */
    .clearfix:after {
        clear: both;
        content: ".";
        display: block;
        height: 0;
        visibility: hidden;
        font-size: 0;
    }


div.columnHost {
    .column50 {
        float: left;
        width: 50%;
    }
}

// Misc
.hidden {
    display: none;
}

.success {
    color: @StatusSuccess;
}

.information {
    color: @StatusInformation;
}

.warning {
    color: @StatusWarning;
}

.error {
    color: @StatusError;
}

.alert {
    color: @StatusAlert;
}

.smallText {
    font-size: 0.9em;
}

.smallMessage {
    font-style: italic;
    color: #666;
    font-size: 0.9em;
}

.nowrap {
    white-space: nowrap;
}

.code {
    font-family: @FontFamilyMono;
}

div.code {
    border: 1px dashed #bbb;
    background-color: @white;
    margin: 3px 6px;
    padding: 4px;
    font-size: 0.9em;
}

a.smallLink {
    font-size: 0.9em;
}

textarea.block {
    width: 250px;
    height: 100px;
}

.checkboxBulkSelectContainer {
    margin-top: 6px;
    font-size: 0.8em;

    a {
        text-decoration: none;
    }
}

.ui-widget .checkboxBulkSelectContainer {
    font-size: 1em;
}

#licence {
    text-align: justify;

    p {
        font-size: 0.9em;
        line-height: 1.6em;
        margin-bottom: 1em;
    }

    li {
        font-size: 0.9em;
    }
}