/* ========================================================================= */
/* ||    MAIN FORM LAYOUT                                                 || */
/* ========================================================================= */

/* Layout is determined by divs, as follows:                                 */

/*   +======================divContainer_Bootstrap========================+  */
/*   | +================================================================+ |  */
/*   | |                    divContainer_Nav                            | |  */
/*   | +================================================================+ |  */
/*   | +================================================================+ |  */
/*   | |                                                                | |  */
/*   | |                    divContainer_Main                           | |  */
/*   | |                                                                | |  */
/*   | +================================================================+ |  */
/*   | +================================================================+ |  */
/*   | |                    divContainer_Footer                         | |  */
/*   | +================================================================+ |  */
/*   +====================================================================+  */

/* The layout of divContainer_Nav:                                           */
/*   +===============divContainer_Nav=====================================+  */
/*   | +=============================================+ +================+ |  */
/*   | |                                             | |                | |  */
/*   | |        divNav_Icons                         | |  divNav_User   | |  */
/*   | |                                             | |                | |  */
/*   | +=============================================+ +================+ |  */
/*   +====================================================================+  */

/* The layout of divContainer_Main:                                          */
/*   +===============divContainer_Main====================================+  */
/*   | +=================+ +============================================+ |  */
/*   | |                 | |          divMain_RowWrapper                | |  */
/*   | | divMain_Toolbox | | +========================================+ | |  */
/*   | |                 | | |        divMain_CommandRow              | | |  */
/*   | |                 | | +========================================+ | |  */
/*   | |                 | | +========================================+ | |  */
/*   | |                 | | |        divMain_CanvasPropsRow          | | |  */
/*   | |                 | | | +================+ +=================+ | | |  */
/*   | |                 | | | | divMain_Canvas | |  divMain_Props  | | | |  */
/*   | |                 | | | +================+ +=================+ | | |  */
/*   | |                 | | +========================================+ | |  */
/*   | +=================+ +============================================+ |  */
/*   +====================================================================+  */

/* The layout of divContainer_Footer:                                        */
/*   +======================divContainer_Nav==============================+  */
/*   | +=======================================+ +======================+ |  */
/*   | |                                       | |                      | |  */
/*   | |          divFooter_Links              | |   divFooter_Social   | |  */
/*   | |                                       | |                      | |  */
/*   | +=======================================+ +======================+ |  */
/*   +====================================================================+  */

/*html, body {
    height: 100%;
}*/

/* ----- Outer Layer Containers -------------------------------------------- */
#divContainer_Nav {
    /* Container for the Navigation: Icons and User Control */
    background-color: #FFFFFF;
    border-bottom: 5px solid #299DD7;
    color: #299DD7;
}

#divContainer_Main {
    /* Container for the Main Content */
    background-color: #f2f2f2;
}

#divContainer_Footer {
    /* Container for the Footer */
    background-color: #299DD7;
    padding-top: 3px;
    padding-bottom: 3px;
}
/* ----- End of Outer Layer Containers ------------------------------------- */

/* ----- Inner Layer Containers - Nav -------------------------------------- */
@media (min-width: 992px) {
    #divNav_Icons {
        background-image: url("/crimsonImages/themes/wm/workmobile_logo_new.png");
        background-repeat: no-repeat;
        background-position: 0;
    }
}

#divNav_Icons {
    /* Logo and Icons */
    height: 70px;
}

#divNav_User {
    /* User name, credits, and config settings */
    border-left: 2px solid #299DD7;
    height: 70px;
    text-align: right;
    font-size: 11px;
    padding-right: 0;
    padding-left: 5px;
}

#divNav_User_InfoSection {
    float: left;
    padding-top: 5px;
}

#divNav_User_IconsSection {
    float: right;
    border-left: 2px solid #299DD7;
    width: 36px;
    height: 100%;
}
/* ----- Inner Layer Containers - Main ------------------------------------- */
#divMain_Toolbox {
    /* Toolbox area */
    background-color: #f2f2f2;
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
}

#divMain_CommandRow {
    /* Row for the Command area */
    background-color: #FFEEDC;
    /*padding-top: 10px;*/
    /*padding-bottom: 10px;*/
}

#divMain_CommandRow_Errors .panel-leftbody {
    padding: 0;
}

#divMain_CanvasPropsRow {
    /* Row for the Canvas and Properties areas */
    background-color: #F4FAFD;
}

#divMain_Canvas {
    /* Canvas area */
    background-color: #F4FAFD;
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
}

#divMain_Props {
    /* Properties area */
    background-color: #F4FAFD;
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
}
/* ----- Inner Layer Containers - Nav -------------------------------------- */
#divFooter_Links {
    /* Links within the Footer */
    text-align: center;
}

#divFooter_Social {
    /* Social Icons within the Footer */
    text-align: right;
}
/* ----- end of Inner Layer Containers ------------------------------------- */

/* ----- Command Row, no Errors modification ------------------------------- */
#divMain_CommandRow.noErrors {
    background-color: #f2f2f2;
}

    #divMain_CommandRow.noErrors .panel-wm-errors {
        border-color: #59BD5C;
    }

        #divMain_CommandRow.noErrors .panel-wm-errors > .panel-heading {
            border-right: #59BD5C;
            background-color: #59BD5C;
        }
/* ----- end of Command Row, no Errors modification ------------------------ */

/* ||    end of MAIN FORM LAYOUT                                          || */
/* ========================================================================= */



/* ========================================================================= */
/* ||    NAVIGATION                                                       || */
/* ========================================================================= */

/* ----- Navigation Icons -------------------------------------------------- */
@media (min-width: 992px) {
    #ulNavIcons {
        padding-left: 200px;
    }
}

#ulNavIcons {
    /* Basic Unordered List */
    /* Display as a full-width table, padded on the left to prevent obscuring the logo */
    /* Padding on the top allows icons to expand*/
    display: table;
    width: 100%;
    padding-top: 10px;
}

    #ulNavIcons li {
        /* List Elements, each is a nav icon */
        /* Display as a table-cell within the parent (ul) table */
        /* This ensures responsive spacing, and full horizontal utilisation */
        display: table-cell;
        text-align: center;
    }

        #ulNavIcons li a {
            color: #299DD7;
        }

        #ulNavIcons li i {
            /* List Element, icon portion */
            /* Icon is a Custom Font Crimson_Main-Menu style applied to an (i) element */
            /* These styles position the element centrally, with a sensible width */
            display: block;
            width: 70px;
            margin: 0 auto;
            /* When the (i) element transforms, transition it in 0.25s, with ease-in speed curve */
            -webkit-transition: transform 0.25s ease-in 0s;
            -moz-transition: transform 0.25s ease-in 0s;
            -o-transition: transform 0.25s ease-in 0s;
            transition: transform 0.25s ease-in 0s;
        }

        #ulNavIcons li span {
            /* List Element, text portion */
            /* Initially hidden and transparent, this changes on hover */
            visibility: hidden;
            opacity: 0;
            font-size: 14px;
            font-weight: bold;
            text-transform: uppercase;
            color: #299DD7;
            /* When the span element changes visibility, or opacity, apply these transitions */
            -webkit-transition: visibility 0s linear 0.5s, opacity 0.5s linear;
            -moz-transition: visibility 0s linear 0.5s, opacity 0.5s linear;
            -o-transition: visibility 0s linear 0.5s, opacity 0.5s linear;
            transition: visibility 0s linear 0.5s, opacity 0.5s linear;
        }

        #ulNavIcons li:hover a {
            /* Hover style for the entire (a) element, containing icon and text */
            /* Prevent underlining of text in a hovered (a) element */
            text-decoration: none;
        }

        #ulNavIcons li:hover i {
            /* Hover styles for the List Item Icon Portion */
            /* Apply a transform by scaling to 125%, from the center bottom */
            -webkit-transform-origin: center bottom;
            -moz-transform-origin: center bottom;
            -o-transform-origin: center bottom;
            -ms-transform-origin: center bottom;
            transform-origin: center bottom;
            -webkit-transform: scale(1.25);
            -moz-transform: scale(1.25);
            -o-transform: scale(1.25);
            -ms-transform: scale(1.25);
            transform: scale(1.25);
        }

        #ulNavIcons li:hover span {
            /* Hover styles for the List Item Text Portion */
            /* Make it visible, and opaque, with no delay on the transition effect */
            visibility: visible;
            opacity: 1;
            transition-delay: 0s;
        }
/* ----- end of Navigation Icons ------------------------------------------- */

/* ----- User Control ------------------------------------------------------ */
.userSectionInfo {
    text-align: left;
}

    .userSectionInfo i {
        width: 12px;
        text-align: center;
    }

    .userSectionInfo span {
        padding-left: 5px;
    }

#ulUserSectionIcons {
    width: 100%;
    margin-bottom: 0;
    height: 100%;
}

    #ulUserSectionIcons li {
        text-align: center;
        height: 50%;
        padding-top: 5px;
    }

        #ulUserSectionIcons li:hover {
            background-color: #C7EAF5;
        }

        #ulUserSectionIcons li:first-child {
            padding-bottom: 5px;
            border-bottom: 1px solid #299DD7;
        }

        #ulUserSectionIcons li:last-child {
            padding-top: 7px;
        }
/* ----- end of User Control ----------------------------------------------- */

/* ||    end of NAVIGATION                                                || */
/* ========================================================================= */



/* ========================================================================= */
/* ||    FOOTER                                                           || */
/* ========================================================================= */

/* ----- Footer Elements --------------------------------------------------- */
.footer_link {
    /* Link in the main footer part */
    padding-right: 20px;
    font-size: 11px;
    color: #FFFFFF;
}

    .footer_link:last-child {
        /* Last link does not pad right */
        padding-right: 0;
    }

    .footer_link:hover {
        /* Hover state for a main footer link */
        color: #1B5A7C;
        text-decoration: none;
    }

.footer_sociallink {
    /* Link in the Social Media part of the footer */
    padding-right: 10px;
}

    .footer_sociallink:last-child {
        /* Last link does not pad right */
        padding-right: 0;
    }
/* ----- end of Footer Elements -------------------------------------------- */

/* ||    end of FOOTER                                                    || */
/* ========================================================================= */



/* ========================================================================= */
/* ||    PANELS - used in Command/Toolbox/Properties areas                || */
/* ========================================================================= */

/* ----- Base Panel -------------------------------------------------------- */
.panel-wm {
    border: 1px solid transparent;
    margin-bottom: 20px;
    background-color: #FFFFFF;
}

.panel-heading {
    padding: 5px 5px 5px 10px;
    font-weight: bold;
}
/* ----- end of Base Panel ------------------------------------------------- */

/* ----- Left Panel: a panel laid out horizontally, with header on left ---- */
.panel-leftheading {
    /* Pushes the Header of the Panel to float left with a fixed width */
    float: left;
    height: 100%;
    width: 42px;
}

    .panel-leftheading > i {
        /* Fixes the icon into the correct position in the header */
        display: table-cell;
        vertical-align: middle;
        padding-left: 6px;
    }

.panel-leftbody {
    /* Pushes the Body content to give margin space for the header. Adds scroll */
    margin-left: 45px;
    height: 100%;
    overflow-y: scroll;
    padding: 5px;
}
/* ----- end of Left Panel ------------------------------------------------- */

/* ----- Panel Additions for Toolbox --------------------------------------- */
.panel-wm-toolbox {
    /* Toolbox Panels are green with a slight shadow */
    border-color: #59BD5C;
    -moz-box-shadow: 1px 1px 2px 0 #83DC86;
    -webkit-box-shadow: 1px 1px 2px 0 #83DC86;
    /* h-shadow v-shadow blur spread color */
    box-shadow: 1px 1px 2px 0 #83DC86;
}

    .panel-wm-toolbox > .panel-heading {
        /* Toolbox Panels have a green header with white text */
        border-radius: 0;
        border-bottom: 1px solid #59BD5C;
        color: #FFFFFF;
        background-color: #59BD5C;
    }

    .panel-wm-toolbox > .panel-body {
        /* Toolbox Panels pad content at 10px */
        padding: 5px;
    }
/* ----- end of Panel Additions for Toolbox -------------------------------- */

/* ----- Panel Header in the Properties Area ------------------------------- */
.properties_header {
    height: 36px;
}

.properties_header_iconwrap {
    display: inline-block;
    position: relative;
    top: 0;
    width: 28px;
    height: 28px;
}

.properties_header_text {
    font-size: 16px;
    font-weight: bold;
    padding-left: 10px;
    position: absolute;
    line-height: 36px;
}
/* ----- end of Panel Header in the Properties Area ------------------------ */

/* ----- Panel Additions for Properties ------------------------------------ */




    .panel-wm-props > .panel-body {
        /* Properties Panels pad content at 10px */
        padding: 0;
    }

    .panel-wm-props .panel-body .form-group {
        margin-right: 0;
        margin-bottom: 0;
        margin-left: 0;
        padding-top: 8px;
        padding-bottom: 7px;
    }

        .panel-wm-props .panel-body .form-group .control-label {
            padding-right: 0;
            padding-left: 5px;
        }

        .panel-wm-props .panel-body .form-group.validationError {
            background-color: orangered;
            background-color: #F3AA8F;
        }
/* ----- end of Panel Additions for Properties ----------------------------- */

/* ----- Panel Additions for Errors ---------------------------------------- */
.panel-wm-errors {
    /* Errors panel is orange with no shadow. Has a fixed height. */
    border-color: orangered;
    margin-bottom: 0;
    height: 60px;
}

    .panel-wm-errors > .panel-heading {
        /* Errors panel has an orange header with a white icon */
        border-radius: 0;
        border-right: 1px solid orangered;
        color: #FFFFFF;
        background-color: orangered;
        display: table;
        padding: 0;
    }

        .panel-wm-errors > .panel-heading i::before {
            top: 0px;
        }
/* ----- end of Panel Additions for Errors --------------------------------- */

/* ||    end of PANELS                                                    || */
/* ========================================================================= */



/* ========================================================================= */
/* ||    BUTTONS - overrides for bootstrap buttons                        || */
/* ========================================================================= */
a.btn {
    /* Spacing between text */
    padding-left: 6px;
    padding-right: 6px;
}

    a.btn i {
        /* Spacinb between text and icon */
        padding-right: 8px;
    }

span.btn {
    /* Spacing between left and right edges and content*/
    padding-left: 6px;
    padding-right: 6px;
}

    span.btn i {
        /* Spacing between icon and text */
        padding-right: 8px;
    }

.dropdown-menu > li > a {
    cursor: pointer;
}

.dropdown-menu > li > span {
    padding-left: 12px;
    cursor: pointer;
}

.btn-crimson-80 {
    width: 80px;
}

.btn-crimson-95 {
    width: 95px;
}

.btn-crimson-130 {
    width: 130px;
}

.crimson-props-icon {
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    vertical-align: -4px;
    font-size: 1.33333333em;
}
/* ||    end of BUTTONS - overrides for bootstrap buttons                 || */
/* ========================================================================= */



/* ========================================================================= */
/* ||    TOOLBOX - elements used in the Toolbox                           || */
/* ========================================================================= */
.toolbox_element {
    /* Ensures icons are spaced and sized correctly */
    display: inline-block;
    padding: 8px;
    cursor: pointer;
}

    .toolbox_element:hover {
        /* Hover style */
        background-color: #DCF9DD;
        color: #0F7312;
        /*color: #59BD5C;*/
    }
/* ||    end of TOOLBOX                                                   || */
/* ========================================================================= */



/* ========================================================================= */
/* ||    COMMAND ROW - elements used in the Command Area                  || */
/* ========================================================================= */
#divMain_CommandRow_Errors {
    /* Add padding for layout */
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 60%;
    display: inline-block;
}

#divMain_CommandRow_Buttons {
    padding-right: 0;
    padding-left: 20px;
    padding-top: 10px;
    padding-right: 10px;
    min-width: 200px;
    width: 40%;
    float: right;
}

#divMain_CommandRow_Buttons_Title {
    font-weight: bold;
}

#spanMain_CommandRow_Buttons_Title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#divDesignerCommand_Buttons {
    /* Fixed height, table display centres buttons */
    height: 45px;
    display: table;
}

    #divDesignerCommand_Buttons > ul {
        /* Centre buttons vertically */
        padding: 0;
        display: table-cell;
        vertical-align: middle;
    }

    #divDesignerCommand_Buttons li {
        /* Float individual buttons, and spacing */
        float: left;
        padding-right: 10px;
    }

        #divDesignerCommand_Buttons li:last-child {
            /* Last button does not require right padding */
            float: left;
            padding-right: 10px;
        }

#ulMain_CommandRow_Errors_List li:not(.no_errors_message) {
    cursor: pointer;
}

    #ulMain_CommandRow_Errors_List li:not(.no_errors_message):hover {
        background-color: palegoldenrod;
    }
/* ||    end of COMMAND ROW                                               || */
/* ========================================================================= */



/* ========================================================================= */
/* ||    CANVAS AREA - elements making up the Canvas and Controls         || */
/* ========================================================================= */

/* ----- Canvas Designer Area ---------------------------------------------- */
#canvas_holder {
    /* The dark border simulates the bezel of a device */
    width: 400px;
    margin: 0 auto;
    padding: 18px;
    border: 2px solid #E2E2E2;
    border-radius: 10px;
    background-color: #4A4A4A;
    box-shadow: 0 10px 12px #494949;
}

#canvas_surface {
    /* Surface simulates the screen of a device */
    background-color: #DDDDDD;
    width: 360px;
    height: 640px;
    overflow-x: hidden;
    overflow-y: scroll;
}

#canvas_control_list {
    /* This is the list of controls on the canvas. Set min-height to scroll */
    min-height: 605px;
    padding-bottom: 35px;
}
/* ----- End of Canvas Designer Area --------------------------------------- */

/* ----- Canvas Controls Area ---------------------------------------------- */
#canvas_controlbox {
    /* Floating Control Panel, fixed width with border */
    width: 36px;
    background-color: #D5ECF7;
    border: 1px dashed #000000;
    z-index: 10;
}

#canvas_controlbox > i {
    /* Placing of individual buttons within Canvas Control Panel */
    padding-top: 4px;
    padding-left: 4px;
    padding-bottom: 4px;
    display: inline-block;
    cursor: pointer;
}

#btnDesignerCommand_ToggleControlDisplay {
    padding-top: 8px !important;
}

        #canvas_controlbox > i:hover {
            color: #299DD7;
        }

        #canvas_controlbox > i::before {
            top: 4px;
        }
/* ----- End of Canvas Controls Area --------------------------------------- */

/* ||    end of CANVAS AREA                                               || */
/* ========================================================================= */



/* ========================================================================= */
/* ||    PROPERTIES VALIDATION - property validation messages             || */
/* ========================================================================= */

/* ----- Properties Validation message wrapper ----------------------------- */
#divClientValidationMessage {
    background-color: palegoldenrod;
    display: inline;
    border: 2px solid orangered;
    border-radius: 5px;
    padding: 3px 8px 3px 8px;
    z-index: 10;
    visibility: hidden;
}

.triangle-border {
    position: relative;
    padding: 15px;
    margin: 1em 0 3em;
    border: 5px solid #5a8f00;
    color: #333;
    background: #fff;
    /* css3 */
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

    .triangle-border.right {
        margin-right: 30px;
    }

    .triangle-border:before {
        content: "";
        position: absolute;
        /* value = - border-top-width - border-bottom-width */
        bottom: -20px;
        /* controls horizontal position */
        left: 40px;
        border-width: 20px 20px 0;
        border-style: solid;
        border-color: #5A8F00 transparent;
        /* reduce the damage in FF3.0 */
        display: block;
        width: 0;
    }

    .triangle-border:after {
        /* creates the smaller triangle */
        content: "";
        position: absolute;
        /* value = - border-top-width - border-bottom-width */
        bottom: -13px;
        /* value = (:before left) + (:before border-left) - (:after border-left) */
        left: 47px;
        border-width: 13px 13px 0;
        border-style: solid;
        border-color: #FFFFFF transparent;
        /* reduce the damage in FF3.0 */
        display: block;
        width: 0;
    }

    .triangle-border.right:before {
        /* creates the larger triangle */
        /* controls vertical position */
        top: 3px;
        bottom: auto;
        left: auto;
        /* value = - border-left-width - border-right-width */
        right: -20px;
        border-width: 8px 0 8px 20px;
        border-color: transparent orangered;
    }

    .triangle-border.right:after {
        /* creates the smaller triangle */
        /* value = (:before top) + (:before border-top) - (:after border-top) */
        top: 5px;
        bottom: auto;
        left: auto;
        /* value = - border-left-width - border-right-width */
        right: -16px;
        border-width: 6px 0 6px 16px;
        border-color: transparent palegoldenrod;
    }
/* ----- End of Properties Validation message wrapper ---------------------- */

/* ||    end of PROPERTIES VALIDATION                                     || */
/* ========================================================================= */

.propval_formula {
    cursor: pointer;
    background-color: white !important;
}