@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');


/* START: Override font family. */
/* 
@font-face {
    font-family: 'Roboto-Regular';
    src: url('../fonts/Roboto/Roboto-Regular.ttf') format('truetype');
}
*/
@font-face {
    src: url('../fonts/NeueHaasGrotesk/NeueHaasDisplay-Mediu.ttf') format('truetype');
    font-family: 'Neue Haas Grotesk Display Pro';
    font-weight: normal;
    font-style: normal;
}

@font-face {
    src: url('../fonts/NeueHaasGrotesk/NeueHaasDisplay-Roman.ttf') format('truetype');
    font-family: 'Neue Haas Grotesk Roman';
    font-weight: normal;
    font-style: normal;
}

@font-face {
    src: url('../fonts/NeueHaasGrotesk/NeueHaasDisplay-Light.ttf') format('truetype');
    font-family: 'Neue Haas Grotesk Roman Light';
    font-weight: normal;
    font-style: normal;
}

@font-face {
    src: url('../fonts/NeueHaasGrotesk/NeueHaasDisplay-Bold.ttf') format('truetype');
    font-family: 'Neue Haas Grotesk Display Bold';
    font-weight: normal;
    font-style: normal;
}

/* override font-family applied by Bootstrap */
body {
    font-family: initial !important;
}

.font-family-bold {
    font-family: 'Neue Haas Grotesk Display Bold', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: normal;
}

.font-family-crisp, .e-checkbox-wrapper .e-label {
    font-family: 'Neue Haas Grotesk Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: normal;
}

.font-family-light {
    font-family: 'Neue Haas Grotesk Roman Light', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: normal;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3,
.display-4, .display-5, .display-6 {
    font-family: 'Neue Haas Grotesk Display Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    /*font-weight: bold; Does NOT look good on Firewfox. */
}

html, body, .tooltip, .popover {
    font-family: 'Neue Haas Grotesk Display Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

code, kbd, pre, samp, .text-monospace {
    font-family: 'Neue Haas Grotesk Display Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

button, input, optgroup, select, textarea {
    /*font-family: inherit;*/
    font-family: 'Neue Haas Grotesk Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
/* Override Syncfusion font family. */
.e-control {
    font-family: 'Neue Haas Grotesk Display Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    /*color: #424951 !important;*/
}

.e-calendar .e-cell {
    /* Neue Haas Grotesk Roman: Is more crisp! */
    font-family: 'Neue Haas Grotesk Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

.e-control input, .e-control textarea, .e-control select, .e-control optgroup {
    font-family: 'Neue Haas Grotesk Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    /*color: #424951 !important;*/
}

.e-control label {
    font-family: 'Neue Haas Grotesk Display Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Remove !important. Other wise cannot override this for .e-control label */
    /*color: #424951 !important;*/
}

.e-toolbar .e-tbar-btn .e-tbar-btn-text {
    font-family: 'Neue Haas Grotesk Display Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

.e-tab .e-toolbar-items .e-toolbar-item .e-tab-text {
    font-family: 'Neue Haas Grotesk Display Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
.tab-item-additional-text {
    position: relative;
    top: -4px;
    font-weight: normal;
    font-family: 'Neue Haas Grotesk Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
.e-headertext {
    font-family: 'Neue Haas Grotesk Display Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    color: #424951; /* Almost black */
    font-size: 14px;
    text-transform: uppercase;
}

.e-card, .e-grid, .text-normal {
    font-family: 'Neue Haas Grotesk Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
.text-normal {
    font-size: 14px !important;
}

.e-grid td.e-rowcell.e-focus.e-focused {
    box-shadow: none;
}

.e-grid th.e-headercell.e-focus.e-focused {
    box-shadow: none;
}

.e-grid .e-icon-gdownarrow {
    padding: 0px 7px 0px 8px !important;
}

.e-grid .e-icon-grightarrow {
    padding: 0px 7px 0px 1px !important;
}
.e-tab .e-content .e-item {
    font-size: 14px !important;
}

/* END: Override font family. */
body, html {
    height: 100vh;
    background: #f4f4f4;
}

.form-control {
    border-radius: 0 !important;
}

.loading-background {
    background: #00adf0;
    width: 100%;
    height: 100vh;
    color: #fff;
}
.loading-background .underlay {
    position: absolute;
    top: 30vh;
    width: 100%;
    text-align: center;
}
.loading-background .underlay .spinner-area {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}


legend {
    font-size: 1.1rem;
    color: #424951;
}

/*
.default-background {
    background: #f4f4f4;
    min-height:100%;
}
*/
h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

/* justify-content-end is a bootstrap class. Only works if it's a display:flex */
.justify-content-end {
    display: flex;
    align-self: center; /* This will make the text vertica aligned.*/
}
.justify-content-end-remove-flex-direction {
    flex-direction: unset !important;
}
.align-content_center {
    align-content: center;
}
.form-panel-area .row label.justify-content-end {
    flex-direction: column;
}
label.justify-content-end small {
    text-align: right;
}
label.align-items-end {
    display: flex;
    text-align: right;
    align-items: flex-end;
}
.label-on-top {
    align-self: baseline;
    padding-top: 2px;
}
.e-dialog .e-btn-group .e-btn {
    padding-left: 10px;
    padding-right: 10px;
}

.e-dialog .e-btn-group .e-btn .e-icons {
    font-size: 18px;
}

.e-dialog .e-footer-content .dialog-footer-button {
    margin-top:7px;
}

.remove-pager .sf-pager {
    display:none;
}

.page-area-description {
    padding: 10px;
    color: #424951; /* Almost black */
    font-size: 14px;
    margin-bottom: 10px;
    font-family: 'Neue Haas Grotesk Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

.page-area-description .bold, .best-practice-column-rule .bold {
    font-family: 'Neue Haas Grotesk Display Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: normal;
    white-space: nowrap;
    display: contents;
}
.push-content-to-bottom {
    display: flex;
    align-items: end;
}
/* START: Grid styles */
/* Tooltip CSS */
[data-datagrid-tooltip] {
    position: relative;
    cursor: pointer;
}
.chart-data-point-tooltip {
    font-family: 'Neue Haas Grotesk Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: normal;
    padding: 7px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    position: absolute; /* Ensure the tooltip is positioned absolutely */
    top: 0; /* Position at the top */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -100%); /* Adjust position to be above the data point */
    z-index: 1000; /* Ensure it appears above other elements */
}
.chart-data-point-tooltip::before {
    content: '';
    position: absolute;
    bottom: -9px; /* Position the arrow at the bottom of the tooltip */
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.7) transparent transparent transparent; /* Create an arrow pointing down */
}
[data-datagrid-tooltip]:before {
    content: attr(data-datagrid-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #A9A9AD;
    color: white;
    padding: 4px 8px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    font-size: 12px;
}

[data-datagrid-tooltip]:hover:before {
    opacity: 1;
}

.e-grid .e-icon-filter::before {
    width: 14px;
    display: inline-block;
    height: 14px;
    background-position: right top;
    background-size: 10px 20px;
    background-repeat: no-repeat;
    content: "" !important;
    background-image: url(../images/filter.png) !important;
    background-size: 100% 100%;
}
.sf-grid .e-altrow, .sf-grid .e-toolbar .e-toolbar-items {
    background-color: #D4D4D6 !important
}

.e-grid .e-gridheader .e-fltr-icon .e-sortfilterdiv {
    margin-right: 14px !important;
}

.e-grid .e-gridheader .e-sortfilter .e-fltr-icon .e-headercelldiv {
    margin-right: 9px !important;
}

.e-grid .e-headercelldiv, .e-grid .e-rowcell {
    font-size: 14px !important;
    color: #000 !important; /* Grid text: black */
}

.grid-cell-view-icon-area {
    justify-content: center;
    display: flex;
    margin-top: 4px;
}
.dropdown-cell-view-icon-area {
    justify-content: center;
    display: flex;
}
.e-grid .e-rowcell {
    padding: 4px 6px !important;
    cursor: pointer;
    vertical-align: top !important; /* Together with flex this will allign the data to the top. The default behavior is center. */
}
.e-gridcell, .e-gridcell-link {
    font-size: 14px !important;
    color: #000 !important;
    font-family: 'Neue Haas Grotesk Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
.e-grid .e-headercell, .e-grid .e-detailheadercell {
    padding: 8px 6px 6px 6px !important;
}
.e-gridcell-link {
    cursor: pointer;
    text-decoration: underline;
}
.e-columnheader .e-headercell .e-headertext {
    font-weight: 500;
}
.e-columnheader .e-headercell .e-headertext, .sf-grid .e-tbar-btn-text {
    text-transform: uppercase;
}

.sf-grid .e-tbar-btn-text {
    /* font-weight: bolder; Does NOT look good in firefox */
    font-size: 14px !important;
    color: #fff !important;
}

.sf-grid .e-toolbar-items .e-icons {
    color: #fff !important;
    font-size: 20px !important;
}

.sf-grid .e-gridcontent .e-content, .sf-grid .e-gridheader {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
}

.sf-grid .e-tbtn-txt {
    padding: 8px;
    margin: 0 !important;
    border-radius: 0 !important;
    background-color: #A9A9AD !important; /* Tool bar button color. Dark grey. */
}

.e-input-group input, .e-input-group.e-control-wrapper input.e-input, .e-input-group.e-control-wrapper input, 
.e-float-input input, .e-float-input.e-input-group input, .e-float-input.e-control-wrapper input, .e-float-input.e-control-wrapper.e-input-group input {
    border-radius: 0 !important;
}
.custom-datetime-picker .e-control-wrapper.e-datetime-wrapper {
    margin-top: 0 !important;
}
.e-multi-select-wrapper {
    display: flex;
    background-color: #e9ecef;
}
.e-multiselect.e-control-container .e-multi-select-wrapper .e-multi-searcher, .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-multi-searcher {
    flex:1;
}
.e-multiselect .e-multi-select-wrapper {
    width: 100% !important;
    cursor: pointer;
}

.sf-grid .e-toolbar-item {
    padding: 0 !important;
    margin: 0 !important;
    margin-left: 2px !important;
}

.e-gridheader {
    border-bottom: none !important;
}

.sf-grid .e-toolbar-items {
    height: 40px !important;
}

.sf-grid .e-toolbar-items .e-toolbar-right, .sf-grid .e-toolbar-items .e-toolbar-left, .sf-grid .e-toolbar-items .e-toolbar-center, .sf-grid .e-toolbar-items .e-toolbar-item {
    height: inherit !important; /* Need to do this so that the grid menu shows the buttons as big as the tool bar in firefox.*/
}

.sf-grid .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn {
    height: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.sf-grid .e-tbtn-txt:hover {
    background-color: #959599 !important; /* Tool bar button color. Dark grey. */
    /*font-weight: bolder !important;*/
}
.export-grid-button, .export-grid-button button, .export-grid-button .e-tbtn-txt {
    background-color: #578300 !important;
}
/* END: Grid styles */
/* Start: Override bootstrap styles */
.form-control {
    padding: 0;
}

.form-label {
    margin-bottom: 0.3rem;
}
/* End: Override bootstrap styles */
/* Start: Label styles */
.e-float-input, .e-float-text, .e-label-top, .custom-label-input {
    /* I think this is wrong. This didn't work controls without a tooltip.
        font-family: 'Neue Haas Grotesk Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    */
    font-family: 'Neue Haas Grotesk Display Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    color: #424951 !important;
}

.e-float-input, .e-float-text, .e-label-top {
    /* I think this is wrong. This didn't work controls without a tooltip.
        font-family: 'Neue Haas Grotesk Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    */
    font-family: 'Neue Haas Grotesk Display Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    color: #424951 !important;
}

.lb-sm, .lb-md, .lb-lg {
    font-family: 'Neue Haas Grotesk Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    color: #374151 !important;
}

.lb-sm {
    font-size: 12px !important;
}

.lb-md {
    font-size: 14px !important;
}

.lb-lg {
    font-size: 18px !important;
}

.lb-medium {
    width: 50%;
}
.label-top-200-width .e-label-top {
    width:200px !important;
}
.lb-form-action-response {
    font-family: 'Neue Haas Grotesk Display Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: 16px !important;
}
.input-group {
    width: 100%;
    display: flex;
}
.text-input-group {
    display: flex;    
}
.text-input-group.singleline
{
    height:32px;
}
.input-group .e-tooltip, .text-input-group .e-tooltip {
    flex: 1;
}
.text-box-button, .text-box-placeholder-button {
    background-color: #A9A9AD; /* Select button color: darker grey*/
    color: #fff;
    height: 32px;
    /* align-self: end; When the label is a bit longer and comes to 2 lines then this will put the button lower then the text box. */
    cursor: pointer;
    display: flex;
    align-items: center;
    padding-left: 7px;
    padding-right: 7px;
    font-size: 12px;
    white-space: nowrap;
}
.text-box-placeholder-button {
    align-self: end;
}
.text-box-placeholder-button.disabled {
    color: #fff; /* Grayed out */
    background-color: #aaa; /* Grayed out */
    cursor: not-allowed; /* Shows a 'not allowed' cursor */
}
.business-number-controls .text-box-button {
    align-self:auto;
}
.business-number-controls .business-number-result {
    padding-top:7px;
    padding-bottom:10px;
}
.business-number-controls .business-number-result .label {
    padding-right: 30px;
}
.business-number-controls .business-number-result .value {
    padding-left: 0px;
}
.mulit-row-textbox .e-float-input, .mulit-row-textbox .e-tooltip {
    margin-top: 0px !important;
    padding-top:0px;
}
.text-box-button:hover {
    background-color: #959599; /* Select button color: darker grey*/
}
.force-heigth-20px {
    height:20px;
}
.control-cell-with-button {
    display:flex;
}
.control-cell-with-button .text-control-button {
    height: 32px;
    align-self: end;
}
/* End: Label styles */
/* Start: User Page styles */
.dummy-password-input {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
    overflow: hidden;
    pointer-events: none;
}
.lb-role {
    -ms-flex: 0 0 80px;
    flex: 0 0 80px;
}

.lb-email-information-access {
    -ms-flex: 0 0 200px;
    flex: 0 0 200px;
}

.checkbox-custom-size {
    height: 35px !important;
}

.panel-spacing > * {
    margin-bottom: 1rem; /* Adjust this value as needed */
}

.panel-spacing > *:last-child {
    margin-bottom: 0;
}
.panel-spacing .col-md-12 {
    margin-bottom: 20px; /* adjust this value as per your needs */
}
.panel-spacing .col-md-12:last-child {
    margin-bottom: 0;
}

.edit-form .form-container, .edit-form.form-container {
    --bs-gutter-y: 0rem; /* Had to do this so that the button underneath the form of the content group has space.*/
    /*margin-bottom: 1.5rem; Don't need this any more. Look at the account settings.Otherwise there is to much of a gap between the buttons and the last pannel. */
    margin-top: 15px;
}
.maincontent .default-tab {
    margin-top: 0;
}
.new-password-input-area .validation-message {
    position: absolute;
}
/* End: User Page styles */
/* Start: SSO Azure */
.sso-azure-button-area {
    padding-top:40px;
    padding-left:20px;
}
.sso-azure-message-area {
    padding-top: 40px;
    padding-left: 20px;
    color:red;
    font-size:14px;
}
/* End: SSO Azure */
/* Start: Tree styles */
/* Remove all back ground colors when tree node is active. */
.e-treeview .e-list-item.e-active > .e-fullrow {
    background-color: transparent !important;
    border-color: transparent !important;
}

/*
.e-treeview .e-list-item .e-icons.e-folder:before {
    content: "\e83c" !important;
}
*/
/* need to hide this otherwise we are getting 2 arrows. */
.e-treeview .e-list-item .e-list-icon {
    display: none !important;
}
.e-file:before {
    content: '\f15b'; /* example unicode for file icon */
    /* other necessary styles */
}

.e-treeview .e-list-item.e-active > .e-text-content .e-list-text a {
    color: #00A54F !important; /* Green */
}

.e-treeview .e-list-text a {
    color: #424951; /* Almost black */
    font-family: 'Neue Haas Grotesk Display Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
.e-treeview .e-list-item.e-active > .e-text-content .e-icon-collapsible, .e-treeview .e-list-item.e-active > .e-text-content .e-icon-expandable {
    color: #424951 !important; /* Almost black */
}
.e-treeview .e-list-text {
    line-height: 26px !important;
    min-height: 26px !important;
}
.e-treeview .e-fullrow {
    height: 26px !important;
}
/* End: Tree styles */
/* START: Security / Authentication Page styles */
.security-auth-page {
    display: flex;
    flex-direction: column;
}
.security-auth-page .page-title-area {
    padding-bottom:0px;
}
.security-auth-page .test-ip-area {
    padding:20px;
    background-color: #fff;
}
.security-auth-page .page-title-area h5 {
    text-transform: uppercase;
    font-size: 16px;
    display: inline-block;
    padding: 10px;
}
.security-auth-page .e-splitter-horizontal {
    flex: 1;
}
.e-dlg-content h4 {
    font-size:16px;
}
/* END: Security / Authentication Page styles */

/* START: Recipient Authentication Page styles */

.recipient-authentication-page .grid-item-type-label {
    width: 160px;
    align-self: center;
}

/* END: Recipient Authentication Page styles */
/* Start: Autherised Sender Page styles */
.min-content-height {
    min-height: 600px;
}
.autherised-sender-page .text-area {
    padding: 10px;
    color: #424951; /* Almost black */
    font-size: 14px;
    margin-bottom: 10px;
    font-family: 'Neue Haas Grotesk Display Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
.autherised-sender-page .e-splitter-horizontal {
    min-height: 600px;
}
.autherised-sender-page .edit-object-content-area {
    width:99%;
    padding: 10px;
}
@media (max-width: 767px) {
    .e-splitter-horizontal {
        flex-direction: column !important;
    }

    .e-pane-horizontal {
        height: auto !important;
        width:100%;
    }
    .e-split-bar {
        display: none !important;
    }
}
.splitter-plane-tree-view {
    background-color:#fff;
}
.groups-users-treeview .e-list-item.e-active > .e-text-content .e-icon-collapsible,
.groups-users-treeview .e-list-item.e-active > .e-text-content .e-icon-expandable {
    color: #00A54F !important; /* Green */    
}
.groups-users-treeview .e-icon-collapsible::before, .groups-users-treeview .e-icon-expandable::before {
    font-size: 24px !important;
    font-weight: bold;    
}
.e-treeview .e-list-item.e-active > .e-text-content .e-list-text {
    color: #00A54F !important; /* Green */
}
.top-treeview-buttons-area {
    justify-content: end;
    display: flex;
    padding-right: 6px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.green-button, .green-add-button {
    background-color: #578300 !important;
    border-color: #578300 !important;
    width: 105px;
}
.green-add-button {
    margin-left: auto;
    height: 30px;
    display: flex !important;
    align-items: center;
}
.groups-users-treeview .e-text-content {
    display: flex;
}
.groups-users-treeview .e-list-text {
    display: flex !important;
    flex: 1;
}
.groups-users-treeview .interaction {
    display: flex !important;
    align-items: center;
    align-self: center;
}
.e-treeview .e-list-text {
    padding-top: 0 !important;
    padding-right: 5px !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
}
.menu-item-icon {
    padding-right: 2px;
}
.image-item-icon {
    padding-right: 10px;
}
.tree-node-text {
    padding-right: 10px;
    word-break: break-all;
    width: 200px;
    white-space: normal;
}
.ignore-deleted-images-switch-area {
    float:right;
}
/* START: Side bar */
.close-menu-button-area {
    align-content: center;
    justify-content: center;
    display: flex;
    padding-top: 10px;
}
.close-menu-button-area .text {
    text-align:center;
    font-family: 'Neue Haas Grotesk Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: normal;
    font-size:14px;
    color: #212529;
}
.scrollable-sidebar-content {
    height: calc(100% - 100px); /* Adjust the height based on the other content, like the close button, in the sidebar */
    overflow-y: auto;
    direction: rtl; /* Move scrollbar to left */    
}
.scrollable-sidebar-content > * {
    direction: ltr;
}
.nav-link-custom {
    text-decoration: none;
}

/* This will make the anchor white when selected. Default is blue. 
       When parent element has "e-treeview .e-list-item.e-active" then "is-anchor-active" will be white.
       meaning of ">" is parent.
    */
.e-treeview .e-list-item.e-active > .e-text-content > .e-list-text > .is-anchor-active {
    color: #fff;
}

.e-sidebar {
    z-index: 1001 !important; /* Need this so that it hovers over the draggable components of the SfDashboardLayout component */
}

.e-sidebar.e-left {
    top: 60px !important;
}

.e-sidebar.e-right {
    top: 70px !important;
}
/* END: Side bar */
/* START: Active mailouts summary styles */
.active-mailouts-summary-area {
    display: flex;
    min-width: 252px;
    height: 45px;
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    margin-right: 2px;
    background-color: #fff;
    position: absolute;
    right: 0;
    align-items: center;
    top: 33px;
    z-index: 10;
}
.active-mailouts-summary-area .active-mailouts-summary {
    color: #495057;
    font-size: 14px;
    font-family: 'Neue Haas Grotesk Display Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
.active-mailouts-summary-area .active-mailouts-summary .summary-row {
    display:flex;
    height: 20px;
}
.active-mailouts-maximum-top-dropdown {
    display: inline-block;
    width: 50px;
    border-bottom: 1px solid black;
    margin-left: 5px;
    margin-right: 5px;
}
.active-mailouts-summary .dropdown-no-borders {
    display:flex;
}
.active-mailouts-summary .summary-row span {
    align-self: end;
    color: #949499;
}

.dropdown-no-borders {
    border: none !important;
    font-family: 'Neue Haas Grotesk Display Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    width: inherit;
    border-color: black !important;
    box-shadow: 0px 0px 0px 0px black !important;
    border: none !important;
}
.dropdown-no-borders input.e-input {
    padding-left: 0px !important;
    height: 17px !important;
    align-self: end;
    position: relative;
    top: 1px;
    font-size:18px !important;
}
.dropdown-no-borders span.e-icons {
    align-items: end !important;
    position: absolute !important;
    right: 0;
    top: -6px;
    min-width:20px !important;
}
/* END: Active mailouts summary */
/* START: Sender's Domain Page styles */
.spf-validation-cell {
    display: flex;
    justify-content: left;
}
.spf-validation-cell .e-tooltip {
    font-family: 'Neue Haas Grotesk Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: normal;
    font-size: 14px;
}
/* END: Sender's Domain Page styles */
/* START: Autherised Sender Page styles */
/* START: Switch styles */
.e-switch-on, .e-switch-off {
    font-size: 14px !important;
}

.e-switch-on {
    background-color: #083B61 !important;
}

.e-switch-inner {
    border-color: #083B61 !important;
}
/* END: Switch styles */
.btn-primary, .e-primary {
    color: #fff;
    background-color: #083b61 !important;
    border-color: #1861ac !important;
}

.button-icon {
    margin-right: 3px;
}

.content {
    padding-top: 1.1rem;
}

.question-mark {
    display: inline-block;
    vertical-align: top;
    position: relative;
    cursor:pointer;
    /*color: #083b61;    */
}
.bi-question-circle {
    cursor: pointer;
}
.question-mark svg {
    vertical-align: top !important;
    cursor: pointer;
}

.e-link {
    color: #083b61 !important;
}

.padding-right-none {
    padding-right: 0 !important;
}
/* This is used by tab containers. Need to set the min-height, other wise the spinner sits to much at the top of the page.*/
.e-tab .e-content {
    min-height: 300px;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.warning-message, .warning-message .e-icons:not(.e-btn-icon,.e-check) {
    color: #F57E20 !important; /* Orange #F57F21 */
    font-weight: bold !important;
}
.warning-color {
    color: #F57E20 !important; /* Orange */
}
.error-message {
    color: #EE1D23; /* Red */
    font-weight: bold !important;
}
.error-color {
    color: #EE1D23 !important; /* Red */
}
.validation-aria {
    margin-top: 0px;
    margin-bottom: 10px;
}
.superscript-text {
    font-size: 10px;
    vertical-align: super;
    padding-left: 1px;
}
/* START: Component styles */
.active-tab-area {
    background-color: #fff;
    padding: 20px;
}
.active-tab-area:not(:first-of-type) {
    margin-top: 10px;
}
.account-service-config-area {
    display: flex;
    margin: 5px;
    padding: 5px;
    display: inline-block;
}
.label-value-less-spacing .col-6.value {
    padding-left:0px !important;
}
.account-service-config-area .custom-label-value-area .e-control {
    font-size: 14px;
}
.account-service-config-area .service-config-value {
    display: block;
    padding-bottom:2px;
}
.account-status-component {
    text-align: center;
    display: inline-block;
    margin: 5px;
    padding: 5px;
    min-width: 140px;
}

.account-status-component .lb-current-status-text {
    margin-bottom: 6px;
}

.account-status-component .lb-current-status {
    margin-top: 6px;
}

.active-mailouts-area {
    display: flex;
    flex-wrap: wrap;
}
.active-mailouts-area .active-mailout-type, .account-row .active-mailout-type {
    display: flex;
    flex-direction: column;
}
.active-mailouts-area .active-mailout-type {
    width: 25%;
}
.active-account-mailout-area .active-mailout-type {
    width: 50px;
    height: 45px;
}
.active-mailout-type .e-tooltip {
    display: flex;
    flex-direction: column;
}

.mailout-status-area {
    margin-left: auto;
    align-self: center;
}

.lock-files-notification-bar {
    display:flex;
}

.lock-file-found-component {
    display: flex;
    width: 260px;
    vertical-align: middle;
    padding: 10px;
    color: #fff;
    background-color: #949499;
    margin-left: 15px;
    margin-right: 15px;
}
.lock-file-found-component img {
    display: flex;
}
.lock-file-found-component .title {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.active-mailout-area {
    display: inline-block;
    width: 260px;
    margin: 10px;
    margin-left: 15px;
    margin-right: 15px;
    /*float: left;*/
}

.active-mailout-other-area, .error-mailout-identity-area, .active-mailout-identity-area {
    font-size: 12px;
    padding-left: 10px !important;
}
.active-mailout-identity-area div.tooltip-holder-identity-value.font-family-crisp .e-control label,
.error-mailout-identity-area div.tooltip-holder-identity-value.font-family-crisp .e-control label {
    font-size: 12px;
}
.active-mailout-other-area.fixheight {
    height: 110px;
}
.error-mailout-identity-area label, .error-mailout-identity-area #custom-label {
    font-size: 12px;
}
.error-mailout-identity-area div.tooltip-holder-identity-value {
    padding-left: 0;
}
.active-mailout-other-area .row, .active-mailout-identity-area .row, .error-mailout-identity-area .row {
    line-height: 20px;
    margin-right: 0px;
    margin-left: 0px;
}
.active-mailout-other-area .row .col, .active-mailout-identity-area .row .col, .error-mailout-identity-area .row .col {
    margin-left: 0px;
    padding-left: 0px;
}
div.tooltip-holder-identity-value {
    padding-left: 5px;
    word-break: break-word;
}
label.tooltip-holder-identity-value {
    word-break: break-all;
}
div.tooltip-holder-identity-value .e-tooltip {
    padding-left: 0px;
}
div.tooltip-holder-identity-value.font-family-crisp .e-tooltip,
div.tooltip-holder-identity-value.font-family-crisp .e-tooltip .custom-label,
div.tooltip-holder-identity-value.font-family-crisp .e-control .custom-label,
div.tooltip-holder-identity-value.font-family-crisp .e-control label {
    font-family: 'Neue Haas Grotesk Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: normal;
    font-size: 14px;
}
.active-mailout-test .active-mailout-name-area, .active-mailout-test .active-mailout-progress-area, .active-mailout-test .active-mailout-other-area, .active-mailout-test .active-mailout-identity-area, .active-mailout-test .error-mailout-identity-area {
    background-color: #EAEAEB;
    border: 1px solid #B9B9BD;
    color: #A49599;
    margin-bottom: 5px;
    padding: 5px;
}

.active-mailout-progress-area {
    height: 221px;
}

.active-mailout-progress-area.download-area {
    height: auto !important;
}

.active-mailout-test .active-mailout-type-area {
    border: 1px solid #B9B9BD;
    background-color: #EAEAEB;
}

.active-mailout-name-area {
    height: 65px;
    padding-left: 10px !important;
    padding-right: 0px !important;
    padding-top: 0px !important;
}

.status-mailout-name-area {
    padding-left: 10px !important;
    padding-right: 5px !important;
    padding-top: 5px !important;
}

.active-mailout-production .active-mailout-name-area, .active-mailout-production .active-mailout-progress-area, .active-mailout-production .active-mailout-other-area, 
.active-mailout-production .active-mailout-identity-area, .active-mailout-production .error-mailout-identity-area {
    background-color: #FFFFFF;
    border: 1px solid #B9B9BD;
    color: #A49599;
    margin-bottom: 5px;
    padding: 5px;
}

.status-mailout-name-area .lb-status-description.validation-message {
    color: red;
}

.active-mailout-production .active-mailout-type-area {
    background-color: #FFFFFF;
    border: 1px solid #B9B9BD;
}

.active-mailout-area .active-mailout-type-area {
    margin: 0;
    margin-bottom: 5px;
    display: flex;
    flex-direction: row;
    height: 60px;
}

.active-mailout-progress-area .finished-message,
.active-mailout-progress-area .finished-email-message {
    color: #A49599;
    padding-top: 5px;
    padding-bottom: 10px;
    font-size: 14px;
}

.active-mailout-progress-area .finished-message label {
    color: #578300; /* Dark green - for buttons. */
    width: 70px;
    text-transform: uppercase;
}

.active-mailout-progress-area .finished-email-message label {
    color: #578300; /* Dark green - for buttons. */
    width: 120px;
    text-transform: uppercase;
}

.active-mailout-type-area .mailout-emails-type, .active-mailout-type-area .mailout-sms-type, .active-mailout-type-area .mailout-whatsapp-type, .active-mailout-type-area .mailout-peppol-type, .active-mailout-type-area .mailout-error-type {
    text-align: center;
}

.active-mailout-type-area .mailout-emails-type {
    background-color: #00AEEF;
    margin-right: 1px;
}

.active-mailout-type-area .mailout-type-label {
    color: #fff;
    font-size: 10px;
    top: 2px;
    position: relative;
}
.active-mailout-name-area .lb-job-description .lb-job-description-span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
}

.active-mailout-type-area .mailout-sms-type {
    background-color: #1C75BD; /* Color: Blue */
    margin-right: 1px;
}

.active-mailout-type-area .mailout-peppol-type {
    background-color: #083B61;
}

.active-mailout-type-area .mailout-whatsapp-type {
    background-color: #25D366;
}

.active-mailout-type-area .mailout-error-type {
    background-color: #EE1D23; /* Color: RED (error) */
}

.active-mailout-type-area .active-mailout-type img {
    align-self: center;
}

.active-mailout-area .active-mailout-name .lb-run-name-area {
    display: flex;
    flex-direction: row;
}

.active-mailout-area .active-mailout-name .lb-run-name {
    padding-top: 5px;
    padding-right: 5px;
}

.status-mailout-name-area .lb-status-name {
    color: #A49599;
}

.status-mailout-name-area .lb-status-description {
    font-size: 12px;
    font-weight: 400;
    color: #424951;
    margin-top:5px;
}

.mailout-actions-area .attention-area, .mailout-actions-area .stop-area {
    height: 30px;
    width: 30px;
    background-color: #F57F21;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.attention-area.bold .e-warning {
    font-size: 14px;
    font-weight: bold;
}

.mailout-actions-area .stop-area {
    background-color: #EE1D23;
}

.mailout-actions-area .attention-area .e-warning, .mailout-actions-area .stop-area .e-circle-remove {
    color: #fff;
}

.active-mailout-area .active-mailout-name .mailout-actions-area .options-dropdown .options-dropdown-button {
    background-color: #578300; /* Dark green - for buttons. */
    height: 30px;
    width: 30px;
    border: none;
}

.active-mailout-area .active-mailout-name .mailout-actions-area .options-dropdown .options-dropdown-content {
    top: 30px;
    right: 0px;
}

.active-mailout-area .active-mailout-name .mailout-actions-area {
    margin-left: auto;
    display: flex;
    flex-direction: row;
}

.active-mailout-name .lb-job-description {
    display: block;
    color: #424951; /* Almost black */
    padding-top:5px;
}

.active-mailout-identity-area {
    height: 130px;
    position: relative;
}

.error-mailout-identity-area {
    max-height: 140px;
    position:relative;
}

.active-mailout-other-area .row label:first-child, .active-mailout-identity-area .row label:first-child, .error-mailout-identity-area .row label:first-child {
    flex: 0 0 95px;
    padding-right: 0;
    padding-left: 0;
}

.active-mailout-other-area.downloadinfo .row label:first-child {
    flex: 0 0 100px;
}

.active-mailout-identity-area .e-tooltip, .error-mailout-identity-area .e-tooltip {
    display: inline-block;
    width: auto;
    padding-left: 4px;
}

.active-mailout-progress-area .bar-area {
    padding: 2px 5px;
}

.active-mailout-progress-area .bar-area .number-of-failures {
    display: flex;
    flex-direction: row;
}

.active-mailout-progress-area .bar-area .number-of-failures .failure-label {
    padding-right: 5px;
    font-size: 14px;
    color: #F57F21;
    width: 70px;
    text-transform: uppercase;
}
.active-mailout-progress-area .start-date-label {
    padding-right: 5px;
    font-size: 14px;
    color: #578300;
    width: 90px;
    text-transform: uppercase;
}

.active-mailout-progress-area .bar-area .number-of-failures .failure-value {
    font-size: 14px;
}

.active-mailout-other-area .row label:not(:first-child),
.active-mailout-identity-area .row label:not(:first-child),
.active-mailout-identity-area .row div:not(:first-child),
.error-mailout-identity-area .row label:not(:first-child) {
    padding-left: 5px;
    padding-right: 5px;
}

.active-mailout-progress-bar label, .active-mailout-progress-bar .bar {
    display: block
}

.active-mailout-progress-bar .bar {
    border: 1px solid #2F5A7A;
    background-color: #fff;
}

.active-mailout-tooltip-table-label-cell {
    vertical-align: top;
}

.active-mailout-progress-bar .bar .progress-bar {
    height: 15px;
    display:flex;
}

.active-mailout-progress-bar {
    margin-bottom: 5px;
}

.active-mailout-progress-area .active-mailout-progress-bar label {
    font-family: 'Neue Haas Grotesk Roman Light', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    text-transform: uppercase;
    color: #000;
}
.active-mailout-progress-area .active-mailout-progress-bar a {
    cursor:pointer;
}

.active-mailout-progress-area .progress-title {
    padding-bottom: 6px;
}
/* END: Component styles */
/* START: PROGRESS BAR */
.progress-bar-label {
    font-weight: normal;
    font-size: 10px;
}

.progress-bar-outer-label {
    position: absolute !important;
    top: 0px;
    width: 100%;
    font-weight: normal;
    font-size: 10px;
    align-items: center;
    display: flex !important;
    justify-content: center;
}

.meter {
    position: relative;
    /*background: #555;*/
    box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}

    .meter > div {
        display: block;
        height: 100%;
        /*border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color: rgb(43,194,83);*/
        background-image: linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% );
        box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
        position: relative;
        overflow: hidden;
    }

    .meter > span:after,
    .animate > div > span {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-image: linear-gradient( -45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent );
        z-index: 1;
        background-size: 50px 50px;
        animation: move 2s linear infinite;
        /*border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;*/
        overflow: hidden;
    }

.animate > div:after {
    display: none;
}

@keyframes move {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 50px 50px;
    }
}
/* END: PROGRESS BAR */
/* START: Html Content Checker */
.htmlchecker-content-description-anchor {
    cursor: pointer;
    text-decoration:underline;
}
.htmlchecker-content-description {
    padding:4px;
    padding-left:8px;
    cursor:default;
}
.htmlchecker-content-anchor-icon {
    width: 40px;
    display: inline-block;
    padding-left: 3px;
    padding-top: 3px;
    cursor: pointer;
}
.htmlchecker-content-anchor-icon .e-circle-remove {
    color: #ED1D24 !important; /* Coror: Red = #ED1D24 */
}
.htmlchecker-content-anchor-icon .e-icons {
    font-size:16px;
}
.htmlchecker-content-anchor-url {
    display: inline-block;
    word-break: break-all;
    cursor: pointer;
}
.htmlchecker-content-anchor-url .e-tooltip {
    font-family: 'Neue Haas Grotesk Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: normal;
}
.htmlchecker-content-anchor-description {
    word-break: break-all;
    font-size: 12px;
    cursor: default;
}
.link-validation-infos .alternative-row {
    background-color: #EBF4FC;
}
.htmlchecker-content-column-fixed-width {
    width: 100px;
    text-align: center;
    font-size: 12px;
}
.htmlchecker-content-anchor-message {
    margin-left: 40px;
    word-break: break-all;
    font-size: 12px;
    padding-right: 50px;
    cursor: default;
}
.htmlchecker-content-area {
    height: 350px;
    overflow-y: auto;
    overflow-x: hidden;
    border-top: 2px solid #BEBEC4;
    margin-top: 7px;
}
.html-content-block-header {
    background-color: #BEBEC4;
    margin-top: 0px;
    margin-bottom: 2px;
}
.htmlchecker-link-validation-header {
    border-bottom: 2px solid #949499;
    font-size: 12px;
}
.link-validation-infos .e-circle-check, .htmlchecker-sucessfull {
    color: #578300 !important; /* Coror: Green = #ED1D24 */
}
.htmlchecker-failed {
    color: #EE1D23 !important; /* Coror: Green = #ED1D24 */
    font-size: 16px;
    padding-left: 2px;
    padding-right: 4px;
}
.htmlchecker-sucessfull {
    padding-left: 2px;
    padding-right: 4px;
}
.htmlchecker-helper-text {
    height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 12px;
    cursor: default;
}
.htmlchecker-content-info-header-result {
    padding: 4px;
    padding-right: 10px;
    padding-left: 6px;
    width: 120px;
}
.html-content-block-info {
    padding-left: 2px;
    padding-right: 2px;
}
.validator-info-message-area {
    padding-left: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 12px;
    cursor: default;
}
.tooltip-info-area {
    font-size: 12px;
}
/* END: Html Content Checker */
/* START: context-menu */
.context-menu {
    display: none;
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.context-menu.visible {
    display: block;
}

.no-issue-selected-menu-item {
    padding: 8px 12px;
    cursor: default;
}

.context-menu-item {
    padding: 8px 12px;
    cursor: pointer;
}

.context-menu-item:hover {
    background-color: #eee;
}
/* END: context-menu */
/* START: Breadcrumbs */
.e-breadcrumb.e-custom-breadcrumb {
    /* display:inline-block; Leo: Don't think we need this. */
}

.e-custom-breadcrumb {
    background-color: #f4f4f4;
    margin-top: 0px;
}

.e-breadcrumb {
    margin-bottom: 0px;
}

.e-custom-breadcrumb .e-custom-item {
    width: auto;
    height: 100%;
    position: relative;
    background: #083b61;
    padding: 15px 12px 15px 15px;
    color: white;
    cursor: pointer;
}

.e-custom-breadcrumb .e-breadcrumb-item {
    margin-top: 2px;
    height: 50px;
}

.e-custom-breadcrumb .e-breadcrumb-item .e-custom-item {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
}

.e-custom-breadcrumb .e-breadcrumb-item .e-custom-item .e-label:hover {
    text-decoration: underline;
}

.e-custom-breadcrumb .e-breadcrumb-item:last-child .e-custom-item .e-label {
    cursor: default;
    text-decoration: none;
}

.e-custom-breadcrumb .e-breadcrumb-separator {
    padding: 0 1px !important;
}

.e-custom-breadcrumb li:last-child .e-custom-item {
    color: #E6E7E8;
}

.e-custom-breadcrumb .e-custom-item:hover,
.e-custom-breadcrumb .e-custom-item:active {
    background-color: #00ADF0; /* Color: Light blue (Cumulo9 color) */
}

.e-custom-arrow {
    vertical-align: middle;
}

.e-custom-arrow::before {
    content: "\e87e";
    font-weight: 800;
    font-size: 12px;
    font-family: "e-icons";
    color: #fff;
}

.e-custom-breadcrumb .e-breadcrumb-item:last-child .e-custom-item .e-custom-arrow::before {
    content: "";
}
.small-button.e-btn {
    font-size:12px !important; 
}
.small-button:focus, .small-button .e-btn:focus {
    box-shadow: none !important;
}
.extra-page-button-areas {
    font-size: 14px;
    display: flex;
    margin-top: 0px; /* The top maring needs to be put ion the individual item. This is because when the items wrap it needs to look good. */
    margin-left: auto;
    align-items: center;
    cursor: pointer;
    flex-wrap: wrap;
}
.extra-page-button-areas.right-aligned {
    justify-content: end;
}
.extra-page-button {
    margin-right: 2px;
    margin-top: 2px;
    height: 50px;
    display: flex;
    align-items: center;
    background-color: #578300; /* Dark green - for buttons. */
    padding-left: 20px;
    padding-right: 20px;
}
.extra-page-button-disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
.extra-page-button-text {
    color: #fff;
    font-size: 14px;
    white-space: nowrap;
}
.table-cell-icon {
    display: flex;
    justify-content: center;
    font-size: 18px;
}
.table-row-valign {
    position: relative;
}
.table-row-valign div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.custom-table-row .row {
    border-bottom:1px solid lightgrey;
}

.custom-table-row .custom-column {
    padding-left: 5px;
    padding-right: 5px;
}
.custom-table-row .insert, .merge-field-control .insert {
    text-align: center;
    width: 55px;
    min-width: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-table-row .tagname {
    width: 190px;
    display: flex;
    align-items: center;
}
.custom-table-row .tag {
    width: 280px;
}
.custom-table-row .insert a, .merge-field-control .insert a {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #083b61;
}
.draggable-content {
    white-space: normal;
    word-wrap: break-word;    
    overflow-y: auto;
    overflow-x: hidden;
}
.account-issues-area {
    background-color: #EE1D23 !important; /* Red - Error */
    padding-right: 25px;
    height: 50px;
    justify-content: center;
    display: flex;
    width: 110px;
    margin-right: 2px !important;
    padding-left: 10px !important;
}


.account-issues-area .account-issues-area-label-and-icon .account-issue-label {
    color: #fff;
    padding-right: 5px;
}

.account-issues-area .account-issues-area-label-and-icon .number-of-issues {
    top: 10px;
    right: -13px;
    color: #fff;
    position: absolute;
}

.account-issues-area .account-issues-area-label-and-icon {
    align-items: center;
    display: flex;
    position: relative;
}

.account-issues-area .e-tooltip {
    display: flex;
}

.extra-page-button-areas .extra-page-menu-actions {
    color: #fff;
    font-size: 16px;
    /*margin-left: 2px;*/
    align-self: center;
}

.account-status-area {
    display:inline-block !important;
}

.account-status-area .label {
    font-size: 11px;
    padding-top: 7px;
    color: #083B61
}

.account-status-area .value {
    color: #fff;
}

.extra-button-area {
    font-size: 12px;
    /* font-weight: bolder; Does not look good in firefox */
    display: flex;
    background-color: #578300; /* Dark green - for buttons. */
    margin-top: 2px;
    margin-right: 2px;
    margin-left: auto;
    padding-left: 20px;
    padding-right: 20px;
    height: 50px;
}

.extra-button-area .label {
    font-size: 11px;
    padding-top: 7px;
    color: #083B61;
}

.extra-button-area .value {
    color: #fff;
}

.breadcrumb-main-area nav ol {
    flex-wrap: wrap;
}
.extra-page-button-areas .download-button {
    font-size: 14px;
    background-color: #578300; /* Dark green - for buttons. */
    border: none;
    cursor: pointer;
    color: #fff;
    height: 50px;
    padding-left: 20px;
    padding-right: 20px;
}

.extra-page-button-areas .download-button:hover {
    background-color: #98C138;
    border: none;
}

.div-flex-row {
    display: flex;
    flex-direction: row;
}
/* This does not work when hiding elements with bootstap. This is because the element needs to be diplay:block then. */
.div-flex-horzontal-center {
    display: flex;
    justify-content: center;
}
/* To center elements with display block auto margin is the only way. */
.auto-margin {
    margin: auto;
}
/* END: Breadcrumbs */
/* START: Form styles */
.header {
    background-color: #BFBFC2;
    color: #fff;
    padding: 10px;
    margin-bottom: 0px;
}

.header-link .e-tooltip {
    display:inline-block;
}

.header-link .e-tooltip span {
    display: inline-block;
    font-size: 1.1rem;
    cursor:pointer;
}

.form-panel-area {
    background-color: #FFFFFF;
    height: 100%;
}
.clickable-div.disabled {
    background-color: lightgray;
    cursor: not-allowed;
    pointer-events: none; /* This disables clicking */
    align-self: baseline
}
.dropdown-with-extra-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 10px;
}
.clickable-div {
    cursor: pointer;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 8px;
    padding-right: 8px;
    border-right: 1px solid lightgrey;
    border-top: 1px solid lightgrey;
    border-bottom: 1px solid lightgrey;
    align-self: baseline
}
.e-float-input + .clickable-div {
    padding-top: 5px;
    padding-bottom: 5px;
}
/* Cannot do this, because this moves the panel on top of the buttons and ignores the spacing. Need to create spacing wiith parent div instead.
.e-tab .form-panel-area {
    margin-top: 15px; 
}
*/
.form-panel-controls-area {
    padding: 10px;
}

.width-200px {
    width: 200px;
}
/* Need to do this because of page "returnedemailrule". Otheerwise the e-content div is having a min-height which isn't nice. */
.form-panel-controls-area .e-grid .e-gridcontent .e-content {
    display: table-cell;
}

.form-panel-controls-area .min-width-445 {
    min-width: 445px;
}

.form-panel-controls-area .min-width-320 {
    min-width: 320px;
}

.form-panel-controls-area .min-width-470 {
    min-width: 470px;
}

.form-panel-area .input-area, .e-dlg-content .input-area {
    margin-bottom: 15px;
}

.form-panel-area .clickable, .report-period-item .clickable, .report-period-item-area.clickable, .report-period-area .clickable,
.report-controls-area .clickable, .page-sub-header.clickable {
    cursor: pointer;
}
.page-sub-header {
    padding-left: 7px;
    text-transform: uppercase;
    font-size: calc(1.275rem + .3vw);
}
.input-area .input-area-custom-controls {
    display: inline-block;
}
.input-area .input-area-custom-controls.valueform {
    background-color: rgb(191, 191, 194);
    padding: 4px;
}
.input-area .formbox .form-label {
    padding-top: 4px;
}
.input-area .formbox {
    background-color: rgb(235, 236, 237);
    border-color: rgb(206, 212, 218);
    margin-right: 0px !important;
    margin-left: 0px !important;
}
.formbox .e-control.e-tooltip {
    font-family: "Neue Haas Grotesk Roman", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    color: rgb(55, 65, 81) !important;
    font-size: 14px !important;
}
.input-area .input-area-custom-controls .e-radio-wrapper, .custom-grid-toolbar .toolbar-grid-item .e-radio-wrapper {
    padding-right: 15px;
}

.input-area-label {
    /* font-weight: bold; Does Not look good in firefox */
    margin-right: 10px;
}

.input-area-label-bold {
    font-family: 'Neue Haas Grotesk Display Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    margin-right: 10px;
}
.read-area {
    display: block;
    margin-bottom: 7px;
    margin-top: 7px;
}
.read-area-text .summary-label-value-area .value {
    font-family: 'Neue Haas Grotesk Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: normal;
}
.read-area-text .summary-label-value-area .label {
    text-transform: none;
}

.form-switch-area {
    background-color: #EBECED;
    /*border-radius: 4px;*/
    width: 100%;
    border-color: #ced4da;
    min-height: 35px;
}

.form-switch-control-area {
    background-color: #BFBFC2;
    width: 110px;
    /*border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;*/
    padding-top: 4px;
    min-height: 35px;
}
.form-switch-control-area.label-included {
    width: 90px;
}
.form-switch-control-area.label-included .e-switch-on {
    color: #212529 !important;
}

.form-switch-control-area.label-included .e-switch-off {
    color: #212529 !important;
}

.form-switch-control-area.label-included .checkbox-standard-size {
    width: 65px !important;
}

.form-switch-area .row {
    margin: 0 !important;
}

.form-switch-label-value {
    color: #fff;
    font-size: 16px;
    top: 5px; /* Leo: Need this to put the text lower. This was in the user page. */
    position: relative;
}

.form-switch-area .e-switch-inner {
    border-color: #fff !important
}

.form-switch-area .checkbox-standard-size {
    width: 45px !important;
    float: right;
}

.checkbox-130-size, .checkbox-180-size {
    width: 130px !important;
    height: 28px !important;
}

.checkbox-180-size {
    width: 180px !important;
}
.form-switch-200-size {
    width: 220px !important;
}
.form-switch-200-size .e-switch-wrapper {
    width: 200px !important;
    height: 28px !important;
}
.form-switch-control-area label-included:has(.checkbox-130-size) {
    width: 155px;
}
.form-switch-control-area.label-included:has(> .checkbox-130-size) {
    width: 155px;
}

.form-switch-area .e-switch-on {
    background-color: #fff !important;
}

.form-switch-area .e-switch-handle.e-switch-active {
    background-color: #00A54F !important; /* Green color: ON */
}

.form-switch-area .e-switch-wrapper .e-switch-inner.e-switch-active, .form-switch-area .e-css.e-switch-wrapper .e-switch-inner.e-switch-active {
    background-color: #fff !important;
}

.form-label-switch {
    padding-top: 6px;
}

.input-area-switch-group {
    background-color: #EBECED;
    border-radius: 0px;
}
.form-switch-red-border .row {
    border:2px solid red;
}
/* START: Form switch styles */
/* Not needed any more because we removed the redius from the input boxes. 
.input-area-switch-group .e-tooltip:first-child .form-switch-area {
    border-top-right-radius: 4px !important;
    border-top-left-radius: 4px !important;
}
.input-area-switch-group .e-tooltip:first-child .form-switch-area .form-switch-control-area {
    border-top-right-radius: 4px !important;
}
.input-area-switch-group .e-tooltip .form-switch-area {
    border-radius: 0px !important;
}
.input-area-switch-group .e-tooltip .form-switch-area .form-switch-control-area {
    border-radius: 0px !important;
}
.input-area-switch-group .e-tooltip:last-child .form-switch-area {
    border-bottom-right-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}
.input-area-switch-group .e-tooltip:last-child .form-switch-area .form-switch-control-area {
    border-bottom-right-radius: 4px !important;
}
*/
/* START: Environment Access Info control  */
.environment-access-info-area .environment-access-info-label {
    text-transform: uppercase;
    color: #fff;
}
.environment-access-info-area {
    font-size: 12px;
    /* font-weight: bolder; Does not look good in firefox */
    display: flex;
    background-color: #00adf0;
    margin-top: 2px;
    margin-right: 2px;
    margin-left: auto;
    padding-left: 5px;
    padding-right: 5px;
    height: 50px;
    width: 110px;
}
.environment-access-info-area .e-tooltip {
    display: flex;
    margin: auto;
    align-items: center;
}
.environment-access-info-area .environment-access-info {
    display: flex;
    align-items: center;
    flex-direction: column;
}
.environment-access-info-area .environment-access-envo-label {
    text-transform: uppercase;
    color: #fff;
    font-size: 10px;
}
/* END: Environment Access Info control */
/* START: Import Records */
.import-records-page .top-pager-area .custom-pager-top-buttons {
    width: 140px !important;
}
.import-contacts-form-panel-area .input-area {
    margin-bottom: 0px;
}
/* END: Import Records */
/* START: User Status Switch */
.form-switch-user-status {
    background-color: #BFBFC2;
    width: 220px;
    height: 45px;
}

.form-switch-issue-exception {
    background-color: #BFBFC2;
    width: 170px;
    height: 45px;
}

.form-switch-user-status.form-switch-area, .form-switch-issue-exception.form-switch-area {
    border-radius: 0;
}

.form-switch-user-status .form-switch-control-area {
    width: 140px;
    height: 45px;
    display: inline-block;
    vertical-align: middle;
}

.form-switch-issue-exception .form-switch-control-area {
    width: 80px;
    height: 45px;
    display: inline-block;
    vertical-align: middle;
}

.form-switch-user-status .label-column, .form-switch-issue-exception .label-column {
    display: inline-block;
    padding-left: 15px;
    vertical-align: middle;
}

.form-switch-issue-exception .e-switch-on:after {
    content: "Yes";
    color:#000;
}

.form-switch-issue-exception .e-switch-off:after {
    content: "No";
    color: #000;
}
.form-switch-issue-exception .form-switch-control-area .checkbox-standard-size {
    width: 60px !important;
}
.form-switch-issue-exception .form-label-switch {
    color: #fff !important;
    text-transform: uppercase;
}

.form-switch-user-status .form-label-switch {
    color: #374151 !important;
    text-transform: uppercase;
    padding-right: 10px;
}

.form-switch-user-status .form-switch-label-value {
    text-transform: uppercase;
    top: 1px;
    font-size: 14px;
    padding-left: 8px;
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.form-switch-issue-exception .form-switch-label-value {
    text-transform: uppercase;
    top: 3px;
    font-size: 14px;
    padding-left: 8px;
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.form-switch-user-status .checkbox-standard-size, .form-switch-issue-exception .checkbox-standard-size {
    /*width: 45px !important;*/
    float: none !important;
    margin-top: 4px;
    margin-left: 15px;
}
/* END: User Status Switch */
/* END: Form switch styles */
.e-btn-group {
    height: 50px;
    border-radius: 0;
}

.e-btn-group .e-btn {
    border-radius: 0;
    padding-left: 20px;
    padding-right: 20px;
    text-transform: uppercase !important;
    font-size: 14px;
}

.e-btn-group .e-btn .e-icons {
    font-size: 20px;
    font-weight: 700;
}
/* START: Specify button height for buttons in dialog window. */
.e-dlg-container .e-btn-group {
    height: 35px;
}
.button-row-height-35px {
    height: 35px;
}
.dialog-button-area {
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid #dee2e6; /* Light grey */
    display: flex;
    justify-content: end;
}
.dialog-content-with-inner-buttons .e-dlg-content {
    padding-left: 0px !important;
    padding-right: 0px !important;
}
.dialog-content-with-inner-buttons .dialog-content-area {
    padding-left: 12px !important;
    padding-right: 12px !important;
}
.dialog-button-area .single-button-area {
    display: inline-block;
}
.dialog-content-with-inner-buttons .dialog-button-area .e-btn {
    margin-left:5px;
}
.dialog-content-with-inner-buttons .dialog-button-area {
    padding-left: 12px;
    padding-right: 12px;
}
.ok-button {
    width: 60px;
    background-color: #578300; /* Dark green - for buttons. */
    border-color: #578300; /* Dark green - for buttons. */
}
/* END: Specify button height for buttons in dialog window. */
.bottom-form-buttons .e-btn {
    padding-top: 7px;
}
.e-dialog .bottom-form-buttons .e-btn {
    padding-top: 3px;
}
.e-dialog .bottom-form-buttons {
    margin-bottom:0 !important;
}

.e-btn, .e-css.e-btn {
    border-radius: 0 !important;
}

.e-tab .bottom-form-buttons {
    padding-top: 20px
}
.dialog-content-area {
    font-family: 'Neue Haas Grotesk Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: normal;
    font-size: 16px !important;
}
.dialog-tab-content {
    margin-top: 10px;
}
.bottom-form-buttons .e-btn .e-icons {
    vertical-align: middle;
    /* padding-top: 7px; This doesn't look good. Need to fix this with flex. */
}

.e-back-button {
    color: #000 !important;
    background-color: #E6E7E8 !important;
    border-color: #E6E7E8 !important;
}
.access-code-area .bottom-form-buttons .e-btn-group {
    margin-left: 8px;
    margin-top: 15px;
    height: 45px;
}
.access-code-area .bottom-form-buttons {
    margin-top: 20px;
}

/* END: Form styles */
.application-web-icon {
    height: 50px; /* Set your desired size */
    width: 50px;
}
.application-web-icon-container {
    cursor: pointer;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center;
    height: 60px;
}
.application-web-icon-container.selected {
    border: 3px solid #083b61;
}
.application-web-icon-container:hover {
    background-color: #f0f0f0;
}
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.checkbox-standard-size {
    width: 65px !important;
    height: 28px !important;
}
.checkbox-95px-size {
    width: 95px !important;
    height: 38px !important;
}
.report-setting-item .report-setting-item-multiselect {
    margin-top: 0px !important;
}
.go280px-to-100-percent {
    width:280px;
}
.input-label-auto {
    flex: 1 1 auto !important; /* grow and shrink */
    min-width: 0 !important; /* allow shrinking */
}
.input-230-flex-width {
    flex: 0 0 230px !important;
    width: 230px !important;
}
.min-width-160 {
    min-width:160px !important;
}
.input-160-flex-width {
    flex: 0 0 160px !important;
    width: 160px !important;
}
.input-230-size {
    width: 230px !important;
}
.input-250-size {
    width: 250px !important;
}
.input-150-size {
    width: 150px !important;
}
.input-180-size {
    width: 180px !important;
}
.input-340-size {
    width: 340px !important;
}
.input-340-min-width {
    min-width: 340px !important;
}
.input-300-size {
    width: 300px !important;
}
.input-100-size {
    width: 100px !important;
}
.input-50-size {
    width: 50px !important;
}
.input-70-size {
    width: 70px !important;
}
.input-200px-size {
    width: 200px !important;
}
.input-label-250-size label {
    position: absolute !important;
    width: 250px !important;
}

.input-label-350-size .e-label-top {
    position: absolute !important;
    width: 350px !important;
}

.input-200-size {
    max-width: 200px !important;
}

.input-80-size {
    max-width: 80px !important;
}

.input-100-percent {
    width: 100% !important;
}

.input-350-size {
    max-width: 350px !important;
}
.login-spinner .e-spinner-inner .e-spin-tailwind .e-path-circle {
    stroke: #fff !important;
}
.login-spinner .e-spinner-inner .e-spin-tailwind .e-path-arc {
    stroke: #00adf0 !important;
}
.login-spinner .e-spin-label {
    color: #fff !important;
}
.small-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: -0.125em;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: .75s linear infinite spinner-border;
    animation: .75s linear infinite spinner-border;
}
.report-spinner-area .cancel-loading-data-button-spinner {
    top: 50%;
    padding-top: 100px;
    transform: translateX(-50%) translateY(-50%);
    left: 50%;
    position: absolute;
    cursor: pointer;
    text-decoration: underline;
    font-size: 14px;
    color: #083b61 !important;
}
.e-spinner-pane.e-spin-area-overlay {
    background-color: rgba(0,0,0,.5);
    z-index: 1010 !important;
}
.e-spinner-pane.e-spin-overlay {
    background-color: rgba(0,0,0,.5);
    z-index: 1010 !important;
    position: fixed;
}

.e-spinner-pane.e-spin-overlay .e-spinner-inner, 
.e-spinner-pane.e-spin-area-overlay .e-spinner-inner {
    padding: 25px 15px;
    background-color: #00ADF0;
    z-index: 2011;
    border-radius: 2px;
    min-width: 150px;
}

.e-spinner-pane.e-spin-overlay .e-spinner-inner .e-spin-tailwind .e-path-circle,
.e-spinner-pane.e-spin-area-overlay .e-spinner-inner .e-spin-tailwind .e-path-circle{
    stroke: #fff;
}

.e-spinner-pane.e-spin-overlay .e-spinner-inner .e-spin-tailwind .e-path-arc,
.e-spinner-pane.e-spin-area-overlay .e-spinner-inner .e-spin-tailwind .e-path-arc{
    stroke: #083B61; /* Dark blue */
}

.e-spinner-pane.e-spin-overlay .e-spinner-inner .e-spin-label,
.e-spinner-pane.e-spin-area-overlay .e-spinner-inner .e-spin-label{
    margin-top: 15px;
    COLOR: #fff;
}

.e-spinner-pane.e-spin-overlay .e-spin-label,
.e-spinner-pane.e-spin-area-overlay .e-spin-label{
    font-size: 18px !important;
}

.spin-dialog-custom {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}

.spin-dialog-custom .e-dlg-header-content {
    display:none;
}

.page-title-area h4 {
    text-transform: uppercase;
    display: inline-block;
}

.page-title-area {
    /* padding-top: 20px; Leo: Don't need this any more. The class '.maincontent' will give enough padding. */
    padding-bottom: 20px;
    color: #424951;
}

.validation-errors {
    list-style-position: inside;
}
.validation-errors .validation-message {
    font-family: 'Neue Haas Grotesk Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: normal;
}
/* NOT NEEDED any more. Just needed this for the login page. Specify the floating label styles. 
.e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
.e-float-input.e-control-wrapper:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
.e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
.e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text,
.e-float-input.e-control-wrapper.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text {
    color: #343a40 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    top: 6px !important;    
}
*/
.e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-content {
    /*background-color: #c9e2f7;*/
    padding: 15px;
}
/*
.e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text {
    top: 6px;
    font-size: 16px;
    font-weight: 400;
}
    */
/*Change text in autofill textbox
input:-webkit-autofill {
    -webkit-text-fill-color: yellow !important;
}
    */
/* Start: Custom text box styles . */
/*
    .e-input-copy::after {
        content: '\e77c' !important;
        font-size: 25px;
        position: absolute;
        right: 3px;
        top: 3px;
        font-family: "e-icons";
    }
*/
.margin-top-35px {
    margin-top: 35px !important;
}
.margin-top-25px {
    margin-top: 25px !important;
}
/* Copy Icon */
.e-input-copy input {
    padding-right: 30px !important;
}
.e-input-copy-icon-button::after {
    content: '\e77c' !important;
    font-size: 18px;
    font-family: "e-icons";
    cursor: pointer;
}

.e-input-copy-icon::after {
    content: '\e77c' !important;
    font-size: 18px;
    position: absolute;
    right: 7px;
    top: 4px;
    font-family: "e-icons";
    cursor: pointer;
}
.tooltip-copy-icon {
    position: absolute;
    bottom: 4px;
    right: 7px;
}

.tooltip-copy-icon .e-input-copy-icon {
    display: inline-block;
    width: 15px;
    height: 15px;
}
.tooltip-copy-icon .e-input-copy-icon::after {
    right: 0px;
    top: -6px;
}
/* End: Copy Icon */
/* Start: Search Icon */
.e-search-icon input {
    padding-right: 30px !important;
}

.e-search-icon-button::after {
    content: '\e754' !important;
    font-size: 18px;
    font-family: "e-icons";
    cursor: pointer;
}

.e-input-search-icon::after {
    content: '\e754' !important;
    font-size: 18px;
    position: absolute;
    right: 7px;
    top: 4px;
    font-family: "e-icons";
    cursor: pointer;
}
/* END: Search Icon */
.e-input-readonly input {
    cursor: pointer;
}

.e-input-eye-icon::after {
    content: '\e7de' !important; /* Open eye: \e7de closed eye: \e887 */
    font-size: 18px;
    position: absolute;
    right: 30px;
    top: 4px;
    font-family: "e-icons";
    cursor: pointer;
}

.e-input-eye-closed-icon::after {
    content: '\e887' !important; /* Open eye: \e7de closed eye: \e887 */
    font-size: 18px;
    position: absolute;
    right: 30px;
    top: 4px;
    font-family: "e-icons";
    cursor: pointer;
}
/* End: Custom text box styles */
/* START: Tab styles */
.e-tab .e-toolbar-item:not(.e-vertical)::before {
    border-width: 0 0 0px !important;
}

.e-tab .e-toolbar-item .e-tab-wrap:hover {
    background: transparent !important;
    border: 0px !important;
}

.e-tab .e-toolbar-item .e-tab-wrap {
    border: 0px !important;
}

.e-tab .e-toolbar-item.e-active.e-ileft .e-tab-wrap .e-tab-text, .e-tab .e-toolbar-item.e-active.e-iright .e-tab-wrap .e-tab-text {
    -ms-flex-item-align: auto !important;
    -ms-grid-row-align: auto !important;
    align-self: auto !important;
}

.e-tab .e-toolbar-item.e-active.e-ileft .e-tab-text, .e-tab .e-toolbar-item.e-active.e-iright .e-tab-text {
    color: #333 !important;
}
.e-tab .e-toolbar-items {
    background: none !important;
}
.e-tab .e-tab-header:not(.e-vertical)::before {
    border-width: 0 0 0px !important;
}
/* This does NOT look good in firefox
    .e-tab .e-toolbar-item.e-active .e-tab-text {
        font-weight: 600 !important;
    }
*/
.e-tab .e-toolbar-item .e-tab-text {
    display: inherit !important;
    /* font-family: "Segoe UI", "GeezaPro", "DejaVu Serif", sans-serif, "-apple-system", "BlinkMacSystemFont" !important; */
    font-size: 14px !important;
    font-weight: 400 !important;
    text-transform: capitalize !important;
}

.e-tab .e-toolbar-item.e-active {
    border: 0px !important;
}

.e-tab .e-toolbar-item.e-active .e-text-wrap::after {
    border: 1px solid #0078d6 !important;
    background-color: #0078d6;
    content: "" !important;
    display: block !important;
    /* position: absolute; */
    position: relative !important;
    top: 3px !important;
    width: 100% !important;
}

/* Removing tab headers from SFTab */
.remove-tab-headers .e-toolbar-items, .remove-tab-headers .e-tab-header {
    display: none;
}

.e-tab .e-toolbar-item .e-text-wrap {
    border: 0px solid #0078d6 !important;
    content: "" !important;
    display: block !important;
}

.e-tab .e-toolbar-item .e-tab-wrap {
    color: #495057 !important;
}

.e-tab.e-focused > .e-toolbar-item .e-tab-wrap:focus {
    background: none !important; /* rgba(233, 236, 239, 0.12); */
    border: 0px solid #6c757d !important;
}

.e-tab .e-toolbar-item .e-tab-text {
    font-weight: 500 !important;
    text-transform: uppercase !important;
}

.e-tab .e-toolbar-item, .e-tab .e-tab-header, .e-tab .e-toolbar {
    display: inherit !important;
    background: none !important;
}
/* END: Tab styles */
/* START: Mailout Settings Component styles */
.mailout-caption {

}
.mailout-names {
    padding-left: 5px;
    overflow:auto;
}
.mailout-names .mailout-name {
    display: flex;
    padding-right: 10px;
}
.mailout-count-label {
    font-size: 12px;
    position: relative;
    top: -5px;
}
/* END: Mailout Settings Component styles */
/* START: Report Period styles */
.report-period-area, .report-controls-area {
    display: flex;
    flex-wrap: wrap;
}

/* Need to do this for firefox. */
.date-control-width-170 {
    width:170px;
}
.date-control-width-170 .report-period-drop-down-list {
    width:140px !important;
}
.report-period-area .report-period-item, .custom-grid-toolbar .report-period-item,
.report-controls-area .report-control-item, .report-controls-area .report-period-item {
    display: flex;
    padding: 8px;
    margin-right: 5px;
    margin-bottom: 4px;
    margin-top: 4px;
    background-color: #FFFFFF;
    height: 62px;
    cursor: pointer;
    /*min-width: 220px; This is to much. And not sure why we need this. */
}
.mailouts-selection-control-area .report-period-item-refresh {
    height: 45px;
    margin-bottom: 0px;
    margin-top: 0px;
    margin-right: 0px;
    padding: 2px;
}

.custom-grid-toolbar .report-period-item {
    margin-bottom: 0px;
    margin-top: 0px;
}

.report-period-area .report-refreh-label, .toolbar-grid-item .report-refreh-label,
.report-controls-area .report-refreh-label
{
    cursor: pointer;
}

.report-period-area .report-period-item-date-value label, .toolbar-grid-item .report-period-item-date-value label {
    cursor: pointer;
}

.report-item-control-area .report-period-item-date-time-value {
    display: flex;
}

.report-item-control-area .report-period-item-date-time-value .time-value {
    display: flex;
    height: 21px;
    margin-left: 5px;
    width: 70px;
    cursor: pointer;
}

.report-period-area .report-item-icon, .toolbar-grid-item .report-item-icon,
.report-controls-area .report-item-icon {
    /*background-color: #949499; */ /* Dark grey */
    width: 40px;
    height: 40px;
    /*border-radius: 20px;*/
    display: flex;
    align-self: center;
}

.report-period-area .report-item-icon-refresh, .toolbar-grid-item .report-item-icon-refresh,
.report-controls-area .report-item-icon-refresh {
    width: 50px;
}

.report-period-area .report-item-control-area, .toolbar-grid-item .report-item-control-area,
.report-controls-area .report-item-control-area {
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap;
}

.report-period-area .report-period-item-top-text, .toolbar-grid-item .report-period-item-top-text,
.report-controls-area .report-period-item-top-text {
    color: #949499; /* Dark grey - Text color for tabs and text */
    /* Does not look good in firefox and doesn't make a difference in chrome. */
    /* font-weight: bold; */
    font-size: 12px;
    cursor: pointer;
    margin-bottom: 2px;
}

.report-period-area .report-period-item-date-value, .toolbar-grid-item .report-period-item-date-value, 
.report-period-area report-period-item-date-time-value, .report-controls-area .report-period-item-date-value {
    color: #000;
    /* Does not look good in firefox and doesn't make a difference in chrome. */
    /* font-weight: bold; */
    font-size: 14px;
}

.report-controls-area .search-query-controls-row .report-period-item-date-value {
    height: 30px;
    display: flex;
    align-items: end;
}

.report-period-area .report-period-item-area, .toolbar-grid-item .report-period-item-area,
.report-controls-area .report-period-item-area {
    display: flex;
    flex-direction: row;
    height: 42px;
    margin: auto;
}

.report-period-area .e-input-group .e-input-group-icon, .toolbar-grid-item .e-input-group .e-input-group-icon,
.report-controls-area .e-input-group .e-input-group-icon {
    display: none !important; /* This removes the dropdown button on the right. */
}

.report-period-drop-down-list, .e-control input.report-period-drop-down-list {
    border: none !important;
    font-family: 'Neue Haas Grotesk Display Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    width: inherit;
}

.report-period-area .report-period-item-refresh,
.report-controls-area .report-period-item-refresh {
    background-color: #083b61; /* Dark blue: buttons */
    color: #fff;
    width: 150px;
    min-width: 150px;
}

.report-period-area .report-refreh-label,
.report-controls-area .report-refreh-label {
    padding-left: 10px;
    padding-right: 10px;
    font-weight: bold;
    font-size: 16px;
    align-self: center;
}
.mailouts-selection-control-area .report-refreh-label {
    padding-left: 0px;
    padding-right: 5px;
}

.report-period-area .report-item-icon img, .toolbar-grid-item .report-item-icon img {
    margin: auto;
}

.report-period-area .e-input-group.e-error, .report-period-area .e-input-group.e-control-wrapper.e-error, 
.report-period-area .e-input-group.e-error:not(.e-float-icon-left), 
.report-period-area .e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left),
.custom-grid-toolbar .e-input-group.e-error, .custom-grid-toolbar .e-input-group.e-control-wrapper.e-error, 
.custom-grid-toolbar .e-input-group.e-error:not(.e-float-icon-left), .custom-grid-toolbar .e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
    border: none !important;
}

.report-period-item-refresh-highlight {
    background-color: #578300 !important;
    border-color: #6c757d;
}

.report-period-area .report-period-item-refresh:hover,
.report-controls-area .report-period-item-refresh:hover{
    background-color: #778089 !important;
    border-color: #6c757d;
}

/* To specify height and font size: Leo - This will remove the input. This is not what we want. 
.report-period-area .e-input-group input.e-input, 
.report-period-area .e-input-group.e-control-wrapper input.e-input, 
.report-period-area .e-input-group.e-control-wrapper input.e-input,
{
    display: none;
}
*/

.report-period-area .report-period-item-date-label {
    padding-right: 5px;
}
/* START: To hide the dropdown borders in the report period control */
.report-period-area .report-period-item input.e-input, .report-period-area .report-period-item .e-input-group input.e-input, .report-period-area .report-period-item .e-input-group input,
.report-period-area .report-period-item .e-input-group.e-control-wrapper input.e-input, .report-period-area .report-period-item .e-input-group.e-control-wrapper input,
.custom-grid-toolbar .report-item-control-area input.e-input, .custom-grid-toolbar .report-item-control-area .e-input-group input.e-input, .custom-grid-toolbar .report-item-control-area .e-input-group input, 
.custom-grid-toolbar .report-item-control-area .e-input-group.e-control-wrapper input.e-input, .custom-grid-toolbar .report-item-control-area .e-input-group.e-control-wrapper input, {
    padding-left: 0px !important;
    /* font-weight: bold; Does not look good in firefox. */
    font-size: 14px;
    color: #000;
}

.report-period-area .report-period-item input.e-input, .report-period-area .report-period-item .e-input-group input, .report-period-area .report-period-item .e-input-group.e-control-wrapper input,
.report-controls-area .report-control-item input.e-input, .report-controls-area .report-control-item .e-input-group input, .report-controls-area .report-control-item .e-input-group.e-control-wrapper input,
.report-period-area .report-period-item .e-input-group input.e-input, .report-period-area .report-period-item .e-input-group.e-control-wrapper input.e-input,
.custom-grid-toolbar .report-item-control-area input.e-input, .custom-grid-toolbar .report-item-control-area .e-input-group input, .custom-grid-toolbar .report-item-control-area .e-input-group.e-control-wrapper input, 
.custom-grid-toolbar .report-item-control-area .e-input-group input.e-input, .custom-grid-toolbar .report-item-control-area .e-input-group.e-control-wrapper input.e-input {
    height: auto !important;
}

.report-period-area .report-period-item .e-input-group:not(.e-success):not(.e-warning):not(.e-error), .report-period-area .report-period-item .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error),
.custom-grid-toolbar .report-period-item-area .e-input-group:not(.e-success):not(.e-warning):not(.e-error), .search-controls .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error),
.custom-grid-toolbar .report-period-item-area .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error),
.report-period-area .report-period-item .e-input-group.e-success, .report-period-area .report-period-item .e-input-group.e-control-wrapper.e-success, .report-period-area .report-period-item .e-input-group.e-success:not(.e-float-icon-left), .report-period-area .report-period-item .e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left) {
    border-color: black !important;
    box-shadow: 0px 0px 0px 0px black !important;
    border: none !important;
}

.report-controls-area .report-control-item .e-input-group:not(.e-success):not(.e-warning):not(.e-error),
.search-controls .e-input-group:not(.e-success):not(.e-warning):not(.e-error),
.search-controls .e-input-group.e-success, .search-controls .e-input-group.e-control-wrapper.e-success, .search-controls .e-input-group.e-success:not(.e-float-icon-left), 
.search-controls .e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left)
.report-controls-area .report-control-item .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error),
.search-controls .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) {
    box-shadow: 0px 0px 0px 0px black !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #949499 !important;
}

.report-controls-area .report-control-item .e-input-copy-icon, .report-controls-area .report-control-item .e-input-search-icon {
    position: relative;
    top: -10px;
}

.report-period-area .e-date-wrapper span.e-input-group-icon.e-date-icon.e-icons.e-active,
.report-controls-area .e-date-wrapper span.e-input-group-icon.e-date-icon.e-icons.e-active,
.custom-grid-toolbar .report-item-control-area .e-date-wrapper span.e-input-group-icon.e-date-icon.e-icons.e-active {
    background: none;
    border-color: none;
    border: none;
    color: #fff;
}
/* END: To hide the dropdown borders in the report period control */
/* END: Report Period styles */
/* START: Dkim page */
.dkim-validation-warning li {
    word-wrap: break-word;
}
/* END: Dkim page */
/* START: Traffic Report Settings styles */
.report-period-area .report-setting-item {
    padding: 8px;
    margin-right: 5px;
    margin-bottom: 4px;
    margin-top: 4px;
    background-color: #FFFFFF;
    height: 62px;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.report-period-area .report-setting-item .col-chart-lines-label {
    padding-right:10px;
}

.report-period-area .report-setting-item-label {
    color: #949499;
    font-size: 12px;
    cursor: pointer;
    margin-bottom: 2px;
}
/* START: Report Area styles */
.report-area {
    display: flex;
    flex-wrap: wrap;
    min-height: 550px;
    padding-top: 10px;
}
.account-reports-area .report-item-control-area input.e-input {
    font-family: 'Neue Haas Grotesk Display Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

.report-area-item .report-area-item-data {
    padding-top: 15px;
}

.report-area .report-area-item {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    width: 320px;
    margin-right: 15px;
    margin-bottom: 15px;
    min-height: 535px;
}

.report-area .report-area-item-double {
    background-color: #fff;
    display: flex;
    flex-direction: row;
    width: 655px;
    margin-right: 15px;
    margin-bottom: 15px;
    min-height: 535px;
    flex-wrap: wrap;
}

.report-area .report-area-item-header-with-area-down {
    flex-direction: column;
}

.report-area .report-area-item-header-with-area-down .report-area-item-line-chart {
    padding-top:10px;
    width: 600px;
    height: 460px;
    align-self: center;
}

.report-area .no-data, .no-data-label {
    font-size: 16px;
    /* Does not look good in firefox and doesn't make a difference in chrome. */
    /* font-weight: bold; */
    text-align: center;
    margin-top: 100px;
    margin-left: 10px;
    margin-bottom: 30px;
}

.report-area .report-area-item .report-area-item-header {
    color: #949499; /* Dark grey - Text color for tabs and text */
    /* Does not look good in firefox and doesn't make a difference in chrome. */
    /* font-weight: bold; */
    font-size: 18px;
    text-align: center;
    padding: 8px;
}

.report-area .report-area-item .report-area-item-header .e-tooltip {
    display:inline-block;
    position: relative;
    top: -6px;
    left: 4px;
}

.report-area .report-area-item .report-area-item-header.left-align, .left-text-align {
    text-align: left;
}

.right-text-align {
    text-align: right;
}

.report-spinner-area {
    position: relative;
    height: 250px;
}
.grid-cell-spinner-area {
    position: relative;
    height: 30px;
    width: 30px;
    margin-right: 10px;
}

.report-spinner-area .e-spin-label {
    color: #424951 !important;
}

/* Color: light grey */
.report-spinner-area .e-spinner-pane .e-spinner-inner .e-spin-tailwind .e-path-circle {
    stroke: rgb(200, 200, 200);
}

/* Color: light grey */
.report-spinner-area .e-spinner-pane .e-spinner-inner .e-spin-tailwind .e-path-arc {
        
    stroke: rgb(148, 148, 153);
}

.report-area .report-area-item .report-area-item-chart {
    height: 240px;
    width: 240px;
    align-self: center;
}

.report-area-item .total-messages {
    color: #424951; /* Almost black */
    font-size: 14px;
    /* Does not look good in firefox and doesn't make a difference in chrome. */
    /* font-weight: bold; */
    padding-top: 5px;
    padding-bottom: 5px;
}

.report-area-item .data-item {
    display: flex;
    flex-direction: row;
    padding-bottom: 5px;
}

.report-area-item .legend {
    width: 23px;
    padding-top: 2px;
}

.report-area-item .legend .legend-block {
    width: 15px;
    height: 15px;
}

.report-area-item .legend-text-area {
}

.report-area-item .report-area-legend {
    padding-left: 60px;
}

.report-area-item .report-area-legend-double {
    display: flex;
    flex-direction: row;
}

.report-area-item .report-area-legend-left {
    padding-left: 40px;
    flex: auto;
}

.report-area-item .report-area-legend-right {
    padding-left: 0px;
    flex: auto;
}

.report-area-item .report-area-legend-bottom {
    display: flex;
    flex-direction: column;
    padding: 5px;
    flex: 1;
}

.report-area-item .report-area-legend-bottom .report-area-legend-bottom-align {
    /*display: flex;*/
    text-align: right;
    margin-top: auto;
    color: grey;
    font-size: 90%;
    align-self: end;
    margin-right: 5px;
}

.newline-to-right {
    text-align: right;
    float: right;
}

.report-area-item .report-area-legend-bottom .report-area-legend-bottom-align i {
    display: flex;
}
.report-area-item .report-area-legend-bottom .report-area-legend-bottom-align i .e-tooltip {
    position: relative;
    top: -5px;
    left: 4px;
}

.report-area-item .report-area-item-data-area {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.report-area-item .legend-text-area .legend-text {
    color: #000;
    font-size: 14px;
    font-family: 'Neue Haas Grotesk Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

.report-area-item .legend-text-area .legend-text-with-tooltip .e-tooltip,
.report-area-legend .total-messages.legend-text-with-tooltip .e-tooltip {
    color: #000;
    font-size: 14px;
    font-family: 'Neue Haas Grotesk Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    display: inline-block;
    top: -5px;
    position: relative;
}

.report-area-item .legend-text-area .legend-text-bolder {
    color: #424951; /* Almost black */
    font-size: 14px;
    font-family: 'Neue Haas Grotesk Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: bold;
}

.report-area-item .legend-text-area .legend-text-avg {
    color: #949499; /* Dark grey - Text color for tabs and text */
    font-size: 12px;
    padding-bottom: 1px;
}

/* These styles are here so that the tooltip can be visible on the same line. */
.report-area-item .legend-text-area .legend-text-avg .e-tooltip, 
.report-area-item .legend-text-area .legend-text-clickable .e-tooltip,
.report-area-legend .total-messages.legend-text-with-tooltip .e-tooltip {
    display: inline-block;
}

.report-area-item .report-data-item-more-button {
    background-color: #083b61; /* Dark blue: buttons */
    color: #fff;
    border-radius: 0;
    margin-top: 10px;
}
.content-block-more-button {
    background-color: #083b61; /* Dark blue: buttons */
    color: #fff;
    border-radius: 0;
}
.mailouts-selection-control-area {
    padding: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    display: inline-flex;
    background-color: #fff;
}
/* FIREFOX FIX: This class is there because Firefox puts text past the textbox and doesn't cut the text of as when chrome does. */
.select-mailout-area .e-multi-select-wrapper .e-delim-values {
    width: auto !important;
    min-width: 0px !important;
    overflow: auto !important;
}
.mailouts-selection-control-area .select-mailout-area {
    display: flex;
    margin-right: 15px;
}
.mailouts-selection-control-area .select-mailout-area .row {
    align-items: center;
}
.mailouts-selection-control-area .mailouts-selected-accounts {
    color: #424951; /* Almost black */
    width: 140px;
    display: flex;
    padding-right: 0px !important;
}
.mailouts-selection-control-area .e-float-input {
    margin-top: 0px !important;
}
.right-aligned-toolbar .e-toolbar-items {
    justify-content: flex-end;
    display: flex !important;
}
/* START: Report Link Area styles */
.report-area-item .report-link-area {
    background-color: #f4f4f4;
    padding: 5px 10px 5px 10px;
    margin: 5px;
    width: 350px;
    position: relative;
    color: #424951; /* #424951 = Almost black */
}

.report-link-area .action-buttons-hover {
    display: none;
    z-index: 10;
    position: absolute;
    right: 0;
    top: 0;
    margin-top: 5px;
    font-size: 10px;
}

.report-link-area .hover-area {
    cursor: pointer;
    text-decoration: none;
    position: relative;
    z-index: 10;
}

.report-link-area .hover-area:hover + .action-buttons-hover {
    display: block;
}

.action-buttons-area:hover + .action-buttons-hover {
    display: block;
}

.action-buttons-hover:hover {
    display: block;
}

.report-link-area .action-buttons-hover .action-buttons-area {
    display: flex;
    flex-direction: row;
    z-index: 20;
}

.report-link-area .action-buttons-hover .action-buttons-area .view-data {
    padding: 5px;
    margin: 5px;
    color: #fff;
    background-color: #083b61;
    z-index: 20;
    cursor: pointer;
}

.report-link-area .action-buttons-hover .action-buttons-area .export-data {
    padding: 5px;
    margin: 5px;
    color: #fff;
    background-color: #949499;
    z-index: 20;
    cursor: pointer;
}

.report-area-item-double-left {
    width: 280px;
    display: flex;
    flex-direction: column;
}

.report-area-item .report-link-data {
    display: flex;
    flex-direction: row;
}

.report-area-item .link-item-avarage {
    color: #949499; /* Dark grey - Text color for tabs and text */
    font-size: 12px;
    margin-left:4px;
}

.report-area-item .report-link-description {
    color: #424951; /* Almost black */
    font-size: 14px;
}

.report-area-item .report-link-description .e-tooltip {
    display: inline-block;
}

.report-area-item .report-link-description span {
    cursor: pointer;
    overflow-wrap: break-word;
    display: inline-block;
    max-width: 330px;
    font-size:12px;
}

.report-area-item-double-right .report-link-data .legend {
    display: flex;
    flex-direction: row;
    width: 120px;
    align-items: center;
}
.report-area-item-double-right .report-link-header-area .report-link-data .legend {
    width: 145px;
}
.report-area-item-double-right .report-link-description-title {
    color: #424951; /* Almost black */
    /* Does not look good in firefox and doesn't make a difference in chrome. */
    /* font-weight: bold; */
    font-size: 12px;
    padding-right: 15px;
    align-self: baseline;
    padding-bottom: 7px;
}
.report-link-description-title .legent-top-links, .report-link-data .legend .legend-color-block {
    align-self: baseline;
}
.e-dialog.report-dialog, .e-dlg-content, .report-dialog {
    font-size: 14px !important;
}
/*
.report-area-item-double-right .report-link-data .legend:first-of-type {
    margin-right:50px;
}
    */
.report-area-item-double-right .report-link-data .legend .link-item-number {
    padding-left: 5px;
    display: flex;
    flex-direction: row;
}
.report-link-data .legend .total-unique-clicks {
    color: #00ADF0;
}
.report-link-data .legend .total-clicks {
    color: #578300;
}
.report-link-header-area .report-link-header {
    display: flex;
    flex-direction: column;
}
.report-link-header-area .legend .link-item-label {
    color: #424951; /* Almost black */
    padding-left: 5px;
    padding-right: 5px;
    font-size: 12px;
}
.report-area-item .report-link-area .legend {
    padding-top: 0px;
}
.e-input-group.e-control-wrapper {
    border-radius: 0px !important;
}
/* START: Content Blocks Area styles */
.report-area-item .report-area-data-grid {
    padding: 10px;
    height: 495px;
    overflow-y: auto;
}

.report-area-data-grid .content-group-area .link-area {
    display: flex;
}

.report-area-data-grid .content-group-area .link, .legend-text-area .legend-text-clickable, .report-area-legend .legend-text-clickable {
    cursor: pointer;
}

.report-area-data-grid .content-group-area .template-info, .margin-left-auto {
    margin-left: auto !important;
}

.report-area-data-grid .content-group-area .link-information {
    margin-left: 10px;
}

.report-area .report-area-item.report-area-item-content-block {
    background-color: #fff;
    width: 655px;
    margin-right: 15px;
    margin-bottom: 15px;
    min-height: 535px;
    flex-wrap: wrap;
}

.content-block-more-button {
    float:right;
}

.content-group-area {
    font-family: 'Neue Haas Grotesk Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    background-color: #F9F9F9;
    padding: 10px;
}

.content-group-table {
    font-size: 10px;
    width: 100%;
}

.content-group-area.alternative-row {
    background-color: #EBF4FC;
}

.content-group-table thead th, .report-dialog-table thead th {
    text-align: center;
}

.content-group-table .content-group-cell-header {
    text-decoration: underline;
    text-align: left;
}

.content-group-table .content-group-row td {
    text-align: center;
}

.content-group-table .content-block-row-header {
}

.content-group-table .content-block-row td, .report-dialog-table .content-block-row td {
    text-align: center;
}

.content-group-table .content-block-row .content-group-cell-name, .content-group-table .content-group-row .content-group-cell-name, .report-dialog-table .content-group-cell-name, .report-dialog-table td.content-group-cell-name {
    text-align: left;
    width: 150px;
    word-wrap: break-word;
    display: block;
    cursor: pointer;
}

.content-group-table .content-group-row .content-group-cell-name div, .report-dialog-table .content-group-cell-name div {
    word-wrap: break-word;
    cursor: pointer;
}

.content-group-table .content-group-cell-name, .report-dialog-table .content-group-cell-name {
    font-family: 'Neue Haas Grotesk Display Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    color: #A9A9AD;
    font-size:12px;
}

.report-dialog-table.template-dialog-content-block-title {
    padding-bottom: 5px;
}

.content-group-table thead th.left-text-align, .report-dialog-table thead th.left-text-align {
    text-align: left;
}

.report-dialog-table {
    width: 100%;
}
.content-group-validation-cell {
    display: flex;
    justify-content: center;
}
.content-group-validation-cell .e-icons {
    display: flex;
    align-items: center;
    font-weight: bolder !important;
    font-size: 20px;
}
.content-group-validation-cell .e-control .e-warning {
    color: #F57E20 !important; /* Color: orange */
}
.content-group-validation-cell .e-control .e-circle-remove {
    color: #ED1D24 !important; /* Coror: Red = #ED1D24 */
}

.content-group-validation-cell .e-circle-check {
    color: #578300 !important; /* Coror: Green = #ED1D24 */
}
.header-environment-info {
    font-size: 16px;
    display: flex;
    width:400px;
}
.header-environment-info span {
    padding-left:7px;
}
.header-environment-info .content-group-production-test-switch {
    display: flex;
    justify-content: center;
    width: 30px;
    top: -7px;
    position: relative;
    cursor:pointer;
}
.header-environment-info .content-group-production-test-switch .e-icons {
    font-size:16px;
}
.green-approve-button {
    background-color: #578300 !important; /* Dark green: #00A651 */
    border-color: #578300 !important;
}
.dark-green-approve-button {
    background-color: #006B33 !important; /* Darker green: #00A651 */
    border-color: #006B33 !important;
}
.dark-green-approve-button.with-left-border {
    border-left-color: #005E2D !important;
}
.red-button {
    background-color: #EE1D23 !important; /* RED. */
    border-color: #578300 !important;
}
.header-environment-info .header-info-value {
    display: flex;
    width:250px;
}
/* END: Content Blocks Area styles */
/* END: Report Link Area styles */
/* START: Report pages styles */
.report-description {
    font-size: 14px;
}

.information-panel {
    padding: 0;
    margin: 0;
    width: 100%;
}
.panel-bottom-padding {
    padding-bottom:20px;
}

.right-flex-align {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: end;
}

.information-panel .input-area {
    margin-bottom: 10px;
}
.tooltip-question-mark-area {
    padding-left: 2px;
    padding-right: 2px;
    top: -6px;
    position: relative;
}
.custom-label-value-area {
    min-height:35px;
}
.custom-label-value-area .value, .custom-label-value-area .label {
    font-size: 14px;
    padding-top: 2px;
}
.custom-label-value-area .label {
    align-items: normal;
}
.custom-label-value-area .value {
    font-family: 'Neue Haas Grotesk Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
.custom-label-value-area .value .additional-text, .summary-label-value-area .value .additional-text {
    color: #949499; /* Old grey color: A9A9AD*/
    font-size: 12px;
    padding-left: 5px;
}
.additional-label-text {
    color: #949499; /* Old grey color: A9A9AD*/
    font-size: 12px;
    padding-left: 5px;
    word-wrap: anywhere;
}

.history-item-cell {
    word-break: break-all;
    white-space: normal;
}

.report-area-with-summary-and-pager .custom-pager-area {
    border-width: 0px;
}

.report-area-with-summary-and-pager .e-grid {
    border-width: 0px;
    border-radius: 0;
}

.report-area-with-summary-and-pager .e-grid .e-gridheader {
    border-width: 0px;
}

.summary-label-value-area {
    flex-wrap: nowrap;
}

.summary-label-value-area .label, .summary-label-value-area .label .e-tooltip {
    font-size: 14px;
    text-transform: uppercase;
    text-align: right;
    align-self: baseline;
    position: relative;
}

.summary-label-value-area .label .e-tooltip {
    cursor:pointer;
}

.summary-label-value-area .value {
    font-size: 14px;
    margin-left: 0px;
    padding-left: 0px;
    white-space: nowrap;
    position: relative;
    flex: 1;

    /* Needed to do this for the peppol documents. */
    word-wrap: anywhere;
    white-space: break-spaces;
}

.mailout-page .summary-label-value-area .value {
    word-break: break-all;
    white-space: normal;
}

.break-words, .break-words label {
    word-break: break-all;
    white-space: normal;
}

.summary-label-value-area .label img {
    margin-left: 4px;
    top: 4px;
    align-self: baseline;
    position: relative;
}

.report-information-dialog {
    font-size: 14px !important;
}

.dialog-generate-report-button {
    background-color: #9BCC38 !important; /* Green button */
    border-color: #9BCC38 !important; /* Green button */
}

.report-information-dialog .title {
    padding-bottom: 6px;
}

.report-information-dialog td {
    padding-bottom: 3px;
    vertical-align: top;
}

.report-information-dialog .label {
    text-align: right;
    font-weight: bold;
    width: 180px;
}

.dialog-table-cell-label {
    vertical-align: top;
    font-size: 12px;
}
.dialog-table-cell-value {
    padding-left: 7px;
    font-weight: lighter;
    font-size: 12px;
}

.report-information-dialog .dialog-table-value {
    padding-left: 5px;
}

.padding-8-right {
    padding-right: 10px;
}

.padding-8-left {
    padding-left: 10px;
}
/* END: Report pages styles */
/* END: Report Area styles */

/* START: ALL ACCOUNTS TAB */
.account-item, .account-item-header {
    cursor: pointer;
    border: 1px solid lightgrey;
    margin: 3px;
    padding-left: 7px;
    text-transform: uppercase;
    color: darkgray;
    background-color: #fff;
    display: flex;
    align-items: stretch;
    min-height:30px;
}

.account-item, .account-item account-row .account-item-companyname {
    color: #424951; /* Almost black */
}

.account-row .recent-mailouts-button {
    width: 25px;
    align-self: center;
}

.account-item-header {
    color: #424951; /* Almost black */
    background-color: #F0F1F1;
    height: 30px;
    font-size: 12px;
}

.flex-grow {
    flex: 1;
}

.options-arrow-right::before {
    content: "\e87e";
    font-weight: 800;
    font-size: 26px;
    font-family: "e-icons";
    color: #00AEEF; /* Color: light blue. Options button. */
}

.account-item .options-column, .account-item-header .options-column {
    flex: 0 0 80px;
    line-height: 0.8;
}

.lockfile-column-production .e-tooltip, .lockfile-column-test .e-tooltip {
    display: flex;
}

.account-row .lockfile-column-production .lock-file-area {
    background-color: #EE1D23; /* RED. */
    display: inline-block;
    padding: 5px;
    padding-left: 8px;
    padding-right: 8px;
}

.account-row .lockfile-column-test .lock-file-area {
    background-color: #949499; /* Dark grey. */
    display: inline-block;
    padding: 5px;
    padding-left: 8px;
    padding-right: 8px;
}

.account-item-header .account-item-status {
    flex: 0 0 130px;
}
.account-item .account-item-status {
    color: #fff;
    height: 35px;
    align-items: center;
    flex: 0 0 130px;
    font-size: 10px;
    text-align: center;
}

.account-item .account-item-errors, .account-item-header .account-item-errors {
    flex: 0 0 60px !important;
}

.account-item-cell, .account-item-cell-center {
    align-self: center;
    display: flex;
}

.account-item-cell-center .auto-margin {
    text-align: center;
}

.account-item-companyname {
    min-width: 150px;
}

.green-signal-dot, .red-signal-dot, .orange-signal-dot {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    border: 1px solid #000;
}

.green-signal-dot {
    background-color: #00A54F;
}

.red-signal-dot {
    background-color: #EE1D23;
}

.orange-signal-dot {
    background-color: #F57E20;
}

.current-issues-account-row {
    position: relative;
    color: #fff;
}

.current-issues-account-row .number-of-issues {
    top: 5px;
    right: -10px;
    color: #EE1D23;
    position: absolute;
}

.account-tab-error .current-issues-account-row .number-of-issues {
    top: none;
    color: #fff;
    right: -14px;
}
/* END: ALL ACCOUNTS TAB */
/* START: ACTIVE ACCOUNTS */
.active-account-details-area {
    margin-bottom: 10px;
}

.active-account-header-row div, .active-account-mailout-area .cell-div {
    display: flex;
    align-self: center;
}

.active-account-header-row div {
    height: 100%;
    align-items: center;
    font-size:12px;
}

.active-account-header-row {
    text-transform: uppercase;
    display: flex;
    align-items: stretch;
    height: 40px;
}

.active-account-header-row .account-tab {
    padding-left: 7px;
    padding-right: 7px;
    color: #fff;
    cursor: pointer;
}

.active-mailout-type-tooltip {
    display: flex;
    flex-direction: column;
    padding-top: 4px;
}

.active-mailout-type-tooltip img {
    margin: auto;
}

.active-mailout-type-tooltip .active-mailout-type-caption {
    margin: auto;
}

.active-mailout-type .e-tooltip {
    margin: auto;
}

.active-account-mailout-area .mailout-progress-bar-area {
    padding-right: 7px;
}

.active-account-header-row .account-tab-companyname {
    background-color: #083B61; /* Color: dark blue. */
}

.active-account-header-row .account-tab-status {
    background-color: #00A54F; /* Color: green */
}

.active-account-header-row .account-tab-error {
    background-color: #EE1D23; /* Color: red */
    padding-right: 20px; /* Need extra spacing for the number of errors which is absolute. */
}
.active-account-header-row .account-tab-active-number {
    background-color: #fff; /* Color: red */
    padding-right: 20px; /* Need extra spacing for the number of errors which is absolute. */
}
.active-account-header-row .account-tab-type {
    background-color: #F57E20; /* Color: orange */
}
.account-tab-active-number .account-tab-companyname-value {
    font-size:14px;
}
.account-tab-active-number .account-tab-companyname-label, .account-tab-active-number .account-tab-companyname-value {
    color: #949499;
}
.active-account-mailouts-area {
    border-left: 1px solid lightgrey;
    border-right: 1px solid lightgrey;
}

.active-account-mailout-area {
    cursor: pointer;
    border-bottom: 1px solid lightgrey;
    border-top: 1px solid lightgrey;
    margin-bottom: 5px;
    padding-left: 7px;
    color: #767676;
    background-color: #fff;
    display: flex;
    align-items: stretch;
    height: 45px;
}


.active-mailout-type-caption {
    font-size: 8px;
    text-transform: uppercase;
    color: #fff;
}

.active-account-mailout-area:last-of-type {
    margin-bottom: 0px;
}
.no-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.flex-grow.mailout-item-name .e-tooltip {
    display: grid !important;
}

.active-account-mailouts-area .mailout-item-name {
    min-width: 150px;
    color: #424951; /* Almost black */
    cursor: pointer;
}
.active-mailout-other-area .col {
    display:flex;
}
.active-mailout-other-area .col .e-tooltip {
    top: -4px;
    position: relative;
    margin-left: 2px;
}
.active-account-details-area .account-tab .account-tab-companyname-label {
    /* font-weight: bold; Does not look good in firefox. */
    padding-right: 3px;
}

.active-account-details-area .default-cursor, .default-cursor {
    cursor: default;
}

.active-account-details-area .account-tab .account-tab-companyname-value {
    font-weight: normal;
    white-space: nowrap;
}
/* END: ACTIVE ACCOUNTS */
/* START: Static Services */
.maincontent.services-maincontent-with-actions-button {
    padding-top:5px !important;
}
.service-content-area {
    width: 220px;
    border: 1px solid lightgrey;
    background-color: #fff;
    margin: 7px;
    display: inline-block;
    font-size: 14px;
}

.service-title-area {
    text-transform: uppercase;
    color: darkgray;
    padding: 5px;
}

.service-status-area {
    padding: 5px;
}


/* END: Static Servives */
/* START: Login Page */
.login-header {
    background-color: #083B61; /* Dark blue */
    color: #fff;
    padding-top: 10px;
    padding-bottom: 5px;
}

.login-input-area {
    padding: 10px;
}

.login-input .e-label-top {
    text-transform: uppercase;
}

.login-input {
    border: none !important;
}

.login-input .e-textbox {
    background-color: #E6E7E8 !important;
}

.remember-me-input {
    height: 30px;
    margin-left: 8px;
    display: flex;
    align-items: center;
}

.remember-me-input label {
    text-transform: uppercase;
    margin-bottom: unset !important;
}

.remember-me-input .e-switch-inner {
    font-weight: bold;
}

.login-button {
    text-transform: uppercase !important;
    vertical-align: bottom;
    /*position: absolute;
    bottom: 5px;*/
    margin-left: 8px;
    display: flex;
    align-items: center;
    height: 45px;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.login-button .oi-account-login {
    top: unset !important;
    margin-right: 5px;
}

.login-button span::before {
    font-size: 24px !important;
}

.login-button-area {
    vertical-align: bottom;
    position: relative;
    min-height: 50px;
}

.login-input-area .e-link {
    text-transform: uppercase;
}

.login-input-area .image-arrow {
    padding-left: 5px;
}

.login-input-area .info-link-area {
    padding-top: 10px;
}
.login-text-area {
    font-size: 16px !important;
    color: #424951 !important;
    margin-left:8px;
}
.login-text-area label {
    padding-bottom:10px;
}
.table-information-info tr {
    border-bottom: 1px solid lightgrey;
}
.two-factor-option {
    background-color: #E6E7E8 !important;
    color: #424951 !important; /* Almost black */
}
.two-factor-option:hover, back-button:hover {
    color: #083b61 !important; /* Almost black */
    border: 1px solid #1861ac !important;
}
.two-factor-option-phone {
    border-left: 1px solid #1861ac !important;
}
.login-input-area .e-btn-group .e-link {
    color: #fff !important;
}
.login-input-area .e-btn-group .back-button {
    align-items: center;
    display: flex;
}
.login-input-area .e-btn-group .back-button:hover {
    text-decoration:none !important;
}
.access-code-area .e-textbox {
    height: 60px !important;
    font-size: 30px !important;
}
.access-code-area .access-code-input-row .row {
    align-items: center;
}
.e-spinner-pane.e-customClass .e-spinner-inner .e-spin-material {
    stroke: #fff;
}

/* SPINNER: Sets the color of the text */
.e-spinner-pane .e-spinner-inner .e-spin-label {
    color: #fff;
}

/* SPINNER: Sets the color of the circle */
.e-spinner-pane .e-spinner-inner .e-spin-tailwind .e-path-circle {
    stroke: #fff;
}

/* SPINNER: Sets the color of the circle that follows */
.e-spinner-pane .e-spinner-inner .e-spin-tailwind .e-path-arc {
    stroke: #00adf0;
}
/* For the login screen increase the text boxes slightly. */
.authenticate-page .e-input:not(:valid), .authenticate-page .e-input:valid, .authenticate-page .e-float-input.e-control-wrapper input:not(:valid),
.authenticate-page .e-float-input.e-control-wrapper input:valid, .authenticate-page .e-float-input input:not(:valid),
.authenticate-page .e-float-input input:valid, .authenticate-page .e-input-group input:not(:valid),
.authenticate-page .e-input-group input:valid, .authenticate-page .e-input-group.e-control-wrapper input:not(:valid), .authenticate-page .e-input-group.e-control-wrapper input:valid,
.authenticate-page .e-float-input.e-control-wrapper textarea:not(:valid), .authenticate-page .e-float-input.e-control-wrapper textarea:valid, .authenticate-page .e-float-input textarea:not(:valid),
.authenticate-page .e-float-input textarea:valid, .authenticate-page .e-input-group.e-control-wrapper textarea:not(:valid), .authenticate-page .e-input-group.e-control-wrapper textarea:valid,
.authenticate-page .e-input-group textarea:not(:valid), .authenticate-page .e-input-group textarea:valid {
    font-size: 18px;
    height: 40px;
}

.e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text,
.e-float-input.e-control-wrapper:not(.e-error) textarea ~ label.e-label-top.e-float-text {
    top: 10px;
    left: 8px;
    font-size: 16px;
    font-weight: 400;
}

/* Specify the floating label styles. Works a little different on login page. */
.authenticate-page .e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
.authenticate-page .e-float-input.e-control-wrapper:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
.authenticate-page .e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
.authenticate-page .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text,
.authenticate-page .e-float-input.e-control-wrapper.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text {
    color: #343a40 !important;
    font-weight: 500 !important;
    font-size: 18px !important;
    top: 2px !important;
}

.authenticate-page .e-input-focus input, .authenticate-page .e-input-focus {
    border: none !important;
    box-shadow: none !important;
}
.auth-content-area {
    width: 600px;
    margin: auto;
}
/* END: Login Page */
/* START: Hourly Throttle Slider */
.hour-slider {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 270px;
    width: 50px;
    margin-top:15px;
}

.hour-label {
    font-size: 12px;
    margin-bottom: 5px;
}

.hour-value {
    font-size: 12px;
    margin-top: 5px;
}
.e-control-wrapper.e-slider-container.e-vertical {
    padding: 8px 0 !important;
}
/* END: Hourly Throttle Slider */
/* START: Overtime reports 
.overtime-reports-page .report-period-item-refresh {
    display: none !important;
}*/
.report-total-summary {
    font-size: 90%;
    padding-top: 7px;
    padding-bottom: 5px;
}
.overtime-reports-page .grid-cell-spinner-area {
    display: inline-block;
    top: 7px;
}

.overtime-reports-page .e-spinner-pane .e-spinner-inner .e-spin-fluent .e-path-circle {
    stroke: #e5e5e5 !important;
}
.overtime-reports-page .e-spinner-pane .e-spinner-inner .e-spin-fluent .e-path-arc {
    stroke: #3a3a3a !important;
}
/* END: Overtime Reports */
/* START: Balloon styles */
/* END: Balloon styles */
/* START: COMMUNICATION ALARM */
.communication-lost-alarm {
    font-size: 18px;
    position: absolute;
    z-index: 10;
    width: 100%;
    display: flex;
    /* transition: top 2s ease 0s;  only transition top property */
    top: -80px; /* start transitioning from position '-80' instead of 'auto' */
    background: rgba(0, 0, 0, 0.5);
}

.communication-lost-alarm-animate {
    transform: translateY(80px);
    -webkit-transform: translateY(80px); /** Chrome & Safari **/
    -o-transform: translateY(80px); /** Opera **/
    -moz-transform: translateY(80px); /** Firefox **/
    /*transition-property: top;
    transition-duration: 3s;*/
    /* This part will help with the animation: */
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/
}

.communication-lost-message, .user-unauthorized-message {
    background-color: #F57E20;
    color: #fff;
    height: 80px;
    width: 400px;
    align-items: center;
    display: flex;
    margin: auto;
    text-align: center;
    border-left: 3px ridge #fff;
    border-bottom: 3px ridge #fff;
    border-right: 3px ridge #fff;
    justify-content: center;
    cursor: pointer;
}

.user-unauthorized-message {
    background-color: #00A54F;
    cursor: default;
    flex-direction: column;
}

.click-here-to-login-again {
    cursor: pointer;
    color: #EE1D23;
    font-size: 22px;
    margin-left: 2px;
    margin-right: 2px;
    text-decoration: underline;
}
.login-again-bottom-area{
    margin-top:10px;
}
.click-here-login-page {
    cursor: pointer;
    color: #EE1D23;
    font-size: 18px;
    margin-left: 2px;
    margin-right: 2px;
    text-decoration: underline;
}
/* END: COMMUNICATION ALARM */
/* START: Dropdown menu */
.options-column .options-dropdown-button {
    background-color: #fff;
    border: none;
    cursor: pointer;
}

.extra-page-button-areas .options-dropdown-button {
    background-color: #578300; /* Dark green - for buttons. */
    border: none;
    cursor: pointer;
    color: #fff;
    height: 50px;
    padding-left: 15px;
    padding-right: 15px;
}

.options-dropdown, .dynamic-options-dropdown {
    position: relative;
    justify-content: center;
    display: flex;
}

.options-dropdown-content {
    opacity: 0.0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 0.5s; /* Transition properties */
    transition-delay: 0.5s; /* Delay the start of the transition */
    position: absolute;
    background-color: #fff;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    right: 55px;
    z-index: 14;
    top: -2px;
}

.extra-page-button-areas .options-dropdown-content {
    right: 10px;
    top: 40px;
}

.account-item-cell .options-dropdown-content {
    right: 30px;
}

.options-dropdown-content a, .account-options-dropdown-content a {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    color: #333 !important;
    cursor: pointer;
    white-space: nowrap;
    font-size: 14px;
}

.extra-page-button-areas a .e-tooltip, .account-actions.options-dropdown a .e-tooltip
.extra-page-button-areas a .e-control, .account-actions.options-dropdown a .e-control {
    font-size: 14px;
}

.options-dropdown-content-button-disable {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.options-dropdown-content a:hover, .account-options-dropdown-content a:hover {
    background-color: #00AEEF;
    color: #fff !important;
}

.options-dropdown:hover .options-dropdown-content,
.options-dropdown:hover .account-options-dropdown-content,
.quick-access:hover .quick-access-content {
    /* No transition or delay needed here */
    display: block;
    opacity: 1.0;
    visibility: visible;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition-delay: 0s; /* this ensures the menu appears immediately */
}
.account-options-dropdown-content {
    opacity: 0.0;
    visibility: hidden;
    transition: none; /* No transition on initial state */    
    position: absolute;
    z-index: 14;
    right: 10px;
}
/* Quick Access CSS */
.visibility-hidden {
    visibility: hidden;
}
.pageheader h4 {
    min-height: 1.5em; /* Adjust this value based on your content's expected height */
    transition: min-height 0.3s ease-in-out;
}
.quick-access-content {
    opacity: 0.0;
    visibility: hidden;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    transition: opacity 0.5s, visibility 0.5s; /* Transition properties */
    transition-delay: 0.5s; /* Delay the start of the transition */
    z-index: 15;
    top: 0;
    left: 0;
    transform: translateX(-100%); /* Moves the submenu to the left */
    white-space: nowrap; /* Prevents wrapping of menu items */
}
.quick-access {
    position: relative;
    display: inline-block; /* Ensures proper alignment and positioning */
    width: 100%;
}
.quick-access:hover .quick-access-content {
    display: block;
    opacity: 1.0;
    visibility: visible;
    transition-delay: 0s; /* No delay for showing the dropdown */
}
.main-account-menu {
    width: 185px;
    float: right;
    background-color: #f9f9f9;
}
/* END: Dropdown menu */
/* START: Trigger Page */
.frequency-number-area {
    display:inline-block;
}
/* Hide the default checkbox */
input[type="checkbox"].custom-grid-checkbox {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    border: 1px solid #A9A9AD;
    border-radius: 3px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    outline: none;
    vertical-align: middle;
    position: relative;
}

/* Show a checkmark when checked */
input[type="checkbox"].custom-grid-checkbox:checked::after {
    content: '';
    display: block;
    width: 6px;
    height: 12px;
    border: solid #578300;
    border-width: 0 3px 3px 0;
    position: absolute;
    left: 4px;
    top: 0px;
    transform: rotate(45deg);
}

/* END: Trigger Page */
/* START: Custom Pager */
.pager-export-button, .pager-more-records-button, .pager-refresh-button, .pager-delete-record-button, .pager-refresh-green-button, .pager-validate-button, .add-subscription-green-button, .add-existing-subscription-green-button {
    background-color: #578300; /* Dark green - for buttons. */
    cursor: pointer;
    font-size: 12px;
    /* font-weight: bolder; Does NOT look good in firefox. */
    padding-left: 15px;
    padding-right: 15px;
    display: inline-block !important;
    height: 35px;
    vertical-align: middle;
    padding-top: 8px;
    color: #fff;
    float: right;
}
.pager-refresh-green-button, .add-subscription-green-button {
    background-color: #578300 !important;
    border-color: #4B7000 !important;
    box-shadow: none !important; /* No shadow */
}

.add-existing-subscription-green-button {
    background-color: #006B33 !important; /* Darker green: #00A651 */
    border-color: #006B33 !important;
    box-shadow: none !important; /* No shadow */
}
.pager-refresh-green-button:hover, .add-subscription-green-button:hover, .add-existing-subscription-green-button:hover {
    box-shadow: rgba(87, 131, 0, 0.5) 0px 0px 0px 4px !important; /* Light green shadow */
}
.subscription-grid-area .custom-pager-area .custom-pager-export-button {
    width: 280px !important;
}
.import-records-page .custom-pager-area .custom-pager-export-button {
    width: 370px !important;
}
.pager-refresh-button {
    background-color: #A9A9AD !important;
}
.pager-more-records-button {
    background-color: #083B61;
}
.pager-validate-button {
    background-color: #F57F21 !important;
    border-color: #F57F21 !important;
}
.pager-delete-record-button {
    background-color: #083B61;
}
.pager-delete-record-button .e-icons.e-trash:before {
    padding-right: 4px;
    position: relative;
    top: 2px;
    font-size: 14px;
}
.button-left-spacer {
    margin-left: 2px;
}
.pager-refresh-button .e-icons.e-refresh:before, .button-with-icon .e-icons.e-arrow-left:before {
    padding-right: 4px;
    position: relative;
    top: 2px;
    font-size: 14px;
}

.custom-pager-area {
    display: flex;
    background-color: #fff;
    background-color: #fff;
    border-color: #dee2e6;
    color: #495057;
    border-style: solid;
    border-width: 1px;
}

.custom-pager-area .e-pager {
    border-width: 0px !important;
}

.custom-pager-area .e-pager .e-link {
    color: #083B61 !important; /* Dark blue. */
}

.custom-pager-area .e-pager.sf-pager .e-numericcontainer a {
    font-size: 16px;
}

.custom-pager-area .custom-pager-export-button {
    display: flex;
    width: 100px;
    align-items: center;
    align-self: center;
    justify-content: flex-end;
    padding-right: 10px;
}

.mailouts-page-content .custom-pager-area .custom-pager-export-button {
    width: 180px;
}

.mailouts-page-content .top-pager-area .custom-pager-export-button {
    width: 210px;
}

.bottom-pager-area .custom-pager-export-button {
    width: 210px;
}

.mailouts-page-content .pager-more-records-button {
    font-size: 12px;
    background-color: #083B61;
}

.mailouts-page-content .pager-export-button {
    font-size: 12px;
    background-color: #578300;
}

.mailouts-page-content .top-pager-area .e-btn:disabled {
    border: none;
}

.custom-pager-area .e-pager div.e-parentmsgbar {
    display: none;
}

.custom-pager-area .custom-pager-text-area {
    width: 250px;
    align-self: center;
}

.custom-pager-area .e-control .e-pager .e-lib {
    border: none !important;
}

.mailouts-page-content .remove-tab-header-border .e-tab-header .e-toolbar-item.e-active .e-text-wrap::after,
.remove-tab-header-border .e-tab-header .e-toolbar-item.e-active .e-text-wrap::after {
    border: none !important;
}
.remove-tab-header .e-tab-header {
    display:none !important;
}
/* END: Custom Pager */
/* START: Export Report Control */
.export-options-dialog-area .div-flex-row .dialog-label {
    width: 230px;
    display: flex;
}

.export-options-dialog-area .div-flex-row .dialog-label .e-tooltip {
    display: inline-block;
    position: relative;
    top: -6px;
    left: 1px;
}
.export-options-dialog-area .div-flex-row .export-include-reports-header {
    border-bottom: 1px solid grey;
    width: 100%;
}
.export-options-dialog-area .e-dropdownbase {
    cursor: pointer;
}
/* END: Export Report Control */
/* START: Log Files */
.text-area-content {
    background-color: #fff;
    min-height: 300px;
    width: 100%;
    overflow: auto;
    white-space: nowrap;
    padding: 5px;
    font-family: monospace, Arial, Helvetica, sans-serif !important;
    font-size: 14px;    
}

.text-area-content #text-area-input
{
    white-space: pre;
    tab-size: 4;
}
.text-area-with-scrollbar textarea {
    white-space: pre;
    overflow-x: auto
}
.text-area-content.borders {
    border:1px solid grey;
}
.text-area-header {
    width: 100%;
    background-color: #fff;
    border: 1px solid lightgray;
    overflow-x: auto;
    display: flex;
}

.log-file-information .log-actions-controls .logs-found-in-label {
    width: 120px;
    align-self: center;
}
.log-file-information .log-actions-controls .logs-found-in-dropdown {
    width: 240px;
    align-self: center;
}

.log-file-information {
    width: 100%;
    border: 1px solid lightgray;
    background-color: #fff;
    /* height: 40px; Cannot do this because then the wrapping doesn't work.*/
    display: flex;
    padding-left: 10px;
    /*padding-right: 10px;*/
    background-color: #fff;
    font-size: 14px;
    font-family: monospace, Arial, Helvetica, sans-serif !important;
    color: grey;
    flex-wrap: wrap;
    justify-content: space-between;
}

.log-file-information .total-log-files-text {
    margin-left: 10px;
    text-align: right;
    flex: 1;
}

.log-file-information .time-period-controls {
    text-align: left;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
.log-file-information .time-period-controls .time-from-period {
    width: 260px;
}
.log-file-information .time-period-controls .time-from-period-label {
    width:60px;
    text-align: right;
    display: flex;
    align-self: center;
    padding-right: 5px !important;
}
.log-file-information .time-period-controls .time-to-period {
    width: 260px;
}
.log-file-information .time-period-controls .e-datetime-container {
    width: 210px;
    border-width: 0;
    height: 38px;
    display: flex;
    border-left: 1px solid #ced4da;
    border-right: 1px solid #ced4da;
}
.log-file-information .time-period-controls .e-datetime-container .e-datetimepicker {
    align-items: center;
    display: flex;
    justify-content: center;
    align-self: center;
}
.log-file-information .log-file-name {
    align-items: center;
    display: flex;
    flex: 1;
}
.log-file-information .log-files-opened {
    align-items: center;
    display: flex;    
    width: 100px;
    height: 40px;
}
.log-file-information .log-item-logs-found-in-box {
    background-color: #B1B1B5;
    color:#fff;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 7px;
    padding-right: 7px;
    justify-content: center;
    margin-left: 2px;
    width: 360px;
    cursor:pointer;
}
.log-file-information .log-item-button {
    background-color: #B1B1B5;
    color:#fff;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 7px;
    padding-right: 7px;
    justify-content: center;
    margin-left: 2px;
    width: 40px;
    cursor:pointer;
}
.log-file-information .log-item-button:hover {
    background-color: #959599;
}
.log-file-information .log-item-button .e-icons {
    color:#fff !important;
}

.log-file-information .log-actions-controls {
    display: flex;
}

.remove-content-block-selection-button {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 16px;
}


.text-area-header .text-area-page-numbers {
    display: flex;
    background-color: #fff;
    width: 100%;
    /*border: 1px solid grey;*/
}

.text-area-header .page-number {
    display: flex;
    height: 35px;
    padding: 5px;
    border-right: 1px solid lightgrey;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    cursor: pointer;
    color: grey;
}

.text-area-header .page-number:last-of-type {
    /* border-right: none;*/
}

.text-area-header .selected-page {
    color: #00AEEF;
    border: 2px solid #00AEEF;
    height: 33px; /* 33px instead of 35px because of the border.*/
    font-weight: bold;
}
/* The exact class or selector might differ based on the version of Syncfusion components and their rendered structure. */
.logs-found-in-dropdown .sf-multiselect-wrapper .e-chips-collection {
    height: 30px;  /* or any fixed height you prefer */
    overflow: hidden;  /* hides the overflow content */
    white-space: nowrap;  /* keeps content on a single line */
    text-overflow: ellipsis;  /* adds ... for overflowing content */
}
/* END: Log Files */
/* START: Mailout Filter */
.filter-mailout-area {
    display: flex;
    flex-direction: row;
    background-color: #F0F1F1;
    margin-bottom: 0px;
    border-top: 1px solid lightgrey;
    border-left: 1px solid lightgrey;
    border-right: 1px solid lightgrey;
    padding-top: 5px;
    padding-bottom: 5px;
}

.filter-mailout-row-first {
    display: flex;
    flex-direction: row;
    padding-top: 2px;
    padding-bottom: 4px;
    flex-wrap: wrap;
}

.filter-mailout-row-second {
    display: flex;
    flex-direction: row;
    padding-top: 4px;
    padding-bottom: 2px;
    flex-wrap: wrap;
}

.filter-mailout-area .filter-item-label {
    display: inline-block;
    font-size: 14px;
    padding-left: 10px;
    padding-right: 5px;
    align-self: center;
    width: 110px;
}

.filter-mailout-area .report-period-item-refresh, .mailouts-selection-control-area .report-period-item-export {
    background-color: #083b61; /* Dark blue: buttons */
    color: #fff;
    margin: 10px;
    align-self: center;
    padding-top: 3px;
    padding-bottom: 3px;
}
.mailouts-selection-control-area .report-period-item-export {
    background-color: #578300; /* Dark green - for buttons. */
    height: 45px;
    width: 100px;
    min-width: unset;
}
.mailouts-selection-control-area .report-period-item-export:hover {
    background-color: #B2E241 !important;
}
.mailouts-selection-control-area .report-export-label {
    display: flex;
    justify-content: center;
    align-self: center;
    font-weight: bold;
    font-size: 16px;
    cursor:pointer;
}
.mailouts-selection-control-area .report-period-item-refresh {
    width: 140px;
    min-width: 140px;
    display: flex;
    align-self: center;
}
.filter-mailout-area .report-refreh-label {
    padding-left: 10px;
    padding-right: 10px;
    font-weight: bold;
    font-size: 16px;
    align-self: center;
}
.mailouts-selection-control-area .report-period-item-area {
    justify-content: center;
}

.filter-mailout-area .e-control, .filter-mailout-area .e-control-container {
    border-radius: 0px !important;
}

.filter-mailout-area .report-period-item-area {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.filter-mailout-area .date-calendar-area label {
    width: 160px;
    height: 30px;
    background-color: #fff;
}

.filter-mailout-area .report-item-icon {
    /*background-color: #949499; */ /* Dark grey */
    width: 40px;
    height: 40px;
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
}

.filter-mailout-area .report-refreh-label {
    cursor: pointer;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: bold;
    font-size: 14px;
    align-self: center;
}

.filter-mailout-area .filter-mailout-options {
    display: flex;
    flex-direction: column;
}

.mailouts-page-content .top-pager-area {
    border-top: none;
    border-bottom: none;
}

.mailouts-page-content .bottom-pager-area {
    border-top: none;
}

.mailouts-page-content .filter-item, .search-for-mailout .filter-item {
    width: 280px;
    display: flex;
    padding-top: 2px;
    padding-bottom: 2px;
}


/* END: Mailout Filter  */
/* START: Issue Page */
.issue-row {
    padding-left: 0px;
    text-transform: none;
    color: #424951;
    margin-left: 0px;
    margin-right: 0px;
}

.issue-row-selected {
    border: 1px solid black;
    background-color: rgba(206, 206, 206, 0.7)
}

.no-select {
    user-select: none; /* Disable text selection */
}

.issue-row .message-type-area {
    text-transform: uppercase;
    min-width: 105px;
    color: #fff;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: row;
}

.issue-row .title-error-area {
    display: flex;
    flex-direction: column;
    padding-left: 7px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-right: 7px;
    flex: 1;
}
.filter-issue-information-area {
    background-color: #fff;
    height: 35px;
    display: flex;
    align-items: center;
    padding-left: 5px;
    padding-right: 5px;
}
.issue-row .account-item-companyname {
    display: flex;
    flex-direction: row;
}

.issue-row .issue-row-error-area {
    display:flex;
}

.issue-row .issue-row-created-date {
    flex: 0 0 100px;
    text-align: right;
}
.issue-row .issue-row-manage-col {
    flex: 0 0 60px;
    text-align: right;
}
.issue-row .issue-row-person-closed {
    text-align: right;
}
.issue-row .issue-row-person-closed .closed-by-label {
    padding-right:5px;
}

.filter-issue-row {
    display: flex;
    /*flex-wrap: wrap;*/
    background-color: #F0F1F1;
    align-items: center;
    height: 35px;
    margin-bottom: 0px;
}
.filter-issue-row.second {
    border-top: 1px solid darkgray;
}
.filter-issue-row .e-checkbox-wrapper {
    padding-left: 10px;
    padding-right: 10px;
    height: 35px;
    display: flex;
    align-items: center;
    border-right: 1px solid lightgrey;
    color: #000;
    background-color: #fff;
}
.filter-issue-row .e-multiselect .e-multi-select-wrapper {
    height:100%;
    background-color:#fff;
}
.filter-issue-row .e-multiselect .e-multi-select-wrapper .e-delim-values {
    top: 3px;
    position: relative;
}
.filter-issue-row .e-label {
    white-space: nowrap;
}

.multi-application-info {
    width: 250px;
    border: none !important;
    border-right: 1px solid lightgrey !important;
    border-radius: 0 !important;
    height: 35px;
}
.multi-application-info.date-picker {
    padding-top:2px;
}
.issue-header-area {
    display: flex;
    padding-top: 6px;
    padding-bottom: 6px;
    align-items: center;
}
.message-type-area {
    background-color: #fff;
    font-size: 14px;
    margin-right: 7px;
    padding: 3px;
    justify-content: center;
    display: flex;
}
.message-type-area .e-icons {
    font-weight:bolder;
}
.issue-panel .form-panel-area .input-area {
    margin-bottom: 10px;
    margin-top: 10px;
}
.issue-panel .input-area-label-value-not-bold .summary-label-value-area .value {
    font-family: 'Neue Haas Grotesk Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: normal;
}
.issue-panel .form-panel-area {
    height:auto;
}
.issue-exception-html-area {
    height: 300px;
    width: 100%;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid lightgrey;
    padding: 5px;
}
.issue-exception-html-area b {
    text-transform: uppercase;
    font-family: 'Neue Haas Grotesk Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: 12px;
    font-weight:normal;
}
.issue-exception-html-area td {
    font-family: 'Neue Haas Grotesk Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: normal;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    vertical-align: top;
    font-size: 12px;
}
.issue-panel .push-to-top {
    align-items: baseline;
}
.issue-panel .input-area-message .summary-label-value-area .label img {
    top: 2px;
    position: relative;
}
.issue-panel .input-area-message label, .issue-panel .input-area-message .col-6 {
    width: 150px;
}
.issue-panel .input-area-message .summary-label-value-area .value {
    flex:1 !important;
}
/* END: Issue Page */
/* START: Issue Exception Page */
.issue-exceptions-settings-account-selection .e-float-input, 
.issue-exceptions-settings-account-selection .e-float-input.e-control-wrapper {
    margin-top: 0px !important;
}
.issue-exceptions-settings-area .e-control label {
    font-size: 14px;
}
.issue-exceptions-settings-area .lb-email-information-access {
    text-align:right;
}
.issue-exceptions-settings-area .input-area-custom-controls .e-checkbox-wrapper {
    padding-right: 7px;
}
/* END: Issue Exception Page */
/* START: Retry Page */
.retry-dialog .label {
    font-family: 'Neue Haas Grotesk Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.retry-dialog .label .label-separator {
    display:none;
}
.retry-page .custom-pager-export-button {
    width:320px;
}
.retry-page .filter-application-info {
    width: 60px;
}
.retry-page .e-headertext {
    font-size: 12px;
    text-transform:uppercase;
}
.retry-stratergy-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.retry-stratergy-update-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.retry-stratergy-add-control {
    display: flex;
    align-self: end;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 40px;
}
.new-retry-details {
    display: flex;
    align-self: start;
    padding: 10px;
}
.new-retry-details .label {
    font-family: 'Neue Haas Grotesk Display Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: normal;
}
.new-retry-details .value {
    padding-left: 7px;
    font-family: 'Neue Haas Grotesk Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
.retry-stratergy-update-controls #form-message-label {
    display: flex;
    align-self: start;
    padding: 10px;
    margin-top:10px;
}
.retry-stratergy-update-controls .next-retry-time-label {
    width: 160px;
}
/* END: Retry Page */
/* START: Import Contact Records Page */
.import-header-column {
    display:flex;
    flex-wrap:nowrap;
}
.import-record-table .row {
    height: 35px;
}
.import-record-table .col:first-child {
    flex: 0 0 75px; /* don't grow or shrink, fixed width */
    width: 75px;
}
.import-record-table .col:not(:first-child) {
    flex: 1; /* the rest of the rows share remaining space evenly */
}
.import-record-table .e-float-input, .import-record-table .e-float-input.e-control-wrapper {
    margin-top: 0px !important;
}
.import-select-dropdown .e-dropdownlist {
    font-size: 14px !important;
    font-family: 'Neue Haas Grotesk Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    color: #374151 !important;
}
.import-record-table .search-controls.header-row {
    border-bottom: 1px solid lightgrey;
    font-size: 14px;
}
/* END: Import Contact Records Page */
/* START: Bounce Emails Page */
.report-period-area .bounce-email-search-item-label {
    width: 125px;
}
.report-period-area .bounce-email-search-item-label-small {
    width: 85px;
}
.report-item-account .e-tooltip {
    display: flex;
}
.report-item-account .e-tooltip .row {
    align-self: center;
}
.width-350px {
    width: 350px;
}
.recipient-grid .e-grid {
    border-style: none;
}
.recipient-grid .e-gridheader {
    border-top-width: 0px !important;
    border-style: none;
}
/* END: Bounce Emails Page */
/* START: Email Search Page */
.report-control-item .toolbar-grid-item-control-area .grid-item-account-label,
.report-control-item .report-control-item .grid-item-search-by-label,
.report-control-item .grid-item-subscripton-label,
.report-period-item .grid-item-account-label {
    width: 80px;
    color: #949499;
    margin-right: 0px;
    padding-right: 0px !important;
}
.report-controls-area .report-control-item .grid-item-search-by-value {
    width: 275px;
    padding-right: 0px;
    border-left: 1px solid #949499;
    align-self: end;
}
.report-controls-area .report-control-item .grid-item-search-value-350px {
    width: 100%;
    padding-right: 0px;
    align-self: end;
}
.report-controls-area .report-control-item .grid-item-search-value-area {
    align-self: end;
    width: 350px;
}
.report-controls-area .report-control-item .grid-item-search-by-value-area {
    padding-right: 0px;
    align-self: end;
    width: 450px;
}
.toolbar-account-search-control-area, .toolbar-mailout-search-control-area {
    display: flex;
    justify-content: center;
}
.toolbar-account-search-control-area .dropdown-area {
    width: 230px;
}
.toolbar-account-search-control-area .e-tooltip, .toolbar-mailout-search-control-area .e-tooltip {
    display: flex;
    align-self: center;
    justify-content: center;
}
.toolbar-account-search-control-area .dropdown-area .e-control-container {
    border-bottom: 1px solid #949499 !important;
}
.search-query-controls {
    width: 450px;
}
.search-query-controls-row {
    flex: 1;
    padding-left: 10px;
    padding-right: 10px;
}
.search-query-controls-row .report-period-item-date-value .e-tooltip {
    width:100%;
}
.search-query-controls-row .search-by-area {
    width: 160px;
}
.emaildefined-field-search-controls-row {
    display: flex;
    flex-direction: row;
}
.emaildefined-field-value-control {
    width: 200px;
    margin-left: 10px;
    bottom: -1px;
    position: relative;
}
.mailout-search {
    position: absolute;
    width: 25px;
    height: 25px;
    top:0px;
    right:0px;
}
/* END: Email Search Page */
/* START: Contact Page / Contact Controls */
.search-query-controls-row .search-by-contact-area {
    width: 210px;
}
.search-by-contact-area {
    width: 220px;
}
.modal-dialog-scrollable .e-gridcontent .e-content {
    height: 400px;
    overflow: auto;
}
.modal-dialog-scrollable {
    height: 450px;
    cursor:default;
}
.modal-dialog-scrollable:has(.no-data) {
    height: 350px;
}
.modal-dialog-scrollable .e-pagerconstant {
    display:none !important;
}
.modal-flexible-dialog .e-tab .e-content {
    min-height: none !important;
}
.modal-flexible-dialog {
    max-height: none !important;
}
.modal-helper-text {
    font-size: 12px;
    cursor: default;
}
.modal-helper-text-size14px {
    font-size: 14px !important;
    cursor: default;
}
.search-by-contact-area .e-multi-select-wrapper {
    background-color: #fff !important;
    min-height: 22px;
}
.contact-field-format-area {
    width: 250px;
}

.contact-field-example-area {
    width: 400px;
}

.contact-field-selecting-area {
    flex: 1;
}
.select-contact-field-for-whatsapp-placeholder-area .row {
    align-items: center;
}
.contact-field-whatsapp-placeholder-label-area {
    width: 100px;
    text-align: right;
}

.contact-field-whatsapp-placeholder-example-area {
    width: 220px;
    text-align: left;
}
.select-contact-field-for-whatsapp-placeholder-area {
    padding: 5px;
    background-color: #fff;
    margin-top: 2px;
    margin-bottom: 2px;
}
.whast-app-result-table {
    margin-top:10px;
}
.whatsapp-result-value {
    padding-left: 7px;
    display: block !important;
}
.component-buttons-area {
    margin-top: 5px;
    margin-bottom: 5px;
}
.component-button-area {
    background-color: #E6E7E8;
    padding-bottom: 5px;
}
.component-details-area {
    padding-bottom: 10px;
    padding-top: 10px;
    background-color: #E6E7E8;
}
.component-body-area {
    padding-bottom: 5px;
    background-color: #E6E7E8;
}
.component-control-area {
    padding-right: 15px;
}
.component-header-area {
    background-color: #E6E7E8;
    padding-bottom: 5px;
}
.dialog-whats-app-template-content-area {
    padding-left: 10px;
    padding-right: 10px;
}
.component-button-details-area {
    padding-right: 10px;
}
.component-button-area .button-title, .component-header-area .button-title, .component-body-area .button-title {
    background-color: #BFBFC2;
    margin-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 7px;
    padding-bottom: 7px;
}
.tooltip-button-noflex .e-tooltip {
    flex: none;
}
.modal-header-value {
    flex: 1;    
    font-weight: bold !important;
}
.contact-validation-warning-area {
    background-color: #fff;
    padding: 7px;
    margin-bottom: 10px;
    border-radius: 7px;
}
.content-scrollable-height300 {
    height: 300px;
    overflow-y: auto;
    background: #dee2e6;
    padding: 10px;
}
.edit-contact-button {    
    cursor: pointer;
}
.edit-contact-button-area {
    display: inline-block;
    width: 20px;
    float: right;
}
.contact-warning-list {
    margin-bottom:0px !important;
}
.area-dialog-title {
    font-weight: bold;
    color: #495057;
    margin-bottom: 5px;
}
/* END: Contact Page / Contact Controls */
/* START: Conversation Controls */
.conversation-item-area {
    display: flex;
    justify-content: space-between;
}
.conversation-incoming {
    background-color: #fff;
    padding: 7px;
    margin: 5px;
    border-radius: 7px;
    display: inline-block;
    max-width: 80%;
}
.conversation-outgoing {
    background-color: #DCF8C6;
    padding: 7px;
    margin: 5px;
    border-radius: 7px;
    display: inline-block;
    max-width: 80%;
    margin-left: auto;
}
.current-conversation {
    background-color: #A2D2FA !important;
}
.conversation-area .conversation-body, .conversation-area .conversation-mailout-title {
    display: block;
}
.conversation-area .conversation-mailout-title {
    padding-bottom: 3px;
    font-style: italic;
}
.conversation-area .conversation-mailout-title .e-tooltip {
    display:inline-block;
    font-style: italic;
    text-decoration: underline;
}
.conversation-time {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    font-size: 10px;
    color: #949499;
    float: right;
    bottom: -12px;
    position: relative;
    padding-left: 10px;
}
.conversation-info-area {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    position: relative;
    bottom: -5px;
}
.conversation-error {
    font-size: 12px;
    color: #EE1D23;
    padding-top: 4px;
    padding-bottom: 2px;
}
.conversation-button-area {
    padding-top: 10px;
    display: flex;
}
.conversation-button-area .button-item {
    margin-left:2px;
    margin-right:2px;
}
.conversation-body {
    padding-top: 2px;
    display: flex;
}
.conversation-attachment-area {
    padding-top: 4px;
    display: flex;
}
.conversation-header {
    padding-top: 4px;
    display: flex;
}
.conversation-info-left {
    display: flex;
    flex: 1;
    flex-direction: row;
    flex-wrap: nowrap;
    font-size: 10px;
    color: #949499;
    bottom: 0px;
    padding-left: 0px;
}
.conversation-time-right {
    text-align: right;
    font-size: 10px;
    color: #949499;
}
.conversation-time svg, .whatsapp-tooltip svg {
    width: 12px;
}
.conversation-time svg {
    top: -3px;
    position: relative;
}
.conversation-area.modal-dialog-scrollable {
    overflow-y:auto;
}
.conversation-time .first-one {
    right: -7px;
    position: relative;
}
.whatsapp-tooltip .second-one {
    left: -7px;
    position: relative;
}
.conversation-time:has(svg + svg) .time-stamp {
    right: -10px;
    position: relative;
}
.conversation-time .time-stamp {
    padding-right: 5px;
    white-space: nowrap;
}
.whatsapp-tooltip-item {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
.whatsapp-tooltip {
    display: flex;
    flex-direction: column;
    font-size:12px;
}
.conversation-area {
    background: #f4f4f4;
    padding:10px;
    margin-top:7px;
}
.ai-agent-modal-dialog .conversation-area {
    padding: 0 !important;
}
.conversation-controls .page-area-description {
    padding-bottom: 0px !important;
    margin-bottom: 0px !important;
}
.conversation-order-item, .conversation-sent-item {
    padding-right: 7px;
    font-size:11px;
    color: #212529
}
.conversation-current-item {
    color: #dc3545;
    font-weight: bold;
    margin-right: 10px;
}
.conversation-info-area .time-stamp .e-tooltip {
    display:inline-block !important;
}
/* END: Conversation Controls */
/* START: IP Entry Page */
.ip-entry-validation-cell {
    display: flex;
    justify-content: center;
}

.ip-entry-validation-cell .e-icons {
    display: flex;
    align-items: center;
    font-weight: bolder !important;
}

.ip-entry-validation-cell .e-icons, .ip-entry-validation-cell .e-control .e-icons {
    font-size: 20px;
}

.ip-entry-validation-cell .e-control .e-warning {
    color: #ED1D24 !important; /* Coror: Red = #ED1D24 */
}

.ip-entry-validation-cell .e-circle-check, .ip-entry-validation-cell .e-control .e-circle-check {
    color: #578300 !important; /* Coror: Green = #ED1D24 */
}

.ip-entry-validation-cell .small-spinner {
    color: #F57E20;
    display: flex;
    align-self: center;
}
.options-dropdown-content-ipentries {
    right: 5px !important;
}

/* END: IP Entry Page */
/* START: Recreate mailout Page */
.icon-text-link {
    display: flex;
    align-items: center;
}
.icon-text-link.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.add-remove-icon-area a {
    text-decoration: none !important
}
.icon-text-link .e-icons {
    padding-right: 10px;
}
.disable-tree-node {
    display:none;
}
.recreate-mailout-tree-area {
    position: relative;
    min-height: 300px;
}
.recreate-mailout-tree-area .add-remove-icon-area a:first-child {
    margin-right:5px;
}
.recreate-mailout-tree-area .add-remove-icon-area {
    display:flex;
    flex-direction:row;
    position: absolute;
    color: #083b61;
    right: 0px;
    padding-right: 5px;
    font-size: 14px;
    top: 0;
}
/* END: Recreate mailout Page */
/* START: Deletion Pages */
.account-deletion-cel {
    text-transform: none;
    font-size: 14px;
    display: flex;
    align-items: center;
}
/* END: Deletion Pages */
/* START: Images Page */
.upload-image-button {
    float: right;
    cursor: pointer;
    font-size: 14px;
    color: #083b61;
    padding-top: 2px;
}
.options-dropdown-content-images {
    right: 5px !important;
    width: 320px;
}
.options-dropdown-content .ignore-deleted-images-switch-item {
    padding: 12px 16px;
    text-decoration: none;
    display: flex;
    color: #333 !important;
    cursor: default;
    white-space: nowrap;
    font-size: 14px;
}
.checkbox-ignore-deleted-images-label {
    color: #333;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 2px;
}
.checkbox-ignore-deleted-images {
    width: 185px !important;
    height: 30px !important;
}
.download-image-link {
    color: #083b61;
    cursor:pointer;
}
.download-image-link:hover {
    text-decoration:underline;
}
.image-display-area {
    padding-top: 10px;
    padding-left: 20px;
    padding-bottom: 10px;
}

.collapse-expand-all-links {
    position: absolute;
    color: #083b61;
    right: 0px;
    padding-right: 5px;
    font-size: 12px;
    top: 0;
}
.nav-link-custom .remove-icon-area {
    position: absolute;
    color: #083b61;
    right: 0px;
    padding-right: 5px;
    font-size: 14px;
    top: 0;
}
.nav-link-custom .remove-icon-area .e-control {
    font-size: 14px;
}
.upload-area {
    padding: 10px;
}
/* END: Images Page */
/* START: Template Page */
.dialog-footer-message-area {
    padding-top:5px;
}
.dialog-footer-message-area #form-message-label {
    float:left;
}
.merge-field-control {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid lightgrey;
    padding: 2px 5px 2px 5px;
    cursor: default;
}
.merge-field-control.header .e-headertext {
    color: #fff !important;
    padding-left: 5px;
}
.merge-field-control .merge-field-name, .merge-field-control .merge-field-content-group-name {
    width:200px;
    min-width:200px;
    display: flex;
    align-items: flex-start;    
}
.merge-field-control .merge-field-content-group-name {
    width:150px;
    word-wrap:break-word;
}
.merge-field-control .merge-field-tag .e-tooltip {
    width:100%;
}
.merge-field-control .merge-field-tag {
    width: 200px;
    display: flex;
    align-items: flex-start;
}
.template-tags-merge-field .merge-field-tag {
    width: 100%;
}
.merge-field-control .merge-field-example-data {
    width: 300px;
    display: flex;
    align-items: flex-start;
    word-wrap: anywhere;
    padding-right: 5px;
}
.merge-field-control .merge-field-insert-link {
    width:55px;
}
.merge-field-controls {
    height: 400px;
    overflow-y: auto;
    padding-left: 5px;
    padding-right: 5px;
    cursor: default;
    white-space: normal;
}
.merge-field-control-action .e-icons {
    font-size: 18px;
    vertical-align: middle;
}
.merge-field-control-action {
    width: 30px;
    padding-right: 5px;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.merge-field-control-action .e-tooltip {
    display: flex;
    align-self: center;
}
.merge-field-control .update-example-data {
    padding-left:10px;
}
.merge-field-control .merge-field-block-selecion {
    width: 140px;
}
.template-toolbar {
    width: 100%;
    background-color: #E6E7E8; /* Gray/Grey tool bar. #D4D4D6 #424951 */
    border: 1px solid #949499;
}
.template-viewer-container, .iframe-container {
    width: 100%;
    background-color: #fff;
    border: 1px solid #949499;
    border-top-width: 0px;
    overflow-y: auto;
    padding: 20px;
    /* Reset all font styles */
    font-family: initial;
    font-size: 14px; /* default value for font-size for most browsers */
    font-weight: normal;
    font-style: normal;
    text-transform: none;
    text-decoration: none;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-align: left; /* or use 'start' depending on language direction */
    text-indent: 0;
    color: initial;
}
.iframe-container {
    border-top-width: 1px;
}
.content-block-html-viewer-container {
    width: 100%;
    background-color: #fff;
    position: relative;
    border: 1px solid #949499;
    border-top-width: 0px;
    padding: 0px;
    /* Reset all font styles */
    font-family: 14px;
    font-size: medium; /* default value for font-size for most browsers */
    font-weight: normal;
    font-style: normal;
    text-transform: none;
    text-decoration: none;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-align: left; /* or use 'start' depending on language direction */
    text-indent: 0;
    color: initial;
}
.tag-item-options-area {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    cursor:default;
}
.tag-item-options-area .tag-item-options-title {
    display: flex;
    padding-right:5px;
    align-items: end;
    height: 25px;
}
.tag-item-options-area .tag-item-option {
    display: flex;
    align-items: end;
    height: 25px;
    cursor:pointer;
}
.tag-item-options-area .seperation {
    padding-left: 4px;
    padding-right: 4px;
    display: flex;
    align-items: end;
    height: 25px;
}
.draggable-modal.e-dialog .e-dlg-header {
    width:auto !important;
}

.modal-background-grey .modal-draggable-body, .modal-background-grey .e-dlg-content {
    background: #f4f4f4 !important;
}
.draggable-modal .modal-draggable-header .e-icons {
    font-size: 18px;
    cursor: pointer;
}
.tag-item-options-area .tag-item-option.active {
    text-decoration: underline;
    color: #083b61 !important;
}
.content-group-block-selector-area {
    display: flex;
    flex-direction: column;
}
.content-groups-selection-area {
    display: flex;
    flex-direction: row;
    flex: 1;
}
.content-groups-selection-area {
    display: flex;
    flex-direction: row;
    flex: 1;
}
.content-group-block-title {
    display: flex;
    align-items: center;
    width: 125px;
    padding-left: 10px;
    border-top: 1px solid lightgrey;
    border-bottom: 1px solid lightgrey;
}
.content-groups-selection-area .content-block-title {
    display: flex;
    align-items: center;
    width: 146px;
    padding-left: 20px;
    border-top: 1px solid lightgrey;
    border-bottom: 1px solid lightgrey;
}
.content-block-viewer-control-bar {
    display: flex;
    align-items: center;
    height: 35px;
    background-color: lightgrey;
    overflow-y: hidden;
}
.content-block-viewer-control-bar-item {
    display: flex;
    align-items: center;
    height: 35px;
    background-color: lightgrey;
}
.content-block-viewer-control-bar .toolbar-grid-item {
    border-left: 1px solid lightgray;
    padding-left: 10px;
    padding-right: 10px;
}
.content-block-viewer-control-bar .toolbar-grid-item .e-tooltip {
    top: 2px;
    position: relative;
}
.content-group-dropdown-selector {
    border: none !important;
    box-shadow: none !important;
}
.contentgroup-exists-intemplate, .contentblock-exists-intemplate {
    background-color: #578300; /* Dark green - for buttons. */
    color: #fff !important;
}
.CodeMirror {
    height: 100% !important;
}

*.CodeMirror .readOnly {
    background-color: #cccccc;
}
.CodeMirror-line, pre.CodeMirror-line {
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace !important;
    font-size: 14px !important;
}
.CodeMirror-linenumber {
    font-size: 14px;
}
.toolbar-grid-item-label, .toolbar-grid-item-label .e-tooltip {
    font-family: 'Neue Haas Grotesk Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: normal;
    font-size: 14px;
    padding-right: 5px;
    cursor: pointer;
}
.toolbar-grid-item-label.validation-message .e-tooltip, .toolbar-grid-item-label.warning-message .e-tooltip {
    font-weight: bold !important;
} 

.draggable-modal-buttons {
    border-top: 1px solid lightgrey;
    margin-top: 7px;
    padding-top: 5px;
}
.draggable-modal-message {
    color: red;
    padding-top: 7px;
    padding-bottom: 7px;
}
.toolbar-buttons-bar .select-button span {
    text-decoration:underline;
}
.image-data-container {
    max-height: 500px;
    overflow: auto;
    min-height: 400px;
}
.image-data-container .row {
    margin-left:0px;
    margin-right:0px;
}

.image-data-container .altrow {
    background-color: #D4D4D6 !important;
}

.image-data-container .image-cache-details {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid lightgray;
    padding: 5px;
}
.image-data-container .image-cache-details:last-child {
    border-bottom: none;
}
.image-data-container .image-cache-details .image-cache-url {
    padding-right: 10px;
    word-break: break-word;
}
.image-data-container .image-cache-details .image-cache-data {
    padding-right: 10px;
}
.image-data-container {
    cursor:default;
}
.image-cache-details .lightgray-border {
    position: relative;
    display: inline-block;
    padding: 0px;
    background: lightgray;
    border: 2px solid #C6C6C6; /* Slightly darker then lightgray */
}
.image-cache-details .lightgray-border::before,
.image-cache-details .lightgray-border::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: linear-gradient(white, transparent, white);
}

.image-cache-details .lightgray-border img {
    display: block;
    max-width: 100%; /* This ensures the image doesn't overflow the container */
}
/* END: Template Page */
/* START: Settings Page */
.open-website-link {
    cursor: pointer;
    color: blue;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 14px;
    vertical-align: super;
}

.open-website-link-invalid {
    color: red !important;
}

.remove-client-logo-btn {
    margin-top: 5px;
    margin-bottom: 5px;
}
/* END: Settings Page */
/* START: Account Edit Page */
.legend-right-button {
    float: right;
    font-size: 12px !important;
    padding: 2px 4px !important;
}
/* END: Settings Page */
/* START: Mailout Reports Page */
.report-download-button {
    float: right;
    display: flex;
    margin-top: 5px;
}
.report-title {
    float: left;
    font-size: 1.1rem;
}
.report-title .e-tooltip {
    font-size: 1.1rem;
}
/* END: Mailout Reports Page */
/* START: Mailout Page */
.best-practice-icon {
    color: #083b61; /* Dark Blue */
    display: inline-block;
    padding-left: 5px;
    top: -5px;
    position: relative;
}
.best-practice-warning {
    color: #EE1D23; /* Red */
    display: inline-block;
}
.extra-page-button-areas .attention-area, .extra-page-button-areas .stop-area {
    height: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
}
.extra-page-button-areas .attention-area {
    background-color: #F57F21; /* Orange color. */
    margin-right: 2px;
    margin-top: 2px;
}
.extra-page-button-areas .attention-area .e-icons {
    color: #fff;
}
.extra-page-button-areas .stop-area {
    background-color: #EE1D23; /* Red color. */
    margin-right: 2px;
    margin-top: 2px;
}
.response-information .tab-control .e-float-input.e-control-wrapper {
    margin-top: 0px !important;
}

.response-information .tab-control {
    margin-top:10px;
}
/* END: Mailout Page */
/* START: Peppol Document Page */
.best-practice-row {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid lightgrey;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
}
.best-practice-column-icon {
    width: 40px;
    display: flex;
    font-size: 18px;
    justify-content: center;
    padding-top: 2px;
}
.best-practice-column-icon .e-circle-check {
    color: #578300 !important; /* Coror: Green = #ED1D24 */
}
.best-practice-column-icon .e-warning {
    color: #EE1D23 /* color: red */
}
.best-practice-column-rule {
    display: flex;
    flex: 1;
    font-family: 'Neue Haas Grotesk Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: 14px;
    font-weight: normal;
}
.best-practice-total-bar {
    background-color: #083b61;
    width: 100%;
    position: relative;
    height: 35px;
    margin-bottom:10px;
}
.best-practice-bar {
    height: 35px;
    background-color: #00adf0
}
.best-practice-control-text {
    position: absolute;
    top: 8px;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 16px;
    line-height: 1.3em;
}
.best-practice-control-text a {
    color: #fff;
    font-weight: 600;
}
.no-data-area {
    padding:20px;
}
.no-data-area label {
    font-family: 'Neue Haas Grotesk Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: normal;
    font-size:16px;
}
.no-data-area .result-message {
    padding-top:15px;
}
.no-data-area .result-message .result-message-description {
    padding-left:7px;
}
/* END: Peppol Document Page */
/* START: NavMenu */
.access-dropdown-content {
    opacity: 0.0;
    display: none;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    position: absolute;
    background-color: #fff;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 14;
    right: 160px;
    padding:10px;
}
.access-menu-dropdown {
    width:80px !important;
}
.access-menu-dropdown:hover .access-dropdown-content {
    display: block;
    opacity: 1.0;
}
.access-menu-dropdown label {
    font-size: 12px;
    font-weight: 500;
    vertical-align: super;
}

.access-dropdown-content label {
    color: #374151 !important;
    font-size: 16px;
    margin-bottom: 7px;
}
.access-dropdown-content .environment-buttons .e-btn-group {
    border-left: 1px solid lightgrey;
}
.access-dropdown-content .environment-buttons .e-btn-group:first-child {
    border-left: none;
}
.environment-buttons .segment-button {
    background-color: #083b61;
    width: 100px;
    color: #fff;
}
.environment-buttons .segment-button:hover {
    background-color: #00adf0;
}
.environment-buttons .segment-button.selected {
    background-color: #00adf0;
}
.environment-buttons.hovered .segment-button:not(.segment-button:hover) {
    background-color: #083b61; /* Not selected */
}
.environment-buttons .e-btn-group .e-btn.segment-button {
    border-color: #fff !important;
}
.e-btn-group .e-tooltip .e-btn {
    height:100%;
}
/* END: NavMenu */
/* START: HorizontalScrollComponent */
.horizontal-scrolling-menu-wrapper {
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
    width: 100%;
    /*margin-left: 3px;
    margin-right: 3px;*/
}

.menu-scroll-area {
    box-sizing: border-box;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    background-color: #F0F1F1;
    border: 1px solid lightgrey;
    height: 35px;
    display: flex;
}

.paddle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30px;
    border: 1px solid lightgrey !important;
}

.menu-buttons-area {
    /*display: inline-block;*/
    display: flex;
    flex: 1;    
    /* Cannot make this 100%, because then the paddels don't show up. width:100%; */
    /* padding-right: 30px;
    padding-left: 30px; */
}
.horizontal-scrolling-multi-bars .menu-buttons-area {
    flex-direction: column; /* Added this in here for the issues filter row. This component has 2 rows. */
}
.padding-right-30 {
    padding-right: 30px;
}

.padding-left-30 {
    padding-left: 30px;
}

.left-paddle {
    left: 0;
}

.right-paddle {
    right: 0;
}

.hidden {
    display: none;
}

.horizontal-scrolling-menu-wrapper .filter-issue-row .e-checkbox-wrapper .e-label {
    white-space: nowrap;
}

.filter-issue-row .e-multi-select-wrapper {
    align-self: center;
    cursor: pointer;
}

.filter-issue-row .e-dropdownlist {
    height: 35px !important;
}

.filter-issue-row .filter-application-info {
    display: inline-block;
    font-size: 14px;
    padding-left: 7px;
    padding-right: 5px;
}
.filter-issue-row .filter-application-info .e-control {
    font-size: 14px !important;
}
.filter-issue-row .e-multiselect {
    height: 100%;
    border: none !important;
    border-right: 1px solid #ced4da !important;
}
/* END: HorizontalScrollComponent */
/* START: Custom Grid ToolBar */
.custom-grid-toolbar, .template-toolbar {
    display: flex;
    flex-direction: row;
    background-color: #E6E7E8;
    border-left: 1px solid lightgrey;
    border-right: 1px solid lightgrey;
    border-top: 1px solid lightgrey;
    flex-wrap: wrap;
}

.custom-grid-toolbar .toolbar-grid-item {
    padding: 7px 14px 7px 14px;
    display: flex;
    align-items: center;
    height: 52px; /* For some custom toolbar bars this should be: 40px  I just can't remember for which one. 52px needs to be there for tool bars with period drop down like page: User Audit Page */
}

.template-toolbar .toolbar-grid-item {
    padding: 4px 14px 4px 14px;
    display: flex;
    align-items: center;
    height: 41px;
}

.template-toolbar .toolbar-grid-item-button {
    padding: 0px 14px 0px 0px;
    display: flex;
    align-items: center;
    height: 41px;
}

.toolbar-grid-item-button .e-tbar-btn-text {
    font-size: 14px;
}

.template-toolbar .toolbar-grid-item-button button {
    height:100%;
}

.template-toolbar .custom-control-top-position .e-tooltip {
    top: 2px;
    position: relative;
}

.toolbar-grid-item-control-area {
    background-color: #fff;
    align-self: center;
}

.custom-grid-toolbar .toolbar-grid-item-button {
    background-color: #A9A9AD;
    color: #fff;
    cursor: pointer;
    align-items: center;
    font-size: 14px;
}

.custom-grid-toolbar .border-right, .template-toolbar .border-right {
    border-right: 1px solid lightgrey;    
}

.toolbar-grid-item-btn {
    background-color: #A9A9AD !important;
    border: none !important;
    font-weight: normal !important;
    height: 100%;
}

.toolbar-grid-item-delete-button {
    padding: 0;
}

.custom-grid-toolbar .toolbar-grid-item-background {
    background-color: #E6E7E8 !important;
    border: none;
}

.custom-grid-toolbar .e-switch-inner {
    border-color: lightgrey !important;
}

.toolbar-grid-item-btn:hover {
    background-color: #959599 !important; /* Select button color: darker grey*/
}

.toolbar-grid-item .button-icon::before {
    font-size: 20px;
    margin-right: 8px;
}

.custom-grid-toolbar .toolbar-grid-item-hover:hover, pager-refresh-button:hover {
    background-color: #959599 !important; /* Select button color: darker grey*/
}

.custom-grid-toolbar .report-period-area .report-period-item, 
.custom-grid-toolbar .report-period-item
{
    margin-right: 0px;
}

.custom-grid-toolbar .align-items-center {
    display: flex;
}

.custom-grid-toolbar .toolbar-grid-item .e-tooltip {
    justify-content: center;
    display: flex;
}

.custom-grid-toolbar .right-button-area {
    display: flex;
    flex-direction: row;
    margin-left: auto;
}

.custom-grid-toolbar .toolbar-grid-item .e-input-group {
    height: 35px;
}

.custom-grid-toolbar .toolbar-grid-item .e-tooltip .row {
    justify-content: center;
    align-content: center;
}

.custom-grid-toolbar .toolbar-grid-item .grid-item-account-label {
    width: 80px;
    align-self: center;
}

.custom-grid-toolbar .toolbar-grid-item .grid-item-subscripton-label {
    width: 100px;
    align-self: center;
}

.custom-grid-toolbar .toolbar-grid-item .dropdown-area {
    width: auto;
}

.custom-grid-toolbar .radio-button-area {
    padding-left: 10px;
}

.custom-grid-toolbar .toolbar-grid-item-control-area label {
    font-size: 14px;
}
/* END: Custom Grid ToolBar  */
/* START: SendMessageTextBox */
.teams-input-wrap {
    position: relative;
    display: block; /* ensure it fills the row */
    width: 100%;
}

/* make the input truly 100% wide */
.teams-textarea,
.teams-textarea .e-input-group,
.teams-textarea .e-float-input,
.teams-textarea textarea {
    width: 100%;
    box-sizing: border-box;
    resize: none !important;
    font-weight: 400 !important; /* 'normal' */
    font-style: normal;
    font-family: 'Neue Haas Grotesk Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: normal;
}

/* leave space on the right so the icon button doesn’t overlap text */
.teams-textarea .e-input-group,
.teams-textarea .e-float-input {
    padding-right: 44px; /* matches button size + gap */
}

/* growth cap: 4 lines */
.teams-textarea textarea {
    resize: none; /* hide the resize handle */
    overflow-y: auto;
    font-size: 14px;
    line-height: 20px; /* adjust to your typography */
    max-height: calc(4 * 20px + 16px); /* 4 lines + approx vertical padding */
}

.send-btn {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
/* strip all default visuals: background, border, shadow */
.send-btn.e-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* also keep it clean on hover/focus/active */
.send-btn.e-btn:hover,
.send-btn.e-btn:focus,
.send-btn.e-btn:active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #444 !important;  /* same as base, keeps icon visible */
}

/* optional: slightly nudge the icon size for visibility */
.send-btn .e-btn-icon {
    font-size: 18px;
    line-height: 1;
}
.teams-input-wrap .e-icons.e-send:before {
    font-size:18px;
}
.no-drag,
.no-drag * {
    cursor: default;
}
.ai-agent-modal-dialog .e-dlg-content {
    padding: 0px !important;
    border-radius: 0px !important;
}
.ai-agent-modal-dialog .form-panel-area .input-area, .ai-agent-modal-dialog .e-dlg-content .input-area {
    margin-bottom: 0px !important;
}
/* END: SendMessageTextBox */
/* START: Draggable Modal  */
.draggable-modal {
    position: fixed !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    background-color: white;
    border: 1px solid #ccc;
    cursor: move;
    z-index: 1000;
}
.modal-draggable-header {
    padding: 10px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ccc;
    min-height: 40px;
}

.modal-draggable-header .e-dlg-header {
    display:flex !important;
}

.modal-draggable-body {
    padding: 10px;
}
.legend-top-right-button {
    display: flex;
    float: right;
    height: 25px;
    margin-right: 5px;
    margin-left: 5px;
    align-items: end;
    align-self: baseline;
}

.legend-top-right-button .e-tooltip {
    align-self: baseline;
}

.model-top-save-button {
    font-size: 18px;
    display: flex;
    float: right;
    width: 25px;
    height: 25px;
    margin-right: 5px;
    margin-left: 5px;
    align-items: end;
    align-self: baseline;
}
.model-top-save-button.disabled {  
    opacity: 0.6;
    cursor: not-allowed;
}
.model-top-save-button.disabled .e-icons {
    background-color: #cccccc;
}

.model-top-save-button .e-icons
{
    font-size: 18px;
    cursor: pointer;
}
.model-top-text-button {
    display: flex;
    align-items: center;
    cursor: pointer;
    width: auto;
    padding-right: 5px;
    padding-left: 5px;
}
.model-top-text-button .e-tooltip {
    align-items: center;
    display: flex;
}
.model-top-text-button .e-icons.e-plus {
    margin-right: 5px;
    font-size: 14px !important;
}
.model-top-right-button-splitter {
    border-left: 1px solid #fff;
    margin-left: 5px;
    margin-right: 5px;
    height: 18px;
    float: right;
    position: relative;
    top: 3px;
}
/* END: Draggable Modal  */
/* START: Custom Grid ToolBar  */
.table-custom-double-row {
    width: 100%;
    table-layout: fixed;
}

.table-custom-double-row .grid-custom-row td:first-child {
    padding-left: 8px;
}

.table-custom-double-row .grid-custom-row td:last-child {
    padding-right: 8px;
}

.table-custom-double-row .grid-top-row td {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px !important;
    padding-right: 20px;
}

.table-custom-double-row .grid-bottom-row td {
    border-top: 1px solid lightgrey !important;
    padding-top: 5px;
    padding-bottom: 5px;
}

.table-custom-double-row .type-column {
    cursor: pointer;
}
/* END: Custom Grid ToolBar  */
/* START: Tooltip styles  */
.page-title-area .e-tooltip {
    display: inline-block;
}

.page-title-area .e-tooltip h4 {
    cursor: pointer;
}

.cursor-pointer {
    cursor: pointer;
}

.page-title-tooltip {
    max-width: 450px !important;
}

.e-tooltip-wrap .e-popup {
    background-color: #fff !important;
    border: 1px solid lightgrey !important;
}

.e-tooltip-wrap {
    background-color: #fff !important;
    border-radius: 0px !important;
}

.e-tooltip-wrap .e-arrow-tip.e-tip-top {
    display: none;
}

.e-tooltip-wrap .e-tip-content {
    font-family: 'Neue Haas Grotesk Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: normal !important;
    font-size: 14px !important;
    color: #424951 !important;
    line-height: 20px !important;
}

.e-tooltip-wrap {
    -webkit-box-shadow: 0 4px 6px -6px #222;
    -moz-box-shadow: 0 4px 6px -6px #222;
    box-shadow: 0px 4px 6px 1px #222;
}
/* END: Tooltip styles  */
.defaultToolbar .toolbar-left {
    display: flex;
    background: #00adf0;
    color: #fff;
    z-index: 5;
    width: 100%;
}

.defaultToolbar .toolbar-center {
    display: inline-block;
    background: #E6E7E8;
    position: relative;
    width: 680px;
    z-index: 6;
    float: right;
    padding-top: 10px;
}

.defaultToolbar .dashboard-title {
    font-size: 16px;
    font-weight: 500;
    padding: 5px 5px 5px 10px;
    cursor: pointer;
}

.defaultToolbar .toolbar-right {
    display: inline-block;
    background: #083b61;
    z-index: 7;
    color: #fff;
    width: 255px;
    padding: 7px;
}

.defaultToolbar .toolbar-right .secret-button {
    display: inline-block;
    width: 10px;
    display: inline-block;
    width: 20px;
    height: 40px;
    position: absolute;
    top: 0px;
    right: 0px;
}

.defaultToolbar .toolbar-right .toolbar-right-button-area {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.defaultToolbar .menu-item {
    padding: 5px 8px;
    text-align: center;
    display: inline-block;
    width: 70px;
    height: 65px;
    cursor:pointer;
}

.defaultToolbar .menu-item label {
    font-weight: 500;
}

.defaultToolbar .menu-item img {
    margin-bottom: 7px;
}

.defaultToolbar .menu-item:hover {
    background: #778089;
    border-color: #6c757d;
    color: #fff;
}

.defaultToolbar .menu-item:focus {
    background: #778089;
    border-color: #6c757d;
    color: #fff;
}

.defaultToolbar .toolbar-right .menu-item .look-and-feel-icon {
    font-size: 32px;
}

#c9transact-large-logo {
    display: block;
}

#c9transact-small-logo {
    display: none;
}

.body-history-split-test-cases-area .e-content {
    min-height:50px;
}

.test-case-result-pass {
    background-color: green;
    color: #fff;
    width: 60px;
    display: flex;
    align-items: center;    
    justify-content: center;
    height: 25px;
}

.test-case-result-fail {
    background-color: red;
    color: #fff;
    width: 60px;
    display: flex;
    align-items: center;    
    justify-content: center;
    height: 25px;
}

.e-table .e-row .e-selectionbackground {
    background-color: #083b61;
    color: #fff !important;
}

@keyframes spinImage {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.spinImage {
    animation: spinImage 2s linear infinite;
}

/* condition for screen size minimum of 500px */
@media (max-width:1000px) {

    /* your conditional / responsive CSS inside this condition */

    #c9transact-large-logo {
        display: none;
    }

    #c9transact-small-logo {
        display: block;
    }

    .defaultToolbar .toolbar-left {
        flex: 100px 0;
    }

    .maincontent {
        /* font-size: 18px; */
        padding-top: 30px;
        padding-left: 3px !important;
        padding-right: 3px !important;
    }
    .maincontent.services-maincontent-with-actions-button {
        padding-top: 10px !important;
    }

    .extra-button-area {
        padding-left: 7px;
        padding-right: 7px;
    }
}

@media (max-width:905px) {
    .min-width-320 {
        min-width: 470px !important;
    }
    .input-160-flex-width {
        flex: 0 0 230px !important;
        width: 230px !important;
    }
}

/* condition for screen size minimum of 500px */
@media (max-width:700px) {
    .extra-button-area {
        padding-left: 7px;
        padding-right: 7px;
    }

    .extra-button-area.account-status-area .value {
        overflow: hidden;
        white-space: nowrap;
    }

    .active-mailouts-summary-area {
        left: 0;
        top: 2px !important;
        right: unset !important;
    }

    .maincontent:has(.active-mailouts-summary-area) .account-tab {
        margin-top: 10px !important;
    }
}

@media (min-width: 1800px) {
    .col-xxxl-6 {
        flex: 0 0 auto;
        width: 50%;
    }
}

/* condition for screen size for phone. */
@media (max-width:582px) {

    /* your conditional / responsive CSS inside this condition */
    .defaultToolbar {
        flex-wrap:nowrap !important;
    }

    .defaultToolbar .toolbar-center {
        display: none !important;
    }

    .defaultToolbar .dashboard-title {
        padding: 5px 1px 5px 1px !important;
        display: flex;
        margin: auto;
    }

    .defaultToolbar .toolbar-left {
        flex: auto !important;
    }

    #c9transact-small-logo {
        width: 50px;
        height: 50px;
        align-self: center;
    }

    .account-item .account-item-status, .account-item-header .account-item-status {
        flex: 0 0 80px !important;
    }

    .account-item .account-item-errors, .account-item-header .account-item-errors {
        flex: 0 0 50px !important;
    }

    .account-item .options-column, .account-item-header .options-column {
        flex: 0 0 35px;
    }

    .div-flex-row {
        flex-wrap: wrap;
    }
    .account-status-area {
        margin-left: unset;
        width: 150px !important;
    }

    .report-area .report-area-item {
        width: 100%;
        margin-right:0;
    }

    .options-dropdown-content {
        right: 30px;
    }

    .extra-button-area {
        padding-left: 7px;
        padding-right: 7px;
    }

    .extra-button-area.account-status-area .value {
        overflow: hidden;
        white-space: nowrap;
    }

    .active-mailouts-summary-area {
        left: 0;
        top: 2px !important;
        right: unset !important;
    }

    .maincontent:has(.active-mailouts-summary-area) .account-tab {
        margin-top: 10px !important;
    }

    .go280px-to-100-percent {
        width: 100%;
    }
}