/* 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;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

/*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 {
    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;
}

@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;
}


/*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 {
    float: right;
}

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;
}

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;
}


/**/
/*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 {
    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;
}

@media only screen and (max-width: 1300px) {
    div.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;
    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;
    }
}

div.MNR_ToolbarButton {
    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: 75px;
    cursor: pointer;
    -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_ToolbarButton {
        padding: 1px;
    }
}

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

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

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

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

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

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

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

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

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;
}

div.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;
}

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

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

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

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

div.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;
}

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: 90;
    background-color: rgba(0,0,0, .7);
    position: absolute;
}

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;
}

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;
}

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;
}

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

    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;
}

/* 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;
}

/* 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;
}


.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;
}

.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;
    width: 535px;
}

.DlgConnectionManager_CreateConnection_Selector{
    background-color: white; 
    text-align: center; 
    padding: 20px; 
    border-radius: 15px;
    width: 110px;
    display: inline-block;
    margin: 10px;
    cursor: pointer;
    color: black;
}

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

.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;
}

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: -6px;
    border: 0 none;
    left: 0;
    background-color: white;
    display: inline-block;
    position: relative;
}

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

.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 {
    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;
}

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_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_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_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;
}

.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; text-align: center; color: #331A30;
}

/*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;
    zoom: 1.0;
}

/*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;*/
}


/*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: 300px;
    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: 300px;
    left: -300px;
    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: 220px;
    }

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

/*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: 15px 15px 15px 15px;
}

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

/*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: block;
    max-height: 100000px;
    -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%;
}

/*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 {
        max-width: 250px;
        max-height: 100%;
        display: block;
        margin-left: auto;
        margin-right: auto;
        -webkit-user-drag: element;
        -webkit-user-select: none; /* Safari */
        -ms-user-select: none; /* IE 10 and IE 11 */
        user-select: none; /* Standard syntax */
        border-radius: 3px;
        
    }


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

    .Newsletter_Element_List_Item:hover {
        box-shadow: 5px 5px 5px #464A45;
    }


    /*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_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: 305px;
        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: 225px;
    }
}

    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: 305px;
        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: 225px;
    }
}


    /*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;
    }

    /*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;*/
    }


.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 {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    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 300px;
    overflow-y: auto;
    padding: 10px;
    background-color: #f2f2f2;
}

#DIVListView_Container {
    flex: 1;
    border-left: 1px solid gray;
    overflow: hidden;
}

#DIVListEditor {
    padding: 0;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
}

/*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 10px;
    margin-top: 10px;
}

/*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;
}

/*List of categories in the recipients tab*/
.ListEditor_CategoryItem {
    display: block;
    /*background-color: #f7f7f7;*/
    background-color: #fbfbfb;
    width: 95%;
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    text-align: left;
    font-size: 16px;
    font-family: "Open Sans", sans-serif;
}

DIV.ListEditor_CategoryItem:hover {
    background-color: #f8f8f8;
    box-shadow: rgba(128,128,128, 0.4) 0 0 2px;
}

/*The same items with a selected status*/
DIV.ListEditor_CategoryItem_Selected {
    /*background-color: white;
    box-shadow: rgba(128,128,128, 0.8) 0 0 2px;*/
    background-color: #f0f0f0;
    font-weight: bold;
}

DIV.ListEditor_CategoryItem_DateSeparator{
    width: 96%;
    text-align: left;
    margin-top: 20px;
    margin-bottom: 15px;
    padding-left: 5px;
    font-weight: bold;
    font-size: 20px;
}

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{
    margin-bottom: 7px;
}

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

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

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





/*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: 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: 1px;
    white-space: nowrap;
    max-height: 35px;
}

    /*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: 1px solid rgb(209, 209, 209);
    background-color: rgb(250,250,250);
    color: rgb(126, 126, 126);
    padding-left: 10px;
    padding-right: 10px;
    cursor: pointer;
    font-weight: normal;
    white-space: nowrap;
}

    /*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;
    }

    /*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.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;
}

div.PreviewChooseMode_Button {
    display: inline-block;
    padding: 15px;
    height: 45px;
    width: 150px;
    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;
}

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

/*Button*/
div.MNR_Button, div.MNR_Button_Blue, div.MNR_Button_Gray, div.MNR_Button_Red {
    vertical-align: middle;
    text-align: center;
    /*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;
}

div.MNR_BigButton {
    width: 220px;
    padding-top: 30px;
    padding-bottom: 30px;
    font-size: 24px;
    margin-top: 15px;
}

div.MNR_Button:hover {
    box-shadow: rgba(128, 128, 128, 0.9) 1px 1px 3px;
    background-color: #2f5d8c;
}

    div.MNR_Button_Gray[disabled] {
        color: rgba(181, 173, 173, 0.7);
        background-color: #efefef;
        cursor: default;
    }

        div.MNR_Button_Gray[disabled]:hover {
            color: rgba(181, 173, 173, 0.7);
            background-color: #efefef;
            cursor: default;
        }

div.MNR_Button_Blue {
    color: rgb(255, 233, 231);
    background-color: #336699;
}

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

div.MNR_Button_Red {
    color: rgb(255, 233, 231);
    background-color: #EF3A23;
}

    div.MNR_Button_Red:hover {
        background-color: #DA3520;
    }

div.MNR_Button_Gray {
    color: #3F3F3F;
    background-color: #efefef;
}

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

    .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);
    }


/*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;
}

/* When the checkbox is checked, add a red background */
.mnr_checkbox_container input:checked ~ .mnr_checkbox_checkmark {
    background-color: #EF3A23;
}

/* 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;
    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;
    }

    .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;
    overflow-y: auto;
    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;
    }

    .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: 150px;
        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;
}

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;
}

.MNR_Spinner input {
    height: 26px;
    float: left;
    display: block;
    padding: 0;
    margin: 0;
    padding: 3px;
    text-align: start;
    text-indent: 5px;
}

    .MNR_Spinner input:focus {
        outline: 0;
    }

    .MNR_Spinner input:disabled {
        background-color: white;
        border: 1px solid #eee;
    }

    .MNR_Spinner-nav {
        float: left;
        position: relative;
        height: 32px;
    }

.MNR_Spinner-button {
    position: relative;
    cursor: pointer;
    border-left: 1px solid #eee;
    width: 20px;
    text-align: center;
    color: #333;
    font-size: 12px;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -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.MNR_Spinner-up {
        position: absolute;
        height: 50%;
        top: 0;
        border-bottom: 1px solid #eee;
    }

    .MNR_Spinner-button.MNR_Spinner-down {
        position: absolute;
        bottom: -1px;
        height: 50%;
    }




/*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;
}

/* 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;
}

#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;
}