@import "Shared";

#updateAvailableContainer {
    float: right;
    border: 1px dashed #ddd;
    background-color: @white;
    font-size: 0.6em;
    line-height: 1em;
    padding: 10px 10px 4px 70px;
    text-align: right;
    height: 50px;

    i {
        position: absolute;
        display: block;
        height: 64px;
        width: 64px;
        vertical-align: middle;
        margin-left: -70px;
        font-size: 50px;
        color: @ButtonAlertColour;
    }

    button {
        font-size: @FontSizeDefault;
        margin-top: 8px;
    }
}

.Config_HideAdvanced {
    .Config_HideAdvanced_Item {
        display: none;
    }
}

.Config_LinkedGroup_Instance {
    margin: 4px 0 8px 4px;
    padding: 4px 0 4px 6px;
    border-left: 4px solid @SubtleBorderColour;
    background-color: @white;

    div.code {
        margin-left: 2px;
    }
}

#Config_LinkedGroup_Dialog {
    h3 {
        margin-bottom: 6px;
    }

    table.input {
        margin-top: 12px;

        th {
            text-align: right;
        }
    }
}

#expressionEditor {
    #expressionEditorExceptionContainer {
        display: none;
        border: 1px dashed #FF9696;
        background-color: #FFD8D8;
        margin: 10px 0;
        padding: 10px;
    }

    #expressionEditorContainer {
        border: 1px solid @FormBorderColour;
        background-color: @TableDataBorderColour;
        height: 100px;
    }
}

.expressionTree {

    span.dynatree-node {
        span.dynatree-icon {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAQCAYAAACm53kpAAAGFklEQVRYw+WVe1BUVRzHvwE+QE0ZLF1Y3gTGSxIl4rk85KHFe0cUiIc8IjNx8gUmLJAFpbIKKJmmCSOi4q48zAe6LqAoioiIMlpOqYWxKCroWFNzO2eXXRdYCBqmf/rNfPece+6598738/ud3wJjHPV8WNwphoSO+L+F3HznWaTVbcGDsYQggkhjJPucWIhcGYYP5xnAKnkh0n1skcGxRobzLGx0MsYmR2MUO5qBMzEAiXhvxmLZU94tq/rJqzUV3q08zL+ei/lt+fC9sRt+N0vh334U/rdOYMEtMRnPqzL/4CxSu46jQFIJgSoI93FfZ7Tmi1FsVoSitWuwhv1Pe51ZcO0+g0BHNkqYH7BVrueXsPlhDYou7cYhrh2OOCzCdhQg7SWAcCYK4X/GIPyPBHBfJIP7fAWCe1chuGc9Qp5kIfhRDgIfbkHQo0IESnaCI74yKPNnkNZ5HPldxLxEiEuSw7i7fgl65BCo+Soc2zkaCHLzZSgLpeM2bBsWAscSM90McID5GTuy41BKzfdexOYn51Ao+R5lvwpR9bsAP65chr0z+TijqgLWw7dtI/zatsoy315GVA2/WyJp1uVyr7k6oOxT5ea7BGgk5u+pMt+N7pCRQtiP/VbUdA1qPLrxNLgFrR/T6wLsMlRscj+bpZAdn+tph5SeBvDi/HGYQjCfjObHtdj+8CRKOwQQ/XIIVyT78GhRFAQ6n6NJ9hKrZeGKF3IZdXDIefO/PQH2l7UQUD8FLnXaZG060Uy8c14PnAYjsJwa6Xb5me86KSv7LpL5riEyT8334FmSCOK8T7D6mrLZjhaEpacjFKzxoTAOWE2W1KhZUgFBj9ETRp+juozmFXQ9D3ksBYBIJgJOe32o+S4xPp1riKqGPdho+BrKKQQWxtXe3IMm8SbcFeWi8zMuJDPsIdLNxg3Z1y2TImUTRk1m/tiEoA78NlDwJOZd6gxg/r6/HAA1WZSCJ5IqCKVlL8BVah4Gvny5TuF0/kDzI6mADcgQfIEcfjOuLXmKZ/H0eTImilGfFI3Yo2SLuhSAV5MfNX9hH1Kpeeh4rHEwQnXjN/hWG69WMBfxk/F0dKpD84W1If4y0oJQ3Q779Xno6AMQG0vMvwKTwHUwWpgJQ/+vpIbJolzSa11XMdhuF5QBKEPoKsc9OioaHwXQVwE7satOlXma+RqhLPseC0gFsNVDYeCQRO/xkCkUQLjtJYTemFa0xcUjsTwa0S1kyzjoe7rRvW5u0Hcxw3d2s2BEr+cYw5VCaNqOFu1x6B0PtWJomyTLvzvRHxFTQ3FPdmUekaAq44MqwE1sTPTGQADKEPp1/T4AcgjUvCHIO0YYPGSVC1FRWI1qfg5y8w6hPGkpEk6kI6MuDnH9ADA8aFApHj54UB3qk0M9zUijM42yRgTDxiSdE6q/ZLYoWTnj0rmhTyH0vfaQD5RBn1MBPfeTJPu10HNpgFVK2EAAcgj9FpQA0JCaj68tQbyIPfD8C0sRFvcBQlnWCAHbdqnsCGyYRyAIjqKyoAKVW2MQ25yJzLoVSGkk82sc8ncO9nz3QQB4PDUsJz0soH0KFt+ZIVU0Yzo0AFPuR4OyLW16jaTpndaDH2l6nPNmcK63gHOjFWanRaoCMCiUAVDT1HwWkwiPYzUDIQxdBTzbLGQLDqCsiGZ9LdY1RCPmeglKLKUb9H1dZUmMipKKIUdZPldWFPPmsABId9eESbCiB8DQuxAGpAL0PA7A85yptAJoD6AVMFoAyuaXX8+Wzu2/ZkZ6FHKRa0ErIRZLmyMR2c4H31ZxU9+n/xE4SP7FSBNHkGgaQm6wwG03RsRNG8Qxs4cHYNsyCd6npsLrog6czr1Osq0Lb9LxXepMiMzhdcGSyBauDXNGBYBKlfkRVoA88pFvswQRt7OQZd/vRh8ARaa5zHjVFfBs7vAAqHldZwuwA21gnjAPs9e64C2eNxy+fBeOeSFw2hGu0EgBKJe/077Gf2t+2DAKfLtfBTCMpkJHGB3wGANkMJbIYWyGB0ANjVajCWp6rM3T0Ji2ifxUQV2rQqHxU4i0KomqoKHZN06sGhrAfxVjbX4M4m/gZza+uQwOHQAAAABJRU5ErkJggg==) /*Images/AttachmentTypes/expressionBrowserIcons.png*/;
            background-position-y: 0;
        }

        &.object {
            span.dynatree-icon {
                background-position-x: 0;
            }
        }

        &.parameter {
            span.dynatree-icon {
                background-position-x: -16px;
            }
        }

        &.function {
            span.dynatree-icon {
                background-position-x: -32px;
            }
        }

        &.property {
            span.dynatree-icon {
                background-position-x: -48px;
            }
        }
    }
}

table.expressionsTable {
    .tableData;

    td.parseError {
        background-color: #FFD8D8;
    }
}

#AttachmentType_FilterExpression {
    width: 375px;
}

#deviceComponents {
    .tableData;

    tr {
        th.actions {
            width: 20px;
        }

        input.description {
            width: 300px;
        }

        input.cost {
            width: 75px;
        }

        i.remove {
            font-size: 1.6em;
            color: @StatusRemove;
            cursor: pointer;
            opacity: .8;

            &:hover {
                opacity: 1;
            }
        }

        i.fa-list-alt {
            color: @StatusInformation;
            font-size: 1.6em;
            cursor: pointer;
        }

        i.fa-asterisk {
            color: @StatusAlert;
            font-size: 1em;
            left: 10px;
            top: 3px;
            cursor: pointer;
        }

        input.updating {
            background-position: right center;
            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*/;
        }
    }
}

#organisationAddresses {
    font-size: 0.9em;

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

    th {
        padding: 2px;
        font-weight: @FontWeightBodyBold;
        width: 200px;
    }

    td {
        padding: 2px;
        vertical-align: middle;
    }

    tr:nth-child(even) {
        background-color: @white;
    }

    i.fa {
        font-size: 1.7em;
        cursor: pointer;

        &.delete {
            color: @StatusRemove;
            opacity: .8;

            &:hover {
                opacity: 1;
            }
        }

        &.edit {
            color: @StatusInformation;
        }
    }
}

// Used in WirelessCertificate/Index
ul#loggingEntries {
    overflow: auto;
    max-height: 230px;
    padding-left: 20px;
}

table.deviceProfileTable {
    th.name {
        width: 300px;
    }

    th.type {
        width: 120px;
    }

    th.deviceCount {
        width: 120px;
    }
}

#configurationDeviceProfileShow {
    #displayComputerNameTemplate {
        margin: 0 0 6px 0;
    }

    #displayOrganisationalUnit {
        margin: 0 0 6px 0;
    }
}

#dialogComputerNameTemplate {
    #ComputerNameTemplate {
        box-sizing: border-box;
        height: 48px;
        width: 100%;
        font-family: @FontFamilyMono;
    }
}

#dialogOrganisationalUnit {
    .enforceOrganisationalUnit {
        line-height: 2.2em;
    }

    .organisationalUnitTree {
        height: 380px;

        span.fancytree-node {
            padding: 1px;
            border: none;
        }

        span.fancytree-node > span.fancytree-icon {
            background: none;
            display: inline-block;
            font-family: FontAwesome;
            font-size: 1.2em;
            width: 14px;
        }

        span.fancytree-ico-ef > span.fancytree-icon:before {
            color: @StatusInformation;
            font-size: 1em;
            content: "\f07c";
        }

        span.fancytree-ico-cf > span.fancytree-icon:before {
            color: @StatusInformation;
            font-size: 1em;
            content: "\f07b";
        }

        ul.fancytree-container > li > span > span.fancytree-icon:before {
            color: @StatusAlert;
            font-size: 1em;
            content: "\f0e8";
        }

        span.fancytree-node.fancytree-selected {
            font-style: normal;
            background: none;
        }
    }
}


#Config_System_AD_SearchScope_Dialog_Loading, #dialogOrganisationalUnit_Loading {
    text-align: center;
    padding: 40px 0;
}

#Config_Expressions_Browser {
    padding-right: 275px;
    background-image: url(data:image/png;base64,[encoded data, 19880 characters]) /*Images/Actions/expressionBrowser256.png*/;
    background-position: right top;
    background-repeat: no-repeat;
}

#Logging_Task_Status {
    width: 520px;
    margin: 40px auto 60px auto;

    th.process {
        text-align: left;
        font-weight: @FontWeightBodyBold;
        background-color: @TableDataBorderColour;
        min-height: 30px;
        vertical-align: middle;
    }

    td.description {
        font-size: 0.9em;
        min-height: 60px;
    }

    td.progress {
        padding: 8px 10px;
    }

    td.finishedMessage {
        i {
            display: none;
        }
    }

    td.finishedRedirect {
        position: relative;

        i {
            color: @StatusInformation;
            position: absolute;
            right: 10px;
            top: calc(~"57% - 0.5em");
            display: inline-block;
        }
    }

    td.exception {
        background-color: #FFD8D8;
    }
}

div.logEventsViewport {
    border: 1px solid #bbb;
    -moz-border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;

    div.logEventsViewportContainer {
        overflow-y: auto;
        overflow-x: hidden;

        .logEventsViewportNoLogs {
            padding-top: 20px;
            text-align: center;
            font-style: italic;
        }
    }

    table.logEventsViewport {
        padding: 0;
        margin: 0;
        background-color: #bbb;
        table-layout: fixed;

        & > thead {
            & > tr {
                background-color: #eee;

                & > th {
                    padding: 4px 2px;
                    font-weight: @FontWeightBodyBold;
                    border-bottom: 1px solid #bbb;

                    &.icon {
                        width: 20px;
                    }

                    &.timestamp {
                        width: 155px;
                    }

                    &.eventType {
                        width: 180px;
                    }
                }
            }
        }

        & > tbody {
            & > tr {
                background-color: @white;

                &:nth-child(even) {
                    background-color: #eee;
                }

                & > td {
                    padding: 2px;

                    &.icon {
                        width: 20px;
                        vertical-align: middle;
                        text-align: center;

                        & > i {
                            display: block;
                            font-size: 1.2em;

                            &.fa-info-circle {
                                color: @StatusInformation;
                            }

                            &.fa-exclamation-triangle {
                                color: @StatusWarning;
                            }

                            &.fa-exclamation-circle {
                                color: @StatusError;
                            }
                        }
                    }

                    &.timestamp {
                        width: 155px;
                    }

                    &.eventType {
                        width: 180px;
                    }

                    &.message {
                        white-space: pre-wrap;
                    }
                }
            }
        }
    }
}

// Enrolment
#enrolStatus {
    #sessions {
        .session {
            width: 280px;
            padding: 4px 4px 4px 72px;
            margin: 8px;
            border: 5px solid #EFEFEF;
            -moz-border-radius: 0 20px 0 0;
            -webkit-border-radius: 0 20px 0 0;
            border-radius: 0 20px 0 0;
            background-color: #F5F5F5;
            background-repeat: no-repeat, no-repeat;
            background-position: 36px 36px, 4px 4px;
            -moz-background-size: 32px, 64px;
            -o-background-size: 32px, 64px;
            -webkit-background-size: 32px, 64px;
            background-size: 32px, 64px;
            min-height: 72px;
            cursor: pointer;

            & > h3 {
                padding-bottom: 3px;
                border-bottom: 1px dashed #ccc;

                span.details {
                    font-size: .8em;
                }

                span.pending {
                    float: right;
                    color: @ThemeAmber;
                }
            }

            & > p.sessionStart {
                color: #888;
                font-size: .8em;
                margin-bottom: 2px;
            }

            & > p.sessionStatus {
                font-size: .9em;
                height: 1.6em;
                overflow: hidden;
                margin-bottom: 3px;
            }
        }

        .session:hover {
            border: 5px solid #6C7A87;
            background-color: #DFE1F8;
        }
    }
}

#dialogSession {
    .sessionHeader {
        float: left;
        padding: 0 0 0 134px;
        background-repeat: no-repeat, no-repeat;
        background-position: 96px 96px, 0 0;
        -moz-background-size: 32px, 128px;
        -o-background-size: 32px, 128px;
        -webkit-background-size: 32px, 128px;
        background-size: 32px, 128px;
        min-height: 134px;

        & > h2 {
            padding-bottom: 0;
        }

        & > table {
            margin-top: 4px;

            th {
                width: 128px;
                text-align: right;
            }

            td, th {
                padding: 1px 2px;
            }
        }
    }

    .sessionProgress {
        width: 320px;
        position: absolute;
        right: 1em;
        text-align: right;

        & > p.sessionStart {
            color: #888;
            margin-bottom: 2px;
        }

        & > p.sessionStatus {
            height: 1.6em;
            overflow: hidden;
            margin-bottom: 3px;
        }

        & code {
            font-size: 2em;
            color: @ThemeRed;
        }

        & div.reason {
            margin-bottom: 3px;
        }
    }

    .sessionInfoContainer {
        & > div {
            float: left;
            width: 428px;
            overflow: auto;
        }

        .sessionInfoMessages {
            height: 374px;
            border: 1px solid #bbb;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            border-radius: 4px;
            background-color: @white;

            div.logEventsViewportContainer {
                overflow: auto;

                .logEventsViewportNoLogs {
                    padding-top: 20px;
                    text-align: center;
                    font-style: italic;
                }
            }

            table.logEventsViewport {
                padding: 0;
                margin: 0;
                background-color: @white;

                & > thead {
                    & > tr {
                        background-color: #eee;

                        & > th {
                            padding: 4px 2px;
                            font-weight: @FontWeightBodyBold;
                            border-bottom: 1px solid #bbb;

                            &.icon {
                                width: 20px;
                            }

                            &.timestamp {
                                width: 155px;
                            }

                            &.eventType {
                                width: 180px;
                            }
                        }
                    }
                }

                & > tbody {
                    & > tr {
                        background-color: @white;

                        &:nth-child(even) {
                            background-color: #eee;
                        }

                        & > td {
                            padding: 2px;

                            &.icon {
                                width: 20px;
                                vertical-align: middle;
                                text-align: center;

                                & > i {
                                    display: block;
                                    font-size: 1.2em;

                                    &.fa-info-circle {
                                        color: @StatusInformation;
                                    }

                                    &.fa-exclamation-triangle {
                                        color: @StatusWarning;
                                    }

                                    &.fa-exclamation-circle {
                                        color: @StatusError;
                                    }
                                }
                            }

                            &.timestamp {
                                width: 155px;
                            }

                            &.eventType {
                                width: 180px;
                            }
                        }
                    }
                }
            }
        }

        .sessionInfoConsole {
            margin-left: 6px;
            background-color: #222;
            color: #0F0;
            font-family: @FontFamilyMono;
            border: 4px solid #CCC;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            border-radius: 4px;
            padding: 2px;
            height: 364px;
        }
    }
}

// Document Templates
#Config_DocumentTemplates_Show {
    & > div.form > table > tbody > tr > th {
        width: 140px;
    }

    #DocumentTemplate_FilterExpression, #DocumentTemplate_OnGenerateExpression, #DocumentTemplate_OnImportAttachmentExpression {
        height: 16px;
        min-height: 16px;
        overflow: hidden;
        font-family: @FontFamilyMono;
    }

    #Config_DocumentTemplates_Scope_Button {
        margin-top: 4px;
    }
}

#Config_DocumentTemplates_Scope_Dialog {
    div.input {
        margin: 14px 10px 20px;
    }
}

#Config_DocumentTemplates_TemplatePdf_Dialog {
    div {
        text-align: center;

        input {
            margin: 16px 0;
        }
    }
}


#Config_DocumentTemplates_JobSubTypes {
    border: 1px dashed @TableDataDarkBorderColour;
    background-color: @white;
    padding: 4px;
    margin-top: 6px;

    & > h4 {
        margin-bottom: 4px;
    }

    #Config_DocumentTemplates_JobSubTypes_Update {
        margin-top: 4px;
    }
}

#Config_DocumentTemplates_JobSubTypes_Update_Dialog {
    #Config_DocumentTemplates_JobSubTypes_Update_Dialog_Types {
        margin: 0 0 8px 0;
    }

    .jobTypes {
        padding: 6px 0;

        .jobSubTypes {
            background-color: @FormBackgroundOddColour;
            border-left: 4px solid @TableDataDarkBorderColour;
            padding: 4px 0 4px 8px;
            margin: 4px 0 0 6px;
        }
    }

    .checkboxBulkSelectContainer {
        font-size: .8em;
    }
}

#DocumentTemplate_OnImportUserFlagRules_AddDialog {
    .distribute-evenly {
        display: flex;
        justify-content: space-around;
        margin: 1em 0;
    }

    textarea {
        width: 99%;
    }

    .mt-1 {
        margin-top: 1em;
    }
}

.dialog-bulk-generate {
    .brief {
        margin: 0 0 8px 0;

        .scopeDescBulkGenerate {
            font-weight: @FontWeightBodyBold;
        }

        div.examples {
            margin: 8px auto;
            width: 360px;

            div {
                margin: 2px 4px 2px 0;
                width: 230px;
                float: left;

                &.example1 {
                    width: 100px;
                }
            }
        }
    }

    textarea {
        width: calc(~"100% - .5em");
        height: 200px;
        margin: 0 auto;
    }

    .sub {
        margin-top: 0.75em;
    }
}

#Config_DocumentTemplates_Show_DownloadBulk_Dialog {
    padding-top: 20px;
    text-align: center;
}

h1.Config_DocumentTemplates {
    margin: 10px 0 6px;
}

// Document Template Packages
#Config_DocumentTemplatePackages_Show {
    & > div.form > table > tbody > tr > th {
        width: 140px;
    }

    #Package_FilterExpression, #Package_OnGenerateExpression {
        height: 16px;
        min-height: 16px;
        overflow: hidden;
        font-family: @FontFamilyMono;
    }

    #Config_DocumentTemplatePackages_Scope_Button {
        margin-top: 4px;
    }

    #Config_DocumentTemplatePackage_List {
        list-style-type: decimal;
        list-style-position: inside;
        background-color: @FormBackgroundOddColour;
        border: 1px solid @TableDataDarkBorderColour;

        li {
            padding: 6px 8px;

            &:not(:first-child) {
                border-top: 1px dashed @TableDataDarkBorderColour;
            }

            .id {
                font-family: @FontFamilyMono;
                float: right;
            }
        }
    }
}

#Config_DocumentTemplatePackages_Scope_Dialog {
    div.input {
        margin: 14px 10px 20px;
    }
}

#Config_DocumentTemplatePackages_JobSubTypes {
    border: 1px dashed @TableDataDarkBorderColour;
    background-color: @white;
    padding: 4px;
    margin-top: 6px;

    & > h4 {
        margin-bottom: 4px;
    }

    #Config_DocumentTemplatePackages_JobSubTypes_Update {
        margin-top: 4px;
    }
}

#Config_DocumentTemplatePackages_JobSubTypes_Update_Dialog {
    #Config_DocumentTemplatePackages_JobSubTypes_Update_Dialog_Types {
        margin: 0 0 8px 0;
    }

    .jobTypes {
        padding: 6px 0;

        .jobSubTypes {
            background-color: @FormBackgroundOddColour;
            border-left: 4px solid @TableDataDarkBorderColour;
            padding: 4px 0 4px 8px;
            margin: 4px 0 0 6px;
        }
    }

    .checkboxBulkSelectContainer {
        font-size: .8em;
    }
}

#Config_DocumentTemplatePackages_Templates_Dialog {
    h3 {
        margin-bottom: 4px;
    }

    & > div {
        width: 374px;
        float: left;

        &:first-child {
            margin-right: 20px;
        }
    }

    .templates_connected {
        min-height: 200px;
    }

    ol {
        list-style-type: decimal;
        padding-left: 24px;
        border: 1px solid @TableDataDarkBorderColour;
        background-color: @FormBackgroundOddColour;
    }

    li {
        background-color: @white;
        border: 1px solid @TableDataDarkBorderColour;
        margin: 4px;
        padding: 2px 4px;
        -moz-box-shadow: 0 0 5px fade(@BackgroundColour, 50%);
        -webkit-box-shadow: 0 0 5px fade(@BackgroundColour, 50%);
        box-shadow: 0 0 5px fade(@BackgroundColour, 50%);
        cursor: default;

        &:hover {
            background-color: @HighlightColour;
            border-color: @ButtonColour;
        }

        .id {
            font-family: @FontFamilyMono;
            color: #888;
            float: right;
            font-size: .9em;
        }
    }
}

// Document Templates - Import Status
#importStatus {
    #sessions {
        .session {
            padding: 4px;
            margin-bottom: 10px;
            border: 1px solid #EFEFEF;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            border-radius: 4px;
            background-color: #F5F5F5;
            min-height: 72px;

            .sessionLeftPane {
                width: 48%;
                float: left;

                & > h3 {
                    padding-bottom: 3px;
                    border-bottom: 1px dashed #ccc;

                    span.details {
                        font-size: .8em;
                    }
                }
            }

            .sessionRightPane {
                width: 48%;
                float: right;
                text-align: right;

                & > p.sessionStart {
                    color: #888;
                    font-size: .8em;
                    margin-bottom: 2px;
                }

                & > p.sessionStatus {
                    font-size: .9em;
                    height: 1.6em;
                    overflow: hidden;
                    margin-bottom: 3px;
                }
            }

            .sessionPages {
                & > .sessionPage {
                    min-height: 56px;
                    min-width: 256px;
                    float: left;
                    margin: 3px 0 3px 0;
                    padding: 170px 0 0 0;
                    background-color: @white;
                    -moz-border-radius: 2px;
                    -webkit-border-radius: 2px;
                    border-radius: 2px;
                    border: 1px solid #eee;
                    background-repeat: no-repeat;
                    background-position: center top;

                    & > .sessionPageDetails {
                        height: 84px;
                        padding: 2px 4px 0 4px;
                        background-color: rgba(255, 255, 255, 0.8);

                        p.sessionStatus {
                            font-size: .9em;
                            height: 1.6em;
                            margin-bottom: 3px;
                        }
                    }
                }
            }

            .sessionInfoMessages {
                margin-top: 6px;
                border: 1px solid #bbb;
                -moz-border-radius: 4px;
                -webkit-border-radius: 4px;
                border-radius: 4px;
                background-color: @white;

                div.logEventsViewportContainer {
                    max-height: 220px;
                    overflow: auto;

                    .logEventsViewportNoLogs {
                        padding-top: 20px;
                        text-align: center;
                        font-style: italic;
                    }
                }

                table.logEventsViewport {
                    padding: 0;
                    margin: 0;
                    background-color: @white;

                    & > thead {
                        & > tr {
                            background-color: #eee;

                            & > th {
                                padding: 4px 2px;
                                font-weight: @FontWeightBodyBold;
                                border-bottom: 1px solid #bbb;

                                &.icon {
                                    width: 20px;
                                }

                                &.timestamp {
                                    width: 155px;
                                }

                                &.eventType {
                                    width: 180px;
                                }
                            }
                        }
                    }

                    & > tbody {
                        & > tr {
                            background-color: @white;

                            &:nth-child(even) {
                                background-color: #eee;
                            }

                            & > td {
                                padding: 2px;

                                &.icon {
                                    width: 20px;
                                    vertical-align: middle;
                                    text-align: center;

                                    & > i {
                                        display: block;
                                        font-size: 1.2em;

                                        &.fa-info-circle {
                                            color: @StatusInformation;
                                        }

                                        &.fa-exclamation-triangle {
                                            color: @StatusWarning;
                                        }

                                        &.fa-exclamation-circle {
                                            color: @StatusError;
                                        }
                                    }
                                }

                                &.timestamp {
                                    width: 155px;
                                }

                                &.eventType {
                                    width: 180px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

#undetectedPagesContainer {
    #undetectedPages {
        list-style: none;
        margin: 0;
        padding: 0;

        & > .undetectedPage {
            float: left;
            margin: 4px;
            border: 1px solid @TableDataBorderColour;
            background-color: @TableDataRowBackgroundColor;
            height: 256px;
            width: 256px;
            background-position: top center;
            background-repeat: no-repeat;
            cursor: pointer;

            & > .pageDetails {
                margin-top: 232px;
                height: 24px;
                text-align: center;
            }

            &:hover {
                border: 1px solid @TableDataDarkBorderColour;
                background-color: @TableDataBorderColour;
            }
        }
    }
}

#undetectedPageDialog {
    & > .pagePreview {
        height: 700px;
        max-height: 700px;
        background-position: top center;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .actions {
        border-top: 1px solid @ActionBarBorder;
        padding-top: 8px;
        margin-top: 8px;
        text-align: right;
    }
}
// Device Batches
.deviceBatches {
    #DeviceBatch_PurchaseDetails_Container {
        padding: 5px 0 5px 5px;
    }

    #DeviceBatch_PurchaseDetails {
        width: 570px;
        height: 200px;
    }

    #DeviceBatch_WarrantyDetails_Container {
        padding: 5px 0 5px 5px;
    }

    #DeviceBatch_WarrantyDetails {
        width: 570px;
        height: 200px;
    }

    #DeviceBatch_InsuranceDetails_Container {
        padding: 5px 0 5px 5px;
    }

    #DeviceBatch_InsuranceDetails {
        width: 570px;
        height: 200px;
    }

    #DeviceBatch_Comments {
        width: 570px;
        height: 200px;
    }

    #DeviceBatch_Attachments {
        border: 1px solid @SubtleBorderColour;
        background-color: @white;
        position: relative;

        div.attachmentOutput {
            position: relative;
            height: 200px;
            overflow: auto;

            & > a {
                display: block;
                float: left;
                height: 48px;
                width: 221px;
                padding: 2px;
                margin: 2px;
                font-size: 0.95em;
                border: 1px solid @white;
                color: @black;
                text-decoration: none;

                span.comments, span.author, span.timestamp {
                    display: block;
                    float: left;
                    width: 168px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    height: 16px;
                }

                span.author {
                    color: #888;
                    width: 150px;
                }

                span.timestamp {
                    color: #888;
                    font-style: italic;
                }

                span.icon {
                    display: block;
                    float: left;
                    height: 48px;
                    width: 48px;
                    margin-right: 2px;

                    img {
                        height: 48px;
                        width: 48px;

                        &.loading {
                            display: none;
                        }
                    }
                }

                &:hover {
                    background-color: @SubtleColour;
                    border: 1px solid @SubtleBorderColour;

                    span.remove {
                        opacity: .5;
                    }
                }

                span.remove {
                    font-size: 1.2em;
                    color: @StatusRemove;
                    margin-left: 2px;
                    cursor: pointer;
                    opacity: 0;

                    &:hover {
                        opacity: 1;
                    }
                }
            }
        }

        &.cannotAddAttachments div.attachmentOutput {
            height: 250px;
        }

        div.attachmentInput {
            border-top: 1px solid @SubtleBorderColour;
            height: 40px;
            background-color: @white;
            padding: 5px;

            span.action {
                color: @HeaderBackgroundColour;
                display: block;
                margin: 0 4px 0 0;
                font-size: 1.5em;
                cursor: pointer;
                float: right;
                border: 1px solid @white;
                padding: .5em;

                &:hover {
                    color: @HyperLinkColour;
                    background-color: @SubtleColour;
                    border: 1px solid @SubtleBorderColour;
                }

                &.disabled {
                    color: fade(@HeaderBackgroundColour, 20%);
                    cursor: default;

                    &:hover {
                        color: fade(@HeaderBackgroundColour, 20%);
                        background-color: inherit;
                        border: 1px solid @white;
                    }
                }
            }
        }
    }
}
// Plugins
#plugins {
    .pageMenuArea a > h3 {
        display: inline;
        color: @HyperLinkColour;

        &:hover {
            color: @HyperLinkHoverColour;
        }
    }

    .pageMenuArea .pageMenuBlurb {
        padding-left: 18px;

        i {
            font-size: .9em;
        }
    }

    #pageMenu td .pageMenuArea:not(:last-child) {
        padding-bottom: 5px;
        margin-bottom: 10px;
    }

    #pageMenu td .pageMenuArea > a, #pageMenu td .pageMenuArea > h3 {
        color: @HeaderBackgroundColour;

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

#dialogUninstallPlugins {
    #uninstallPlugin {
        margin: .5em 0;
    }

    #uninstallPluginData {
        margin: .5em 0;
    }
}

#dialogUninstallPluginConfirm {
    #uninstallPluginConfirm {
        text-align: center;
        margin: 1em 0 0.5em 0;
    }

    #uninstallPluginDataConfirm {
        margin-top: 1em;
    }
}

#pluginLibraryHeading {
    float: right;
}

#pluginLibrary {

    #pluginLibraryGroups {
        width: 900px;
        margin: 0 auto;
        column-count: 2;

        & > div {
            display: inline-block;
        }

        div.form > table {
            margin: 0 10px 10px 4px;
            width: calc(~"100% - 14px");
        }
    }

    .pluginItem {
        .pluginItemBlurb {
            margin: 8px 0 8px 2px;
            padding: 0 4px;
            border-left: 4px solid @BackgroundColour;

            * {
                padding: 0;
                margin: 0;
            }
        }

        .pageMenuBlurb {
            i {
                font-size: .9em;
            }
        }

        & > h2:first-child {
            min-height: 22px;

            i {
                font-size: .9em;
                padding-right: 4px;
                color: @HeaderBackgroundColour;
            }

            a {
                float: right;
                font-size: 12px;
            }
        }
    }
}

#dialogInstallPlugin {
    div.info-box {
        margin-top: 1em;
    }
}

#dialogUploadPlugin {
    #pluginFile {
        margin: 1em 0 1em 6px;
    }
}

#Config_AuthRoles_Show {
    #Config_AuthRoles_Claims_Tree {
        span.fancytree-node {
            padding: 1px;
            border: none;
        }

        span.fancytree-node > span.fancytree-icon {
            background: none;
            display: inline-block;
            font-family: FontAwesome;
            font-size: 1.2em;
            width: 14px;
        }

        span.fancytree-ico-ef > span.fancytree-icon:before {
            color: @StatusClosed;
            font-size: 1em;
            content: "\f07c";
        }

        span.fancytree-ico-cf > span.fancytree-icon:before {
            color: @StatusClosed;
            font-size: 1em;
            content: "\f07b";
        }

        span.fancytree-ico-c > span.fancytree-icon:before {
            color: @StatusRemove;
            content: "\f023";
        }

        span.fancytree-ico-c.fancytree-selected > span.fancytree-icon:before {
            color: @StatusSuccess;
            content: "\f09c";
        }

        span.fancytree-node.fancytree-selected {
            font-style: normal;
            background: none;
        }
    }
}

#Config_AuthRoles_Subjects, #Config_AuthRoles_Subjects_Update_Dialog_List {
    li {
        padding: 4px 0 4px 4px;

        i.fa-user, i.fa-users {
            min-width: 22px;
        }
    }
}

#Config_AuthRoles_Subjects_Update_Dialog {
    display: none;

    #Config_AuthRoles_Subjects_Update_Dialog_ListContainer {
        height: 280px;
        overflow-y: auto;
        background-color: @white;
        border: 1px solid @TableDataDarkBorderColour;
    }

    #Config_AuthRoles_Subjects_Update_Dialog_None {
        padding-top: 15px;
        display: block;
        text-align: center;
    }

    #Config_AuthRoles_Subjects_Update_Dialog_AddContainer {
        padding-top: 10px;
        padding-left: 10px;
    }

    #Config_AuthRoles_Subjects_Update_Dialog_List {
        li {
            cursor: pointer;

            &:hover {
                background-color: @TableDataBorderColour;

                .remove {
                    opacity: .8;
                }
            }

            .remove {
                margin-top: 2px;
                padding-right: 6px;
                float: right;
                cursor: pointer;
                opacity: 0;
                color: @StatusRemove;
                font-size: 1.3em;

                &:hover {
                    opacity: 1;
                }
            }
        }
    }
}

#Config_Lodgment {
    margin-top: 10px;
}

#Config_ReportPrefs {
    margin-top: 10px;

    #Config_ReportPrefs_Preview {
        float: right;
        width: 150px;
        height: 80px;
        border: 1px solid #444;
        font-size: 4px;
        color: @white;
        overflow: hidden;
        text-transform: uppercase;

        .heading {
            height: 6px;
            padding-left: 3px;
            overflow: hidden;
            background-color: @HeaderBackgroundColour;
        }

        .column-heading {
            float: left;
            width: calc(~"33% - 4px");
            padding-left: 2px;
            margin: 1px 0 0 2px;
        }

        .column {
            height: 100%;
            float: left;
            width: calc(~"33% - 2px");
            margin-left: 2px;
            overflow: hidden;
            background: fade(@white, 20%);

            span {
                display: block;
                height: 4px;
                margin: 1px;
                background-color: @white;
            }
        }

        .theme-builder(@main-colour, @alert-colour: difference(@main-colour, @white), @alert-text-colour: contrast(@alert-colour)) {
            background: linear-gradient(to bottom, darken(@main-colour, 10%), @main-colour) left top repeat-x @main-colour;

            .column span.alert {
                background-color: @alert-colour;
                color: @alert-text-colour;
            }
        }

        &.theme-default {
            .theme-builder(@ButtonColour, @ThemeRed);
        }

        &.theme-default-soft {
            .theme-builder(@ButtonColour, hardlight(@ThemeYellow, #bbb));
        }

        &.theme-green {
            .theme-builder(@ThemeGreen, @ThemeRed);
        }

        &.theme-green-soft {
            .theme-builder(@ThemeGreen, screen(@ThemeYellow, #111));
        }

        &.theme-violet {
            .theme-builder(@ThemeViolet, @ThemeRed);
        }

        &.theme-violet-soft {
            .theme-builder(@ThemeViolet, hardlight(@ThemeYellow, #bbb));
        }

        &.theme-magenta {
            .theme-builder(@ThemeMagenta, darken(@ThemeCyan, 10%), @white);
        }

        &.theme-magenta-soft {
            .theme-builder(@ThemeMagenta, screen(@ThemeCyan, #777));
        }

        &.theme-crimson {
            .theme-builder(@ThemeCrimson, screen(@ThemeLime, #222));
        }

        &.theme-crimson-soft {
            .theme-builder(@ThemeCrimson, screen(@ThemeLime, #777));
        }

        &.theme-amber {
            .theme-builder(@ThemeAmber, @ThemeCobalt);
        }

        &.theme-amber-soft {
            .theme-builder(@ThemeAmber, hardlight(@ThemeCobalt, #ddd));
        }

        &.theme-brown {
            .theme-builder(@ThemeBrown, @ThemeYellow);
        }

        &.theme-brown-soft {
            .theme-builder(@ThemeBrown, hardlight(@ThemeYellow, #bbb));
        }

        &.theme-steel {
            .theme-builder(@ThemeSteel, @ThemeRed);
        }

        &.theme-steel-soft {
            .theme-builder(@ThemeSteel, hardlight(@ThemeYellow, #bbb));
        }
    }
}

#Config_ReportPrefs_Builder {
    & > form > div {
        margin-bottom: 10px;
    }

    .report {
        ul {
            margin-left: 10px;
        }
    }

    .theme {
        & > select {
            margin-left: 10px;
        }
    }

    .filter {
        & > select {
            margin-left: 10px;
        }

        div.options {
            display: none;
            background-color: @white;
            border: 1px dashed @SubtleBorderColour;
            margin-top: 4px;
            margin-left: 15px;
            padding: 2px 6px;

            .method {
                margin-top: 4px;
                margin-bottom: 8px;

                label {
                    margin-right: 14px;
                }
            }
        }
    }

    #Config_ReportPrefs_Builder_Components {
        display: flex;
        justify-content: space-around;
    }
}

#Config_ReportPrefs_Builder_Buttonpane {
    padding-right: .3em;

    textarea {
        float: left;
        font-family: @FontFamilyMono;
        color: @FontBodyColour;
        width: calc(~"100% - 1.2em - 10px");
        border: 1px solid @SubtleBorderColour;
        white-space: pre;
        min-height: 0;
    }

    i {
        float: right;
        cursor: pointer;
        margin: .3em .2em 0 0;
        color: @HyperLinkColour;

        &:hover {
            color: @HyperLinkHoverColour;
        }
    }

    .ui-dialog-buttonset {
        display: none;
    }
}

#Config_Location {
    margin-top: 10px;

    #Config_Location_Unrestricted, #Config_Location_List, #Config_Location_Optional, #Config_Location_Restricted {
        display: none;
        margin-top: 6px;
    }
}

#Config_Location_List_Dialog {
    display: none;

    #Config_Location_List_Dialog_ListContainer {
        height: 280px;
        overflow-y: auto;
        background-color: @white;
        border: 1px solid @TableDataDarkBorderColour;
    }

    #Config_Location_List_Dialog_None {
        padding-top: 15px;
        display: block;
        text-align: center;
    }

    #Config_Location_List_Dialog_AddContainer {
        padding-top: 10px;
        padding-left: 10px;
    }

    #Config_Location_List_Dialog_List {
        li {
            padding: 2px 0 2px 4px;
            cursor: pointer;

            &:hover {
                background-color: @TableDataBorderColour;

                .remove {
                    opacity: .8;
                }
            }

            .remove {
                margin-top: 2px;
                padding-right: 6px;
                float: right;
                cursor: pointer;
                opacity: 0;
                color: @StatusRemove;
                font-size: 1.3em;

                &:hover {
                    opacity: 1;
                }
            }
        }
    }
}

#Config_Location_ListImport_Dialog {
    display: none;

    #Config_Location_ListImport_Dialog_Overwrite_Container {
        margin: 6px 0;
    }

    #Config_Location_ListImport_Dialog_LocationList {
        width: 100%;
        height: 200px;
        margin: 0 auto;
    }
}

#Config_JobPref_General {
    #InitialCommentsTemplate {
        margin-top: 4px;
        min-width: calc(100% - 43px);
        min-height: 40px;
        height: auto;
        field-sizing: content;
    }
}

#Config_JobPref_Expressions {
    margin-top: 10px;

    textarea {
        height: 16px;
        min-height: 16px;
        overflow: hidden;
        font-family: @FontFamilyMono;
    }
}

#Config_JobQueues_Index {
    i {
        width: 1.2857142857142858em;
        text-align: center;
    }
}

#Config_JobQueues_Icon {
    display: block;
    margin: 0 0 10px 10px;
}

#Config_JobQueues_Icon_Update_Dialog {
    display: none;

    div.colours {
        text-align: center;
        font-size: 30px;

        i {
            cursor: pointer;
            padding: 1px;
            opacity: .9;

            &:hover {
                opacity: 1;
            }

            &.selected {
                opacity: 1;
            }
        }
    }

    div.icons {
        text-align: center;
        font-size: 30px;
        background-color: @white;
        border: 1px solid @BackgroundColour;
        margin: 6px 0 14px 0;

        i {
            width: 1.2857142857142858em;
            text-align: center;
            cursor: pointer;
            padding: 4px 0px;
            color: @HeaderBackgroundColour;
            opacity: .6;

            &:hover {
                opacity: .9;
                color: inherit;
            }

            &.selected {
                opacity: 1;
                color: inherit;
            }
        }
    }
}

#Config_JobQueues_JobSubTypes_Update {
    margin: 8px 0;
}

#Config_JobQueues_JobSubTypes_Update_Dialog {
    #Config_JobQueues_JobSubTypes_Update_Dialog_Types {
        margin: 0 0 8px 0;
    }

    .jobTypes {
        padding: 6px 0;

        .jobSubTypes {
            background-color: @FormBackgroundOddColour;
            border-left: 4px solid @TableDataDarkBorderColour;
            padding: 4px 0 4px 8px;
            margin: 4px 0 0 6px;
        }
    }

    .checkboxBulkSelectContainer {
        font-size: .8em;
    }
}

#Config_JobQueues_Subjects, #Config_JobQueues_Subjects_Update_Dialog_List {
    li {
        padding: 4px 0 4px 4px;

        i.fa-user, i.fa-users {
            width: 1.2857142857142858em;
            text-align: center;
        }
    }
}

#Config_JobQueues_Subjects_Update_Dialog {
    display: none;

    #Config_JobQueues_Subjects_Update_Dialog_ListContainer {
        height: 280px;
        overflow-y: auto;
        background-color: @white;
        border: 1px solid @TableDataDarkBorderColour;
    }

    #Config_JobQueues_Subjects_Update_Dialog_None {
        padding-top: 15px;
        display: block;
        text-align: center;
    }

    #Config_JobQueues_Subjects_Update_Dialog_AddContainer {
        padding-top: 10px;
        padding-left: 10px;
    }

    #Config_JobQueues_Subjects_Update_Dialog_List {
        li {
            cursor: pointer;

            &:hover {
                background-color: @TableDataBorderColour;

                .remove {
                    opacity: .8;
                }
            }

            .remove {
                margin-top: 2px;
                padding-right: 6px;
                float: right;
                cursor: pointer;
                opacity: 0;
                color: @StatusRemove;
                font-size: 1.3em;

                &:hover {
                    opacity: 1;
                }
            }
        }
    }
}

#Config_UserFlags_Show {

    #UserFlag_OnAssignmentExpression, #UserFlag_OnUnassignmentExpression {
        height: 16px;
        min-height: 16px;
        overflow: hidden;
        font-family: @FontFamilyMono;
    }
}

#Config_UserFlags_Index {
    i {
        width: 1.2857142857142858em;
        text-align: center;
    }
}

#Config_UserFlags_Icon {
    display: block;
    margin: 0 0 10px 10px;
}

#Config_UserFlags_Icon_Update_Dialog {
    display: none;

    div.colours {
        text-align: center;
        font-size: 30px;

        i {
            cursor: pointer;
            padding: 1px;
            opacity: .9;

            &:hover {
                opacity: 1;
            }

            &.selected {
                opacity: 1;
            }
        }
    }

    div.icons {
        text-align: center;
        font-size: 30px;
        background-color: @white;
        border: 1px solid @BackgroundColour;
        margin: 6px 0 14px 0;

        i {
            width: 1.2857142857142858em;
            text-align: center;
            cursor: pointer;
            padding: 4px 0px;
            color: @HeaderBackgroundColour;
            opacity: .6;

            &:hover {
                opacity: .9;
                color: inherit;
            }

            &.selected {
                opacity: 1;
                color: inherit;
            }
        }
    }
}

#Config_UserFlags_BulkAssign_ModeDialog {
    & > div {
        margin-top: 6px;
        background-color: @white;
        line-height: 1.3em;
        border: 1px solid #ddd;

        & > div {
            display: block;
            padding: 4px;
            cursor: pointer;

            &:not(:last-child) {
                border-bottom: 1px dashed #ddd;
            }

            h5 {
                font-size: 1.1em;
                padding: 4px 0;
            }

            i {
                margin-right: 4px;
            }

            &.add {
                &:hover {
                    background-color: hsv(hsvhue(@StatusSuccess), 13%, 100%);
                }

                i {
                    color: @StatusSuccess;
                }
            }

            &.override {
                &:hover {
                    background-color: hsv(hsvhue(@StatusError), 13%, 100%);
                }

                i {
                    color: @StatusError;
                }
            }
        }
    }
}

#Config_UserFlags_BulkAssign_AssignDialog {
    .brief {
        margin: 0 0 8px 0;

        .scopeDescBulkGenerate {
            font-weight: @FontWeightBodyBold;
        }

        div.examples {
            margin: 8px auto;
            width: 300px;

            div {
                margin: 2px 4px 2px 0;
                width: 150px;
                float: left;

                &.example1 {
                    width: 100px;
                }
            }
        }
    }

    div.loading {
        display: none;
        padding: 40px 0;
        text-align: center;

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

    #Config_UserFlags_BulkAssign_AssignDialog_UserIds {
        height: 200px;
        margin-bottom: 8px;
    }

    textarea {
        width: calc(~"100% - .5em");
        margin: 0;
    }

    &.loading {
        & > div.loading {
            display: block;
        }

        & > form {
            display: none;
        }
    }
}

#UserFlag_Export {
    #UserFlag_Export_Fields {
        #UserFlag_Export_Fields_Defaults {
            font-size: .75em;
        }

        th {
            font-size: 1.05em;

            span {
                margin-top: 4px;
                font-size: .8em;
            }
        }
    }
}

#Config_DeviceFlags_Show {

    #DeviceFlag_OnAssignmentExpression, #DeviceFlag_OnUnassignmentExpression {
        height: 16px;
        min-height: 16px;
        overflow: hidden;
        font-family: @FontFamilyMono;
    }
}

#Config_DeviceFlags_Index {
    i {
        width: 1.2857142857142858em;
        text-align: center;
    }
}

#Config_DeviceFlags_Icon {
    display: block;
    margin: 0 0 10px 10px;
}

#Config_DeviceFlags_Icon_Update_Dialog {
    display: none;

    div.colours {
        text-align: center;
        font-size: 30px;

        i {
            cursor: pointer;
            padding: 1px;
            opacity: .9;

            &:hover {
                opacity: 1;
            }

            &.selected {
                opacity: 1;
            }
        }
    }

    div.icons {
        text-align: center;
        font-size: 30px;
        background-color: @white;
        border: 1px solid @BackgroundColour;
        margin: 6px 0 14px 0;

        i {
            width: 1.2857142857142858em;
            text-align: center;
            cursor: pointer;
            padding: 4px 0px;
            color: @HeaderBackgroundColour;
            opacity: .6;

            &:hover {
                opacity: .9;
                color: inherit;
            }

            &.selected {
                opacity: 1;
                color: inherit;
            }
        }
    }
}

#Config_DeviceFlags_BulkAssign_ModeDialog {
    & > div {
        margin-top: 6px;
        background-color: @white;
        line-height: 1.3em;
        border: 1px solid #ddd;

        & > div {
            display: block;
            padding: 4px;
            cursor: pointer;

            &:not(:last-child) {
                border-bottom: 1px dashed #ddd;
            }

            h5 {
                font-size: 1.1em;
                padding: 4px 0;
            }

            i {
                margin-right: 4px;
            }

            &.add {
                &:hover {
                    background-color: hsv(hsvhue(@StatusSuccess), 13%, 100%);
                }

                i {
                    color: @StatusSuccess;
                }
            }

            &.override {
                &:hover {
                    background-color: hsv(hsvhue(@StatusError), 13%, 100%);
                }

                i {
                    color: @StatusError;
                }
            }
        }
    }
}

#Config_DeviceFlags_BulkAssign_AssignDialog {
    .brief {
        margin: 0 0 8px 0;

        .scopeDescBulkGenerate {
            font-weight: @FontWeightBodyBold;
        }

        div.examples {
            margin: 8px auto;
            width: 300px;

            div {
                margin: 2px 4px 2px 0;
                width: 150px;
                float: left;

                &.example1 {
                    width: 100px;
                }
            }
        }
    }

    div.loading {
        display: none;
        padding: 40px 0;
        text-align: center;

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

    #Config_DeviceFlags_BulkAssign_AssignDialog_DeviceSerialNumbers {
        height: 200px;
        margin-bottom: 8px;
    }

    textarea {
        width: calc(~"100% - .5em");
        margin: 0;
    }

    &.loading {
        & > div.loading {
            display: block;
        }

        & > form {
            display: none;
        }
    }
}

#DocumentTemplate_BulkGenerate {
    .actions {
        padding-bottom: .5em;
        text-align: right;
    }

    table {
        max-width: 850px;
        margin: auto;

        tr.when-none {
            text-align: center;
            font-style: italic;
        }
    }
}

.dialog-item-picker {
    height: 300px;
    overflow-y: auto;
    background-color: #fcfcfc;
    border: 1px solid #ccc;

    & > div {
        background-color: @white;
        border-bottom: 1px solid #ddd;
        padding: 6px 0 6px 6px;
        cursor: pointer;

        &:hover {
            background-color: @TableDataBorderColour;
        }

        &.selected, &.selected:hover {
            background-color: @TableDataDarkBackgroundColour;
        }

        &.disabled {
            cursor: not-allowed;
            background-color: @TableDataBorderColour;
        }
    }
}

.dialog-bulk-generate {
}

#Config_Export_Edit_OnDemand {
    #Config_Export_Edit_OnDemand_List {
        height: 120px;
        overflow-y: auto;
        background-color: @white;
        border: 1px solid @TableDataDarkBorderColour;
        margin-bottom: 10px;

        li {
            cursor: pointer;
            margin: 2px 4px;

            &:hover {
                background-color: @TableDataBorderColour;

                .remove {
                    opacity: .8;
                }
            }

            .remove {
                margin-top: 2px;
                padding-right: 6px;
                float: right;
                cursor: pointer;
                opacity: 0;
                color: @StatusRemove;
                font-size: 1.3em;

                &:hover {
                    opacity: 1;
                }
            }
        }
    }
}

#DocumentTemplate_Export {
    #DocumentTemplate_Export_Fields {
        #DocumentTemplate_Export_Fields_Defaults {
            font-size: .75em;
        }

        th {
            font-size: 1.05em;

            span {
                margin-top: 4px;
                font-size: .8em;
            }
        }
    }
}
