/*
 * Copyright (C) 2002-2025 Lightfoot Solutions Group Ltd.
 */

/*
 * =============================================================================
 * The default font.
 * =============================================================================
 */
 a, body, button, input, select, table td, textarea {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:   15px;
    font-weight: 500;
}

/*
 * =============================================================================
 * Checkboxes.
 * =============================================================================
 */
checkbox {
    margin-top: 4px;
}

/*
 * =============================================================================
 * Drop-downs.
 * =============================================================================
 */
select {
    border-color:  #9796c0 /* --lightfoot-blue-web */ ;
    border-radius: 5px;
    border-style:  solid;
    border-width:  1px;
    height:        25px;
}

/*
 * =============================================================================
 * Prevents the blue highlighting when tapping on touch devices.
 * =============================================================================
 */
input, textarea, button, select, a {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/*
 * =============================================================================
 * Removes the blue borders in Chrome
 * =============================================================================
 */
*:focus {
    outline: none;
}

/*
 * =============================================================================
 * Modify the GWT dialog box border and caption to make it cleaner.
 * =============================================================================
 */

.gwt-DialogBox .Caption {
    background:              #98b6d3 /* --lightfoot-blue-03 */ ;
    border-top:              none;
    border-top-left-radius:  3px;
    border-top-right-radius: 3px;
    color:                   white;
    font-family:             Verdana, Arial, Helvetica, sans-serif;
    font-weight:             500;
}

.gwt-DialogBox .dialogBottomCenter {
    display: none;
}

.gwt-DialogBox .dialogBottomLeft {
    display: none;
}

.gwt-DialogBox .dialogBottomRight {
    display: none;
}

.gwt-DialogBox .dialogMiddleLeft {
    display: none;
}

.gwt-DialogBox .dialogMiddleRight {
    display: none;
}

.gwt-DialogBox .dialogTopLeft {
    display: none;
}

.gwt-DialogBox .dialogTopRight {
    display: none;
}

.gwt-DisclosurePanel .header, .gwt-DisclosurePanel .header a, .gwt-DisclosurePanel .header td {
    color: inherit;
}

/*
 * =============================================================================
 * Override the border on the default GWT list box.
 * =============================================================================
 */
.gwt-ListBox {
    border-width:   1px;
    border-color:   #9796c0 /* --lightfoot-blue-web */ ;
    border-radius:  5px;
    border-style:   solid;
    height:         25px;
    vertical-align: middle;
}

/*
 * =============================================================================
 * Menu item selection colours.
 * =============================================================================
 */
.gwt-MenuBar .gwt-MenuItem-selected {
    color:      white !important;
    background: #f5a5a5 /* --lightfoot-red-21 */ ;
}

.gwt-MenuBar-vertical .subMenuIcon-selected {
    color:      white;
    background: #f5a5a5 /* --lightfoot-red-21 */ ;
}

/*
 * =============================================================================
 * Styling the GWT menu bar popup to remove the border images.
 * =============================================================================
 */
.gwt-MenuBarPopup .menuPopupTopCenter {
    display: none;
}
.gwt-MenuBarPopup .menuPopupBottomCenter {
    display: none;
}
.gwt-MenuBarPopup .menuPopupMiddleLeft {
    display: none;
}
.gwt-MenuBarPopup .menuPopupMiddleRight {
    display: none;
}
.gwt-MenuBarPopup .menuPopupTopLeftInner {
    display: none;
}
.gwt-MenuBarPopup .menuPopupTopRightInner {
    display: none;
}
.gwt-MenuBarPopup .menuPopupBottomLeftInner {
    display: none;
}
.gwt-MenuBarPopup .menuPopupBottomRightInner {
    display: none;
}
.gwt-MenuBarPopup .menuPopupTopLeft {
    display: none;
}
.gwt-MenuBarPopup .menuPopupTopRight {
    display: none;
}
.gwt-MenuBarPopup .menuPopupBottomLeft {
    display: none;
}
.gwt-MenuBarPopup .menuPopupBottomRight {
    display: none;
}

/*
 * =============================================================================
 * Configuration for "titles".
 * =============================================================================
 */
.titles {
    background: none;
    padding-top: 10px;
    margin-left: 20px;
    text-align: left;
}

/* @media screen { */
    .utilitiesButtonGroup {
        background:    none;
        float:         right; /* IE8, not compatibility mode, Firefox */
        text-align:    right; /* IE8, compatibility mode */
        margin-top:    4px;
        margin-bottom: 4px;
    }
/*
}
@media print {
    .utilitiesButtonGroup {
        display: none;
    }
}
*/

/*
 * =============================================================================
 * Class sfnBoxSizingBorderBox allows an element's border and padding to be
 * included in its size.
 * =============================================================================
 */
.sfnBoxSizingBorderBox {
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    box-sizing:         border-box;
}

/*
 * =============================================================================
 * Class sfnCommandButton is used to configure the CommandButtons.
 * =============================================================================
 */

.sfnCommandButton, .sfnCommandButton:active {
    background-color: #98b6d3 /* --lightfoot-blue-03 */ ;
    color:            #fff;
    cursor:           pointer;
    border:           none;
    border-radius:    5px;
    font-family:      Verdana, Arial, Helvetica, sans-serif;
    font-weight:      500;
    height:           24px;
    margin-bottom:    0px;
    margin-left:      0px;
    margin-right:     0px;
    margin-top:       0px;
    padding-left:     6px;
    padding-right:    6px;
    padding-top:      1px;
    text-align:       center;
    white-space:      nowrap;
}

.sfnCommandButton:disabled {
    color:  #D0D0D0;
    cursor: default;
}

.sfnCommandButton:disabled img {
    opacity: 0.4;
    filter:  alpha(opacity=40); /* For IE8 and earlier */
}

.sfnButtonLeftMargin, .sfnButtonLeftMargin:active {
    margin-left: 3px;
}

.utilitiesButton, .utilitiesButton:active {
    background:  none;
    border:      none;
    display:     inline-block;
    height:      53px;
    float:       right;
    margin-left: 3px;
    outline:     none;
}

.dialogButtonTooltipsOff, .dialogButtonTooltipsOff:active {
    background:      url("images/button_tooltipsOff.png") no-repeat 0 0;
    background-size: 24px;
    border:          none;
    display:         inline-block;
    height:          24px;
    float:           right;
    margin-left:     3px;
    outline:         none;
    width:           24px;
}
.dialogButtonTooltipsOff:hover {
    background:      url("images/button_tooltipsOff_r.png") no-repeat 0 0;
    background-size: 24px;
}
.dialogButtonTooltipsOn, .dialogButtonTooltipsOn:active {
    background:      url("images/button_tooltipsOn.png") no-repeat 0 0;
    background-size: 24px;
    border:          none;
    display:         inline-block;
    height:          24px;
    float:           right;
    margin-left:     3px;
    outline:         none;
    width:           24px;
}
.dialogButtonTooltipsOn:hover {
    background:      url("images/button_tooltipsOn_r.png") no-repeat 0 0;
    background-size: 24px;
}

.sfnShiftButton, .sfnShiftButton:active {
    background-color: #fff;
    color:            #98b6d3 /* --lightfoot-blue-03 */ ;
    cursor:           pointer;
    border:           solid;
    border-color:     #98b6d3 /* --lightfoot-blue-03 */ ;
    font-size:        8px;
}

.sfnShiftButton:disabled {
    color:  #D0D0D0;
    cursor: default;
}

/*
 * =============================================================================
 * Configuration for the Model Browser buttons.
 * =============================================================================
 */

/* @media screen { */
    .browserButtonGroup {
        background: none;
        float: left;      /* IE8, not compatibility mode, Firefox */
        text-align: left; /* IE8, compatibility mode */
/*        margin-top: 2px;
        margin-bottom: 2px;*/
    }
    .browserButtonGroup tr td:first-child {
        width: auto;
    }
    .browserButtonGroup tr td:first-child button {
        text-align: left; /* IE8, compatibility mode */
    }
/*
}
@media print {
    .browserButtonGroup {
        display: none;
    }
 }
*/

 .shuttleButton, .shuttleButton:active {
    background:     none;
    border:         none;
    display:        inline-block;
    height:         25px;
    float:          none;
    margin-right:   2px;
    margin-left:    2px;
    outline:        none;
    width:          32px;
 }

 .buttonShuttleRight {
     background: url("images/select_single_blue.png") no-repeat 0 0;
 }

 .buttonShuttleRight:hover {
     background: url("images/select_single_red.png") no-repeat 0 0;
 }

 .buttonShuttleRight:disabled {
     background: url("images/select_single_grey.png") no-repeat 0 0;
 }

 .buttonShuttleAllRight {
     background: url("images/select_all_blue.png") no-repeat 0 0;
 }

 .buttonShuttleAllRight:hover {
     background: url("images/select_all_red.png") no-repeat 0 0;
 }

 .buttonShuttleAllRight:disabled {
     background: url("images/select_all_grey.png") no-repeat 0 0;
 }

 .buttonShuttleLeft {
     background: url("images/deselect_single_blue.png") no-repeat 0 0;
 }

 .buttonShuttleLeft:hover {
     background: url("images/deselect_single_red.png") no-repeat 0 0;
 }

 .buttonShuttleLeft:disabled {
     background: url("images/deselect_single_grey.png") no-repeat 0 0;
 }

 .buttonShuttleAllLeft {
     background: url("images/deselect_all_blue.png") no-repeat 0 0;
 }

 .buttonShuttleAllLeft:hover {
     background: url("images/deselect_all_red.png") no-repeat 0 0;
 }

 .buttonShuttleAllLeft:disabled {
     background: url("images/deselect_all_grey.png") no-repeat 0 0;
 }

 .buttonShuttleCombine {
     background: url("images/combine_blue.png") no-repeat 0 0;
 }

 .buttonShuttleCombine:hover {
     background: url("images/combine_red.png") no-repeat 0 0;
 }

 .buttonShuttleCombine:disabled {
     background: url("images/combine_grey.png") no-repeat 0 0;
 }

 .buttonShiftUp {
     background: url("images/selection_up_blue.png") no-repeat 0 0;
 }

 .buttonShiftUp:hover {
     background: url("images/selection_up_red.png") no-repeat 0 0;
 }

 .buttonShiftUp:disabled {
     background: url("images/selection_up_grey.png") no-repeat 0 0;
 }

 .buttonShiftDown {
     background: url("images/selection_down_blue.png") no-repeat 0 0;
 }

 .buttonShiftDown:hover {
     background: url("images/selection_down_red.png") no-repeat 0 0;
 }

 .buttonShiftDown:disabled {
     background: url("images/selection_down_grey.png") no-repeat 0 0;
 }

 .buttonSortDescending {
     background: url("images/sort_descending_blue.png") no-repeat 0 0;
 }

 .buttonSortDescending:hover {
     background: url("images/sort_descending_red.png") no-repeat 0 0;
 }

 .buttonSortDescending:disabled {
     background: url("images/sort_descending_grey.png") no-repeat 0 0;
 }

 .buttonSortAscending {
     background: url("images/sort_ascending_blue.png") no-repeat 0 0;
 }

 .buttonSortAscending:hover {
     background: url("images/sort_ascending_red.png") no-repeat 0 0;
 }

 .buttonSortAscending:disabled {
     background: url("images/sort_ascending_grey.png") no-repeat 0 0;
 }

 .buttonDeleteItem {
     background: url("images/delete_blue.png") no-repeat 0 0;
 }

 .buttonDeleteItem:hover {
     background: url("images/delete_red.png") no-repeat 0 0;
 }

 .buttonDeleteItem:disabled {
     background: url("images/delete_grey.png") no-repeat 0 0;
 }

/*
 * =============================================================================
 * Configuration for the Model Command buttons.
 * =============================================================================
 */

.viewerModelButtonGroup {
    background-color: #98b6d3 /* --lightfoot-blue-03 */ ;
    vertical-align:   bottom;
}

.viewerModelButtonGroup-topPage {
    background-color: #98b6d3 /* --lightfoot-blue-03 */ ;
    border-radius:    5px;
}

.viewerModelButton, .viewerModelButton:active {
    background-color:    #98b6d3 /* --lightfoot-blue-03 */ ;
    background-repeat:   no-repeat;
    border:              none;
    color:               #fff;
    display:             inline-block;
    font-family:         Verdana, Arial, Helvetica, sans-serif;
    font-size:           17px;
    font-weight:         500;
    height:              22px;
    line-height:         22px;
    margin-left:         22px;
    margin-bottom:       3px;
    margin-right:        0px;
    margin-top:          0px;
    outline:             none;
    /* Zero padding means that the mouse pointer changes only over the text. */
    padding-left:        0px;
    padding-right:       0px;
    padding-top:         0px !important;
    text-transform:      none;
}

.viewerModelButtonGroup-topPage .viewerModelButton, .viewerModelButtonGroup-topPage .viewerModelButton:active {
    margin-top: 3px;
}

/* Tablets, including all iPads */
@media     (min-device-width: 569px)
       and (-webkit-min-device-pixel-ratio: 1.0) {

    .viewerModelButton-touchDevice, .viewerModelButton-touchDevice:active {
        font-size:   1.25em;
        height:      28px;
        margin-left: 14px;
    }
}

/* Phones, including all iPhones */
@media     (max-device-width: 568px)
       and (-webkit-min-device-pixel-ratio: 1.0) {

    .viewerModelButton-touchDevice, .viewerModelButton-touchDevice:active {
        font-size: 1.5em;
        height:    33px;
    }
}

.viewerModelButton:disabled {
    border: none;
    color:  #d0d0d0;
}

.buttonCloseWithImage, .buttonCloseWithImage:active {
     background:     url("images/icon_lb_close.gif") no-repeat 0 0;
     margin-left:    0px;
     height:         16px;
     width:          16px;
     vertical-align: bottom;
 }

#buttonModelDirectoryId {
    margin-left: 8px;
}

#buttonEditModelOnId {
    background-color:    #16184a;
    color:               white;
    margin-left:         16px;
    padding-left:        6px;
    padding-right:       6px;
}

#buttonHelpOnId {
    background-color:    #16184a;
    color:               white;
}

#buttonSaveModelOnId {
    margin-left: 16px;
}

/*
 * =============================================================================
 * Class sfnViewerModelName is used to configure the model name "label" that
 * appears along the top if required.
 * =============================================================================
 */
.sfnViewerModelName {
    color:          white;
    font-family:    Verdana, Arial, Helvetica, sans-serif;
    font-size:      18px;
    font-weight:    500;
    float:          right; /* IE8, not compatibility mode, Firefox */
    line-height:    18px;
    text-align:     right; /* IE8, compatibility mode */
    padding-left:   1em;
    padding-top:    4px;
    margin-bottom:  3px;
    margin-right:   11px;
    white-space:    nowrap;
}

.sfnViewerTabLabel {
    margin-top: 6px;
}

.sfnViewerModelName .sfnViewerTabLabel {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:   18px;
}

/*
 * =============================================================================
 * Class sfnHidden is used to hide an object.
 * =============================================================================
 */
.sfnHidden {
    display : none;
}

/*
 * =============================================================================
 * Classes sfnModelDirectoryItemXXXX, are used to configure the appearance of
 * the entries in the Model Directory.
 * =============================================================================
 */
.sfnModelDirectoryItemPanel {
    border-radius: 4px;
    line-height:   18px;
}

.sfnModelDirectoryItemImage {
    height:         18px;
    margin-bottom:  0px;
    margin-left:    0px;
    margin-right:   4px;
    margin-top:     0px;
    vertical-align: middle;
    width:          18px;
    padding-right:  0.5em;
}

.sfnModelDirectoryHeaderImage {
    margin-bottom:  0px;
    margin-left:    0px;
    margin-right:   0px;
    margin-top:     0px;
    padding-bottom: 0px;
    padding-right:  0.5em;
}

/* Tablets, including all iPads */
@media     (min-device-width: 569px)
       and (max-device-width: 1024px)
       and (-webkit-min-device-pixel-ratio: 1.0) {

    .sfnModelDirectoryItemImage {
        height:         2em;
        padding-bottom: 0.25em;
        padding-right:  0.25em;
        width:          2em;
    }
}

/* Phones, including all iPhones */
@media     (max-device-width: 568px)
       and (-webkit-min-device-pixel-ratio: 1.0) {

    .sfnModelDirectoryItemImage {
        height:         2em;
        padding-bottom: 0.25em;
        padding-right:  0.25em;
        width:          2em;
    }
}

.sfnModelDirectoryItemButton, .sfnModelDirectoryItemButton:active {
    border-color:   black;
    border-radius:  4px;
    border-style:   solid;
    border-width:   1px;
    color:          white;
    display:        none;
    margin-bottom:  2px;
    margin-right:   0.25em;
    margin-top:     2px;
    padding:        0.25em;
    vertical-align: middle;
}

.sfnModelDirectoryItemCloseButton, .sfnModelDirectoryItemCloseButton:active {
    background-color: red;
}

.sfnCanClose .sfnModelDirectoryItemCloseButton, .sfnCanClose .sfnModelDirectoryItemCloseButton:active {
    display: inline-block;
}

.sfnModelDirectoryItemOpenButton, .sfnModelDirectoryItemOpenButton:active {
    background-color: green;
}

.sfnCanOpen .sfnModelDirectoryItemOpenButton, .sfnCanOpen .sfnModelDirectoryItemOpenButton:active {
    display: inline-block;
}

.sfnModelDirectoryItemLabel {
    font-family:    Verdana, Arial, Helvetica, sans-serif;
    font-size:      15px;
    font-weight:    500;
    line-height:    18px;
    margin-top:     4px;
    padding-bottom: 4px;
    padding-right:  0.25em;
    vertical-align: middle;
}

.sfnModelDirectoryTreeItemLabel {
    font-family:    Verdana, Arial, Helvetica, sans-serif;
    font-size:      15px;
    font-weight:    500;
    line-height:    18px;
    margin-top:     2px;
    padding-bottom: 2px;
    padding-right:  0.25em;
    vertical-align: middle;
}

.sfnModelDirectoryAdditionalItemLabel {
    color:       #797979 /* --lightfoot-grey-17 */ ;
    margin-left: 6px;
}

/* Tablets, including all iPads */
@media     (min-device-width: 569px)
       and (max-device-width: 1024px)
       and (-webkit-min-device-pixel-ratio: 1.0) {

    .sfnModelDirectoryItemLabel {
        font-size: 1.125em;
    }
}

/* Phones, including all iPhones */
@media     (max-device-width: 568px)
       and (-webkit-min-device-pixel-ratio: 1.0) {

    .sfnModelDirectoryItemLabel {
        font-size: 1.5em;
    }
}

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

.sfnModelDirectoryItemDetailsIndent {
    width: 1em;
}

.sfnModelDirectoryItemDescription {
    vertical-align: middle;
}

.sfnModelDirectoryListFirstColumn {
    margin-left: 8px;
}

.sfnCollapsedBorder table td {
    border-collapse: collapse;
}

.sfnModelDirectorySecurityFlag {
    border-color:   #98b6d3 /* --lightfoot-blue-03 */ ;
    border-radius:  2px;
    border-style:   solid;
    border-width:   1px;
    color:          #98b6d3; /* --lightfoot-blue-03 */ ;
    font-family:    Verdana, Arial, Helvetica, sans-serif;
    font-size:      6px;
    font-weight:    700;
    height:         7px;
    line-height:    7px;
    margin-top:     2px;
    text-align:     center;
    vertical-align: middle !important;
    width:          7px;
}

.sfnModelDirectoryListSecurityFlag {
   margin-right: 4px;
}

.sfnModelDirectoryTreeSecurityFlag {
   margin-left:  -4px;
   margin-right: 3px;
   margin-top:   5px;
}

/*
 * =============================================================================
 * Classes sfnMobileBrowserXXXXPanel are used to configure the appearance of the
 * model browser on iOS devices.
 * =============================================================================
 */
.sfnMobileBrowserSepPanel {
    border-left-style: solid;
    border-left-width: 1px;
    border-left-color: black;
}

.sfnMobileBrowserPanel {
    border-style: solid;
    border-width: 1px;
    border-color: black;
    min-width: 100%;
}

/*
 * =============================================================================
 * Class sfnDialsAndChartsPanel is used to configure the appearance of the
 * outer panel created in the DialsAndChartsPanel.
 * =============================================================================
 */
.sfnDialsAndChartsPanel {
    width: 100%;
}

/*
 * =============================================================================
 * Class sfnDialOrChartPanel provides the layout for a panel to hold objects
 * such as sfn images, rich text boxes, etc.
 * =============================================================================
 */
.sfnDialOrChartPanel {
    /*margin-bottom: 11px; added to sfnOverlined */
    text-align:    center;
    width:         100%;
}

/*
 * =============================================================================
 * Class sfnMinHeightForDropPanel ensures that a "drop" panel has a minimum
 * height.
 * =============================================================================
 */
.sfnMinHeightForDropPanel {
    min-height: 150px;
}

/*
 * =============================================================================
 * Class sfnEditBorder provides a style to highlight certain elements
 * when  the viewer is in "edit" mode.
 * =============================================================================
 */
@media screen {
    .sfnEditBorder {
        border-style: solid;
        border-color: #9796c0 /* --lightfoot-blue-web */ ;
        border-width: 1px;
    }
 }

/*
 * =============================================================================
 * Class sfnTabBar provides addtitional style for the tab bar.
 * =============================================================================
 */
.sfnTabBar {
    background-color:    #FFFFFF;
    line-height:         18px;
    padding-bottom:      11px;
}

/*
 * =============================================================================
 * Class sfnOverlined provides an "overline" that matches that used in a
 * tab bar.
 * =============================================================================
 */
.sfnOverlined {
    border-top-style: solid;
    border-top-color: #9796c0 /* --lightfoot-blue-web */ ;
    border-top-width: 1px;
    margin-top      : 11px;
}

/*
 * =============================================================================
 * Class sfnUnderlined provides an "underline", as in the Viewer model tab bar.
 * =============================================================================
 */
.sfnUnderlined {
    border-bottom-style: solid;
    border-bottom-color: #9796c0 /* --lightfoot-blue-web */ ;
    border-bottom-width: 1px;
}

/*
 * =============================================================================
 * Classes sfnTab, sfnTabDeselected and sfnTabSelected provide styles for
 * the "tabs".
 * =============================================================================
 */
.sfnTab {
    border-right-color:  #9796c0 /* --lightfoot-blue-web */ ;
    border-right-width:  1px;
    border-right-style:  solid;
    color:               #16184a;
    cursor:              default;
    display:             inline-block;
    margin-bottom:       0px;
    margin-top:          2px;
    text-align:          left;
    text-decoration:     none;
    vertical-align:      bottom;
}

.sfnTab:last-child {
    border-right: none;
}

.sfnTabContentPanel {
    border-bottom-color: white;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    line-height:         18px;
    margin-left:         0.75em;
    margin-right:        0.75em;
}

.sfnTab img {
    height:       1em;
    width:        1em;
}

.sfnTab canvas {
    padding-left: 5px;
}

.sfnTabContentPanel-sfnInvalidText .gwt-HTML {
    color: red;
}

.sfnTabSelected {
    border-bottom-color: #16184a;
}

.sfnTabSelected td {
    /* Looks better not bold?
    font-family: SairaBold, sans-serif;
    font-weight: 500;
    */
}

.sfnTabDeselected canvas {
    opacity: 0.4;
    filter:  alpha(opacity=40); /* For IE8 and earlier */
}

.sfnTabDeselected .sfnTabImage {
    opacity: 0.6;
    filter:  alpha(opacity=60); /* For IE8 and earlier */
}

.sfnTabDeselected:hover canvas {
    opacity: 1.0;
    filter:  alpha(opacity=100); /* For IE8 and earlier */
}

.sfnTabDeselected:hover .sfnTabImage {
    opacity: 1.0;
    filter:  alpha(opacity=100); /* For IE8 and earlier */
}

.sfnTabContentPanel .sfnTabDeselected {
    color: #909090;
}

@media screen {
    /*
    * ==========================================================================
    * Class sfnTab-sfnInsertTab is used to ensure that the "+" tab doesn' use
    * italicised fonts in media mode.
    * ==========================================================================
    */
    .sfnTab-sfnInsertTab {
        font-style:  normal;
        font-weight: bold;
    }

    .sfnTab-sfnInsertTab .gwt-HTML {
        color: #16184a;
    }
}
@media print {
    /*
    * ==========================================================================
    * Class sfnTab-sfnInsertTab is used to hide the "+" tab in print mode.
    * ==========================================================================
    */
    .sfnTab-sfnInsertTab {
        display: none;
    }
}

/*
 * =============================================================================
 * Class sfnTabImage styles the warning triangles, edit icons, etc.
 * =============================================================================
 */
.sfnTabImage {
    height:         1em;
    vertical-align: bottom;
}

/* To remove the additional whitespace below the image: */
.sfnTabImage img {
    display: inline-block;
}

/*
 * =============================================================================
 * Class dropCursor provides the look for the Canvas that we use to
 * provide a drop cursor for panels in edit mode.
 * =============================================================================
 */
.dropCursor {
    margin-left: 3px;
    margin-right: 3px;
    background-color: #a9a9a9;
}

/*
 * =============================================================================
 * Class sfnCentredInfoLabel is applied to information labels that are
 * centred in their containers.
 * =============================================================================
 */
 .sfnCentredInfoLabel {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size:  2em;
     text-align: center;
 }

/*
 * =============================================================================
 * Class sfnPanelBorder provides visual separation of panels stacked vertically
 * on the page.
 * =============================================================================
 */
.sfnPanelBorder {
    border-top-style: solid;
    border-top-color: #A0A0A0;
    border-top-width: 1px;
}

.sfnPanelBorder iframe {
    border: none;
    margin: 2px;
}

/*
 * =============================================================================
 * Using width: 100% on a button in Firefox can lead its text to exceed its
 * button size, so class sfnButtonFullWidth achieves the same end using
 * min-width.
 * =============================================================================
 */
.sfnButtonFullWidth {
    min-width: 100%;
}

/*
 * =============================================================================
 * Class sfnFitContentWidth is applied to elements that must be the width
 * required to fit their content.
 * =============================================================================
 */
.sfnFitContentWidth {
    width: fit-content;
}

/*
 * =============================================================================
 * Class sfnFullHeight is applied to elements that must be full height within
 * their container.
 * =============================================================================
 */
.sfnFullHeight {
    height: 100%;
}

/*
 * =============================================================================
 * Class sfnFullHeightImportant is applied to elements that must be full height
 * within their container, with higher importance.
 * =============================================================================
 */
.sfnFullHeightImportant {
    height: 100% !important;
}

/*
 * =============================================================================
 * Class sfnFullWidth is applied to elements that must be full width within
 * their container.
 * =============================================================================
 */
.sfnFullWidth {
    width: 100%;
}

/*
 * =============================================================================
 * Class sfnAlignBottom is used to align an element vertically at the "bottom".
 * =============================================================================
 */
.sfnAlignBottom {
    vertical-align: bottom;
}

/*
 * =============================================================================
 * Class sfnAlignCentre is used to align an element horizontally in the "centre".
 * =============================================================================
 */
.sfnAlignCentre {
    margin-left:  auto;
    margin-right: auto;
    text-align:   center;
}

/*
 * =============================================================================
 * Class sfnAlignContentCentre is used to align's content centrally.
 * =============================================================================
 */
.sfnAlignContentCentre {
    align-content: center;
}

/*
 * =============================================================================
 * Class sfnAlignLeft is used to align an element horizontally at the "left".
 * =============================================================================
 */
.sfnAlignLeft {
    text-align: left;
}

/*
 * =============================================================================
 * Class sfnAlignMiddle is used to align an element vertically at the "middle".
 * =============================================================================
 */
.sfnAlignMiddle {
    vertical-align: middle
}

/*
 * =============================================================================
 * Class sfnAlignRight is used to align an element horizontally at the "right".
 * =============================================================================
 */
.sfnAlignRight {
    margin-left:  auto;
    margin-right: 0px;
    text-align:   right;
}

/*
 * =============================================================================
 * Class sfnAlignTop is used to align an element vertically at the "top".
 * =============================================================================
 */
.sfnAlignTop {
    vertical-align: top;
}

/*
 * =============================================================================
 * Class sfnBehind is applied to elements that must be positioned behind
 * all others.
 * =============================================================================
 */
.sfnBehind {
    z-index: -10;
}

/*
 * =============================================================================
 * Class sfnBorder is used to add border around "grouped" elements.
 * =============================================================================
 */
.sfnBorder {
    border-color:   #9796c0 /* --lightfoot-blue-web */ ;
    border-radius:  5px;
    border-style:   solid;
    border-width:   1px;
    padding-bottom: 2px;    /* Stops inner rectangles cutting borders */
}

.sfnBorderWhite {
    border-color: white;
}

/*
 * =============================================================================
 * Class sfnNoResize is used when an object must not be resizable.
 * =============================================================================
 */
.sfnNoResize {
    resize: none;
}

/*
 * =============================================================================
 * Class sfnBold is used when text must be "bold".
 * =============================================================================
 */
.sfnBold {
    font-weight: bold;
}

/*
 * =============================================================================
 * Class sfnItalic is used when text style must be "italic".
 * =============================================================================
 */
.sfnItalic {
    font-style: italic;
}

.sfnDragHandle {
    background: url("images/select_icon.png") no-repeat 0 0;
    opacity:    0.4;
}

/*
 * Class sfnDragImage styles the drag image that is needed by browsers that
 * do not display dragged objects correctly when they have a direct or inherited
 * CSS transform applied to them, so that we have to produce an image that
 * reflects the extents of the dragged objects relative to the cursor.
 *
 * Note: IE 7 and IE 8 don't have drag and drop, so "opacity" is fine.
 */
.sfnDragImage {
    background-color: #000000;
    border-style:     dashed;
    border-color:     #000000;
    border-width:     2px;
    opacity:          0.4;
}

/*
 * =============================================================================
 * Class sfnFadedItem is used when an object must "faded".
 * =============================================================================
 */
.sfnFadedItem {
    opacity:0.4;
    filter:alpha(opacity=40); /* For IE8 and earlier */
}

/*
 * =============================================================================
 * Class sfnCentred is used when an object must centered.
 * =============================================================================
 */
.sfnCentred {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/*
 * =============================================================================
 * Class sfnDialogButtonAligment is used to align dialog box command buttons.
 * =============================================================================
 */
.sfnDialogButtonAlignment {
    margin-left:  auto;
    margin-right: 5px;
}

/*
 * =============================================================================
 * Class sfnNoMargin is used to remove all margins from an element.
 * =============================================================================
 */
.sfnNoMargin {
    margin: 0px;
}

/*
 * =============================================================================
 * Class sfnNoPadding is used to remove all padding from an element.
 * =============================================================================
 */
.sfnNoPadding {
    padding: 0px;
}

/*
 * =============================================================================
 * Class sfnInlineBlock is used to configure a container to be the size of its
 * contents, when nothing else is required.
 * =============================================================================
 */
.sfnInlineBlock {
    display: inline-block
}

/*
 * =============================================================================
 * Class sfnInvalidText is used to highlight invalid text.
 * =============================================================================
 */
.sfnInvalidText {
    border-color: red !important;
    color:        red !important;
}

.sfnInvalidText select {
    color: red !important;
}

/*
 * =============================================================================
 * Class sfnTextNoWrap ensures that text in a paragraph will never wrap.
 * =============================================================================
 */
.sfnTextNoWrap {
    white-space: nowrap;
}

/*
 * =============================================================================
 * Class sfnTextBoxOverflowEllipis sets the text box to show ellipsis if the
 * contained text is too wide to fit.
 * =============================================================================
 */
.sfnTextBoxOverflowEllipis {
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
};

/*
 * =============================================================================
 * Class sfnPageTopBarTopPadding is used for laying out UI components.
 *
 * It is used to space logically linked UI items vertically.
 * =============================================================================
 */
.sfnPageTopBarTopPadding {
    padding-top: 4px;
}

/*
 * =============================================================================
 * Class sfnPageTopBarBottomMargin is used for laying out UI components.
 *
 * It is used to space logically linked UI items vertically.
 * =============================================================================
 */
.sfnPageTopBarBottomMargin {
    margin-bottom: 12px;
}

/*
 * =============================================================================
 * Class sfnStandardBottomMargin is used for laying out UI components.
 *
 * It is used for items in the last row of a dialog, for example.
 * =============================================================================
 */
.sfnStandardBottomMargin, .sfnStandardBottomMargin:active {
    margin-bottom: 11px;
}

/*
 * =============================================================================
 * Class sfnStandardBottomPadding is used for laying out UI components.
 * =============================================================================
 */
.sfnStandardBottomPadding, .sfnStandardBottomPadding:active {
    padding-bottom: 11px;
}

/*
 * =============================================================================
 * Class sfnSmallLeftMargin is used for laying out UI components.
 *
 * It is used to space logically linked UI items horizontally.
 * =============================================================================
 */
.sfnSmallLeftMargin, .sfnSmallLeftMargin:active {
    margin-left: 5px;
}

/*
 * =============================================================================
 * Class sfnSmallLeftPadding is used for laying out UI components.
 *
 * It is used to space logically linked UI items horizontally.
 * =============================================================================
 */
.sfnSmallLeftPadding, .sfnSmallLeftPadding:active {
    padding-left: 5px;
}

/*
 * =============================================================================
 * Class sfnMediumLeftMargin is used for laying out UI components.
 *
 * It is used to space logically linked UI items horizontally.
 * =============================================================================
 */
.sfnMediumLeftMargin, .sfnMediumLeftMargin:active {
    margin-left: 8px;
}

/*
 * =============================================================================
 * Class sfnStandardLeftMargin is used for laying out UI components.
 *
 * It is used to space logically distinct UI items horizontally.
 * =============================================================================
 */
.sfnStandardLeftMargin, .sfnStandardLeftMargin:active {
    margin-left: 12px;
}

/*
 * =============================================================================
 * Class sfnLargeLeftPadding is used for laying out UI components.
 * =============================================================================
 */
.sfnLargeLeftPadding, .sfnLargeLeftPadding:active {
    padding-left: 36px;
}

/*
 * =============================================================================
 * Class sfnStandardLeftPadding is used for laying out UI components.
 *
 * It is used for items in the last column of a dialog, for example.
 *
 * Use this when you need a standard left "margin" around an object with
 * style sfnPanelBorder, as that allows room for the border.
 * =============================================================================
 */
.sfnStandardLeftPadding, .sfnStandardLeftPadding:active {
    padding-left: 11px;
}

/*
 * =============================================================================
 * Class sfnTinyLeftMargin is used for laying out UI components.
 *
 * It is used to space logically linked UI items horizontally.
 * =============================================================================
 */
.sfnTinyLeftMargin, .sfnTinyLeftMargin:active {
    margin-left: 2px;
}

/*
 * =============================================================================
 * Class sfnSmallRightMargin is used for laying out UI components.
 * =============================================================================
 */
.sfnSmallRightMargin, .sfnSmallRightMargin:active {
    margin-right: 5px;
}

/*
 * =============================================================================
 * Class sfnSmallRightPadding is used for laying out UI components.
 * =============================================================================
 */
.sfnSmallRightPadding, .sfnSmallRightPadding:active {
    padding-right: 5px;
}

/*
 * =============================================================================
 * Class sfnMediumRightMargin is used for laying out UI components.
 * =============================================================================
 */
.sfnMediumRightMargin, .sfnMediumRightMargin:active {
    margin-right: 8px;
}

/*
 * =============================================================================
 * Class sfnStandardRightMargin is used for laying out UI components.
 *
 * It is used for items in the last column of a dialog, for example.
 * =============================================================================
 */
.sfnStandardRightMargin, .sfnStandardRightMargin:active {
    margin-right: 11px;
}

/*
 * =============================================================================
 * Class sfnStandardRightPadding is used for laying out UI components.
 *
 * It is used for items in the last column of a dialog, for example.
 *
 * Use this when you need a standard right "margin" around an object with
 * style sfnPanelBorder, as that allows room for the border.
 * =============================================================================
 */
.sfnStandardRightPadding, .sfnStandardRightPadding:active {
    padding-right: 11px;
}

/*
 * =============================================================================
 * Class sfnLargeRightPadding is used for laying out UI components.
 * =============================================================================
 */
.sfnLargeRightPadding, .sfnLargeRightPadding:active {
    padding-right: 35px;
}

/*
 * =============================================================================
 * Class sfnSmallBottomPadding is used for laying out UI components.
 *
 * It is used to space logically linked UI items vertically.
 * =============================================================================
 */
.sfnSmallBottomMargin, .sfnSmallBottomMargin:active {
    margin-bottom: 5px;
}

/*
 * =============================================================================
 * Class sfnMediumBottomPadding is used for laying out UI components.
 *
 * It is used to space logically linked UI items vertically.
 * =============================================================================
 */
.sfnMediumBottomMargin, .sfnMediumBottomMargin:active {
    margin-bottom: 8px;
}

/*
 * =============================================================================
 * Class sfnSmallBottomPadding is used for laying out UI components.
 * =============================================================================
 */
.sfnSmallBottomPadding, .sfnSmallBottomPadding:active {
    padding-bottom: 5px;
}

/*
 * =============================================================================
 * Class sfnTinyTopMargin is used for laying out UI components.
 *
 * It is used to space logically linked UI items vertically.
 * =============================================================================
 */
.sfnTinyTopMargin, .sfnTinyTopMargin:active {
    margin-top: 2px;
}

/*
 * =============================================================================
 * Class sfnTinyTopPadding is used for laying out UI components.
 *
 * It is used to space logically linked UI items vertically.
 * =============================================================================
 */
.sfnTinyTopPadding, .sfnTinyTopPadding:active {
    padding-top: 2px;
}

/*
 * =============================================================================
 * Class sfnSmallTopMargin is used for laying out UI components.
 *
 * It is used to space logically linked UI items vertically.
 * =============================================================================
 */
.sfnSmallTopMargin, .sfnSmallTopMargin:active {
    margin-top: 5px;
}

/*
 * =============================================================================
 * Class sfnSmallTopPadding is used for laying out UI components.
 *
 * It is used to space logically linked UI items vertically.
 * =============================================================================
 */
.sfnSmallTopPadding, .sfnSmallTopPadding:active {
    padding-top: 6px;
}

/*
 * =============================================================================
 * Class sfnMediumTopMargin is used for laying out UI components.
 *
 * It is used to space logically linked UI items vertically.
 * =============================================================================
 */
.sfnMediumTopMargin, .sfnMediumTopMargin:active {
    margin-top: 8px;
}


/*
 * =============================================================================
 * Class sfnStandardTopMargin is used for laying out UI components.
 *
 * It is used to spave logically distinct UI items vertically.
 * =============================================================================
 */
.sfnStandardTopMargin, .sfnStandardTopMargin:active {
    margin-top: 12px;
}

/*
 * =============================================================================
 * Class sfnStandardTopPadding is used for laying out UI components.
 *
 * It is used for items in the first row of a dialog, for example.
 *
 * Use this when you need a standard top "margin" around an object with
 * style sfnPanelBorder, as that allows room for the border.
 * =============================================================================
 */
.sfnStandardTopPadding, .sfnStandardTopPadding:active {
    padding-top: 12px;
}

/*
 * =============================================================================
 * Class sfnIndentLeft is used to align objects using EMs.
 * =============================================================================
 */
.sfnIndentLeft {
    padding-left: 0.75em;
}

/*
 * =============================================================================
 * Class sfnIndentRight is used to align objects using EMs.
 * =============================================================================
 */
.sfnIndentRight {
    padding-right: 0.75em;
}

/*
 * =============================================================================
 * Class sfnImagePanelTitle is used to configure the title of pop-up panel
 * containing "full size" images when they're clicked on.
 * =============================================================================
 */
.sfnImagePanelTitle {
    color:       #174da7;
}

/*
 * =============================================================================
 * Class sfnHelpImagePanelSize is used to configure the pop-up panel containing
 * the "full size" help image.
 * =============================================================================
 */
.sfnHelpImagePanelSize {
    height: 480px;  /* Same as sfnImagePanelSize. */
    width:  610px;  /* Slightly wider for the help image. */
}

/*
 * =============================================================================
 * Class sfnImagePanelSize is used to configure the pop-up panel containing
 * "full size" images when they're clicked on.
 * =============================================================================
 */
.sfnImagePanelSize {
    height: 480px;  /* Default chart height is 450, but extra needed to avoid scrollbars. */
    width:  600px;
}

/*
 * =============================================================================
 * Class sfnModelBrowser and related classes are used to control the appearance
 * of the model browser components.
 * =============================================================================
 */
.sfnModelBrowser {
    margin-bottom: 10px;
    margin-left:   auto;
    margin-right:  auto;
    /*margin-top:    10px;*/
    text-align:    center;
    width:         100%;
}

/*
 * =============================================================================
 * Class sfnFileUpload is for configuring FileUpload elements.
 * =============================================================================
 */
.sfnFileUpload {
    width  : 80px;
}

/*
 * =============================================================================
 * Class sfnPanelItem is used to configure the items contained within panels.
 * =============================================================================
 */
.sfnPanelItem {
/* We remove this as it may be contributing to the slow performance on iPads. We will accept that
   faded dials / charts signify loading
    background:     url(images/hourglass.gif)
                    50% 50%
                    no-repeat;
*/
    border-radius:  5px;
    border-spacing: 0px;
    border-style:   none;
    border-color:   #16184a;
    display:        inline-block;
    overflow:       visible;
    margin:         2px;
    padding:        8px;
    vertical-align: top;
}

/*
 * =============================================================================
 * Class sfnPanelItem-desk is used to configure the items contained within
 * panels in the Desk interface.
 * =============================================================================
 */
.sfnPanelItem-desk {
    border-color: #98b6d3 /* --lightfoot-blue-03 */ ;
    border-style: solid;
    border-width: 2px;
    padding:      6px !important;
}

/*
 * =============================================================================
 * Class sfnPanelItem-selected is used to configure the items contained within
 * panels when they have been "selected".
 * =============================================================================
 */
.sfnPanelItem-selected {
    border-color:  #9796c0 /* --lightfoot-blue-web */ ;
    border-style:  solid;
    border-width:  2px;
    padding:       6px;
}

/*
 * =============================================================================
 * Class sfnPanelItem-desk is used to configure the selected items contained
 * within panels in the Desk interface.
 * =============================================================================
 */
.sfnPanelItem-desk-selected {
    border-color: black !important;
}

/*
 * =============================================================================
 * Class sfnPanelItem-highlighted is used to configure the items contained
 * within panels when they have been "highlighted".
 * =============================================================================
 */
.sfnPanelItem-highlighted {
    border-style:  solid;
    border-color:  #9796c0 /* --lightfoot-blue-web */ ;
    border-radius: 5px;
    border-style:  dashed;
    border-width:  2px;
    margin:        2px;
    padding:       6px;
}

/*
 * =============================================================================
 * Class sfnPanelItem-loafding is used to configure the items contained within
 * panels when they are being "loaded". The idea is that the opacity is reduced,
 * resulting in the visibility of the loading cursor that's configured as the
 * background image for the sfnPanelItem.
 * =============================================================================
 */
.sfnPanelItem-loading {
    opacity: .4;
    filter:  Alpha(opacity=40);
}

/*
 * =============================================================================
 * Class sfnPanelLabel is used to configure the labels of Viewer panels.
 * =============================================================================
 */
.sfnPanelLabel {
    color:           #16184a;
    font-weight:     100;
    line-height:     18px;
    padding-top:     6px;
    text-align:      left;
    text-decoration: none;
}

.sfnPanelLabelMultiList {
    margin-top: -5px;
}

.sfnPanelLabelPrefix {
    margin-top: 1px;
}

/*
 * =============================================================================
 * Class sfnRectangle is used to configure rectangles such as link hotspots
 * and viewports.
 * =============================================================================
 */
.sfnRectangle {
    border-radius:    0px;
    border-width:     2px;
    border-spacing:   0px;
    border-style:     none;
    display:          inline-block;
    overflow:         visible;
    margin:           0px;
    vertical-align:   top;
}

/*
 * =============================================================================
 * Class sfnRectangle-selected is used to configure rectangles when they have
 * been "selected".
 * =============================================================================
 */
.sfnRectangle-selected {
    border-color:  #9796c0 /* --lightfoot-blue-web */ ;
    border-style:  solid;
}

/*
 * =============================================================================
 * Class sfnRectangle-highlighted is used to configure rectangles when they have
 * been "selected".
 * =============================================================================
 */
.sfnRectangle-highlighted {
    border-color:  #9796c0 /* --lightfoot-blue-web */ ;
    border-style:  dashed;
}

/*
 * =============================================================================
 * Class sfnSharedTabFrame is used to configure shared tab frames.
 * =============================================================================
 */
.sfnSharedTabFrame {
    border-style:   none;
    display:        inline-block;
    overflow:       visible;
    vertical-align: top;
}

/*
 * =============================================================================
 * Class sfnSharedTabFrameBorderPanel is used to configure shared tab frames'
 * border panels. They have three states, depending on whether the enclosing
 * sfnSharedTabFrame is selected:
 *
 * No border
 * Dashed border (when the shared tab frame's containing panel is higlighting
                 its contents)
 * Solid border (when the shared tab frame is selected)
 * =============================================================================
 */
.sfnSharedTabFrameBorderPanel {
    border-radius:  0px;
    border-width:   2px;
    border-spacing: 0px;
    border-style:   none;
    pointer-events: none;
}

.sfnSharedTabFrameBorderPanel-highlighted {
    border-color:  #9796c0 /* --lightfoot-blue-web */ ;
    border-style:  dashed;
}

.sfnSharedTabFrameBorderPanel-selected {
    border-color:  #9796c0 /* --lightfoot-blue-web */ ;
    border-style:  solid;
}

/*
 * =============================================================================
 * Class sfnHotspotContents is used to configure hotspot rectangle content
 * panels.
 * =============================================================================
 */
.sfnHotspotContents {
    cursor: pointer;
}

/*
 * =============================================================================
 * Class sfnHotspotContentsRounded is used to configure rounded hotspot
 * rectangle content panels.
 * =============================================================================
 */
.sfnHotspotContentsRounded {
    border-radius: 5px;
    cursor: pointer;
}

/*
 * =============================================================================
 * Class sfnSelectionHotspot is used to configure selectable rectangles.
 * =============================================================================
 */
.sfnSelectionHotspot {
    border-radius:    5px;
    border-spacing:   0px;
    border-style:     none;
    border-width:     2px;
    display:          inline-block;
    overflow:         visible;
    margin:           0px;
    vertical-align:   top;
}

/*
 * =============================================================================
 * Class sfnSelectionHotspot-selected is used to configure selection rectangles
 * when they have been "selected".
 * =============================================================================
 */
.sfnSelectionHotspot-selected {
    border-color:  #9796c0 /* --lightfoot-blue-web */ ;
    border-style:  solid;
}

/*
 * =============================================================================
 * Class sfnSelectionHotspot-highlighted is used to configure selection
 * rectangles when they have been "selected".
 * =============================================================================
 */
.sfnSelectionHotspot-highlighted {
    border-color:  #9796c0 /* --lightfoot-blue-web */ ;
    border-style:  dashed;
}

/*
 * =============================================================================
 * Class sfnPopupMenu is used to configure the pop-up menus.
 * =============================================================================
 */
.sfnPopupMenu {
    padding: 8px !important;
}

/*
 * =============================================================================
 * Class sfnPopupMenuItem is used to configure the pop-up menu items.
 * =============================================================================
 */
.sfnPopupMenuItem {
    font-size: 1em;
}

.sfnPopupMenuItem-iOS {
    font-family: Helvetica, sans-serif;
}

/* Tablets, including all iPads */
@media     (min-device-width: 569px)
       and (max-device-width: 1024px)
       and (-webkit-min-device-pixel-ratio: 1.0) {

       .sfnPopupMenuItem {
            font-size: 1.5em;
       }
}

/* Phones */
@media     (max-device-width: 568px)
       and (-webkit-min-device-pixel-ratio: 1.0) {

       .sfnPopupMenuItem {
            font-size: 1.5em;
       }
}

/*
 * =============================================================================
 * Class sfnRichTextArea classes are used to configure rich text areas.
 * =============================================================================
 */

/* Preserves default for rich text areas prior to sfn 9.0. */
.sfnRichTextArea {
    font-family: Arial, Helvetica, sans-serif;
    font-size:   small;
    padding:     0px 8px 0px 8px;
    margin:      1px;
}

/* For property editors in dialog boxes. */
.sfnRichTextArea.sfnPropertyEditor {
    font-family: Verdana, Arial, Helvetica, sans-serif !important;
    font-size:   15px !important;
    font-weight: 500 !important;
    padding:     0px;
}

.sfnRichTextArea-bordered {
    border-color:  #A0A0A0;
    border-style:  solid;
    border-width:  1px;
    margin:        0px;
}

/*
 * =============================================================================
 * Class sfnSingleSelectionTreeNodeSelected is used to configure the selected
 * nodes in our single selection trees, and sfnTreeSingleSelectionHighlighter
 * the background highlighter.
 * =============================================================================
 */
.sfnSingleSelectionTreeNodeSelected {
    color: #fff;
}

.sfnSingleSelectionTreeHighlighter {
    background-color: #f5a5a5 /* --lightfoot-red-21 */ ;
    border-color:     #f5a5a5 /* --lightfoot-red-21 */ ;
    border-radius:    5px;
    border-style:     solid;
    border-width:     2px;
}

/*
 * =============================================================================
 * Class sfnListItemXXXX is used to configure the items in a List component.
 * =============================================================================
 */
.sfnListItemHeader {
    line-height:  18px;
}

.sfnListItemHeader > td {
    padding: 0px;
}

.sfnListItemHeaderLabelPanel {
    background:    #f7fbfc;
    border-color:  #f7fbfc;
    border-style:  solid;
    border-radius: 5px;
    border-width:  1px;
}

.sfnListItemHeaderLabel {
    margin-left: 6px;
    margin-top:  4px;
}

.sfnListItemBorderSpacing {
    border-spacing: 6px;
}

.sfnListItemCursorStyle {
    cursor : default;
}

.sfnListHeaderCursorStyle {
    cursor : pointer;
}

.sfnListItemSelected > td {
    color:            #fff;
    background-color: #f5a5a5 /* --lightfoot-red-21 */ ;
    border-radius:    5px;
    border-style:     solid;
    border-width:     0px;
}

/*
 * =============================================================================
 * Classes sfnBottomDragHandle and sfnRightDragHandle, together with their
 * "mayresize" forms when the cursor is within them, provide the "handles"
 * for resizing objects.
 * =============================================================================
 */

.sfnBottomDragHandle {
    border-bottom-color: #d3d3d3;
    border-bottom-style: solid;
    border-bottom-width: 4px;
    padding-bottom:      1px;
}

.sfnBottomDragHandle-mayresize {
    border-bottom-color: #a9a9a9;
}

.sfnRightDragHandle {
    border-right-color: #d3d3d3;
    border-right-style: solid;
    border-right-width: 4px;
    padding-right:      1px;
}

.sfnRightDragHandle-mayresize {
    border-bottom-color: #a9a9a9;
}

/*
 * =============================================================================
 * Classes to configure the links section, if visible.
 * =============================================================================
 */
/* @media screen { */
     /* The down/right arrow */
     .sfnLinksSection-sectionImage {
         height:        16px;
         margin-bottom: 11px;
         margin-left:   12px;
         margin-top:    12px;
         width:         16px;
     }

     /* The links section title */
     .sfnLinksSection-sectionTitle {
        color:           #16184a;
        font-weight:     100;
        margin-bottom:   11px;
        margin-left:     12px;
        margin-top:      12px;
        text-align:      left;
        text-decoration: none;
     }

     .sfnLinksSection-sectionContents {
         margin-bottom: 5px;
         margin-left:   12px;
         margin-right:  11px;
         margin-top:    6px;
         width:         100%;
     }

     .sfnLinksSection-modelLink {
         color:         #16184A;
         display:       inline;
         font-size:     1.125em;
         margin-bottom: 5px;
         margin-left:   0px;
         margin-right:  11px;
         margin-top:    6px;
         text-align:    center;
         width:         100%;
     }

     .sfnLinksSection-modelLink img {
         height:        16px;
         margin-right:  11px;
         width:         16px;
     }
/*
 }
 @media print {
    .sfnLinksSection {
        display: none;
    }
 }
*/

/*
 * =============================================================================
 * Set the margins on all input elements to zero so that we can choose layout
 * using our own classes.
 * =============================================================================
 */
input {
    margin-left: 0px;
}

/*
 * =============================================================================
 * Class sfnRelatedChartsPanel is used as a marker class for the lower panels
 * in dials and related charts panels.
 * =============================================================================
 */
.sfnRelatedChartsPanel {
}

/*
 * =============================================================================
 * Class sfnDialsPanel is used as a marker class for the upper panel in dials
 * and related charts panels.
 * =============================================================================
 */
.sfnDialsPanel {
}

/*
 * =============================================================================
 * The sfnHelpPopup and related classes are used to format the pop-ups showing
 * help for the Model Parameters dialogs, including those for dials and charts.
 * =============================================================================
 */
.sfnHelpPopup {
    background-color: transparent;
    margin-left:      12px;
}

.sfnHelpPopup>div {
    background-color: #F0F0F0;
    border-radius:    8px;
    box-shadow:       4px 3px 8px #666666;
	color:            #000000;
    font-family:      Arial, Helvetica, sans-serif;
	font-size:        1.1em;
	font-weight:      normal;
	line-height:      1.25em;
    padding:          0.5em 0.75em 0.5em 0.75em;
}

.sfnHelpPopup>div strong {
	color:       #174da7;
    font-weight: bold;
}

/*
 * =============================================================================
 * The sfnLabelAndEditorPanel and related classes are used to format the
 * label-and-editor panels within the Model Parameters dialogs,
 * including those for dials and charts.
 * =============================================================================
 */

.sfnLabelAndEditorPanel {
    border-color: transparent;
    border-style: solid;
    border-width: 1px;
}

.sfnLabelAndEditorPanelBottomMargin {
    margin-bottom: 10px;
}

.sfnLabelAndEditorPanelLeftMargin {
    margin-left: 11px;
}

.sfnLabelAndEditorPanelRightMargin {
    margin-right: 10px;
}

.sfnLabelAndEditorPanelTopMargin {
    margin-top: 11px;
}

/*
 * =============================================================================
 * The sfnAutoHorizontalScroll is used to add a horizontal scroll bar to a
 * container if the contents overflow horizontally.
 * =============================================================================
 */
.sfnAutoHorizontalScroll {
    overflow-x: auto;
}

/*
 * =============================================================================
 * Class sfnAutotLeftAndRightMargins sets the left and right margins to auto
 * without changing the text alignment.
 * =============================================================================
 */
.sfnAutotLeftAndRightMargins {
    margin-left:  auto;
    margin-right: auto;
}

/*
 * =============================================================================
 * The sfnAutoVerticalScroll is used to add a vertical scroll bar to a
 * container if the contents overflow vertically.
 * =============================================================================
 */
.sfnAutoVerticalScroll {
    overflow-y: auto;
}

/*
 * =============================================================================
 * sfnAutoScroll is used to add a vertical and horizontal scroll bar to a
 * container if the contents overflow vertically. Overrides hidden on absolute
 * panels.
 * =============================================================================
 */
.sfnAutoScroll {
    overflow: auto;
}

/*
 * =============================================================================
 * sfnNoScroll is used to suppress vertical and horizontal scroll bars on a
 * container.
 * =============================================================================
 */
.sfnNoScroll {
    overflow: hidden;
}

/*
 * =============================================================================
 * The sfnNoHorizontalScroll is used to inhibit a horizontal scroll bar on a
 * container if the contents overflow horizontally.
 * =============================================================================
 */
.sfnNoHorizontalScroll {
    overflow-x: hidden;
}

/*
 * =============================================================================
 * The sfnNoVerticalScroll is used to suppress a vertical scroll bar on a
 * container if the contents overflow horizontally, and hide
 * anything overflowing.
 * =============================================================================
 */
.sfnNoVerticalScroll {
    overflow-y: hidden;
}

/*
 * =============================================================================
 * The sfnAlwaysVerticalScroll is used to always add a vertical scroll bar to a
 * container.
 * =============================================================================
 */
.sfnAlwaysVerticalScroll {
    overflow-y: scroll;
}

/*
 * =============================================================================
 * The sfnFixedTableLayout is used to set a TABLE's table-layout to be fixed,
 * which means that the table's size not determined by its contents.
 * =============================================================================
 */
.sfnFixedTableLayout {
    table-layout: fixed;
}

.sfnBrowserSplitPanel {
    border-color:  #9796c0 /* --lightfoot-blue-web */ ;
    border-radius: 6px;
    border-style:  solid;
    border-width:  1px;
}

/*
 * =============================================================================
 * Class sfnViewerComponent is for the whole UI.
 * =============================================================================
 */
.sfnViewerComponent {
}

/*
 * =============================================================================
 * Class sfnResizingHandle is used during drag-to-resize operations.
 * =============================================================================
 */
.sfnResizingHandle {
    background: url("images/Resize.png") no-repeat 0 0;
}

/*
 * =============================================================================
 * Class sfnResizeCursor is used during drag-to-resize operations.
 * =============================================================================
 */
.sfnDragCursor {
    cursor : nwse-resize;
}

/*
 * =============================================================================
 * Class sfnLinkPointer is used to set the link image.
 *
 * The background image name and filter or opacity are set programmatically by
 * values fetched from sfn.properties, e.g.:
 *
 * graphics.viewer.link1IconImage=link1_black.png, 40
 * =============================================================================
 */
.sfnLinkPointer {
    background-repeat:   no-repeat;
    background-position: 0 0;
    border:              none;
    cursor:              pointer;
    display:             inline-block;
    float:               left;
    height:              16px;
    outline:             none;
    width:               16px;
}

.sfnLinkPointer-broken {
    background: url("images/link2.png") no-repeat 0 0;
    cursor:     default;
    filter:     Alpha(opacity=40); /* IE 8 and earlier */
    opacity:    .4;
}

/* iPad - all variants - and other tablets. */
@media     (min-device-width: 569px)
       and (max-device-width: 1024px)
       and (-webkit-min-device-pixel-ratio: 1.0) {

     /* Put an invisible border on it to make it easier to tap. */
    .sfnLinkPointer {
        border-style:  solid;
        border-color:  transparent;
        border-bottom: 30px;
        border-left:   30px;
    }
}

/* iPhone and other phones */
@media     (max-device-width: 568px)
       and (-webkit-min-device-pixel-ratio: 1.0) {

     /* Put an invisible border on it to make it easier to tap. */
    .sfnLinkPointer {
        border-style:  solid;
        border-color:  transparent;
        border-bottom: 30px;
        border-left:   30px;
    }
}

/*
 * =============================================================================
 * Class sfnDisallowDrop is used to indicate that a drop operation
 * is disallowed.
 * =============================================================================
 */
.sfnDisallowDrop {
    cursor: no-drop;
}

/*
 * =============================================================================
 * Class sfnParametersBorderPanel is used to "draw" a border around a label
 * and editor in a parameters dialog.
 * =============================================================================
 */
.sfnParametersBorderPanel {
    border-style: solid;
    border-color: #666666;
    border-width: 1px;
    pointer-events: none;
}

/*
 * =============================================================================
 * Class sfnShimmingPanel is used to "shim" Frames in Internet Explorer.
 * =============================================================================
 */
.sfnShimmingPanel {
    border:     none;
    filter:     'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';
    opacity:    0.0;
}

/*
 * =============================================================================
 * Class sfnGroundGlassPanel is used to fade out objects behind a glass panel,
 * to emphasise objects in front of it.
 * =============================================================================
 */
.sfnGroundGlassPanel {
    background-color: #fff;
    filter:           alpha(opacity=40); /* For IE8 and earlier */
    opacity:          0.4;
}

/*
 * =============================================================================
 * Class sfnLogoPanel is used to configure the DIV that contains the sfn logo,
 * just to the left of the buttons and menu.
 * =============================================================================
 */
.sfnLogoPanel {
    /*height:       42px;*/
    float:        right; /* IE8, not compatibility mode, Firefox */
    text-align:   right; /* IE8, compatibility mode */
    /*margin-right: 15px;*/
    /*margin-top:   2px;*/
    /*width:        98px;*/
}

/*
 * =============================================================================
 * Class sfnTextArea is used to configure text areas (multi-line text boxes).
 * =============================================================================
 */
.sfnTextArea {
    border-color:       #9796c0 /* --lightfoot-blue-web */ ;
    border-radius:      5px;
    border-style:       solid;
    border-width:       1px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing:    border-box; /* Firefox, other Gecko */
    box-sizing:         border-box; /* Opera/IE 8+ */
    line-height:        18px;
    min-height:         3em;
    width:              100%;
}

/*
 * =============================================================================
 * #notesTextAreaId is used to configure designer notes text areas.
 * =============================================================================
 */
#notesTextAreaId {
    height: 15em;
    width:  30em;
}

/*
 * =============================================================================
 * Class sfnTextBox is used to configure text boxes (single-line text boxes).
 * =============================================================================
 */
.sfnTextBox {
    border-color:       #9796c0 /* --lightfoot-blue-web */ ;
    border-radius:      5px;
    border-style:       solid;
    border-width:       1px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing:    border-box; /* Firefox, other Gecko */
    box-sizing:         border-box; /* Opera/IE 8+ */
    line-height:        18px;
}

.sfnTextBoxNoWidth {
    width: inherit;
}

/*
 * =============================================================================
 * Class sfnTextBox pseudo-element to remove x clear button in textbox in IE10
 * onwards because of inability to handle events from the x clear button.
 * =============================================================================
 */
.sfnTextBox::-ms-clear {
    width:  0;
    height: 0;
    display: none;
}

/*
 * =============================================================================
 * Class sfnNoCSSResizeOrScrolling is used to turn off CSS resizing and scroll
 * bars on text areas: we resize using jQuery.
 * =============================================================================
 */
.sfnNoCSSResizeOrScrolling {
    resize:   none;
    overflow: hidden;
}

/*
 * =============================================================================
 * Id footer and the nested items' classes and ids provide formatting for
 * the Lightfoot copyright information.
 * =============================================================================
 */
#footer {
	height: 30px;
}
#footer .first{
    font-size:      0.7em;
    letter-spacing: 1px;
    text-align:     left;
    white-space:    nowrap;
}
#footer .second{
    font-size:      0.7em;
    letter-spacing: 1px;
    margin-left:    5px;
    overflow-x:     hidden;
    text-align:     center;
    white-space:    nowrap;
    width:          100%;
}
#footer .third{
    font-size:      0.7em;
    letter-spacing: 1px;
    margin-left:    5px;
    text-align:     right;
    white-space:    nowrap;
}
#footer ul {
    padding: 0px;
    list-style: none;
}

#footer li {
    display: inline;
}

#footer a {
    padding: 0px 10px;
    color: #00002A;
    text-decoration: none;
}
#footer p {
    text-align: center;
    font-size: 0.55em;
}

/*
 * =============================================================================
 * Class submenuIcon is used to override the GWT submenu.
 * =============================================================================
 */
.subMenuIcon {
    text-align: right;
}

/*
 * =============================================================================
 * Class sfnMouseDragPanel is used to configure the panel that allows mouse
 * drag to scroll.
 * =============================================================================
 */
.sfnMouseDragPanel {
    background-color: white;
    cursor:           move;
    filter:           alpha(opacity=1); /* For IE8 and earlier */
    opacity:          0.01;
}

/*
 * =============================================================================
 * Class sfnProgressBar is used to configure the look of progress bars
 * =============================================================================
 */
/*
 * The progress bar container which is an absolute panel and not visible
 */
#sfnProgressBar {
    overflow:           hidden;
    position:           relative;
}

/*
 * The progress bar box with grey border
 */
#sfnProgressBarBox {
    border-color:       #A0A0A0;
    border-style:       solid;
    border-width:       1px;
    margin:             0px;
    padding:            2px;
    position:           relative;
}

/*
 * The progress bar itself which is coloured light blue
 */
#sfnProgressBarBar {
    background-color:   lightsteelblue;
    height:             18px;
    margin:             0px;
}

/*
 * The label which sits inside the progress bar blue area to give a completion message
 */
#sfnProgressBarLabelBox {
    line-height:        18px;
    height:             100%;
    left:               0px;
    width:              100%;
    position:           absolute;
    top:                0px;
}
/*
 * The label which sits inside the progress bar blue area to give a completion message
 */
#sfnProgressBarLabelLabel {
    height:             100%;
    margin-top:         3px;
    padding-top:        2px;
    position:           relative;
    text-align:         center;
    vertical-align:     middle;
    color:              blue;
}

/*
 * =============================================================================
 * Extend Tiny MCE 5.0 "tox" class to ensure the UIs are always in front of the
 * dialogs and pop-up panels.
 * =============================================================================
 */
.tox {
    z-index: 16777266 !important;
}

/*
 * =============================================================================
 * The sfnPlainDialog class is used in the following to remove the normal
 * dialog decorations, allowing it to remain a functional dialog while having
 * the appearance of a simple pop-up panel.
 * =============================================================================
 */
.sfnPlainDialog .dialogBottom {
    display: none;
}

.sfnPlainDialog .dialogLeft {
    display: none;
}

.sfnPlainDialog .dialogRight {
    display: none;
}

.sfnPlainDialog .dialogTop {
    display: none;
}

/*
 * Make a element (such as a label) hidden yet still occupy the space on the
 * parent which it would have had it been visible.
 */
.sfnFullSizeElementHidden {
    visibility: hidden;
}

/*
 * Make a element (such as a label) visible after it has been previously made
 * invisible through the style .sfnFullSizeElementHidden.
 */
.sfnFullSizeElementUnhidden {
    visibility: visible;
}

/*
 * The standard left padding for items in a list so that items dont appear right
 * up against the edge of the list.
 */
.sfnListStandardLeftPadding {
    padding-left: 3px;
}

/*
 * A list box which is used for information purposes only
 */
.sfnInformationPanel {
    border-color: #A0A0A0;
    border-style: solid;
    border-width: 1px;
}

/*
 * Grey color to be applied to items such as label text etc.
 */
.sfnGreyed {
    color:  #888888;
}

/*
 * =============================================================================
 * Classes sfnZoomFitButton and sfnZoomStepButton style the buttons for zooming
 * and fitting absolute positioned panels. Class sfnZoomScalingLabel is for the
 * text label to the left of the buttons.
 * =============================================================================
 */
.sfnZoomFitButton, .sfnZoomFitButton:active {
    /*
     * A trick for Firefox, otherwise the fit and step buttons aren't algigned:
     */
    vertical-align: top;
    width:          57px;
}

.sfnZoomScalingLabel {
    height:      24px;
    line-height: 24px;
    padding-top: 2px;
}

.sfnZoomStepButton, .sfnZoomStepButton:active {
    font-size:      18px;
    line-height:    5px;
    padding-top:    0px;
    /*
     * A trick for Firefox, otherwise the fit and step buttons aren't algigned:
     */
    vertical-align: top;
    width:          26px;
}

.sfnZoomStepButton-Plus, .sfnZoomStepButton-Plus:active {
    padding-bottom: 4px;
}

/*
 * =============================================================================
 * Class sfnResultsTable is used to format the contents of a box displaying
 * dial or chart results.
 * =============================================================================
 */
.sfnResultsTable td {
    padding-left:  10px;
    padding-right: 34px;
}

/*
 * =============================================================================
 * Class sfnPopupBorder is used to style pop-up panels.
 * =============================================================================
 */
.sfnPopupBorder {
    background-color: white;
    box-shadow:       1px 1px 2px #144086 /* --lightfoot-blue-25 */ ;
    border-color:     #9796c0 /* --lightfoot-blue-web */ ;
    border-radius:    5px;
    border-style:     solid;
    border-width:     1px;
    padding-bottom:   2px;    /* Stops inner rectangles cutting borders */
}

/*
 * =============================================================================
 * Classes sfnSelectedFilmStripSlideBorder and sfnUnselectedFilmStripSlideBorder
 * decorate the film strip "slides" for when they are selected or not.
 * =============================================================================
 */
.sfnSelectedFilmStripSlideBorder {
    border: black solid 2px;
}
.sfnUnselectedFilmStripSlideBorder {
    border: lightgray solid 2px;
}

/*
 * =============================================================================
 * Class sfnModelWarning is used to style the optional model warning in the
 * top panel.
 * =============================================================================
 */
.sfnModelWarning {
    border-color:   #98b6d3 /* --lightfoot-blue-03 */ ;
    border-radius:  5px;
    border-style:   solid;
    border-width:   3px;
    color:          #FFFFFF;
    float:          none;
    margin-left:    12px;
    text-align:     center;
    vertical-align: middle;
    white-space:    nowrap;
}

/*
 * =============================================================================
 * Class sfnFilmStrip is used to style the storyboard film strip.
 * =============================================================================
 */
.sfnFilmStrip {
    border-right-style: solid;
    border-right-width: 1px;
    border-right-color: lightgray;
}

/*
 * =============================================================================
 * Class sfnNavigationButton is used to style the buttons in the "floating"
 * navigation button panel: the side button bar.
 * =============================================================================
 */

.sfnNavigationButton, .sfnNavigationButton:active {
    background-color: #98b6d3 /* --lightfoot-blue-03 */ ;
    border-radius:    5px;
    border:           none;
    color:            #fff;
    cursor:           pointer;
    padding-left:     10px !important;
    padding-right:    10px !important;
    padding-top:      0px !important;
    text-decoration:  none;
    text-transform:   none;
}

.sfnNavigationButton:disabled  {
    cursor: default;
}

/* Tablets, including all iPads */
@media     (min-device-width: 569px)
       and (-webkit-min-device-pixel-ratio: 1.0) {

    .sfnNavigationButton-touchDevice, .sfnNavigationButton-touchDevice:active {
        font-size: 1.25em;
        height:    30px;
    }
}

/* Phones, including all iPhones */
@media     (max-device-width: 568px)
       and (-webkit-min-device-pixel-ratio: 1.0) {

    .sfnNavigationButton-touchDevice, .sfnNavigationButton-touchDevice:active {
        font-size: 1.5em;
        height:    36px;
    }
}

/*
 * =============================================================================
 * Class sfnNavigationButtonBar is used to style the "floating"
 * navigation button panel: the side button bar.
 * =============================================================================
 */

.sfnNavigationButtonBar {
    -ms-transform:     rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform:         rotate(-90deg);
}

/*
 * =============================================================================
 * Class sfnCellTable is used to style a cell table view.
 * =============================================================================
 */
.sfnCellTable td, th {
    border:  none;
    padding: 0px;
}

.sfnCellTable tr {
    background-color: white;
    border:           none;
}

.sfnCellTable-saving {
    background-color: white;
    border-color:     black;
    border-style:     solid;
    border-width:     2px;
    padding:          20px;
}

/*
 * =============================================================================
 * Class sfnFakeHyperlink allows a label to appear to be a "hyperlink".
 * =============================================================================
 */
.sfnFakeHyperlink {
    color:           black   !important;
    cursor:          pointer !important;
    text-decoration: none    !important;
    white-space:     pre     !important;
}

.sfnFakeHyperlink:hover {
    color: #144086 /* --lightfoot-blue-25 */ !important;
}

.sfnFakeHyperlink a {
    color:           black   !important;
    cursor:          pointer !important;
    text-decoration: none    !important;
    white-space:     pre     !important;
}

.sfnFakeHyperlink a:hover {
    color: #144086 /* --lightfoot-blue-25 */ !important;
}

.sfnFakeHyperlink.sfnTab:hover {
    color: #144086 /* --lightfoot-blue-25 */ !important;
}

.sfnFakeHyperlink.sfnTab .sfnTabSelected:hover {
    border-bottom-color: #144086 /* --lightfoot-blue-25 */ !important;
    color:               #144086 /* --lightfoot-blue-25 */ !important;
}

/*
 * =============================================================================
 * Login dialog CSS
 * =============================================================================
 */

#logindialog {
    padding: 5px;
}

/*
 * Border and padding added to allow the alignment with the loginTypeButton
 * stles, which otherwise "break out" of the table.
 */
.loginTypeLabel {
    border-color:       white;
    border-radius:      32px;
    border-style:       solid;
    border-left-width:  6px;
    border-right-width: 6px;
    padding-left:       12px;
    padding-right:      12px;
    color:              #9796c0 /* --lightfoot-blue-web */ ;
    font-family:        Verdana, Arial, Helvetica, sans-serif;
    font-weight:        500;
}

.loginTypeLabel.loginTypeLabel_Small {
	border-style:  none;
    font-size:     15px;
	padding-left:  0px;
	padding-right: 0px;
}

.loginTypeLabel_Large {
    font-size: 26px;
}

.loginTypeButtonHolder {
    display: flex;
    display: -webkit-flex;  /* For Safari */
	width:   100%;
}

.loginTypeButton {
    border-color:  #9796c0 /* --lightfoot-blue-web */ ;
    border-radius: 32px;
    border-style:  solid;
    border-width:  6px;
    margin-left:   auto;
    margin-right:  auto;
    padding:       12px;
    text-align:    center;
    width:         100%;
}

.loginTypeButton td {
    height: 40px;
}

.loginTypeButtonCursor {
    cursor: pointer;
}

.loginTypeButtonText {
    color:         #9796c0 /* --lightfoot-blue-web */ ;
    font-family:   Verdana, Arial, Helvetica, sans-serif;
    font-size:     18px;
    font-weight:   600;
    white-space:   nowrap;
}

.loginTypePanel {
    margin-left: 20px;
}

.sfnLoginButtonImage_Large {
    height: 99px;
    width:  300px;
}

.sfnLoginButtonImage_Small {
    height: 84px;
    width:  255px;
}

.ssoLoginButtonImage {
    height: 84px;
    width:  85px;
}

#logindialog .Caption {
    background-color:    #fff;
    background-image:    url("images/sfnlogo_300dpi.png");
    background-position: left;
    background-repeat:   no-repeat;
    background-size:     300px 99px;
    border:              none;
    border-top:          none;
    height:              110px;
    color:               #000000;
    margin-left:         20px;
    margin-bottom:       16px;
}

.gwt-DialogBox.noCaption .Caption {
    display: none;
}

#loginContextMessageId {
    color:         #9796c0 /* --lightfoot-blue-web */ ;
    font-family:   Verdana, Arial, Helvetica, sans-serif;
    font-weight:   500;
    margin-bottom: 7px;
    margin-left:   17px;
	overflow-x:    auto;
    width:         300px;
}

.loginCommandButton, .loginCommandButton:active {
    color:           #fff;
    margin-top:      6px;
    text-transform:  lowercase;
    width:           84px;
}

#loginCancelId, #loginCancelId:active {
    background-color: #b5bbc4;
    margin-right:     18px;
}

#loginChangePasswordButtonId, #loginChangePasswordButtonId:active {
    background-color: #dc5f5f /* --lightfoot-red-web */ ;
    width:            148px;
}

#loginLoginButtonId, #loginLoginButtonId:active {
    background-color: #dc5f5f /* --lightfoot-red-web */ ;
    width:            84px;
}

#loginSetPasswordButtonId, #loginSetPasswordButtonId:active {
    background-color: #dc5f5f /* --lightfoot-red-web */ ;
    width:            128px;
}

.loginDialogLabel {
    color:          #9796c0 /* --lightfoot-blue-web */ ;
    display:        block;
    font-size:      17px;
    font-family:    Verdana, Arial, Helvetica, sans-serif;
    font-weight:    500;
    margin-left:    22px;
    vertical-align: bottom;
}

.loginDialogInput {
    border-color:  #9796c0 /* --lightfoot-blue-web */ ;
    border-radius: 6px;
    border-width:  2px;
    height:        26px;
    margin-bottom: 7px;
    margin-left:   17px;
    padding:       3px;
    width:         300px;
}

.loginDialogPasswordLink {
    color:           #9796c0 /* --lightfoot-blue-web */ ;
    font-family:     Verdana, Arial, Helvetica, sans-serif;
    font-size:       12px;
    font-weight:     500;
    margin-left:     28px;
    /* position:        absolute; */
    text-decoration: none;
    vertical-align:  middle;
}

/*
 * =============================================================================
 * The slide-out panels for Pages, Favourites and Hyperlinks all use these
 * sfnSlideOutPanelXXXX classes.
 * =============================================================================
 */
.sfnSlideOutPanelPadding {
    padding: 8px;
}

.sfnSlideOutPanelTitle {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:   18px;
    font-weight: 500;
    line-height: 18px;
}

/*
 * =============================================================================
 * Class sfnPagesPanelButton styles the command buttons on the "Pages" pop-out.
 * =============================================================================
 */
.sfnPagesPanelButton, .sfnPagesPanelButton:active {
    border-radius: 5px   !important;
    height:        24px  !important;
}

.sfnPagesPanelButton-first, .sfnPagesPanelButton-first:active {
    margin-left: 0px;
}

/* Tablets, including all iPads */
@media     (min-device-width: 569px)
       and (-webkit-min-device-pixel-ratio: 1.0) {

    .sfnPagesPanelButton-touchDevice, .sfnPagesPanelButton-touchDevice:active {
        font-size: 1.25em;
        height:    30px  !important;
    }
}

/* Phones, including all iPhones */
@media     (max-device-width: 568px)
       and (-webkit-min-device-pixel-ratio: 1.0) {

    .sfnPagesPanelButton-touchDevice, .sfnPagesPanelButton-touchDevice:active {
        font-size: 1.5em;
        height:    36px  !important;
    }
}

/*
 * =============================================================================
 * Class sfnFavouritesPanelButton styles the command buttons on the
 * "Favs" pop-out.
 * =============================================================================
 */
.sfnFavouritesPanelButton, .sfnFavouritesPanelButton:active {
    border-radius: 5px   !important;
    height:        24px  !important;
}

/* Tablets, including all iPads */
@media     (min-device-width: 569px)
       and (-webkit-min-device-pixel-ratio: 1.0) {

    .sfnFavouritesPanelButton-touchDevice, .sfnFavouritesPanelButton-touchDevice:active {
        font-size: 1.25em;
        height:    30px  !important;
    }
}

/* Phones, including all iPhones */
@media     (max-device-width: 568px)
       and (-webkit-min-device-pixel-ratio: 1.0) {

    .sfnFavouritesPanelButton-touchDevice, .sfnFavouritesPanelButton-touchDevice:active {
        font-size: 1.5em;
        height:    36px  !important;
    }
}

/*
 * =============================================================================
 * Class sfnFavouritesPanelListItem styles the items in the "Favs" pop-out.
 * =============================================================================
 */
.sfnFavouritesPanelListItem {
    margin-left: 4px;
}

/*
 * =============================================================================
 * Class sfnNavigatorPanel is used to sytle the slide-out navigator panels.
 * =============================================================================
 */
.sfnNavigatorPanel .sfnDialOrChartPanel {
   margin-bottom: 0px !important;
}

/*
 * =============================================================================
 * Class sfnHyperlinksPanel is used to style the hyperlinks panels that slide
 * out from the navigator.
 * =============================================================================
 */
.sfnHyperlinksPanel {
    padding-bottom: 5px !important;
}

/*
 * =============================================================================
 * Class sfnHyperlinksPanelEntry styles the individual links in the hyperlinks
 * panels that slide out from the navigator.
 * =============================================================================
 */
.sfnHyperlinksPanelEntry {
    font-family:   Verdana, Arial, Helvetica, sans-serif;
    font-size:     15px;
    font-weight:   500;
    margin-bottom: 4px;
    margin-left:   4px;
    margin-right:  4px;
    margin-top:    4px;
}

/*
 * =============================================================================
 * Class sfnTextBoxHeight styles text boxes.
 * =============================================================================
 */
.sfnTextBoxHeight {
    line-height: 18px;
}

/*
 * =============================================================================
 * Class sfnMultiSelectLaunchLabel styles the label on the UI to launch the
 * multi-selection dialog from the "list". Class sfnMultiSelectLaunchButton
 * styles the button in the same UI.
 * =============================================================================
 */
.sfnMultiSelectLaunchLabel {
    background-color: white;
    height:           19px;
    margin-top:       0px;
    padding-bottom:   0px;
    padding-left:     2px;
    padding-right:    2px;
    padding-top:      3px;
}

.sfnMultiSelectLaunchButton, .sfnMultiSelectLaunchButton:active {
    background-color: #98b6d3 /* --lightfoot-blue-03 */ ;
    color:            white;
    cursor:           pointer;
    border:           solid;
    border-color:     #98b6d3 /* --lightfoot-blue-03 */ ;
    font-size:        10px;
    height:           24px;
    margin-left:      3px;
    padding-left:     4px;
    width:            24px;
    /*
     * A trick for Firefox, otherwise some pixels are added to the height,
     * and it is aligned below the label to the left:
     */
    vertical-align:      top;
}

.sfnShiftButton, .sfnShiftButton:active {
    background-color: white;
    color:            #98b6d3 /* --lightfoot-blue-03 */ ;
    cursor:           pointer;
    border:           solid;
    border-color:     #98b6d3 /* --lightfoot-blue-03 */ ;
    font-size:        10px;
    height:           24px;
    margin-left:      3px;
    padding-left:     4px;
    width:            24px;
    /*
     * A trick for Firefox, otherwise some pixels are added to the height,
     * and it is aligned below the label to the left:
     */
    vertical-align:   top;
}

.sfnShiftButton:disabled {
    border-color: #C0C0C0;
    color:        #C0C0C0;
    cursor:       default;
}

/*
 * =============================================================================
 * Class sfnMultiSelectDialogButton styles the command buttons in the
 * multi-selection dialog.
 * =============================================================================
 */
.sfnMultiSelectDialogButton, .sfnMultiSelectDialogButton:active {
    width: 136px;
}

/*
 * =============================================================================
 * Class sfnSpacer styles the empty column spacers in the dynamic overrides
 * component when in edit mode.
 * =============================================================================
 */
.sfnSpacer {
    width:         100%;
    height:        25px;
    margin-bottom: 2px;
    margin-top:    1px;
}

.sfnSpacer div {
    background-color: #E0E0E0;
    border-color:     black;
    border-style:     solid;
    border-width:     1px;
    height:           100%;
}

/*
 * =============================================================================
 * Class sfnDynamicOverridesLabel styles labels in the dynamic overrides
 * component, to align with the selectors.
 * =============================================================================
 */
.sfnDynamicOverridesLabel {
    padding-top: 5px;
}

.sfnPanelLabel .sfnPanelLabelMultiList .sfnDynamicOverridesLabel {
    padding-top: 6px;
}

.sfnEditableTabLabel .sfnDynamicOverridesLabel {
    padding-top: 6px;
}

.sfnTabLabel .sfnDynamicOverridesLabel {
    padding-top: 6px;
}

/*
 * =============================================================================
 * Class sfnDynamicOverridesCommandButton styles the command buttons (above and
 * beyond the sfnCommandButton class) when visible in the dynamic
 * overrides component.
 * =============================================================================
 */
.sfnDynamicOverridesCommandButton, .sfnDynamicOverridesCommandButton:active {
    margin-bottom: 0px;
    margin-left:   10px;
    margin-right:  1px;
    margin-top:    3px;
}

.sfnDynamicOverridesCommandButtonSecondRow, sfnDynamicOverridesCommandButtonSecondRow:active {
    margin-top: 9px !important;
}

.sfnDynamicOverridesOKButtonEnabled, .sfnDynamicOverridesOKButtonEnabled:active {
    background-color: #60CD76 !important  /* --lightfoot-chart-green-06 */;
}

.sfnDynamicOverridesPanelHasChanges {
    background-color: #D0D0D0;
}

/*
 * =============================================================================
 * Class sfnDialogButton_XXX styles most command buttons in setting dialogs,
 * alert and confirmation dialogs, etc.
 * =============================================================================
 */
/*
.sfnDialogButton_OnlyClose .sfnDialogButton_OnlyClose:active {
    width: 59px;
}

.sfnDialogButton_OnlyOK, .sfnDialogButton_OnlyOK:active {
    width: 41px;
}

.sfnDialogButton_WithCancel, .sfnDialogButton_WithCancel:active {
    width: 68px;
}

.sfnDialogButton_WithProceed, .sfnDialogButton_WithProceed:active {
    width: 78px;
}

.sfnDialogButton_WithReselect, .sfnDialogButton_WithReselect:active {
    width: 84px;
}

.sfnDialogButton_WithYes, .sfnDialogButton_WithYes:active {
    width: 44px;
}
*/

/*
 * =============================================================================
 * Class sfnKeepOrReplaceOriginalsButton styles the buttons in the dialog
 * displayed when taking snapshots within panels.
 * =============================================================================
 */
.sfnKeepOrReplaceOriginalsButton, .sfnKeepOrReplaceOriginalsButton:active {
    margin-left: 0px !important;
}

/*
 * =============================================================================
 * The sfnCloseUnsavedPagesButton_XXX classes are for buttons in the dialogs
 * when closing one or more pages with unsaved changes.
 * =============================================================================
 */
/*
.sfnCloseUnsavedPagesButton_SinglePageIsChanged, .sfnCloseUnsavedPagesButton_SinglePageIsChanged:active {
    width: 190px;
}

.sfnCloseUnsavedPagesButton_MultiplePagesAllChanged, .sfnCloseUnsavedPagesButton_MultiplePagesAllChanged:active {
    width: 198px;
}

.sfnCloseUnsavedPagesButton_SingleUnchangedPage, .sfnCloseUnsavedPagesButton_SingleUnchangedPage:active {
    width: 225px;
}

.sfnCloseUnsavedPagesButton_MultipleUnchangedPages, .sfnCloseUnsavedPagesButton_MultipleUnchangedPages:active {
    width: 233px;
}
*/

/*
 * =============================================================================
 * Class sfnDiscardEditsDialogButton styles the buttons on the dialog displayed
 * when unsaved user edits exist.
 * =============================================================================
 */
.sfnDiscardEditsDialogButton, .sfnDiscardEditsDialogButton:active {
    width: 75px;
}

/*
 * =============================================================================
 * Class sfnMultiSelectTreeSelection styles the selected nodes in
 * multi-select trees.
 * =============================================================================
 */
.sfnMultiSelectTreeSelection {
    background-color: #e3e3e3 /* --lightfoot-grey-16 */ ;
}

/*
 * =============================================================================
 * Class sfnPopupCloseButtonWithImage styles the close button with image on the
 * pop-up panels.
 * =============================================================================
 */
.sfnPopupCloseButtonWithImage {
    margin-bottom: 3px;
}

/*
 * =============================================================================
 * Class sfnSlideNavigatorPanel styles the little UI to show or hide the film
 * strip, and to move back and forwards between the slides, and class
 * sfnSlideNavigatorPanelLabel the labels within it.
 * =============================================================================
 */
.sfnSlideNavigatorPanel {
    margin-top: 1px;
}

.sfnSlideNavigatorPanelLabel {
    padding-top: 2px;
}

/*
 * =============================================================================
 * Class sfnMultiLabelListButton styles the button on multi-label lists.
 * =============================================================================
 */
.sfnMultiLabelListButton, .sfnMultiLabelListButton:active {
    font-size:      18px;
    height:         20px;
    line-height:    12px;
    margin-left:    2px;
    margin-top:     2px;
    padding-bottom: 0px;
    padding-left:   5px;
    padding-right:  5px;
    padding-top:    4px;
}

.sfnMultiLabelListLabel {
    line-height: 20px;
    padding-top: 6px;
}

.sfnTabContentPanel .sfnMultiLabelListLabel {
    padding-top: 5px;
}

.sfnMultiLabelListPanel {
    background-color: white;
    border-color:     #98b6d3 /* --lightfoot-blue-03 */ ;
    border-radius:    5px;
    border-style:     solid;
    border-width:     1px;
    margin-top:       2px;
    padding:          3px;
}

/*
 * =============================================================================
 * Class sfnNoOutline removes the outline.
 * =============================================================================
 */
.sfnNoOutline {
    outline: none !important;
}

/*
 * =============================================================================
 * Class sfnMultiCIdStringPanel styles the panel containing the multiple cId
 * editors in the multi-cId editor dialog.
 * =============================================================================
 */
.sfnMultiCIdStringPanel {
    height:    200px;
    min-width: 206px;
}

/*
 * =============================================================================
 * Class sfnMuliCidStringDialogButton styles the buttons under the cId editors
 * in the multi-cId editor dialog.
 * =============================================================================
 */
/*
.sfnMuliCidStringDialogButton, .sfnMuliCidStringDialogButton:active {
    width: 118px;
}
*/

/*
 * =============================================================================
 * Class sfnModelDirectoryRestricted is used to  decorate items in the Model
 * Directory that are visible but inaccessible.
 * =============================================================================
 */

.sfnModelDirectoryRestricted {
    filter:  alpha(opacity=40); /* For IE8 and earlier */
    font-style: italic;
    opacity: 0.4;
}

/*
 * =============================================================================
 * Class sfnDefaultCursor forces the mouse cursor to be the default.
 * =============================================================================
 */

.sfnDefaultCursor {
    cursor: default !important;
}

/*
 * =============================================================================
 * Class sfnTableListCaption configures the caption at the top of the user's
 * table list.
 * =============================================================================
 */
.sfnTableListCaption {
    font-size: 17px;
}

/*
 * =============================================================================
 * Class sfnPagerButton is used to style the image buttons on the table pagers.
 * =============================================================================
 */
.sfnPagerButton {
    height: 25px;
    width:  25px;
}

/*
 * =============================================================================
 * Class sfnPagerButtonFlipVertically is used to create a fast reverse image
 * from the supplied fast forward image.
 * =============================================================================
 */
.sfnPagerButtonFlipVertically {
    transform: rotateY(180deg);
}

/*
 * =============================================================================
 * Class html5DropdownList styles the HTML 5 drop-down list box.
 * =============================================================================
 */
.html5DropdownList {
    background-color: white;
    border-radius:    5px;
    border-style:     none;
    box-shadow:       0px 8px 16px 0px rgba(0,0,0,0.2);
    padding:          2px;
}

/*
 * =============================================================================
 * Class html5DropdownListItem styles the HTML 5 drop-down list box items.
 * =============================================================================
 */

.html5DropdownListItem {
    border-color:  white;
    border-style:  solid;
    border-radius: 5px;
    border-width:  1px;
}

.html5DropdownListItem:hover {
    background:    #f5a5a5 /* --lightfoot-red-21 */ !important;
    border-color:  #f5a5a5 /* --lightfoot-red-21 */ ;
    color:         white !important;
}

/*
 * =============================================================================
 * Class html5DropdownListItemSelected styles the HTML 5 drop-down list box
 * items that are selected.
 * =============================================================================
 */
.html5DropdownListItemSelected {
    background:    white;
    border-color:  #f5a5a5 /* --lightfoot-red-21 */ ;
    border-style:  solid;
    border-radius: 5px;
    border-width:  1px;
    /* color:       #f5a5a5 /* --lightfoot-red-21 */ ;
    font-weight:   bold;
}

/*
 * =============================================================================
 * Class sfnAlertDialog styles single-line message alert dialogs to prevent
 * them extending beyond the screen.
 * =============================================================================
 */
.sfnAlertDialog {
    max-height: 95%;
    max-width:  95%;
    overflow:   hidden !important;
}

/*
 * =============================================================================
 * Class sfnTableCellCommandButton is used as an extension of sfnCommandButton
 * to configure the command buttons that launch external editors in cell tables.
 * =============================================================================
 */
.sfnTableCellCommandButton {
}

.sfnTableCellCommandButton:disabled {
	background-color: #9796c0 /* --lightfoot-blue-web */ ;
}

/*
 * =============================================================================
 * Classes sfnTableRowStatusNormal, etc., are used to style table row
 * status flags.
 * =============================================================================
 */
.sfnTableRowStatusNormal {
	color:       blue;
	font-weight: bold;
	margin-left: 10px;
	width:       16px;
}

.sfnTableRowStatusModifiedWarning {
	background-color: gold;
	color:            blue;
	font-weight:      bold;
	margin-left:      10px;
	width:            16px;
}

.sfnTableRowStatusUnmodifiedWarning {
	background-color: gold;
	color:            black;
	font-weight:      bold;
	margin-left:      10px;
	width:            16px;
}

.sfnTableRowStatusError {
	color:       red;
	font-weight: bold;
	margin-left: 10px;
	width:       16px;
}

/*
 * =============================================================================
 * Class sfnChartSeriesListHeight styles property dialog lists of
 * chart series properties.
 * =============================================================================
 */
.sfnChartSeriesListHeight {
    height: 600px;
}

/*
 * =============================================================================
 * Class gwt-SplitLayoutPanel-HDragger modified for the Viewer.
 * =============================================================================
 */
.gwt-SplitLayoutPanel-HDragger {
    background-color: #98b6d3 /* --lightfoot-blue-03 */ ;
}

/*
 * =============================================================================
 * Class gwt-SplitLayoutPanel-VDragger modified for the Viewer.
 * =============================================================================
 */
.gwt-SplitLayoutPanel-VDragger {
    background-color: #98b6d3 /* --lightfoot-blue-03 */ ;
}

/*
 * =============================================================================
 * Class sfnTreeItemNotFullWidth enables us to have Trees whose nodes don't
 * fit the whole width of the container if they don't need to.
 * =============================================================================
 */
.sfnTreeItemNotFullWidth {
    width: fit-content;
}

/*
 * =============================================================================
 * Class sfnOverflowVisible just allows full overflow.
 * =============================================================================
 */
.sfnOverflowVisible {
    overflow: visible;
}

/*
 * =============================================================================
 * Class initialDrilldownDimension decorates an initial drilldown dimension.
 * =============================================================================
 */
.initialDrilldownDimension {
    border-color:  black;
    border-radius: 5px;
    border-style:  dotted;
    border-width:  1px;
}

/*
 * =============================================================================
 * Various classes to specify the images to use for the icons in explorer trees.
 * =============================================================================
 */
.treeNodeImage {
    background-size: 20px;
    border:          none;
    display:         inline-block;
    height:          20px;
    float:           right;
    margin-left:     3px;
    outline:         none;
    width:           20px;
}

.classNode .treeNodeImage {
    background: url("images/class.png") no-repeat 0 0;
}

.compoundMeasureNode .treeNodeImage {
    background: url("images/compoundMeasure.png") no-repeat 0 0;
}

.existsNode .treeNodeImage {
    background: url("images/exists.png") no-repeat 0 0;
}

.filterNode .treeNodeImage {
    background: url("images/filter.png") no-repeat 0 0;
}

.functionNode .treeNodeImage {
    background: url("images/func.png") no-repeat 0 0;
}

.geographyNode .treeNodeImage {
    background: url("images/geog.png") no-repeat 0 0;
}

.measureNode .treeNodeImage {
    background: url("images/measure.png") no-repeat 0 0;
}

.negativeCohortNode .treeNodeImage {
    background: url("images/negCohort.png") no-repeat 0 0;
}

.parameterDateNode .treeNodeImage {
    background: url("images/paramDate.png") no-repeat 0 0;
}

.parameterNumberNode .treeNodeImage {
    background: url("images/paramNumber.png") no-repeat 0 0;
}

.positiveCohortNode .treeNodeImage {
    background: url("images/posCohort.png") no-repeat 0 0;
}