/* common.css */
:root {
    --theme-default-color: #0072ED;
    --theme-default-secondary-color: #8ABFF7;
    --theme-amber-color: #BB5500;
    --theme-amber-secondary-color: #FCC888;
    --theme-amethyst-color: #7928E1;
    --theme-amethyst-secondary-color: #C2A1F1;
    --theme-azure-color: #0066D4;
    --theme-azure-secondary-color: #8ABFF7;
    --theme-emerald-color: #1F9254;
    --theme-emerald-secondary-color: #A1E4BF;
    --theme-graphite-color: #535353;
    --theme-graphite-secondary-color: #B7B7BA;
    --theme-ruby-color: #8D0B0E;
    --theme-ruby-secondary-color: #EE9496;
    --theme-slate-color: #606066;
    --theme-slate-secondary-color: #B7B7BA;
    --theme-turquoise-color: #297B7B;
    --theme-turquoise-secondary-color: #A8E1E1;
}

/* Reset everything first */
html {
    color: #000;
    background: #FFF
}

fieldset, img {
    border: 0
}

address, caption, cite, code, dfn, em, th, var {
    font-style: normal;
    font-weight: normal
}

/* The strong element style is explicitly defined, as the Redactor HTML editor plugin uses strong to make text bold. */
strong {
    font-weight: bolder
}

ol, ul {
    list-style: none
}

caption, th {
    text-align: left
}

table.monthview-table th {
    text-align: center
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal
}

q:before, q:after {
    content: ''
}

abbr, acronym {
    border: 0;
    font-variant: normal
}

sup {
    vertical-align: text-top
}

sub {
    vertical-align: text-bottom
}

.requiredField {
    position: relative;
    height: 100%;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit
}

input, textarea, select {
    *font-size: 100%
}

legend {
    color: #000
}

#yui3-css-stamp.cssreset {
    display: none
}

/* === Global Elements === */

/* Old style module page colors, which were replaced with the migration to the IDS standard. */
.errorColor {
    /*
    background-color: #F64848;
    */
    background-color: #e84f4f; /* IDS Alert 1 */
}

.eventsColor {
    /*
    background-color: #e75a56;
    */
    background-color: #C65F5F; /* IDS Ruby 5 */
}

.eventsShadingColor {
    /*
    background-color: #f5bdbb;
    */
    background-color: #f4bcbc; /* IDS Ruby 1 */
}

.functionsColor {
    /*
    background-color: #F5AD4D;
    */
    background-color: #F2BC41; /* IDS Amber 5 */
}

.functionsShadingColor {
    /*
    background-color: #fbdeb7;
    */
    background-color: #fbe9bf; /* IDS Amber 1 */
}

.homeColor {
    /*
    background-color: #7D0849;
    */
    background-color: #50535A; /* IDS Slate 6 */
}

.reservationsColor {
    /*
    background-color: #4bd489;
    */
    background-color: #89BF65; /* IDS Emerald 5 */
}

.reservationsColorAlternate {
    /*
    background-color: #AE6092;
    */
    background-color: #806594; /* IDS Amethyst 7 */
}

.settingsColor {
    /*
    background-color: #c1bbb1;
    */
    background-color: #656871; /* IDS Slate 5 */
}

.guestRoomsColor {
    /*
    background-color: #5076BD;
    */
    background-color: #54A1D3; /* IDS Azure 5 */
}

.blue-color {
    color: #0072ed !important;
}

a.efiButton {
    margin-right: .2em;
}

/* Smoothness jQuery UI theme does not bold buttons. Override this, so buttons are bold in all themes. */
.efiButton {
    font-weight: bold;
    font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
    font-size: 1.1em;
}

.largeItalic {
    font-style: italic;
    font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
    font-size: 14pt;
    padding-top: 4px;
    padding-bottom: 4px;
    width: 100%;
    display: inline-block;
}

h1 {
    clear: both;
    font-size: 18pt;
    margin: 5px 0 5px 0;
    padding: 5px 5px 5px 0;
    color: #000000;
}

h2 {
    clear: both;
    font-size: 14pt;
    margin: 5px 0 5px 0;
    padding: 5px 5px 5px 0;
    color: #000000;
}

h3 {
    font-size: 12pt;
    margin: 10px 0 0 0;
    padding: 5px 0 5px 0;
    font-weight: normal;
}

p {
    margin: 0 0 0 0;
    padding: 5px 0 5px 0;
}

p.condensed {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

pre {
    margin: 0 0 0 0;
    padding: 5px 5px 5px 5px;
    background-color: #D7D7D8;
    color: #2F2F32;
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

input {
    font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    padding: 3px 3px 3px 3px;
    outline: none;
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 2px;
}

input:focus {
    outline: none;
    border-color: #654b24;
    border-style: solid;
    border-width: 2px;
}

input[type="checkbox"] {
    width: 20px;
}

input[type="radio"] {
    width: 20px;
}

select {
    outline: none;
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 2px;
    margin-top: 0;
    height: 26px;
}

select:focus {
    border-color: #654b24;
    border-style: solid;
    border-width: 2px;
}

textarea {
    width: 95%;
    font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    line-height: 12pt;
    padding: 3px 3px 3px 3px;
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 2px;
}

textarea:focus {
    outline: none;
    border-color: #654b24;
    border-style: solid;
    border-width: 2px;
}

.hidden, [hidden] {
    display: none;
}

/* Jquery overrides */
.ui-widget {
    font-size: 1.4rem;
}

.ui-button {
    margin-right: .2em;
}

/* The following two properties set the z-axis of the jQuery dialog and the grey screen that appears behind it.
 * These are needed, as the Redactor HTML editor toolbar has a z-index value of 1053 and shows above the jQuery
 * dialog. These overrides cause the jQuery dialog and background screen to appear above the toolbar as desired. */
.ui-dialog {
    z-index: 1100 !important;
}

.ui-widget-overlay {
    z-index: 1060 !important;
}

ul.bullets {
    list-style: circle;
    margin-left: 30px;
}

ul.bullets li {
    margin: 4px 0 4px 0;
}

span.inlineBlock {
    display: inline-block;
}

.category-title {
    display: inline-block;
    width:calc(100% - 150px);
}

/* Stripe-specific selectors to mimic an input field. */
.stripe-input {
    font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    padding: 3px 3px 3px 3px;
    outline: none;
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 2px;
}

.stripe-input:focus,
.stripe-input.StripeElement--focus {
    outline: none;
    border-color: #654b24;
    border-style: solid;
    border-width: 2px;
}

/* === Page Structure === */

#navigationPlusModuleContent {
    width: 100%;
    float: left;
}

#innerContent {
    min-height: calc(100vh - 227px);
}

/* === General module workspace area styles === */
.moduleTitleImage {
    float: left;
    margin: 12px 8px 8px 8px;
    width: 32px;
    border-color: transparent;
    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
    background-color: #FFFFFF;
}
.moduleTitleImage.eventIcon {
    border-color: #C65F5F;
}

.icon.iconEventsColor {
    color: #C65F5F; /* IDS Ruby 5 */;
}

.moduleTitleText {
    display: inline-block;
}

.moduleTitle {
    font-size: 2.0rem;
    padding: 5px 5px 0 5px;
    color: #FFFFFF;
    max-width: calc(100% - 60px);
}

.moduleSubtitle {
    font-size: 1.6rem;
    padding: 0 5px;
    color: #FFFFFF;
    max-width: calc(100% - 60px);
}

.efiDatePicker {
    position: relative;
}

/* Fixes to prevent pixel 'jitter' when dates are selected on the efiMultiDatePicker */
.efiMultiDatePicker table.ui-datepicker-calendar {
    border-collapse: separate;
}
.efiMultiDatePicker .ui-datepicker-calendar td {
    border: 1px solid transparent;
}

/* Color to show selected dates more prominently on efiMultiDatePicker */
.efiMultiDatePicker .ui-datepicker .ui-datepicker-calendar .ui-state-highlight a {
    background: #1D5F8A none;   /* Azure 8 */
    color: white;
}

/* Show selected date more prominently on jquery datepicker displayed on a div rather than an input */
.efiDivDatePicker .ui-datepicker .ui-datepicker-calendar .ui-datepicker-current-day .ui-state-active {
    background: #69B5DD none;   /* Azure 4 */
    color: white;
}

.submitButtons {
    margin-bottom: 3px;
    margin-top: 12px;
    float: left;
    clear: left;
    width: 100%;
}

.submitButtonsSmallerTop {
    margin-bottom: 3px;
    margin-top: 3px;
    float: left;
    clear: left;
    width: 100%;
}

.submitButtonsMidPage {
    margin-bottom: 3px;
    margin-top: 12px;
    float: left;
    clear: left;
    width: 100%;
    padding-bottom: 12px;
}

div.indentSection {
    clear: left;
    margin: 5px 0 0 15px;
}

div.indentSectionDouble {
    clear: left;
    margin: 5px 0 0 35px;
}

/* Use this class with the submitButtons class to prevent an adjacent sectionHeader from overlapping with
 * submit buttons. */
.submitButtonsWithSectionHeader {
    float: none;
}

.panelButtons {
    margin-top: 12px;
}

/* === Displaying groups of fields without Table === */

.fieldBlockLeft {
    padding-top: 8px;
    float: left;
    clear: left;
    width: 48%;
}

.fieldBlockRight {
    padding-top: 8px;
    float: left;
    width: 48%;
}

.fieldLabel {
    padding: 5px 5px 2px 5px;
    /*
    background-color: #eceadf;
    */
    background-color: #F0F0F0; /* IDS Graphite 1 */
    color: #000000;
    font-weight: normal;
    width: 120px;
    text-align: right;
    display: inline-block;
    vertical-align: top;
}

/* Use this class when displaying a non-editable label value (instead of an input field) to the right of a fieldLabel */
span.fieldValue {
    padding: 5px 5px 2px 5px;
    color: #000000;
    font-weight: normal;
    width: 120px;
    display: inline-block;
    vertical-align: top;
}

.displayInline {
    display: inline;
}

.standaloneLabel {
    padding: 5px 5px 2px 5px;
    display: inline;
}

.marginLeft5 {
    margin-left: 5px;
}

.marginLeftGap {
    margin-left: 2.5em;
}

.marginBottom15 {
    margin-bottom: 15px;
}

/* Styles search field and button. */
.lookUpSearchFieldAndButton {
    margin-bottom: 16px;
}

.accountLookupModal {
    width: 90vw;
    max-width: 1000px;
    height: 60vh;
    max-height: 600px;
    margin: 0 10px 0 10px;
}

.contactLookupModal {
    width: 90vw;
    max-width: 1400px;
    height: 60vh;
    max-height: 600px;
    margin: 0 10px 0 10px;
}

.emailLookupModal {
    width: 90vw;
    max-width: 1100px;
    height: 60vh;
    max-height: 650px;
    margin: 0 10px 0 10px;
}

.userLookupModal {
    width: 90vw;
    max-width: 850px;
    height: 60vh;
    max-height: 600px;
    margin: 0 10px 0 10px;
}

.listViewFolderLookupModal {
    width: 90vw;
    max-width: 700px;
    height: 60vh;
    max-height: 400px;
    margin: 0 10px 0 10px;
}

.reportFolderLookupModal {
    width: 90vw;
    max-width: 700px;
    height: 60vh;
    max-height: 500px;
    margin: 0 10px 0 10px;
}

.reportFieldSelectionModal {
    width: 90vw;
    max-width: 1100px;
    height: 60vh;
    max-height: 650px;
    margin: 0 10px 0 10px;
}

.reportFieldHeader {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin: 0 12px 12px;
}

.reportFieldSelectionModal .reportFieldHeader .field label {
    width: auto;
}

.standardLookupModal {
    width: 90vw!important;
    max-width: 850px!important;
    height: 60vh!important;
    max-height: 600px!important;
    margin: 0 10px 0 10px;
}

.modalHeaderStyle {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
    padding-top: 5px;
}

#innerContent .rearrangeable {
    display: none;
}

/* Lookup fields on lookup dialogs. */
.lookupSearchField {
    width: 50%;
    margin-right: 2px;
}

/* Use this class for field labels in dialogs. This condenses fieldLabel to a smaller width and increases the font size.
   The increased font size counteracts the overall smaller font size in the jQuery dialog. */
.fieldLabelDialog {
    width: 80px;
    font-size: 14px;
}

.fieldData {
    padding: 5px 5px 2px 5px;
    text-align: left;
    display: inline-block;
    vertical-align: top;
}

/* Use this class on input fields in dialogs. This class causes the input fields to fill 100% of parent td. */
.fieldInputDialog {
    width: 100%;
}

.fieldCheckboxInput {
    text-align: left;
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
}

/* === Displaying groups of fields WITH Table === */

.detailsDiv {
    clear: left;
    margin-bottom: 5px;
}

.continuedDetailsDiv {
    clear: left;
}

table.detailsTable {
    border-collapse: collapse;
    border-spacing: 0
}

.detailsTable {
    width: 100%;
}

.detailsTableHalfWidth {
    width: 45.5%;
}

.quarterWidth {
    width: 25%;
}

.detailsTable > thead > tr > th {
    font-size: 1.4rem;
}

.detailsTable > tbody > tr > td {
    vertical-align: center;
    font-weight: normal;
}

.detailsTable > tbody > tr.totalsRow > td {
    font-weight: bold;
}

.fullWidth {
    width: 100%;
}

.fullHeight {
    height: 100%;
}

.oneOfTwoColumns {
    width: 50%;
    display: inline-block;
    vertical-align: top;
}

.oneOfThreeColumns {
    width: 33.3%;
}

.twoOfThreeColumns {
    width: 66.6%;
}

.rc-related-input-fields {
    display: flex;
    width: 94%;
}
@media screen and (min-width: 800px) {
    .rc-related-input-fields {
        width: 85%;
    }
}

.rc-label-input-pair {
    margin: 8px 0 0 0;
}
@media screen and (min-width: 800px) {
    .rc-label-input-pair {
        margin: 1px 0 0 0;
    }
}

.rc-label-column label, .rc-label-column span {
    padding-left: 6px;
}
@media screen and (min-width: 800px) {
    .rc-label-column label, .rc-label-column span {
        padding-left: 0;
    }
}

.rc-label-column {
    /*
    background-color: #eceadf;
    */
    background-color: #F0F0F0; /* IDS Graphite 1 */
    color: #000000;
    text-align: left;
    width: 97%;
    margin-bottom: 2px;
}
@media screen and (min-width: 800px) {
    .rc-label-column {
        padding: 5px 5px 2px 0;
        text-align: right;
        vertical-align: top;
        display: inline-block;
        margin-bottom: 0;
        margin-right: 2px;
    }
    .fullWidth .rc-label-column {
        width: 14%;
    }
    .oneOfTwoColumns .rc-label-column {
        width: 28%;
    }
}

.rc-input, .rc-textarea {
    width: 95%;
}
@media screen and (min-width: 800px) {
    .rc-input, .rc-textarea {
        width: 85%;
    }
}

.rc-input-column {
    position: relative;
    width: 97%;
}
@media screen and (min-width: 800px) {
    .rc-input-column {
        text-align: left;
        position: relative;
        display: inline-block;
    }
    .fullWidth .rc-input-column {
        width: 83%;
        height: 100%;
    }
    .oneOfTwoColumns .rc-input-column {
        width: 69%;
    }
}
.rc-input-full {
    width: 98%;
}
@media screen and (min-width: 1100px) {
    .rc-input-full {
        width: 96%;
    }
}

.infoIcon,
#environmentBanner {
    cursor: pointer;
}

.buttonInfoIcon {
    padding-top: 12px;
    cursor: pointer;
}

.afterButtonIcon {
    float: right;
    margin-left: -30px;
}

.menuInfoIcon {
    padding-top: 10px;
    padding-right: 10px;
    float: right;
    cursor: pointer;
}

.tooltip-button-disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.5;
}

.offsetIcon {
    margin-left: 40px;
}

.rightIcon {
    margin: 10px 10px 0 0;
    float: right;
}

.rc-required {
    background-color: #e4002f;
    position: absolute;
    left: -3px;
    width: 3px;
    top: 0px;
    bottom: 0px;
}

/* The sectionHeader class can be used to add a section group above a set of fields on an Edit page.
 * Usage example:
    <div class="sectionHeader">
        <div class="sectionHeaderLine">
            <span>
                Section Name
            </span>
        </div>
    </div>
*/

.sectionHeader {
    margin-right: 1px;
    margin-bottom: 5px;
    float: left;
    clear: left;
    width: 100%;
}

.sectionHeaderTitle {
    float: left;
}

/* Styles an additional link in a section header
 * see composeEmail.jspx or contactEdit.jspx for example usage. */
.sectionHeaderLink {
    float: right;
    margin-right: 2px;
}

.sectionHeaderLink a {
    text-decoration: none;
    border-bottom: 1px solid #ffffff;
    color: #ffffff;
}

.sectionHeader span {
    font-size: 14px;
    color: #ffffff;
}

.sectionTitle {
    font-weight: bold;
    font-size: 12pt;
    padding: 4px 0;
    clear: both;
}

/* Use for jqgrids. */
.gridData {
    float: left;
    clear: left;
    width: 100%;
    margin-bottom: 5px;
}

/* Formats text for field group labels */
.sectionHeaderLine {
    height: 20px;
    padding-top: 0;
    padding-left: 3px;
}

.fieldGroupLabel {
    color: #2e2e2e;
    margin-top: 5px;
    margin-bottom: 1px;
}

.fieldHeader {
    font-size: 14px;
}

.fieldGroup {
    border: 1px solid #cbc7bd;
    border-radius: 6px;
    margin-left: 21px;
    margin-bottom: 2px;
    padding: 4px;
}

.floatingFieldGroup {
    border: 1px solid #cbc7bd;
    border-radius: 6px;
    float: left;
    margin-top: 8px;
    margin-left: 21px;
    margin-bottom: 2px;
    padding: 4px;
}


.labelColumnOneThird, .labelColumn, .wideLabelColumn {
    text-align: right;
    padding: 0 5px 0 5px;
    /*
    background-color: #eceadf;
    */
    background-color: #F0F0F0; /* IDS Graphite 1 */
    color: #000000;
}

.labelColumnOneThird {
    width: 8%;
}

.labelColumn {
    width: 15%;
}

.wideLabelColumn {
    width: 28%;
}

.efiInlineButton {
    padding: .2em;
    margin-right: .2em;
    width: 115px;
}

/* Table format for drag and drop table (with rounded corners) */

.dragAndDropDetailTable table {
    margin-top: 10px;
    border-collapse: collapse;
    text-align: left;
    width: 30%;
}

.dragAndDropDetailTable {
    clear: both;
    font: normal 12px/150% Arial, Helvetica, sans-serif;
    background: #fff;
    overflow: hidden;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.dragAndDropDetailTable table td, .dragAndDropDetailTable table th {
    padding: 3px 10px;
}

.dragAndDropDetailTable table thead th {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #D4D3D2), color-stop(1, #D4D3D2));
    background: -moz-linear-gradient(center top, #D4D3D2 5%, #D4D3D2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D4D3D2', endColorstr='#D4D3D2');
    background-color: #D4D3D2;
    color: #121212;
    font-size: 12px;
    font-weight: bold;
    border-left: 0 solid #0D0D0D;
}

.dragAndDropDetailTable table thead th:first-child {
    border: none;
}

.dragAndDropDetailTable table tbody td {
    color: #000000;
    border-left: 1px solid #E1EEF4;
    font-size: 12px;
    font-weight: normal;
}

.dragAndDropDetailTable table tbody .alt td {
    background: #EFEEED;
    color: #000000;
}

.dragAndDropDetailTable table tbody td:first-child {
    border-left: none;
}

.dragAndDropDetailTable table tbody tr:last-child td {
    border-bottom: none;
}

.dragAndDropDetailTable table tbody tr:nth-child(odd) {
    background-color: #FFFFFF;
}

.dragAndDropDetailTable table tbody tr:nth-child(even) {
    background-color: #efeeed;
}

/* Create up or down arrows (used to indicate dragability in drag and drop tables. */
/* create an arrow that points up */
div.drag-arrow-up {
    clear: both;
    float: right;
    margin: auto 0;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 6px solid rgba(220, 48, 0, 0.71);
    font-size: 0;
    line-height: 0;
    position: absolute;
    vertical-align: middle;
}

/* create an arrow that points down */
div.drag-arrow-down {
    clear: both;
    float: right;
    margin: auto 0;
    margin-top: 9px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 6px solid rgba(220, 48, 0, 0.71);
    font-size: 0;
    line-height: 0;
    position: absolute;
    vertical-align: middle;
}

.roundedDiv {
    -moz-border-radius: 5px; /* Firefox 3.6-, removed in Firefox 13 */
    -webkit-border-radius: 5px; /* Safari 4-, Chrome 3- */
    border-radius: 5px; /* Firefox 4+, Safari 5+, Chrome 4+, Opera 10.5+, IE9+ */
    border: 1px solid;
    width: 100%;
    background-color: #F7F6F5;
    border-color: #bdbaae;
    margin-top: 5px;
}

.margin5Container {
    margin: 5px;
}

.dndContainer {
    display: table;
    height: 1px;
    width: 100%;
}

.dndCell {
    vertical-align: top;
    display: table-cell;
    height:100%;
    width: 50%;
    padding-right: 6px;
}

.dndCellHeader {
    color: #000000;
    font-weight: bold;
    font-size: 14px;
    line-height: 120%;
    margin-right: 10px;
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 4px;
}

/* Style container for drag and drop items. Round corners and add a background color. */
.dndItemsContainer {
    background-color: #F7F6F5;
    border: 1px solid;
    border-color: #b7b4a9;
    border-radius: 10px; /* Firefox 4+, Safari 5+, Chrome 4+, Opera 10.5+, IE9+ */
    height: 100%;
    -moz-border-radius: 10px; /* Firefox 3.6-, removed in Firefox 13 */
    -webkit-border-radius: 10px; /* Safari 4-, Chrome 3- */
    width: 100%;
}

/* Format label on drag and drop items. */
.dndItem {
    padding-left: 4px;
    line-height: 1.5;
    font-size: 13px;
    cursor: move;
}

/* Allows 11 items to fit in the drag/drop area. */
.dndItems {
    height: 100%;
    min-height: 256px;
    margin: 0px 8px;
}

/* Allows 4 items to fit in the drag/drop area. */
.dndItemsShort {
    height: 100%;
    min-height: 92px;
    margin: 0px 8px;
}

/* Allows 4 items to fit in the drag/drop area. */
.dndItemsMinimal {
    height: 100%;
    margin: 8px;
}

.sortableItemsTable {
    width: 100%;
    margin-top: 8px;
}

.sortableItemsSettings {
    overflow-y: scroll;
    height: 100%;
}

.pageLayoutModal {
    width: 40% !important;
    min-width: 350px !important;
}

.pageLayoutText {
    width: calc(100% - 30px);
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.displayCheckbox {
    height: 22px;
    -webkit-appearance: auto;
}

.greyed-out {
    color: darkgrey;
}

.availableFields {
    display: inline-block;
    vertical-align: top;
    width: 31%;
    margin: 10px;
}

.availableFieldsList {
    max-height: 450px;
    overflow-y: scroll;
}

.availableFieldsHeaderLine {
    height: 20px;
    padding-top: 0;
    padding-left: 3px;
    color: #FFFFFF;
}

.entityFields {
    display: inline-block;
    vertical-align: top;
    width: 60%;
    margin: 10px;
}

.entityFieldsHeaderLine {
    height: 20px;
    padding-top: 0;
    padding-left: 3px;
    color: #FFFFFF;
}

.entityFieldsTable {
    width: 100%;
    vertical-align: top;
    margin-bottom: 10px;
}

.fixedHeightFieldList {
    height: 250px;
    overflow-y: scroll;
}

.fieldColumn {
    width: 100%;
    vertical-align: top;
    min-height: 40px;
}

.entityFieldColumn {
    width: 50%;
    vertical-align: top;
}

.sort-disabled {
    font-style: italic;
    font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    border: 1px solid #FFFFFF;
    margin: 1px;
}

.disable-text-select {
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

.customField {
    border: 1px solid #cbc7bd;
    margin: 1px;
    cursor: move;
}

#field-group-wrapper {
    max-height: 532px;
    overflow-y: scroll;
}

.priority-button {
    width: 30px !important;
    min-width: 30px !important;
    padding:0px !important;
}

.overflow-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-input-max-width {
    max-width: calc(100% - 35px);
}

.block-inline {
    display: inline-block;
}

.table-align {
    display: table-cell;
    vertical-align: middle;
}

.icon-width {
    width: 16px;
}

.height30 {
    height: 30px;
}

.mb25 {
    margin-bottom: 25px;
}

.max-width-100 {
    max-width: 100%;
}

.edit-field-button {
    margin-top: -3px;
    margin-left: 7px;
    position: absolute !important;
}

.avg-font-size {
    font-size: 16px;
}

.settingsItemStyle {
    font-size: 16px;
    padding: 10px;
}

.optionInput {
    width: 97%;
}

.optionText {
    width: 70%;
}

.optionsGroup {
    border: 1px solid #cbc7bd;
    border-radius: 6px;
    padding: 4px;
    width: 85%;
}

.sortableFieldGroup {
    display: inline-block;
    border: 1px solid #cbc7bd;
    border-radius: 6px;
    padding: 4px;
    width: 300px;
}
.sortableFieldText {
    width: 250px;
}

.addOption {
    padding-left: 3px;
}

.dndRemoveLink {
    float: right;
    font-weight: normal;
    margin-right: 5px
}

/* Formats a container div that surrounds two child divs with classes drag-arrow-down and drag-arrow-up. */
div.drag-arrow-container {
    float: right;
    margin-right: 15px;
    margin-top: 1px;
}

/* Use this class in addition to labelColumn on a td when labeling a field within a dialog box. This style removes
   background color to eliminate clash of td background and dialog background. */
.labelColumnDialog {
    background-color: transparent;
    width: 15%;
}

.labelColumnWide {
    width: 18%
}

.dataColumn, .dataColumnSingle {
    text-align: left;
    padding: 5px 5px 2px 2px;
    vertical-align: -webkit-baseline-middle;
}

.dataColumn {
    width: 35%;
}

.dataColumnSingle {
    width: 85%;
}

.tableDataColumn {
    text-align: left;
    padding: 0 5px 2px 2px;
}

.inputColumnOneThird, .inputColumn, .inputColumnSingle {
    text-align: left;
    padding-left: 2px;
}

.inputColumnOneThird {
    width: 25%;
}

.inputColumn {
    width: 35%;
}

.datepickerColumn {
    position: relative;
}

.inputColumnSingle {
    width: 85%;
}

.inlineInput {
    margin-left: 3px;
    margin-right: 3px;
}

.efiInlineSingleSelect_efiSingle {
    margin-left: 3px;
    margin-right: 3px;
}

.efiInlineMultiSelect_efiMulti {
    margin-left: 3px;
    margin-right: 3px;
}


/* === Made this smaller so that "Populate Address From Account" will fit on one line === */
.inputColumnSingleLookup {
    width: 40%;
}

.watermark_container {
    width: 100%;
}

.displayField {
    margin-left: 5px;
}

.dataInput {
    width: 85%;
}

.dataInput50 {
    width: 50%;
}

.dataInputCheckbox {
    margin-top: 8px;
}

.dataInputSingle {
    width: 92%;
}

div.lookupFieldContainer {
    display: flex;
}
@media screen and (min-width: 800px) {
    div.lookupFieldContainer {
        width: 85%;
    }
}

div.lookupFieldInputGroup input {
    width: 96%;
}

div.lookupFieldButton {
    width: 10%;
    margin-top: 7px;
}

div.lookupFieldButton a {
    padding: 4.8px 3.6px 0px 3.6px;
}

/* === Messages === */

.requiredMessage {
    position: relative;
    float: right;
    display: none;
    font-size: 8pt;
    padding: 5px 5px 5px 5px;
    background-color: #ffd6dd;
}

.requiredMessageShow {
    display: inline;
}

.checkRequired {
    background-color: #EAEAEA;
}

.checkRequiredError {
    background-color: #ffd6dd;
    color: #000000;
}

.successMsg {
    background-color: #f9edbe;
    background-repeat: no-repeat;
    background-position-x: 5px;
    background-position-y: 7px;
    color: #000000;
    padding: 5px 5px 5px 10px;
    margin-bottom: 5px;
    margin-top: 5px;
    border-color: #f0c36d;
    border-style: solid;
    border-width: 1px;
    clear:left;
}

.failureMsg {
    background-color: #CC0000;
    background-repeat: no-repeat;
    background-position-x: 5px;
    background-position-y: 7px;
    color: #FFFFFF;
    padding: 5px 5px 5px 25px;
    margin-bottom: 5px;
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 1px;
}

.failureMsg span {
    color: #000000;
}

#message {
    margin-bottom: 12px;
}

.information {
    margin-bottom: 8px;
    padding: 4px;
    width: 100%;
    display: inline-block;
}

/* === Buttons === */

.button16IconOnly .ui-button-text {
    padding: .4em .3em 0 .3em;
}

.buttonLargeLeftMargin {
    margin-left: 2em;

}

/* === In-Line Color Box or Icon === */

.coloredTextBackground {
    padding: 2px 4px 2px 4px;
    background-color: #FFFFFF;
}

.color-box {
    padding-left: 2px;
    width: 16px;
    height: 16px;
    display: inline-block;
    background-color: #FFFFFF;
    position: relative;
    vertical-align: middle;
}

.icon-box {
    padding-right: 4px;
    width: 16px;
    height: 16px;
    display: inline-block;
    background-color: #FFFFFF;
    position: relative;
    vertical-align: top;
}

/* === Other Icons === */

.sectionHeaderIcon16 {
    padding-top: 2px;
    float: left;
}

/* === Search Forms === */

#searchForm {
    font-size: 10pt;
    font-weight: normal;
}

#searchForm input#moduleSearch {
    width: 140px;
}

#moduleSearchArea {
    height: 25px;
    margin: 16px 0 16px 0;
    width: 100%;
}

#moduleSelectView {
    float: left;
}

#moduleSearchEntry {
    float: right;
}

/* Object relative hierarchy breabcrumby trail
   These classes are used for the following:
   - To show the position of an event in the event hierarchy.
   - To show the position of an Account in the account hierarchy. */

.detailsHierarchyLinks {
    margin: 0 0 8px 0;
    float: left;
    width: 100%;
    display: block;
}

.detailsHierarchyLinks ul li {
    display: block;
    float: left;
    overflow: hidden;
    margin: 0 6px 0 0;
    padding: 0 10px 0 0;
    background-position: right center;
}

.detailsHierarchyLinks ul li a {
    line-height: 21px;
    overflow: hidden;
    float: left;
}

.detailsHierarchyLinks ul li a img {
    vertical-align: middle;
    margin-right: 2px;
}

/* Use this class to create a division between related entities (like label/field combos and related lists) */
.moduleDivider {
    margin-top: 8px;
    padding-top: 4px;
    float: left;
    clear: left;
    width: 100%;
}

.moduleDividerSmallMarginBottom {
     margin-bottom: 4px;
     padding-top: 2px;
     float: left;
     clear: left;
     width: 100%;
 }

.moduleDividerMarginTopBottom {
    margin-top: 8px;
    margin-bottom: 4px;
    padding-top: 4px;
    float: left;
    clear: left;
    width: 100%;
}

#progressbar {
    position: relative;
    top: 30px;
    width: 100%;
}

.progress-label {
    position: absolute;
    left: 40%;
    top: 4px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
}

.inline-instruction {
    font-style: italic;
    font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    width: 100%;
    margin-right: 5px;
    margin-left: 2px;
}

.instruction {
    font-style: italic;
    padding: 4px;
    width: 100%;
    display: inline-block;
}

.instructionHalfWidth {
    font-style: italic;
    font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    line-height: 18pt;
    padding-top: 4px;
    padding-bottom: 4px;
    width: 50%;
    display: inline-block;
}

.warningMessage {
    background-color: #F98300; /* IDS Amber 6 */
    font-style: italic;
    font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    line-height: 18pt;
    padding-top: 4px;
    padding-bottom: 4px;
    width: 100%;
    display: inline-block;
}

.criticalMessage {
    background-color: #DA1217;  /* IDS Ruby 6 */
    color: white;
    font-weight: bold;
    font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    line-height: 18pt;
    padding-top: 4px;
    padding-bottom: 4px;
    width: 100%;
    display: inline-block;
}

/* Styles instructions that appear at top of dialogs */
.dialogInstructions {
    font-size: 13px;
    padding-left: 5px;

}

/* Styles instructions that appear near the top of lookup dialogs. */
.lookupInstructions {
    float: left;
    font-size: 13px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-top: 3px;
}

/* Styles the jQGrid container that appears in jQGrids. */
#lookupGridData, #parentLookupGridData {
    clear: left;
    width: 100%;
}

/* Style for a clean-looking detail table with bold column headers and light lines between rows.
 * Used on merge field reference pages.
 *
 * To use, add detailTable class to any table element. */
table.detailTable {
    min-width: 600px;
}

table.detailTable th.center {
    text-align: center;
}

table.detailTable td.center {
    text-align: center;
}

table.detailTable td {
    border-width: 1px 0;
    border-color: #e2e0d4;
    border-style: solid;
}

table.detailTable thead tr {
    border-bottom: 2px solid #a5a398;
}

/* Clearing both makes sure that no sibling elements touch the left or right side.
 * Use this class when you do not want elements to be on their own line. */
.nothingToLeftOrRight {
    clear: both;
}

.clearBoth {
    clear: both;
}

/* Common Dialogs */

.efiDialog .ui-dialog-content {
    background: #ffffff;
}

.efiDialog .ui-dialog-titlebar {
    display: none;
}

div.moduleTitleTextDialog {
    margin-top: 7px;
}

/* Styles for fields shown in multiple columns in a table. */
.headerCenter {
    text-align: center;
}

.headerCenter25 {
    width: 25px;
    text-align: center;
}

.headerCenter50 {
    width: 50px;
    text-align: center;
}

.headerCenter70 {
    width: 70px;
    text-align: center;
}

.headerCenter80 {
    width: 80px;
    text-align: center;
}

.headerCenter90 {
    width: 90px;
    text-align: center;
}

.headerCenter100 {
    width: 100px;
    text-align: center;
}

.width100 {
    width: 100px;
}

.headerCenter120 {
    width: 120px;
    text-align: center;
}

.headerCenter140 {
    width: 140px;
    text-align: center;
}

.headerCenter160 {
    width: 160px;
    text-align: center;
}

.headerCenter180 {
    width: 180px;
    text-align: center;
}

.headerCenter240 {
    width: 240px;
    text-align: center;
}

.headerCenter400 {
    width: 400px;
    text-align: center;
}

.headerLeft200 {
    width: 200px;
    text-align: left;
    padding-left: 5px;
}

.headerLeft240 {
    width: 240px;
    text-align: left;
    padding-left: 5px;
}

.headerLeft280 {
    width: 280px;
    text-align: left;
    padding-left: 5px;
}

.height40 {
    height: 40px;
}

.integer70 {
    width: 70px;
    text-align: center;
}

.integer80 {
    width: 80px;
    text-align: center;
}

.integer90 {
    width: 90px;
    text-align: center;
}

.integer100 {
    width: 100px;
    text-align: center;
}

.integer180 {
    width: 180px;
    text-align: center;
}

.quantity70 {
    width: 70px;
    text-align: center;
}

.quantity80 {
    width: 80px;
    text-align: center;
}

.currency70 {
    width: 70px;
    text-align: right;
}

.currency80 {
    width: 80px;
    text-align: right;
}

.currency90 {
    width: 90px;
    text-align: right;
}

.currency100 {
    width: 100px;
    text-align: right;
}

.rate70 {
    width: 70px;
    text-align: right;
}

.rate90 {
    width: 90px;
    text-align: right;
}

.rate100 {
    width: 100px;
    text-align: right;
}

.string80 {
    width: 80px;
}

.string160 {
    width: 160px;
}

.string240 {
    width: 240px;
}

.string200Right {
    width: 200px;
    text-align: right;
    padding-right: 5px;
}

.stringInput100Percent {
    width: 100%;
    text-align: left;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.monthWidth {
    width: 3em;
}

.yearWidth {
    width: 4em;
}

.padTop2 {
    padding-top: 2px;
}

.padTop8 {
    padding-top: 8px;
}

.padLeft5 {
    padding-left: 5px;
}

.padLeft30 {
    padding-left: 30px;
}

.padRight5 {
    padding-right: 5px;
}

.alignLabelSwappedForInput {
    vertical-align: -webkit-baseline-middle;
    padding-left: 3px;
}

.width15 {
    width: 15px;
}

.width300 {
    width: 300px;
}

.width500 {
    width: 500px;
}

.width-45 {
    width: 45%;
}

.width-50 {
    width: 50%;
}

.alignContentRight {
    text-align: right;
}

.floatRight {
    float: right;
}

.floatLeft {
    float: left;
}

.alignContentCenter {
    text-align: center;
    margin-top: 2px;
}

.tableNavigationInput {
    margin-right: 15px;
}

/* Override for jQuery tooltip. Sets error tooltip style. */
.ui-tooltip.efiToolTipError {
    background: #f3f0ee;
    border: 2px solid red;
    color: #000000;
    max-width: 500px;
}

/* Override for jQuery tooltip. Sets info tooltip style. */
.ui-tooltip.efiToolTipInfo {
    background: #f3f0ee;
    border: 2px solid #000000;
    color: #000000;
    max-width: 500px;
}

.ui-jqgrid {
    min-width: 900px;
}

/* Word wrap in jqGrid cells */
.ui-jqgrid tr.jqgrow td {
    white-space: normal !important;
    height: auto;
    vertical-align: text-top;
    padding-top: 2px;
}

/* Fix horizontal scrollbar issue */
.ui-jqgrid-bdiv {
    width: calc(100% + 1px)!important;
}

/* Word wrap in header row cells */
.ui-jqgrid .ui-jqgrid-htable th div
{
    word-wrap: break-word; /* IE 5.5+ and CSS3 */
    white-space: pre-wrap; /* CSS3 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    white-space: normal !important;
    height: auto !important;
    vertical-align: text-top;
    padding-top: 6px;
    padding-bottom: 6px;
}
.ui-jqgrid tr.ui-row-ltr td:first-child {
    border-left-width: 1px;
    border-left-color: inherit;
    border-left-style: solid;
}
/* More padding on jqGrid cells */
.ui-jqgrid tr.jqgrow td {
    padding: 8px 2px 8px 2px!important;
}

.displayColumn {
    vertical-align: top;
    font-weight: normal;
    border-bottom: 1px solid #fff;
    padding: 4px 0px 4px 2px;
}

.imageColumn {
    background-color: #ffffff;
    float: right;
    vertical-align: middle;
    margin: 1px;
    border-style: solid;
    border-color: #ffffff;
    height: 16px;
}

.smallImage {
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

/* The following definitions set a fixed width on field labels and a 100% width on field inputs/selects.
 * These are used to style Related To select list/related business lookup input field/lookup button that
 * all fit within one column width. */
td.fieldLabelColumnFixedWidth {
    width: 120px;
}

td.fullWidthFieldColumn {
    width: auto;
}

.fullWidthInputElement {
    width: 100%;
}

/* Adds a bit of padding to right of input fields */
div.fullWidthFieldContainer {
    padding-right: 15px;
}

/* === Cursors === */
.pointerCursor {
    cursor: pointer;
}

.gridIconColumn {
    vertical-align: middle;
}

.dialogLabel {
    width: 110px;
    font-weight: bold;
}

.fullWidthFancyTree {
    width: 98%;
}

/* ==========================
   Search Box
   ========================== */
.searchForm {
    float: right;
    margin-bottom: 5px;
}

.searchFormLeft {
    margin-top: 8px;
    float: left;
}

.searchTerm{
    -webkit-appearance: none;
    height: 26px;
    margin-right: 38px;
}
@media screen and (min-width: 800px) {
    .searchTerm{
        width: 140px;
    }
}

.searchButton {
    width: 34px;
    height: 24px;
    vertical-align: top;
    margin: 0 0 0 -36px;
    padding: 0;
}

.searchButton img {
    content:url("/images/magnifier-default.png");
    margin: 0;
}

/* Button loading spinner styles */
.loadingContainer {
    display: flex;
    align-items: center;
    float: left;
}

.loadingSpinnerElement {
    display: inline-block;
    height: 100%;
    vertical-align:middle;
}

.loadingSpinnerContainer {
    display: flex;
    align-items: center;
}

.headerFlexItems {
    display: flex;
    flex-wrap: wrap;
}

.boldText {
    font-weight: bold;
}

/* Overrides for some of the jQuery tabs formatting */
.rc-tab-container {
    background: #ffffff;
    clear: both;
    font-size: 10pt;
}

.rc-tab-container .rc-tab-panel {
    padding: .25em;
}

.rc-tab-grid-data {
    padding-bottom: 10px;
    padding-top: 8px;
    width: 100%;
}

/* Fixes jQuery datapicker when 5 or 6 months are shown.
   Add additional definitions for css classes if you need to show more months (7,8,9,... etc.) */
.ui-datepicker-multi-5 .ui-datepicker-group { width: 20%; }
.ui-datepicker-multi-6 .ui-datepicker-group { width: 16.666%; }

#site-header-row {
    margin-bottom: 0px;
}

#site-img {
    height:60px;
    width:60px;
}

#site-title {
    margin-top: 20px;
}

#quickLaunchIcons {
    margin-top: 9px;
}

#site-product-title .section-title {
    margin-top: 20px;
    margin-left: 80px;
}

/* IDS recommended style for making dropdowns a different width than the default 300px */

.dropdownContainerWidth750 .dropdown {
    width: 750px;
}

.dropdownContainerWidth400 .dropdown {
    width: 400px;
}

.dropdownContainerWidth180 .dropdown {
    width: 180px;
}

.dropdownContainerWidth140 .dropdown {
    width: 140px;
}

.dropdownContainerWidth100 .dropdown {
    width: 100px;
}

/* formatting for portal embedded HTML instructions */
pre.portalHTML {
    font-size: 10pt;
    line-height: 18pt;
}

#portalInstructions {
    padding-bottom: 4px;
}

/* override font size of events on the event calendar */
.fc-event {
    font-size: 1.0em!important;
}

/* Make the font size in jqgrids 12px instead of 11px */
.ui-jqgrid .ui-jqgrid-view {
    font-size: 12px!important;
}

.moduleQuickPrintImage {
    background-color: #FFFFFF;
    width: 32px;
    height: 32px;
    float: right;
    margin: 8px 8px 8px 0;
    cursor: pointer;
}

#moduleQuickPrintIconImage {
    min-width: 32px;
    min-height: 32px;
    width: 32px;
}

.wrapLikePre {
    word-wrap: break-word; /* IE 5.5+ and CSS3 */
    white-space: pre-wrap; /* CSS3 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
}

.preserve-name-spaces {
    white-space: pre;
}

.field .preserve-name-spaces {
    white-space: pre-wrap;
    display: table;
}

.widget-right-title {
    float: right;
    margin-top: 5px;
}

.show-bullet-points ul {
    list-style: disc !important;
}

.show-bullet-points ol {
    list-style: decimal !important;
}

#default-email-address-modal-instructions-ul {
    list-style-type: disc;
    list-style-position: inside;
    font-size: 16px;
}