/* open-sans-regular - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/open-sans-v34-latin/open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('/fonts/open-sans-v34-latin/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/fonts/open-sans-v34-latin/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('/fonts/open-sans-v34-latin/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('/fonts/open-sans-v34-latin/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/fonts/open-sans-v34-latin/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

body, html {
    font-size: 100%;
    font-family: 'Open Sans', sans-serif;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
}

/* Keep iPad Safari from scrolling the application shell when an inner editor scroller reaches its edge. */
body {
    position: fixed;
    inset: 0;
}

#form1,
#MNR_MainContainer {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* The signed-in application is white; this also prevents Safari layout rounding from exposing a black seam. */
#MNR_MainContainer {
    background-color: white !important;
}

/*Labels that used to be DevExpress labels*/
.MNR_uilabel, .EmailDraft_Label, .EmailDraft_Description, .MNR_PopupBox {
    font-size: 14px;
}

.MNR_FontLarge{
    font-size: 14pt;
}

/*Color Schema*/


/*This color is used in the font of the reporting pills*/
.palatinate_purple {
    color: #6B3866
}

/*Dark Purple Base Color - This is the background color of the logo and is our base color*/
.backcolor_base {
    background-color: #331A30;
}

.color_base {
    color: #331A30;
}

.backcolor_base_light {
    background-color: #452e42;
}

.color_base_light {
    color: #452e42;
}


.backcolor_base_dark {
    background-color: #2f182c;
}

.color_base_dark {
    color: #2f182c;
}


/*Blue-ish Color - This color is used for Newsletters*/
.backcolor_blue{
    background-color: #336699;
}
.color_blue { 
    color: #336699;
}

.backcolor_blue_light {
    background-color: #4573a2;
}
.color_blue_light {
    color: #4573a2;
}

.backcolor_blue_dark {
    background-color: #2f5d8c;
}
.color_blue_dark {
    color: #2f5d8c;
}


/*red-ish Color - This color is used for auto responders*/
.backcolor_red {
    background-color: #8e0045;
}

.color_red {
    color: #8e0045;
}

.backcolor_red_light {
    background-color: #981755;
}

.color_red_light {
    color: #981755;
}

.backcolor_red_dark {
    background-color: #82003f;
}

.color_red_dark {
    color: #82003f;
}

/*green-ish Color - This color is used for forms*/
.backcolor_green {
    background-color: #284b63;
}

.color_green {
    color: #284b63;
}

.backcolor_green_light {
    background-color: #3b5b71;
}

.color_green_light {
    color: #3b5b71;
}

.backcolor_green_dark {
    background-color: #25455a;
}

.color_green_dark {
    color: #25455a;
}


.color_gray{
    color: #e6e6e6;
}

.color_gray_dark {
    color: #D2D2D2;
}

.MNR_black{
    color: black;
}

/*plum-ish Color*/
.backcolor_plum {
    background-color: #770058;
}

.color_plum {
    color: #770058;
}

.backcolor_plum_light {
    background-color: #831767;
}

.color_plum_light {
    color: #831767;
}

.backcolor_plum_dark {
    background-color: #6d0050;
}

.color_plum_dark {
    color: #6d0050;
}


/*End of color definitions --------------------------------------------------------------------------------------*/

/*Site Navigation Tabs*/

/*Container of the main site navigation*/
#sitenav_container {
    display: flow-root;
    background-color: black;
    height: 56px;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 16pt;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    box-sizing: border-box;
}

/* Keep the tab row on whole device pixels so iPad Safari cannot expose a dark subpixel seam above the toolbar. */
#sitenav_container div.sitenav_description > p,
#sitenav_container div.sitenav_div > p,
#sitenav_container div.sitenav_div_selected > p,
#sitenav_container div.sitenav_right_div > p,
#sitenav_container button.MNR_TopMenuButton {
    line-height: 56px;
    padding-top: 0;
    padding-bottom: 0;
}

@media only screen and (max-width: 1300px) {
    #sitenav_container {
        font-size: 14pt;
    }
}

@media only screen and (max-width: 1180px) {
    #sitenav_container {
        font-size: 13pt;
    }
}


div.sitenav_hide {
    display: none;
}

/*Description of the document we are currently in*/
div.sitenav_description {
    float: left;
    position: relative;
}

.sitenav_description_clickable {
    cursor: pointer;
}
    .sitenav_description_clickable:hover {
        cursor: pointer;
        background-color: #2f5d8c;
    }

    div.sitenav_description p {
        margin: 0;
        float: left;
        position: relative;
        text-decoration: none;
        padding: .7em 1.2em .7em 1em;
        width: 200px;
        text-align: center;
        color: white;
        cursor: default;
        margin-left: -10px;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

    img.flag_small{
        height: 16px;
        width: 24px;
        margin-left: 0px;
        margin-right: 10px;
    }
    
@media only screen and (max-width: 1300px) {
    div.sitenav_description p {
        width: 150px;
    }
}

@media only screen and (max-width: 1100px) {
    div.sitenav_description p {
        width: 110px;
    }
}


/*Sitenav Bar Button, unselected*/
div.sitenav_div {
    float: left;
    position: relative;
}

    div.sitenav_div p {
        display: block;
        margin: 0 0 0 -10px;
        text-decoration: none;
        padding: .7em 1em .7em 1em;
        width: 140px;
        position: relative;
        float: left;
        cursor: pointer;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        -o-text-overflow: clip;
        text-overflow: clip;
        -webkit-transform: skewX(-10deg);
        transform: skewX(-10deg);
        border-right: 0 solid #444;
        text-align: center;
        color: white;
        background-color: black;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

@media only screen and (max-width: 1600px) {
    div.sitenav_div p {
        width: 110px;
        padding: .7em .9em .7em .9em;
    }
}

@media only screen and (max-width: 1200px) {
    div.sitenav_div p {
        width: 100px;
        padding: .7em .8em .7em .8em;
    }
}

div.sitenav_div p:hover {
    background-color: #331A30;
}

/* The loaded-form workflow has three short peer tabs. Keep them equal and compact instead of
   inheriting the wide content-box sizing used by the top-level product navigation. */
#sitenav_container.sitenav_forms_context div.sitenav_div > p,
#sitenav_container.sitenav_forms_context div.sitenav_div_selected > p {
    box-sizing: border-box;
    width: 150px;
    padding-right: 14px;
    padding-left: 14px;
    font-size: 18px;
}

@media only screen and (max-width: 1200px) {
    #sitenav_container.sitenav_forms_context div.sitenav_div > p,
    #sitenav_container.sitenav_forms_context div.sitenav_div_selected > p {
        width: 135px;
        padding-right: 10px;
        padding-left: 10px;
        font-size: 17px;
    }
}


/*Sitenav Button - Selected*/
div.sitenav_div_selected {
    float: left;
    position: relative;
}

    div.sitenav_div_selected p {
        display: block;
        margin: 0;
        margin-left: -10px;
        text-decoration: none;
        padding: .7em 1em .7em 1em;
        width: 140px;
        position: relative;
        float: left;
        cursor: default;
        color: black;
        background-color: white;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        -o-text-overflow: clip;
        text-overflow: clip;
        -webkit-transform: skewX(-10deg);
        transform: skewX(-10deg);
        border-right: 1px solid #444;
        text-align: center;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

@media only screen and (max-width: 1600px) {
    div.sitenav_div_selected p {
        width: 120px;
        padding: .7em .9em .7em .9em;
    }

    @media only screen and (max-width: 1200px) {
        div.sitenav_div_selected p {
            width: 100px;
            padding: .7em .8em .7em .8em;
        }
    }
}

div.sitenav_description a::after {
    border-left-color: #336699;
    z-index: 2;
}



div.sitenav_right_container {
    align-items: stretch;
    background-color: white;
    display: flex;
    float: right;
    height: 56px;
}

div.sitenav_right_div p {
    display: block;
    margin: 0 -10px 0 0;
    text-decoration: none;
    padding: .7em .7em .7em .7em;
    width: 20px;
    position: relative;
    float: left;
    cursor: pointer;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    -o-text-overflow: clip;
    text-overflow: clip;
    -webkit-transform: skewX(-10deg);
    transform: skewX(-10deg);
    border-right: 0 solid #444;
    text-align: center;
    background-color: white;
    color: black;
}

button.MNR_TopMenuButton {
    display: block;
    margin: 0 -10px 0 0;
    text-decoration: none;
    padding: .7em .7em .7em .7em;
    min-width: 20px;
    position: relative;
    float: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: content-box;
    text-overflow: clip;
    transform: skewX(-10deg);
    border: 0;
    text-align: center;
    background-color: white;
    color: black;
    font: inherit;
}

button.MNR_TopMenuButton:hover,
button.MNR_TopMenuButton:focus,
.MNR_MenuButtonTrigger_Open button.MNR_TopMenuButton {
    background-color: #f7f7f7;
    outline: 2px solid transparent;
}

button.MNR_TopMenuButton:focus-visible {
    outline: 2px solid #336699;
    outline-offset: -2px;
}

.MNR_GlobalConnectionWarning {
    display: none;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #F5A623;
    color: #FFFFFF;
    font-size: 9px;
    line-height: 14px;
    z-index: 2;
}

.MNR_GlobalConnectionWarningVisible {
    display: inline-flex;
}

.MNR_GlobalConnectionWarning_Settings {
    position: absolute;
    left: 28px;
    bottom: 14px;
}

.MNR_SettingsMenuIconWithWarning {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
}

.MNR_SettingsMenuIconWithWarning > .MNR_GlobalConnectionWarning {
    position: absolute;
    right: -5px;
    bottom: -5px;
}

.MNR_SettingsMenuItemContent {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.MNR_MenuButtonAction {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    color: black;
    font: inherit;
    text-align: left;
    cursor: pointer;
    padding: 0;
}

.MNR_MenuButtonAction:focus-visible {
    outline: 2px solid #336699;
    outline-offset: 2px;
}

#Default_HelpMenu,
#Default_LanguageMenu {
    left: -160px;
    top: 54px;
}

#Default_SettingsMenu {
    right: 0;
    left: auto;
    top: 54px;
    min-width: 190px;
}

div.sitenav_div p:hover {
    background-color: black;
}


/*Tab that contains a heading and controls*/
div.MNR_TabContent{
    width: 100%;
}

/*Heading of a tab*/
div.MNR_TabContentHeading{
    display: inline-block; margin-left: 0; margin-right: 0; text-align: left; font-size: 24pt; padding: 20px; vertical-align: middle; width: 90%;
}


ul.MNR_SettingsCheckboxList{
    list-style: none; 
    border: 1px transparent solid; 
    display:inline-block;
    padding: 0;
}
li.MNR_SettingsCheckboxList{
    display: inline-block; 
    margin-right: 10px;
}

/**/
/*CtrlMonitorTab*/

.MNR_Monitor_Option {
    background-color: #336699;
}

    .MNR_Monitor_Option:hover {
        background-color: #2f5d8c;
    }

.MNR_Monitor_Option_Pressed {
    background-color: #4573a2;
}

#DIV_Monitor_Tab_Activity .MonitorActivity_Wrap {
    border: 1px solid #d8dee8;
    border-radius: 4px;
    background-color: #ffffff;
    overflow: auto;
}

#DIV_Monitor_Tab_Activity table.MonitorActivity_Table {
    width: 100%;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
}

#DIV_Monitor_Tab_Activity th.MonitorActivity_HeadingCell {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #336699;
    color: #ffffff;
    border-bottom: 1px solid #2f5d8c;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 9pt;
    padding: 11px 10px;
    white-space: nowrap;
    text-align: left;
}

#DIV_Monitor_Tab_Activity tr.MonitorActivity_Row:nth-child(even) {
    background-color: #f5f9fd;
}

#DIV_Monitor_Tab_Activity td.MonitorActivity_Cell {
    border-bottom: 1px solid #edf2f7;
    color: #2f3f52;
    padding: 10px;
    vertical-align: middle;
    line-height: 1.3;
}

#DIV_Monitor_Tab_Activity td.MonitorActivity_CellNumber {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

#DIV_Monitor_Tab_TestMessages .MonitorTestMessages_Wrap {
    border: 1px solid #d8dee8;
    border-radius: 4px;
    background-color: #ffffff;
    overflow: auto;
}

#DIV_Monitor_Tab_TestMessages table.MonitorTestMessages_Table {
    width: 100%;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
}

#DIV_Monitor_Tab_TestMessages th.MonitorTestMessages_HeadingCell {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #336699;
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 9pt;
    border-bottom: 1px solid #2f5d8c;
    padding: 11px 10px;
    white-space: nowrap;
    text-align: left;
}

#DIV_Monitor_Tab_TestMessages th.MonitorTestMessages_HeadingSortable {
    cursor: pointer;
}

#DIV_Monitor_Tab_TestMessages tr.MonitorTestMessages_Row:nth-child(even) {
    background-color: #f5f9fd;
}

#DIV_Monitor_Tab_TestMessages td.MonitorTestMessages_Cell {
    border-bottom: 1px solid #edf2f7;
    color: #2f3f52;
    padding: 10px;
    vertical-align: top;
    line-height: 1.3;
    white-space: normal;
}

#DIV_Monitor_Tab_TestMessages td.MonitorTestMessages_CellNumber {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

#DIV_Monitor_Tab_IPStatus .MonitorIPStatus_Wrap {
    border: 1px solid #d8dee8;
    border-radius: 4px;
    background-color: #ffffff;
    overflow: auto;
}

#DIV_Monitor_Tab_IPStatus .MonitorIPStatus_SectionHeading {
    margin: 20px 0 8px 0;
    color: #2f3f52;
    font-size: 15px;
    font-weight: 700;
}

#DIV_Monitor_Tab_IPStatus table.MonitorIPStatus_Table {
    width: 100%;
    min-width: 860px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
}

#DIV_Monitor_Tab_IPStatus th.MonitorIPStatus_HeadingCell {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #336699;
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 9pt;
    border-bottom: 1px solid #2f5d8c;
    padding: 11px 10px;
    white-space: nowrap;
    text-align: left;
}

#DIV_Monitor_Tab_IPStatus tr.MonitorIPStatus_Row:nth-child(even) {
    background-color: #f5f9fd;
}

#DIV_Monitor_Tab_IPStatus tr.MonitorIPStatus_RowClickable {
    cursor: pointer;
}

#DIV_Monitor_Tab_IPStatus tr.MonitorIPStatus_RowClickable:hover {
    background-color: #ecf4fb;
}

#DIV_Monitor_Tab_IPStatus td.MonitorIPStatus_Cell {
    border-bottom: 1px solid #edf2f7;
    color: #2f3f52;
    padding: 10px;
    vertical-align: top;
    line-height: 1.3;
    white-space: normal;
}

#DIV_Monitor_Tab_IPStatus td.MonitorIPStatus_CellScore {
    text-align: left;
    vertical-align: middle;
}

#DIV_Monitor_Tab_IPStatus td.MonitorIPStatus_CellVolume {
    text-align: left !important;
}

#DIV_Monitor_Tab_IPStatus td.MonitorIPStatus_CellNumber {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

#DIV_Monitor_Tab_IPStatus .MonitorIPStatus_ScoreBadge {
    display: inline-block;
    min-width: 34px;
    text-align: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 10pt;
    border: 1px solid transparent;
}

#DIV_Monitor_Tab_IPStatus .MonitorIPStatus_ChecksBadge {
    display: inline-block;
    min-width: 56px;
    text-align: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 10pt;
    border: 1px solid transparent;
}

#DIV_Monitor_Tab_IPStatus .MonitorIPStatus_ChecksBadge.checks-ok {
    color: #1f6d3f;
    background-color: #e8f7ef;
    border-color: #b9e6ca;
}

#DIV_Monitor_Tab_IPStatus .MonitorIPStatus_ChecksBadge.checks-warn {
    color: #7a5d00;
    background-color: #fff7db;
    border-color: #f3de9a;
}

#DIV_Monitor_Tab_IPStatus .MonitorIPStatus_ChecksBadge.checks-bad {
    color: #8c2f3b;
    background-color: #fdecef;
    border-color: #f5c2cb;
}

#DIV_Monitor_Tab_IPStatus .MonitorIPStatus_ChecksBadge.checks-na {
    color: #516172;
    background-color: #eef2f7;
    border-color: #d4dbe5;
}

#DIV_Monitor_Tab_IPStatus .MonitorIPStatus_ScoreBadge.score-high {
    color: #1f6d3f;
    background-color: #e8f7ef;
    border-color: #b9e6ca;
}

#DIV_Monitor_Tab_IPStatus .MonitorIPStatus_ScoreBadge.score-mid {
    color: #7a5d00;
    background-color: #fff7db;
    border-color: #f3de9a;
}

#DIV_Monitor_Tab_IPStatus .MonitorIPStatus_ScoreBadge.score-low {
    color: #8c2f3b;
    background-color: #fdecef;
    border-color: #f5c2cb;
}

#DIV_Monitor_Tab_IPStatus .MonitorIPStatus_ScoreBadge.score-na {
    color: #516172;
    background-color: #eef2f7;
    border-color: #d4dbe5;
}

#DIV_Monitor_Tab_IPStatus .MonitorIPStatus_Blockages {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 22px;
}

#DIV_Monitor_Tab_IPStatus .MonitorIPStatus_BlockageTag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: #fdecef;
    border: 1px solid #f5c2cb;
    color: #8c2f3b;
    font-size: 9pt;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

#DIV_Monitor_Tab_IPStatus .MonitorIPStatus_BlockageTag:hover {
    background-color: #fbdde3;
    border-color: #efadb8;
}

#DIV_Monitor_Tab_IPStatus .MonitorIPStatus_BlockageTag:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(140, 47, 59, 0.18);
}

#DIV_Monitor_Tab_IPStatus .MonitorIPStatus_Empty {
    color: #8391a3;
    font-style: italic;
}

#DIV_Monitor_Tab_IPStatus .MonitorIPStatus_AlertsEmpty {
    padding: 12px 10px;
    color: #8391a3;
    font-style: italic;
}

#DIV_Monitor_Tab_IPStatus table.MonitorIPStatus_AlertsTable {
    min-width: 1080px;
}

#DIV_Monitor_Tab_IPStatus td.MonitorIPStatus_AlertMessage {
    min-width: 420px;
    white-space: normal;
    word-break: break-word;
}

#DlgMonitor_IPAlertDetails .MonitorIPAlertDetails_Grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.95fr) minmax(420px, 1.25fr);
    gap: 16px;
    align-items: start;
}

#DlgMonitor_IPAlertDetails .MonitorIPAlertDetails_Panel {
    min-width: 0;
}

#DlgMonitor_IPAlertDetails .MonitorIPAlertDetails_Pre {
    height: 610px;
    margin: 0;
    padding: 12px;
    overflow: auto;
    background: #111111;
    color: #f0f0f0;
    border: 1px solid #444444;
    border-radius: 4px;
    white-space: pre-wrap;
    word-break: break-word;
}

#TAB_Monitor_Environment .MonitorIPStatus_Wrap,
#DIV_Monitor_Tab_Environment .MonitorIPStatus_Wrap,
#TAB_Monitor_SystemLogs .MonitorIPStatus_Wrap,
#DIV_Monitor_Tab_SystemLogs_List .MonitorIPStatus_Wrap,
#DlgMonitor_SystemLogPreview .MonitorIPStatus_Wrap {
    border: 1px solid #d8dee8;
    border-radius: 4px;
    background-color: #ffffff;
    overflow: auto;
}

#TAB_Monitor_Environment table.MonitorIPStatus_Table,
#DIV_Monitor_Tab_Environment table.MonitorIPStatus_Table,
#TAB_Monitor_SystemLogs table.MonitorIPStatus_Table,
#DIV_Monitor_Tab_SystemLogs_List table.MonitorIPStatus_Table,
#DlgMonitor_SystemLogPreview table.MonitorIPStatus_Table {
    width: 100%;
    min-width: 860px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
}

#TAB_Monitor_Environment th.MonitorIPStatus_HeadingCell,
#DIV_Monitor_Tab_Environment th.MonitorIPStatus_HeadingCell,
#TAB_Monitor_SystemLogs th.MonitorIPStatus_HeadingCell,
#DIV_Monitor_Tab_SystemLogs_List th.MonitorIPStatus_HeadingCell,
#DlgMonitor_SystemLogPreview th.MonitorIPStatus_HeadingCell {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #336699;
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 9pt;
    border-bottom: 1px solid #2f5d8c;
    padding: 11px 10px;
    white-space: nowrap;
    text-align: left;
}

#TAB_Monitor_SystemLogs th.MonitorSystemLogs_HeadingSortable,
#DIV_Monitor_Tab_SystemLogs_List th.MonitorSystemLogs_HeadingSortable,
#DlgMonitor_SystemLogPreview th.MonitorSystemLogs_HeadingSortable {
    cursor: pointer;
}

#TAB_Monitor_Environment tr.MonitorIPStatus_Row:nth-child(even),
#DIV_Monitor_Tab_Environment tr.MonitorIPStatus_Row:nth-child(even),
#TAB_Monitor_SystemLogs tr.MonitorIPStatus_Row:nth-child(even),
#DIV_Monitor_Tab_SystemLogs_List tr.MonitorIPStatus_Row:nth-child(even),
#DlgMonitor_SystemLogPreview tr.MonitorIPStatus_Row:nth-child(even) {
    background-color: #f5f9fd;
}

#TAB_Monitor_SystemLogs tr.MonitorIPStatus_Row,
#DIV_Monitor_Tab_SystemLogs_List tr.MonitorIPStatus_Row {
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

#TAB_Monitor_SystemLogs tr.MonitorIPStatus_Row td.MonitorIPStatus_Cell,
#DIV_Monitor_Tab_SystemLogs_List tr.MonitorIPStatus_Row td.MonitorIPStatus_Cell {
    cursor: pointer;
}

#TAB_Monitor_SystemLogs tr.MonitorIPStatus_Row:hover,
#DIV_Monitor_Tab_SystemLogs_List tr.MonitorIPStatus_Row:hover {
    background-color: #e8f1fb;
}

#TAB_Monitor_Environment td.MonitorIPStatus_Cell,
#DIV_Monitor_Tab_Environment td.MonitorIPStatus_Cell,
#TAB_Monitor_SystemLogs td.MonitorIPStatus_Cell,
#DIV_Monitor_Tab_SystemLogs_List td.MonitorIPStatus_Cell,
#DlgMonitor_SystemLogPreview td.MonitorIPStatus_Cell {
    border-bottom: 1px solid #edf2f7;
    color: #2f3f52;
    padding: 10px;
    vertical-align: top;
    line-height: 1.3;
    white-space: normal;
}

#TAB_Monitor_Environment td.MonitorIPStatus_CellNumber,
#DIV_Monitor_Tab_Environment td.MonitorIPStatus_CellNumber,
#TAB_Monitor_SystemLogs td.MonitorIPStatus_CellNumber,
#DIV_Monitor_Tab_SystemLogs_List td.MonitorIPStatus_CellNumber,
#DlgMonitor_SystemLogPreview td.MonitorIPStatus_CellNumber {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

#DlgMonitor_SystemLogPreview .MNR_PopupBox_Content {
    background-color: #ffffff;
}

#DIV_Monitor_SystemLogPreview_Meta {
    color: #2f3f52;
    font-size: 10pt;
    line-height: 1.3;
}

#PRE_Monitor_SystemLogPreview_Content {
    font-family: Consolas, "Courier New", monospace;
    font-size: 10pt;
    line-height: 1.45;
    box-sizing: border-box;
    height: 570px;
    max-height: 570px;
}


/**/
/*CtrlUsersTab*/
.MNR_User_Option {
    background-color: #336699;
}

    .MNR_User_Option:hover {
        background-color: #2f5d8c;
    }

.MNR_User_Option_Pressed {
    background-color: #4573a2;
}

/*Show a field of an entry of the list*/
td.UserManagement_RecordCell {
    height: 35px;
    border-bottom: 1px solid rgb(209, 209, 209);
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    width: 100px;
    overflow: auto;
    max-height: 35px;
    cursor: pointer;
    z-index: -1;
}

tr.UserManagement_RecordRow {
    background-color: white;
    color: #452e42;
}

    tr.UserManagement_RecordRow:hover {
        background-color: #331a30;
        color: white;
    }

tr.UserManagement_RecordRow_Hidden {
    display: none;
}

/**/
/*This is for the Profile Box and the Drop Down Functionality */
div.MNR_ProfileBox {
    background-color: white;
    position: absolute;
    box-shadow: rgba(64, 64, 64, 0.8) 3px 3px 5px;
    border: 1px solid #f7f7f7;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    width: 520px;
    z-index: 10;
    left: -410px;
    top: 54px;
    font-size: 11pt;
    padding: 14px;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}


div.MNR_Toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    background-color: white;
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    vertical-align: middle;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Declarative product toolbars keep a little more air between adjacent controls. */
[data-mnr-toolbar].MNR_Toolbar {
    column-gap: 2px;
}

@media only screen and (max-width: 1300px) {
    .MNR_ToolbarButton {
        height: 50px;
    }
}

div.MNR_ToolbarDivider {
    width: 1px;
    border-left: 1px solid rgb(255, 233, 231);
    margin-bottom: 0;
    margin-top: 0;
    display: inline-block;
    flex: 0 0 auto;
    height: 55px;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

@media only screen and (max-width: 1300px) {
    div.MNR_ToolbarDivider {
        height: 50px;
    }
}

.MNR_ToolbarButton {
    user-select: none;
    background-color: white;
    color: black;
    display: inline-block;
    flex: 0 0 auto;
    text-align: center;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 3px;
    padding-right: 3px;
    margin-left: 1px;
    margin-right: 1px;
    min-width: 75px;
    cursor: pointer;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

button.MNR_ToolbarButton,
button.MNR_ToolbarButton_Small,
.MNR_ToolbarSplitButton button {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    font: inherit;
}

.MNR_ToolbarSplitButton {
    display: inline-flex;
    align-items: stretch;
    padding: 0;
}

.MNR_ToolbarSplitButton_Primary,
.MNR_ToolbarSplitButton_Menu {
    color: inherit;
    background: transparent;
    cursor: pointer;
}

.MNR_ToolbarSplitButton_Primary {
    flex: 1 1 auto;
    min-width: 56px;
    padding: 4px 2px;
}

.MNR_ToolbarSplitButton_Menu {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 24px;
    width: 24px;
    padding: 0 0 0 2px;
    border-left: 1px solid #e0e0e0;
}

.MNR_EditorToolbar_DropdownIndicator {
    font-size: 14px !important;
    color: #555555;
}

.MNR_EditorToolbar_MoreHost .MNR_ToolbarSplitButton_Primary i {
    font-size: 16px !important;
}

.MNR_ToolbarSplitButton button:focus-visible,
button.MNR_ToolbarButton:focus-visible,
button.MNR_ToolbarButton_Small:focus-visible,
.MNR_EditorToolbar_OverflowAction:focus-visible {
    outline: 2px solid #2f73a8;
    outline-offset: -2px;
}

.MNR_EditorToolbar_MenuOpen {
    z-index: 1000;
    margin: 0;
}

.MNR_EditorToolbar_OverflowHidden {
    display: none !important;
}

.MNR_EditorToolbar_OverflowMenu {
    padding: 4px;
}

.MNR_EditorToolbar_OverflowAction {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: black;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.MNR_EditorToolbar_OverflowAction:hover {
    background-color: rgb(247, 247, 247);
}

@media only screen and (max-width: 1300px) {
    .MNR_ToolbarButton {
        padding: 1px;
    }
}

.MNR_ToolbarButton_Checked {
    background-color: #ebebeb;
    border-radius: 2px;
}

    .MNR_ToolbarButton i{
        font-size: 30px;
        display: block;
    }

@media only screen and (max-width: 1300px) {
    .MNR_ToolbarButton i {
        font-size: 27px;
    }
}

    .MNR_ToolbarButton p {
        font-size: 13px;
        line-height: 100%;
        padding: 0;
        margin-top: 8px;
        margin-bottom: 5px;
    }

    .MNR_ToolbarButton:hover {
        background-color: #DADADA;
    }

.MNR_ToolbarButton_Disabled {
    pointer-events: none;
    opacity: 0.6;
}

i.MNR_ToolbarButton_DropDownIndicator {
    float: right;
    position: relative;
    margin-top: -40px;
}

/* Keep every product-toolbar icon and label on the same two-row rhythm, including editor split buttons. */
[data-mnr-toolbar].MNR_Toolbar > button.MNR_ToolbarButton,
#CtrlNewsletterEditorMenubar_Toolbar .MNR_ToolbarSplitButton_Primary {
    box-sizing: border-box;
    display: grid;
    grid-template-rows: 30px auto;
    align-items: center;
    align-content: center;
    justify-items: center;
    row-gap: 6px;
    position: relative;
}

[data-mnr-toolbar].MNR_Toolbar > button.MNR_ToolbarButton > i:not(.MNR_EditorToolbar_DropdownIndicator),
#CtrlNewsletterEditorMenubar_Toolbar .MNR_ToolbarSplitButton_Primary > i:not(.MNR_EditorToolbar_DropdownIndicator) {
    box-sizing: border-box;
    height: 30px;
    line-height: 30px;
}

[data-mnr-toolbar].MNR_Toolbar > button.MNR_ToolbarButton > p,
#CtrlNewsletterEditorMenubar_Toolbar .MNR_ToolbarSplitButton_Primary > p {
    margin: 0;
}

[data-mnr-toolbar].MNR_Toolbar > button.MNR_ToolbarButton > .MNR_EditorToolbar_DropdownIndicator {
    float: none;
    position: absolute;
    top: 17px;
    right: 7px;
    margin: 0;
}

div.MNR_Toolbar_Small {
    padding-left: 1px;
    padding-top: 2px;
    padding-bottom: 5px;
    vertical-align: middle
}

/* Keep the legacy Style Editor toolbars on the same compact rhythm as the shared menu controller. */
#CtrlStyleEdit_TextStyleToolbar,
#CtrlStyleEdit_ToolbarParagraph {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 4px 8px;
}

/* The eight common font actions form one semantic row in the narrow Style Editor. */
#CtrlStyleEdit_TextStyleToolbar {
    flex-wrap: nowrap;
}

#CtrlStyleEdit_TextStyleToolbar > .MNR_ToolbarButton_Small,
#CtrlStyleEdit_ToolbarParagraph > .MNR_ToolbarButton_Small {
    align-items: center;
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 32px;
    height: 32px;
    justify-content: center;
    margin: 0;
    min-width: 32px;
    padding: 0;
    width: 32px;
}

#CtrlStyleEdit_TextStyleToolbar > button[data-mnr-toolbar-menu] {
    gap: 3px;
}

#CtrlStyleEdit_TextStyleToolbar > button[data-mnr-toolbar-menu] > .MNR_EditorToolbar_DropdownIndicator {
    display: inline-block;
    float: none;
    font-size: 10px !important;
    line-height: 1;
    margin: 0;
    position: static;
}

div.MNR_ToolbarDivider_Small {
    width: 1px;
    border-left: 1px solid rgb(255, 233, 231);
    margin-bottom: 0;
    margin-top: 0;
    display: inline-block;
    height: 25px;
}

.MNR_ToolbarButton_Small {
    user-select: none;
    background-color: white;
    color: black;
    display: inline-block;
    text-align: center;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 3px;
    padding-right: 3px;
    margin-left: 1px;
    margin-right: 1px;
    min-width: 22px;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.MNR_ToolbarButton_Small_Checked {
    background-color: #ebebeb;
    border-radius: 2px;
}

.MNR_ToolbarButton_Small i {
    font-size: 14px;
    display: block;
}

.MNR_ToolbarButton_Small img {
    height: 14px;
    width: 14px;
    display: inline-block;
}

.MNR_ToolbarButton_Small:hover {
    background-color: #DADADA;
}

.MNR_ToolbarButton_Small_Disabled {
    pointer-events: none;
    opacity: 0.6;
}

i.MNR_ToolbarButton_Small_DropDownIndicator {
    font-size: 16px !important;
    float: right;
    position: relative;
    margin-top: -40px;
}


div.MNR_DropDownMenu {
    background-color: white;
    position: absolute;
    box-shadow: rgba(64, 64, 64, 0.8) 3px 3px 5px;
    border: 1px solid #f7f7f7;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    width: 250px;
    z-index: 10;
    left: 0;
    top: 40px;
    font-size: 11pt;
    padding: 5px;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


div.MNR_HelpMenu {
    background-color: white;
    position: absolute;
    box-shadow: rgba(64, 64, 64, 0.8) 3px 3px 5px;
    border: 1px solid #f7f7f7;
    border-radius: 5px;
    width: auto;
    min-width: 250px;
    z-index: 60;
    font-size: 11pt;
    padding: 1px;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

ul.MNR_HelpMenu{
    list-style-image: none;
    list-style-type: none;
    padding: 0;
    line-height: 180%;
    margin: 2px;
    margin-top:5px;
}

li.MNR_HelpMenu {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 1px;
    padding: 4px;
    cursor: pointer;
    text-decoration: none;
    width: auto;
    white-space: nowrap;
    border-radius: 4px;
}

li.MNR_HelpMenu_Checked {
    background-color: #ebebeb;
}

li.MNR_HelpMenu_Parent {
    background-image: url('../images/Arrowhead-Right_24.png');
    background-repeat: no-repeat;
    background-position: right;
    background-size: 10px;
}

    ul.MNR_HelpMenu ul.MNR_HelpMenu {
        display: none;
    }

nav ul.MNR_HelpMenu li.MNR_HelpMenu:hover > ul.MNR_HelpMenu{
    display: inherit;
}

nav ul.MNR_HelpMenu ul.MNR_HelpMenu li.MNR_HelpMenu {
    width: 230px;
    float: none;
    display: list-item;
    position: relative;
}


li.MNR_HelpMenu_Separator {
    border-top: 1px solid #452e42;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

li.MNR_HelpMenu_Disabled {
    pointer-events: none;
    opacity:0.6;
}

li.MNR_HelpMenu:hover {
    background-color: rgb(247, 247, 247);
}

li.MNR_HelpMenuNoHover:hover {
    background-color: transparent;
}

a.MNR_HelpMenu {
    text-decoration: none;
    color: black;
}


input.MNR_Border_Input {
    width: 52px;
    text-align: center;
    color: gray;
    height: 28px;
    border: 1px solid #dddddd;
    border-radius: 3px;
    background-color: #ffffff;
    box-sizing: border-box;
}

    input.MNR_Border_Input:focus {
        outline: none;
        border-color: #b8b8b8;
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
    }

table.MNR_Border_Input {
    border-collapse: collapse;
    border-radius: 5px;
    margin-left: auto;
    margin-right: auto;
}

td.MNR_Border_Input {
    font-size: 10px;
    text-align: center;
    color: gray;
    padding: 0;
}


div.MNR_PopupBox_ModalBackground {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: rgba(0,0,0, .7);
    /* Modal overlays can be loaded inside a tab; keep them viewport-bound so the global navigation is blocked too. */
    position: fixed;
}

div.MNR_PopupBox {
    background-color: white;
    box-shadow: rgba(64, 64, 64, 0.8) 3px 3px 5px;
    border: 1px solid #f7f7f7;
    position: absolute;
    border-radius: 5px;
    top: 50%;
    left: 50%;
    z-index: 100;
    -webkit-animation: fadeIn 1.0s;
    animation: fadeIn 1.0s;
    box-sizing: border-box;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* The compact save/status badge is not a dialog and must keep its original fixed size without a scrollbar. */
#DIVPopupTinyLoadingPanel {
    box-sizing: content-box;
    max-width: none;
    max-height: none;
    overflow: hidden;
    overscroll-behavior: auto;
    -webkit-overflow-scrolling: auto;
}

div.MNR_PopupBox_Hidden {
    display: none;
}

div.MNR_PopupBox_Content {
    float: left;
    margin-left: auto;
    margin-right: auto;
    padding: 14px;
    width: calc(100% - 28px);
    box-sizing: border-box;
}

.MNR_FormPages_ProgressVisibility {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
}

/* Shared dialog option: keeps destructive secondary choices neutral until the user actively selects them. */
.MNR_DialogCheckboxOption {
    display: none;
    align-items: flex-start;
    gap: 10px;
    box-sizing: border-box;
    margin: 14px 0 4px;
    padding: 12px 14px;
    border: 1px solid #dedede;
    border-radius: 6px;
    background: #f7f7f7;
    color: #333;
    font-size: 14px;
    line-height: 1.45;
    cursor: pointer;
}

.MNR_DialogCheckbox {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: #ef3a23;
    cursor: pointer;
}

.MNR_DialogCheckbox:focus-visible {
    outline: 2px solid #2d6ea3;
    outline-offset: 2px;
}

/* Creation-only choices in CtrlPrompter use the same checkbox language as other shared dialogs. */
.MNR_PrompterCheckboxOptions {
    display: none;
    margin-top: 16px;
}

.MNR_PrompterCheckboxOption {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    box-sizing: border-box;
    margin: 0 0 8px;
    padding: 10px 12px;
    border: 1px solid #dedede;
    border-radius: 6px;
    background: #f7f7f7;
    color: #333;
    font-size: 14px;
    line-height: 1.45;
    cursor: pointer;
}

.MNR_PrompterCheckboxOption_Disabled {
    color: #666;
    cursor: default;
}

/* Keeps long server messages and identifiers inside the shared message dialogs. */
#CtrlMessageBox_MessageBox_Box,
#CtrlMessageBox_YesNo_Box,
#CtrlMessageBox_YesNoCancel_Box {
    box-sizing: border-box;
    max-width: calc(100vw - 32px);
}

.MNR_FormFieldMappingDialog {
    width: min(760px, calc(100vw - 32px));
}

.MNR_FormFieldMappingClose {
    border: 0;
    background: transparent;
}

.MNR_FormFieldMappingContent {
    padding: 20px 24px 24px;
}

.MNR_FormFieldMappingDescription {
    margin: 0 0 18px;
    color: #4b5563;
    line-height: 1.45;
}

.MNR_FormFieldMappingTableViewport {
    max-height: min(48vh, 430px);
    overflow: auto;
    border: 1px solid #d8dee4;
    border-radius: 8px;
}

.MNR_FormFieldMappingTable {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.MNR_FormFieldMappingTable th,
.MNR_FormFieldMappingTable td {
    padding: 12px 14px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: top;
}

.MNR_FormFieldMappingTable th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f5f7f9;
    color: #4b5563;
    font-size: 13px;
    font-weight: 600;
}

.MNR_FormFieldMappingTable tr:last-child td {
    border-bottom: 0;
}

.MNR_FormFieldMappingFieldName {
    display: block;
    color: #22313d;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.MNR_FormFieldMappingType {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #edf3f6;
    color: #38566a;
    font-size: 12px;
}

.MNR_FormFieldMappingSelect,
.MNR_FormFieldMappingNewField {
    width: 100%;
    box-sizing: border-box;
}

.MNR_FormFieldMappingNewField {
    display: none !important;
    margin-top: 8px;
}

.MNR_FormFieldMappingRow--new .MNR_FormFieldMappingNewField:not([hidden]) {
    display: block !important;
}

.MNR_FormFieldMappingError {
    min-height: 20px;
    margin: 10px 0 0;
    color: #a1261d;
    font-size: 13px;
}

.MNR_FormFieldMappingActions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 14px;
}

.MNR_FormFieldMappingActions button {
    width: auto;
    min-width: 190px;
    margin: 0;
}

.MNR_FormFieldMappingWarning {
    outline: 2px solid #d99b24 !important;
    outline-offset: 3px;
}

@media (max-width: 640px) {
    .MNR_FormFieldMappingContent {
        padding: 16px;
    }

    .MNR_FormFieldMappingTable,
    .MNR_FormFieldMappingTable tbody,
    .MNR_FormFieldMappingTable tr,
    .MNR_FormFieldMappingTable td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .MNR_FormFieldMappingTable thead {
        display: none;
    }

    .MNR_FormFieldMappingTable td:first-child {
        padding-bottom: 5px;
        border-bottom: 0;
    }

    .MNR_FormFieldMappingTable td:last-child {
        padding-top: 5px;
    }

    .MNR_FormFieldMappingActions {
        flex-direction: column-reverse;
    }

    .MNR_FormFieldMappingActions button {
        width: 100%;
    }
}

p.MNR_MessageBox_Text {
    box-sizing: border-box;
    max-height: min(50vh, 420px);
    max-width: 100%;
    overflow-wrap: anywhere;
    overflow-x: hidden;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

div.MNR_PopupBox_HeadingIcon {
    float: left;
    display: inline-block;
    padding: 15px 0 15px 15px;
    font-size: 15pt;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

div.MNR_PopupBox_Heading {
    float: left;
    padding: 15px;
    font-size: 15pt;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

button.MNR_PopupBox_CloseButton,div.MNR_PopupBox_CloseButton,div.MNR_PopupBox_HelpButton {
    float:right;
    width: 20px;
    margin-top: 15px;
    margin-right: 15px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: #D2D2D2;
    font-size: 15pt;
    background-color: transparent;  
    border: none;
}

    button.MNR_PopupBox_CloseButton:hover,div.MNR_PopupBox_CloseButton:hover,div.MNR_PopupBox_HelpButton:hover {
        color: black;
    }

.dropbtn {
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    z-index: 100;
}

.dropdown-content.MNR_MenuButton_Open {
    display: block;
}

.dropdown-content[hidden] {
    display: none;
}

/* Links inside the dropdown */
.dropdown-content a {
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
   
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

.MNR_TopMenuButtonDropdown:hover > .dropdown-content[hidden] {
    display: none;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    
}
/*End of Profile Box*/

#Default_HelpMenu {
}


/*Tab Buttons for multi tab windows*/

.MNR_TabButton, .MNR_TabButton_Selected {
    display: table-cell;
    color: #331A30;
    background-color: white;
    background-color: rgba(181, 173, 173, 0.2);
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 12px;
    padding-top: 12px;
    border: 0;
    margin: 0;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    font-size: 12pt;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    user-select:none;
}

.MNR_TabButton:hover {
    background-color: rgba(181, 173, 173, 0.5);
}

.MNR_TabButton_Selected {
    background-color: #4573a2;
    color: white;
}

/* Keeps compact dialog tab rows visually separated without relying on HTML whitespace. */
.MNR_TabButtonRow {
    align-items: flex-end;
    display: flex;
    gap: 2px;
}

.MNR_TabButtonRow > .MNR_TabButton,
.MNR_TabButtonRow > .MNR_TabButton_Selected {
    display: block;
}


.FormPublish_Tab {
    border: 1px solid rgba(181, 173, 173, 0.7);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    padding: 16px;
    margin-top: -2px;
    margin-left: 2px;
}

/* Keeps the desktop account editor compact while its active tab owns any required vertical scrolling. */
#CtrlUserEdit_DialogEditUser_Box {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 32px);
    height: min(820px, calc(100dvh - 32px));
    overflow: hidden;
}

#CtrlUserEdit_DialogEditUser_Box > .MNR_PopupBox_Heading {
    flex: 0 0 auto;
    padding-right: 50px;
}

/* The account editor's column layout ignores the shared float; keep close in the heading row. */
#CtrlUserEdit_DialogEditUser_Box > .MNR_PopupBox_CloseButton {
    position: absolute;
    top: 15px;
    right: 15px;
    margin: 0;
}

#CtrlUserEdit_DialogEditUser_Box > .MNR_PopupBox_Content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    float: none;
    min-height: 0;
    overflow: hidden;
}

.CtrlUserEdit_AccountSummary,
#CtrlUserEdit_TabContainer,
#CtrlUserEdit_BSaveAccount {
    flex: 0 0 auto;
}

.CtrlUserEdit_AccountSummary {
    flex-shrink: 1;
    min-height: 180px;
    overflow-x: auto;
    overflow-y: auto;
}

#CtrlUserEdit_Tab_Usage,
#CtrlUserEdit_Tab_Permissions {
    flex: 1 0 240px;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

#CtrlUserEdit_Tab_Permissions > fieldset:first-child > ul.MNR_SettingsCheckboxList {
    box-sizing: border-box;
    display: grid;
    gap: 4px 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    width: 100%;
}

#CtrlUserEdit_Tab_Permissions li.MNR_SettingsCheckboxList {
    display: block;
    margin-right: 0;
    min-width: 0;
}

#CtrlUserEdit_Tab_Permissions .mnr_checkbox_container_userpermission {
    box-sizing: border-box;
    width: auto;
}

@media only screen and (max-width: 720px) {
    #CtrlUserEdit_Tab_Permissions > fieldset:first-child > ul.MNR_SettingsCheckboxList {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 480px) {
    #CtrlUserEdit_Tab_Permissions > fieldset:first-child > ul.MNR_SettingsCheckboxList {
        grid-template-columns: minmax(0, 1fr);
    }
}

.DlgConnectionManager_Tab, .DlgConnectionManager_CreateConnection_Tab {
    border: 1px solid rgba(181, 173, 173, 0.7);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    padding: 16px;
    margin-top: -2px;
    margin-left: 0;
    
}

.DlgConnectionManager_Tab{
    width: 680px;
}

.DlgConnectionManager_CreateConnection_Tab{
    background-color: #f2f2f2;
    box-sizing: border-box;
    display: grid;
    gap: 10px;
    /* Prefer readable provider tiles; the dialog content may scroll vertically on compact iPad viewports. */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    width: 100%;
}

.DlgConnectionManager_CreateConnection_Selector{
    background-color: white; 
    text-align: center; 
    padding: 14px 10px;
    border-radius: 15px;
    box-sizing: border-box;
    display: block;
    margin: 0;
    min-width: 0;
    width: 100%;
    cursor: pointer;
    color: black;
    font-size: 13px;
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.DlgConnectionManager_CreateConnection_Selector > img {
    box-sizing: border-box;
    max-height: 60px;
    max-width: 100%;
    object-fit: contain;
}

.DlgConnectionManager_CreateConnection_Selector:hover{
    box-shadow: rgba(64, 64, 64, 0.8) 3px 3px 5px;
}

.DlgConnectionManager_CreateConnection_SelectorVariant {
    align-items: center;
    display: inline-flex;
    flex-direction: column;
    height: 97px;
    justify-content: flex-start;
    vertical-align: top;
}

.DlgConnectionManager_CreateConnection_SelectorVariant img {
    flex: 0 0 55px;
    height: 55px;
    margin: 0 0 4px;
    object-fit: contain;
    width: 55px;
}

.DlgConnectionManager_CreateConnection_SelectorVariantLabel {
    align-items: center;
    display: flex;
    justify-content: center;
    line-height: 18px;
    min-height: 38px;
    overflow-wrap: anywhere;
}

/* Keeps the connection catalog usable in the reduced visual viewport of iPad Safari. */
#DlgConnectionManager_CreateConnection_Box {
    width: min(680px, calc(100vw - 32px)) !important;
}

#DlgConnectionManager_CreateConnection_Box > .MNR_PopupBox_Content {
    clear: both;
    display: flex;
    flex-direction: column;
    float: none;
    max-height: calc(100vh - 88px);
    max-height: calc(100dvh - 88px);
    overflow: hidden;
}

/* Only the provider catalog scrolls; the dialog title and cancel action remain reachable. */
#DlgConnectionManager_CreateConnection_Box > .MNR_PopupBox_Content > div:first-child {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    touch-action: pan-y;
}

#DlgConnectionManager_CreateConnection_Box > .MNR_PopupBox_Content > .MNR_Button_Red {
    flex: 0 0 auto;
}

#DlgConnectionManager_CreateConnection_ConnectionSettings_tab_container {
    background: white;
    position: sticky;
    top: 0;
    z-index: 2;
}

#DlgConnectionManager_CreateConnection_ConnectionSettings_tab_container {
    align-items: stretch;
    flex-wrap: wrap;
}

#DlgConnectionManager_CreateConnection_ConnectionSettings_tab_container > .MNR_TabButton,
#DlgConnectionManager_CreateConnection_ConnectionSettings_tab_container > .MNR_TabButton_Selected {
    box-sizing: border-box;
    flex: 1 1 120px;
    padding: 10px 8px;
}

.DlgConnectionManager_ConnectorDownloadHint {
    background: #fff;
    border: 1px solid rgba(177, 43, 133, 0.2);
    border-radius: 6px;
    color: #555;
    font-size: 13px;
    line-height: 1.35;
    margin: 0 0 16px;
    padding: 12px 14px;
    text-align: left;
}

.DlgConnectionManager_ConnectorDownloadLink {
    align-items: center;
    color: #B12B85;
    display: inline-flex;
    font-size: 13px;
    font-weight: 600;
    gap: 5px;
    margin-top: 8px;
    text-decoration: none;
}

.DlgConnectionManager_ConnectorDownloadLink:hover {
    text-decoration: underline;
}

.spinner_icon {
    color: #fd00ba;
}


p.MNR_TextLabel, a.MNR_TextLabel, label.MNR_TextLabel, p.MNR_TextLabel_Error, label.MNR_InputLabel {
    margin: 0;
    padding: 0;
    font-size: 14px;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

label.MNR_InputLabel{
    display: inline-block;
    width: 200px;
    margin-top: 15px;
    margin-bottom: 15px;
}

p.MNR_TextLabel_Error{
    color: red;
}

.MNR_PasswordStrength {
    width: 220px;
    margin-top: 5px;
}

.MNR_PasswordStrength_Bar {
    width: 100%;
    height: 5px;
    background-color: #e5e5e5;
    border-radius: 3px;
    overflow: hidden;
}

.MNR_PasswordStrength_Fill {
    width: 0;
    height: 100%;
    transition: width 120ms ease-out, background-color 120ms ease-out;
}

.MNR_PasswordStrength_Text {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: #404040;
}

.MNR_PasswordStrength_TooShort .MNR_PasswordStrength_Fill,
.MNR_PasswordStrength_Weak .MNR_PasswordStrength_Fill {
    background-color: #c0392b;
}

.MNR_PasswordStrength_Medium .MNR_PasswordStrength_Fill {
    background-color: #d28b00;
}

.MNR_PasswordStrength_Strong .MNR_PasswordStrength_Fill {
    background-color: #23824d;
}

p.MNR_RequiredLabel {
    border-left: 3px solid #336699;
    padding-left: 3px;
}

.MNR_Bold {
    font-weight: bold;
}


p.MNR_Heading2 {
    font-size: 24px;
    color: #404040;
    margin: 0;
    padding: 0;
}

p.MNR_Heading3, div.MNR_Heading3 {
    font-size: 20px;
    color: gray;
    margin: 0;
    margin-bottom: 2px;
    padding: 0;
    font-weight: 500;
}

td.MNR_HeadingContainer {
    border-bottom: 1px solid gray;
    height: 30px;
    padding-bottom: 5px;
    width: 100%;
}

input.MNR_TextEdit, select.MNR_DropDownList, select.MNR_ListBox, textarea.MNR_TextArea, input.MNR_ColorPicker-input {
    padding: 8px;
    display: block;
    border: 1px solid #eee;
    width: 100%;
    font: inherit;
    font-size: 14px;
}


select.MNR_DropDownList {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-repeat: no-repeat;
    background-image: url(../images/Arrowhead-Top_24.png);
    background-position: center right;
    background-size: 10px;
    background-origin: content-box;
    background-color: white;
}

.MNR_Select-Container {
    position: relative;
    display: inline;
}

    .MNR_Select-Container:after {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        pointer-events: none;
    }

    .MNR_Select-Container:after {
        top: .3em;
        right: .75em;
        border: 1px solid #ccc;
        opacity: 0.5;
    }

select.MNR_DropDownList::-ms-expand {
    display: none;
}

.MNR_CheckboxLinked {
    background-color: white;
    color: gray;
    width: 50px;
    border: 1px solid #eee;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

    .MNR_CheckboxLinked:hover {
        background-color: rgb(247, 247, 247);
    }

.MNR_CheckboxLinkedSelected {
    background-color: rgba(245, 245, 245, 0.7);
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}


/*----------------------------------------------------------------------------------------------------------
  ****Splash screen***
  ----------------------------------------------------------------------------------------------------------
*/
.modalOverlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-transition: 0.6s;
}

    .modalOverlay.is-inactive {
        visibility: hidden;
        background: rgba(0, 0, 0, 0);
    }

    .modalOverlay.is-active {
        visibility: visible;
        background: rgba(0, 0, 0, 0.4);
    }

.modal {
    margin: 100px auto;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    background: #fff;
    width: 100px;
    padding: 0;
    -webkit-transition: 0.4s 0.6s;
}

.modalOverlay.is-inactive .modal {
    visibility: hidden;
    opacity: 0;
    -webkit-transform: scale(0.1);
}

.modalOverlay.is-active .modal {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale(1);
}

/*End of splash screen --------------------------------------------------------------------------------------*/


/*----------------------------------------------------------------------------------------------------------
  ****Buttons at the top of the screen***
  ----------------------------------------------------------------------------------------------------------
*/

.AccountButton {
    position: absolute;
    border-radius: 2px;
    right: 15px;
    top: 10px;
    z-index: 5;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: white;
    text-align: center;
    vertical-align: middle;
    font-size: medium;
    cursor: pointer;
    transition: visibility 0s, opacity 0.5s linear;
    visibility: hidden;
    opacity: 0;
}

.AccountButton_Visible {
    position: absolute;
    border-radius: 2px;
    right: 15px;
    top: 10px;
    z-index: 5;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: white;
    text-align: center;
    vertical-align: middle;
    font-size: medium;
    cursor: pointer;
    transition: visibility 0s, opacity 0.5s linear;
    visibility: visible;
    opacity: 1;
}

/*Cell of an item of the profile pop-up*/
.ProfileItemCell {
    height: 25px;
    vertical-align: middle;
    margin-left: 10px;
}

/*This cell definition is used in the forms to login, change the password, reset the password*/
.LoginCell {
    margin: 5px 5px 5px 5px;
    padding: 5px 5px 5px 5px;
    border: 0 solid gray;
}

/*End of Buttons at the top of the screen --------------------------------------------------------------------------------------*/


/*----------------------------------------------------------------------------------------------------------
 ***Custom Scrollbar***
    It only works in Chrome
---------------------------------------------------------------------------------------------------------- */

::-webkit-scrollbar {
    width: 12px;
    background-color: #331A30;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #555;
}

::-webkit-scrollbar-track {
    border-radius: 0;
    background-color: #F2F2F2;
}



/*------------------
*/

/*----------------------------------------------------------------------------------------------------------
 ***Dashboard Pages***
---------------------------------------------------------------------------------------------------------- */

#MNR_Tabs {
    width: 100%;
    margin-top: 0;
    border: 0 none;
    left: 0;
    background-color: white;
    display: block;
    position: relative;
    overflow: hidden;
}

.MNR_TabPage {
    width: 100%;
    margin: 0;
    padding-top: 0;
    border: 0 none;
    left: 0;
    background-color: white;
    box-sizing: border-box;
    overflow: hidden;
}

.MNR_HiddenTab{
    display: none;
}

.MNR_VisibleTab {
    display: block;
}

/*----------------------------------------------------------------------------------------------------------
 ***Dashboard tabs for managing documents***
---------------------------------------------------------------------------------------------------------- */
/*The list of options on the left of the dashboard screens*/
.MNR_Document_Option_Container {
    float: left;
    width: 170px;
    height: 100%;
    padding: 0;
    margin: 0;
    vertical-align: middle;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    flex: 0 0 170px;
}

@media only screen and (max-width: 1300px) {
    .MNR_Document_Option_Container {
        width: 120px;
        flex: 0 0 120px;
    }
}

div.DIV_Document_List_Container {
    overflow-y: hidden;
    overflow-x: hidden;
    margin-left: 20px;
    margin-right: 20px;
    flex: 1;
}

div.DIV_Document_List_Container_Label {
    float: left;
    font-size: 24pt;
    padding: 10px 5px 10px 5px;
}

div.DIV_Document_List_Container_Options {
    float: right;
    font-size: 20pt;
    padding: 10px 5px 10px 5px;
    vertical-align: middle;
}



/*The images of the main options on the left of the dashboard screens*/
.MNR_Document_Option_Image {
    width: 80px;
    height: 80px;
}

/*Flexbox that contains the different documents (newsletters, forms, autoresponses etc)*/
.MNR_Document_Options_FlexBox {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    margin: 10px;
    background-color: rgb(247, 247, 247);
    border-radius: 5px;
}

.DIV_MNR_Document_Selection_Element,.DIV_MNR_Document_Selection_Folder {
    font-size: 12pt;
    border: none;
    width: 250px;
    height: 270px;
    vertical-align: middle;
    text-align: center;
    margin: 10px;
    padding-top: 5px;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 15px;
    cursor: pointer;
    color: #383838;
    background-color: white;
    border-radius: 5px;
}

    .DIV_MNR_Document_Selection_Element:hover,.DIV_MNR_Document_Selection_Folder:hover {
        /* background-color: #2f5d8c;
        color: rgb(255, 233, 231);*/
        box-shadow: rgba(64, 64, 64, 0.8) 3px 3px 5px;
    }

.DIV_MNR_Document_Selection_Folder_DragOver {
    border: 2px dashed #d0d0d0;
    background-color: #d0d0d0;
}

.DIV_MNR_Document_Selection_Element_ImageHolder{
    margin-left: auto;
    margin-right: auto;
    width: 220px;
    height: 200px;
    padding: 0;
    margin-bottom: 5px;
    margin-top: 5px;
    border-radius: 7px;
    background-repeat: no-repeat;
    background-size: cover;
}

.DIV_MNR_Document_Selection_Element_Image_Container {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 220px;
    height: 200px;
    padding: 0;
}

img.DIV_MNR_Document_Selection_Element_Image {
    width: 200px;
    height: 180px;
    border-radius: 7px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
}

.MNR_SystemTemplate_LoadMoreSentinel {
    width: 100%;
    height: 1px;
}

.MNR_FormCatalog_Filters,
.MNR_NewsletterCatalog_Filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}

.MNR_FormCatalog_Filter,
.MNR_NewsletterCatalog_Filter {
    border: 1px solid #b8c4ce;
    border-radius: 16px;
    background: #fff;
    color: #284b63;
    cursor: pointer;
    font: inherit;
    padding: 6px 14px;
}

.MNR_FormCatalog_Filter:hover,
.MNR_FormCatalog_Filter:focus-visible,
.MNR_FormCatalog_Filter_Selected,
.MNR_NewsletterCatalog_Filter:hover,
.MNR_NewsletterCatalog_Filter:focus-visible,
.MNR_NewsletterCatalog_Filter_Selected {
    border-color: #284b63;
    background: #284b63;
    color: #fff;
}

.MNR_FormCatalog_Card {
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 310px;
    height: auto;
    font-family: inherit;
}

.MNR_FormCatalog_CardTitle,
.MNR_FormCatalog_CardDescription,
.MNR_FormCatalog_CardStatus {
    display: block;
    margin: 0 12px;
}

.MNR_FormCatalog_CardTitle {
    font-weight: 600;
}

.MNR_FormCatalog_CardStatusMultistep {
    color: #285b78;
}

.MNR_FormCatalog_CardDescription {
    margin-top: 6px;
    color: #59646d;
    font-size: 13px;
    line-height: 1.35;
}

.MNR_FormCatalog_CardStatus {
    margin-top: 7px;
    color: #77600b;
    font-size: 12px;
    font-weight: 600;
}

.MNR_FormCatalog_LegacySection {
    flex-basis: 100%;
    margin: 8px 10px 20px;
}

.MNR_FormCatalog_LegacySummary {
    color: #284b63;
    cursor: pointer;
    font-weight: 600;
    padding: 10px 0;
}

.MNR_FormCatalog_LegacySummary:focus-visible {
    outline: 2px solid #284b63;
    outline-offset: 3px;
}

.MNR_FormCatalog_LegacyCards {
    padding-top: 6px;
}

img.DIV_MNR_Report_Thumbnail_Image {
    width: 280px;
    height: 251px;
    border-radius: 2px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    margin-bottom: 10px;
}

.MNR_Document_Options_FlexBox {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    margin: 15px;
    background-color: rgb(247, 247, 247);
}

.MNR_Document_Selection_Container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    overflow-y: auto;
    overflow-x: no-content;
    justify-content: flex-start;
}


.MNR_Document_Selection_Heading{
    margin-left: auto; 
    margin-right: auto; 
    width: 100%; 
    text-align: left; 
    font-size: 28px; 
    padding-top: 20px; 
    padding-bottom: 10px;
    vertical-align: middle;
}

.MNR_List_Selection_Container {
    overflow-y: auto;
    overflow-x: auto;
    border-radius: 5px;
    clear:both;
   /* height: 82vh;  /*82 from hundred*/
}

.MNR_Document_Option {
    color: white;
    padding: 10px;
    height: 120px;
    width: 150px;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    padding-top: 10px;
    background-color: #336699;
}

    .MNR_Document_Option:hover {
        background-color: #2f5d8c;
    }

@media only screen and (max-width: 1300px) {
    .MNR_Document_Option {
        width: 100px;
    }
}

.MNR_Document_Option_Pressed {
    color: white;
    padding: 10px;
    height: 120px;
    width: 150px;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    padding-top: 10px;
    background-color: #4573a2;
}

@media only screen and (max-width: 1300px) {
    .MNR_Document_Option_Pressed {
        width: 100px;
    }
}


.DIV_MNR_Newsletter_Report_Card {
    font-size: 14pt;
    border: none;
    width: 300px;
    vertical-align: middle;
    text-align: center;
    margin: 10px;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 15px;
    color: #808080;
    border-radius: 5px;
    cursor: pointer;
    background-color: white;
}

.DIV_MNR_Newsletter_Report_Card:hover {
    box-shadow: rgba(64, 64, 64, 0.8) 3px 3px 5px;
}

.DIV_MNR_Newsletter_Report_Element {
    font-size: 12pt;
    border: none;
    width: 300px;
    height: 399px;
    vertical-align: middle;
    text-align: center;
    margin: 0;
    padding-top: 5px;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 15px;
    color: #808080;
    background-color: white;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    cursor: pointer;
}

.TABLE_MNR_Newsletter_Report_CardHeader {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    width: 100%;
    margin: 0;
    padding: 7px;
    color: white;
}

.DIV_MNR_Newsletter_Report_From {
    font-size: 14px;
    margin: 10px;
}

.DIV_MNR_Newsletter_Report_Subject {
    font-weight: bold;
    font-size: 14px;
    margin: 10px;
}

.DIV_MNR_Info_Pill {
    background-color: #F2F2F2;
    border-radius: 5px;
    padding: 5px 10px 5px 10px;
    color: #929292;
    font-size: 15px;
    width: max-content;
    margin-left: 10px;
    margin-right: 10px;
    display: inline-block;
    margin-top: 15px;
    margin-bottom: 5px;
}

/*Style of the control area that are located below a finished mailings*/
.MNR_RecentMailingControls {
    background-color: #336699;
    color: white;
    width: 220px;
    height: 40px;
    margin-top: 10px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

/*Style of the button to open the report of a finished mailing*/
.MNR_RecentMailingControl_Button {
    background-color: #336699;
    border: none;
    text-align: center;
    cursor: pointer;
}

    .MNR_RecentMailingControl_Button:hover {
        background-color: #2f5d8c;
    }
    
    
/*----------------------------------------------------------------------------------------------------------
 ***Styles for list of forms***
----------------------------------------------------------------------------------------------------------*/

div.MNR_FormItem_Container {
    width: 99%;
    background-color: white;
    border-radius: 5px;
    border: none;
    margin-top: 10px;
    margin-bottom: 10px;
}

div.MNR_FormItem_Container::after {
    content: "";
    display: block;
    clear: both;
}

/* Keep form cards content-sized inside the fixed-height, scrollable forms list.
   Without an explicit cross-axis alignment, a single flex row expands to the full viewport height. */
#DIV_FormsTab_MyForms {
    align-content: flex-start;
    align-items: flex-start;
}

div.MNR_FormItem_HeadingContainer{
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    height: 170px;
}

img.MNR_FormItem_Thumbnail{
    display: block;
    float: left;
    width: 180px;
    border-radius: 3px;
    margin: 10px;
}

div.MNR_FormItem_Heading{
    display: inline-block;
    font-size: 24px;
}

div.MNR_FormItem_Heading_MenuButton{
    float: right;
    font-size: 24px;
    display: block;
}

div.MNR_FormItem_Description{
    margin-top: 15px;
    margin-bottom: 25px;
}

div.MNR_FormItem_Statistics {
    padding: 18px 20px 22px;
    background: white;
}

#DIVFormReports_Container {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    background: #f7f7f7;
}

.MNR_FormReports_Toolbar {
    position: sticky;
    z-index: 2;
    top: 0;
    min-height: 72px;
    border-bottom: 1px solid #a9a9a9;
    background: white;
    text-align: left;
}

#DIVFormReports_Container[hidden] {
    display: none;
}

.MNR_FormReports_Page {
    width: min(840px, calc(100% - 40px));
    min-height: calc(100% - 112px);
    margin: 20px auto;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 5px;
    background: white;
}

#DIVForms {
    display: none;
}

.MNR_FormReportItem .Reporting_JobItem_PreviewImage {
    border-radius: 5px;
    object-fit: cover;
    background: white;
}

.MNR_FormReportItem .Reporting_JobItem_Description_Container {
    padding-top: 12px;
    box-sizing: border-box;
}

.MNR_FormReportList_Empty {
    margin: 18px 10px;
    color: #637180;
    line-height: 1.45;
}

.MNR_FormStatistics_Header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
    font-size: 20px;
}

.MNR_FormStatistics_Header select {
    width: 190px;
    font-size: 14px;
}

.MNR_FormStatistics_HeaderActions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.MNR_FormStatistics_Custom {
    display: flex;
    align-items: end;
    gap: 12px;
    margin: -4px 0 16px;
}

.MNR_FormStatistics_Custom[hidden] {
    display: none;
}

.MNR_FormStatistics_Custom label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #637180;
    font-size: 13px;
}

.MNR_FormStatistics_Custom input {
    min-height: 34px;
    padding: 4px 8px;
    border: 1px solid #cdd5dd;
    border-radius: 4px;
}

.MNR_FormStatistics_Kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.MNR_FormStatistics_Kpi {
    display: flex;
    min-height: 70px;
    padding: 12px;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #dde3e9;
    border-radius: 8px;
    background: white;
}

.MNR_FormStatistics_Kpi span,
.MNR_FormStatistics_Footnote {
    color: #637180;
    font-size: 13px;
}

.MNR_FormStatistics_Kpi strong {
    margin-top: 6px;
    color: #22313d;
    font-size: 24px;
}

.MNR_FormStatistics_Funnel {
    margin-top: 20px;
}

.MNR_FormStatistics_Trend {
    margin-top: 20px;
}

.MNR_FormStatistics_TrendBars {
    display: flex;
    align-items: end;
    gap: 3px;
    height: 110px;
    margin-top: 10px;
    padding: 8px 6px 0;
    border-bottom: 1px solid #cdd5dd;
}

.MNR_FormStatistics_TrendBars > span {
    position: relative;
    flex: 1 1 0;
    height: 100%;
    min-width: 2px;
}

.MNR_FormStatistics_TrendBars i,
.MNR_FormStatistics_TrendBars b {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    border-radius: 2px 2px 0 0;
}

.MNR_FormStatistics_TrendBars i {
    background: #b9d3e3;
}

.MNR_FormStatistics_TrendBars b {
    background: #2f617f;
}

.MNR_FormStatistics_Legend {
    display: flex;
    gap: 18px;
    margin-top: 8px;
    color: #637180;
    font-size: 12px;
}

.MNR_FormStatistics_Legend i,
.MNR_FormStatistics_Legend b {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    border-radius: 2px;
    vertical-align: -2px;
    background: #b9d3e3;
}

.MNR_FormStatistics_Legend b {
    background: #2f617f;
}

.MNR_FormStatistics_Table {
    margin-top: 12px;
    color: #637180;
    font-size: 13px;
}

.MNR_FormStatistics_Table summary {
    cursor: pointer;
}

.MNR_FormStatistics_Table table {
    width: 100%;
    margin-top: 8px;
    border-collapse: collapse;
    color: #22313d;
}

.MNR_FormStatistics_Table th,
.MNR_FormStatistics_Table td {
    padding: 6px 8px;
    border-bottom: 1px solid #dde3e9;
    text-align: right;
}

.MNR_FormStatistics_Table th:first-child,
.MNR_FormStatistics_Table td:first-child {
    text-align: left;
}

.MNR_FormStatistics_FunnelRow {
    display: grid;
    grid-template-columns: minmax(130px, 220px) 1fr 70px;
    align-items: center;
    gap: 12px;
    margin-top: 9px;
}

.MNR_FormStatistics_FunnelRow small {
    grid-column: 2 / 4;
    color: #637180;
    font-size: 12px;
}

.MNR_FormStatistics_FunnelRow > div {
    height: 12px;
    overflow: hidden;
    border-radius: 6px;
    background: #e8edf2;
}

.MNR_FormStatistics_FunnelRow i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #2f617f;
}

.MNR_FormStatistics_FunnelRow b {
    text-align: right;
}

.MNR_FormStatistics_Footnote,
.MNR_FormStatistics_Empty,
.MNR_FormStatistics_Loading {
    margin-top: 16px;
}

@media only screen and (max-width: 600px) {
    .MNR_FormReports_Page {
        width: calc(100% - 20px);
        margin: 10px auto;
    }

    div.MNR_FormItem_Statistics {
        padding: 16px 14px 20px;
    }

    .MNR_FormStatistics_Header {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .MNR_FormStatistics_HeaderActions {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .MNR_FormStatistics_Header select {
        width: 100%;
        min-width: 0;
    }

    .MNR_FormStatistics_Kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .MNR_FormStatistics_FunnelRow {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 5px 10px;
        margin-top: 14px;
    }

    .MNR_FormStatistics_FunnelRow > span {
        grid-column: 1;
    }

    .MNR_FormStatistics_FunnelRow > b {
        grid-column: 2;
        grid-row: 1;
    }

    .MNR_FormStatistics_FunnelRow > div {
        grid-column: 1 / 3;
        grid-row: 2;
    }

    .MNR_FormStatistics_FunnelRow small {
        grid-column: 1 / 3;
        grid-row: 3;
    }
}

div.MNR_FormItem_Autoresponses{
    display: block;
    width: 100%;
    border-top: 1px solid rgb(247, 247, 247);
}

div.MNR_FormItem_Autoresponses_Heading{
    display: inline-block;
    font-size: 20px;
    margin: 15px;
}

table.MNR_FormItem_AutoresponseTable{
    margin-top: 2px;
    margin-bottom: 15px;
    width: 100%;
    border-spacing: 0;
}

tr.MNR_FormItem_AutoresponseHeader{
    cursor: pointer;
}

img.MNR_FormItem_AutoresponseLine_Image{
    width: 30px;
    border-radius: 50%;
    margin-left: 15px;
}

th.MNR_FormItem_AutoresponseLine{
    padding: 5px;
    opacity: 0.6;
    text-align: left;
}

tr.MNR_FormItem_AutoresponseLine{
    cursor: pointer;
    padding: 5px;
    text-align: left;
}

td.MNR_FormItem_AutoresponseCell{
    cursor: pointer;
    padding: 5px;
    text-align: left;
}

tr.MNR_FormItem_AutoresponseLine:hover{
    background-color: rgb(247, 247, 247);
}


/*----------------------------------------------------------------------------------------------------------
 ***Styles for loading email drafts***
---------------------------------------------------------------------------------------------------------- */

/*This style is a container that shows an email draft item for selection in the Load Draft Dialog*/
.Select_EmailDraft_DIV {
    display: inline-block;
    margin: 5px 5px 5px 5px;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    background-color: white;
    border-radius: 5px;
    box-shadow: rgba(128, 128, 128, 0.4) 1px 1px 3px;
    cursor: pointer;
}

.Select_EmailDraft_DIV:hover {
    background-color: rgb(15, 115, 186);
    color: rgb(255, 233, 231);
}

/*Table that is within the DIV*/
table.Select_EmailDraft_Item {
    width: 200px;
    border: 0 solid gray;
}

/*Thumbnail of the email draft*/
td.EmailDraft_Thumbnail {
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px;
}

/*Label of the email draft*/
.EmailDraft_Label {
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    text-align: center;
}

/*Description of the email draft*/
.EmailDraft_Description {
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    text-align: center;
    font-style: italic;
    opacity: 0.5;
}

/*Selector if the drafts shall be ordered by Date or Alphabetically*/
/*Row of buttons*/
ul.ButtonRow {
    display: inline-flex;
    margin: 0 auto;
    padding: 0; /* Remove default padding */
    border: 1px solid #B4ABB3;
    border-radius: 5px;
    list-style-type: none; /* Remove default bullet points */
}

li.ButtonRowItem {
    display: flex;
    align-items: center; /* Vertically center the content */
    justify-content: center; /* Horizontally center the content */
    padding: 10px 20px;
    text-align: center;
    color: #452e42;
    cursor: pointer;
    font-size: 16px;
    border-radius: 0;
}

li.ButtonRowItem:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

li.ButtonRowItem:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

li.ButtonRowItem:hover {
    background-color: #331a30;
    color: white;
}

li.ButtonRowItem.ButtonRowItem_Search:hover {
    background-color: transparent;
    color: #452e42;
}

.DraftSearchInputWrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.DraftSearchInputWrapper .MNR_TextEdit {
    padding-right: 30px;
}

.DraftSearchInputIcon {
    position: absolute;
    right: 10px;
    font-size: 14px;
    line-height: 1;
    color: #6f5a6d;
    pointer-events: none;
}

li.ButtonRowItem_Selected {
    background-color: #452e42;
    color: white;
    cursor: pointer;
}

i.ButtonRowItem_DropDownIndicator {
    font-size: 16px !important;
    padding-left: 10px;
    float: right;
    position: relative;
}



/*Table that contains the items. It is aligned to the right*/
.TABLE_EmailDraftsSelector {
    margin-left: auto;
    margin-right: 0;
    border: 1px solid #B4ABB3;  /*This is a very bright shade of #331a30 */
    border-radius: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-spacing: 0;
    font-size: 16px;
}

/* Template and draft pickers use the available dialog height instead of a fixed desktop-only list size. */
#DlgPopupTemplates_Box,
#DlgEmailDrafts_Box {
    width: min(860px, calc(100vw - 32px)) !important;
}

#DlgPopupPastVersions_Box {
    width: min(960px, calc(100vw - 32px)) !important;
}

#DlgPopupTemplates_Box .MNR_PopupBox_Content,
#DlgEmailDrafts_Box .MNR_PopupBox_Content,
#DlgPopupPastVersions_Box .MNR_PopupBox_Content {
    clear: both;
    float: none;
}

#DlgPopupTemplates_Box .MNR_Document_Selection_Heading,
#DlgEmailDrafts_Box .MNR_Document_Selection_Heading {
    width: 100%;
}

#DIV_EmailTemplates,
#DIV_EmailDrafts,
#DIV_EmailPastVersions {
    height: min(500px, calc(100vh - 240px)) !important;
    height: clamp(220px, calc(100dvh - 240px), 500px) !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

@media only screen and (max-width: 720px) {
    #DlgPopupTemplates_Box .MNR_Document_Selection_Heading tr,
    #DlgPopupTemplates_Box .MNR_Document_Selection_Heading td,
    #DlgEmailDrafts_Box .MNR_Document_Selection_Heading tr,
    #DlgEmailDrafts_Box .MNR_Document_Selection_Heading td {
        box-sizing: border-box;
        display: block;
        width: 100%;
    }

    #DlgPopupTemplates_Box .TABLE_EmailDraftsSelector {
        margin: 6px 0 0;
        table-layout: fixed;
        width: 100%;
    }
}

.TD_EmailDraftsSelector {
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    width: 180px;
    height: 35px;
    color: #452e42;
    cursor: pointer;
}

    .TD_EmailDraftsSelector:hover {
        background-color: #331a30;
        color: white;
    }

.TD_EmailDraftsSelector_Selected {
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    width: 180px;
    height: 35px;
    background-color: #452e42;
    color: white;
    cursor: pointer;
}


/*End of email draft select---------------------------------------------------------------------------------*/


/*----------------------------------------------------------------------------------------------------------
  ****Email Editor***
  ----------------------------------------------------------------------------------------------------------
*/

div.EmailEditor_Element{
    
}

/*Div that holds the menu bar of the newsletter editor*/
div.CtrlNewsletterEditorMenuBar_Holder {
    position: relative;
    box-shadow: -3px 3px 3px 0 rgba(181, 173, 173, 0.7);
    -moz-box-shadow: -3px 3px 3px 0 rgba(181, 173, 173, 0.7);
    -webkit-box-shadow: -3px 3px 3px 0 rgba(181, 173, 173, 0.7);
}

/*The div that contains the newsletter editor*/
div.DivEditor {
    width: 100%;
    background-color: white;
    float: none;
}

/*Status bar at the bottom of the email editor*/
#EmailDesigner_StatusBar {
    display: block; background-color: white; font-size: 11px; height: 20px; padding: 3px 24px 3px 3px; text-align: right; color: #331A30; box-sizing: border-box;
}

/*Contains the newsletter editor*/
.NewsletterEditingDIV {
    background-color: white;
    vertical-align: middle;
    margin-left: 0;
    margin-right: 5px;
    margin-bottom: 0;
    margin-top: 0;
    padding-top: 0;
    overflow: scroll;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    zoom: 1.0;
}

/* Side-panel scrolling must stop at the editor boundary instead of moving the complete application. */
#DIV_NewsletterElements,
#StyleEdit_Controls {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/*This defined the look of pop-up buttons, e.g. for moving an element or opening the menu*/
.DIV_ElementMenuStyle {
    padding: 2px;
    visibility: hidden;
    cursor: pointer;
    position: absolute;
    border: 1px solid gray;
    border-radius: 3px 3px;
    background-color: white;
    opacity: 1.0;
    /*z-index: 30;*/
}

button.DIV_ElementMenuStyle {
    appearance: none;
    -webkit-appearance: none;
    line-height: 0;
}

button.DIV_ElementMenuStyle > img {
    display: block;
}

/* Touch-specific editor controls keep the desktop chrome compact while providing iPad-sized tap targets. */
@media (hover: none), (pointer: coarse) {
    [data-mnr-toolbar].MNR_Toolbar {
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
    }

    [data-mnr-toolbar].MNR_Toolbar > .MNR_ToolbarButton {
        min-width: 82px;
        min-height: 52px;
        scroll-snap-align: start;
    }

    #CtrlNewsletterEditorMenubar_Toolbar .MNR_ToolbarSplitButton_Menu {
        flex-basis: 44px;
        width: 44px;
    }

    #CtrlStyleEdit_TextStyleToolbar,
    #CtrlStyleEdit_ToolbarParagraph {
        display: flex;
        flex-wrap: wrap;
        gap: 2px;
    }

    #CtrlStyleEdit_TextStyleToolbar > .MNR_ToolbarButton_Small,
    #CtrlStyleEdit_ToolbarParagraph > .MNR_ToolbarButton_Small {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        flex-basis: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        margin: 0;
        width: 40px;
    }

    /* Keep all font actions on one row while retaining targets above the 24px WCAG minimum. */
    #CtrlStyleEdit_TextStyleToolbar {
        flex-wrap: nowrap;
    }

    #CtrlStyleEdit_TextStyleToolbar > .MNR_ToolbarButton_Small {
        flex: 1 1 34px;
        max-width: 40px;
        min-width: 32px;
        width: auto;
    }

    #DIV_ElementMenu,
    #DIV_MoveElementMenu {
        box-sizing: content-box;
        width: 24px;
        height: 24px;
        padding: 10px;
        z-index: 65;
    }

    #CtrlNewsletterEditor_MenuElementOptions,
    #CtrlNewsletterEditor_SubMenuMoveElement,
    #CtrlNewsletterEditor_SubMenuLockElement {
        width: min(320px, calc(100vw - 16px)) !important;
        max-height: calc(100vh - 16px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    #CtrlNewsletterEditor_MenuElementOptions li.MNR_HelpMenu,
    #CtrlNewsletterEditor_SubMenuMoveElement li.MNR_HelpMenu,
    #CtrlNewsletterEditor_SubMenuLockElement li.MNR_HelpMenu {
        display: flex;
        align-items: center;
        min-height: 44px;
        box-sizing: border-box;
        margin: 2px 6px;
        padding: 9px 10px;
        font-size: 16px;
    }

    #CtrlNewsletterEditorMenuBar_Holder div.MNR_HelpMenu,
    #DIV_EditControls div.MNR_HelpMenu {
        max-width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    #CtrlNewsletterEditorMenuBar_Holder li.MNR_HelpMenu,
    #DIV_EditControls li.MNR_HelpMenu {
        min-height: 44px;
        box-sizing: border-box;
        padding-top: 9px;
        padding-bottom: 9px;
        font-size: 16px;
    }

    .MNR_EditorToolbar_OverflowAction {
        min-height: 44px;
        font-size: 16px;
    }
}


/*Animation to slide in from the left side*/
div.AnimateSlideIn {
    /*Animation*/
    -webkit-transition: left 1s ease;
    -moz-transition: left 1s ease;
    -o-transition: left 1s ease;
    -ms-transition: left 1s ease;
    transition: left 1s ease;
}

/*Animation to slide in from the right side*/
div.AnimateSlideInRight {
    /*Animation*/
    -webkit-transition: right 1s ease;
    -moz-transition: right 1s ease;
    -o-transition: right 1s ease;
    -ms-transition: right 1s ease;
    transition: right 1s ease;
}

/*Div that contains the elements*/

div.DivElements {
    position: absolute;
    border-top: 5px solid white;
    border-bottom: 5px solid white;
    border-right: 5px solid white;
    width: 360px;
    left: 1px;
    top: 78px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 1px 3px 3px 0 rgba(181, 173, 173, 0.7);
    -moz-box-shadow: 1px 3px 3px 0 rgba(181, 173, 173, 0.7);
    -webkit-box-shadow: 1px 3px 3px 0 rgba(181, 173, 173, 0.7);
    background-color: #5b9bd5;
    background-color: #336699;
}

/*Style of the list of elements pane when it is hidden*/
div.DivElementsHidden {
    position: absolute;
    border-right: 5px solid white;
    border-bottom: 5px solid white;
    top: 78px;
    width: 360px;
    left: -360px;
    box-shadow: 1px 3px 3px 0 rgba(181, 173, 173, 0.7);
    -moz-box-shadow: 1px 3px 3px 0 rgba(181, 173, 173, 0.7);
    -webkit-box-shadow: 1px 3px 3px 0 rgba(181, 173, 173, 0.7);
    background-color: #336699;
}


/*Smaller Elements on smaller resolution screens*/
@media screen and (max-width: 1440px) {
    DIV.DivElements {
        width: 264px;
    }

    /*Style of the list of elements pane when it is hidden*/
    div.DivElementsHidden {
        width: 264px;
        left: -264px;
    }
}

/*Background color of the elements pane when the document is a newsleteter*/
div.NewsletterElements_Background {
    background-color: #336699;
}

/*Contains a list of elements*/

.Newsletter_Element_List {
    background-color: transparent;
    width: 100%;
    padding: 10px 8px 10px 8px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
    justify-content: flex-start;
}

@media screen and (max-width: 1440px) {
    .Newsletter_Element_List {
        padding: 8px 6px 8px 6px;
        gap: 6px;
    }
}

/*Heading of a list of elements*/
.Newsletter_Element_List_Heading {
    width: 100%;
    vertical-align: middle;
    font-size: large;
    color: #666666;
    padding-left: 15px;
    padding-top: 7px;
    padding-bottom: 7px;
    background-color: white;
    border-bottom: 1px solid gray;
    cursor: pointer;
}

    .Newsletter_Element_List_Heading:hover {
        background-color: #fafafa;
    }
    

/*Visible list of elements*/
.Newsletter_Element_List_visible {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
    justify-content: flex-start;
    max-height: 100000px;
    box-sizing: border-box;
    padding: 10px 8px 10px 8px;
    -webkit-transition: height 1s ease;
    -moz-transition: height 1s ease;
    -o-transition: height 1s ease;
    -ms-transition: height 1s ease;
    transition: height 1s ease;
    width: 100%;
}

@media screen and (max-width: 1440px) {
    .Newsletter_Element_List_visible {
        padding: 8px 6px 8px 6px;
        gap: 6px;
    }
}

/*Hidden list of elements*/
.Newsletter_Element_List_hidden {
    display: block;
    height: 0;
    overflow: hidden;
    -webkit-transition: height 1s ease;
    -moz-transition: height 1s ease;
    -o-transition: height 1s ease;
    -ms-transition: height 1s ease;
    transition: height 1s ease;
    width: 100%;
}

    /*Image item of the list of elements*/
    .Newsletter_Element_List_Item {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center center;
        display: block;
        margin-left: auto;
        margin-right: auto;
        -webkit-user-drag: none;
        -webkit-user-select: none; /* Safari */
        -ms-user-select: none; /* IE 10 and IE 11 */
        user-select: none; /* Standard syntax */
        touch-action: pan-y; /* Keep sidebar scrolling, while horizontal iPad drags use Pointer Events. */
        border-radius: 6px;
        
    }


    @media screen and (max-width: 1440px) {
        /*Image item of the list of elements*/
        .Newsletter_Element_List_Item_FullSize {
            width: 100%;
        }
    }

    .Newsletter_Element_List_Item:hover {
        box-shadow: none;
    }

    /*Half size list item*/
    @media screen and (max-width: 1440px) {
        /*Image item of the list of elements*/
        .Newsletter_Element_List_Item_HalfSize {
            width: 90px;
        }
    }

.Newsletter_Element_List_Tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc((100% - 16px) / 3);
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    padding: 2px;
    background-color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 8px;
    overflow: hidden;
    -webkit-user-drag: element;
    -webkit-user-select: none;
    user-select: none;
    touch-action: pan-y;
}

.Newsletter_Element_List_Tile_Loading::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(51, 102, 153, 0.18);
    border-top-color: rgba(51, 102, 153, 0.78);
    border-radius: 50%;
    animation: Newsletter_Element_Thumbnail_Loading 0.8s linear infinite;
}

.Newsletter_Element_List_Tile_Loading .Newsletter_Element_List_Item {
    opacity: 0;
}

.Newsletter_Element_List_Tile .Newsletter_Element_List_Item {
    transition: opacity 0.15s ease;
}

@keyframes Newsletter_Element_Thumbnail_Loading {
    to {
        transform: rotate(360deg);
    }
}

@media screen and (max-width: 1440px) {
    .Newsletter_Element_List_Tile {
        width: calc((100% - 12px) / 3);
        padding: 2px;
    }
}

.Newsletter_Element_List_Tile:hover {
    background-color: #f7f9fb;
    border-color: rgba(70, 96, 128, 0.35);
    cursor: grab;
}

body.mnrEditorPointerDragging,
body.mnrEditorPointerDragging * {
    cursor: grabbing !important;
}

/* The original element remains as a quiet landmark while its compact drag card is moving. */
.MNR_Editor_DragSource {
    opacity: 0.28 !important;
    outline: 2px dashed rgba(39, 117, 201, 0.72) !important;
    outline-offset: -2px;
}

/* These temporary transforms open a visible landing gap without changing newsletter layout or persisted styles. */
.MNR_Editor_DropNeighborAbove {
    position: relative;
    z-index: 1;
    transform: translateY(-8px) !important;
}

.MNR_Editor_DropNeighborBelow {
    position: relative;
    z-index: 1;
    transform: translateY(8px) !important;
}

.MNR_Editor_CompactDragCard::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 15px;
    background:
        radial-gradient(circle, rgba(39, 117, 201, 0.8) 1.2px, transparent 1.6px) 3px 3px / 6px 6px,
        linear-gradient(180deg, rgba(227, 240, 253, 0.98), rgba(211, 231, 251, 0.98));
    border-right: 1px solid rgba(39, 117, 201, 0.28);
}

/* Pointer-driven feedback stays outside the newsletter DOM so target geometry does not jump while moving. */
#MNR_Editor_DropContainerIndicator {
    z-index: 99999;
    display: none;
    box-sizing: border-box;
    pointer-events: none;
    border: 1px solid rgba(39, 117, 201, 0.42);
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

#MNR_Editor_DropSideMarker {
    z-index: 100001;
    display: none;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    pointer-events: none;
    background: #2775c9;
    border: 2px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(28, 74, 123, 0.38);
}

#MNR_Editor_DropSideMarker::after {
    content: "";
    position: absolute;
    top: 3px;
    width: 0;
    height: 0;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
}

#MNR_Editor_DropSideMarker[data-side="left"]::after {
    left: 5px;
    border-left: 5px solid #ffffff;
}

#MNR_Editor_DropSideMarker[data-side="right"]::after {
    right: 5px;
    border-right: 5px solid #ffffff;
}

#MNR_Editor_DropIndicator {
    position: fixed;
    z-index: 100001;
    display: none;
    height: 20px;
    box-sizing: border-box;
    pointer-events: none;
    overflow: hidden;
    color: #18558f;
    background: rgba(226, 240, 254, 0.94);
    border: 0;
    border-top: 3px solid #2775c9;
    border-bottom: 3px solid #2775c9;
    border-radius: 0;
    box-shadow: 0 3px 9px rgba(28, 74, 123, 0.22);
    font: 600 11px/14px Arial, sans-serif;
    letter-spacing: 0.01em;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.Newsletter_Element_List_Item_Centered {
    margin: 10px;
}

/* Element List item float left/right*/
@media screen and (min-width: 1440px) {
    /*Image item of the list of elements*/
    .Newsletter_Element_List_Item_FloatLeft {
        display: block; 
        float: left; 
        margin-left: 20px; 
        margin-right: 0;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .Newsletter_Element_List_Item_FloatRight {
        display: block; 
        float: right; 
        margin-right: 20px; 
        margin-left: 0;
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

/* Element List item float left/right*/
@media screen and (max-width: 1440px) {
    /*Image item of the list of elements*/
    .Newsletter_Element_List_Item_FloatLeft {
        display: block;
        margin: 10px;
    }

    .Newsletter_Element_List_Item_FloatRight {
        display: block;
        margin: 10px;
    }
}

    /*Animation of the list of elements*/
div.EmailEditor_Animate {
    /*Animation*/
    -webkit-transition: margin-left 1s ease;
    -moz-transition: margin-left 1s ease;
    -o-transition: margin-left 1s ease;
    -ms-transition: margin-left 1s ease;
    transition: margin-left 1s ease;
}

    div.EmailEditor_AnimateRight {
        -webkit-transition: margin-right 1s ease;
        -moz-transition: margin-right 1s ease;
        -o-transition: margin-right 1s ease;
        -ms-transition: margin-right 1s ease;
        transition: margin-right 1s ease;
    }

    /*These two styles define the appearance of the button for showing and hiding the list of elements*/
    div.LeftHideShowButtonExpanded {
        background-color: white;
        border: 1px solid #e1e1e1;
        width: 35px;
        height: 40px;
        vertical-align: middle;
        text-align: center;
        cursor: pointer;
        border-bottom-right-radius: 5px;
        border-top-right-radius: 5px;
        border-left: 0 none;
        top: 113px;
        margin-left: 365px;
        background-image: url("../images/DoubleArrowLeft_32x32.png");
        background-repeat: no-repeat;
        background-position-x: center;
        background-position-y: center;
        position: absolute;
        z-index: 50;
    }

@media screen and (max-width: 1440px) {
    div.LeftHideShowButtonExpanded {
        margin-left: 269px;
    }
}

    div.LeftHideShowButtonHidden {
        background-color: white;
        border: 1px solid #e1e1e1;
        width: 35px;
        height: 40px;
        border-left: 0 none;
        vertical-align: middle;
        text-align: center;
        cursor: pointer;
        border-bottom-right-radius: 5px;
        border-top-right-radius: 5px;
        top: 113px;
        margin-left: 365px;
        background-image: url("../images/DoubleArrowRight_32x32.png");
        background-repeat: no-repeat;
        background-position-x: center;
        background-position-y: center;
        position: absolute;
        z-index: 100;
    }

@media screen and (max-width: 1440px) {
    div.LeftHideShowButtonHidden {
        margin-left: 269px;
    }
}


    /*Div that contains the style edit controls*/

    div.DivEditControls {
        position: absolute;
        background-color: white;
        border-top: 5px solid white;
        border-bottom: 5px solid white;
        border-right: 5px solid white;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        width: 320px;
        right: 0;
        top: 78px;
        display: block;
        box-shadow: -1px 3px 3px 0 rgba(181, 173, 173, 0.7);
        -moz-box-shadow: -1px 3px 3px 0 rgba(181, 173, 173, 0.7);
        -webkit-box-shadow: -1px 3px 3px 0 rgba(181, 173, 173, 0.7);
    }

    /*Does not display the edit controls at first*/
    div.StartHidden {
        display: none;
    }

    div.DivEditControlsHidden {
        display: block;
        position: absolute;
        background-color: white;
        border-top: 5px solid white;
        border-bottom: 5px solid white;
        border-right: 5px solid white;
        width: 320px;
        right: -320px;
        top: 78px;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        box-shadow: -1px 3px 3px 0 rgba(181, 173, 173, 0.7);
        -moz-box-shadow: -1px 3px 3px 0 rgba(181, 173, 173, 0.7);
        -webkit-box-shadow: -1px 3px 3px 0 rgba(181, 173, 173, 0.7);
    }

    /*Button to hide/show the style edit controls - This functionalits is not enabled at the moment.*/
    div.RightHideShowButtonExpanded {
        position: absolute;
        display: block;
        background-color: white;
        border: 1px solid #e1e1e1;
        width: 35px;
        height: 40px;
        vertical-align: middle;
        text-align: center;
        cursor: pointer;
        border-bottom-left-radius: 5px;
        border-top-left-radius: 5px;
        border-right: 0 none;
        top: 113px;
        left: -35px;
        background-image: url("../images/DoubleArrowRight_32x32.png");
        background-repeat: no-repeat;
        background-position-x: center;
        background-position-y: center;
    }

    div.RightHideShowButtonHidden {
        background-color: white;
        border: 1px solid #e1e1e1;
        width: 35px;
        height: 40px;
        border-right: 0 none;
        vertical-align: middle;
        text-align: center;
        cursor: pointer;
        border-bottom-left-radius: 5px;
        border-top-left-radius: 5px;
        top: 113px;
        position: absolute;
        left: -35px;
        background-image: url("../images/DoubleArrowLeft_32x32.png");
        background-repeat: no-repeat;
        background-position-x: center;
        background-position-y: center;
        display: block;
    }

    .column-exchange-arrow {
        display: inline-block;
        padding: 2px;
        margin: 0;
        cursor: pointer;
        background-color: #336699; /* Button background color */
        color: white; /* Button text color */
        border: 1px solid #204060; /* Border color */
        border-radius: 2px; /* Rounded corners */
        font-size: 10px; /* Font size of the arrow characters */
        text-align: center;
        vertical-align: middle;
        line-height: normal; /* Adjust the line height if needed */
        user-select: none; /* Prevents the text in the button from being selectable */
        width: 14px;
        height: 13px;
    }

    /* Hover effect for buttons */
    .column-exchange-arrow:hover {
        background-color: #204060; /* Darker shade for hover state */
    }


/*Marks an element of the email editor as being selected*/
    .selectedElement {
        background-color: rgba(245, 245, 245, 0.7);
    }

    .selectedText {
        /* background-color: rgb(51, 143, 255);
    color: white;*/
    }

    /*Border of a selected element*/
    .ElementSelectionFrame {
        background-color: none;
       /* visibility: hidden;*/
        border: 1px dotted gray;
        position: absolute;
        pointer-events: none;
    }

    /* Native form actions often already have a strong focus or button border.
       Offset the editor selection so it remains distinguishable from the control itself. */
    .ElementSelectionFrame.MNR_FormActionSelectionFrame {
        border: 2px solid #2f6f9f;
        border-radius: 6px;
        box-sizing: border-box;
        outline: 2px solid rgba(47, 111, 159, 0.35);
        outline-offset: 3px;
        z-index: 20;
    }

    /*Horizontal resize divider*/
    .System_HorizontalResizeDivider {
        width: 5px;
    }

        .System_HorizontalResizeDivider:hover {
            background-color: #F3F3F3;
            cursor: ew-resize;
            width: 5px;
        }

    /*Placeholder that shows where a new element will be placed*/
    table.System_Placeholder {
        height: 25px;
        width: 100%;
        background-color: #F3F3F3;
        text-align: center;
        vertical-align: middle;
        font-size: 12px;
        border: 0 solid #808080;
        color: #808080;
        border-radius: 0;
    }

    .Article_HeaderMenu {
        height: 10px;
        width: 100%;
        background-color: #F3F3F3;
        text-align: center;
        font-size: 10px;
        border-bottom: 0 none #F3F3F3;
        border-top: 0 none #F3F3F3;
        color: #808080;
    }



    /*Background of the drop zone of a layout element */
    .DropZone_Visible {
        background: url('../images/DropZone_Border_25P_15x5.png')top repeat-x, url('../images/DropZone_Border_25P_15x5.png') bottom repeat-x, url('../images/DropZone_Border_25P_5x15.png')left repeat-y, url('../images/DropZone_Border_25P_5x15.png') right repeat-y, url('../images/DropZone_200px_25POpacity.png') center center no-repeat;
        background-size: auto, auto, auto, auto,contain;
    }

    /*Buttons that are shown when a layout container or table is selected*/
    .DIVElementSelection_Button{
        position: absolute;
        background-color: #336699;
        color: white;
        padding: 2px;
        border: 1px solid black;
        font-size: 10px;
        border-radius: 2px;
        min-width: 14px;
        text-align: center;
    }

    /*End of email editor section --------------------------------------------------------------------------------------*/


    /*----------------------------------------------------------------------------------------------------------
  ****StyleEditor - contains functionality to show and hide panels with style editing controls***
  ----------------------------------------------------------------------------------------------------------
*/

    /*Style edit header that is shown above each style edit panel*/
.DIV_StyleEdit_Header {
    background-color: white;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 0;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px;
    margin-bottom: 0;
    color: rgba(0, 0, 0, 0.3);
    font: 14px 'Segoe UI','Helvetica Neue','Droid Sans',Arial,Tahoma,Geneva,Sans-serif;
    width: 90%;
    cursor: pointer;
    font-weight: bold;
    color: #666666;
    text-align: left;
}

        .DIV_StyleEdit_Header:hover {
            background-color: #fafafa;
        }

    /*Style edit panel that is visible*/
    .DIV_StyleEdit_Panel_visible {
        display: block;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 0;
        padding-bottom: 5px;
        visibility: visible;
        font-size: 14px;
        /*font: 14px 'Segoe UI','Helvetica Neue','Droid Sans',Arial,Tahoma,Geneva,Sans-serif;*/
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 10px;
        margin-bottom: 10px;
        width: 90%;
        /*height: 90px;*/
        /*Animation*/
        -webkit-transition: height 0.2s ease;
        -moz-transition: height 0.2s ease;
        -o-transition: height 0.2s ease;
        -ms-transition: height 0.2s ease;
        transition: height 0.2s ease;
    }

    /*Style edit panel that is hidden*/
    .DIV_StyleEdit_Panel_hidden {
        height: 0;
        display: none;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 0;
        padding-bottom: 0;
        visibility: hidden;
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0;
        margin-bottom: 0;
        width: 90%;
        /*Animation*/
        -webkit-transition: height 1s ease;
        -moz-transition: height 1s ease;
        -o-transition: height 1s ease;
        -ms-transition: height 1s ease;
        transition: height 1s ease;
    }
    
    .DIV_StyleEdit_HelpButton {
        padding-right: 5px;
        vertical-align: top;
        cursor: pointer;
        color: #D2D2D2;
        font-size: 14px;
        display: inline;
    }

    .DIV_StyleEdit_HelpButton:hover {
        color: black;
    }
    
    /*The following classes all define the height of a style edit container when it is visible*/

    .DIV_Preview_PANEL_SEND {
        /*height: 240px;*/
    }

    .DIV_Preview_PANEL_AUTORESPONSE {
        /*height: 250px;*/
    }

    .DIV_StyleEdit_PANEL_FORM_OPTIONS {
        /*height: 50px;*/
    }

    .DIV_StyleEdit_PANEL_FORM_BEHAVIOR {
        /*height: 160px;*/
    }

    .DIV_StyleEdit_PANEL_FORMFIELD {
        /*height: 280px;*/
    }

    .MNR_FormIntegrationIntro {
        margin: 0 12px 10px;
        color: #666;
        font-size: 12px;
        line-height: 1.45;
    }

    .MNR_FormIntegrationCard {
        margin: 0 12px 10px;
        padding: 12px;
        border: 1px solid #e2e5e9;
        border-radius: 8px;
        background-color: #fff;
    }

    .MNR_FormIntegrationEmptyState {
        padding: 9px 11px;
        border-color: #e4e8ec;
        background-color: #f7f8fa;
        color: #666;
        font-size: 12px;
        line-height: 1.4;
    }

    .MNR_FormIntegrationCardHelp {
        margin-bottom: 10px;
        color: #666;
        font-size: 12px;
        line-height: 1.4;
    }

    .MNR_FormIntegrationLabel {
        display: block;
        margin-bottom: 4px;
        color: #555;
        font-size: 12px;
    }

    .MNR_FormIntegrationTargetRow {
        margin-top: 10px;
    }


.DIV_StyleEdit_PANEL_BUTTON_TEXT {
    height: 100px;
}

.DIV_StyleEdit_PANEL_HTML_EDIT {
    height: 250px;
} 

    .DIV_StyleEdit_PANEL_ALIGN {
        height: 25px;
    }

    .DIV_StyleEdit_PANEL_LINK {
        /*height: 190px;*/
    }

    .DIV_StyleEdit_PANEL_IMAGE {
        /*height: 80px;*/
    }

    .DIV_StyleEdit_PANEL_LIST_ITEM {
        /*height: 170px;*/
    }

    .DIV_StyleEdit_PANEL_LAYOUT {
        /*height: 80px;*/
    }

    .DIV_StyleEdit_PANEL_FONT {
        /*height: 130px;*/
    }

    .DIV_StyleEdit_PANEL_FONT_BASIC {
        /*height: 80px;*/
    }

    .DIV_StyleEdit_PANEL_FONT_COMPLETE {
        /*height: 100px;*/
    }

    .DIV_StyleEdit_PANEL_FONT_AND_PARAGRAPH {
        /*height: 130px;*/
    }

    .DIV_StyleEdit_PANEL_COLORS {
        /*height: 110px;*/
    }

    .DIV_StyleEdit_PANEL_PARAGRAPH {
        /*height: 100px;*/
    }

    .DIV_StyleEdit_PANEL_SIZE {
        /*height: 70px;*/
    }

    .DIV_StyleEdit_PANEL_MARGIN {
        /*height: 45px;*/
    }

    .DIV_StyleEdit_PANEL_PADDING {
        /*height: 45px;*/
    }

.DIV_StyleEdit_PANEL_BORDERRADIUS {

}

    .DIV_StyleEdit_PANEL_BORDER {
        /*height: 70px;*/
    }

    .DIV_StyleEdit_PANEL_RESPONSIVE {
        /*height: 60px;*/
    }


    /*Arrow buttons for showing/hiding style editing sections*/
    img.ArrowHeadUp {
        margin-left: auto;
        margin-right: 5px;
        opacity: 0.2;
        cursor: pointer;
        margin-right: 0;
        margin-left: auto;
        width: 16px;
        height: 16px;
    }

        img.ArrowHeadUp:hover {
            opacity: 0.9;
        }

    img.ArrowHeadDown {
        margin-left: auto;
        opacity: 0.2;
        cursor: pointer;
        margin-right: 0;
        width: 16px;
        height: 16px;
    }

        img.ArrowHeadDown:hover {
            opacity: 0.9;
        }


    /*Button to select an image*/
    .StyleEditSelectImageButton {
        cursor: pointer;
        opacity: 0.6;
        width: 28px;
        height: 28px;
        padding: 4px;
    }

        .StyleEditSelectImageButton:hover {
            opacity: 1.0;
        }

    /*Controls for changing the ordered list*/
    .DIV_StyleEdit_CtrlOrderedListStyle_List_Unselected {
        height: 35px;
        background-color: white;
        border-bottom: 1px solid rgb(209, 209, 209);
        padding-left: 10px;
        padding-right: 10px;
        margin-top: 5px;
        margin-bottom: 5px;
        width: 100px;
        overflow: auto;
        max-height: 35px;
        cursor: pointer;
    }

        .DIV_StyleEdit_CtrlOrderedListStyle_List_Unselected:hover {
            background-color: #f8f8f8
        }

    .DIV_StyleEdit_CtrlOrderedListStyle_List_Selected {
        height: 35px;
        background-color: rgb(209, 209, 209);
        border-bottom: 1px solid rgb(209, 209, 209);
        padding-left: 10px;
        padding-right: 10px;
        margin-top: 5px;
        margin-bottom: 5px;
        width: 100px;
        overflow: auto;
        max-height: 35px;
        cursor: pointer;
    }

    img.SelectedImage {
        opacity: 0.7;
    }

    /*Button to reset the value of an editing control*/
    .DIV_ClearValue_Button {
        background-image: url('../images/Icons/Delete_16_gray.png');
        height: 16px;
        width: 16px;
        background-repeat: no-repeat;
        margin-left: 5px;
    }

        .DIV_ClearValue_Button:hover {
            background-image: url('../images/Icons/Delete_16_black.png');
        }

    /*End of style editor section --------------------------------------------------------------------------------------*/


/*  ----------------------------------------------------------------------------------------------------------
        User Management

   ---------------------------------------------------------------------------------------------------------- */

/*Show a field of an entry of the list*/
td.UserManagement_RecordCell {
    height: 35px;
    border-bottom: 1px solid rgb(209, 209, 209);
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    width: 100px;
    overflow: auto;
    max-height: 35px;
    cursor: pointer;
    white-space: nowrap;
}

td.UserManagement_RecordRow
{
    background-color: white;
    color: #452e42;
    color: blue;
}

td.UserManagement_RecordRow:hover {
    background-color: #331a30;
    color: white;
}


 /*----------------------------------------------------------------------------------------------------------
  ****List Editor***
  ----------------------------------------------------------------------------------------------------------
*/

#ListEditor_FlexBox {
    --list-editor-list-pane-width: 300px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    margin: 0;
    background-color: white;
    height: 100%;
    border-top: 1px solid lightgray;
}

#DIVContactLists_Container {
    float: left;
    margin: 0;
    flex: 0 0 var(--list-editor-list-pane-width);
    overflow-y: auto;
    padding: 12px;
    box-sizing: border-box;
    background-color: #f6f7f9;
    scrollbar-color: #c8cbd0 transparent;
    scrollbar-width: thin;
}

#ListEditor_ListPaneResizeHandle {
    position: relative;
    z-index: 2;
    flex: 0 0 8px;
    width: 8px;
    margin: 0;
    cursor: col-resize;
    touch-action: none;
    outline: none;
}

#ListEditor_ListPaneResizeHandle::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 3px;
    width: 1px;
    background-color: #aeb2b8;
    transition: width 120ms ease, left 120ms ease, background-color 120ms ease;
}

#ListEditor_ListPaneResizeHandle:hover::after,
#ListEditor_ListPaneResizeHandle:focus-visible::after,
body.ListEditor_ListPaneResizing #ListEditor_ListPaneResizeHandle::after {
    left: 2px;
    width: 3px;
    background-color: #6b386d;
}

#ListEditor_ListPaneResizeHandle:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(107, 56, 109, 0.28);
}

body.ListEditor_ListPaneResizing {
    cursor: col-resize;
    user-select: none;
}

#DIVListView_Container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
}

#DIVListEditor {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
}

#DIVListEditor::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

#DIVListEditor::-webkit-scrollbar-thumb {
    background-color: #b8bcc3;
    border: 2px solid #f6f7f9;
    border-radius: 999px;
}

#DIVListView_Container.ListEditor_EndlessScroll #DIVListEditor {
    overflow-y: auto;
    overscroll-behavior: contain;
}

#DIVListEditor_Pager .ListEditor_PageStatusCell {
    width: 110px !important;
}

#DIVListEditor_Pager {
    flex: 0 0 50px;
    height: 50px;
    box-sizing: border-box;
    padding: 0 14px;
    border-top: 1px solid #e3e5e8;
    background: #ffffff;
    box-shadow: 0 -2px 8px rgba(31, 41, 55, 0.04);
}

#DIVListEditor_Pager > table {
    height: 100%;
    border-collapse: collapse;
}

#DIVListEditor_Pager #CtrlListEditor_LCurrentPage {
    display: inline-block;
    margin: 0;
    padding: 5px 9px;
    border-radius: 999px;
    background: #f1f2f4;
    color: #51464f;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

#DIVListEditor_Pager #CtrlListEditor_DIVRecordCount,
#DIVListEditor_Pager #CtrlListEditor_DIVFilterStatus,
#DIVListEditor_Pager #CtrlListEditor_DIVABSplitStatus {
    color: #5f6368;
}

#DIVListEditor_Pager .ListEditor_BoundaryNavigationCell {
    width: 210px;
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
}

#DIVListEditor_Pager .ListEditor_BoundaryButton {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    margin-left: 6px;
    padding: 5px 10px;
    border: 1px solid #ddd8dd;
    border-radius: 7px;
    background: #fff;
    color: #51464f;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

#DIVListEditor_Pager .ListEditor_BoundaryButton:hover:not(:disabled) {
    border-color: #8a5a8c;
    background: #f8f3f8;
    color: #6b386d;
}

#DIVListEditor_Pager .ListEditor_BoundaryButton:disabled {
    opacity: 0.42;
    cursor: default;
}

#CtrlListEditor_LCurrentPage.ListEditor_EndlessScrollLoading::after {
    content: "";
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-left: 8px;
    border: 2px solid #d8d2d7;
    border-top-color: #6b386d;
    border-radius: 50%;
    vertical-align: -2px;
    animation: ListEditor_CategoryIntegration_SyncSpin 0.8s linear infinite;
}

/*New*/

DIV.ListEditor_CategoryItem_List{
    display: block;
    overflow-y: scroll;
}

DIV.ListEditor_CategoryList, DIV.DlgConnectionManager_ConnectionList{
    background-color: white;
    border-radius: 5px;
    text-align: center;
}

DIV.ListEditor_CategoryList {
    padding: 5px 5px 7px;
    margin-top: 0;
    margin-bottom: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(31, 41, 55, 0.04);
}

/*List of categories in the recipients tab*/
.ListEditor_CategoryUserHeader {
    display: block;
    background-color: #1f3b46;
    color: white;
    color: black;
    background-color: white;
    border-bottom: 1px solid black;
    width: 95%;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 0px;
    margin-top: 20px;
    text-align: left;
    font-weight: bold;
    font-size: 18px;
}

/* Account headings inside the list navigation use the same quiet hierarchy as the section headings. */
#DIVContactLists_Container .DIV_StyleEdit_Header {
    width: auto;
    margin: 4px 8px;
    padding: 7px 4px;
    border-bottom: 1px solid #eceef1;
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
}

#DIVContactLists_Container .DIV_StyleEdit_Header .MNR_TextLabel {
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

#DIVContactLists_Container .DIV_StyleEdit_Header img {
    width: 16px;
    height: 16px;
    opacity: 0.55;
}

/*List of categories in the recipients tab*/
.ListEditor_CategoryItem {
    display: block;
    position: relative;
    box-sizing: border-box;
    background-color: #ffffff;
    width: 100%;
    min-height: 52px;
    padding: 9px 10px 8px 13px;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 3px;
    text-align: left;
    font-size: 14px;
    font-family: "Open Sans", sans-serif;
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

DIV.ListEditor_CategoryItem:hover {
    background-color: #fafafa;
    border-color: #e2e4e8;
    box-shadow: 0 2px 6px rgba(31, 41, 55, 0.07);
}

/*The same items with a selected status*/
DIV.ListEditor_CategoryItem_Selected {
    background-color: #f5f1f5;
    border-color: #ddd3dc;
    box-shadow: 0 2px 7px rgba(69, 46, 66, 0.09);
    font-weight: 600;
}

DIV.ListEditor_CategoryItem_Selected::before {
    content: "";
    position: absolute;
    top: 7px;
    bottom: 7px;
    left: 0;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background-color: #6b386d;
}

DIV.ListEditor_CategoryItem_Selected:hover {
    background-color: #f5f1f5;
    border-color: #d5c8d4;
}

DIV.ListEditor_CategoryItem_DateSeparator{
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    margin: 0;
    padding: 9px 10px 8px;
    color: #4b4f56;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
}

DIV.ListEditor_CategoryHeaderWithControls {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 5px;
}

.ListEditor_CategoryHeaderControls {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    min-width: 0;
    font-weight: normal;
}

.ListEditor_CategorySearchWrap {
    position: relative;
    flex: 1 1 110px;
    min-width: 45px;
    max-width: 135px;
}

.ListEditor_CategorySearchWrap > I {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    color: #8a8d93;
    font-size: 12px;
    pointer-events: none;
}

.ListEditor_CategorySearch {
    box-sizing: border-box;
    width: 100%;
    height: 30px;
    padding: 4px 26px 4px 7px;
    border: 1px solid #d7d9de;
    border-radius: 5px;
    background-color: white;
    color: #25272b;
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    font-weight: normal;
}

.ListEditor_CategorySearch::-webkit-search-cancel-button {
    display: none;
}

.ListEditor_CategorySearch:focus {
    border-color: #987899;
    outline: 2px solid rgba(107, 56, 109, 0.15);
}

.ListEditor_CategorySortWrap {
    position: relative;
    flex: 0 0 auto;
}

.ListEditor_CategorySortButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid #d7d9de;
    border-radius: 5px;
    background-color: white;
    color: #4b4f56;
    cursor: pointer;
}

.ListEditor_CategorySortButton:hover,
.ListEditor_CategorySortButton[aria-expanded="true"] {
    border-color: #cdbecd;
    background-color: #f5f1f5;
    color: #6b386d;
}

.ListEditor_CategorySortMenu {
    position: absolute;
    z-index: 80;
    top: 35px;
    right: 0;
    box-sizing: border-box;
    width: 185px;
    padding: 4px;
    border: 1px solid #e1e2e5;
    border-radius: 6px;
    background-color: white;
    box-shadow: rgba(64, 64, 64, 0.25) 2px 4px 10px;
}

.ListEditor_CategorySortMenu[hidden] {
    display: none;
}

.ListEditor_CategorySortOption {
    display: flex;
    align-items: center;
    gap: 7px;
    box-sizing: border-box;
    width: 100%;
    min-height: 31px;
    padding: 5px 7px;
    border: 0;
    border-radius: 4px;
    background-color: transparent;
    color: #25272b;
    text-align: left;
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    cursor: pointer;
}

.ListEditor_CategorySortOption:hover,
.ListEditor_CategorySortOption:focus-visible,
.ListEditor_CategorySortOption_Selected {
    background-color: #f5f1f5;
}

.ListEditor_CategorySortOption > I {
    width: 12px;
    color: #6b386d;
    visibility: hidden;
}

.ListEditor_CategorySortOption_Selected > I {
    visibility: visible;
}

.ListEditor_CategorySearchEmpty {
    display: none;
    padding: 18px 10px;
    color: #777b82;
    text-align: center;
    font-size: 12px;
}

DIV.ListEditor_CategoryItemDescription_Container{
    display: inline-block;
    width: 70%;
}

DIV.ListEditor_CategoryItem_ID{
    text-align: left;
    display: inline-block;
    color:#6B386D;
    font-size: smaller;
    margin-bottom: 12px;
}

DIV.ListEditor_CategoryItem_SubmitTime{
    text-align: right;
    color:#6B386D;
    font-size: smaller;
    margin-bottom: 12px;
    display: inline-block;
    float:right;
}

DIV.ListEditor_CategoryItem_Heading{
    overflow: hidden;
    margin-bottom: 5px;
    color: #25272b;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

DIV.ListEditor_CategoryItem_Description{
    line-height: 150%;
    font-size: small;
}

DIV.ListEditor_CategoryItem_Pill{
    background-color: #f1f2f4;
    color: #51464f;
    border-radius: 999px;
    margin-right: 6px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 3px 8px;
    display: inline-block;
    vertical-align: top;
    min-width: 38px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
}

DIV.ListEditor_CategoryIcon_Pill{
    background-color: #f1f2f4;
    color: #51464f;
    border-radius: 999px;
    margin-right: 6px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 3px 7px;
    min-width: 28px;
    display: inline-block;
    text-align: center;
    font-size: 12px;
}

DIV.ListEditor_CategoryIntegration_Pill IMG{
    max-width: 34px;
    max-height: 20px;
    display: block;
}

DIV.ListEditor_CategoryIntegration_Pill{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    vertical-align: top;
    height: 23px;
    box-sizing: border-box;
    padding-left: 8px;
    padding-right: 8px;
}

BUTTON.ListEditor_CategoryIntegration_SyncButton{
    border: 0;
    background: transparent;
    color: #452e42;
    cursor: pointer;
    margin-left: 6px;
    padding: 0;
    line-height: 1;
}

BUTTON.ListEditor_CategoryIntegration_SyncButton:hover{
    color: #EF3A23;
}

BUTTON.ListEditor_CategoryIntegration_SyncButton:disabled{
    cursor: default;
    opacity: 0.65;
}

BUTTON.ListEditor_CategoryIntegration_SyncButton_Running I{
    animation: ListEditor_CategoryIntegration_SyncSpin 0.8s linear infinite;
}

@keyframes ListEditor_CategoryIntegration_SyncSpin{
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

DIV.ListEditor_IntegrationSyncStatus{
    color: #666666;
    display: none;
    font-size: 10pt;
    padding-right: 15px;
    white-space: nowrap;
}

DIV.ListEditor_IntegrationSyncStatus I{
    color: #452e42;
    margin-right: 5px;
}

I.ListEditor_IntegrationSyncStatus_Running{
    animation: ListEditor_CategoryIntegration_SyncSpin 0.8s linear infinite;
}





/*Heading of a list of categories or forms*/
.Newsletter_Recipient_List_Heading {
    width: 100%;
    vertical-align: middle;
    font-size: large;
    color: #666666;
    padding-left: 15px;
    padding-top: 7px;
    padding-bottom: 7px;
    background-color: white;
    border-bottom: 1px solid gray;
    border-bottom:0px;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.Newsletter_Recipient_List_Heading:hover {
    background-color: #fafafa;
}

td.Newsletter_Recipient_List_Heading_UpDown {
    width: 24px;
    text-align: right;
    padding-right: 5px;
}

.RecipientLists_Container{
    padding: 0;
    margin: 0;
}

/*Show a field of an entry of the list*/
td.ListEditor_RecordCell {
    height: 42px;
    background-color: white;
    border-bottom: 1px solid #eceef1;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    width: 1px;
    white-space: nowrap;
    max-height: 42px;
    color: #303238;
    font-size: 13px;
    vertical-align: middle;
}

table.TableRecipientList tbody tr:nth-child(even) td.ListEditor_RecordCell {
    background-color: #fcfcfd;
}

table.TableRecipientList tbody tr:hover td.ListEditor_RecordCell {
    background-color: #fafbfc;
}

table.TableRecipientList tr.ListEditor_VirtualSpacer,
table.TableRecipientList tr.ListEditor_VirtualSpacer td {
    padding: 0;
    border: 0;
    background: transparent;
    pointer-events: none;
}

button.ListEditor_DeleteRecipientButton {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #b7bbc1;
    cursor: pointer;
    transition: color 120ms ease, background-color 120ms ease;
}

button.ListEditor_DeleteRecipientButton:hover {
    background-color: #fff0ee;
    color: #d94b3d;
}

th.ListEditor_ActionColumn,
td.ListEditor_ActionCell {
    position: sticky;
    left: 0;
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    box-sizing: border-box;
    padding: 0;
    text-align: center;
}

th.ListEditor_ActionColumn {
    z-index: 4;
}

td.ListEditor_ActionCell {
    z-index: 1;
}

th.ListEditor_DoiColumn,
td.ListEditor_DoiCell {
    width: 58px;
    min-width: 58px;
    max-width: 58px;
    box-sizing: border-box;
    text-align: center;
}

span.ListEditor_DoiBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #e8f5ec;
    color: #24834b;
    font-size: 11px;
}

span.ListEditor_SuppressedBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #fff0ed;
    color: #c53b2d;
    font-size: 12px;
}

span.ListEditor_DoiEmpty {
    color: #c4c7cc;
}

.ListEditor_MetadataSkeleton {
    display: inline-block;
    border-radius: 999px;
    background: linear-gradient(90deg, #eceef1 25%, #f7f8f9 50%, #eceef1 75%);
    background-size: 200% 100%;
    animation: ListEditor_MetadataPulse 1.15s ease-in-out infinite;
}

.ListEditor_MetadataSkeleton_Doi {
    width: 22px;
    height: 22px;
}

td.ListEditor_MetadataCellPending {
    position: relative;
}

td.ListEditor_MetadataCellPending input.MNR_TagEditor {
    visibility: hidden;
}

td.ListEditor_MetadataCellPending::after {
    content: "";
    display: block;
    width: 74px;
    height: 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, #eceef1 25%, #f7f8f9 50%, #eceef1 75%);
    background-size: 200% 100%;
    animation: ListEditor_MetadataPulse 1.15s ease-in-out infinite;
}

@keyframes ListEditor_MetadataPulse {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

td.ListEditor_RecordCell.MNR_TagEditorCell {
    min-width: 210px;
    box-sizing: border-box;
}

#CtrlListEditor_RSearch_ td.ListEditor_RecordCell {
    position: sticky;
    top: 40px;
    z-index: 2;
    background-color: #f7f5f7;
    border-bottom-color: #ddd7dd;
}

#CtrlListEditor_RSearch_ td.ListEditor_ActionCell {
    z-index: 3;
}

td.ListEditor_QueryCell {
    height: 38px;
    padding: 0 34px 0 10px;
    box-shadow: inset 0 0 0 1px #ded8de;
    color: #3c4148;
    cursor: text;
}

td.ListEditor_QueryCell:hover {
    background-color: #f3eff3 !important;
    box-shadow: inset 0 0 0 1px #c8bbc7;
}

.ListEditor_QueryInput {
    width: 100%;
    height: 38px;
    box-sizing: border-box;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #2f566d;
    font: inherit;
    font-size: 13px;
    line-height: 38px;
    vertical-align: middle;
}

.ListEditor_QueryInput::placeholder {
    color: #9a949b;
    opacity: 1;
}

.ListEditor_QueryCellIcon {
    position: absolute;
    top: 50%;
    right: 11px;
    transform: translateY(-50%);
    color: #766b75;
    font-size: 12px;
    pointer-events: none;
}

.ListEditor_QueryClearButton {
    position: absolute;
    top: 50%;
    right: 5px;
    width: 28px;
    height: 28px;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #8f8990;
    cursor: pointer;
}

.ListEditor_QueryClearButton:hover {
    background-color: #ebe6eb;
    color: #51464f;
}

.ListEditor_QueryInput:placeholder-shown + .ListEditor_QueryClearButton {
    display: none;
}

.ListEditor_QueryInput:not(:placeholder-shown) ~ .ListEditor_QueryCellIcon {
    display: none;
}

.ListEditor_NoResultsPanel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: 32px;
    box-sizing: border-box;
    color: #70747b;
    text-align: center;
}

.ListEditor_NoResultsPanel i {
    margin-bottom: 14px;
    color: #c2bcc2;
    font-size: 28px;
}

.ListEditor_NoResultsPanel span {
    font-size: 14px;
    font-weight: 600;
}

td.MNR_TagEditorCell ul.tag-editor {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    height: 28px;
    min-height: 28px;
    margin: 0;
    padding: 3px 0;
    border: 0;
    background: transparent;
    overflow: hidden;
}

td.MNR_TagEditorCell ul.tag-editor.ListEditor_TagEditorExpanded,
td.MNR_TagEditorCell ul.tag-editor:focus-within {
    flex-wrap: wrap;
    height: auto;
    overflow: visible;
}

td.MNR_TagEditorCell ul.tag-editor > li {
    flex: 0 0 auto;
    margin: 0;
}

td.MNR_TagEditorCell ul.tag-editor > li.ListEditor_TagChipHidden {
    display: none;
}

td.MNR_TagEditorCell .tag-editor-spacer {
    display: none;
}

td.MNR_TagEditorCell .tag-editor-tag,
td.MNR_TagEditorCell .tag-editor-delete,
td.MNR_TagEditorCell button.ListEditor_TagOverflowButton {
    background-color: #f1edf2;
    color: #52364f;
}

td.MNR_TagEditorCell .tag-editor-tag {
    max-width: 105px;
    padding: 2px 5px;
    overflow: hidden;
    text-overflow: ellipsis;
}

td.MNR_TagEditorCell .tag-editor-delete {
    padding-top: 2px;
    padding-bottom: 2px;
}

td.MNR_TagEditorCell li.ListEditor_TagOverflow button {
    height: 22px;
    padding: 0 7px;
    border: 0;
    border-radius: 999px;
    background-color: #eee9ef;
    color: #52364f;
    font: inherit;
    cursor: pointer;
}

td.MNR_TagEditorCell li.ListEditor_TagOverflow button:hover {
    background-color: #e3dbe5;
}

    /*A record that is in a do not email list has a different back color*/
    tr.ListEditor_DoNotEmailRecordRow {
        color: #d4d4d4;
    }

    /*Heading cell of the list editor*/
th.ListEditor_HeadingCell {
    height: 40px;
    vertical-align:middle;
    border-top: 0 solid rgb(209, 209, 209);
    border-bottom: 1px solid rgb(209, 209, 209);
    border-right: 0;
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #f8f9fa;
    color: #62666d;
    padding-left: 10px;
    padding-right: 10px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

th.ListEditor_TagsColumn {
    min-width: 210px;
}

th.ListEditor_Field_ID,
td.ListEditor_Field_ID {
    color: #777c84;
    font-variant-numeric: tabular-nums;
}

td.ListEditor_Field_Email1,
td.ListEditor_Field_Email2,
td.ListEditor_Field_Email3 {
    color: #2f566d;
    font-weight: 500;
}

    /*Table that contains a recipient list*/
    table.TableRecipientList {
        border-spacing: 0;
        border-collapse: separate;
        table-layout: fixed;
    }

    /*Items of the list of recipient lists*/
    td.RecipientListItem {
        padding: 0;
        width: 100%;
    }
    
    td.RecipientListItem:first-child{
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }

td.RecipientListItem:last-child{
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

    table.RecipientList_ItemHolder {
        margin-left: 0;
        margin-top: 0;
        margin-bottom: 0;
        padding-bottom: 4px;
        padding-top: 4px;
        padding-left: 4px;
        background-color: white;
        color: #2b2b2b;
        width: 100%;
        border-bottom: 1px solid #d4d4d4;
        border: none;
        cursor: pointer;
    }

        table.RecipientList_ItemHolder:hover {
            background-color: #fafafa;
        }

    /*Currently selected recipient list*/
    table.RecipientList_ItemHolder_Selected {
        margin-left: 0;
        margin-top: 0;
        margin-bottom: 0;
        padding-bottom: 4px;
        padding-top: 4px;
        padding-left: 4px;
        background-color: rgb(15, 115, 186);
        color: rgb(255, 233, 231);
        width: 100%;
        box-shadow: rgba(128, 128, 128, 0.4) 1px 1px 3px;
        cursor: pointer;
    }

    /*Name of recipient list*/
    td.RecipientList_Name {
        font-weight: bold;
    }
    /*Number of recipient list records*/
    td.RecipientList_Records {
        font-style: italic;
    }

    /*Garbage icon for deleting a recipient list*/
    .GarbageIcon {
        opacity: 0.2;
        cursor: pointer;
        margin-right: 0;
        margin-left: auto;
    }

        .GarbageIcon:hover {
            opacity: 0.9;
        }

    TABLE.RecipientLists_Holder.RecipientLists_Holder {
        width: 100%;
    }

    /*End of list editor section --------------------------------------------------------------------------------------*/


    /*----------------------------------------------------------------------------------------------------------
  ****Preview***
  ----------------------------------------------------------------------------------------------------------
*/

    /*Label before the selection of from/recipient list/subject*/
    .Preview_LabelCell {
        padding-left: 5px;
        padding-bottom: 10px;
        padding-top: 10px;
        padding-right: 5px;
        width: 100px !important;
        max-width: 100px !important;
    }

    .NewsletterPreview_FromAddressRow {
        display: flex;
        align-items: center;
        width: 100%;
    }

    .NewsletterPreview_FromAddressSelect {
        flex: 1 1 auto;
        min-width: 0;
    }

    .NewsletterPreview_FromAddressActions {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /*Button for selecting the next/previous preview record*/
    .PreviewArrowButton {
        opacity: 0.3;
    }

    .PreviewArrowButton:hover {
        opacity: 0.9;
    }

div.DIV_IFRAME_Preview_Container_Mobile {
    margin: 30px auto 80px;
    box-sizing: content-box;
    width: 390px;
    height: 640px;
    background-color: black;
    border-radius: 30px;
    padding: 40px 10px 70px;
}

div.DIV_IFRAME_Preview_Container_Desktop {
    width: 100%;
    overflow: hidden;
}

div.DIV_PlainTextPreview_Container {
    display: none;
    width: 100%;
    overflow: auto;
    box-sizing: border-box;
    padding: 16px;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: "Courier New", monospace;
    font-size: 13px;
    line-height: 1.5;
    background-color: #ffffff;
    border: 1px solid #dadada;
}

DIV.PreviewChooseMode {
    position: fixed;
    bottom: 0;
    background-color: white;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    z-index: 300;
    padding: 0;
    cursor: pointer;
    font-size: 13px;
    height: 45px;
    border: 1px solid #dadada;
    box-shadow: rgba(64, 64, 64, 0.8) 3px 3px 5px;
}

#CtrlNewsletterEditor_MobileCanvas_ModeSwitch {
    align-items: center;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    white-space: nowrap;
}

/* Modal workflows own the viewport; the fixed canvas mode switch must not show through their content. */
body:has(.MNR_PopupBox_ModalBackground:not(.MNR_PopupBox_Hidden)) #CtrlNewsletterEditor_MobileCanvas_ModeSwitch {
    visibility: hidden !important;
}

div.PreviewChooseMode_Button {
    display: inline-block;
    padding: 15px;
    height: 45px;
    width: 120px;
    text-align: center;
    font-size: 13px;
    background-color: white;
    user-select:none;
}

    div.PreviewChooseMode_Button:hover {
        background-color: #DADADA;
    }

    div.PreviewChooseMode_Button_Pressed {
        background-color: #DADADA;
    }

#CtrlNewsletterEditor_MobileCanvas_ModeSwitch > .PreviewChooseMode_Button {
    box-sizing: border-box;
    width: auto;
    min-width: 102px;
    padding: 13px 14px;
}

.MNR_FormPages_CompactNavigation {
    display: inline-flex;
    align-items: center;
    height: 45px;
    padding: 0 4px;
    border-left: 1px solid #dadada;
    border-top-right-radius: 5px;
    vertical-align: top;
    cursor: default;
}

#CtrlNewsletterEditor_MobileCanvas_ModeSwitch.MNR_FormPages_CompactNavigationVisible #CtrlNewsletterEditor_MobileCanvas_DivSwitchModeMobile {
    border-top-right-radius: 0 !important;
}

.MNR_FormPages_CompactNavigation[hidden] {
    display: none;
}

.MNR_FormPages_CompactButton {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #284b63;
    cursor: pointer;
}

.MNR_FormPages_CompactButton:hover,
.MNR_FormPages_CompactButton:focus-visible {
    background: #edf3f6;
    outline: 2px solid #0b74c9;
    outline-offset: -2px;
}

.MNR_FormPages_CompactButton:disabled {
    color: #aeb9c0;
    cursor: default;
}

.MNR_FormPages_CompactButton:disabled:hover {
    background: transparent;
    outline: 0;
}

.MNR_FormPages_CompactLabel {
    min-width: 76px;
    padding: 0 4px;
    color: #22313d;
    text-align: center;
    user-select: none;
}

    /*Radio Button*/
    .MNR_Radio_Button {
        width: 20px;
        height: 20px;
        background-color: white;
        margin: 5px;
        display: table-cell;
        vertical-align: middle;
        border-radius: 50%;
    }

    /*Button*/
    button.MNR_Button,
    button.MNR_Button_Blue,
    button.MNR_Button_Gray,
    button.MNR_Button_Red,
    div.MNR_Button, 
    div.MNR_Button_Blue, 
    div.MNR_Button_Gray, 
    div.MNR_Button_Red {
        vertical-align: middle;
        text-align: center;
        border-width: 0;
        /*box-shadow: rgba(128, 128, 128, 0.4) 1px 1px 3px;*/
        border-radius: 5px;
        cursor: pointer;
        padding: 10px;
        margin-left: auto;
        margin-right: auto;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    button.MNR_BigButton,
    div.MNR_BigButton {
        width: 220px;
        padding-top: 30px;
        padding-bottom: 30px;
        font-size: 24px;
        margin-top: 15px;
    }
    
    /* Keep hover feedback identical for modern button elements and legacy
       div-based dialog actions. Disabled controls intentionally stay flat. */
    button.MNR_Button:not(:disabled):hover,
    button.MNR_Button_Blue:not(:disabled):hover,
    button.MNR_Button_Gray:not(:disabled):hover,
    button.MNR_Button_Red:not(:disabled):hover,
    div.MNR_Button:not([disabled]):hover,
    div.MNR_Button_Blue:not([disabled]):hover,
    div.MNR_Button_Gray:not([disabled]):hover,
    div.MNR_Button_Red:not([disabled]):hover {
        box-shadow: rgba(128, 128, 128, 0.9) 1px 1px 3px;
        background-color: #2f5d8c;
    }
    
    button.MNR_Button_Gray[disabled],
    div.MNR_Button_Gray[disabled] {
        color: rgba(181, 173, 173, 0.7);
        background-color: #efefef;
        cursor: default;
    }
    
    button.MNR_Button_Gray[disabled]:hover,
    div.MNR_Button_Gray[disabled]:hover {
        color: rgba(181, 173, 173, 0.7);
        background-color: #efefef;
        box-shadow: none;
        cursor: default;
    }
    
    button.MNR_Button_Blue,
    div.MNR_Button_Blue {
        color: rgb(255, 233, 231);
        background-color: #336699;
    }
    
    button.MNR_Button_Blue:not(:disabled):hover,
    div.MNR_Button_Blue:not([disabled]):hover {
        background-color: #2f5d8c;
    }
    button.MNR_Button_Red,
    div.MNR_Button_Red {
        color: rgb(255, 233, 231);
        background-color: #EF3A23;
    }
    
    button.MNR_Button_Red:not(:disabled):hover,
    div.MNR_Button_Red:not([disabled]):hover {
        background-color: #DA3520;
    }

    button.MNR_Button_Red:disabled {
        cursor: default;
        opacity: 0.55;
    }

    button.MNR_Button_Red:focus,
    div.MNR_Button_Red:focus {
        border-color: #82003f;
    }
    
    button.MNR_Button_Gray,
    div.MNR_Button_Gray {
        color: #3F3F3F;
        background-color: #efefef;
    }
    
    button.MNR_Button_Gray:not(:disabled):hover,
    div.MNR_Button_Gray:not([disabled]):hover{
        background-color: #DADADA;
    }
    
    /* NO longer in use?
    .DIV_MNR_LittleButton {
        width: 90px;
        padding: 6px;
        color: black;
        border-radius: 2px;
        cursor: pointer;
        font: 16px 'Segoe UI','Helvetica Neue','Droid Sans',Arial,Tahoma,Geneva,Sans-serif;
        vertical-align: middle;
        text-align: center;
        display: table-cell;
        background-color: rgb(220,220,220);
    }
    
    .DIV_MNR_LittleButton:hover {
        background-color: rgb(15, 115, 186);
        background-color: #2f5d8c;
        background-color: rgb(18,121,192);
    }*/
    
    
    /*End of Button*/

    /* Customize the label (the container) */
    .mnr_checkbox_container {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 12px;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        font-size: 14px;
    }

    /* Hide the browser's default checkbox */
    .mnr_checkbox_container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }
    
    .mnr_checkbox_container_userpermission{
        width: 210px;
    }

/* Create a custom checkbox */
.mnr_checkbox_checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.mnr_checkbox_container:hover input ~ .mnr_checkbox_checkmark {
    background-color: #ccc;
}

/* Active selections use the established success green; red remains reserved for warnings and primary actions. */
.mnr_checkbox_container input:checked ~ .mnr_checkbox_checkmark {
    background-color: #23824d;
}

/* Create the checkmark/indicator (hidden when not checked) */
.mnr_checkbox_checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.mnr_checkbox_container input:checked ~ .mnr_checkbox_checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.mnr_checkbox_container .mnr_checkbox_checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


/* The switch - the box around the slider */
.mnr_toggle_switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 22px;
}

    .mnr_toggle_switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.mnr_toggle_slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: -4px;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .mnr_toggle_slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .mnr_toggle_slider {
    background-color: #EF3A23;
}

input:focus + .mnr_toggle_slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .mnr_toggle_slider:before {
    -webkit-transform: translateX(12px);
    -ms-transform: translateX(12px);
    transform: translateX(12px);
}

/* Rounded sliders */
.mnr_toggle_slider.round {
    border-radius: 34px;
}

    .mnr_toggle_slider.round:before {
        border-radius: 50%;
    }

.mnr_slidecontainer {
    width: 100%;
}

.mnr_slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 15px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    border-radius: 15px;
}

    .mnr_slider:hover {
        opacity: 1;
    }

    .mnr_slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 25px;
        height: 25px;
        background: #4CAF50;
        cursor: pointer;
        border-radius: 15px;
    }

    .mnr_slider::-moz-range-thumb {
        width: 25px;
        height: 25px;
        background: #4CAF50;
        cursor: pointer;
    }

#DIV_EditControls input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 90%;
    height: 28px;
    margin: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    vertical-align: middle;
}

    #DIV_EditControls input[type=range]:focus {
        outline: none;
    }

    #DIV_EditControls input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 6px;
        background: #d9d9d9;
        border: 1px solid #c6c6c6;
        border-radius: 999px;
    }

    #DIV_EditControls input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 18px;
        height: 18px;
        margin-top: -7px;
        background: #ffffff;
        border: 1px solid #777777;
        border-radius: 50%;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    }

    #DIV_EditControls input[type=range]:focus::-webkit-slider-thumb {
        border-color: #EF3A23;
        box-shadow: 0 0 0 3px rgba(239, 58, 35, 0.18);
    }

    #DIV_EditControls input[type=range]::-moz-range-track {
        width: 100%;
        height: 6px;
        background: #d9d9d9;
        border: 1px solid #c6c6c6;
        border-radius: 999px;
    }

    #DIV_EditControls input[type=range]::-moz-range-thumb {
        width: 18px;
        height: 18px;
        background: #ffffff;
        border: 1px solid #777777;
        border-radius: 50%;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
        cursor: pointer;
    }

    #DIV_EditControls input[type=range]:focus::-moz-range-thumb {
        border-color: #EF3A23;
        box-shadow: 0 0 0 3px rgba(239, 58, 35, 0.18);
    }

    #DIV_EditControls input[type=range]:disabled {
        cursor: default;
        opacity: 0.45;
    }

    .mnr_margin_10{
        margin: 10px;
    }

.mnr_margin_15 {
    margin: 15px;
}

.mnr_margin_30 {
    margin: 30px;
}

    /*Submit button*/
    .DIV_Submit_Button {
        width: 220px;
        height: 70px;
        vertical-align: middle;
        text-align: center;
        background-color: rgb(24, 147, 234);
        color: rgb(255, 233, 231);
        box-shadow: rgba(128, 128, 128, 0.4) 1px 1px 3px;
        border-radius: 5px;
        cursor: pointer;
        font: 24px 'Segoe UI','Helvetica Neue','Droid Sans',Arial,Tahoma,Geneva,Sans-serif;
        padding-top: 30px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 15px;
        background-color: #336699;
    }

    .DIV_Submit_Button:hover {
        box-shadow: rgba(128, 128, 128, 0.9) 1px 1px 3px;
        background-color: rgb(15, 115, 186);
        background-color: #2f5d8c;
    }

    /*Submit button*/
.DIV_Submit_AUTORESPONSE_Button {
    width: 220px;
    height: 70px;
    vertical-align: middle;
    text-align: center;
    color: rgb(255, 233, 231);
    box-shadow: rgba(128, 128, 128, 0.4) 1px 1px 3px;
    border-radius: 5px;
    cursor: pointer;
    font: 24px 'Segoe UI','Helvetica Neue','Droid Sans',Arial,Tahoma,Geneva,Sans-serif;
    padding-top: 30px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    background-color: #8e0045;
    background-color: #EF3A23;
}

    .DIV_Submit_AUTORESPONSE_Button:hover {
        box-shadow: rgba(128, 128, 128, 0.9) 1px 1px 3px;
        background-color: #82003f;
        background-color: #DA3520;
    }

    /*Send test message button*/
    .DIV_Submit_TestMessage {
        width: 110px;
        height: 36px;
        background-color: rgb(66, 190, 57);
        color: rgb(255, 233, 231);
        border-radius: 2px;
        cursor: pointer;
        vertical-align: middle;
        text-align: center;
        display: table-cell;
    }

        .DIV_Submit_TestMessage:hover {
            box-shadow: rgba(128, 128, 128, 0.9) 1px 1px 3px;
            background-color: rgb(32, 144, 23);
        }

    /*Holds the list of test message result*/
    table.TestMessageResult_ItemHolder {
        margin-left: 0;
        margin-top: 0;
        margin-bottom: 0;
        padding-bottom: 4px;
        padding-top: 4px;
        background-color: white;
        color: #2b2b2b;
        width: 325px;
        border-bottom: 1px solid #d4d4d4;
        border-radius: 0;
        cursor: pointer;
        border: 0 solid black;
    }

    /*Status image of the test message*/
    td.TestMessageResult_ImageHolder {
        vertical-align: top;
        margin-right: 5px;
        width: 50px;
        margin-left: 5px;
        margin-top: 5px;
    }

    /*Description of the test message*/
    td.TestMessageResult_Description {
        font-size: smaller;
        font-style: italic;
        color: darkgray;
    }

    /*Panel that holds the test message*/
    .DIV_Preview_PANEL_TEST_MESSAGE {
        height: 30px;
    }

    .DIV_Preview_PANEL_TEST_MESSAGE_RESULTS {
        height: 140px;
    }

    .DIV_Preview_PANEL_TESTMESSAGE {
        height: 40px;
    }


/*End of preview section --------------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------------------------------------
  ****Reporting***
  ----------------------------------------------------------------------------------------------------------
*/

/*This DIV is shown when there are no reports available*/
#DIV_NoReportsAvailable {
    display: block; width: 100%; height: 100%; background-color: white;
}

/*Flex grid that contains the list of jobs, report and message preview*/
#DIV_Reports_View {
    display: flex;
    width: 100%;
}

/*List of job items*/
#DIVReportList_Container {
    float: left;
    padding: 7px;
    margin: 0;
    flex: 0 0 500px;
    box-sizing: border-box;
    overflow-y: hidden;
    background-color: #f2f2f2;
}

/*This flex item contains the reporting control*/
#DIVReportView_Container {
    flex: 0 0 900px;
    border-left: 1px solid gray;
    overflow-y: auto;
    background-color: rgb(247, 247, 247);
}


/*This id the background of the reporting control*/
#DIV_Report_Control{
    width: 100%; 
    background-color: transparent; 
    display: block;
    text-align: center;
}

#DIVReportMessageView_Container{
    flex: auto;
    border-left: 1px solid gray;
    background-color: rgb(247, 247, 247);
    text-align: center;
    overflow: hidden;
}

DIV.Reporting_JobItem_List{
    display: block; 
    overflow-y: scroll;
}

    /*List of jobs in the reporting tab*/
    .Reporting_JobItem {
        display: block;
        background-color: #f7f7f7;
        width: 96%;
        padding: 5px;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 8px;
    }

        .Reporting_JobItem:hover {
            background-color: white;
            box-shadow: rgba(128,128,128, 0.4) 0 0 5px;
        }

    /*The same items with a selected status*/
    .Reporting_Mailing_Item_Selected {
        background-color: white;
        box-shadow: rgba(128,128,128, 0.8) 0 0 2px;
    }
    
        /*Preview image of the mailing - can be deleted once the new view is ready*/
        .SmallMailingPreviewDIV {
            width: 120px;
            padding: 0;
            text-align: center;
            margin: 0;
        }
        
        DIV.Reporting_JobItem_DateSeparator{
            width: 96%;
            text-align: right;
            margin-top: 20px;
        }
        
IMG.Reporting_JobItem_PreviewImage{
    display: inline-block;
    height: 108px; 
    width: 108px; 
    margin: 10px;
    vertical-align: top;
    border-radius: 50%;
}

DIV.Reporting_JobItem_Description_Container{
    display: inline-block;
    width: 70%;
}

DIV.Reporting_JobItem_ID{
    text-align: left;
    display: inline-block;
    color:#6B386D;
    font-size: smaller;
    margin-bottom: 12px;
}

DIV.Reporting_JobItem_SubmitTime{
    text-align: right;
    color:#6B386D;
    font-size: smaller;
    margin-bottom: 12px;
    display: inline-block;
    float:right;
}

DIV.Reporting_JobItem_Heading{
    font-weight: bold;
    margin-bottom: 7px;
}

DIV.Reporting_JobItem_Description{
    line-height: 150%;
    font-size: small;
}

DIV.Report_JobItem_Pill{
    background-color: #f2f2f2;
    color: #452e42;
    border-radius: 3px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 5px;
    padding: 7px;
    display: inline-block;
    min-width: 50px;
    text-align: center;
}


/*Responsive rules for job items. Make the list of jobs smaller when we have less than 2000px in width */
@media only screen and (max-width: 2000px) {
    IMG.Reporting_JobItem_PreviewImage {
        height: 50px;
        width: 50px;
        display: inline-block;
    }

    #DIVReportList_Container{
        flex: 0 0 400px;
    }

    DIV.Reporting_JobItem_Description_Container{
        width: 77%;
    }
}

/*Responsive rules for job items. Make the list of jobs smaller when we have less than 1200px in width */
@media only screen and (max-width: 1200px) {
    IMG.Reporting_JobItem_PreviewImage {
        display:none;
    }

    #DIVReportList_Container{
        flex: 0 0 360px;
    }

    DIV.Reporting_JobItem_Description_Container{
        width: 99%;
    }
}

/*End of Job Item*/

/*Report - white page that contains the report*/
DIV.CtrlReport_ReportPage{
    width: 820px;
    background-color: white; 
    padding: 10px; 
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    display: inline-block;
}

DIV.Report_PreviewContainer{
    width: 90%;
    background-color: white;
    padding: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    display: inline-block;
    overflow: no-display;
}

#CtrlReport_PreviewMessage{
    width: 133%; 
    height: 500px; 
    border: 0;
    transform-origin: left top;
    transform: scale(0.75);
    -moz-transform: scale(0.75);
    -moz-transform-origin: left top;
    -webkit-transform: scale(0.75);
    -webkit-transform-origin: left top;
}

    /*Mailing Title*/
    DIV.Reporting_Mailing_Title {
        font-weight: bold;
        text-align: left;
        font-size: large;
        margin-bottom: 20px;
    }

    /*Mailing Date*/
    .Reporting_Mailing_Date {
        color: #a19c9c;
        font-weight: normal;
        text-align: right;
        font-size: 11pt;
        font-style: normal;
        min-width: 120px;
        vertical-align: top;
    }

    /*Mailing Status*/
    .Reporting_Mailing_Status {
        padding: 7px;
        color: #a19c9c;
        font-size: 11pt;
        font-style: normal;
    }

    /*Delivery success overview*/
    .Reporting_QuickItem_Table {
        width: 100%;
        height: 100%;
        margin: 0;
        border-spacing: 10px;
    }

    /*Quick item of the table that provides an overview of the delivery success*/

    .ReportingQuickItem {
        margin: 20px;
        margin-top: 30px;
        color: #6B386D;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        background-color: #f2f2f2;
    }

        .ReportingQuickItem:hover {
            background-color: lightgray;
        }

    /*Icon of the quick item*/
    .Reporting_QuickItem_Icon {
        width: 40px;
        padding: 5px;
    }

        .Reporting_QuickItem_Icon i{
            font-size: 32px;
            color: black;
        }

        /*Text of the quick item*/
        td.Reporting_QuickItem_Text {
            vertical-align: middle;
            text-align: center;
            color: #7a7a7a;
            color: black;
            font-size: x-large;
            padding-bottom: 0;
            padding-top: 0;
            line-height: 80%;
        }

    /*Description of the quick item*/
    .Reporting_QuickItem_Description {
        font-size: 12px;
        color: gray;
        line-height: 80%;
    }

    /*Preview image of the newsletter*/
    .PreviewImageDIV {
        position: relative;
        top: -40px;
        width: 320px;
        background-image: url('/images/EmailEditor_Background.png');
        background-repeat: no-repeat;
        border: 1px solid lightgray;
        padding-left: 0;
        text-align: left;
        margin: 0 0 0 0;
        margin-right: 15px;
        box-shadow: rgba(128, 128, 128, 0.4) 1px 1px 3px;
    }

        .PreviewImageDIV:hover {
            box-shadow: rgba(128, 128, 128, 0.8) 1px 1px 3px;
        }
        

DIV.Reporting_Header_Description_Container{
    display: block;
    padding: 10px;
    background-color: #fbfbfb;
    border-radius: 7px;
    margin: 15px
}
    
    DIV.Reporting_Header_Row{
        display: flex;
    }
    
    DIV.Reporting_Header_PreviewImage {
        display: block;
    }

    .Reporting_StatusItemDescription {
        padding: 5px;
        flex: 30%;
        display: inline-block;
    }

    .Reporting_StatusItem {
        padding: 5px;
        flex: 50%;
        display: inline-block;
    }

    #CtrlReport_SuccessColumn{
        width: 40%;
    }
    
    .ReportingChartHolder {
        margin-left: auto;
        margin-right: auto;
        background-color: white;
        width: 800px;
        height: 385px;
        margin-top: 10px;
    }
    
    .Reporting_Graph{
        width: 32%;
        display: inline-block;
    }

    .Reporting_GaugeCard {
        width: 100%;
        text-align: center;
        color: black;
    }

    .Reporting_GaugeTitle {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 10px;
    }

    .Reporting_GaugeCanvasHolder {
        position: relative;
        width: 210px;
        height: 130px;
        margin-left: auto;
        margin-right: auto;
    }

    .Reporting_GaugeCanvas {
        width: 210px !important;
        height: 130px !important;
    }

    .Reporting_GaugeValue {
        position: absolute;
        left: 0;
        right: 0;
        top: 77px;
        font-size: 28px;
        font-weight: 700;
        line-height: 1;
        pointer-events: none;
    }

    .Reporting_GaugeLabel {
        width: 210px;
        margin-left: auto;
        margin-right: auto;
        margin-top: -4px;
        font-size: 14px;
        line-height: 1.35;
    }

    .ReportingLogHolder {
        margin-left: auto;
        margin-right: auto;
        background-color: white;
        width: 800px;
        margin-top: 10px;
    }

    .ReportingDetail_LegendText {
        color: black;
        width: 250px;
    }

    .ReportingDetail_LegendText_Narrow {
        color: black;
        width: 100px;
    }

    .ReportingDetail_LegendTable {
        width: 200px;
        margin: 10px;
    }

    .ReportingDetail_LegendTable_Narrow {
        width: 153px;
        margin: 5px;
    }

    .ReportingDetail_LegendUrl {
        width: 400px;
        
        color: black;
    }

    .ReportingDetail_Explanation {
        width: 400px;
        margin: 10px;
        
        color: #ebebeb;
    }
    
    #TABLE_REPORTING_DETAIL_ClickLog_Table tbody tr{
        background-color: #e0e0e0;
        border-collapse: collapse;
        border-spacing: 0;
    }
    
    #TABLE_REPORTING_DETAIL_ClickLog_Table tbody tr:nth-child(even) {
        background-color: #ffffff; 
    }

    .ReportingCard_NoData {
        
        color: #ebebeb;
        font-size: xx-large;
        height: 500px;
        width: 100%;
        vertical-align: middle;
        font-weight: bold;
        text-align: center;
        padding-top: 100px;
    }

    .ClickLogSelectable{
        cursor: pointer;
    }

    .ClickLogSelectable:hover{
        background-color: #e2e2e2;
    }
    
    /*Log Query entry field*/
    #TABLE_REPORTING_LOG_filter{
        margin-bottom: 5px;
    }



/*Responsive rules for job items. Make the list of jobs smaller when we have less than 2000px in width */
@media only screen and (max-width: 2000px) {
    
    #DIVReportView_Container{
        flex: 0 0 780px;
    }
    
    DIV.CtrlReport_ReportPage{
        width:760px;
    }

    TABLE.ReportingChartHolder{
        width: 720px;
    }
    
    #CtrlReport_SuccessColumn{
        width: 35%;
    }

}
/*End of reporting --------------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------------------------------------
 ***Styles for Option Dialog such as selecting a Paste Option or an Import HTML Option***
---------------------------------------------------------------------------------------------------------- */

table.SelectOptionTable, table.DialogExplanationTable {
    margin: 15px auto;
    background-color: #fafafa;
    width: 600px;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 5px;
}

td.DialogExplanationTable{
    vertical-align: top;
    padding: 10px;
}

table.SelectOptionTable:hover {
    background-color: #ccc8c8;
    opacity: 1.0;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.05);
}


.PaddingSmall {
    padding: 5px;
}

td.SelectOptionTD {
    padding: 10px;
}

td.SelectOptionInstruction {
    text-align: center;
    padding: 10px;
}


.MNR_TextInputButtonArea{
    display: inline;
    padding: 3px;
    padding-top: 5px;
}

.MNR_TextInputButton {
    display: inline;
    margin: 1px;
    color: black;
    font-size: 14px;
    padding: 10px 5px 7px 5px;
    opacity: 0.6;
    vertical-align: middle;
    cursor: pointer;
}

    .MNR_TextInputButton:hover {
        opacity: 0.9;
    }


/*Spinner*/
.MNR_Spinner {
    position: relative;
    display: inline-flex !important;
    align-items: stretch;
    height: 32px;
    vertical-align: middle;
}

/* jQuery hide() writes display:none inline; keep that state stronger than the shared flex layout. */
.MNR_Spinner[style*="display: none"] {
    display: none !important;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.MNR_Spinner input {
    box-sizing: border-box;
    height: 32px;
    float: none;
    display: block;
    margin: 0;
    padding: 3px 5px;
    text-align: left;
    text-indent: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    -webkit-appearance: none;
    appearance: textfield;
}

    .MNR_Spinner input:focus {
        outline: 0;
    }

    .MNR_Spinner input:disabled {
        background-color: white;
        border: 1px solid #eeeeee;
    }

    .MNR_Spinner-nav {
        float: none;
        position: relative;
        flex: 0 0 20px;
        width: 20px;
        height: 32px;
        margin: 0;
    }

.MNR_Spinner-button {
    position: absolute;
    left: 0;
    cursor: pointer;
    box-sizing: border-box;
    border: 1px solid #dddddd;
    border-left: 0;
    width: 20px;
    text-align: center;
    color: #555555;
    font-size: 12px;
    line-height: 15px;
    background-color: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: middle;
}

    .MNR_Spinner-button:hover{
        background-color: rgb(209, 209, 209);
    }

    .MNR_Spinner-button i {
        font-size: 10px;
        line-height: 1;
        pointer-events: none;
    }

    .MNR_Spinner-button.MNR_Spinner-up {
        height: 50%;
        top: 0;
        border-top-right-radius: 3px;
    }

    .MNR_Spinner-button.MNR_Spinner-down {
        bottom: 0;
        height: 50%;
        border-top: 0;
        border-bottom-right-radius: 3px;
    }




/*Color Picker Customizations*/
.MNR_ColorPicker {
    width: 35px;
    display: inline;
}

.MNR_ColorPicker-div {
    height: 35px;
    width: 35px;
    padding: 0;
    margin: 0;
    display: inline-block;
}

.MNR_ColorPicker-input {
    width: 120px !important;
}

.pickr {
    display: inline-block !important;
    vertical-align:top !important;
}

.pcr-app .pcr-interaction input {
    border-radius: 3px;
}

.pcr-button {
    width: 35px !important;
    height: 35px !important;
    border: 1px solid #f7f7f7 !important;
}

.pcr-save {
    color: rgb(255, 233, 231) !important;
    background-color: #EF3A23 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

    .pcr-save:hover {
        background-color: #DA3520 !important;
    }

.pcr-clear {
    color: #3F3F3F !important;
    background-color: #efefef !important;
}

    .pcr-clear:hover {
        background-color: #DADADA !important;
    }

    /*Clipboard buttons*/
.dnsConfigClipboardButton, .CtrlFormPublish_ClipboardButton{
    width: 50px; 
    text-align: center; 
    border-top-left-radius: 3px; 
    border-top-right-radius: 3px; 
    cursor: pointer; 
    background-color: #331A30; 
    font-size: 10px; 
    color: white; 
    padding: 2px; 
    margin-right: 8px; 
    margin-left: auto; 
    margin-bottom: 0;
}


/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0.5;
    }

    to {
        opacity: 1;
    }
}


/*JqueryUI Datepicker*/
.ui-datepicker{
    padding: 5px;
    border-radius: 4px;
  
}

.ui-datepicker-header{
    background-color: white;
    border: 0 solid white;
}

.ui-state-default, .ui-widget-content .ui-state-default {
    border: 0 solid white;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight {
    color: rgb(255, 233, 231);
    background-color: #EF3A23;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    color: rgb(255, 233, 231);
    background-color: #EF3A23;
}


/*QueryBuilder CSS*/
.query-builder, .query-builder * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.query-builder {
    font-family: sans-serif;
}

    .query-builder .hide {
        display: none;
    }

    .query-builder .pull-right {
        float: right !important;
    }

    .query-builder .btn {
        text-transform: none;
        display: inline-block;
        padding: 6px 12px;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.42857;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        touch-action: manipulation;
        cursor: pointer;
        user-select: none;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px;
        
    }

        .query-builder .btn.focus, .query-builder .btn:focus, .query-builder .btn:hover {
            color: #333;
            text-decoration: none;
        }

        .query-builder .btn.active, .query-builder .btn:active {
            background-image: none;
            outline: 0 none;
            box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125) inset;
        }

    .query-builder .btn-success {
        color: #FFF;
        background-color: #5CB85C;
        border-color: #4CAE4C;
    }

    .query-builder .btn-primary {
        color: #FFF;
        background-color: #337AB7;
        border-color: #2E6DA4;
    }

    .query-builder .btn-danger {
        color: #FFF;
        background-color: #D9534F;
        border-color: #D43F3A;
    }

    .query-builder .btn-success.active, .query-builder .btn-success.focus,
    .query-builder .btn-success:active, .query-builder .btn-success:focus,
    .query-builder .btn-success:hover {
        color: #FFF;
        background-color: #449D44;
        border-color: #398439;
    }

    .query-builder .btn-primary.active, .query-builder .btn-primary.focus,
    .query-builder .btn-primary:active, .query-builder .btn-primary:focus,
    .query-builder .btn-primary:hover {
        color: #FFF;
        background-color: #286090;
        border-color: #204D74;
    }

    .query-builder .btn-danger.active, .query-builder .btn-danger.focus,
    .query-builder .btn-danger:active, .query-builder .btn-danger:focus,
    .query-builder .btn-danger:hover {
        color: #FFF;
        background-color: #C9302C;
        border-color: #AC2925;
    }

    .query-builder .btn-group {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        
    }

        .query-builder .btn-group > .btn {
            position: relative;
            float: left;
            padding: 8px;
        }

            .query-builder .btn-group > .btn:first-child {
                margin-left: 0;
            }

                .query-builder .btn-group > .btn:first-child:not(:last-child) {
                    border-top-right-radius: 0;
                    border-bottom-right-radius: 0;
                }

            .query-builder .btn-group > .btn:last-child:not(:first-child) {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }

        .query-builder .btn-group .btn + .btn, .query-builder .btn-group .btn + .btn-group,
        .query-builder .btn-group .btn-group + .btn, .query-builder .btn-group .btn-group + .btn-group {
            margin-left: -1px;
        }

    .query-builder .btn-xs, .query-builder .btn-group-xs > .btn {
        padding: 1px 5px;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 3px;
    }


.form-control {
    padding: 8px;
}


/*Tag Editor*/
ul.tag-editor {
    height: 35px;
    border: none;
    border-bottom: 1px solid rgb(209, 209, 209);
    background-color: transparent;
    padding: 8px;
    font-size: 14px;
    font-family: inherit;
    vertical-align: middle;
}

option.mnr_multselect:before {
    content: "☐ "
}

option-mnr_multselect:checked:before {
    content: "☑ "
}

.select2-selection--single {
    border-radius: 0 !important;
    border: 1px solid #eee !important;
    padding: 3px !important;
    font-size: 14px !important;
    height: 36px !important;

}

.select2-container {
    border-radius: 0 !important;
    font-size: 14px;
}

.select2-selection__arrow{
    padding-top: 8px !important;
}

.select2-selection--multiple {
    border-radius: 0 !important;
    border: 1px solid #eee !important;
    padding: 3px !important;
    font-size: 14px !important;
    height: 36px !important;
}

.select2-selection__choice {
    border: 0 solid #eee !important;
    border-radius: 2px !important;
    background-color: #eee;
    height: 22px;
}

.select2-search__field{
    width: 99%!important;
}


.selectize-input {
    border-radius: 0 !important;
    border: 1px solid #eee !important;
    height: 36px !important;
}

.selectize-control.plugin-remove_button [data-value] .remove {
    border-left: 0 none !important;
}

input[type=checkbox].mnr-checkbox {
    position: absolute;
    z-index: -1000;
    left: -1000px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

    input[type=checkbox].mnr-checkbox + label.mnr-label {
        padding-left: 30px;
        height: 25px;
        display: inline-block;
        line-height: 25px;
        background-repeat: no-repeat;
        background-position: 0 0;
        font-size: 14px;
        vertical-align: middle;
        cursor: pointer;
        margin-bottom: 20px;
    }

    input[type=checkbox].mnr-checkbox:checked + label.mnr-label {
        background-position: 0 -25px;
    }

label.mnr-label {
    background-image: url(http://csscheckbox.com/checkboxes/u/csscheckbox_391ce065f36b1460c4845fa9b5173fba.png);
    background-image: url(../images/mnrcheckbox_red.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.rule-value-container{
    width: 200px;
}


DIV.DlgConnectionManager_Tab{
    height: 490px;
}

/*AI editor*/
/* Base style for each newsletter element */
.MNR_Editor_AI_NewsletterElement {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    text-align: left;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    background-color: #f9f9f9;
    position: relative;
    display: block;
    box-sizing: border-box;
    max-width: 600px;
}

/* Adjust width dynamically for different indentation levels */
.MNR_Editor_AI_Indent-0 { width: 400px; }
.MNR_Editor_AI_Indent-1 { width: 370px; margin-left: 15px; }
.MNR_Editor_AI_Indent-2 { width: 340px; margin-left: 30px; }
.MNR_Editor_AI_Indent-3 { width: 310px; margin-left: 45px; }
.MNR_Editor_AI_Indent-4 { width: 280px; margin-left: 60px; }
.MNR_Editor_AI_Indent-5 { width: 250px; margin-left: 75px; }
.MNR_Editor_AI_Indent-6 { width: 220px; margin-left: 90px; }

/* Headline styling */
.MNR_Editor_AI_NewsletterTitle {
    font-weight: bold;
    margin-bottom: 5px;
    text-align: left;
}

/* Content area */
.MNR_Editor_AI_NewsletterContent {
    font-size: 14px;
    color: #555;
    text-align: left;
    padding-left: 0px;
    width: 100%;
}

/* Trashcan button */
.MNR_Editor_AI_DeleteButton {
    color: gray;
    cursor: pointer;
    padding: 5px;
    position: absolute;
    top: 10px;
    right: 10px;
}

.MNR_Editor_AI_ImageDeleteButton {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    box-shadow: none;
    cursor: pointer;
    display: block;
    height: 18px;
    line-height: 18px;
    padding: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 18px;
    z-index: 1;
}

.MNR_Editor_AI_ImageDeleteButton i {
    font-size: 11px;
}

/* Multi-column layout */
.MNR_Editor_AI_MultiColumnLayout {
    display: flex;
    gap: 5px;
    width: 100%;
    flex-wrap: nowrap;
    overflow: hidden;
    justify-content: space-between;
    padding-top: 15px;
}

.MNR_Editor_AI_NewsletterWizard {
    float: none;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.MNR_Editor_AI_NewsletterWizardStep {
    width: 100%;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

#DlgAICreateNewsletter .MNR_PopupBox_Content {
    height: calc(100% - 54px);
}

.MNR_Editor_AI_PillContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 6px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.MNR_Editor_AI_Pill {
    display: inline-block;
    border: 1px solid #b7cce0;
    background: #eaf1f8;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 13px;
    line-height: 1.2;
    color: #2f5d8c;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}

.MNR_Editor_AI_Pill:hover {
    border-color: #336699;
    background: #dce9f5;
    color: #264b70;
}

.MNR_Editor_AI_Pill_Active {
    background: #336699;
    border-color: #336699;
    color: #ffffff;
}

#CropperToolbar {
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 5px;
    background: black;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.MNR_Black_Toolbar_Button {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    transition: 0.2s;
    font-size: 16px;
}

.MNR_Black_Toolbar_Button i {
    margin: 0;
}

.MNR_Black_Toolbar_Button:hover {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
}


/*This defined the look of pop-up buttons, e.g. for moving an element or opening the menu*/
.MNR_Image_Toolbar {
    padding: 0px;
    visibility: hidden;
    cursor: pointer;
    position: absolute;
    border: 1px solid black;
    border-radius: 5px 5px;
    background-color: black;
    opacity: 1.0;
    display: flex;
    gap: 5px;
    z-index: 30;
}

.MNR_Image_Toolbar_Button {
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: black;
    border: none;
    color: white;
    cursor: pointer;
    transition: 0.2s;
    font-size: 16px;
    padding: 5px;
}

.MNR_Image_Toolbar_Button i {
    margin: 0;
}

.MNR_Image_Toolbar_Button:hover {
    background: #2b2b2b;
}


/*Our pure HTML editor*/
.pure-editor-btn.active {
    background: rgba(255, 255, 255, 0.15);
    color: #ffd700 !important;
}

/* Image crop tools use visible labels for zoom, rotation and reset. */
#CropperToolbar {
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 8px;
    background: #f0f3f5;
}
#CropperToolbar button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid #b9c3cd;
    border-radius: 4px;
    background: white;
    color: #263744;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
#CropperToolbar button:hover { border-color: #245b85; }
#CropperToolbar button:focus-visible { outline: 2px solid #245b85; outline-offset: 2px; }
#DlgImageEditor_Content { max-height: 48vh; }