/* ----- Top Level Styles! ------------------------------------------------- */
body {
    position: relative;
    /*background-color: #299DD7;*/
    /* Put the ugly beta bg in, as a test as to whether the bg is visible! */
    /*background: url("../../crimsonImages/themes/wm/beta.png");*/
}

input[type=text]::-ms-clear {
    /* IE 10 nukes */
    display: none;
}
/* ----- end of Top Level Styles! ------------------------------------------ */

/* ----- Additional Font Styles for Google Material Font ------------------- */
.material-icons.md-16 {
    font-size: 16px;
}

.material-icons.md-18 {
    font-size: 18px;
}

.material-icons.md-24 {
    font-size: 24px;
}

.material-icons.md-36 {
    font-size: 36px;
}

.material-icons.md-48 {
    font-size: 48px;
}

/* Rules for using icons as black on a light background. */
.material-icons.md-dark {
    color: rgba(0, 0, 0, 0.54);
}

    .material-icons.md-dark.md-inactive {
        color: rgba(0, 0, 0, 0.26);
    }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light {
    color: rgba(255, 255, 255, 1);
}

    .material-icons.md-light.md-inactive {
        color: rgba(255, 255, 255, 0.3);
    }
/* ----- end of Google Material Font styles -------------------------------- */

/* ========================================================================= */
/* ||    DIALOGS - add wm-dialog to the dialog initialisation to use      || */
/* ========================================================================= */
.wm-dialog.ui-widget-content.ui-dialog {
    /* Provides the border for the dialog, and removes default padding */
    border: 0px solid darkslategrey;
    padding: 0;
    height: 500px;
    width: 800px;
}

#dialog_ImagePicker {
    height: 500px !important;
}

.ui-dialog {
    border: 1px solid #000 !important;
}

.wm-dialog.ui-dialog-titlebar {
    /* Removes default padding, and provides dark background and white text */
    border: 0;
    background-color: darkslategrey;
    color: #FFFFFF;
}

.wm-dialog.ui-dialog-titlebar-close {
    /* Replaces default colors and border, and text positioning */
    background-color: darkslategray;
    color: #FFFFFF;
    text-indent: 0;
    border: 0;
}

    .wm-dialog.ui-dialog-titlebar-close i::before {
        top: 1px;
    }

.wm-dialog.ui-dialog-content {
    /* Removes default padding */
    padding: 0;
}
/* ||    end of DIALOGS                                                   || */
/* ========================================================================= */


/* ========================================================================= */
/* ||    LABEL PICKER - dialog to pick/create/edit formatted labels       || */
/* ========================================================================= */

/* ----- Structural Elements ----------------------------------------------- */
#divLabelPicker_PickArea {
    /* Picker Area holds the buttons and file picker */
    height: 140px;
    background-color: aliceblue;
    padding-bottom: 10px;
}

#divLabelPicker_PickArea_NewButton {
    /* New Button area holds Create New button */
    float: left;
    width: 130px;
    height: 100%;
    text-align: left;
}

#divLabelPicker_PickArea_FileList {
    /* File List of pickable labels */
    /* Fixed width with horizontal scrolling */
    float: left;
    width: 700px;
    height: 100%;
    overflow-x: scroll;
    white-space: nowrap;
}

#divLabelPicker_PickArea_ContinueButton {
    /* Area for Continue button */
    float: left;
    width: 118px;
    height: 100%;
    padding-top: 45px;
    padding-right: 10px;
    text-align: right;
}

#divLabelPicker_EditArea {
    /* Edit area shows when creating/editing a label */
    height: 400px;
    padding-top: 5px;
    border-top: solid 1px darkslategrey;
    background-color: aliceblue;
}

#divLabelPicker_EditArea_LabelName {
    /* Area for Label Name control */
    float: left;
    width: 140px;
    height: 100%;
    padding-right: 5px;
    padding-left: 5px;
    font-size: 10pt;
}

#divLabelPicker_EditArea_LabelContent {
    /* Area for rich text content editor */
    float: left;
    width: 615px;
    height: 100%;
    padding-right: 5px;
    font-size: 10pt;
}

#divLabelPicker_EditArea_Buttons {
    /* Area for Buttons */
    float: left;
    width: 193px;
    height: 100%;
    padding-top: 45px;
    padding-right: 10px;
    text-align: right;
}

#btnLabelPicker_Discard {
    margin-top: 10px;
}
/* ----- end of Structural Elements ---------------------------------------- */

/* ----- Overrides for Bootstrap Buttons ----------------------------------- */
#dialog_FormattedLabelPicker .btn {
    padding-left: 6px;
    padding-right: 6px;
}

    #dialog_FormattedLabelPicker .btn i {
        padding-right: 8px;
    }

#dialog_FormattedLabelPicker .btn-success {
    color: #FFFFFF;
}

#dialog_FormattedLabelPicker .btn-danger {
    color: #FFFFFF;
}

#btnLabelPicker_SaveAndContinue {
    width: 160px;
}

#btnLabelPicker_SaveAndContinue_Toggle {
    padding-top: 14px;
    padding-bottom: 14px;
}

#btnLabelPicker_Discard {
    width: 181px;
}
/* ----- end of Overrides for Bootstrap Buttons ---------------------------- */

/* ----- Disabled State for Picker Area ------------------------------------ */
#divLabelPicker_PickArea_FileList.disabled {
    opacity: 0.4;
    pointer-events: none;
}
/* ----- end of Disabled State for Picker Area ----------------------------- */

/* ----- Pick List Elements ------------------------------------------------ */
.lp-item {
    /* Parent element for a label picker item */
    display: inline-block;
    background-color: antiquewhite;
    border: 1px solid antiquewhite;
    border-radius: 5px;
    margin: 4px;
    white-space: normal;
}

    .lp-item:not(.lp-selected):hover {
        /* Hover state for a non-selected item */
        background-color: aliceblue;
        border: 1px solid lightblue;
    }

.lp-selected {
    /* Additional styles for a selected item */
    border: 1px solid #6495ED;
    background-color: lightblue;
}

.lp-item-createplaceholder {
    /* Placeholder for creating a new item */
    display: inline-block;
    width: 100px;
    height: 102px;
    background-color: antiquewhite;
    border: 1px solid #FBC47A;
    border-radius: 5px;
    margin-top: 5px;
    margin-left: 15px;
    cursor: pointer;
}

    .lp-item-createplaceholder.disabled {
        /* Placeholder for creating a new item */
        background-color: #F1E8DD;
        border-color: #EFD6B9;
        color: darkgray;
        pointer-events: none;
    }

.lp-item-createplaceholdericon {
    /* Icon within the placeholder */
    float: left;
    position: relative;
    left: 38px;
    top: 34px;
}

.lp-item-thumbwrap {
    /* Wrapper element for the thumbnail area */
    width: 112px;
    height: 70px;
    margin: 5px;
}

.lp-item-thumb {
    /* Thumbnail image. Force background image to fill size, add shadow */
    float: left;
    width: 90px;
    height: 70px;
    background-color: #FFFFFF;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    box-shadow: 1px 1px 4px 0 #AAAAAA;
}

.lp-item-buttonwrap {
    /* Wrapper for buttons in thumb area */
    display: inline-block;
    left: 90px;
    width: 22px;
    padding-left: 8px;
}

.lp-item-btn {
    cursor: pointer;
}

    .lp-item-btn:hover {
        /*background-color: #EABCBC;*/
        color: #D48409;
    }

.lp-item-namewrap {
    /* Wrapper for name part of pick item */
    width: 112px;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
}

.lp-item-filename {
    /* element displaying the filename. Hide overflowing text with ellipsis */
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    text-align: center;
    border: 1px solid antiquewhite;
}

    .lp-item-filename.editable {
        /* Additional style when element displaying filename is editable */
        background-color: white;
        border: 1px solid black;
        width: 100%;
    }

    .lp-item-filename:focus {
        text-overflow: clip;
    }

    .lp-item-filename:not(:focus) {
        text-overflow: ellipsis;
    }
/* ----- end of Pick List Elements ----------------------------------------- */

/* ||    end of LABEL PICKER                                              || */
/* ========================================================================= */


/* ========================================================================= */
/* ||    TEXT EDITOR - dialog to edit text                                || */
/* ========================================================================= */

/* ----- Structural Elements ----------------------------------------------- */
#divTextEditor_Edit {
    height: 150px;
    display: grid;
    border: solid;
    border-width: 1px;
    border-color: black;
}

#divTextEditor_Buttons {
    float: right;
}
/* ----- end of Structural Elements ---------------------------------------- */

/* ----- Text Edit area ---------------------------------------------------- */
#expressionEdit_TextArea {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 100%;
    width: 100%;
    resize: none;
    cursor: text;
}

#divTextEditor_Wrapper {
    padding: 10px;
}

#expressionEdit_FormulaColumns {
    width: auto;
    height: auto;
    padding: 5px;
    padding-left: 0px;
    padding-right: 0px;
}

#divTextEditor_Buttons {
    padding: 5px;
    padding-left: 0px;
    padding-right: 0px;
}

#divTextEditor_HelpText {
    padding: 2px;
    margin-top: 10px;
    width: 100%;
    height: 100px;
    border: solid;
    border-width: 1px;
    border-color: black;
    overflow-y: scroll;
    background-color: white;
}

    /* Help-text area styles */
    #divTextEditor_HelpText table {
        margin: 5px;
        border-collapse: collapse;
    }

    #divTextEditor_HelpText td,
    #divTextEditor_HelpText th {
        padding: 2px;
        padding-right: 25px;
    }

    #divTextEditor_HelpText header {
        font-weight: bold;
    }

    #divTextEditor_HelpText th {
        font-weight: bold;
        font-size: 14px;
        text-align: left;
    }

    #divTextEditor_HelpText ul {
        list-style-type: disc;
        list-style-position: inside;
        margin: 5px;
    }

#expressionEdit_FormulaColumn2 {
    padding-left: 5px;
    padding-right: 5px;
}

.expression-builder-dialog {
    background-color: aliceblue;
}

.expression-error {
    padding-top: 5px;
    color: red;
}

.expression-edit-column-header,
.expression-edit-list-item,
.expression-edit-list {
    border: solid;
    border-width: 1px;
    margin: -1px;
    border-color: darkslategrey;
}

.expression-edit-column-div label.expression-edit-column-header {
    border-color: darkslategray;
}

.expression-edit-column-header {
    text-align: center;
    font-size: 14px;
    width: 100%;
    height: auto;
    padding: 5px
}

.expression-edit-column-div {
    float: left;
    width: 33.333333%;
    height: 100%;
    margin-bottom: 5px;
}

.expression-edit-list {
    width: 100%;
    height: 173px;
    margin-top: -1px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: white;
}

.expression-edit-list-item {
    background-color: white;
    cursor: pointer;
    user-select: none;
    padding: 2px;
}

.ui-hover {
    background-color: #DFEFFF;
}

.ui-selected {
    background-color: #9FCFFF;
}

    .ui-selected.ui-hover {
        background-color: #7FBFFF;
    }

/* ----- end of Text Edit area --------------------------------------------- */
/* ----- Overrides for Bootstrap Buttons ----------------------------------- */
#dialog_TextEditor .btn {
    padding-left: 6px;
    padding-right: 6px;
}

    #dialog_TextEditor .btn i {
        padding-right: 8px;
    }

#dialog_TextEditor .btn-success {
    color: #FFFFFF;
}

#dialog_TextEditor .btn-danger {
    color: #FFFFFF;
}
/* ----- end of Overrides for Bootstrap Buttons ---------------------------- */

/* ||    end of TEXT EDITOR                                               || */
/* ========================================================================= */


/* ========================================================================= */
/* ||    IMAGE PICKER - dialog to pick/add images                         || */
/* ========================================================================= */

/* ----- Structural Elements ----------------------------------------------- */
#divImgPick_Actions {
    padding: 10px 10px 10px 10px;
    border-bottom: 1px solid #000000;
}

#divImgPick_Picker {
    height: 329px;
    padding: 10px 10px 10px 10px;
    border-bottom: 1px solid #000000;
    overflow-y: scroll;
}

#divImgPick_Validation {
    height: 54px;
    width: 645px;
    font-size: 1.2em;
    float: left;
    padding-left: 10px;
    padding-top: 5px;
}

#divImgPick_Buttons {
    padding: 10px 10px 10px 10px;
    float: right;
}
/* ----- end of Structural Elements ---------------------------------------- */

/* ----- Overrides for Bootstrap Buttons ----------------------------------- */
#dialog_ImagePicker .btn {
    padding-left: 6px;
    padding-right: 6px;
}

    #dialog_ImagePicker .btn i {
        padding-right: 8px;
    }

#dialog_ImagePicker .btn-success {
    color: #FFFFFF;
}

#dialog_ImagePicker .btn-danger {
    color: #FFFFFF;
}

#divImgPick_Buttons a:first-of-type {
    margin-right: 10px;
}
/* ----- end of Overrides for Bootstrap Buttons ---------------------------- */

/* ----- Positioning for Action Elements ----------------------------------- */
#divImgPick_Actions_DragDrop {
    width: 49%;
    height: 60px;
    display: inline-block;
    background-color: aliceblue;
    border: 2px dashed lightsteelblue;
    border-radius: 10px;
    text-align: center;
}

#spanImgPick_Actions_DragDrop_Instruct {
    display: block;
    width: 200px;
    padding-top: 12px;
    margin: 0 auto;
    font-size: 12px;
}

#divImgPick_Actions_Upload {
    width: 50%;
    height: 60px;
    float: right;
    text-align: center;
    padding-top: 5px;
}

#spanImgPick_Actions_Upload_Instruct {
    display: block;
    height: 20px;
    font-size: 12px;
}

#btnImgPick_Actions_Upload {
    width: 200px;
    margin: 0 auto;
}
/* ----- end of Positioning for Action Elements ---------------------------- */

/* ----- Positioning for Validation/Buttons -------------------------------- */
#divImgPick_Validation a {
    float: right;
    margin-right: 20px;
}

    #divImgPick_Validation a:first-of-type {
        margin-right: 0;
    }

#spanImgPick_Validation_Message {
    color: red;
    float: left;
    margin-top: 8px;
}
/* ----- end of Positioning for Validation/Buttons ------------------------- */

/* ----- Pick List Elements ------------------------------------------------ */
.ip-item {
    /* Parent element for an image picker item */
    display: inline-block;
    background-color: antiquewhite;
    border: 1px solid antiquewhite;
    border-radius: 5px;
    margin: 5px;
    white-space: initial;
}

    .ip-item:not(.ip-selected):hover {
        /* Hover state for a non-selected item */
        background-color: aliceblue;
        border: 1px solid lightblue;
    }

.ip-selected {
    /* Additional styles for a selected item */
    border: 1px solid #6495ED;
    background-color: lightblue;
}

.ip-item-thumbwrap {
    /* Wrapper element for the thumbnail area */
    width: 112px;
    height: 70px;
    margin: 5px;
}

.ip-item-thumb {
    /* Thumbnail image. Force background image to fill size, add shadow */
    float: left;
    width: 90px;
    height: 70px;
    background-color: #FFFFFF;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    box-shadow: 1px 1px 4px 0 #AAAAAA;
}

.ip-item-buttonwrap {
    /* Wrapper for buttons in thumb area */
    display: inline-block;
    left: 90px;
    width: 22px;
    padding-left: 8px;
}

.ip-item-btn {
    cursor: pointer;
}

    .ip-item-btn:hover {
        /*background-color: #EABCBC;*/
        color: #D48409;
    }

.ip-item-namewrap {
    /* Wrapper for name part of pick item */
    width: 112px;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
}

.ip-item-filename {
    /* element displaying the filename. Hide overflowing text with ellipsis */
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    text-align: center;
    border: 1px solid antiquewhite;
}
/* ----- end of Pick List Elements ----------------------------------------- */

/* ||    end of IMAGE PICKER                                              || */
/* ========================================================================= */


/* ========================================================================= */
/* ||    DATA LINK DROPDOWN FILE PICKER - dialog to pick files for DLD    || */
/* ========================================================================= */

/* ----- Structural Elements ----------------------------------------------- */
#divDldPick_Actions {
    padding: 10px 10px 10px 10px;
    border-bottom: 1px solid #000000;
}

#divDldPick_Picker {
    height: 329px;
    padding: 10px 10px 10px 10px;
    border-bottom: 1px solid #000000;
    overflow-y: scroll;
}

#divDldPick_Validation {
    height: 54px;
    width: 645px;
    font-size: 1.2em;
    float: left;
}

#divDldPick_Buttons {
    padding: 10px 10px 10px 10px;
    float: right;
}
/* ----- end of Structural Elements ---------------------------------------- */

/* ----- Overrides for Bootstrap Buttons ----------------------------------- */
#dialog_DldPicker .btn {
    padding-left: 6px;
    padding-right: 6px;
}

    #dialog_DldPicker .btn i {
        padding-right: 8px;
    }

#dialog_DldPicker .btn-success {
    color: #FFFFFF;
}

#dialog_DldPicker .btn-danger {
    color: #FFFFFF;
}

#divDldPick_Buttons a:first-of-type {
    margin-right: 10px;
}
/* ----- end of Overrides for Bootstrap Buttons ---------------------------- */

/* ----- Positioning for Action Elements ----------------------------------- */
#divDldPick_Actions_DragDrop {
    width: 45%;
    height: 60px;
    background-color: aliceblue;
    border: 2px dashed lightsteelblue;
    border-radius: 10px;
    text-align: center;
    float: left;
}

#spanDldPick_Actions_DragDrop_Instruct {
    display: block;
    padding-top: 12px;
    margin: 0 auto;
    font-size: 12px;
}

#divDldPick_Actions_Upload {
    width: 35%;
    height: 60px;
    display: inline-block;
    text-align: center;
    padding-top: 5px;
}

#divDldPick_Actions_Uniquename {
    width: 20%;
    height: 60px;
    float: right;
    text-align: center;
    padding-top: 5px;
}

#spanDldPick_Actions_Upload_Instruct {
    display: block;
    height: 20px;
    font-size: 12px;
}

#spanDldPick_Actions_UniqueName {
    display: block;
    height: 20px;
    font-size: 12px;
}

#btnDldPick_Actions_Upload {
    width: 200px;
    margin: 0 auto;
}
/* ----- end of Positioning for Action Elements ---------------------------- */

/* ----- Positioning for Validation/Buttons -------------------------------- */
#divDldPick_Validation a {
    float: right;
    margin-right: 20px;
}

    #divDldPick_Validation a:first-of-type {
        margin-right: 0;
    }

#spanDldPick_Validation_Message {
    color: red;
    float: left;
    margin-top: 8px;
    margin-left: 8px;
}
/* ----- end of Positioning for Validation/Buttons ------------------------- */

/* ----- Pick List Elements ------------------------------------------------ */
.dp-item {
    /* Parent element for a data link dropdown file picker item */
    display: inline-block;
    background-color: antiquewhite;
    border: 1px solid antiquewhite;
    border-radius: 5px;
    margin: 5px;
    white-space: initial;
}

    .dp-item:not(.dp-selected):hover {
        /* Hover state for a non-selected item */
        background-color: aliceblue;
        border: 1px solid lightblue;
    }

.dp-selected {
    /* Additional styles for a selected item */
    border: 1px solid #6495ED;
    background-color: lightblue;
}

.dp-item-thumbwrap {
    /* Wrapper element for the thumbnail area */
    width: 112px;
    height: 70px;
    margin: 5px;
}

.dp-item-thumb {
    /* Thumbnail image. Force background image to fill size, add shadow */
    float: left;
    width: 90px;
    height: 70px;
    background-color: #FFFFFF;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    box-shadow: 1px 1px 4px 0 #AAAAAA;
}

.dp-item-buttonwrap {
    /* Wrapper for buttons in thumb area */
    display: inline-block;
    left: 90px;
    width: 22px;
    padding-left: 8px;
}

.dp-item-btn {
    cursor: pointer;
}

    .dp-item-btn:hover {
        /*background-color: #EABCBC;*/
        color: #D48409;
    }

.dp-item-namewrap {
    /* Wrapper for name part of pick item */
    width: 112px;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
}

.dp-item-filename {
    /* element displaying the filename. Hide overflowing text with ellipsis */
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    text-align: center;
    border: 1px solid antiquewhite;
}

.dp-item.table {
    border-collapse: collapse;
}

.dp-item table, .dp-item th, .dp-item td {
    border: 1px solid black;
    padding: 2px 5px 2px 5px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
}

.dp-item th {
    font-weight: bold;
    background-color: #FFE7C7;
    border-color: #987749;
}

.dp-item td {
    background-color: #FFEFDB;
    border-color: #BDA88A;
}
/* ----- end of Pick List Elements ----------------------------------------- */

/* ||    end of DATA LINK DROPDOWN FILE PICKER                            || */
/* ========================================================================= */



/* ========================================================================= */
/* ||    SEGMENT EDITOR - dialog to create/edit segment controls          || */
/* ========================================================================= */

/* ----- Structural Elements ----------------------------------------------- */
#divSegEdit_Wrapper .form-horizontal .form-group {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 8px;
}

#divSegEdit_Modes {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    border-bottom: 1px solid #000000;
    text-align: left;
}

#divSegEdit_Preview {
    padding: 10px 10px 5px 10px;
}

#divSegEdit_DragDrop {
    height: 60px;
    padding: 0 10px 10px 10px;
    border-bottom: 1px solid #000000;
}

#divSegEdit_Props {
    padding: 10px 10px 10px 10px;
    border-bottom: 1px solid #000000;
}

#divSegEdit_Validation {
    height: 54px;
    width: 750px;
    font-size: 1.2em;
    float: left;
}

#divSegEdit_Buttons {
    padding: 10px 10px 10px 10px;
    float: right;
}
/* ----- end of Structural Elements ---------------------------------------- */

/* ----- Overrides for Bootstrap Buttons ----------------------------------- */
#dialog_SegmentEditor .btn {
    padding-left: 6px;
    padding-right: 6px;
}

    #dialog_SegmentEditor .btn i {
        padding-right: 8px;
    }

#dialog_SegmentEditor .btn-success {
    color: #FFFFFF;
}

#dialog_SegmentEditor .btn-danger {
    color: #FFFFFF;
}

#divSegEdit_Buttons a:first-of-type {
    margin-right: 10px;
}
/* ----- end of Overrides for Bootstrap Buttons ---------------------------- */

/* ----- Positioning for Modes radio buttons ------------------------------- */
#divSegEdit_Modes label {
    display: inline-block;
    width: 120px;
    font-size: small;
}

#divSegEdit_Modes input {
    vertical-align: -7px;
    margin-right: 5px;
}
/* ----- end of Positioning for Modes radio buttons ------------------------ */

/* ----- Positioning for Segment Preview ----------------------------------- */
#divSegEdit_Preview ul {
    margin: 0;
}

#ulSegEdit_Preview_List {
    display: table;
    width: 100%;
    table-layout: fixed;
    color: #000000;
    border: 3px solid #339DD7;
    border-radius: 10px;
    background-color: #339DD7;
    border-spacing: 2px;
    padding-left: 0;
}

    #ulSegEdit_Preview_List li {
        cursor: move;
        display: table-cell;
        text-align: center;
        font-size: medium;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
        padding-top: 5px;
        padding-bottom: 7px;
        background-color: #FFFFFF;
    }

        #ulSegEdit_Preview_List li:first-of-type {
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }

        #ulSegEdit_Preview_List li:last-of-type {
            /* No RHS border on the last Segment */
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
        }

        #ulSegEdit_Preview_List li.selected {
            /* Additions for Segment with class "selected" */
            background-color: #339DD7;
            color: #FFFFFF;
        }

        #ulSegEdit_Preview_List li[data-default='1'] {
            /* Additions for Segment with attribute "default" having value "1" */
            box-shadow: inset 0 0 0 2px blue;
        }

        #ulSegEdit_Preview_List li:hover {
            background-color: #EDEDED;
        }

        #ulSegEdit_Preview_List li.selected:hover {
            background-color: #7FBBDC;
        }
/* ----- end of Positioning for Segment Preview ---------------------------- */

/* ----- Positioning for Drag and Drop ------------------------------------- */
#divSegEdit_DragDrop_DragForNew {
    cursor: move;
    float: left;
    width: 240px;
    height: 50px;
    background-color: #FFFFFF;
    background-image: url("../../crimsonImages/icons/icon_add_32x32.png");
    background-position: left;
    background-position-x: 5px;
    background-repeat: no-repeat;
    text-align: right;
    border: 5px solid lightblue;
    border-radius: 10px;
    padding-right: 10px;
    line-height: 40px;
}

    #divSegEdit_DragDrop_DragForNew:hover {
        background-color: #EDEDED;
    }

    #divSegEdit_DragDrop_DragForNew.disabled {
        /* Additions for Drag for New Segment Area with class "disabled" */
        background-image: url("../../crimsonImages/icons/icon_add_32x32_grey.png");
        color: grey;
        cursor: not-allowed;
    }

#divSegEdit_DragDrop_DropToTrash {
    float: right;
    width: 255px;
    height: 50px;
    background-color: #FFFFFF;
    background-image: url("../../crimsonImages/icons/icon_trash_32x32.png");
    background-position: right;
    background-repeat: no-repeat;
    border: 5px solid lightblue;
    border-radius: 10px;
    line-height: 40px;
    padding-left: 10px;
}

    #divSegEdit_DragDrop_DropToTrash:hover {
        background-color: #EDEDED;
    }

    #divSegEdit_DragDrop_DropToTrash.disabled {
        /* Additions for Drop to Trash Segment Area with class "disabled" */
        background-image: url("../../crimsonImages/icons/icon_trash_32x32_grey.png");
        color: grey;
    }

.sp-item-dragnewhelper {
    /* Element with this class is the 'dragging' item when doing drag/drop */
    height: 50px;
    width: 50px;
    border: 5px solid lightblue;
    border-radius: 10px;
    color: #000000;
    background-color: #FFFFFF;
}
/* ----- end of Positioning for Drag and Drop ------------------------------ */

/* ----- Positioning for Properties Controls ------------------------------- */
#divSegEdit_Props label {
    /* Labels within the Properties Area */
    display: inline-block;
    width: 160px;
    font-size: small;
    height: 28px;
}

#divSegEdit_Props input[type="checkbox"] {
    /* Checkboxes within the Properties Area */
    top: 2px;
    position: relative;
}

#txtSegEdit_Props_ValueText {
    width: 206px;
}

#txtSegEdit_Props_AltCaption {
    position: relative;
    top: -5px;
    margin-left: 5px;
}

#divSegEdit_Props_IconList {
    display: inline-block;
}

    #divSegEdit_Props_IconList img {
        /* Individual Icon Images within the List */
        border: 2px solid lightblue;
        margin-right: 8px;
        margin-bottom: 8px;
        padding: 3px;
        cursor: pointer;
    }

        #divSegEdit_Props_IconList img:hover {
            /* Additions for Hover State on Icons */
            background-color: lightblue;
        }

        #divSegEdit_Props_IconList img.selected {
            /* Additions for Icons with class "selected" */
            border-color: blue;
        }

.requiredField + span:after {
    color: red;
    content: "*";
    padding-left: 5px;
    font-size: 1.2em;
}
/* ----- end of Positioning for Properties Controls ------------------------ */

/* ----- Positioning for Validation/Buttons -------------------------------- */
#divSegEdit_Validation a {
    float: right;
    margin-right: 20px;
}

    #divSegEdit_Validation a:first-of-type {
        margin-right: 0;
    }

#spanSegEdit_Validation_Message {
    color: red;
    float: left;
    margin-top: 8px;
}
/* ----- end of Positioning for Validation/Buttons ------------------------- */

/* ||    end of SEGMENT EDITOR                                            || */
/* ========================================================================= */



/* ========================================================================= */
/* ||    FORM ELEMENT PREVIEWS - general preview elements                 || */
/* ========================================================================= */

/* ----- Structural Elements ----------------------------------------------- */
#canvas_control_list li {
    /* Each li is a control preview */
    padding: 5px;
}

.current_edit .form_element_container {
    /* When the form_element_container is part of the current_edit li */
    border-color: #000000;
    -webkit-box-shadow: 0 0 5px 2px rgba(47, 157, 216, 1.0), inset 0 0 1px 0 rgba(0, 0, 0, .9);
    -moz-box-shadow: 0 0 5px 2px rgba(47, 157, 216, 1.0), inset 0 0 1px 0 rgba(0, 0, 0, .9);
    box-shadow: 0 0 5px 2px rgba(47, 157, 216, 1.0), inset 0 0 1px 0 rgba(0, 0, 0, .9);
}

    .current_edit .form_element_container:hover {
        /* Hover style is same as normal style, prevents the non-current-edit hover style being applied */
        border-color: #000000;
        -webkit-box-shadow: 0 0 5px 2px rgba(47, 157, 216, 1.0), inset 0 0 1px 0 rgba(0, 0, 0, .9);
        -moz-box-shadow: 0 0 5px 2px rgba(47, 157, 216, 1.0), inset 0 0 1px 0 rgba(0, 0, 0, .9);
        box-shadow: 0 0 5px 2px rgba(47, 157, 216, 1.0), inset 0 0 1px 0 rgba(0, 0, 0, .9);
    }

.form_element_container {
    /* Container for everything in a preview control: preview, formula, delete */
    border: 1px solid #777777;
    border-radius: 5px;
    display: table;
    cursor: pointer;
    background-color: #FFFFFF;
    word-wrap: break-word;
}

    .form_element_container:hover {
        /* Similar to current-edit style, but lessened in impact */
        -webkit-box-shadow: 0 0 1px 1px rgba(47, 157, 216, 0.75), inset 0 0 1px 0 rgba(0, 0, 0, .9);
        -moz-box-shadow: 0 0 1px 1px rgba(47, 157, 216, 0.75), inset 0 0 1px 0 rgba(0, 0, 0, .9);
        box-shadow: 0 0 1px 1px rgba(47, 157, 216, 0.75), inset 0 0 1px 0 rgba(0, 0, 0, .9);
    }

    .form_element_container.validationError {
        /* Background color changes when validation errors occur */
        /*background-color: orangered;*/
        background-color: #F3AA8F;
    }

.form_element_preview {
    /* Container for the preview content */
    width: 100%;
    display: table-cell;
    /*padding: 5px;*/
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.form_element_delete {
    /* Button to delete Control */
    display: table-cell;
    vertical-align: middle;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 4px;
    font-size: 18px;
    border-left: 1px solid #777777;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    background-color: #F3E7E7;
    color: #661818;
}

    .form_element_delete:hover {
        background-color: #F3D1D1;
        color: #AF2A2A;
    }

    .form_element_delete i::before {
        top: 3px;
    }


.form_element_readonly {
    /* Button to readonly Control */
    display: table-cell;
    vertical-align: middle;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 4px;
    font-size: 18px;
    border-left: 1px solid #777777;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    background-color: lightgray;
    color: lightgray;
}

    .form_element_readonly:hover {
        background-color: lightgray;
        color: lightgray;
    }

    .form_element_readonly i::before {
        top: 3px;
    }
/* ----- end of Structural Elements ---------------------------------------- */

/* ----- Control Preview Basic Styles -------------------------------------- */
.form_element_indicators {
    border-bottom: 1px solid #000000;
    line-height: initial;
    /* height: 19px; WWNOTE removed cos not showing bottom border on indicators may want to just increase size */
}

.form_element_indicator {
    width: 33%;
    border-right: solid 1px #000000;
    text-align: center;
    position: relative;
    margin-bottom: 0px;
    margin-top: 0px;
    /*font-size: 10px;*/
    /*line-height: 14px;*/
    cursor: pointer;
}

    .form_element_indicator:first-child {
        border-top-left-radius: 4px;
    }

    .form_element_indicator:last-child {
        border-right: 0px;
        width: 34%;
    }

    .form_element_indicator.indicator-active {
        background-color: #B7E5FD;
        color: #299DD7;
    }

    .form_element_indicator.indicator-inactive {
        background-color: #F0F8FF;
        color: #BFBFBF;
    }

.form_element_preview .form-group {
    margin-bottom: 0;
    padding-left: 5px;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
}

.form_element_preview .control-label {
    font-size: 12px;
    cursor: pointer;
}

.ctrlPreview-caption {
    margin-bottom: 0px;
}

    .ctrlPreview-caption.width-portrait {
        max-width: 282px;
    }

    .ctrlPreview-caption.width-landscape {
        max-width: 562px;
    }
/* ----- end of Control Preview Basic Styles ------------------------------- */

/* ----- Drag And Drop Helper ---------------------------------------------- */
.helper_container {
    border: 1px solid #000000;
    color: #000000;
    display: block;
    padding: 6px;
    margin: 0 0 10px 0;
    background: #FFFFFF;
    width: 145px;
    z-index: 15000;
}

.ui-state-highlight {
    border: 2px dashed #CCCCCC;
    color: #000000;
    display: block;
    /*margin: 0 0 10px;*/
    padding: 20px;
    background: #EEEEEE;
}
/* ----- end of Drag And Drop Helper --------------------------------------- */

/* ----- Header: Preview --------------------------------------------------- */
.form_element_preview .control-label.font-16 {
    font-size: 16px;
}
/* ----- end of Header: Preview -------------------------------------------- */

/* ----- Line: Preview ----------------------------------------------------- */
.canvas_hr {
    margin-top: 5px;
    margin-bottom: 5px;
    border: none;
    height: 5px;
    background-color: darkgrey;
}
/* ----- end of Line: Preview ---------------------------------------------- */

/* ----- Page Break: Preview ----------------------------------------------- */
.pagebreak-button {
    float: right;
    margin-top: 5px;
    margin-bottom: 5px;
}

.pagebreak-preview-left {
    float: left;
    width: 9px;
    height: 12px;
    background: url("../../../images/pagebreakLeft.png") no-repeat;
}

.pagebreak-preview-middle {
    margin-left: 9px;
    margin-right: 4px;
    height: 12px;
    background: url("../../../images/pagebreakMiddle.png") repeat-x;
}

.pagebreak-preview-right {
    float: right;
    width: 4px;
    height: 12px;
    background: url("../../../images/pagebreakRight.png") no-repeat;
}
/* ----- Page Break: Preview ----------------------------------------------- */

/* ----- Signature: Preview ------------------------------------------------ */
.signature-box-preview {
    background: url("../../crimsonImages/signatureBoxBg.png") no-repeat left 10px bottom 2px;
    height: 40px;
    width: 220px;
}
/* ----- end of Signature: Preview ----------------------------------------- */

/* ----- Data Link Dropdown: Preview --------------------------------------- */
.ctrlPreview-dldPreviewWrap {
    padding-top: 5px;
}

.ctrlPreview-dldIcon {
    float: left;
    width: 36px;
}

    .ctrlPreview-dldIcon label {
        margin: auto 0;
        cursor: pointer;
    }

.ctrlPreview-dldDetailsWrap {
    float: left;
    padding-top: 1px;
    padding-left: 5px;
}

    .ctrlPreview-dldDetailsWrap label {
        font-size: 11px;
        margin-bottom: 0;
        cursor: pointer;
    }

.ctrlPreview-dldDetailsDataParent {
    line-height: 16px;
}

.ctrlPreview-dldDetailsDataField {
    line-height: 16px;
}
/* ----- end of Data Link Dropdown: Preview -------------------------------- */

/* ----- Segment: Preview -------------------------------------------------- */
.segmentPreview {
    margin-top: 5px;
}

.segPreviewList {
    display: table;
    width: 100%;
    table-layout: fixed;
    color: #000000;
    border: 3px solid #339DD7;
    border-radius: 10px;
    background-color: #339DD7;
    border-spacing: 2px;
    padding-left: 0;
}

.segPreviewListItem {
    display: table-cell;
    text-align: center;
    font-size: medium;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    padding-top: 5px;
    padding-bottom: 7px;
    background-color: #FFFFFF;
}

    .segPreviewListItem:first-of-type {
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }

    .segPreviewListItem:last-of-type {
        /* No RHS border on the last Segment */
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }
/* ----- end of Segment: Preview ------------------------------------------- */

/* ----- Barcode: Preview -------------------------------------------------- */
.barcode_footnote {
    font-size: 12px;
    margin-top: 10px;
    display: block;
}
/* ----- end of Barcode: Preview ------------------------------------------- */

/* ----- Photo: Preview ---------------------------------------------------- */
.photo_footnote {
    font-size: 12px;
    margin-top: 10px;
    display: block;
}
/* ----- end of Photo: Preview ------------------------------------------- */

/* ----- Options and Multiselect: Preview ---------------------------------- */
input[type=checkbox].ctrlPreview-checkbox {
    margin-top: 5px;
    cursor: pointer;
    pointer-events: none;
}

.form-group input[type=radio].radio-preview {
    /* Ignore any 'overqualified' warnings, this is required to override bootstrap styles */
    position: inherit;
    height: 20px;
    width: 20px;
    margin-right: 10px;
    margin-top: 4px;
    margin-bottom: 4px;
    vertical-align: middle;
    cursor: pointer;
    pointer-events: none;
}

.form-group input[type=checkbox].checkbox-preview {
    /* Ignore any 'overqualified' warnings, this is required to override bootstrap styles */
    position: inherit;
    height: 20px;
    width: 20px;
    margin-right: 10px;
    margin-top: 4px;
    margin-bottom: 4px;
    vertical-align: middle;
    cursor: pointer;
}

.form-group .radio {
    margin-top: 0;
    margin-bottom: 0;
}

.form-group .checkbox {
    margin-top: 0;
    margin-bottom: 0;
}

.ctrlPreview-radioButtons {
    margin-top: 5px;
}

.ctrlPreview-checkBoxes {
    margin-top: 5px;
}
/* ----- end of Options and Multiselect: Preview --------------------------- */

/* ----- Number: Preview --------------------------------------------------- */
.form-group .number-preview {
    /*height: 24px;*/
    width: 50%;
    /*min-width: 120px;*/
}
/* ----- end of Number: Preview -------------------------------------------- */

/* ----- Time: Preview ----------------------------------------------------- */
.form-group .time-hour-preview {
    width: 15%;
    display: inline;
}

.form-group .time-minute-preview {
    width: 15%;
    display: inline;
}

.form-group .time-separator {
    padding-left: 5px;
    padding-right: 5px;
}
/* ----- end of Time: Preview ---------------------------------------------- */

/* ----- Date: Preview ----------------------------------------------------- */
.form-group .date-day-preview {
    width: 15%;
    display: inline;
}

.form-group .date-month-preview {
    width: 15%;
    display: inline;
}

.form-group .date-year-preview {
    width: 20%;
    display: inline;
}

.form-group .date-separator {
    padding-left: 5px;
    padding-right: 5px;
}
/* ----- end of Date: Preview ---------------------------------------------- */

/* ----- Image and Formatted Label: Preview -------------------------------- */
.ctrlPreview-imageWrap {
    width: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    margin-top: 5px;
}

.imgCtrlPreview {
    display: block;
    visibility: hidden;
    max-width: 100%;
}

.imageAlign_left {
    background-position: center left;
}

.imageAlign_centre {
    background-position: center center;
}

.imageAlign_right {
    background-position: center right;
}
/* ----- end of Image and Formatted Label: Preview ------------------------- */

/* ----- Button-based previews --------------------------------------------- */
.ctrlPreviewButton {
    margin-top: 5px;
}
/* ----- end of Button-based previews -------------------------------------- */

/* ----- Textbox-based previews -------------------------------------------- */
textarea.form-control.ctrlPreview-textarea {
    height: auto;
    min-height: 24px;
}

.signature-box-preview {
    margin-top: 5px;
}

.ctrlPreview-textarea {
    line-height: 1.8;
    margin-top: 5px;
}

.ctrlPreview-textarea-readonly {
    background-color: #FFFFFF;
    opacity: 1;
}

    .ctrlPreview-textarea-readonly:disabled:read-only {
        background-color: #EEEEEE;
        cursor: pointer;
    }

    .ctrlPreview-textarea-readonly:disabled[readonly] {
        background-color: #EEEEEE;
        cursor: pointer;
    }

    .ctrlPreview-textarea-readonly:disabled {
        background-color: #FFFFFF;
        cursor: pointer;
    }
/* ----- end of Textbox-based previews ------------------------------------- */

/* ----- Select-based previews --------------------------------------------- */
/*input[type=checkbox].ctrlPreview-checkbox*/
select.form-control.ctrlPreview-select {
    margin-top: 5px;
    cursor: pointer;
}
/* ----- end of Select-based previews -------------------------------------- */

/* ----- Icon-based previews ----------------------------------------------- */
.ctrlPreview-iconWrap {
    margin-top: 5px;
    display: block;
}
/* ----- end of Icon-based previews ---------------------------------------- */

/* ||    end of FORM ELEMENT PREVIEWS                                     || */
/* ========================================================================= */



/* ========================================================================= */
/* ||    PROPERTY PANELS AND CONTROLS - general input controls            || */
/* ========================================================================= */
.form-horizontal .control-label {
    font-size: 12px;
    padding-top: 5px;
}

.form-control {
    font-size: 12px;
    height: 24px;
    padding: 0 0 0 6px;
}

.unique {
    height: 28px !important;
}

.form-control.ctrlPreviewButton {
    /* Buttons in the Preview area */
    padding-top: 4px;
    font-weight: bold;
    white-space: normal;
    height: 100%;
}

.element_properties {
    /* All Property Panels are initially hidden */
    display: none;
}

    .element_properties.current_edit_props {
        /* The Property Panel marked current_edit_props is displayed */
        display: block;
    }

/* ----- Radio Buttons and Checkboxes -------------------------------------- */
input[type=checkbox] {
    height: 24px;
    width: 24px;
    margin: 0;
}

input[type=radio] {
    height: 24px;
    width: 24px;
    margin: 0;
}
/* ----- Radio Buttons and Checkboxes -------------------------------------- */

/* ----- Date and Time Pickers --------------------------------------------- */
.ui-datepicker-calendar, .ui-datepicker-header {
    border: 2px solid #AAAAAA;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding: 10px;
    box-shadow: 0 6px 6px #888888;
}

#ui-datepicker-div {
    /* Ignore warnings about '!important', this is necessary */
    z-index: 3 !important;
}

#ui-timepicker-div {
    /* Ignore warnings about '!important', this is necessary */
    z-index: 3 !important;
}
/* ----- end of Date and Time Pickers -------------------------------------- */

/* ----- Text Areas -------------------------------------------------------- */
textarea {
    overflow: auto;
    height: 50px;
    resize: none;
}
/* ----- end of Text Areas ------------------------------------------------- */

/* ----- Sketch Background property ---------------------------------------- */
.btnImagePickerWrap {
    float: left;
    width: 50%;
}

.sketchBgImgBtn {
    float: left;
    margin-bottom: 10px;
}

.sketchbg-imgThumb {
    /* Thumbnail image. Force background image to fill size, add shadow */
    display: block;
    float: left;
    /*margin-left: 40px;*/
    width: 90px;
    height: 70px;
    background-color: #FFFFFF;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    box-shadow: 1px 1px 4px 0 #AAAAAA;
}
/* ----- end of Sketch Background property --------------------------------- */

.propval_fieldItemsList {
    /* Mutiline entry boxes for Dropdown/Options/Multiselect entries */
    overflow-y: scroll;
}
/* ||    end of FORM ELEMENT PREVIEWS                                     || */
/* ========================================================================= */



/* ========================================================================= */
/* ||    FORM AJAX GREYING OUT - fade form while saving/etc               || */
/* ========================================================================= */
.formdesigner_greyout {
    position: fixed;
    background: url("../../crimsonImages/transparent_dark.png");
    width: 100%;
    height: 5000px;
    overflow: hidden;
    top: 0;
    left: 0;
}

#formdesigner_save_processing_containermessage {
    z-index: 7000000;
}

#formdesigner_save_processing_container {
    z-index: 400000;
}

#formdesigner_save_processing {
    background: url("../../crimsonImages/preview.gif") no-repeat scroll 25px 15px #FFFFFF;
    border: 1px solid #1667A5;
    color: #1667A5;
    height: 60px;
    width: 260px;
    position: relative;
    top: 200px;
    left: 50%;
    margin-left: -135px;
    margin-top: -15px;
    padding: 22px 0 0;
    font-size: 14px;
    text-align: center;
    z-index: 100000000005;
}
/* ||    end of FORM AJAX GREYING OUT                                     || */
/* ========================================================================= */


/* ----- Idle Warning Timer Dialog ----------------------------------------- */
.divIdleWarning_Text {
    padding: 10px;
    text-align: center;
}

/* ----- end of Idle Warning Timer Dialog ---------------------------------- */
/* ----- Add this class to hide something ---------------------------------- */
.addNoDisplay {
    /* Ignore warnings about '!important', this is necessary */
    display: none !important;
}
/* ----- end of Add this class to hide something --------------------------- */

/* ----- Beta Disclaimer, not currently used ------------------------------- */
#betadisclaimer {
    position: fixed;
    left: 23%;
    top: 12px;
    width: 60%;
    height: auto;
    border: 4px solid #1B5A7C;
    background-color: #2F9DD8;
    color: white;
    padding: 2px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    -webkit-box-shadow: 0 0 14px 0 rgba(255, 255, 255, 1);
    -moz-box-shadow: 0 0 14px 0 rgba(255, 255, 255, 1);
    box-shadow: 0 0 14px 0 rgba(255, 255, 255, 1);
}

    #betadisclaimer a {
        color: white;
        font-weight: bold;
        text-decoration: underline;
    }
/* ----- end of Beta Disclaimer, not currently used ------------------------ */

#colorbox.script-cbox #cboxClose {
    visibility: hidden;
}

#colorbox.script-cbox div,
#colorbox.script-cbox iframe {
    background-color: transparent !important;
}

#colorbox.script-cbox > #cboxWrapper > div > div:not(#cboxContent) {
    width: 0;
    height: 0;
}