﻿
/*///////////////////////////////////////////////////////////////////////////////////
//
//  WEB FONTS
//
//////////////////////////////////////////////////////////////////////////////////*/

@font-face {
    font-family: 'source_sans_prolight';
    src: url('fonts/sourcesanspro-light-webfont.eot');
    src: url('fonts/sourcesanspro-light-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/sourcesanspro-light-webfont.woff2') format('woff2'), url('fonts/sourcesanspro-light-webfont.woff') format('woff'), url('fonts/sourcesanspro-light-webfont.ttf') format('truetype'), url('fonts/sourcesanspro-light-webfont.svg#source_sans_prolight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'source_sans_proregular';
    src: url('fonts/sourcesanspro-regular-webfont.eot');
    src: url('fonts/sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/sourcesanspro-regular-webfont.woff2') format('woff2'), url('fonts/sourcesanspro-regular-webfont.woff') format('woff'), url('fonts/sourcesanspro-regular-webfont.ttf') format('truetype'), url('fonts/sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'source_sans_prosemibold';
    src: url('fonts/sourcesanspro-semibold-webfont.eot');
    src: url('fonts/sourcesanspro-semibold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/sourcesanspro-semibold-webfont.woff2') format('woff2'), url('fonts/sourcesanspro-semibold-webfont.woff') format('woff'), url('fonts/sourcesanspro-semibold-webfont.ttf') format('truetype'), url('fonts/sourcesanspro-semibold-webfont.svg#source_sans_prosemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'source_sans_probold';
    src: url('fonts/sourcesanspro-bold-webfont.eot');
    src: url('fonts/sourcesanspro-bold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/sourcesanspro-bold-webfont.woff2') format('woff2'), url('fonts/sourcesanspro-bold-webfont.woff') format('woff'), url('fonts/sourcesanspro-bold-webfont.ttf') format('truetype'), url('fonts/sourcesanspro-bold-webfont.svg#source_sans_probold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'source_sans_proitalic';
    src: url('fonts/sourcesanspro-it-webfont.eot');
    src: url('fonts/sourcesanspro-it-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/sourcesanspro-it-webfont.woff2') format('woff2'), url('fonts/sourcesanspro-it-webfont.woff') format('woff'), url('fonts/sourcesanspro-it-webfont.ttf') format('truetype'), url('fonts/sourcesanspro-it-webfont.svg#source_sans_proitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'source_sans_prosemibolditalic';
    src: url('fonts/sourcesanspro-semiboldit-webfont.eot');
    src: url('fonts/sourcesanspro-semiboldit-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/sourcesanspro-semiboldit-webfont.woff2') format('woff2'), url('fonts/sourcesanspro-semiboldit-webfont.woff') format('woff'), url('fonts/sourcesanspro-semiboldit-webfont.ttf') format('truetype'), url('fonts/sourcesanspro-semiboldit-webfont.svg#source_sans_proSBdIt') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*///////////////////////////////////////////////////////////////////////////////////
//
//  ELEMENT OVERRIDES
//
///////////////////////////////////////////////////////////////////////////////////*/

body {
    background-image: url(../graphics/background.png);
    background-repeat: repeat-x;
    color: #004b75;
}

/*///////////////////////////////////////////////////////////////////////////////////
//
//  SCROLLBAR OVERRIDES (FOR WEBKIT ONLY)
//
///////////////////////////////////////////////////////////////////////////////////*/

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-button {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-thumb {
    background: #4e90bc;
    border: 0px none #ffffff;
    border-radius: 5px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #4e90bc;
    }

    ::-webkit-scrollbar-thumb:active {
        background: #4e90bc;
    }

::-webkit-scrollbar-track {
    background: transparent;
    border: 0px none #ffffff;
    border-radius: 5px;
}

    ::-webkit-scrollbar-track:hover {
        background: transparent;
    }

    ::-webkit-scrollbar-track:active {
        background: transparent;
    }

::-webkit-scrollbar-corner {
    background: transparent;
}

/*///////////////////////////////////////////////////////////////////////////////////
//
//  BOOTSTRAP OVERRIDES
//
///////////////////////////////////////////////////////////////////////////////////*/

.container-fluid-override {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

/* override Bootstrap alert to match artwork rules */
.alert-override {
    border: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
}

    .alert-override > button > img {
        width: 1em;
        height: 1em;
    }

/* override Bootstrap alert-warning to match artwork rules */
.alert-warning-override {
    color: #f7f7f7;
    background-image: none;
    background-color: #e55d33;
}

/* override Bootstrap alert-danger to match artwork rules */
.alert-danger-override {
    color: #f7f7f7;
    background-image: none;
    background-color: #a00d0d;
}

/* override Bootstrap alert-success to match artwork rules */
.alert-success-override {
    color: #f7f7f7;
    background-image: none;
    background-color: #0da00d;
}

/* override Bootstrap alert-info to match artwork rules */
.alert-info-override {
    color: #004b75;
    border: 1px solid #78838a !important;
    background-color: #ddd !important;
}

/* override Bootstrap breadcrumb to match artwork rules */
.breadcrumb-override {
    background-color: transparent !important;
    margin-bottom: 0px;
    padding: 5px 0px;
}

    /* get rid of the slashes in Bootstrap's breadcrumb */
    .breadcrumb-override > li + li:before {
        content: none;
    }

/* override Bootstrap breadcrumb-expander to match artwork rules */
/* SVG image instead of glyphicon for expanders. */
.breadcrumb-expander-override {
    margin-left: 5px;
    width: 16px;
    height: 16px;
    margin-top: -2px;
}

/* override Bootstrap btn to match artwork rules */
.btn-override {
    border-bottom: none;
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 5px;
}

/* a button within an input group */
.input-group-btn-override {
    font-size: inherit;
}

/* override Bootstrap btn-info to match artwork rules */
.btn-info-override {
    text-shadow: none;
    box-shadow: none;
    background-image: none;
    filter: none;
    background-color: #4e90bc;
    border-radius: 5px;
}

/* override Bootstrap btn-link to match artwork rules */
.btn-link-override,
.btn-link-override:focus,
.btn-link-override:active,
.btn-link-override:hover {
    text-decoration: none;
    color: #00538a;
    border-radius: 5px;
}

/* override Bootstrap btn-primary to match artwork rules */
.btn-primary-override {
    font-size: inherit;
    text-shadow: none;
    box-shadow: none;
    background-image: none;
    filter: none;
    background-color: #00538a;
    color: #f8f8f8;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 5px;
}

    .btn-primary-override:focus,
    .btn-primary-override:active,
    .btn-primary-overirde:active:hover,
    .btn-primary-override:hover {
        background-color: #00538a !important;
        color: #f8f8f8 !important;
        background-position: 0 0;
        border-radius: 5px;
    }

/* override Bootstrap btn-success to match artwork rules */
.btn-success-override {
    background: linear-gradient(to bottom, #7f7f7f 80%,#8fc592 80%,#8fc592 95%,#7f7f7f 95%,#8fc592 95%,#7f7f7f 100%);
    border-radius: 5px;
}

    .btn-success-override:focus,
    .btn-success-override:active,
    .btn-success-override:hover {
        background-color: #7f7f7f;
        background-position: 0 0;
        border-radius: 5px;
    }

/* override Bootstrap btn-danger to match artwork rules */
.btn-danger-override {
    background: #a00d0d;
    border-radius: 5px;
}

    .btn-danger-override:focus,
    .btn-danger-override:active,
    .btn-danger-override:active:hover,
    .btn-danger-override:hover {
        background-color: #a00d0d !important;
        background-position: 0 0 !important;
        border-radius: 5px;
    }

/* override Bootstrap btn-warning to match artwork rules */
.btn-warning-override {
    background: #e55d33;
    font-size: inherit;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 5px;
}

    .btn-warning-override:focus,
    .btn-warning-override:active,
    .btn-warning-override:active:hover,
    .btn-warning-override:hover {
        background-color: #e55d33 !important;
        background-position: 0 0 !important;
        border-radius: 5px !important;
    }

.dropdown-menu-override {
    max-height: 300px;
    overflow-x: auto;
}

    .dropdown-menu-override > li > a,
    .dropdown-menu-override > li > a:hover,
    .dropdown-menu-override > li > a:focus,
    .dropdown-menu-override > li > a:hover {
        color: #4d4d4d;
    }

.navigator-dropdown-menu-override {
    display: block;
    top: auto;
    left: auto;
}

    .navigator-dropdown-menu-override > li > a,
    .navigator-dropdown-menu-override > li > a:hover,
    .navigator-dropdown-menu-override > li > a:focus,
    .navigator-dropdown-menu-override > li > a:hover {
        color: #4d4d4d;
    }

/* override Bootstrap form-control to match artwork rules */
.form-control-override {
    border: 1px solid #78838a;
    background-color: #f8f8f8;
    color: #00538a;
}

    .form-control-override:focus {
        border-color: #669496;
    }

    .form-control-override:invalid {
    }

    .form-control-override::after valid {
    }

/* override Bootstrap horizontal line */
.hr-override {
    margin-top: 10px;
    margin-bottom: 10px;
}

/* override Bootstrap list-group-item to match artwork rules */
.list-group-item-override {
    background-color: inherit;
    color: #00538a;
}

/* override Bootstrap list-group-item-info to match artwork rules */
.list-group-item-info-override-level-1 {
    background-color: inherit;
}

a.list-group-item {
    color: #00538a;
}

a.list-group-item:active,
a.list-group-item:hover,
a.list-group-item:focus {
    color: #00538a;
}

a.list-group-item-info-override-level-1,
a.list-group-item-info-override-level-1:active,
a.list-group-item-info-override-level-1:hover,
a.list-group-item-info-override-level-1:focus {
    background-color: #2b6890;
    color: #f8f8f8;
}

/* override Bootstrap panel to match artwork rules */
.panel-override {
    box-shadow: none;
    background-image: none !important;
    /*background-color: #c5d0d7;*/
    background-color: #ececec;
    border: 1px solid #78838a;
}

/* override Bootstrap panel-primary to match artwork rules */
.panel-primary-override {
    background-image: none !important;
    /*background-color: #c5d0d7;*/
    background-color: #ececec;
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 0;
}

    .panel-primary-override > .panel-heading-override {
        background-image: none !important;
        background-color: #4e90bc;
        padding-top: 5px;
        padding-bottom: 0px;
    }

/* override Bootstrap panel-default to match artwork rules */
.panel-default-override > .panel-heading-override {
    background-image: none !important;
    vertical-align: text-top;
    padding-top: 5px;
    padding-bottom: 0px;
    background-color: #4e90bc;
    color: #f8f8f8;
}

/* remove padding at the bottom of the panel body */
.panel-body-no-bottom-padding {
    padding-bottom: 0px
}

/* override Bootstrap progress to match artwork rules */
.progress-override {
    border: 1px solid #78838a;
}

/* override Bootstrap progress to match artwork rules */
/* used for the batch progress */
.progress-override-overall {
    height: 40px;
    background-image: none;
    margin-bottom: 0px;
}

/* used for the batch progress - small progress-bar */
.progress-override-overall-small {
    height: 30px;
    background-image: none;
    margin-bottom: 0px;
}

/* override Bootstrap progress-bar to match artwork rules */
.progress-bar-override {
    border-radius: 4px; /* so bar doesn't lose corners when in the large (overall) container */
    text-shadow: none;
    box-shadow: none;
    background-image: none;
    filter: none;
    background-color: #004b75;
    color: #f8f8f8;
}

/* override Bootstrap progress-bar to match artwork rules - small progress-bar */
.progress-bar-override-small {
    border-radius: 4px; /* so bar doesn't lose corners when in the large (overall) container */
    text-shadow: none;
    box-shadow: none;
    background-image: none;
    filter: none;
    background-color: #004b75;
    color: #f8f8f8;
}

/* override Bootstrap progress-bar-warning to match artwork rules */
.progress-bar-warning-override {
    background-color: #e55d33;
    color: #fe9e2c;
}

/* override Bootstrap progress-bar-danger to match artwork rules */
.progress-bar-danger-override {
    background-color: #a00d0d;
    color: #f8f8f8;
}

/* override Bootstrap progress-bar-success to match artwork rules */
.progress-bar-success-override {
    background-color: #0da00d;
    color: #f8f8f8;
}

/* override Bootstrap table-bordered to match artwork rules */
.table-bordered-override {
    border: none !important;
    border-collapse: separate;
}
    /* border not allowed on header row */
    .table-bordered-override > thead > tr {
        border: none !important;
    }

        /* border not allowed on header row */
        .table-bordered-override > thead > tr > th {
            border: none !important;
            font-family: source_sans_prosemibold, sans-serif;
            font-weight: normal;
            font-size: 13pt;
        }

    /* border on table body to match artwork specs */
    .table-bordered-override > tbody > tr > td {
        border: 1px solid #78838a;
        border-color: #78838a !important;
    }

    /* no borders between rows but border on the table bottom (bottom of last row) */
    .table-bordered-override > tbody > tr:not(:last-child) > td {
        border-bottom: none !important;
    }

    /* rounded corner on UL of table */
    .table-bordered-override > tbody > tr:first-child > td:first-child {
        border-radius: 3px 0px 0px 0px !important;
    }

    /* rounded corner on UR of table */
    .table-bordered-override > tbody > tr:first-child > td:last-child {
        border-radius: 0px 3px 0px 0px !important;
    }

    /* rounded corner on UR of table */
    .table-bordered-override > tbody > tr:first-child > td:only-child {
        border-radius: 3px 3px 0px 0px !important;
    }

    /* rounded corner on LL of table */
    .table-bordered-override > tbody > tr:last-child > td:first-child {
        border-radius: 0px 0px 0px 3px !important;
    }

    /* rounded corner on LR of table */
    .table-bordered-override > tbody > tr:last-child > td:last-child {
        border-radius: 0px 0px 3px 0px !important;
    }

    /* rounded corner on LR of table */
    .table-bordered-override > tbody > tr:last-child > td:only-child {
        border-radius: 0px 0px 3px 3px !important;
    }

    /* rounded corner on UR of table */
    .table-bordered-override > tbody > tr:only-child > td:last-child {
        border-radius: 0px 3px 3px 0px !important;
    }

    /* rounded corner on LL of table */
    .table-bordered-override > tbody > tr:only-child > td:first-child {
        border-radius: 3px 0px 0px 3px !important;
    }

    /* rounded corner on LL of table */
    .table-bordered-override > tbody > tr:only-child > td:only-child {
        border-radius: 3px 3px 3px 3px !important;
    }

    /* no border between columns */
    .table-bordered-override > tbody > tr > td:not(:first-child) {
        border-left: none !important;
    }

    /* no border between columns */
    .table-bordered-override > tbody > tr > td:not(:last-child) {
        border-right: none !important;
    }

.text-info-override {
    color: #4d4d4d;
}

/*///////////////////////////////////////////////////////////////////////////////////
//
//  Hub Layout Template
//
///////////////////////////////////////////////////////////////////////////////////*/
/**/
.hub-layout {
}

/* Contains the classes for the header area of a hub */
.hub-header {
}

/* For the menu bar in the header area */
.hub-app-line {
}

/* For the workflow title line */
.hub-workflow-line {
}

/* For the navigator control line */
.hub-navigator-line {
}

/* For the alerts -errors, warning, instructions etc. */
.hub-alert-line {
}

.hub-header-workflow-divider {
}

/* contains the required classes that affects a hub's workflow area, which contains the 
   hub steps container, the divider control and the action container */
.hub-workflow {
}

/* Contains the hub's concept container*/
.hub-steps {
}

/* Contains the hub's vertical divider*/
.hub-steps-actions-divider {
}

/* Contains the hub's action container*/
.hub-actions {
}

/*///////////////////////////////////////////////////////////////////////////////////
//
//  Landing Page Template
//
///////////////////////////////////////////////////////////////////////////////////*/
/**/
.landing-page-layout {
}

/* contains the classes for the header area */
.landing-page-header {
}

/* for the menu bar in the header area */
.landing-page-app-line {
}

/* for page title*/
.landing-page-title-line {
}

/* for the alerts -errors, warning, instructions etc. */
.landing-page-alert-line {
}

.landing-page-header-body-divider {
}

.landing-page-body {
    margin: 15px -15px 0px -15px;
}

.landing-page-content {
    /* need some more testing */
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    width: 75%;
    float: left;
}

.landing-page-content-actions-divider {
}

/* contains the pages's action container */
.landing-page-actions {
    /* need some more testing */
    width: 25%;
    float: left;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

/*///////////////////////////////////////////////////////////////////////////////////
//
//  WIZARD TEMPLATE
//
///////////////////////////////////////////////////////////////////////////////////*/
/**/
.wizard-layout {
}
/* contains the classes for the header area of a wizard */
.wizard-header {
} 
/* for the menu bar in the header area*/
.wizard-app-line {
}
/* for the workflow title line*/
.wizard-workflow-line {
}
/* for the navigator control line */
.wizard-navigator-line {
}
/* for the alerts -errors, warning, instructions etc. */
.wizard-alert-line {
}

.wizard-header-workflow-divider {
}

/* Contains the required classes that affects a wizard's workflow area, which contains the 
   wizard steps container, the divider control and the action container */
.wizard-workflow {
}

/* contains the wizard's concept container */
.wizard-steps {
}

/* contains the wizard's vertical divider */
.wizard-steps-actions-divider {
}

/* contains the wizard's action container */
.wizard-actions {
}

/* contains the wizard's large icon in corner */
.wizard-concept-large-icon {
    position: relative;
    top: 60px;
    right: 60px;
    width: 132px;
    height: 132px;
}

/*///////////////////////////////////////////////////////////////////////////////////
//
//  PICKFILL (DESIGNER/SCHEDULER) LAYOUT
//
///////////////////////////////////////////////////////////////////////////////////*/
.pickfill-layout {
    min-width:1000px;
}

/* contains the classes for the header area of a pickfill workflow */
.pickfill-header {
}

/* for the menu bar in the header area */
.pickfill-app-line {
}

/* for the workflow title line */
.pickfill-workflow-line {
}

/* for the navigator control line */
.pickfill-navigator-line {
}

/* for the alerts -errors, warning, instructions etc. */
.pickfill-alert-line {
}

.pickfill-header-workflow-divider {
}

/* Contains the required classes that affects a main workflow area, which contains elements gallery,
   preview surface and properties or actions */
.pickfill-workflow {
display:inline-block;
width:100%;
}
    
/* based on https://www.w3schools.com/howto/howto_css_three_columns.asp to divide div into vertical */
.pickfill-workflow:after {
    content: "";
    display: table;
    clear: both;
    }

/* outer container for the elements gallery, including heading and separator bar */
.pickfill-elements-gallery-container {
    float: left;
    width: 24%;
    padding: 0px 5px 0px 10px;
}

/* inner container (scrollable) for the elements gallery */
.pickfill-elements-gallery {
    overflow-y: auto;
}

/* outer container for the preview surface */
.pickfill-preview-surface-container {
    float: left;
    width: 50%;
    padding: 0px 5px 0px 5px;
    height: 100%;
}

.pickfill-preview-surface {
    border: groove;
    margin: 10px 0px 0px 0px;
}

/* outer container for the property sheet, including heading and separator bar */
.pickfill-properties-container {
    float: left;
    width: 25%;
    padding: 0px 0px 0px 5px;
}

/* inner container (scrollable) for the property sheet */
.pickfill-properties {    
    overflow-y: auto;
}

.pickfill-elements-preview-separator {
    float: left;
    width: 1%;
}

.pickfill-preview-properties-separator {
    float: left;
    width: 1%;
}
/*///////////////////////////////////////////////////////////////////////////////////
//
//  MENU BAR
//
///////////////////////////////////////////////////////////////////////////////////*/
/* menu bar for all SPA's */
.menu-bar {
    z-index: -1; /* under the blackout sheet */
    background-color: #00538a;
    color: #f8f8f8;
    padding: 0px 0px;
}

/* popups like the App Launcher that have an anchored popup and do not black out the area of the page not covered by the popup */
.menu-bar-anchored-popup {
    position: absolute;
    right: 4px;
    top: 30px; /* bottom of glyphicons in menubar */
    min-width: 350px;
    z-index: 100; /* over the blackout sheet */
}

/* content in an anchored popup */
.menu-bar-anchored-popup-content {
    background-color: #d9d9d9;
    position: absolute;
    left: 0px;
    top: 28px;
    width: 100%;
    border: 1px solid #78838a;
    border-radius: 4px 4px;
    z-index: 101;
    padding: 20px;
}

/* icon in the app launcher.  Must override Bootstrap's coloring of thumbnail and anchor */
.menu-bar-app-launcher-icon,
.menu-bar-app-launcher-icon:hover,
.menu-bar-app-launcher-icon:active,
.menu-bar-app-launcher-icon:visited {
    background-color: #d9d9d9;
    text-decoration: none;
    border: none !important;
    box-shadow: none !important;
}

/* the icon image displayed as part of a shortcut */
.menu-bar-app-launcher-icon-image {
    width: 70px;
    height: 70px;
    margin: 10px 0px;
}

/* name of app inside app launcher icon */
.menu-bar-app-launcher-icon-label {
    font-size: 11pt;
}

/* clickable text in menu bar that shows the application title */
.menu-bar-app-title {
    text-decoration: none;
    color: #f8f8f8;
    font-family: source_sans_prolight, sans-serif;
    font-size: 18pt;
    padding-top: 0px;
    padding-bottom: 0px;
}

    .menu-bar-app-title:hover,
    .menu-bar-app-title:active,
    .menu-bar-app-title:visited {
        color: #f8f8f8;
    }

/* semi-transparent covering of browser client area under a popup menu */
.menu-bar-blackout-sheet {
    z-index: 99; /* under popup menus but over everything else on the page */
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    background-color: #333333;
    opacity: 0.7;
}

/* glyphs used for buttons on menu bar */
.menu-bar-button-glyph {
    width: 24px;
    height: 24px;
}

.menu-bar-dss-glyph {
    height: 24px;
    margin-top: 8px;
}

/* vertical spacing between current password and new password instructions */
.menu-bar-change-password-instructions-container {
    padding-top: 15px;
}

/* glyph used in several places as a close button for popup views */
.menu-bar-close-popup-icon {
    margin: 12px;
    font-size: 32px;
    width: 32px;
    height: 32px;
}

/* overlay SPA's like My Profile and Change Password that are part of the menu bar */
.menu-bar-current-spa-action-overlay {
    z-index: 101; /* over everything else on the page */
    position: fixed;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    background: linear-gradient(#cacaca, #e5e5e5);
}

/* close button in faux menubar of an action overlay */
.menu-bar-current-spa-action-overlay-close-icon {
    margin-left: 12px;
    width: 24px;
    height: 24px;
}

/* vertical space between faux menu bar in action overlay and the controls in the overlay */
.menu-bar-current-spa-action-overlay-content-container {
    padding-top: 30px;
}

/* vertical space when only displaying result message */
.menu-bar-current-spa-action-overlay-result-message-container {
    padding-top: 50px;
    padding-bottom: 50px;
}

/* action title text in an action overlay */
.menu-bar-current-spa-action-overlay-title {
    font-family: source_sans_prolight, sans-serif;
    font-weight: normal;
    font-size: 18pt;
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: center;
    vertical-align: middle;
}

/* container for positioning action title text in an action overlay */
.menu-bar-current-spa-action-overlay-title-bar {
    padding: 20px 0px 10px 0px;
}

/* containing element for table of licensing information that appears in the About popup */
.menu-bar-licensing-info-container {
    margin-top: 16px; /* vertical space below Licensing Information label */
    padding: 16px; /* bootstrap table is full-width so need padding */
}

/* licensing information label in About popup of menu bar */
.menu-bar-licensing-info-label {
    font-family: source_sans_prosemibold, sans-serif;
    font-weight: normal;
    font-size: 18pt;
}

.menu-bar-licensing-lastupdated-label {
    font-family: source_sans_prosemibold, sans-serif;
    font-weight: normal;
    font-size: 10pt;
    padding: 8px;
}

/* local styling for licensing table */
.menu-bar-licensing-table {
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 0;
}

.menu-bar-licensing-column-header {
    text-align: left;
    padding-left: 8px !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
}

.menu-bar-licensing-column-header-centered {
    text-align: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
}

.menu-bar-licensing-column {
    text-align: left;
}

.menu-bar-licensing-column-centered {
    text-align: center;
}

/* containing element for table of limits information that appears in the About popup */
.menu-bar-limits-container {
    padding: 16px; /* bootstrap table is full-width so need padding */
}

/* local styling for limits table */
.menu-bar-limits-table {
    padding-left: 8px;
    padding-right: 8px;
}

.menu-bar-limits-column-header {
    text-align: left;
    padding-left: 8px !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
}

.menu-bar-limits-column-header-centered {
    text-align: center;
    padding-left: 8px !important;
    padding-right: 0 !important;
}

.menu-bar-limits-label {
    font-family: source_sans_prosemibold, sans-serif;
    font-weight: normal;
    font-size: 18pt;
}

.menu-bar-limits-lastupdated-label {
    font-family: source_sans_prosemibold, sans-serif;
    font-weight: normal;
    font-size: 10pt;
    padding: 0px 8px;
    margin-top: -17px;
}

.menu-bar-limits-row-label {
    text-align: left;
    width: 20%;
}

/* additional padding was used to fill entire row on the screen, rather than create empty columns*/
.menu-bar-limits-row-value {
    text-align: right;
    width: 80%;
    padding-right: 65% !important;
}

.menu-bar-limits-no-data {
    text-align: left;
}







/* override bootstrap's horizontal rule styling */
.menu-bar-menuitem-separator {
    margin-top: 4px;
    margin-bottom: 3px;
    border: 0;
    border-top: 2px solid #f8f8f8; /* invisible */
}

/* vertical space between data entry controls and Save Changes Button or Invalid Entry Message */
.menu-bar-my-profile-entry-form-container {
    padding-bottom: 30px;
}

/* anchor for the popup menus that have a pointer to the icons that launch them */
.menu-bar-popup-anchor {
    position: absolute;
    z-index: 102;
    width: 24px;
    height: 34px;
}

/* popup anchor for the App Launcher popup - positioned specific to the App Launcher icon */
.menu-bar-popup-anchor-app-launcher {
    right: 70px;
    top: 4px;
}

/* popup anchor for the My Profile popup - positioned specific to the My Profile icon */
.menu-bar-popup-anchor-profile {
    right: 24px;
    top: 4px;
}

/* popups that appear when user clicks one of the glyphs on the menu bar */
.menu-bar-popup-menu {
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    background: linear-gradient(#cacaca, #e5e5e5);
    z-index: 100; /* over the blackout sheet */
    width: 33%;
}

/* content (not including the close glyph) inside a popup; includes the logo image */
.menu-bar-popup-menu-content {
    padding: 8px;
}

/* logo image in a popup */
.menu-bar-popup-menu-logo-image {
    margin-top: 20px;
    width: 64px;
    height: 64px;
}

/* content under the logo image in a popup that is specific to the individual popup */
.menu-bar-popup-menu-specific-content {
    margin-top: 20px; /* vertical space below logo image */
}

/* logo image container in About popup */
.menu-bar-version-licensing-image-frame {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 64px;
    height: 64px;
    text-align: center;
}

/* larger About popup that displays version and licensing information */
.menu-bar-version-and-licensing-popup {
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    background: linear-gradient(#cacaca, #e5e5e5);
    z-index: 100;
    width: 50%;
    min-width: 550px;
    overflow-y: auto;
}

/* version information in About popup */
.menu-bar-version-label {
    padding-top: 25px;
    text-align: center;
    font-family: source_sans_prosemibold, sans-serif;
    font-weight: normal;
    font-size: 18pt;
}

/*///////////////////////////////////////////////////////////////////////////////////
//
//  CUSTOM CLASSES - COMMON - POST-ARTWORK RULES
//
///////////////////////////////////////////////////////////////////////////////////*/

/* contains all actions and action groups */
.actions-container {
    padding: 0px 25px 15px 15px;
    overflow-y: auto;
}

/* used in workflow where concept containers contains table
   so that the action container border lines up with the concept containers */
.actions-container-override {
    margin-top: 35px;
}

/* action group title */
.action-group-1-title {
    margin-left: 0.8em;
    font-weight: normal;
}

.action-group-1-subheading {
    font-family: source_sans_prosemibold, sans-serif;
    font-weight: normal;
    font-size: 11pt;
}

.action-group-1-prompt {
    font-family: source_sans_prosemibold, sans-serif;
    font-weight: normal;
    font-size: 10pt;
    vertical-align: middle !important;
    margin-bottom: 2px;
    margin-right: 3px;
}

.action-group-1-prompt-width {
    width: 35%;
}

.action-group-1-value {
    font-weight: normal;
    font-size: 10pt;
}

.action-group-1-remove-img {
    font-size: 12pt;
}

.action-group-1-separator {
    border-bottom: 1px solid #4d4d4d;
    margin: 8px 0px 8px 0px;
}

/* an empty row in the action group structure */
.action-group-1-empty-row {
    height: 12px;
}

/* date controls sized to display correctly in Webkit browser */
.action-group-1-datepicker {
    font-size: 10pt;
    width: 120px;
}

/* time controls sized to same size as date controls */
.action-group-1-timepicker {
    font-size: 10pt;
}

/* selector in level 1 */
.action-group-1-selector {
    font-size: 10pt;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

/* remove clear (X) on Webkit version of input type=date */
.action-group-1-datepicker::-webkit-clear-button {
    display: none;
    -webkit-appearance: none;
}

/* remove spin buttons on Webkit version of input type=date */
input[type=date].action-group-1-datepicker::-webkit-inner-spin-button,
input[type=date].action-group-1-datepicker::-webkit-outer-spin-button {
    display: none;
    -webkit-appearance: textfield;
}

/* fix Bootstrap tables in action panels */
.action-group-1-table {
    margin-bottom: 4px;
    background-color: transparent !important;
}

    /* our own Bootstrap overrides put a top border on table cells.  Don't want this for tables used
   to arrange controls in the actions panel. */
    .action-group-1-table > tbody > tr, .action-group-1-table > tbody > tr > th, .action-group-1-table > tbody > tr > td {
        border-top: none;
        padding: 0px;
    }

        .action-group-1-table-padded > tbody > tr, .action-group-1-table > tbody > tr > th, .action-group-1-table > tbody > tr > td {
            border-top: none;
            padding: 4px;
        }

/* buttons placed in a horizontal row in the actions panel */
.action-group-1-button-row > tbody > tr > td {
    padding-right: 4px;
}

/* used to style an item in side action-group-1 panels */
.action-group-1-item {
    font-weight: normal;
}

/* used for the label style and position for the checkbox above */
.action-group-1-checkbox {
    font-weight: inherit;
    font-size: inherit;
    text-align: left;
    margin-bottom: 5px;
}

.action-group-1-checkbox-readonly {
    font-weight: inherit;
    font-size: inherit;
    text-align: left;
    margin-bottom: 5px;
    pointer-events: none;    
    opacity: .5;
}

/* input fields in action group 1 */
.action-group-1-input {
    font-weight: normal;
    font-size: 10pt;
    height: 20pt !important;
    padding-left: 6px;
    padding-right: 1px;
    padding-bottom: 1px;
    padding-top: 1px;
}

/* used for the label style and position for the checkbox above */
.action-group-1-radio {
    font-weight: normal;
    font-size: 10pt;
    vertical-align: text-bottom;
    margin-bottom: 0px;
    padding-left: 0px;
}

/* text that appears to the right of an icon, image or glyph */
.action-group-2-title {
    margin-left: 0.8em;
    font-weight: normal;
}

/* used to style an item in side action-group-2 panels */
.action-group-2-item {
    margin-left: 0.8em;
    font-weight: normal;
}

/* used to position and badge in the filter subpanel header area */
.action-group-badge {
    margin-left: 15px;
}

/* used to style the value in group 2 */
.action-group-2-value {
    font-weight: normal;
}

.action-group-2-separator {
    border-bottom: 1px solid #4d4d4d;
    margin: 8px 0px 8px 0px;
}

/* used to control the position and the font of entry comment */
.action-entry-comment {
    font-family: source_sans_proitalic, sans-serif;
    font-weight: bold;
    font-size: 14pt;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 5px;
}

/* used to control the position and the font weight of entry items */
.action-entry-prompt {
    font-family: source_sans_proregular, sans-serif;
    font-weight: normal;
    font-size: 13pt;
    padding-left: 3px;
}

.action-entry-prompt-compact {
    font-family: source_sans_proregular, sans-serif;
    font-weight: normal;
    font-size: 11pt;
    vertical-align: text-top;
    padding-left: 3px;
}

/* used to control the allowable width (in percentage) of entry item prompts */
.action-entry-prompt-width {
    width: 45%;
}

/* used to control the allowable width (in percentage) of narrow entry item prompts */
.action-entry-prompt-narrow {
    width: 35%;
}

.action-entry-prompt-error {
    color: red;
}

/* used to control the style of the value of an entry in the action group */
.action-entry-value {
    text-align: end;
}

/* used to control the style of the read only value of an entry in the action group */
.action-entry-read-only-value {
    text-align: end;
}

/* vertical spacer semantically named. */
.actions-container-control-spacer {
    height: 15px;
}

/* instructions, indented */
.action-instruction-indented {
    font-family: source_sans_proitalic, sans-serif;
    font-weight: normal;
    font-size: 13pt;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 5px;
}

/* text for a checkbox or radio button */
.checkbox-radio-label {
    font-size: 10pt;
}

/* allow items like panel header divs to have the finger cursor so user know they are clickable */
.clickable {
    cursor: pointer !important;
}

/* Add bootstrap button disabled override. Change cursor, background color etc. */
button.btn.button-disabled-override {
    cursor: default !important;
}

/* Add bootstrap danger button disabled override. Change cursor, background color etc. */
button.btn.btn-danger.button-disabled-override {
    cursor: default !important;
}

/* Add bootstrap warning button disabled override. Change cursor, background color etc. */
button.btn.btn-warning.button-disabled-override {
    cursor: default !important;
}

/* container that contains one or more concept-selectors */
.concepts-container {
    margin-left: 20px;
    margin-bottom: 10px;
    background-color: #ececec;
    padding: 30px 40px 10px 40px;
    overflow-y: auto;
    border: 1px solid #78838a;
}

/* used to add blur effect to an element */
.concepts-container-confirmation-wait-state {
    filter: opacity(50%);
}

/* adding concepts (as opposed to selecting or changing them) */
.concepts-adder {
    padding: 20px 0px;
}

/* changing concepts (as opposed to selecting or adding them) */
.concepts-changer {
    padding: 20px 0px;
}

/* title inside a concepts container */
.concepts-container-title {
    margin-left: -15px;
    margin-bottom: 25px;
    font-family: source_sans_proregular, sans-serif;
    font-size: 15pt;
    font-weight: normal;
}

/* drop zone for a concept selector - drag and drop and re-ordering */
.concept-selector-left-drop-zone {
    position: absolute;
    left: -5%;
    top: 0;
    bottom: 0;
    right: 95%;
    margin-bottom: 15px;
    z-index: 1;
}

/* drop zone for a concept selector - drag and drop and re-ordering */
.concept-selector-right-drop-zone {
    position: absolute;
    left: 95%;
    top: 0;
    bottom: 0;
    right: -5%;
    margin-bottom: 15px;
    z-index: 1;
}

/* misnamed - should be concept-selector-dragging */
.concept-selector-drop-zone-hover {
    background-size: 100% 100%;
    background-color: #808080;
    opacity: 0.7;
}

/* container for concept instance user-selection */
.concept-selector {
    padding: 10px 8px 8px 8px;
    border-radius: 4px;
    word-wrap: break-word;
    font-size: 12pt;
    background: #ebebeb;
    margin-bottom: 15px;
}

/* when concept is not selected and in normal state */
.concept-selector-not-selected {
    border: 1px solid #78838a;
}

/* when concept is selected */
.concept-selector-selected {
    background-color: #00538a;
    /*background-color: #5e97bc;*/
    border: 1px solid #0071bc;
    box-shadow: 0px 0px 0px 3px #0071bc inset;
    border-radius: 4px;
}

/* when concept is in good state and not selected */
.concept-selector-status-good {
    /*background-color: #71a189;*/
    background-color: #0d800d;
    border: 1px solid #78838a;
}

/* when concept is in warning state and not selected */
.concept-selector-warning {
    /*background-color: #facd7d;*/
    background-color: #e55d33;
    border: 1px solid #78838a;
}

/* when concept is in bad state and not selected */
.concept-selector-status-bad {
    /*background-color: #a05050;*/
    background-color: #a00d0d;
    color: #f7f7f7;
}


/* container that houses the thumbnail IMG - NOT the thumbnail IMG */
.concept-thumbnail {
    position: relative;
    width: 100%;
    padding-bottom: 80%; /* 80% padding causes concept-container to be square (visually, not literally) */
    background-color: transparent;
}

/* used to show through transparency in the thumbnail image itself */
.concept-thumbnail-not-selected {
    /*background-color: #b5c0c6;*/
    background-color: #4e90bc;
    border: none;
}

/* used to show through transparency in the thumbnail image itself */
.concept-thumbnail-selected {
    /*background-color: #b5c0c6;*/
    background-color: #4e90bc;
    border: none;
}

/* used to show through transparency in the thumbnail image itself */
.concept-thumbnail-status-good {
    /*background-color: #b5c0c6;*/
    background-color: #90bc90;
    border: none;
}

/* used to show through transparency in the thumbnail image itself */
.concept-thumbnail-warning {
    /*background-color: #b5c0c6;*/
    background-color: #facd7d;
    border: none;
}

/* used to show through transparency in the thumbnail image itself */
.concept-thumbnail-status-bad {
    /*background-color: #b5c0c6;*/
    background-color: #bc9090;
    border: none;
}

/* for wide (landscape) thumbnail images. */
.concept-thumbnail img {
    position: absolute;
    margin: auto;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    max-width: 100%;
    max-height: 100%;
}

/* for wide (landscape) thumbnail images. */
.concept-thumbnail-wide {
    width: 100%;
    height: auto;
    max-height:100%;
}

/* for tall or portrait thumbnail images. */
.concept-thumbnail-tall {
    width: auto;
    height: 100%;
    max-width:100%;
}

/* square thumbnail images. */
.concept-thumbnail-square {
    width: auto;
    height: 100%;
    max-width:100%;
}

/* the tile bar area, which is similar to a native title bar or toolbar hybrid */
.concept-selector-title-bar {
    position: relative;
    margin-top: 5px;
    padding-bottom: 5px;
}

/* the easy-to-execute (quick) action associated with a concept instance */
.concept-quick-action {
    display: block !important;
    position: absolute !important;
    top: 0px;
    right: 0px;
}

/* the easy-to-execute (quick) action on the left position associated with a concept instance */
.concept-quick-action-left {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
}

/* the current status indicator (normally a graphic) of the concept instance (left-hand position) */
.concept-status {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
}

/* the current status indicator (normally a graphic) of the concept instance (right-hand position) */
.concept-status-right {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
}

/* the concept instance name - selected by the user */
.concept-name-selected {
    display: block;
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
    padding-top: 0px;
    padding-left: 30px;
    padding-right: 30px;
    text-align: center;
    /*color: #001e2f;*/
    color: #f8f8f8;
    font-family: source_sans_proregular, sans-serif;
    font-size: 12pt;
    font-weight: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* the concept instance name - not selected by the user */
.concept-name-not-selected {
    display: block;
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
    padding-top: 0px;
    padding-left: 30px;
    padding-right: 30px;
    text-align: center;
    color: #001e2f;
    font-family: source_sans_proregular, sans-serif;
    font-size: 12pt;
    font-weight: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.concept-name-truncate {
    white-space: nowrap;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

/* ensure the concept name displays in exception states */
.concept-selector-status-bad .concept-name-not-selected,
.concept-selector-status-good .concept-name-not-selected,
.concept-selector-warning .concept-name-not-selected {
    color: #f8f8f8;
}

/* misnamed - concept-default-action */
.concept-name-selected.icon, .concept-name-not-selected.icon {
    max-width: 80%;
}

/* the concept instance status - not selected by the user */
.concept-status-not-selected {
    display: block;
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
    padding-top: 0px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    color: #001e2f;
    font-family: source_sans_proregular, sans-serif;
    font-size: 9pt;
    font-weight: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ensure the concept status displays in exception states */
.concept-selector-status-bad .concept-status-not-selected,
.concept-selector-status-good .concept-status-not-selected,
.concept-selector-warning .concept-status-not-selected {
    color: #f8f8f8;
}

/* used to style the value of a concept’s attribute displayed in the concept area */
.concept-attribute-value {
    width: 65%;
    padding-left: 15px !important;
}

.concept-attribute-value-compact {
    font-size: 11pt;
    width: 65%;
    padding-left: 15px !important;
}

.concept-attribute-value-disallowed {
    width: 65%;
    padding-left: 15px !important;
    pointer-events: none !important;
    cursor:wait !important;
    opacity: .8;
}

.concept-attribute-color-container {
    display: flex;
}

.concept-attribute-color-sample {
    top: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: #000 solid 1px;
    border: none;
    width: 18px;
    height: 18px;
}

.concept-attribute-color-name {
    margin-left: 10px;

}

    /* used to style the name of a concept’s attribute displayed in the concept area */
    .concept-attribute-name {
    font-family: source_sans_prosemibold, sans-serif;
    width: 35%;
    padding-right: 15px;
    font-size: 14pt;
    font-weight: inherit;
}

/* used to provide a prompt for data-entry concept attributes */
.concept-attribute-prompt {
    font-size: 16pt;
    font-style: italic;
}

/* used to style the name of a concept’s attribute displayed in the concept area with error */
.concept-attribute-error {
    color: red;
}

/* prevent the default vertical scrolling setting for pages */
.container-non-scrollable {
    overflow: hidden; /* disable the default vertical scrollbar */
}

/* scrollable containers */
.container-scrollable {
    overflow-y: auto;
    overflow-x: hidden;
}

.concept-attribute-name-inline {
    font-family: source_sans_prosemibold, sans-serif;
    min-width: 170px;
    font-size: 12pt;
    display: inline-block;
    text-align: right;
}

.concept-attribute-value-inline {
    display: inline-block;
    margin-left: 20px;
}

.concept-attribute-readonly {
    min-width: 130px;
    text-align: left;
}

/* used to style label for data entry forms/ui */
.data-entry-label {
    font-family: source_sans_prosemibold, sans-serif;
    padding-right: 15px;
    font-size: 14pt;
    font-weight: inherit;
}
    /* used to style data entry labels with value in the same line. */
    .data-entry-label.inline {
        min-width: 250px;
    }
/* used to style hint(or hint text) for data entry forms/ui */
.data-entry-hint {
    font-family: source_sans_proregular, sans-serif;
    font-weight: inherit;
    font-size: 10pt;
    font-style: italic;
}

/**** Detail View */

.detailview-container {
    background-image: none !important;
    background-color: #ececec;
    border: 1px solid #78838a;
    border-radius: 4px;
    box-shadow: none;
    box-sizing: border-box;
    margin-bottom: 10px;
    padding: 0px 0px 0px 0px;
}

.detailview-table {
    width: 100%;
}

.detailview-table > thead > tr > th,
.detailview-table > tbody > tr > th,
.detailview-table > tfoot > tr > th,
.detailview-table > thead > tr > td,
.detailview-table > tbody > tr > td,
.detailview-table > tfoot > tr > td {
        padding: 2px 2px 2px 20px;
        border: none;
    }

.detailview-row-even {
    background-color:rgba(252, 247, 247, 0.2);
}

.detailview-row-odd {
    background-color: rgba(61, 61, 61, 0.2); /* #ececec; */
}

.detailview-row-selected {
    background-color: #00538a;
    box-shadow: 0px 0px 0px 1px #0071bc inset;
    color: #f8f8f8;
}

.detailview-row-warning {
    background-color: #e55d33;
    box-shadow: 0px 0px 0px 1px #f65d33 inset;
}

.detailview-row-error {
    background-color: #a00d0d;
    box-shadow: 0px 0px 0px 1px #a00d0d inset;
    color: #f8f8f8;
}

/* to override bootstrap css properties */
.detailview-table > tbody > tr > td.detailview-column-summary {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
}

.detailview-thumbnail-container {
    padding: 2px 2px 2px 2px;
    /* border-radius: 4px;
    word-wrap: break-word; */
    font-size: 12pt;
    /* background: #ebebeb; */
    margin-bottom: 0px;
    align-items: center;
    width: 140px;
    height: 140px;
}

.detailview-thumbnail {
    position: relative;
    padding-bottom: 99%; /* 80% padding causes concept-container to be square (visually, not literally) */
    background-color: transparent;
    width:100%;
}

/* detailview thumbnail image */
 .detailview-thumbnail img {
    position: absolute;
    margin: auto;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    max-width: 100%;
    max-height:100%;
    background-color: #4e90bc;
    }

.detailview-thumbnail-caption {
    display: block;
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
    padding-top: 0px;
    text-align: center;
    font-family: source_sans_proregular, sans-serif;
    font-size: 12pt;
    font-weight: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.detailview-cell-line-full
{
    padding-top:5px;
    padding-bottom:5px;
}

.detailview-cell-line-left {
    padding-top: 5px;
    padding-bottom: 5px;
    display:inline-block;
}

.detailview-cell-line-right {
    padding-top: 5px;
    padding-bottom: 5px;
    float:right;
}

.detailview-item-name{
    font-size: 16pt;
 }

.detailview-text-nowrap {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    margin-right: -1000px;
}

.detailview-text-important {
    font-weight: bold;
 }

.detailview-text-important-selected {
    font-weight: bold;
    color: #f8f8f8;
}

.detailview-text-ghosted {
    color: darkgray;
}

.detailview-text-error {
    font-weight: bold;
    color: #a00d0d;
}

.detailview-text-warning {
    font-weight: bold;
    color: #e55d33;
}

.detailview-text-success {
    font-weight: bold;
    color: #0d800d;
}

.playlist-detailview-column-first {
    width: 20%;
}

.playlist-detailview-column-second {
    width: 70%;
}

.playlist-detailview-column-last {
    width: 10%;
    vertical-align: bottom;
}

.playlist-items-detailview-column-first {
    width: 20%;
}

.playlist-items-detailview-column-second {
    width: 75%;
    padding-top: 20px;
}

.playlist-items-detailview-column-last {
    width: 5%;
    vertical-align: bottom;
}

.publication-detailview-column-first {
    width: 10%;
}

.publication-detailview-column-middle {
    width: 75%;
    text-align: right;
}

.publication-detailview-column-last {
    width: 15%;
    vertical-align: middle;
}

.publication-detailview-label {
    font-weight: bold;
    text-align: right;
    width: 20%;
}

.publication-detailview-value {
    font-weight: normal;
    text-align: left;
    text-overflow: ellipsis;
    width: 80%;
}

.compact-detailview-thumbnail-container {
    padding: 2px 2px 2px 2px;
    margin-bottom: 0px;
    align-items: center;
    width: 90px;
    height: 90px;
}

.compact-detailview-thumbnail {
    position: relative;
    padding-bottom: 99%; /* 80% padding causes concept-container to be square (visually, not literally) */
    background-color: transparent;
    width: 100%;
}

/* detailview thumbnail image */
.compact-detailview-thumbnail img {
    position: absolute;
    margin: auto;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    max-width: 100%;
    max-height: 100%;
    border-color: darkgray;
    border-width: 1px;
    border-style: solid;
}

.compact-detailview-title {
    font-family: source_sans_proregular, sans-serif;
    font-size: 18px;
    font-weight: bold;        
}

.compact-detailview-label {
    font-family: source_sans_proregular, sans-serif;
    font-size: 15px;
    font-weight: bold;    
}

.compact-detailview-value {
    font-family: source_sans_proregular, sans-serif;
    font-size: 15px;
    font-weight: normal;
    margin-left: 5px;    
}

.compact-detailview-spacer {    
    min-width: 10px;
}

.action-panel-full-width-button {
    width: 100%;
    padding: 0px;
}

.action-panel-left-button {
    width: 50%;
    padding: 0px 5px 0px 0px;
}

.action-panel-right-button {
    width: 50%;
    padding: 0px 0px 0px 5px;
}

.action-panel-countdown {
    font-size: 36px;
    font-weight: bold;
    color: black;   
    text-align: center;
}

/* to override padding need whole structure */
.detailview-table > tbody > tr > td.detailview-drop-zone-default {
    height: 1px;
    padding-top: 0px;
    padding-bottom: 0px;
}

/* when item is being dragged into drop zone */
.detailview-drop-zone-active {
    background-size: 100%;
    background-color: #808080;
    opacity: 0.7;
    height: 45px !important;
    padding-top: 0px;
    padding-bottom: 0px;
    top: 0px;
    position: relative;
}

/**** End Detail View */

.inline {
    display: inline-block;
}
/* used to style section header e.g. header specifying a table */
.section-header {
    font-family: source_sans_prosemibold, sans-serif;
    padding-right: 15px;
    font-size: 15pt;
    font-weight: inherit;
}

/* applies spacing between the label and the input for scheduling */
.schedule-workflow-label-group-2 {
    text-align: right;
    padding-right: 10px;
    font-size: 13pt;
    padding-bottom: 8px;
}

/*///////////////////////////////////////////////////////////////////////////////////
//  CUSTOM CLASSES - COMMON - BOOTSTRAP GRID REPLACEMENT CLASSES 
//  Used when the concept and action containers width is not controlled 
//  using the bootstrap row and column classes. 
//  The sum of the width of the concept container, the action container, and the 
//  divider cannot exceed 100%.
///////////////////////////////////////////////////////////////////////////////////*/
.concept-container-width {
    width: 75%;
}

.actions-container-width {
    width: 23%;
}

.actions-divider-column-width {
    width: 2%;
}

/* override hub-concepts to make container align with header. */
.hub-concepts-override {
    margin: 0px 0px 0px 15px;
}

/* override hub-action to make action container align with header. */
.hub-actions-override {
    margin: 0px 10px 0px 0px;
}

/* hide content - this is not semantic */
.hide-page-content {
    display: none;
}

/* an input element that needs to have its width set to fill its container */
.input-responsive {
    font-size: medium;
    height: 100%;
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
}

/* styling for textual input fields used to indicate valid input */
input.validated-text.ng-valid.ng-dirty {
    border-color: #8fc592;
    box-shadow: 0px 0px 4px #8fc592;
}

/* styling for textual input fields used to indicate invalid input */
input.validated-text.ng-invalid.ng-dirty {
    border-color: #e35c5c;
    box-shadow: 0px 0px 4px #e35c5c;
}

/* styling for password input fields used to indicate password and confirmation do not match */
input.validated-text.unequal-passwords.ng-dirty {
    border-color: #e35c5c;
    box-shadow: 0px 0px 4px #e35c5c;
}

/* styling for password input fields used to indicate password and confirmation do not match */
input.validated-text.equal-previous-passwords.ng-dirty {
    border-color: #e35c5c;
    box-shadow: 0px 0px 4px #e35c5c;
}

/* invalid input control */
.invalid-input {
    border-color: #e35c5c;
    box-shadow: 0px 0px 4px #e35c5c;
}

/* invalid label/span */
.invalid-label {
    color: #e35c5c;
}

/* generic class to add inline icon to an element */
.icon-inline {
    display: inline;
}

/* %% TO BE DELETED %% */
.phone-form-factor-button {
}

/* pulsing of button style to indicate the operation invoked by the button succeeded */
.pulse-succeeded {
    color: white !important;
    background-color: #0da00d !important;
    background-image: none;
}

/* pulsing of button style to indicate the operation invoked by the button failed */
.pulse-failed {
    color: white !important;
    background-color: #a00d0d !important;
    background-image: none;
}

/* the search bar container */
.search-bar {
    margin-bottom: 0px;
    width: 100%; /* explicitly set for Firefox */
}

/* Vertical space below the menu bar that contains search bar */
/* replaces search-bar-label */
.search-bar-container {
    font-size: 16pt;
    margin: 10px;
}

/* the search bar cancel button */
.search-cancel {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
    border-bottom-left-radius: 0px !important;
}

/* the search bar input radius before key input */
.search-bar-input-control-with-radius {
    border-top-left-radius: 5px !important;
    border-top-right-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
    border-bottom-left-radius: 5px !important;
}

/* the search bar input radius after key input */
.search-bar-input-control-with-radius-on-left {
    border-top-left-radius: 5px !important;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    border-bottom-left-radius: 5px !important;
}

/* container in SPA header area for alerts that have been moved into the non-scrolling header */
.spa-header-alert-container {
    padding-left: 0px;
    padding-right: 20px;
}

/* a container to provide a solid color background for the SPA startup animation */
.startup-animation-container {
    background: linear-gradient(#cacaca, #e5e5e5);
    position: absolute;
    z-index: 999;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}

#startup-animation-loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

#startup-animation-loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 5px solid transparent;
    border-top-color: #004b75;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

    #startup-animation-loader:before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: 5px solid transparent;
        border-top-color: #78838a;
        -webkit-animation: spin 3s linear infinite;
        animation: spin 3s linear infinite;
    }

    #startup-animation-loader:after {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 50%;
        border: 5px solid transparent;
        border-top-color: #c5d0d7;
        -webkit-animation: spin 1.5s linear infinite;
        animation: spin 1.5s linear infinite;
    }

/* please wait spinner for navigation/search */
.content-loading-animation-container {
    width: 100%;
    position: relative;
    z-index: 10;
    top: 50%;
}

.content-loading-animation {
    display: block;
    position: relative;
    left: 50%;
    top: 0%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 5px solid transparent;
    border-top-color: #004b75;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

    .content-loading-animation:before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: 5px solid transparent;
        border-top-color: #78838a;
        -webkit-animation: spin 3s linear infinite;
        animation: spin 3s linear infinite;
    }

    .content-loading-animation:after {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 50%;
        border: 5px solid transparent;
        border-top-color: #c5d0d7;
        -webkit-animation: spin 1.5s linear infinite;
        animation: spin 1.5s linear infinite;
    }

/* use this for positioning the spinner in the center of the screen for workflow initialization please wait archetype */
.cotent-loading-animation-centered {
    top: 50%;
    position: absolute;
    left: 50%;
}

/* ************************************************ */
/*  End - please wait spinner for navigation/search */

/* please wait animation for workflow-initialization archetype */
.workflow-initialization-animation-container {
    width: 100%;
    position: relative;
    z-index: 10;
    top: 35%;
}

.workflow-initialization-animation {
    display: block;
    position: relative;
    left: 50%;
    top: 0%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 5px solid transparent;
    border-top-color: #004b75;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

    .workflow-initialization-animation:before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: 5px solid transparent;
        border-top-color: #78838a;
        -webkit-animation: spin 3s linear infinite;
        animation: spin 3s linear infinite;
    }

    .workflow-initialization-animation:after {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 50%;
        border: 5px solid transparent;
        border-top-color: #c5d0d7;
        -webkit-animation: spin 1.5s linear infinite;
        animation: spin 1.5s linear infinite;
    }

/* ************************ */
/*  End - please wait animation for workflow initialization archetype */

/* in-place-quick-action */

.in-place-quick-action-item-selected {
}

.in-place-quick-action-item-selected-action {
    display: none;
}

.in-place-quick-action-item-not-selected {
    opacity: .5;
    pointer-events: none;
}

.in-place-quick-action-item-animation {
    /* animation div has to take current thumbnail size */
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    max-width: 100%;
    max-height: 100%;
    z-index: 10;
    background-color: #e55d33;
}

    .in-place-quick-action-item-animation:before {
        content: '';
        box-sizing: border-box;
        position: absolute;
        top: 22%;
        left: 28%;
        display: inline-block;
        width: 50%;
        height: 62%; /* thumbnail not being perfectly square but need to show spinner with similar width and height(circular) */
        margin-top: -10px;
        margin-left: -10px;
        border-radius: 50%;
        border: 2px solid #ccc;
        border-top-color: #333;
        animation: spin .6s linear infinite;
    }

/* End  in-place-quick-action */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* SVG positioned inside a text input element */
.user-input-addon-image {
    position: absolute;
    left: 12px;
    top: 8px;
}

/* data entry input with graphic symbol on inside left */
.user-input-with-left-inner-addon {
    position: relative;
    padding-bottom: 5px;
    margin-left: auto;
    margin-right: auto;
}

    .user-input-with-left-inner-addon input {
        padding-left: 35px;
    }

    .user-input-with-left-inner-addon span {
        position: absolute;
        padding: 10px;
        pointer-events: none;
    }

/* the shortcut as a whole */
.shortcut {
    width: 210px;
    text-align: center;
    padding: 10px;
}

/* container in which shortcuts are displayed */
.shortcut-container {
    /*background-color: #c5d0d7;*/
    background-color: #ececec;
    border: 1px solid #78838a;
    min-height: 530px;
    padding: 30px 30px 30px 30px;
    margin: 0px 20px;
}

/* the description text displayed as part of a shortcut */
.shortcut-description {
    color: #004b75;
    margin: 10px;
}

/* the icon image displayed as part of a shortcut */
.shortcut-image {
    width: 60px;
    height: 60px;
    margin: 15px 0px;
}

/* the area of a shortcut that is clickable */
.shortcut-link {
    text-decoration: none;
    border: 1px solid #78838a;
    display: block;
    background: #ebebeb;
    height: 215px;
    border-radius: 5px;
}

    .shortcut-link:hover,
    .shortcut-link:hover:active,
    .shortcut-link:active {
        text-decoration: none;
        border: 1px solid #78838a;
    }

/* the title text displayed as part of a shortcut */
.shortcut-title {
    font-family: source_sans_prosemibold, sans-serif;
    font-size: 18pt;
    font-weight: normal;
    color: #004b75;
}

/* an empty row in the SPA's logical grid structure */
.empty-row {
    height: 15px;
}

/* fix so that bootstrap's img-responsive works with SVG images */
.svg-fix {
    width: 100% !important;
}

/* svg fixed to 14 X 14 pixels */
.svg-fixed-size-14-square {
    width: 14px;
    height: 14px;
}
/* svg fixed to 18 X 18 pixels */
.svg-fixed-size-18-square {
    width: 18px;
    height: 18px;
}
/* svg fixed to 24 X 24 pixels */
.svg-fixed-size-24-square {
    width: 24px;
    height: 24px;
}
/* svg fixed to 28 X 28 pixels */
.svg-fixed-size-28-square {
    width: 28px;
    height: 28px;
}

/* replaces glyphicon-responsive for SVGs */
.svgicon-responsive {
    width: 18px;
}

/* SVG's replacing glyphicons in actions panels */
.svgicon-control-panel {
    width: 18px;
    height: 18px;
}

/* SVG's replacing glyphicons on pagination controls */
.pagination-icon {
    width: 24px;
    height: 24px;
}

/* prevents bottom margin on bootstrap thumbnail class from taking up space at bottom of image */
.thumbnail-frame {
    margin-bottom: 0px !important;
    border: 4px solid #f8f8f8;
    padding: 0px;
}

/* labels inside, tiles, icons, etc that need break-word wrapping of text */
.word-wrap-break-word {
    word-wrap: break-word;
}

/* labels inside, tiles, icons, etc that need break-word wrapping of text */
.word-break-break-all {
    word-break: break-all;
}

/* provides alignment for the error, warning, info banners at the top of the SPA pages */
.workflow-alert-message-container {
    padding: 0px 15px;
}

/* instructions */
.workflow-instruction {
    font-family: source_sans_proitalic, sans-serif;
    font-weight: normal;
    font-size: 14pt;
    margin-left: 5px;
}

/* instructions, indented */
.workflow-instruction-indented {
    font-family: source_sans_proitalic, sans-serif;
    font-weight: normal;
    font-size: 14pt;
    margin-left: 5px;
    padding-left: 15px;
}

/* step instructions */
.workflow-steps-instruction {
    /*font-family: source_sans_proitalic, sans-serif;*/
    font-weight: normal;
    font-size: 12pt;
    margin-left: 0px;
}

/* SPA's title that is displayed below the menu bar */
/* replaces search-bar-label */
.workflow-title {
    font-family: source_sans_proregular, sans-serif;
    font-size: 16pt;
    margin: 5px 10px;
    margin: 15px 0px 0px 20px;
}

/* a select element that appears inline as part of the workflow title */
.workflow-title-inline-selector {
    font-family: source_sans_proregular, sans-serif;
    font-size: 16pt;
    width: auto;
    height: auto;
    display: inline-block;
    margin-top: 0px; /* for aligning with title */
    margin-left: 8px;
    margin-right: 8px;
    padding: 0px;
}

/* spa-specific title area container for the row for workflow title and search bar, and the
    row for the category navigator */
.workflow-header-container {
    background-color: transparent;
    padding: 0px;
}

/* container used when the workflow contains nested group containers (like concepts and actions) */
.workflow-content-container {
    padding: 0px 0px 0px 0px;
}

/* container used when the workflow doesn't contain nested group containers */
.workflow-non-content-container {
    padding: 0px 30px 0px 0px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* text used to convey the result of a workflow operation */
.workflow-result-message {
    font-family: source_sans_proregular, sans-serif;
    font-weight: normal;
    font-size: 16pt;
}

/* workflow cancel link that's used to cancel some of the Spa's and return to parent spa. */
.workflow-cancel {
    font-family: source_sans_prosemibold, sans-serif;
    font-size: 16pt;
    margin: 10px 30px 0px 0px;
    float: right;
    cursor: pointer;
}

/* workflow cancel button that's used in conjunction with btn-xxx to cancel current SPA or directive overlay. */
.workflow-cancel-button {
    margin: 20px 20px 20px 0px;
    float: right;
}

/*///////////////////////////////////////////////////////////////////////////////////
//
//  NAVIGATOR CUSTOM CLASSES - POST-ARTWORK RULES
//
///////////////////////////////////////////////////////////////////////////////////*/
.category-navigator-anchor,
.category-navigator-anchor:hover,
.category-navigator-anchor:focus {
    color: #004b75;
    text-decoration: none;
}

/* container for category navigator */
.category-navigator-container {
    display: inline-block;
}

/* category title in the navigator */
.category-navigator-title {
    font-family: source_sans_proregular, sans-serif;
    font-size: 16pt;
    font-weight: normal;
    margin-left: 20px;
    margin-right: 0px;
}

/* category name in the navigator */
.category-name-label {
    font-family: source_sans_proregular, sans-serif;
    font-size: 16pt;
    font-weight: normal;
    margin-left: 5px;
}

/* category name in the navigator (read-only mode) */
.category-navigator-label {
    font-family: source_sans_proregular, sans-serif;
    font-size: 16pt;
    font-weight: normal;
    margin-left: 20px;
    margin-right: 0px;
}

.category-delete-action-container {
    display: inline-block;
    padding-left:5px;
}

/* when category are displayed in action container */
.category-name-action-container {
    font-size: 16pt;
    font-weight: bold;
}

/*///////////////////////////////////////////////////////////////////////////////////
//
//  OVERVIEW SPA CUSTOM CLASSES
//
///////////////////////////////////////////////////////////////////////////////////*/

/* used to show a line separating concept attribute groups. */
.snapshot-overview-concept-group-separator {
    border-bottom: 1px solid #cdcdcd;
    margin: -5px 5px 25px 10px;
}

/* positioning of the No Items Found message */
.no-items-found-message-container {
    text-align: center;
    padding-top: 40px;
    padding-bottom: 60px;
}

/* styling of the No Items Found message text */
.no-items-found-layout {
    color: #4d4d4d;
    font-family: source_sans_proitalic, sans-serif;
    font-weight: normal;
    font-size: 28pt;
}

/* styling of the No Items Found message text */
.no-items-found-message {
    font-family: source_sans_proitalic, sans-serif;
    font-weight: normal;
    font-size: 28pt;
}

/* styling of the No Items Found message text */
.no-items-found-playlist {
    font-family: source_sans_proitalic, sans-serif;
    font-weight: normal;
    font-size: 18pt;
}

/* container for snapshot image and information labels in single snapshot view */
.dashboard-player-snaphot-single {
    margin: 10px 10px;
    padding: 16px 16px 16px 16px;
    border-radius: 8px;
}

/* vertical space between snapshot caption and snapshot image */
.snapshot-details-caption {
    margin-bottom: 10px;
}

/* friendly name text in a zoomed-in snapshot view */
.snapshot-details-friendly-name {
    font-family: source_sans_prosemibold, sans-serif;
    font-weight: normal;
    font-size: 18pt;
}

/* friendly name text in a zoomed-in snapshot view */
.snapshot-details-dns {
    font-family: source_sans_prosemibold, sans-serif;
    font-weight: normal;
    font-size: 16pt;
}

/* friendly name text in a zoomed-in snapshot view */
.snapshot-details-timestamp {
    font-size: 14pt;
}

/* Section(dashboard +) styling */

.dashboard-no-sections-container {
    text-align: center;
    padding-top: 200px;
    padding-bottom: 100px;
}

/* styling of the empty appearance text on dashboard */
.dashboard-no-sections {
    color: #4d4d4d;
    font-family: source_sans_proitalic, sans-serif;
    font-weight: normal;
    font-size: 23pt;
}

.section-container {
    background-image: none !important;
    background-color: #ececec;
    border: 1px solid #78838a;
    border-radius: 4px;
    box-shadow: none;
    box-sizing: border-box;
    margin: 20px 0px 20px 0px;
    padding: 0px 0px 0px 0px;
}

.section-container-dark {
    background-color: lightgray;
}

.section-header {
    padding: 5px 5px 5px 5px;
    border-bottom: 1px solid transparent;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

.section-header-title {
    margin-left: 0.8em;
    font-weight: normal;
    margin-bottom: 0;
}

.section-body {
    padding: 20px;
}

.section-divider {
    margin-top: 1%;
}

.section-button-spacer-above {
    margin-top: 25%
}

.section-container-control-spacer {
    height: 15px;
}

.section-concept-group-separator {
    border-bottom: 1px solid #cdcdcd;
    margin: -5px 5px 25px 10px;
}

.section-concept-group-separator-dark {
    border-bottom: 1px solid #78838a;
}

.sub-section-group-separator {
    border-bottom: 1px solid #cdcdcd;
    margin: 0px 5px 5px 10px;
}

.sub-section-group-header {
    font-weight: bold;
    margin: 5px 5px 10px 10px;
}

.sub-section-group-label {
    font-weight: normal;
    margin-left: 25px;
    margin-right: 15px;
}

.sub-section-header {
    padding: 5px 5px 10px 5px;
}

.sub-section-header-title {
    font-size: 16px;
    font-weight: bold;
    margin-left: 10px;
}

.sub-section-container-control-spacer {
    margin-left: 20px;
}

.dashboard-items-approval-disapprove-container {
    width: 50%;
    padding-left: 0px;
    padding-bottom: 10px;
}

.dashboard-items-approval-disapprove-td {
    width: 50%;
    padding: 5px 5px 5px 5px;
}

/* disables the button from being clicked */
.section-button-disabled {
    pointer-events: none;
}
/* disables the button from being clicked with a grey overlay */
.section-button-disabled-grey {
    opacity: .5;
    pointer-events: none;
}
/* End Section styling*/

/*///////////////////////////////////////////////////////////////////////////////////
//
//  IMPORT ASSETS CUSTOM CLASSES - POST-ARTWORK RULES
//
///////////////////////////////////////////////////////////////////////////////////*/

/* prompt */
.thumbnail-file-prompt {
    margin-right: 8px;
}

/* color to offset drop area surrounding asset file selector */
.drop-area-background {
    margin-left: 20px;
    margin-bottom: 15px;
    padding: 15px;
    border: 1px solid #78838a;
    background-color: #d9d9d9;
    border-radius: 3px 3px 3px 3px;
}

/* color to offset drop area surrounding file selector in message editor area */
.drop-area-background-message-editor {
    margin-left: 0px;
    margin-bottom: 5px;
    margin-top: 5px;
    padding: 3px;
    border: 1px solid #78838a;
    background-color: #d9d9d9;
    border-radius: 3px 3px 3px 3px;
}

.drop-area-background-concepts-container {
    margin-left: 0px;
    margin-bottom: 15px;
    padding: 15px;
    border: 1px solid #78838a;
    background-color: #d9d9d9;
    border-radius: 3px 3px 3px 3px;
}

/* "In" or "Into" label that precedes category navigator */
.into-category-label {
    font-family: source_sans_proregular, sans-serif;
    font-size: 16pt;
    font-weight: normal;
    margin-left: 20px;
}

/* container for overall (large) progress bars */
.progress-bar-overall-container {
    padding: 15px;
    border: 1px solid #78838a;
    background-color: #d9d9d9;
    border-radius: 3px;
}

/* container for overall progress bar (small progress-bar) */
.progress-bar-overall-container-small {
    margin-left: 0px;
    margin-bottom: 1px;
    margin-top: 1px;
    padding: 1px;
    border: 1px solid #78838a;
    background-color: #d9d9d9;
    border-radius: 3px;
}

/* import batch progress bar (overall progress) styling */
.progress-bar-overall {
    font-size: 22pt;
    line-height: 1.2em;
}

/* import batch progress bar (overall progress) styling */
.progress-bar-overall-small {
    font-size: 13pt;
    line-height: 1.7em;
}

/* min width so that text shows in progress bar when progress value is low */
.progress-bar-min-width {
    min-width: 2em;
}

/* small progress-bar */
.progress-bar-min-width-small {
    min-width: 2em;
}

/* fixed height for table cells on progress view */
.progress-table-cell-divider {
    height: 40px;
}

/* controls inline with category navigator for adding a subcategory */
.subcategory-add-controls-container {
    display: inline-block;
}

/* plus icon that precedes the subcategory input control when read-only */
.subcategory-add-icon {
    font-size: 12pt;
    margin-left: 20px;
    /*top: 0px !important;*/
}

/* plus icon that precedes the subcategory input control when not read-only */
.subcategory-add-icon-not-read-only {
    font-size: 12pt;
    margin-left: 20px;
    /*top: 3px !important;*/
    margin-top: -3px;
}

/* subcategory label */
.subcategory-label {
    display: inline;
    width: 70%;
}

/* input control for creating a new subcategory */
.subcategory-name-input {
    display: inline-block;
    width: 140px;
    margin-left: 6px;
}

/* input group used to style Add button as an add-on to the category name text input element */
.subcategory-name-input-group {
    margin-bottom: -10px;
}

/*///////////////////////////////////////////////////////////////////////////////////
//
//  WAITING ANIMATION - animation displayed while waiting for a
//                      long-running task to complete (not the same as the
//                      Startup animation that is displayed when a SPA is initializing)
//
///////////////////////////////////////////////////////////////////////////////////*/

/* These are not the same as Startup Animation classes.  These are for the
    waiting animation when waiting for a player to be added or other long-running process. (like adding a player) */
.waiting-animation-container {
    background-color: #ffffff;
    position: relative;
    z-index: 999;
}

@keyframes wait-animation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes wait-animation-led-1 {
    0% {
        background-color: #2e6da4;
    }

    10% {
        background-color: #49b2fe;
    }

    30% {
        background-color: #49b2fe;
    }

    50% {
        background-color: #2e6da4;
    }
}

@keyframes wait-animation-led-2 {
    10% {
        background-color: #2e6da4;
    }

    20% {
        background-color: #49b2fe;
    }

    40% {
        background-color: #49b2fe;
    }

    60% {
        background-color: #2e6da4;
    }
}

@keyframes wait-animation-led-3 {
    20% {
        background-color: #2e6da4;
    }

    30% {
        background-color: #49b2fe;
    }

    50% {
        background-color: #49b2fe;
    }

    70% {
        background-color: #2e6da4;
    }
}

@keyframes wait-animation-led-4 {
    30% {
        background-color: #2e6da4;
    }

    40% {
        background-color: #49b2fe;
    }

    60% {
        background-color: #49b2fe;
    }

    80% {
        background-color: #2e6da4;
    }
}

@keyframes wait-animation-led-5 {
    40% {
        background-color: #2e6da4;
    }

    50% {
        background-color: #49b2fe;
    }

    70% {
        background-color: #49b2fe;
    }

    90% {
        background-color: #2e6da4;
    }
}

/*///////////////////////////////////////////////////////////////////////////////////
//
//  LOGIN SPA-specific styles and media queries
//
///////////////////////////////////////////////////////////////////////////////////*/

/* error message on the login SPA */
.login-error {
    color: red;
    font-size: x-large;
    text-align: center;
}

/* logo image in login SPA that sizes to fit browser window */
.company-logo {
    text-align: center;
    padding: 10px;
    max-width: 350px;
    max-height: 350px;
}

/* non-error message in the login SPA */
.login-message {
    font-size: x-large;
    text-align: center;
}

/* informational message in the login SPA */
.login-info-message {
    font-size: large;
    text-align: center;
}

.login-message-container{
    margin-top: 50px;
}

/* login SPA horizontal and vertical centering of content */
.centered {
    position: absolute;
    top: 50%;
    left: 20px;
    right: 20px;
    padding: 20px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    resize: vertical;
}

/* Phone form factor */
@media screen and (max-width: 768px) {
    /* input element that changes size to fit container */
    .input-responsive {
        font-size: x-large;
        height: 100%;
        width: 100%;
        margin: 5px;
    }

    /* replaces glyphicon-responsive for SVGs */
    .svgicon-responsive {
        width: 28px;
    }

    /* logo image that changes size to fit container */
    .companyLogo-responsive {
        text-align: center;
        padding: 10px;
        max-width: 250px;
        max-height: 250px;
    }
}

/*///////////////////////////////////////////////////////////////////////////////////
//
//  Various spa specific styles and media queries
//
///////////////////////////////////////////////////////////////////////////////////*/

/* used to style the current and choose thumbnail labels */
.manage-assets-change-thumbnail-label {
    font-family: source_sans_proregular, sans-serif;
    font-weight: normal;
    font-size: 15pt;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-right: 10px;
}

.add-players-form-label {
    font-family: source_sans_proregular, sans-serif;
    font-weight: normal;
    font-size: 15pt;
}

/*///////////////////////////////////////////////////////////////////////////////////
//
//  PROBLEM SPA CLASSES
//
///////////////////////////////////////////////////////////////////////////////////*/

/* container that contains the unauthorized or error symbol image (left side of page) */
.error-spa-symbol-container {
    padding: 30px;
    min-width: 200px;
}

/* container that contains the unauthorized or error page textual info (right side of page) */
.error-spa-information-container {
    padding: 30px;
}

/* Title line on the error or unauthorized page (e.g. "Not Authorized") */
.error-spa-title {
    font-size: 24pt;
    margin-bottom: 15px;
}

/* Message line below title on error or unauthorized SPA pages */
.error-spa-message {
    font-size: 18pt;
    margin-bottom: 15px;
}

/* label preceding the alternate navigation table in error/unauth SPA's */
.error-spa-alt-nav-label {
    font-size: 16pt;
    margin-bottom: 8px;
}

/* width of the button column of the alternate navigation table */
.error-spa-alt-nav-btn-container {
    width: 33%;
}

/* height of the area at top of fatal error and/or error SPA page that replaces the menu bar */
.error-spa-fake-menu-bar {
    height: 70px;
}
/* used in not licensed spa to have some space before title */
.error-spa-title-space{
    margin-bottom:70px;
}

/*///////////////////////////////////////////////////////////////////////////////////
//
//  SCHEDULE MESSAGE AND LAYOUT CUSTOM CLASSES 
//
///////////////////////////////////////////////////////////////////////////////////*/
.choose-player {
    width: 100%;
    margin-left: 10px;
}

.choose-player-instruction {
    width: 90%;
}

.choose-all-button {
    max-width: 110px;
    margin-left: 10px;
}

/* really means wizard-step-title */
.concept-attribute-group-name {
    font-family: source_sans_proregular, sans-serif;
    width: 35%;
    padding-right: 15px;
    font-size: 16pt;
    font-weight: inherit;
    margin-left: 0px;
}

/* really means wizard-step-title (it is not a subtitle of the wizard, but a vertical wizard instead) */
.concept-attribute-subgroup-name {
    width: 35%;
    padding-right: 15px;
    font-family: source_sans_proregular, sans-serif;
    font-weight: inherit;
    font-size: 16pt;
    margin-left: 0px;
}
/* schedule message/layouts - browse/search */
/* left div */
.schedule-workflow-browse-container {
    flex-grow: 10;
}

/* middle div */
.schedule-workflow-orsearch-container {
    flex-grow: 1;
}

/* right div */
.schedule-workflow-search-container {
    flex-grow: 5;
}

/* label styling for 'OrSearch' in browse/search */
.schedule-workflow-orsearch-label {
    padding-right: 15px;
    font-family: source_sans_proregular, sans-serif;
    font-weight: inherit;
    font-size: 13pt;
    margin-left: 0px;
}

.schedule-workflow-validate-btn {
    max-width: 200px;
    margin: 10px 0px 0px 0px;
}

/* schedule artwork -browse/search - search with multiple select */
/* left div */
.schedule-asset-browse-container {
    flex-grow: 10;
}
/* middle div */
.schedule-asset-orsearch-container {
    flex-grow: 1;
}
/* right div */
.schedule-asset-search-container {
    flex-grow: 10;
}

.schedule-asset-select-override {
    padding: 2px 2px 2px 2px;
}
/* to override padding of buttons under schedule  messages  to restrict button protruding out on screen size changes */
.btn-override-padding-schedule {
    padding-left: 1px;
    padding-right: 1px;
}

/* to override padding of panel under schedule  messages  to restrict button protruding out on screen size changes */
.pandel-body-schedule {
    padding: 5px;
}

/* to override padding of panel under schedule more external messages to restrict button protruding out on screen size changes */
.pandel-body-schedule-more {
    padding: 2px;
}
.panel-schedule-column-first{
    width:50%;
}
.panel-schedule-column-last {
    width:50%;
}

/* used to show a line separating concept attribute groups */
.concept-group-separator {
    border-bottom: 1px solid #cdcdcd;
    margin: 15px -10px 15px -10px;
}

.concept-group-separator-dark {
    border-bottom: 1px solid #78838a;
}

/* size and position setting for the default action icon */
.default-action-icon {
    float: right;
    cursor: pointer;
    width: 24px;
    height: 24px;
    align-content: center;
    vertical-align: middle;
}

/* size and position setting for the default status icon */
.default-status-icon {
    float: left;
    cursor: default;
    width: 24px;
    height: 24px;
    align-content: center;
    vertical-align: middle;
}

.default-status-icon-right {
    float: right;
    cursor: default;
    width: 24px;
    height: 24px;
    align-content: center;
    vertical-align: middle;
}

.input-spinner {
    width: 70px;
}

.input-group-offset {
    padding-left: 20px;
}
/* provide separation between the two form-groups inside a form-inline */
.input-inline-form-group-seperation {
    margin-left: 35px;
}

/* inline radio last button */
.input-inline-radio-buttons-last {
    margin-left: 30px !important;
}

/* inline radio last button text right separation */
.input-play-for-control {
    margin-left: 10px;
}

/* inline icon to overlay input control on right side */
.input-icon-overlay {
    height: 24px;
    width: 24px;
    position: absolute;
    right: 24px;
    top: 7px;
}

/* fill in the blanks messages - allow for message thumbnail */
.fill-in-the-blank-text-form-field {
    width: 90%;
}

.fill-in-the-blanks-text-block {
    width: 33%;
    background: transparent;
    border: none;
    resize: none;
}

.fill-in-the-blanks-zone-attribute-name {
    font-weight: normal;
}

.fill-in-the-blanks-zone-row {
    margin-bottom: 50px;
}

.fill-in-the-blanks-zone-playlist-selection {
    margin-top: 0px;
    margin-bottom: 10px;
    margin-left: 0px;
    margin-right: 20px;
    width: 80%;
    border: 1px solid #78838a;
}

/* controls the margin between the message selection table and the border for the concept container */
.message-selection-table {
    margin-bottom: 15px;
    margin-left: 50px;
}

    /* removes the table border and controls the padding between each row of message selection icons */
    .message-selection-table > tbody > tr, .message-selection-table > tbody > tr > th, .message-selection-table > tbody > tr > td {
        border-top: none;
        padding: 15px;
    }

/* aligns the start of the organization navigator to the workflow title */
.organization-navigator-row {
    margin-left: 0px;
}

/* category title in the navigator when used inside a schedule message form */
.scheduling-category-navigator-title {
    font-family: source_sans_proregular, sans-serif;
    font-size: 14pt;
    font-weight: normal;
    margin-left: 10px;
}

/* category name in the navigator when used inside a schedule message form */
.scheduling-category-name-label {
    font-family: source_sans_proregular, sans-serif;
    font-size: 14pt;
    font-weight: inherit;
    margin-left: 10px;
}

/* used to style the search criteria select controls */
.select-search-criteria {
    width: 95%;
    border: 1px solid #78838a;
}

.search-asset-button {
    width: 30%;
}

.search-layout-button {
    width: 27%;
}

/* schedule/continue button plus other */
.search-message-button {
    width: 27%;
}

.select-different-layout-button {
    width: 28%
}

.select-different-message-button {
    width: 28%
}

.no-items-found-layout.center {
    text-align: center;
}

.no-items-found-message.center {
    text-align: center;
}

.no-items-found-playlist.center {
    text-align: center;
}

.verify-batch-button-group {
    margin-top: 50px;
}

.verify-file-button-group {
    margin-top: 50px;
}

.verify-batch-button-group-seperation {
    margin-left: 20px;
}

.verify-file-button-group-seperation {
    margin-left: 20px;
}

.verify-batch-button-group-buttons {
    width: 200px;
}

.verify-file-button-group-buttons {
    width: 200px;
}

/*///////////////////////////////////////////////////////////////////////////////////
//
//  Message Playlist Drop Zone custom classes       
//
///////////////////////////////////////////////////////////////////////////////////*/

.drop-zone-container {
    background-image: url("../graphics/icondropmediafiles.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60px 60px;
    background-color: #4e90bc;
    border: 2px dashed #00538a;
    border-radius: 4px;
    box-shadow: none;
    box-sizing: border-box;
    margin: 10px 0px 10px 0px;
    opacity: 75%;
    padding: 0px;
    height: 135px;
    cursor: pointer !important;
}

.drop-zone-container-drag-over {
    background-image: url("../graphics/icondropmediafiles.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60px 60px;
    background-color: #4e90bc;
    border: 2px dashed #00538a;
    border-radius: 4px;
    box-shadow: none;
    box-sizing: border-box;
    margin: 10px 0px 10px 0px;
    opacity: 40%;
    padding: 0px;
    height: 135px;
}

.drop-zone-container-collapsed {
    background-image: none !important;
    background-color: #4e90bc;
    border: 2px solid #00538a;
    border-radius: 4px;
    box-shadow: none;
    box-sizing: border-box;
    margin: 10px 0px 10px 0px;
    opacity: 75%;
    padding: 0px;
    height: 37px;
    cursor: pointer !important;
}

.drop-zone-header {
    margin: 5px 25px 0px 10px;
}

.drop-zone-header-action {
    margin-right: 5px;    
}

.drop-zone-header-icon {
    height: 22px;
    width: 22px;
}

.drop-zone-header-title {
    font-size: 16px;
    font-style: italic;
    font-weight: bolder;
    text-align: center;
    cursor: pointer !important;
}

.drop-zone-image {
    height: 60px;
    width: 60px;
    margin: 0px 10px 10px 10px;
    opacity: 75%;
}

/*///////////////////////////////////////////////////////////////////////////////////
//
//  What is Playable Header class
//
///////////////////////////////////////////////////////////////////////////////////*/

/* the title text displayed as part of a shortcut */
.concepts-container-header1 {
    color: #004b75;
    font-family: source_sans_prosemibold, sans-serif;
    font-size: 18pt;
    font-weight: normal;
}

/* the title text displayed as part of a shortcut */
.concepts-container-header2 {
    font-family: source_sans_prosemibold, sans-serif;
    font-size: 16pt;
    font-weight: normal;
}

/* the title text displayed as part of a shortcut */
.concepts-container-header3 {
    font-family: source_sans_prosemibold, sans-serif;
    font-size: 14pt;
    font-weight: normal;
}

/* the title text displayed as part of a shortcut */
.concepts-container-header4 {
    font-family: source_sans_prosemibold, sans-serif;
    font-size: 12pt;
    font-weight: normal;
}

/* the layout thumbnail class */
.layout-thumnail {
    width: 100%;
}

/* the playlist thumbnail class */
.playlist-thumbnail {
    width: 100%;
}

/* the message thumbnail class */
.message-thumbnail {
    width: 100%;
}

/* the embedded thumbnail class */
.embedded-thumbnail {
    width: 100%;
}

/*///////////////////////////////////////////////////////////////////////////////////
//
//  Admin users custom classes
//
///////////////////////////////////////////////////////////////////////////////////*/

.users-container {
    background-image: none !important;
    background-color: #ececec;
    border: 1px solid #78838a;
    border-radius: 4px;
    box-shadow: none;
    box-sizing: border-box;
}

/* for Add User */
.form-inline-field-left {
    display: inline-block;
    float: left;
    width: 49%;
}

.form-inline-field-readonly-left {
    display: inline-block;
    float: left;
    width: 48%;
    border: 0;
    background: none;
}

.form-inline-field-right {
    display: inline-block;
    float: right;
    width: 49%;
}

.form-inline-field-readonly-right {
    display: inline-block;
    float: right;
    width: 48%;
    border: 0;
    background: none;
}

.form-inline-field-group {
    display: inline-block;
    margin-bottom: 10px;
    width: 100%;
}

.form-field-readonly {
    border: 0;
    background: none;
}

.childnodelist-group-header {
    margin-top: 10px;
    margin-left: 10px;
    font-family: source_sans_prosemibolditalic, sans-serif;
    font-weight: normal;
    max-width: 85%;
    color: #4d4d4d;
}

.childnodelist-group-seperator {
    border-top: 1px dashed;
    padding-top: 10px;
}

.allowedmessagetypes-limitto-list-container {
    padding-left: 20px;
}

/*///////////////////////////////////////////////////////////////////////////////////
//
//  List View Style for Admin Users/Organizations
//
///////////////////////////////////////////////////////////////////////////////////*/
/* remove all border around tbody, td, tr */
.table-borderless > tbody,
.table-borderless > tbody > tr > td,
.table-borderless > tbody > tr > th,
.table-borderless > tfoot > tr > td,
.table-borderless > tfoot > tr > th,
.table-borderless > thead > tr > td,
.table-borderless > thead > tr > th {
    border: none !important;
}

.suborganizations-container {
    background-image: none !important;
    background-color: #ececec;
    border: 1px solid #78838a;
    border-radius: 4px;
    box-shadow: none;
    box-sizing: border-box;
    margin: 0px 0px 20px 0px;
    padding: 0px 0px 0px 0px;
}

/* for list view in admin user, even row's back ground */
.listview-concept-selector-0 {
    background-color: rgba(61, 61, 61, 0.2); /*#d9d9d9*/
    word-wrap: break-word;
    font-size: 12pt;
}

.listview-concept-selector-even {
    background-color: rgba(61, 61, 61, 0.2); /*#d9d9d9*/
    word-wrap: break-word;
    font-size: 12pt;
}

/* for list view in admin user, odd row's back ground */
.listview-concept-selector-1 {
    background-color: rgba(252, 247, 247, 0.2); /*#ececec*/
    word-wrap: break-word;
    font-size: 12pt;
}

.listview-concept-selector-selected {
    color: rgb(248, 248, 248);
    background-color: #00538a;
    border: 1px solid #0071bc;
    box-shadow: 0px 0px 0px 1px #0071bc inset;
    border-radius: 4px;
}

/* when concept is in warning state and not selected */
.listview-concept-selector-warning {
    /*background-color: #facd7d;*/
    background-color: rgba(225, 76, 29, 0.4);
    border: 1px solid #78838a;
}

/* when concept is in dangerous state and not selected */
.listview-concept-selector-dangerous {
    /*background-color: #facd7d;*/
    background-color: rgba(162, 11, 11, 1);
    border: 1px solid #A20B0B;
    color: rgb(248, 248, 248);
}

/* when concept is in bad state and not selected */
.listview-concept-selector-status-bad {
    background-color: rgba(255, 61, 61, 0.35);
}

.detail-concepts-container {
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 10px;
    background-color: rgba(61, 61, 61, 0);
    padding: 15px 40px 10px 40px;
    overflow-y: auto;
    border: 1px dashed #78838a;
    border-radius:5px;
}

/* the concept instance name - not selected by the user */
.listview-concept-header {
    display: block;
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    text-align: left;
    color: #001e2f;
    font-family: source_sans_probold, sans-serif;
    font-size: 13pt;
    font-weight: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* the concept instance name - selected by the user */
.listview-concept-name-selected {
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
    padding-top: 0px;
    padding-left: 30px;
    padding-right: 30px;
    text-align: left;
    /*color: #001e2f;*/
    color: #f8f8f8;
    font-family: source_sans_proregular, sans-serif;
    font-size: 11pt;
    font-weight: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* the concept instance name - not selected by the user */
.listview-concept-name-not-selected {
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
    padding-top: 0px;
    padding-left: 30px;
    padding-right: 30px;
    text-align: left;
    color: #001e2f;
    font-family: source_sans_proregular, sans-serif;
    font-size: 11pt;
    font-weight: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.listview-concept-detail-header-left {
    font-family: source_sans_prosemibold, sans-serif;
    font-weight: normal;
    font-size: 11pt;
    padding-left: 0px;
}

.listview-concept-detail-header-right {
    font-family: source_sans_prosemibold, sans-serif;
    font-weight: normal;
    font-size: 11pt;
    padding-right: 0px;
    text-align: right;
}

.listview-concept-detail-table {
    margin-left: 25px;
    padding-top: 15px;
    font-family: source_sans_proregular, sans-serif;
    font-size: 11pt;
    background-color: rgba(61, 61, 61, 0);
}

.listview-concept-detail-table-Header {
    font-family: source_sans_prosemibolditalic, sans-serif;
    font-weight: normal;
    font-size: 11pt;
    padding-bottom: 5px;
}

.listview-concept-detail-table-row {
    font-size: 10pt;
    height: 31px;
}
/* used for links in a table */
.tabular-cell-link {
    text-decoration-line: underline;
    color: blue;
}
/* used for links in a table when row selected */
.tabular-cell-link-selected {
    text-decoration-line: underline;
    color: #f8f8f8;
}

.ul-no-bullets {
    list-style-type: none;
}

.wrapword {
    white-space: -moz-pre-wrap !important; 
    white-space: -webkit-pre-wrap; 
    white-space: -pre-wrap; 
    white-space: -o-pre-wrap; 
    white-space: pre-wrap; 
    word-wrap: break-word; 
    word-break: break-all;
    white-space: normal;
}

/*///////////////////////////////////////////////////////////////////////////////////
//
//  WEATHER LOCATIONS
//
///////////////////////////////////////////////////////////////////////////////////*/

.weather-location-item {
    border-width: 0px;
    height: 38px;
    width: fit-content;
    background: inherit;
    background-color: rgba(121, 121, 121, 0.3764705882352941);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(121, 121, 121, 1);
    border-radius: 6px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 3px 5px 3px 15px;
    margin: 0px 10px 10px 0px;
}

.weather-location-item-indicator {
    color: black;
    display: inline-flex;
    float: left;
    font-size: 11px;
    left: -6px;
    position: relative;
}

.weather-location-item-input {
    width: 205px !important;
}

.weather-location-item-add-button {
    margin-left: 10px;
}

.weather-location-item-remove-button {
    vertical-align: -2px;
}

.weather-location-form-display {
    display: block !important;
}

.missing-entries-label {
    font-size: 18px;
    font-style: italic;
    text-align: center;
}

.weather-locations-panel {
    display: inline-flex;
    flex-wrap: wrap;
}

/*///////////////////////////////////////////////////////////////////////////////////
//
//  HTML5 PLAYERS
//
///////////////////////////////////////////////////////////////////////////////////*/

/* used to show a line separating concept attribute groups */
.html5players-concept-group-separator {
    border-bottom: 1px solid #78838a;
    margin: 15px 0px 15px 0px;
}

/*///////////////////////////////////////////////////////////////////////////////////
//
//  PICK FILL
//
///////////////////////////////////////////////////////////////////////////////////*/

.custom-modal {
    display: block; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.custom-modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 40%; /* could be more or less, depending on screen size */
    min-width:800px;
}

.custom-modal-content-header {
    font-size: large;
    font-weight: bolder;
    text-align: center;
}

.custom-modal-separator {
    border-bottom: 1px solid #4d4d4d;
    margin: 8px 0px 8px 0px;
}

.data-entry-row {
    margin: 0px 0px 5px 0px;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    align-content: center;
    width: 100%;
}

.data-entry-row-centered {
    text-align: center;        
}

.data-entry-label-container {
    width: 20%;
    text-align: right;
}

.data-entry-value-container {
    width: 70%;
    margin-left: 10px;
    text-align: left;
    box-sizing: content-box;
}

/* class for any checkbox or radio button label on value container */
.data-entry-value-label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 0px;
    font-weight: normal;
}

.data-entry-label-container-compact {
    width: 30%;
    text-align: right;
}
.data-entry-value-container-compact {
    width: 50%;
    margin-left: 15px;
    text-align: left;
    box-sizing: content-box;
}

.data-entry-action-container {
    text-align: right;
    width: 100%;
}

.data-entry-checkbox-label {
    display: inline-block;
    max-width: 100%;
    margin-left: 3px;
    margin-right: 3px;
    font-weight: normal;
}

.gradient-labeled-slider-zone {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 5px;
    height: 32px;
}
.gradient-labeled-slider-label {
    margin-bottom: unset;
    width: 20%;
    margin: auto 0;
    text-align: right;
}
.labeled-slider-zone {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 5px;
}
.labeled-slider-input[type="range"] {
    display: unset;
    width: unset;
    width: 70%;
}
.labeled-slider-label {
    margin-bottom: unset;
    width: 20%;
    text-align: right;
}
.gradient-colorpicker-zone {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 32px;
}
.gradient-colorpicker-zone input[type="color"] {
    margin: auto 0;
}
.colorpicker-zone {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.colorpicker-label {
    margin: 0;
    margin-left: 20px;
    display: flex;
    align-items: center;
}

/* Tool Tip styles */
.tool-tip {
    position: relative;
    display: inline-block;
}

    .tool-tip .tool-tip-text {
        visibility: hidden;
        width: 140px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px;
        position: absolute;
        z-index: 1;
        bottom: 150%;
        left: 50%;
        margin-left: -75px;
        opacity: 0;
        transition: opacity 0.3s;
    }

        .tool-tip .tool-tip-text::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

    .tool-tip:hover .tool-tip-text {
        visibility: visible;
        opacity: 1;
    }

.labeled-textbox-zone {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /*justify-content: space-between;*/
}

.labeled-textbox-small {
    max-width: 65px;
}

.labeled-textbox-medium {
    max-width: 95px;
}

.labeled-textbox-large {
    max-width: 125px;
}

.labeled-textbox-xlarge {
    max-width: 150px;
}

.labeled-textbox-container-normal {
    display: inline-block;
    box-sizing: content-box;
    height: 30px;
    border-radius: 4px;
    padding-left: 5px;
    margin-right: 5px;
    background-color: white;
    border: 1px solid #78838a;
}

.labeled-textbox-container-invalid {
    display: inline-block;
    box-sizing: content-box;
    height: 30px;
    border-radius: 4px;
    padding-left: 5px;
    margin-right: 5px;
    background-color: white;
    border: 1px solid #e35c5c;
}

.labeled-textbox-container-disabled {
    display: inline-block;
    box-sizing: content-box;
    height: 30px;
    border-radius: 4px;
    padding-left: 5px;
    margin-right: 5px;
    border: 1px solid #78838a;
    background-color: lightgray;
}

.labeled-textbox-label-container {
    display: inline-block;
    box-sizing: content-box;
    min-width: 10px;
}

.labeled-textbox-label {
    font-weight: normal;
    padding-left: 2px !important;
}

.labeled-textbox-label:after {
    content: ':';
}

.labeled-textbox-text-container {
    display: inline-block;
    box-sizing: content-box;
    width: 60%;
}

.labeled-textbox-text-normal {
    display: inline-block;
    box-sizing: content-box;
    outline: 0;
    width: 90%;
    border: none;
    height: 28px;
    margin: 0;
    min-width: 20px;
    font-size: 11pt;
    color: #00538a;    
}

.labeled-textbox-text-disabled {
    display: inline-block;
    box-sizing: content-box;
    outline: 0;
    width: 90%;
    border: none;
    height: 28px;
    margin: 0;
    min-width: 20px;
    font-size: 11pt;
    color: #00538a;
    cursor: not-allowed !important;
    background-color: lightgray;
}

.non-labeled-textbox-zone {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /*justify-content: space-between;*/
}

.non-labeled-textbox-small {
    max-width: 65px;
}

.non-labeled-textbox-medium {
    max-width: 95px;
}

.non-labeled-textbox-large {
    max-width: 125px;
}

.non-labeled-textbox-xlarge {
    max-width: 150px;
}

.non-labeled-textbox-unlimited {
    width: 100%;
}

.non-labeled-textbox-container-normal {
    display: inline-block;
    box-sizing: content-box;
    height: 30px;
    border-radius: 4px;
    padding-left: 5px;
    margin-right: 5px;
    background-color: white;
    border: 1px solid #78838a;
}

.non-labeled-textbox-container-invalid {
    display: inline-block;
    box-sizing: content-box;
    height: 30px;
    border-radius: 4px;
    padding-left: 5px;
    margin-right: 5px;
    background-color: white;
    border: 1px solid #e35c5c;
}

.non-labeled-textbox-container-disabled {
    display: inline-block;
    box-sizing: content-box;
    height: 30px;
    border-radius: 4px;
    padding-left: 5px;
    margin-right: 5px;
    border: 1px solid #78838a;
    background-color: lightgray;
}

.non-labeled-textbox-text-container {
    display: inline-block;
    box-sizing: content-box;
    width: inherit;
}

.non-labeled-textbox-text-normal {
    display: inline-block;
    box-sizing: content-box;
    outline: 0;
    width: 85%;
    border: none;
    height: 28px;
    margin: 0;
    padding-left: 5px;
    min-width: 20px;
    font-size: 11pt;
    color: #00538a;
}

.non-labeled-textbox-text-disabled {
    display: inline-block;
    box-sizing: content-box;
    outline: 0;
    width: 85%;
    border: none;
    height: 28px;
    margin: 0;
    padding-left: 5px;
    min-width: 20px;
    font-size: 11pt;
    color: #00538a;
    cursor: not-allowed !important;
    background-color: lightgray;
}

.progress-bar-normal {
    position: relative;
    margin: 0px;
    padding: 0px;
    height: 24px;
    border: none;
    background: #eebb91;
}

.progress-normal {
    position: absolute;
    margin: 0px;
    padding: 0px;
    height: 24px;
    border: none;
    background: #00538a;
}

.designer-loading-animation-container {
    position: absolute;
    top: 50%;
}

.designer-actions-container {
    float: right;
    margin: 0px 20px 5px 0px;
}

/* designer action button*/
.designer-action-btn {
    width: 100px;
}

.designer-section-header-title {
    font-size: 20px;
    font-weight: bolder;
    text-align: left;
}

.designer-section-header-separator {
    border: 3px solid #9c9c9c;
    margin: 8px 0px 8px 0px;
}

/* Designer Gallery Styles */
.gallery-row-container {
    display: block;
}

.gallery-template-row {
    display: block;
    flex-direction: row;
    width: 100%;
}

.gallery-template-row-selected {
    display: block;
    flex-direction: row;
    width: 100%;
    background-color: #9c9c9c;
}

.gallery-template-title-container {
    margin-left: 5px;
    display: inline-block;
    padding: 2px;
    margin-top: 2px;
}

.gallery-template-title {
    display: inline-block;
}

.gallery-template-icon-container {
    display: inline-block;
    padding: 2px;
    margin-top: 2px;
}

.gallery-template-icon {
    width: 24px;
    height: 24px;
}

.gallery-element-dragdrop-container {
    display: flex;
    flex-direction: column;
}

.gallery-element-row {
    display: flex;
    flex-direction: row;
    padding-left: 25px;
    width: 100%;
}

.gallery-element-row-selected {
    display: flex;
    flex-direction: row;
    padding-left: 25px;
    width: 100%;
    background-color: #9c9c9c;
}

.gallery-element-row-drop-zone {
    height: 5px;
    padding-top: 0px;
    padding-bottom: 0px;
    width: 100%;
}

.gallery-element-row-drop-zone-active {
    background-color: #4d4d4d;
    opacity: 0.8;
    height: 10px !important;
    padding-top: 0px;
    padding-bottom: 0px;
    position: relative;
}

.gallery-element-title-container {
    margin-left: 5px;
    display: inline-block;
    width: 90%;
    padding: 2px;
    margin-top: 2px;
}

.gallery-element-title {

}

.gallery-element-icon-container {
    display: inline-block;
    padding: 2px;
    margin-top: 2px;
}

.gallery-element-icon {
    width: 24px;
    height: 24px;
}

.gallery-element-action-icon-container {
    display: flex;
    justify-content: flex-end;
    padding: 2px;
    margin-top: 2px;
    margin-right: 5px;
}

.gallery-element-action-icon {
    width: 20px;
    height: 20px;
}

.gallery-actions-container {
    margin-top: 10px;
}
.gallery-action-row {
    display: inline-flex;
    width: 100%;
    justify-content: flex-end;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-right: 7px;
}

.gallery-action-btn {
    width: 150px;
}

.gallery-action-icon-container {
    float: left;    
}

.gallery-action-icon {
    width: 18px;
    height: 18px;
    margin-right: 5px;
}

.gallery-action-text {
    float: right;
}

/* Designer Property Sheet Styles */
.designer-properties-panel-body {
    padding: 5px 10px 5px 10px;
}

.designer-properties-panel-svgicon {
    width: 14px;
    height: 14px;
}

/* property group title */
.designer-properties-subtitle {
    margin-left: 5px;
    font-size: 18px;
    font-weight: bolder;
}

.designer-properties-row {
    margin: 0px 0px 5px 0px;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    align-content: center;
    width: 100%;
}

.designer-properties-empty-row {
    height: 24px;
}

.designer-properties-row-odd {
    background-color: #9c9c9c;
    padding-top: 8px;
    padding-bottom: 4px;
}

.designer-properties-row-even {
    padding-top: 8px;
    padding-bottom: 4px;
}

.designer-properties-label-container {
    width: 25%;
    text-align: right;
}

.designer-properties-label-container-multiline {
    width: 25%;
    text-align: right;
    align-self: normal;
    margin-top: 5px;
}

.designer-properties-value-container {
    width: 75%;
    margin-left: 10px;
    text-align: left;
    box-sizing: content-box;
}

.designer-properties-invalid-input {
    border-color: #e35c5c;
    box-shadow: 0px 0px 4px #e35c5c;
    background-color: lightcoral;
    font-style: italic;
    color: #e35c5c;
}

.designer-properties-icon-container {
    display: inline-block;
}

.designer-properties-icon {
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.designer-properties-icon-radio-button {
    opacity: 0;
    display: none;
    width: 0px;
    height: 0px;
}

.designer-properties-action-btn {
    width: 150px;
    margin-top: 5px;
}

.designer-properties-action-icon-container {
    float: left;
}

.designer-properties-action-icon {
    width: 18px;
    height: 18px;
    margin-right: 5px;
}

.designer-properties-action-text {
    float: right;
}

.designer-properties-alignment-zone {
    display: flex;
    flex-direction: row;
}

.designer-properties-alignment-container-left {
    width: 40%;
    text-align: left;
}

.designer-properties-alignment-container-middle {
    width: 10px;
}

.designer-properties-alignment-container-right {
    width: 40%;
    text-align: left;
}

.designer-properties-text-area {
    max-width: 95%;
    resize: none;
    padding: 5px 7px;
}

.designer-properties-select {
    width: 95%;
    padding: 5px 5px;
}

.designer-properties-text {
    width: 95%;
    padding: 5px 8px;
}


.designer-properties-text-disabled {
    width: 95%;
    padding: 5px 8px;
    background-color: lightgray !important;
}
.designer-properties-checkbox-label {
    margin-right: 10px;
}

/* styles specific to the Radial/Linear Gradient properties */
.designer-properties-gradient-row {
    display: flex;
    flex-direction: row;
    padding-top: 8px;
    padding-bottom: 4px;
}

.designer-properties-gradient-row-odd {
    display: flex;
    flex-direction: row;
    background-color: #9c9c9c;
    padding-top: 8px;
    padding-bottom: 4px;
}

.designer-properties-gradient-labels {
    display: flex;
    flex-direction: column;
    width: 15%;
}

.designer-properties-gradient-label-container {
    text-align: right;
    height: 32px;
    font-size: 14px;
    padding-top: 5px;
    margin-bottom: 5px;
}

.designer-properties-gradient-values {
    display: flex;
    flex-direction: column;
    width: 80%;
}

.designer-properties-gradient-value-container {
    margin-left: 10px;
    margin-bottom: 5px;
    text-align: left;
    box-sizing: content-box;
    height: 32px;
}

.designer-properties-gradient-actions {
    display: flex;
    flex-direction: column;
    align-self: center;
    width: 50px;
}

.designer-properties-gradient-action-icon-container {
    display: flex;
    justify-content: flex-end;
    padding: 2px;
    margin-top: 2px;
    margin-right: 5px;
}

.designer-properties-gradient-action-icon {
    width: 20px;
    height: 20px;
}

/* Classes specific to Manage HTML5 Players */

.html5-players-url-icon-zone {
    display: inline-flex;
    flex-direction: row;
    width: 100%;
}

.html5-players-url-container {
    width: 80%;
    word-break: break-all;
}

.html5-players-action-icon-container {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/*///////////////////////////////////////////////////////////////////////////////////
//
//  TEMPORARY FIXES FOR NON-CONFORMANT SPA STRUCTURE
//
//  **** THIS SECTION MUST BE THE LAST SECTION IN THE FILE ****
//
///////////////////////////////////////////////////////////////////////////////////*/

/* adjust the concepts container position in the Import Artwork SPA */
.import-artwork-concepts-container-fix {
    margin-left: 20px;
}

/* adjust the close button in the snapshot preview */
.close-snapshot-preview-fix {
    margin-left: 21px;
}

/* adjust the container in the snapshot details view */
.snapshot-preview-container-fix {
    margin-right: 20px;
}

/* Add Relay - Related */
.relay-wizard-step-instruction {
    font-family: source_sans_proregular, sans-serif;
    font-weight: normal;
    font-size: 15pt;
}

.relay-identity-name {
    font-family: source_sans_prosemibold, sans-serif;
    font-weight: normal;
    font-size: 11pt;
}

relay-identity-value {
    font-family: source_sans_proregular, sans-serif;
    font-weight: normal;
    font-size: 11pt;
}

/* Register Relayed-Players - Related */
.wizard-concept-form-instruction {
    font-family: source_sans_proregular, sans-serif;
    font-weight: normal;
    font-size: 15pt;
    margin-bottom: 15px;
}

.media-file-drop-zone-over {
    background-color: #00538a;
    color: #f8f8f8;
    opacity: 0.7;
}

/* container that contains one or more import media files progress state */
.media-file-import-progress-container {
    margin-left: 20px;
    margin-bottom: 10px;
    background-color: #ececec;
    padding: 30px 40px 10px 40px;
    overflow-y: auto;
}