@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');
@import '../../assets/user_theme_css/user_theme.css';

:root {
    /*or just body*/
    --prClr: #046DFF;
    --srClr: #020A13;
    --trClr: #22364C;
    --frClr: #c2e7ff;
    --ffClr: #f3f7fc;
    --sxClr: #f8fafd;
    --svClr: #576E87;
    --lgClr: #F9FAFB;
    --brClr: #576e8740;
    --bgClr: #fff;
    --bgylw: #fef65c;
    --scClr: #49de12;
    --erClr: #d00b22;
    --ts: .3s all ease-in-out;
    --br: 10px;
    --font: 'Lexend', sans-serif;

    --fs14: 14px;
    --fs16: 16px;


    /* --blueish: #4a77c3;  
    --blueishText: #F8F8F8; 
    --menuItem: #c7c7c7;   
    --menuItemHover: #4f80d1;
    --headings: #202123;     
    --popOverBack: #0066cc;  
    --faIconColor: #656565;  
    --bodyBackColor: #fff; 
    --bodyTextColor: #202123; 
    --roweven: #eaf0ff;
    --rowevenHover: #FAF9F6;
    
    --arrowDown: url(../images/arrow_d_w.png);
    --arrowUp: url(../images/arrow_u_w.png);
    --sidebar: #202123; 
    --highlight: #C4DBFC; */
}

.darkTheme {
    --blueish: #000000;
    --blueishText: #dddddd;
    --menuItem: #dddddd;
    --menuItemHover: #9ecaff;
    --headings: #dbdbdb;
    --popOverBack: #212121;
    --faIconColor: #dddddd;
    --bodyBackColor: #313131;
    --bodyTextColor: #c7c7c7;
    --roweven: #444;
    --rowevenHover: #222;
    --arrowDown: url(../images/arrow_d_w.png);
    --arrowUp: url(../images/arrow_u_w.png);
    --sidebar: #2f2f2f;
    --highlight: #41151b;
}

/* .purpleTheme {
    --blueish: #4F46E5;
    --blueishText: #dfdfdf;
    --menuItem: #cab6ff;
    --menuItemHover: #FFFFFF;
    --headings: #4F46E5;
    --popOverBack: #4F46E5;
    --faIconColor: #544af4;
    --bodyBackColor: #FAF5FF;
    --bodyTextColor: #555;
    --roweven: #F5F5F5;
    --rowevenHover: #f0eded;
    --arrowDown: url(../images/arrow_d_w.png);
    --arrowUp: url(../images/arrow_u_w.png);
    --sidebar: #2e2987;
    --highlight: #C4DBFC;
}

.coffeeTheme {
    --blueish: #61321e;
    --blueishText: #E8D8C4;
    --menuItem: #f8e7d2;
    --menuItemHover: #c57138;
    --headings: #804227;
    --popOverBack: #4E3F33;
    --faIconColor: #804227;
    --bodyBackColor: #FBF2EA;
    --bodyTextColor: #41151b;
    --roweven: #f6e5d0;
    --rowevenHover: #f0eded;
    --arrowDown: url(../images/arrow_d_w.png);
    --arrowUp: url(../images/arrow_u_w.png);
    --sidebar: #561C24;
    --highlight: #C4DBFC;
}
.greenTheme {
    --blueish: #19a526;
    --blueishText: #ccff68;
    --menuItem: #efefef;
    --menuItemHover: #ccff68;
    --headings: #19a526;
    --popOverBack: #157335;
    --faIconColor: #87A922;
    --bodyBackColor: #F8F8F8;
    --bodyTextColor: #555;
    --roweven: #F5F5F5;
    --rowevenHover: #f0eded;
    --arrowDown: url(../images/arrow_d_w.png);
    --arrowUp: url(../images/arrow_u_w.png);
    --sidebar: #468c46;
    --highlight: #C4DBFC;
}
.orangeTheme {
    --blueish: #ed7700;
    --blueishText: #FFFFFF;
    --menuItem: #FFFFFF;
    --menuItemHover: #ffff00;
    --headings: #c06000;
    --popOverBack: #ed7700;
    --faIconColor: #c06000;
    --bodyBackColor: #FFFFFF;
    --bodyTextColor: #555;
    --roweven: #F5F5F5;
    --rowevenHover: #f0eded;
    --arrowDown: url(../images/arrow_d_w.png);
    --arrowUp: url(../images/arrow_u_w.png);
    --sidebar: #ff8000;
    --highlight: #C4DBFC;
} */

html {
    height: 100%;
    width: 100%;
}

body {
    height: 100%;
    width: 100%;
    font-family: var(--font) !important;
    font-weight: 400;
    font-size: 14px;
    color: var(--trClr);
    background-color: var(--bgClr);
    padding: 0;
    /*transition: font-size 0.2s ease-in-out;*/
}

.flex-1 {
    flex: 1 !important;
}

input.form-control:-webkit-autofill,
input.form-control:-webkit-autofill:hover,
input.form-control:-webkit-autofill:focus,
input.form-control:-webkit-autofill:active {
    -webkit-text-fill-color: var(--srClr) !important;
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    box-shadow: 0 0 0 1000px #fff inset !important;
    background-color: var(--bgClr) !important;
    caret-color: var(--srClr);
    transition: background-color 9999s ease-out 0s;
}

.select {
    color: var(--bodyTextColor) !important;
}

.cursor-pointer {
    cursor: pointer !important;
}


.fa:hover,
a.fa,
a.fa:hover,
a.fa:link,
a.fa:visited,
.fas:hover,
a.fas,
a.fas:hover,
a.fas:link,
a.fas:visited,
.fab:hover,
a.fab,
a.fab:hover,
a.fab:link,
a.fab:visited,
.far:hover,
a.far,
a.far:hover,
a.far:link,
a.far:visited {
    text-decoration: none;
}

.fa:hover,
a.fa:hover,
.fas:hover,
a.fas:hover,
.fab:hover,
a.fab:hover,
.far:hover,
a.far:hover {
    color: var(--headings)
}

.fa-file-image {
    color: var(--faIconColor);
}

img[class*="svg"] {
    fill: var(--faIconColor);
    stroke: var(--faIconColor)
}

img[class*="svg"]:hover {
    fill: var(--blueishText);
    stroke: var(--blueishText)
}

::placeholder {
    color: #576e8741 !important;
}

span[class*="trash"]:hover {
    color: red !important;
}

.company {
    opacity: 0.7;
    color: var(--menuItem);
    /*font-family: Montserrat, Raleway, Verdana, Tahoma, Arial, Helvetica;*/
    font-size: 135%;
    font-weight: 400;
    /*word-wrap: break-word;*/
    word-break: break-word;
}

/*v.10.1*/
.topHeaderIconsBox {
    padding: 6px 18px;
    background: var(--sidebar) !important;
    border-radius: 8px 8px 8px 8px;
    transition: top .2s ease-in-out;
    position: fixed;
    top: 5px;
    right: 5px;
    z-index: 1000
}

.topHeaderIcons {
    color: var(--menuItem) !important;
    opacity: 0.8;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.5rem !important;
}

.topHeaderIcons:hover {
    color: var(--menuItemHover) !important;
}

.pageIcons {
    display: none;
    opacity: 0.4;
}

h1 {
    font-family: var(--font);
}

h2 {
    font-family: var(--font);
}

h3 {
    font-family: var(--font);
}

.overlay {
    opacity: 0.3;
    filter: alpha(opacity=0);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background: var(--bgClr) !important
}

.subsBox span {
    color: var(--brClr);
    font-weight: 600;
}

.subsBox {
    border-radius: var(--br);
    background: var(--bgClr);
    border-style: solid;
    border-color: var(--brClr1);
    border-width: 1px;
    box-shadow: 0 0 20px var(--brClr1) !important;
    padding: 25px 24px !important;
}

.subsBox:hover {
    box-shadow: #535353 0 16px 28px 0 !important;
}

.subsBox>a {
    text-decoration: none !important;
}

.subsBox div:hover span,
.subsBox div[class*="row"]:hover,
.subsBox div:hover span[class*="fas "],
.subsBox div:hover span[class*="far "] {
    color: var(--bgClr) !important;
    background-color: var(--prClr) !important;
    text-decoration: none !important;
}

.campaignsBox span {
    color: var(--bodyTextColor);
}

.campaignsBox {
    border-radius: var(--br);
    background: var(--bgClr);
    border-style: solid;
    border-color: var(--brClr1);
    border-width: 1px;
    box-shadow: 0 0 20px var(--brClr1) !important;
    padding: 25px 24px !important;
}

.campaignsBox:hover {
    box-shadow: #535353 0 16px 28px 0 !important;
}

.campaignsBox>a {
    text-decoration: none !important;
}

.campaignsBox div:hover span,
.campaignsBox div[class*="row"]:hover,
.campaignsBox div:hover span[class*="fas "],
.campaignsBox div:hover span[class*="far "] {
    color: var(--blueishText) !important;
    background-color: var(--blueish) !important;
    text-decoration: none !important;
}

.nslBox span {
    color: var(--bodyTextColor);
}

.nslBox {
    border-radius: var(--br);
    background: var(--bgClr);
    border-style: solid;
    border-color: var(--brClr1);
    border-width: 1px;
    box-shadow: 0 0 20px var(--brClr1) !important;
    padding: 25px 24px !important;
}

.nslBox:hover {
    box-shadow: #535353 0 16px 28px 0 !important;
}

.nslBox>a {
    text-decoration: none !important;
}

.nslBox div:hover span,
.nslBox div[class*="row"]:hover {
    color: var(--blueishText) !important;
    background-color: var(--blueish) !important;
    text-decoration: none !important;
}

.subsBox2 span {
    color: var(--bodyTextColor);
}

.subsBox2 {
    /*background: #F8F8F8;*/
    /*background: linear-gradient(to left, #F8F8F8, #FFF);*/
    /*box-shadow: #535353 0 10px 20px 0 !important;*/
    border-style: solid;
    border-color: var(--blueish);
    border-width: 0 0 0 8px;
}

.subsBox2:hover {
    box-shadow: #535353 0 16px 28px 0 !important;
}

.subsBox2>a {
    text-decoration: none !important;
}

.subsBox2 div[class*="col"]:hover,
.subsBox2 div[class*="col"]:hover span {
    color: var(--blueishText) !important;
    background-color: var(--blueish) !important;
    text-decoration: none !important;
}

.shadowBox {
    /*box-shadow: #535353 0 10px 20px 0 !important;*/
}

.shadowBox:hover {
    box-shadow: #535353 0 16px 28px 0 !important;
}

.homeBoxLarge {
    font-family: var(--font);
    font-size: 18px;
    font-weight: 600;
    text-decoration: none !important;
}


.statsLabel {
    color: var(--headings);
    font-weight: 400;
}

._statsLabel {
    color: var(--headings);
    font-size: 105%;
    font-weight: 400;
}

.statsLabel2 {
    color: var(--headings);
    font-size: 125%;
    font-weight: 500
}

.smallTitle {
    color: var(--bodyTextColor);
    font-size: 125%;
    font-weight: 400
}

a,
a:link,
a:visited {
    color: var(--bodyTextColor);
    text-decoration: underline
}

a:hover {
    color: var(--headings);
}

a.none {
    text-decoration: none;
}

a:active {
    color: var(--bodyTextColor)
}

a.cross,
a.cross:link,
a.cross:visited,
.pageIcons {
    color: red;
    text-decoration: none
}

a.cross:link,
a.cross:visited,
a:active,
a:hover {
    text-decoration: none
}

.cross:hover,
a.cross:hover {
    color: var(--headings);
}

.iconHover {
    font-size: 0.9rem;
    color: #333;
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}

.iconHover:hover {
    /*color: #111 !important;*/
    background-color: #e1e1e1 !important;
    border: 1px #999 solid;
    border-radius: 4px;
}

.okmessage {
    font-weight: 400;
    background: var(--scClr);
    color: var(--srClr);
    width: 100%;
    padding: 6px 10px;
    text-align: left;
    position: relative;
    border-radius: var(--br);
    display: flex;
    font-size: 12px;
    align-items: center;
}

.okmessage::after {
    color: var(--srClr);
    font-family: "Font Awesome 5 Free";
    content: "\f058";
    font-weight: 900;
    font-size: 140%;
    opacity: 0.9;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

#messageBoxText,
.messageBoxText {
    display: inline-block;
    vertical-align: middle;
    padding-left: 28px;
}

#messageBoxBubble.alert {
    width: max-content;
    min-width: 0;
    max-width: calc(100vw - 32px);
    right: 16px !important;
    bottom: 24px !important;
    z-index: 1090 !important;
    margin: 0;
    padding: 14px 44px 14px 12px;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(33, 37, 41, 0.2);
}

#messageBoxBubble #messageBoxText {
    min-width: 0;
    max-width: 360px;
    overflow-wrap: anywhere;
}

#messageBoxBubble .close {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

#messageBoxBubble .close span {
    color: inherit !important;
    text-shadow: none !important;
    position: static;
}

.okmessage100 {
    font-weight: 400;
    background: #D4EDDA;
    border: 1px solid #c3e6cb;
    ;
    color: #555555;
    border-radius: 4px;
    padding: .75rem 1.25rem;
    text-align: center;
}

.errormessage {
    font-weight: 400;
    background: #ff0419;
    color: #FFFFFF;
    width: 100%;
    padding: 6px 10px;
    text-align: left;
    position: relative;
    border-radius: var(--br);
    display: flex;
    font-size: 12px;
    align-items: center;
}

.errormessage::after {
    color: #FFFFFF;
    font-family: "Font Awesome 5 Free";
    content: "\f057";
    font-weight: 900;
    font-size: 140%;
    opacity: 0.9;
    position: absolute;
    /* Position icon absolutely */
    left: 10px;
    /* Adjust the left position */
    top: 50%;
    /* Move to the vertical center */
    transform: translateY(-50%);
    /* Center vertically */
}

.errormessage100 {
    font-weight: 400;
    background: #FFF3CD;
    color: #555555;
    border-color: #c8bfa1 #c8bfa1 #c8bfa1 #902922;
    border-width: 1px 1px 1px 5px;
    border-style: solid;
    padding: .75rem 2.5rem .75rem 1.25rem;
    text-align: center;
}

.dbfield {}

/*.holderDiv {
    background: #FFF;
    border-color: #555;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    box-shadow: 0 -1px 12px 5px rgba(119, 119, 119, 1);
    margin: 0;
    padding: 0;
    position: fixed;
    z-index: 1000;
    cursor: move
}*/

.frameHolder {
    height: 100%;
    width: 100%
}

.settingsTab {
    border-radius: 5px;
    font-family: var(--font);
    display: inline-block;
    cursor: pointer;
    width: 100%;
    outline: 0;
    font-weight: 400;
    /*padding-bottom: 8px;*/
}

.settingsTab::after {
    font-family: "Font Awesome 5 Free";
    content: "\f055";
    font-weight: 900;
    font-size: 170%;
    opacity: 0.9;
    float: right;
    padding-right: 15px;
    padding-bottom: 6px;
    /*position: relative;
    right: 20px;
    padding: 0;*/
}

.changed::after {
    content: "\f056"
}

.listsTab {
    background: var(--blueish);
    color: var(--blueishText);
    font-size: 110%;
    line-height: 1.6;
    padding: 12px 0 0 12px;
}

.listsTab::after {
    font-size: 125%;
}

.confirmBox {
    /*not used */
    border: 1px solid #343434;
    border-radius: 10px;
    background: #494949;
    cursor: move;
    text-align: center;
    width: 380px
}

.confirmBoxTop {
    /*not used */
    color: #ffff22;
    /*font-family: var(--font);*/
    font-size: 125%;
    padding: 10px 0 0 0;
}

.confirmBoxBottom {
    /*not used */
    color: #FFFFE0;
    font-size: 115%;
    padding: 15px 20px 20px 20px;
}

.campaignHeader {
    background: var(--blueish);
    color: var(--blueishText);
    font-family: var(--font);
    font-weight: 400;
    font-size: 130%;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    padding: 6px 10px 8px 1px
}

/*Button with campaign options*/
.cmp:hover>.dropdown-menu {
    display: block;
}

.headerIcon,
.headerIcon:hover {
    color: var(--blueishText);
}

textarea {
    color: var(--bodyTextColor) !important;
    border-radius: 3px;
    border: 1px solid #CCC;
    background: #FFF;
    padding: 6px 8px;
    box-shadow: 0 0 3px 0 #CCC inset
}

input[type="checkbox"] {
    width: 16px;
    height: 16px;
    filter: hue-rotate(350deg);
}

.filterDesc,
.filterSql {
    /*background: var(--bodyBackColor);*/
    line-height: 200%;
    border-radius: 6px;
    word-wrap: break-word;
    padding: 6px;
}

.addPencil::after {
    position: relative;
    right: -10px;
    content: "\f303";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--faIconColor);
}

/*admin/scripts/jquery.jeditable.js*/
.editBox {
    box-shadow: 0 0 3px 0 #CCC inset;
    padding: 2px;
    color: #212529;
    border-radius: 3px;
    background: #fdfdfd;
    font-size: inherit !important;
    height: inherit !important;
    border: 0 !important;
}

.filterSql {
    margin-top: 8px
}

.nslSubject {
    background: transparent;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #e2e1df;
    border-radius: 5px;
    color: #1b1e21;
    font-size: 155% !important;
    text-align: left;
    text-decoration: none;
}

.pgn-ttl {
    font-size: 16px;
    font-weight: 400;
    color: var(--trClr);
}

.inav {
    color: var(--bgClr) !important;
    text-decoration: none;
    background-color: var(--prClr) !important;
    position: relative;
    display: inline-block;
    padding: 6px 10px;
    margin-left: 2px;
    line-height: 135%;
    border: 1px solid var(--brClr);
    font-size: 11px;
    font-weight: 500;
    border-radius: var(--br);
}

a.inav2 {
    color: var(--svClr) !important;
    text-decoration: none;
    background-color: var(--bodyBackColor);
    position: relative;
    display: inline-block;
    padding: 6px 10px;
    margin-left: 2px;
    line-height: 135%;
    border: 1px solid var(--brClr);
    font-size: 11px;
    font-weight: 500;
    border-radius: var(--br);
}

a.inav2:hover {
    background-color: var(--prClr);
    color: var(--bgClr) !important;
    border: 1px solid var(--prClr);
}

/******     TABLES      */


.dropdown-toggle {
    border-color: var(--bodyTextColor);
    color: var(--bodyTextColor);
}

.dropdown-toggle:hover {
    /*border-color: blue;
    color: green;*/
}

.fascMailer {
    font-family: var(--font);
    color: #4d7ccc;
    font-size: 1.1rem;
    opacity: 0.7;
}

a.langLink,
a.langLink:link,
a.langLink:visited,
a.langLink:active {
    color: #4d7ccc;
    /*gray 9a9a9a*/
    text-decoration: none;
    opacity: 0.7;
}

.indexLangs {
    font-size: 90%;
    background-color: #27314e
}

.faIconIndex {
    color: #555555;
    font-size: 1.5em;
}



/*jqTableKitJs*/
.nosort {
    cursor: default
}

.sortcol {
    cursor: pointer;
}

.tbl-div_box>thead>tr>td {
    font-size: 13px;
    color: var(--srClr);
    white-space: nowrap;
    font-weight: 300;
    position: relative;
}

.fs15_label {
    font-size: 15px !important;
    color: var(--svClr) !important;
}

.tbl-div_box>thead>tr>td:first-child::before {
    content: '';
    position: absolute;
    right: 0;
    top: 36%;
    width: 10px;
    height: 10px;
    background-image: url(../../assets/fascMailer/sort.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.tbl-div_box tbody>tr>td.listingCell {
    line-height: 150%;
    /* padding: 8px 10px; */
    padding: 15px 10px;
    font-size: 14px;
}

.tbl-div_box tbody>tr>td.listingCell>p {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin: 0;
    color: var(--prClr);
}

.tbl-div_box>thead>tr {
    border: none !important;
}

.api_width>span {
    text-overflow: ellipsis;
    width: 50px;
    overflow: hidden;
}

.cpy-div_icn {
    width: 24px;
    cursor: pointer;
}

.tbl-div_box tbody>tr.rowodd td,
.tbl_srl tbody>tr td,
.tbl-div_box tbody>tr.roweven td {
    padding: 15px 10px;
    border-top: 1px solid #22364c1f !important;
    /* border: none; */
}

.tbl-div_box tbody>tr.rowodd span,
.listingCell,
.tbl-div_box tbody>tr.roweven span {
    color: var(--svClr) !important;
}

.smtp-modal-actions {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin: 0;
}

.smtp-modal-actions .smtp-save-button {
    margin: 0;
    min-height: 40px;
    padding: 10px 24px;
    border-radius: 10px;
}

/* 
#updateSMTP select.form-control {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 48px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='m4 7 6 6 6-6' fill='none' stroke='%23cdd4dc' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 18px 18px;
} */

.tick-msg_icn {
    width: 30px;
    margin: 0 auto;
}

th.resize-handle-active {
    cursor: e-resize
}

div.resize-handle {
    border-right: 1px dashed var(--blueish);
    cursor: e-resize;
    left: 0;
    position: absolute;
    top: 0;
    width: 2px
}

.deleted {
    color: #ff0000
}

/** BOOTSTRAP OVERRIDES START*/

.dropdown-menu,
.dropdown-menu div.dropdown-item

/*
? Required to exclude the top nav menu: applies to campaigns, lists, ARs dropdowns
, .dropdown-submenu .dropdown-submenu .dropdown-item :not(.nav-link, a.nav-link)*/
    {
    color: var(--bodyTextColor);
    background-color: var(--bodyBackColor);
}

/* Required for mini dropdowns*/
.dropdown-menu div.dropdown-item:hover,
.dropdown-menu .dropdown-item:hover>.fas,
.dropdown-menu .dropdown-item:hover>.far {
    color: var(--trClr);
    background-color: var(--frClr);
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: var(--trClr);
    background-color: var(--frClr);
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
}


input[type=text]:read-only {
    background-color: #f4f7fa !important;
}



.form-control {
    padding: 10px 20px;
    margin: 0;
    border: 1px solid #e2e8f0;
    height: 50px;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--br);
    background: #fff !important;
}

.dropdown-menu {
    width: 100%;
    background: var(--bgClr);
    z-index: 999;
    position: relative;
}

.dropdown-menu .dropdown-item {
    color: var(--trClr);
    text-decoration: none;
    background-color: var(--bgClr);
    font-size: 14px !important;
    font-weight: 400;
    z-index: 99;
    position: relative;
    /* padding: 4px 15px !important; */
    white-space: normal;
    transition: var(--ts);
}

.dropdown-menu>li>a:hover>span,
.dropdown-menu>li.selected>a>span {
    color: var(--prClr) !important;
}

.dropdown-header {
    display: block;
    padding: 2px 18px;
    margin-bottom: 0;
    font-size: 12px;
    color: var(--svClr);
    white-space: nowrap;
    font-weight: 400;
    opacity: .7;
}

.bootstrap-select .no-results {
    padding: 3px 10px;
    background: transparent;
    margin: 0 13px;
    white-space: nowrap;
    font-size: 14px;
    color: var(--svClr);
    font-weight: 400;
    opacity: .8;
}

.dropdown-toggle::after {
    background-image: url(../../assets/fascMailer/right-arrow.svg);
    background-size: contain;
    border: none !important;
    width: 13px;
    height: 13px;
    background-repeat: no-repeat;
    transform: rotate(90deg);
    background-position: top;
}

.form-control-sm {
    color: var(--bodyTextColor);
    background: var(--bodyBackColor);
    font-size: 95%;
    border: 1px solid var(--brClr1);
    margin: 0.2rem 0.30rem 0 0;
    height: 38px;
}

.form-control:focus,
.form-control-sm:focus {
    /* color: var(--bodyTextColor);
    background: var(--bodyBackColor); */
}

/*  CHOSEN OVERRIDES  */
.chosen-container {
    font-size: 95% !important;
}

/*Gives background to whole container*/
.chosen-container .chosen-drop {
    background: var(--bodyBackColor);
}

/*Gives color to all li items except disabled both multi & single*/
.chosen-container .chosen-results {
    color: var(--bodyTextColor);
    background: var(--bodyBackColor);
}

.chosen-container .chosen-results li {
    line-height: 1.5;
}

/*What's already selected in the top box */
.chosen-container-multi .chosen-choices li.search-choice {
    color: var(--blueishText);
    background-color: var(--blueish);
}

/*Same as above for more inner targeting*/
.chosen-container-multi .chosen-choices li.search-choice span {
    /*color:  var(--bodyBackColor) !important;
    background-color: var(--bodyTextColor) !important;*/
}

/*First li in the drop-down*/
.chosen-container-multi .chosen-results li.highlighted {
    /*color: red;*/
}

/* Multi container  - Hover on li items*/
.chosen-container-multi .chosen-results li.active-result:hover {
    color: var(--blueishText);
    background-color: var(--blueish);
}

/* Already selected in the doprdown*/
.chosen-container-multi .chosen-results li.result-selected {
    /*color: var(--bodyBackColor);
    background-color: var(--blueish);*/
    opacity: 0.6;
}

/* HOver on already selected in the doprdown*/
.chosen-container-multi .chosen-results li.result-selected:hover {
    opacity: 0.6 !important;
    color: var(--blueishText) !important;
    background-color: var(--blueish) !important;
}

/*Single container, hover on li*/
.chosen-container-single .chosen-results li.active-result:hover {
    color: var(--blueishText);
    background-color: var(--blueish);
    cursor: pointer;
}

/* Single container: Already selected in the doprdown. Does not exist in chosen.css*/
.chosen-container-single .chosen-results li.result-selected {
    color: var(--blueishText);
    background-color: var(--blueish);
    opacity: 0.8;
}

/*It is done with highlighted*/
.chosen-container-single .chosen-results li.highlighted {
    cursor: default;
}

/* The above on hover*/
.chosen-container-single .chosen-results li.result-selected:hover {
    cursor: default;
}

.chosen-container-single .chosen-single {
    background-color: var(--bodyBackColor);
    color: var(--bodyTextColor) !important;
}

.chosen-container-single .chosen-single span {
    /*opacity: 0.9;*/
    /*color:  var(--bodyTextColor) !important;
    background-color: var(--bodyBackColor);*/
}

.chosen-container-multi .chosen-choices li.search-field input[type=text] {
    opacity: 0.7;
    color: var(--bodyTextColor) !important;
    background-color: transparent;
}

.chosen-container-single .chosen-search input[type=text] {
    color: var(--bodyTextColor) !important;
}


.chosen-container-active.chosen-with-drop .chosen-single {
    color: var(--bodyTextColor) !important;
    background-color: var(--bodyBackColor);
    opacity: 0.7;
}

.list-group-item-mine::after {
    position: relative;
    font-family: "Font Awesome 5 Free";
    content: "\f055";
    font-weight: 900;
    font-size: 24px;
    right: 20px;
    float: right;
}

.list-group-item-mine.active::after {
    content: "\f056"
}

.popover {
    white-space: pre-line;
    /*white-space: pre-wrap;*/
    box-shadow: 3px 3px 6px 2px #a1a1a1 !important;
    border-radius: 12px;
    padding: 0 !important;
    background: var(--popOverBack);
    border: 0 !important;
}

.popover-header {
    padding: 0.75rem 0.85rem 0.5rem 0.85rem;
    font-weight: 500;
    font-size: 105% !important;
    margin-bottom: -0.5rem;
    background-color: var(--popOverBack);
    ;
    color: #FFFFFF;
    border: 0 !important;
    font-family: Poppins, Raleway, Montserrat, Verdana, Arial, Tahoma;
    border-radius: 12px 12px 0 0;
}

.br_lne {
    border-color: #576e87ab;
}

.form-strong {
    font-size: 18px;
    font-weight: 500;
    color: var(--srClr);
}

.popover-body {
    padding: 10px;
    font-size: 10px;
    font-weight: 400 !important;
    color: #FFFFFF;
    border: 0 !important;
    font-family: var(--font);
    border-radius: var(--br);
    box-shadow: none !important;
}

.popover-body a,
.popover-body a:link,
.popover-body a:visited,
.popover-header a,
.popover-header a:link,
.popover-header a:visited {
    color: #FFFFFF;
}

.popover-body a:hover {
    color: #a8df36;
}

/*https://stackoverflow.com/questions/54337652/unable-to-change-the-color-of-bootstrap-popover-arrow*/
.arrow::after,
.bs-popover-top .arrow::after {
    border-bottom-color: var(--popOverBack);
    !important;
    border-top-color: var(--popOverBack);
    !important;
}

.arrow::after,
.bs-popover-bottom .arrow::after {
    border-top-color: var(--popOverBack);
    !important;
    border-bottom-color: var(--popOverBack);
    !important;
}

.bs-popover-top .popover-header::before,
/* ? */
.bs-popover-bottom .popover-header::before {
    border-bottom: 0 !important;
}



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

.toast {
    min-width: 270px;
}

.toast-header {
    cursor: move;
    background-color: var(--blueish);
    color: var(--blueishText);
    !important;
    font-size: 105% !important;
    font-weight: 400 !important;
}

.toast-close-button {
    color: var(--blueishText) !important;
}

.toast-body,
.toast-body>a {
    font-size: 100% !important;
    background-color: var(--bodyBackColor);
    color: var(--bodyTextColor);
    !important;
}


.custom-control-input:focus~.custom-control-label::before {
    border-color: var(--blueish) !important;
    box-shadow: 0 0 0 0.2rem rgba(71, 143, 36, 0.25) !important;
}

.custom-control-input:checked~.custom-control-label::before {
    border-color: var(--blueish) !important;
    background-color: var(--blueish) !important;
}

.custom-control-input:active~.custom-control-label::before {
    background-color: var(--blueish) !important;
    border-color: var(--blueish) !important;
}

.custom-control-input:focus:not(:checked)~.custom-control-label::before {
    border-color: var(--blueish) !important;
}

.custom-control-input-green:not(:disabled):active~.custom-control-label::before {
    background-color: var(--blueish) !important;
    border-color: var(--blueish) !important;
}

.topminimenu {
    position: absolute !important;
    /* bottom: 0px; */
    background: #fff;
    width: 250px;
    padding: 18px 15px;
    box-shadow: 0 0 10px #3333330d;
    border-radius: var(--br);
    border: 1px solid #e7ebf0;
    right: -260px;
    transform: translate(0%, 0%) !important;
    transition: var(--ts);
}

#setting_lnk:hover .topminimenu {
    display: block;
    transform: var(--ts);
}

ul.topminimenu .dropdown-item {
    background: transparent;
    transform: var(--ts);
}

ul.topminimenu a.nav-link {
    font-size: 14px;
    text-decoration: none;
    font-weight: 400;
    color: var(--trClr);
    transition: var(--ts);
    padding: 2px 0;
}

ul.topminimenu a.nav-link:hover {
    color: var(--prClr);
}

.frm-div_tab {
    border: 1px solid var(--brClr);
    border-radius: var(--br);
    padding: 2px 0;
    background-color: var(--bgylw);
}

#groupSettings .bs_popover {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--trClr) !important;
    margin-left: 0 !important;
    opacity: 1 !important;
}

.frm-div_tab .bigger {
    font-size: 17px;
    text-decoration: none;
    color: var(--trClr);
    font-weight: 400;
}

/*BOOTSTRAP OVERRIDES END*/

/* modal start */
.modal>.modal-dialog {
    background-color: #fff;
    position: relative;
}

.modal.fade .modal-dialog {
    min-width: 500px;
    max-width: 100%;
    height: 100%;
    margin: 0 0 0 auto;
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
}

#subscriberDialogModal .modal-dialog {
    min-width: 630px !important;
}

.modal.show .modal-dialog {
    transform: translateX(0);
}

.modal .modal-content {
    height: 100%;
    background: var(--bodyBackColor);
    border: 1px solid var(--blueish);
    border-radius: 0.75rem 0 0 0.75rem;
    overflow: hidden;
}

.modal .modal-header {
    color: var(--blueishText);
    background: var(--blueish);
    border-bottom: 0;
}

.modal .modal-title {
    font-family: var(--font);
    font-weight: 400;
}

.modal .btn-close {
    filter: brightness(0) invert(1);
    font-size: 11px;
    position: fixed;
    left: -35px;
    z-index: 9999;
    /* filter: invert(1) grayscale(1) brightness(8.5); */
    opacity: 1;
    top: 16px;
    border: 1px solid var(--brClr);
    border-radius: var(--br);
    padding: 6px;
}

#twoFactorModalFrame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

#twoFactorModal .modal-body {
    min-height: 0;
    overflow: hidden;
}


.modal.fade .modal-dialog {
    width: 500px;
    max-width: 100%;
    height: 100%;
    margin: 0 0 0 auto;
    transform: translateX(100%);
    transition: transform var(--ts);
    border: 1px solid var(--brClr);
    border-radius: var(--br) 0 0 var(--br);
    /* overflow: hidden; */
}

.modal {
    backdrop-filter: blur(3px);
}

.modal.show .modal-dialog {
    transform: translateX(0);
}

.frm-div_cnt_txt {
    font-size: 14px;
    color: var(--svClr);
    line-height: 135%;
    font-weight: 400;
}

.icn_sz {
    font-size: 14px;
}

.mdl-tbl>.tbl-div .tbl_srl td>span,
.mdl-tbl>.tbl-div .tbl_srl td {
    font-size: 14px;
    font-weight: 400;
    color: var(--svClr);
    vertical-align: middle;
}

.frm-div_cnt_txt span strong {
    color: var(--srClr);
    font-size: 18px;
}

.modal .modal-content {
    height: 100%;
    color: var(--trClr);
    overflow: hidden;
}

.modal .modal-body {
    padding: 10px 0px 20px 20px;
    overflow: auto;
}

#twoFactorModalFrame {
    height: 100%;
}

.modal .modal-header {
    padding: 10px 20px;
    border-bottom: 1px solid var(--brClr);
    background: transparent;
}

.modal-dialog::before {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    filter: blur(140px);
    background: #046dff52;
    mix-blend-mode: multiply;
    z-index: 1;
}

.modal .modal-title {
    font-family: var(--font);
    font-weight: 400;
    font-size: 16px;
    line-height: 135%;
}

.modal .modal-body {
    overflow: auto;
}

.admin-bootstrap-modal[data-dialog-type="iframe"] .modal-body {
    overflow: hidden;
}

.admin-bootstrap-modal-frame {
    display: block;
    width: 100%;
    max-height: calc(100vh - 4.5rem);
    border: 0;
}

.admin-bootstrap-modal.campaign-report-modal-layout .modal-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
}

.campaign-report-modal-layout .admin-bootstrap-modal-frame {
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    max-height: none;
}

.summary-modal-footer {
    width: 100%;
    font-family: var(--font);
    padding: 0;
}

.campaign-report-modal-layout #adminBootstrapModalBody {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.admin-bootstrap-modal.smtp-edit-modal-layout .modal-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-bottom: 0;
    overflow: hidden;
}

.smtp-edit-modal-layout #adminBootstrapModalBody {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.smtp-edit-modal-layout .admin-bootstrap-modal-frame {
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    max-height: none;
}

.smtp-edit-modal-layout .modal-header,
.smtp-edit-modal-layout .modal-footer {
    flex-shrink: 0;
}



.ui-widget-content {
    background: var(--bodyBackColor);
    color: var(--bodyTextColor);
}

.ui-datepicker-header {
    background: var(--blueish);
    !important;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    background-color: #ededed;
}

/* Bootstrap 5 visual treatment for the jQuery datepicker. */
#ui-datepicker-div.ui-datepicker {
    width: 320px;
    padding: 12px;
    color: var(--bs-body-color, #212529);
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius-lg, .5rem);
    box-shadow: 0 .75rem 2rem rgba(33, 37, 41, .18);
    font-family: inherit;
    font-size: 14px;
    z-index: 1080 !important;
}

#ui-datepicker-div .ui-datepicker-header {
    min-height: 42px;
    padding: 3px 42px;
    background: transparent;
    border: 0;
}

#ui-datepicker-div .ui-datepicker-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    line-height: normal;
}

#ui-datepicker-div .ui-datepicker-title select {
    width: auto;
    min-width: 90px;
    height: 36px;
    margin: 0;
    padding: 5px 30px 5px 10px;
    color: var(--bs-body-color, #212529);
    background-color: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, .375rem);
    font: inherit;
}

#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
    top: 3px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, .375rem);
    cursor: pointer;
}

#ui-datepicker-div .ui-datepicker-prev {
    left: 0;
}

#ui-datepicker-div .ui-datepicker-next {
    right: 0;
}

#ui-datepicker-div .ui-datepicker-prev:hover,
#ui-datepicker-div .ui-datepicker-next:hover {
    top: 3px;
    background: var(--bs-secondary-bg, #e9ecef);
}

#ui-datepicker-div .ui-datepicker-prev:hover {
    left: 0;
}

#ui-datepicker-div .ui-datepicker-next:hover {
    right: 0;
}

#ui-datepicker-div .ui-datepicker-prev span,
#ui-datepicker-div .ui-datepicker-next span {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    background: none;
    text-indent: 0;
    font-size: 0;
}

#ui-datepicker-div .ui-datepicker-prev span::before,
#ui-datepicker-div .ui-datepicker-next span::before {
    color: var(--bs-body-color, #212529);
    font-family: Arial, sans-serif;
    font-size: 22px;
    line-height: 1;
}

#ui-datepicker-div .ui-datepicker-prev span::before {
    content: "\2039";
}

#ui-datepicker-div .ui-datepicker-next span::before {
    content: "\203a";
}

#ui-datepicker-div table {
    margin: 8px 0 0;
    border-collapse: separate;
    border-spacing: 3px;
}

#ui-datepicker-div th {
    padding: 7px 2px;
    color: var(--bs-secondary-color, #6c757d);
    font-weight: 600;
}

#ui-datepicker-div td {
    padding: 0;
}

#ui-datepicker-div td a,
#ui-datepicker-div td span {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--bs-body-color, #212529);
    background: transparent;
    border: 0;
    border-radius: var(--bs-border-radius, .375rem);
    text-align: center;
}

#ui-datepicker-div td a:hover {
    color: var(--bs-primary, #0d6efd);
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), .1);
}

#ui-datepicker-div td .ui-state-active {
    color: #fff;
    background: var(--bs-primary, #0d6efd);
}

#ui-datepicker-div td.ui-datepicker-today a:not(.ui-state-active) {
    color: var(--bs-primary, #0d6efd);
    box-shadow: inset 0 0 0 1px var(--bs-primary, #0d6efd);
}

#ui-datepicker-div .ui-datepicker-other-month {
    opacity: .4;
}

.bootstrap-datepicker-input .input-group-text {
    min-width: 50px;
    justify-content: center;
    color: var(--trClr);
    background: var(--bgClr);
    border-color: #e2e8f0;
    cursor: pointer;
}

.ui-resizable-handle {
    width: 10px !important;
    height: 10px !important;
    ;
    /*background: var(--blueish); Optional: to make it more visible */
}

/*  UI TABS
    E.g. Htrml newsletter, Text, multipart tabs when creating campaign*/
.ui-tabs-nav {
    /* the area around */
    background: var(--bodyBackColor);
    border: 0;
}

.ui-tabs .ui-tabs-nav li {
    /* not active */
    padding: 4px;
    border: 1px solid var(--blueishText);
    color: var(--bodyTextColor) !important;
    /*background: red !important;*/
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    padding: 4px;
    border: 1px solid var(--blueishText);
    background: var(--blueish) !important;
}

.ui-tabs .ui-state-active,
.ui-tabs .ui-state-active>a {
    /*background: var(--blueish) !important;*/
    color: var(--blueishText) !important;
    font-weight: 500;
}

.ui-tabs .ui-tabs-nav li:hover {
    background-color: var(--blueish);
    color: var(--blueishText) !important;
}

.ui-tabs .ui-tabs-nav li:hover>a {
    color: var(--blueishText) !important;
}

.ui-tooltip {
    border: 1px solid #cad1d7 !important;
    border-radius: 4px;
}

.my_tooltip {
    color: #212529 !important;
    font-size: 100% !important;
    font-weight: 400 !important;
    background: #f0f8ff !important;
    /*fffdfd*/
    padding: 0.15rem 0.35rem 0.15rem 0.35rem !important;
}

/*new*/
.sidebar {
    background: var(--sidebar);
    background-image: url("../images/sidebar_wm.png");
    background-repeat: no-repeat;
    background-position: center bottom;
}

.wrapper {
    display: flex;
    text-decoration: none;
    transition: all .4s
}

.sidebarToggler {
    padding: .4em .2em;
    z-index: 2;
    text-decoration: none;
    font-size: 1.3rem;
    color: var(--menuItem);
    cursor: pointer;
}


/*affects all menu items*/
.navbar-custom,
.navbar-custom .dropdown-menu {
    font-size: 100% !important;
    font-family: var(--font), sans-serif !important;
}

.navbar-custom .dropdown-menu {
    background-color: transparent;
    border: 0;
    border-radius: 10px;
    padding-left: 14px;
    margin-top: -8px;
    max-width: 235px;
}

.navbar-custom .nav-link,
.navbar-custom .dropdown-item {
    font-size: 15px;
    color: var(--srClr);
    background: var(--bgClr);
    width: 100%;
    font-weight: 400;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
}

/*only the direct child <li> elements of the <ul> navbar-nav and navbar-custom*/
.navbar-nav.navbar-custom>li {
    /*padding-bottom: 6px;*/
}

/*targets <a> elements with class nav-link that are direct children of <li> elements with class nav-item, which in turn are descendants of an element with the class navbar-custom*/
.navbar-custom li.nav-item>a.nav-link {
    padding: 16px 0px;
}

.navbar-custom li.nav-item:hover>a.nav-link.dropdown-toggle {
    color: var(--menuItemHover) !important;
    /*Nice alternative:
        color: var(--blueishText) !important;
        background-color: var(--blueish);
    */
}

/* The left side border */
.navbar-custom li.nav-item.active {
    border: none;
}

/*Applies on Newsletters when Html>View-edit is active
 Applies to Home, Triggers when active */
/* .navbar-custom li.nav-item.active.expanded>a.nav-link {
    border-radius: 20px;
    border-width: 0;
    background-color: var(--frClr);
    color: var(--drClr) !important;
} */

/*Applies on "Html newsletters" when View-edit is active */
.navbar-custom .nav-link.dropdown-toggle.active {
    color: var(--drClr) !important;
}

/*Applies on HOVER on ALL sub-items under a top level item like "Subscribers"
    but not at "Subscribers" */
.navbar-custom li.dropdown-item:hover>a.nav-link {
    color: var(--menuItemHover) !important;
}

/* Active items like "View all" & "View & edit" */
.navbar-custom li.dropdown-item.active>a.nav-link {
    color: var(--menuItemHover) !important;
}

.navbar-custom li.dropdown-item.active>a.nav-link::after {
    content: "";
    font-size: 120%;
    opacity: 1;
    padding-left: 6px
}

.mainPageContent {
    transition: 0 !important
}

/*Home & Triggers: no dropdown*/
.navbar-custom li.nav-item.top-level:hover>a.nav-link {
    color: var(--menuItemHover);
}


/*searchAll.php*/
.ui-menu .ui-menu-item {
    color: var(--bodyTextColor);
}

@media (max-width: 991px) {

    /* start  progress */
    .progress {
        height: 25px;
    }

    .progress-bar {
        font-size: 0.8rem;
    }

    .progress-bar-value {
        position: absolute;
        /*display: block; width: 100%;*/
        /*centered*/
        /*top: 50%;left: 6%;transform: translate(0%,-50%);*/
        padding-left: .1em;
        text-shadow: 2px 1px 5px black;
    }

    .progress_div {
        border-radius: var(--br);
        width: 100%;
        height: 22px;
        background-color: #ebebeb;
        padding: 0;
    }

    .fill_bar {
        border-radius: var(--br);
    }

    .dlvrd {
        background-color: #7904ff;
    }

    .uvc {
        background-color: #009000;
    }

    .ctv {
        background-color: #0fff04;
    }

    .uv {
        background-color: #0455ff;
    }

    .uc {
        background-color: #007BFF;
    }

    .opt {
        background-color: #fff004;
    }

    .snz {
        background-color: #666666;
    }

    .cmpl {
        background-color: #DC3545;
    }

    .bnc {
        background-color: #ffaa04;
    }

    .bnch {
        background-color: #ff5d04;
    }

    .fill_value {
        font-size: 15px;
        padding: 0px 7px 0;
        display: flex;
        align-items: center;
        text-shadow: 1px 1px 1px var(--trClr);
    }

    .no_fill_value {
        font-size: 0.9rem;
    }

    .popUnderlined {
        border-bottom: 2px dotted #b3b3b3;
        padding-bottom: 2px;

    }

    /* end progress */

    .bootstrap-select .dropdown-toggle {
        height: 50px;
        border: 1px solid #e2e8f0 !important;
        background: #fff !important;
        color: var(--trClr) !important;
    }

    .bootstrap-select .filter-option {
        display: flex;
        align-items: center;
    }

    textarea.form-control {
        line-height: 150%;
        font-weight: 400;
        font-family: var(--font) !important;
    }

    .psw-icn {
        width: 20px;
        opacity: .75;
    }

    .chk-50 {
        width: 50px !important;
        height: 50px !important;
        flex: 0 0 50px !important;
        border: 1px solid #d7dee8 !important;
    }

    .chk-50 .cr-icon.fa-check::before {
        width: 25px !important;
        height: 25px !important;
        top: -14px !important;
        left: 10px !important;
    }

    .lgn-div_ttl h1 {
        font-size: 30px;
        font-weight: 700;
        color: var(--srClr);
    }

    .forgot-password-page .right-index-panel-content,
    .reset-password-page .right-index-panel-content {
        width: 268px;
    }


    .lgn-div_ttl_sub>span {
        font-size: 14px;
        line-height: 150%;
        font-weight: 400;
        color: var(--srClr);
    }

    label {
        font-size: 12px;
        font-weight: 400;
        color: #22364c;
    }

    .form-control {
        padding: 0.355rem 0.70rem;
        margin: 0.2rem 0.30rem 0 0;
        border: 1px solid #e2e8f0;
        height: 50px;
        font-size: 14px;
        font-weight: 500;
        border-radius: 10px;
        background: #fff !important;
    }


    .lgn-frm_ggl_div_or {
        font-size: 13px;
        color: #9aa2aa;
        text-align: center;
        justify-content: center;
        display: flex;
        width: 100%;
    }

    .lgn-frm_ggl_lgn_btn {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #dee2e6;
        margin-top: 25px;
        border-radius: 10px;
        height: 50px;
    }

    #ForgotPassword span.cross {
        font-size: 12px;
        font-weight: 400;
        color: #22364c;
    }

    .submit-login {
        width: 100%;
        height: 50px;
        border-radius: 8px;
        background: var(--prClr);
    }

    .lgn-frm_ggl_lgn_btn {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #dee2e6;
        margin-top: 25px;
        border-radius: 10px;
        height: 50px;
    }

    .lgn-frm_ggl_lgn_btn_img {
        width: 20px;
    }

    .lgn-frm_ggl_lgn_btn span {
        padding: 0 10px;
        font-weight: 500;
        font-size: 14px;
    }

    .right-index-panel {
        padding: 40px 0px;
    }

    .lgn-frm_ggl_div_or span {
        background: #fff;
        padding: 0 15px;
        z-index: 1;
    }

    .lgn-frm_ggl_div_or::before {
        content: '';
        position: absolute;
        width: 100%;
        height: .5px;
        background: #dee2e6;
        top: 50%;
        left: 0;
        right: 0;
        z-index: 0;
    }

    .log-icn_div>img {
        width: 80px;
    }

    label,
    .lgn-fog_div>a,
    .frg-psd_div>a {
        font-size: 12px;
        font-weight: 400;
        color: #22364c;
    }


    .topHeaderIconsBox {
        padding: 0;
        /*background: var(--sidebar) !important;*/
        border-radius: 4px;
        transition: top .2s ease-in-out;
        position: fixed;
        top: 5px;
        right: 5px;
        z-index: 1000;
        /*text-align: center;*/
    }

    .topHeaderIcons {
        padding: 0.5rem !important;
    }

    .left-index-panel {
        background: linear-gradient(to bottom, #000, var(--blueish));
    }

    .titleMetaTag_div {
        margin-top: 1rem !important;
    }

    .calculator tr {
        display: table;
        width: 100%;
        padding: 12px;
        text-align: left
    }

    .calculator td {
        display: table-row;
        padding: 12px;
        text-align: left
    }

    .goToCampaign {
        display: block;
        position: relative;
        top: 0;
        visibility: hidden;
    }

    /*index*/
    .left-index-panel-content {
        margin: 0;
        padding: 20px
    }

    .right-index-panel-content {
        margin: 0;
    }

    .right-index-panel {
        justify-content: center;
        background: #FFF;
    }

    /*new*/
    .mainPageContent {
        width: 100%;
        margin-left: 0 !important
    }

    .mainPageContent.active {
        margin-left: 235px !important
    }

    #sidebar {
        margin-left: -235px !important;
        width: 235px;
        transition: all .4s
    }

    #sidebar.active {
        margin-left: 0 !important;
        position: fixed;
        max-width: 235px !important;
        height: 100vh;
        transition: all .4s;
        left: 0;
        top: 0;
        z-index: 2 !important
    }

    #sidebarCollapse span {
        display: none
    }
}

/*new*/
#sidebar {
    margin-left: -235px;
    position: fixed;
    left: 0;
    top: 0;
    width: 235px;
    max-width: 235px;
    height: 100vh;
    z-index: 2
}

.mainPageContent {
    width: 100%;
}

@media (min-width: 992px) {

    .bootstrap-select .dropdown-toggle {
        height: 50px;
        border: 1px solid #e2e8f0 !important;
        background: #fff !important;
        color: var(--trClr) !important;
    }

    .bootstrap-select .filter-option {
        display: flex;
        align-items: center;
    }

    textarea.form-control {
        line-height: 150%;
        font-weight: 400;
        font-family: var(--font) !important;
    }

    .fa-question-circle {
        font-size: 13px;
    }

    h1.dhk_ttl {
        font-size: 30px !important;
        letter-spacing: -1.5px;
        color: #fff;
        -webkit-text-fill-color: transparent;
        background-color: var(--srClr);
        /* background: linear-gradient(180deg, var(--prClr), var(--prClr)); */
        -webkit-background-clip: text;
    }

    /* dashboard start */
    .dhk_dsh_pr {
        background: #cadfff;
        /* background-color: var(--prClr); */
        mix-blend-mode: multiply;
    }

    #latestActivity_div .heading3,
    #totalOptIn_div .heading3,
    #totalAction_div .heading3,
    .snapshot-header .heading3,
    .campaign-chart .heading3 {
        font-weight: 600;
        font-size: 16px;
        line-height: 24px;
        font-family: var(--font);
        color: var(--srClr);
    }

    .totalOptIn_div a {
        font-size: 14px;
        font-weight: 400;
        color: var(--svClr);
        /* border-radius: var(--br); */
        /* border: 1px solid #e2e8f0; */
        /* background-color: var(--ffClr); */
        /* padding: 6px 20px; */
        /* display: block; */
    }

    .dhk_dsh_sr {
        background: #fffcb7;
        /* background-color: var(--bgylw); */
        mix-blend-mode: multiply;
    }

    .dhk_dsh_tr {
        background: #befbb3;
        /* background-color: var(--scClr); */
        mix-blend-mode: multiply;
    }

    .dhk_dsh-lst {
        border-radius: var(--br);
        padding: 24px 20px;
    }

    .dhk_dsh-lst-sub-1 {
        background: var(--bgClr);
        padding: 14px 20px 13px;
        line-height: 15px;
        clip-path: polygon(90% 0, 100% 46%, 89% 100%, 0 100%, 0 0);
        border-radius: var(--br);
        min-width: 165px;
    }

    .dhk_dsh-lst-sub-1>span {
        font-weight: 400;
        color: var(--svClr);
        font-size: 14px;
    }

    .dhk_dsh-lst-sub-1 h2 {
        margin-bottom: 0;
        font-weight: 900;
        color: var(--srClr);
    }

    .dhk_dsh-lst-sub-2 {
        gap: 15px;
        padding-left: 20px;
        border-left: 1px dashed #22364c61;
        margin-left: 20px;
    }

    .dhk_dsh-lst-sub-2-lnk p {
        font-weight: 400;
        color: var(--trClr);
        font-size: 12px;
    }

    /* canvas start */
    #snapshot {
        min-height: 400px;
    }

    #snapshotLoading {
        min-height: 395px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #snapshot,
    #totalAction_div,
    #totalOptIn_div,
    #div_last5c,
    #latestActivity_div {
        border: 1px solid #e2e8f0;
        padding: 2px 10px 5px;
        border-radius: var(--br);
    }

    /* canvas end */

    .dhk_dsh-lst-sub-2-lnk span {
        margin-bottom: 0;
        font-weight: 900;
        color: var(--srClr);
        font-size: 30px;
    }

    /* dashboard end */


    #quickImport2 .quick-list-select-field {
        flex: 1 1 auto;
        min-width: 0;
    }

    #quickImport2 .quick-list-update-field {
        flex: 0 0 auto;
    }

    #quickImport2 #quickListMultiSelect,
    #quickImport2 #quickListMultiSelect .dropdown-toggle {
        min-width: 0;
    }

    #quickImport2 #quickListMultiSelect .import-multiselect-button-text {
        flex: 1 1 auto;
        min-width: 0;
    }

    .chk-50 {
        width: 50px !important;
        height: 50px !important;
        flex: 0 0 50px !important;
        border: 1px solid #d7dee8 !important;
    }

    .chk-50 .cr-icon.fa-check::before {
        width: 25px !important;
        height: 25px !important;
        top: -14px !important;
        left: 10px !important;
    }

    .non-asd_div {
        border: 1px solid var(--brClr);
        border-radius: var(--br);
        margin: 0 calc(100% - 100%);
    }

    .modal #uploadForm #fileToUpload,
    .modal #adminBootstrapModalFooter #File1 {
        height: 40px !important;
    }

    .non-asd_div_cnt>div {
        font-size: 10px;
        background: #d00b2217;
        color: var(--erClr);
        padding: 4px 15px;
        border-radius: var(--br);
        font-weight: 400;
    }

    .non-asd_div_cnt_btn {
        display: flex;
        align-items: center;
        padding: 10px 20px;
        background: #ffc0c73b;
        margin-top: 12px;
        border-radius: var(--br);
    }

    .non-asd_div_cnt_btn label {
        color: var(--erClr);
    }

    .activity-table .listingCell a {
        color: var(--srClr);
        text-decoration: underline;
        text-transform: lowercase;
    }

    .indLnk {
        /* color: #046dff !important; */
        text-align: start;
        line-height: 135%;
        /* border-radius: var(--br); */
        padding: 0px 0px;
        /* width: fit-content; */
        font-size: 14px;
    }

    .non-asd_div_ttl {
        font-size: 18px;
        font-weight: 500;
        color: var(--srClr);
        display: block;
    }

    .lst_act-div {
        padding: 10px 12px;
    }

    #loading .wrn-div_img,
    #activityLoading .wrn-div_img,
    #campaignLoading .wrn-div_img,
    #campaignTableLoading .wrn-div_img,
    #snapshotLoading .wrn-div_img,
    #totalActionLoading .wrn-div_img,
    #wait .wrn-div_img,
    #wait2 .wrn-div_img,
    .loading,
    #indicator .wrn-div_img {
        filter: hue-rotate(67deg) saturate(21.5);
    }

    .mdl-bdy_cnt {
        font-size: 16px;
        font-weight: 300;
        color: var(--svClr);
    }

    .mdl-bdy_cnt b {
        font-weight: 500;
        color: var(--srClr);
    }

    #filename+span {
        width: 30px;
    }

    input[type="submit"]:disabled,
    input[type="button"]:disabled {
        cursor: not-allowed !important;
    }

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

    .pgn-div_cnt {
        float: right;
        padding: 10px 0;
    }

    .pgn-div_cnt span,
    .pgn-div_cnt a {
        margin-left: 4px;
    }

    .pgn-div_ttl {
        font-size: 14px;
        font-weight: 400;
        color: var(--trClr);
        display: block;
        text-align: right;
    }

    .atn-btn {
        cursor: pointer;
        color: var(--trClr) !important;
        background: var(--ffClr);
        padding: 10px;
        font-size: var(--fs14);
        border-radius: var(--br);
        padding: 8px 16px;
    }

    ul#actions {
        list-style: decimal;
        padding-left: 30px !important;
    }

    ul#actions a {
        font-size: 15px;
        font-weight: 300;
        color: var(--srClr);
        margin-bottom: 5px;
        display: block;
        text-decoration: underline;
    }

    #what {
        list-style: auto;
        font-size: 15px;
        font-weight: 300;
        color: var(--trClr);
        margin-bottom: 5px;
        margin-top: 15px;
        line-height: 150%;
    }

    #results>span {
        font-size: 18px;
        font-weight: 300;
        color: var(--srClr);
    }

    #results>span>span {
        font-size: 24px;
        font-weight: 600;
    }

    .nav-tab_div button.nav-link,
    #ctabs.nav-tab_div .ui-tabs-anchor.nav-link {
        font-size: 14px;
        font-weight: 400;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        opacity: .75;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        color: var(--svClr) !important;
    }

    .nav-tabs .nav-link:hover {
        border: none !important;
    }

    .wrn-div {
        display: grid;
        font-size: 20px;
        font-weight: 400;
        color: var(--svClr);
        opacity: .55;
    }

    .edt-div {
        width: 20px;
        position: absolute;
        top: -8px;
        right: -27px;
    }

    .form-input .bootstrap-select>.dropdown-toggle {
        height: 50px;
        padding: 10px 20px;
        border: 1px solid #e2e8f0;
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 500;
        color: var(--trClr);
        padding-top: 13px;
        border-radius: var(--br);
    }

    .wrn-div_img {
        width: 130px;
    }

    .dtl-div_img {
        width: 180px;
        line-height: 125%;
    }

    .abt-div_cnt {
        font-size: 15px;
        font-weight: 300;
        line-height: 150%;
        padding-left: 18px;
        color: var(--svClr);
    }

    .submenu li.active>a {
        color: var(--prClr) !important;
    }

    .shadow-none {
        box-shadow: none !important;
    }

    .nav-tab_div .nav-link.active,
    #ctabs.nav-tab_div .ui-tabs-active>.nav-link {
        color: var(--prClr) !important;
        font-weight: 600;
        opacity: 1;
        border-bottom: 3px solid var(--prClr) !important;
        ;
    }

    #ctabs.nav-tab_div .ui-tabs-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 0;
        background: transparent;
        border-bottom: 1px solid var(--brClr);
        border-radius: 0;
    }

    #ctabs.nav-tab_div .ui-tabs-nav>.nav-item {
        float: none;
        margin: 0 0 -1px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent !important;
    }

    #ctabs.nav-tab_div .ui-tabs-anchor.nav-link {
        float: none;
        display: block;
        padding-top: 8px;
        border-bottom: 3px solid transparent;
        border-radius: 0;
        background: transparent;
        text-decoration: none;
    }

    .fx-1x {
        font-size: 13px !important;
        color: var(--trClr) !important;
        opacity: .75;
    }

    .csvExpExc_div .form-label {
        font-size: 12px;
        font-weight: 400;
        color: #22364c;
    }

    .csvExpExc_div p {
        font-size: 18px;
        font-weight: 400;
        color: var(--trClr);
    }



    /* sidebar start */
    #sidebar {
        padding: 25px 0;
    }

    .grp-div {
        height: 400px;
        width: 100%;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    .dlt-icn,
    .edt-icn {
        width: 30px;
        height: 30px;
        border: 1px solid #576e8733;
        padding: 6px 7px 8px;
        border-radius: var(--br);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* #sidebar .navbar > .navbar-collapse {
        min-height: calc(100vh - 32vh);
        height: calc(100vh - 32vh);
        overflow-y: scroll;
    } */

    .navbar .nav-item {
        position: relative;
    }

    #bdy-div {
        margin-left: 35px;
        width: calc(100% - 70px);
    }

    .btn-lnk_div>a,
    .btn-lnk_div>input[type="button"],
    .btn-lnk_div>input[type="reset"],
    .btn-lnk_div>input[type="submit"] {
        border-radius: var(--br);
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-weight: 400;
        width: fit-content;
        font-size: 14px;
    }

    .fmr-dsg_cnt button[type="button"] {
        height: 50px;
        width: 100%;
        background: var(--bgClr);
        border-color: #e2e8f0;
        border-radius: var(--br);
        font-size: 14px;
        font-weight: 500;
        color: var(--trClr) !important;
        padding: 10px 20px;
        margin: 0 !important;
    }

    .fmr-dsg_cnt .filter-option {
        display: contents;
    }

    .imgIcn_div {
        width: 20px;
    }

    .imgIcn_div+span {
        font-size: 15px;
        color: var(--trClr);
        font-weight: 400;
    }

    .dropdown.bootstrap-select {
        background: transparent !important;
    }

    .bootstrap-select button,
    .bootstrap-select .dropdown-toggle:focus,
    .bootstrap-select>select.mobile-device:focus+.dropdown-toggle {
        outline: 0 !important;
        background-color: var(--bgClr) !important;
    }

    .bg_frm {
        background-image: linear-gradient(180deg, var(--ffClr) 0%, var(--ffClr));
        border-radius: var(--br);
        padding: 10px 20px 13px 12px;
        width: 100%;
        margin-left: 0px;
    }

    #doSubscribersList {
        color: var(--erClr);
        font-size: 12px;
        line-height: 135%;
        font-weight: 400;
    }

    #subscriber-modal-trigger {
        height: 50px;
        width: 50px;
        display: flex;
        align-items: center;
        border: 1px solid var(--brClr) !important;
        border-radius: 100%;
        justify-content: center;
        background: var(--bgClr);
    }

    .lstNslSb_cnt a {
        font-size: 14px;
        color: var(--trClr);
        border: 1px solid var(--frClr);
        padding: 6px 20px;
        border-radius: var(--br);
        font-weight: 400;
        background: var(--bgClr);
    }

    .lstNslSb_img {
        width: 14px;
    }

    .btn-lnk_div>input[type="submit"],
    .btn-lnk_div>input[type="reset"] {
        background: var(--prClr);
        color: var(--bgClr);
        min-width: 140px;
    }

    .btn-lnk_div>input[type="button"] {
        color: var(--bgClr);
        padding: 0 20px;
        min-width: 160px;
    }

    .btn-lnk_div>input[type="submit"],
    .btn-lnk_div>input[type="reset"],
    .btn-lnk_div>input[type="button"] {
        height: 40px;
    }

    .btn-lnk_div>a {
        background: var(--prClr);
        color: var(--bgClr);
        height: 38px;
        min-width: 140px;
    }


    .btn-lnk_div_cnl>a {
        height: 40px;
        min-width: 140px;
        border: 1px solid var(--brClr);
        border-radius: var(--br);
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-weight: 400;
        width: fit-content;
        color: var(--svClr);
    }

    .sub-cnt {
        font-size: 36px;
        margin: 0 !important;
        font-weight: 400;
        color: var(--srClr) !important;
    }

    .btn-danger {
        background: #ffffff29 !important;
        color: var(--erClr) !important;
        border: 1px solid var(--erClr) !important;
        transition: var(--ts);
    }


    .fs15 {
        font-size: 15px !important;
    }

    .fw400 {
        font-weight: 400 !important;
    }

    .btn-success {
        background-color: var(--scClr) !important;
        transition: var(--ts);
        border: none;
    }

    .mb_4 {
        margin-bottom: -4px !important;
    }

    .btn-primary {
        background-color: var(--prClr) !important;
        color: var(--bgClr) !important;
        transition: var(--ts);
        border: none;
    }

    .guideImg {
        width: 18px;
    }

    .navbar .nav-item>a::before {
        content: '';
        position: absolute;
        top: 0;
        left: -23px;
        width: 24%;
        height: 100%;
        z-index: 0;
        transition: var(--ts);
    }

    .navbar .nav-item>a:hover::before {
        width: 128%;
        transition: var(--ts);
    }

    .navbar .nav-item.active>a::before {
        background-color: var(--prClr);
        opacity: .04;
    }

    .sdb-div_ttl,
    .nav-link>span:last-child,
    .dropdown-toggle::after {
        /* display: none; */
    }

    .nv-icn {
        width: 25px;
    }

    .nv-icn>img:last-child {
        display: none;
    }

    .sdb-div_img {
        width: 45px;
    }

    .sdb-div_ttl {
        line-height: 128%;
    }

    .sdb-div_ttl strong {
        font-size: 19px;
        display: block;
        font-weight: 700;
        color: var(--srClr);
    }

    .men-opn_cls_box {
        top: 20%;
        left: 102px;
    }

    .sdb-div_ttl span {
        color: var(--trClr);
        font-size: 12px;
        opacity: .8;
    }

    .nv-icn>img {
        width: 22px;
    }

    /* sidebar end */

    .goToCampaign {
        display: block;
        position: relative;
        top: -250px;
        visibility: hidden;
    }

    label,
    .lgn-fog_div>a,
    .frg-psd_div>a {
        font-size: 12px;
        font-weight: 400;
        color: #22364c;
    }

    #ForgotPassword span.cross {
        font-size: 12px;
        font-weight: 400;
        color: #22364c;
    }

    .right-index-panel-content {
        width: 420px;
    }

    .lgn-frm_ggl_div_or {
        font-size: 13px;
        color: #9aa2aa;
        text-align: center;
        justify-content: center;
        display: flex;
        width: 100%;
    }

    .lgn-frm_ggl_div_or::before {
        content: '';
        position: absolute;
        width: 100%;
        height: .5px;
        background: #dee2e6;
        top: 50%;
        left: 0;
        right: 0;
        z-index: -1;
    }

    .lgn-frm_ggl_div_or span {
        background: #fff;
        padding: 0 15px;
    }

    .lgn-frm_ggl_lgn_btn {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #dee2e6;
        margin-top: 25px;
        border-radius: 10px;
        height: 50px;
    }

    .lgn-frm_ggl_lgn_btn_img {
        width: 20px;
    }

    .lgn-frm_ggl_lgn_btn span {
        padding: 0 10px;
        font-weight: 500;
        font-size: 14px;
    }

    .submit-login {
        width: 100%;
        height: 50px;
        border-radius: 8px;
        color: #fff !important;
        background: var(--prClr) !important;
    }

    .lgn-div_ttl h1 {
        font-size: 30px;
        font-weight: 700;
        color: var(--srClr);
    }

    .lgn-div_ttl_sub>span {
        font-size: 14px;
        line-height: 150%;
        font-weight: 400;
        color: var(--srClr);
    }

    .cmp-adv_dsc {
        width: 440px;
    }

    .cmp-adv_dsc_cnt h2 {
        font-size: 35px;
        font-weight: 400;
        color: #000;
        line-height: 36px;
        margin: 17px 0;
    }

    .cmp-log {
        width: 165px;
    }

    .cmp-adv_dsc_cnt p {
        color: #000;
        font-weight: 400;
        font-size: 15px;
    }

    /*index*/
    /* .h-md-100 {height: 130vh;} */
    .left-index-panel-content::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--bgylw);
        z-index: -1;
    }

    .h-100vh {
        height: 100vh;
    }

    .left-index-panel-content::after {
        content: '';
        position: absolute;
        top: 0;
        right: -50px;
        left: auto;
        width: 100%;
        height: 100vh;
        background-image: url(../../assets/fascMailer/shade.svg);
        background-repeat: repeat-y;
        background-position: right;
        z-index: -1;
    }


    /*new*/
    #sidebar.collpased {
        margin-left: 0;
        position: fixed;
        left: 0;
        top: 0;
        width: 30px;
        max-width: 30px;
        transition: all .2s;
        z-index: 1
    }

    #sidebar.collpased:hover {
        margin-left: 0;
        width: 235px;
        max-width: 235px;
        z-index: 2;
        transition: width .2s
    }

    #sidebar.expanded {
        margin-left: 12px;
        width: 62px;
        border-right: 1px solid #22364c1c;
    }

    .mainPageContent.contract {
        margin-left: 100px;
        transition: width .9s
    }

    .mainPageContent.expand {
        margin-left: 30px;
        width: 100%;
        transition: 0 !important
    }
}

@media (min-width: 2600px) {

    /*new*/
    html {
        max-width: 2610px
    }
}

/*Custom radios and checkboxes*/
.checkbox label:after,
.radio label:after {
    content: '';
    display: table;
    clear: both;
}

.checkbox .cr,
.radio .cr {
    position: relative;
    border: 1px solid var(--svClr);
    border-radius: 6px;
    width: 20px;
    height: 20px;
    display: flex;
    flex: 0 0 20px;
    align-items: center;
    justify-content: center;
}

.cr-icon.fa-check::before {
    content: '' !important;
    position: absolute;
    top: -13px;
    left: 0;
    width: 20px;
    height: 20px;
    background-image: url(../../assets/fascMailer/checkbox.svg);
    background-size: contain;
    background-repeat: no-repeat;
    /* filter: hue-rotate(115deg); */
}

.bs_popover {
    font-size: 18px;
    color: var(--svClr);
    margin-left: 9px;
    /* opacity: .5; */
}

.radio .cr {
    border-radius: 50%;
}

.checkbox .cr .cr-icon,
.radio .cr .cr-icon {
    position: absolute;
    line-height: 0;
    top: 48%;
    left: 7%;
    font-size: 25px;
    color: var(--scClr);
    margin-left: 2px;
}

.radio .cr .cr-icon {
    margin-left: 0.04em;
}

/*hide*/
.checkbox label input[type="checkbox"],
.radio label input[type="radio"] {
    display: none;
}

.checkbox label input[type="checkbox"]+.cr>.cr-icon,
.radio label input[type="radio"]+.cr>.cr-icon {
    opacity: 0;
}

.checkbox label input[type="checkbox"]:checked+.cr>.cr-icon,
.radio label input[type="radio"]:checked+.cr>.cr-icon {
    opacity: 1;
}

.checkbox label input[type="checkbox"]:disabled+.cr,
.radio label input[type="radio"]:disabled+.cr {
    opacity: .5;
}

.tox-statusbar__branding {
    display: none !important;
}

/** Boostrap custom switch */
.green .custom-control-input:focus~.custom-control-label::before {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.2rem rgba(73, 255, 28, 0.25) !important;
}

.green .custom-control-input:checked~.custom-control-label::before {
    border-color: #28a745 !important;
    background-color: #28a745 !important;
}

.green .custom-control-input:active~.custom-control-label::before {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
}

.green .custom-control-input:focus:not(:checked)~.custom-control-label::before {
    border-color: #28a745 !important;
}

.custom-control-input-green:not(:disabled):active~.custom-control-label::before {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
}

.highlight {
    background-color: #EEF43B;
}

/* new start */
.ttl-heading {
    font-size: 28px !important;
    font-weight: 600;
    color: var(--drClr);
}

.password-visibility-field {
    position: relative;
}

.password-visibility-field .form-control {
    padding-right: 48px;
}

.password-visibility-toggle {
    position: absolute;
    top: 50%;
    right: 16px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #9aa7b5;
    cursor: pointer;
    transform: translateY(-50%);
}

.password-visibility-toggle.is-visible {
    display: flex;
}

.password-visibility-toggle:focus {
    outline: none;
    color: #22364c;
}

.indexBody .login-dismissible-message::after {
    content: none;
}

.indexBody .login-message-close {
    position: absolute;
    top: 50%;
    left: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    opacity: .9;
    cursor: pointer;
    transform: translateY(-50%);
}

.indexBody .login-message-close:hover,
.indexBody .login-message-close:focus {
    color: #fff;
    opacity: 1;
    outline: none;
}

/* Bootstrap 5 overlays must not inherit the legacy white header text. */
.popover {
    --bs-popover-bg: #fff;
    --bs-popover-header-bg: #f7f8fa;
    --bs-popover-header-color: #22364c;
    --bs-popover-body-color: #22364c;
    background-color: #fff !important;
}

.popover .popover-header {
    color: #22364c !important;
    background-color: #f7f8fa !important;
}

.popover .popover-body {
    color: var(--svClr) !important;
    line-height: 120%;
    background-color: #fff !important;
}

.popover .popover-body a,
.popover .popover-header a {
    color: #0d6efd;
    text-decoration: underline;
}

.popover .popover-body a:hover,
.popover .popover-body a:focus,
.popover .popover-header a:hover,
.popover .popover-header a:focus {
    color: #0a58ca;
}

.tooltip {
    --bs-tooltip-bg: #22364c;
    --bs-tooltip-color: #fff;
}

.tooltip .tooltip-inner {
    color: #fff !important;
    background-color: #22364c !important;
}

@media (min-width: 992px) {
    .psw-icn {
        width: 20px;
        opacity: .75;
    }

    .dmk-mlr_cnt {
        font-size: 14px;
        font-weight: 400;
        line-height: 135%;
        color: var(--trClr);
    }

    .okmessage100 {
        font-size: 16px;
        font-weight: 300;
        line-height: 20px;
        color: var(--trClr);
        background: #D4EDDA;
        border: 1px solid var(--brClr);
        border-radius: var(--br);
        padding: 10px 20px;
        text-align: center;
    }

    .h40 {
        height: 40px !important;
    }

    .h50 {
        height: 50px !important;
    }

    .fs_dnc {
        font-size: 13px;
        font-weight: 300;
    }

    #sidebar.sidebar-bs5 {
        display: flex;
        flex-direction: column;
        width: 72px;
        max-width: 72px;
        margin-left: 0;
        padding: 18px 0 0;
        overflow: visible;
        background: #fff !important;
        background-image: none;
        border-right: 1px solid #e7ebf0;
        box-shadow: 4px 0 14px rgba(31, 45, 61, .06);
        z-index: 1030;
        transition: width .22s ease, max-width .22s ease, box-shadow .22s ease;
    }

    #sidebar.sidebar-bs5:hover,
    #sidebar.sidebar-bs5:focus-within,
    #sidebar.sidebar-bs5.sidebar-pinned {
        width: 250px;
        max-width: 250px;
        box-shadow: 12px 0 28px rgba(31, 45, 61, .16);
    }

    #sidebar.sidebar-bs5 .brandLogo {
        flex: 0 0 auto;
        min-height: 72px;
        margin: 0;
        padding: 0 13px 14px;
        overflow: hidden;
    }

    #sidebar.sidebar-bs5 .brandLogo>a,
    #sidebar.sidebar-bs5 .brandLogo>a>div {
        width: 254px;
    }

    #sidebar.sidebar-bs5 .sdb-div_img {
        flex: 0 0 45px;
        width: 45px;
    }

    #sidebar.sidebar-bs5 .sdb-div_ttl {
        display: block;
        min-width: 170px;
        margin-left: 0px;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-6px);
        transition: opacity .16s ease, transform .16s ease;
    }

    #sidebar.sidebar-bs5:hover .sdb-div_ttl,
    #sidebar.sidebar-bs5:focus-within .sdb-div_ttl,
    #sidebar.sidebar-bs5.sidebar-pinned .sdb-div_ttl {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    #sidebar.sidebar-bs5 .sidebar-menu-shell {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    #sidebar.sidebar-bs5 .sidebar-menu-scroll {
        display: block;
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: #a7afb9 transparent;
    }

    /* Bootstrap's desktop navbar is horizontal by default. Keep this sidebar
       as a vertical Bootstrap navbar at every desktop width. */
    #sidebar.sidebar-bs5 .sidebar-menu-scroll>.navbar-collapse {
        display: block !important;
        width: 100%;
    }

    #sidebar.sidebar-bs5 .sidebar-menu-scroll::-webkit-scrollbar {
        width: 6px;
    }

    #sidebar.sidebar-bs5 .sidebar-menu-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    #sidebar.sidebar-bs5 .sidebar-menu-scroll::-webkit-scrollbar-thumb {
        background: #a7afb9;
        border-radius: 10px;
    }

    #sidebar.sidebar-bs5:not(.sidebar-pinned):not(:hover):not(:focus-within) .sidebar-menu-scroll {
        scrollbar-width: none;
    }

    #sidebar.sidebar-bs5:not(.sidebar-pinned):not(:hover):not(:focus-within) .sidebar-menu-scroll::-webkit-scrollbar {
        display: none;
        width: 0;
    }

    #sidebar.sidebar-bs5 .navbar-custom {
        display: flex;
        flex-direction: column !important;
        align-items: stretch;
        width: 240px;
        margin: 0;
    }

    #sidebar.sidebar-bs5 .navbar-custom>.nav-item {
        display: block;
        flex: 0 0 auto;
        width: 100%;
    }

    #sidebar.sidebar-bs5 .navbar-custom li.nav-item>a.nav-link {
        display: flex;
        align-items: center;
        min-height: 52px;
        padding: 10px 13px;
        border-radius: 0;
        white-space: nowrap;
        position: relative;
        isolation: isolate;
        overflow: hidden;
    }

    .navbar-collapse {
        padding-left: 0 !important;
    }

    #sidebar.sidebar-bs5 .navbar-custom>li.nav-item>a.nav-link::before {
        content: '';
        position: absolute;
        top: 0;
        left: -37px;
        width: 30%;
        height: 100%;
        background-color: transparent;
        opacity: 0;
        z-index: -1;
        pointer-events: none;
        transition: var(--ts);
    }

    .nav-link::after {
        background-image: url(../../assets/fascMailer/right-arrow.svg);
        background-size: contain;
        border: none !important;
        width: 13px;
        height: 13px;
        background-repeat: no-repeat;
        transform: rotate(90deg);
        background-position: top;
    }

    #sidebar.sidebar-bs5 .navbar-custom>li.nav-item>a.nav-link:hover::before,
    #sidebar.sidebar-bs5 .navbar-custom>li.nav-item.active>a.nav-link::before,
    #sidebar.sidebar-bs5 .navbar-custom>li.nav-item.expanded>a.nav-link::before,
    #sidebar.sidebar-bs5 .navbar-custom>li.nav-item>a.nav-link[aria-expanded="true"]::before {
        width: 128%;
        background-color: var(--prClr);
        opacity: .04;
    }

    #sidebar.sidebar-bs5 .navbar-custom>li.nav-item>a.nav-link:hover,
    #sidebar.sidebar-bs5 .navbar-custom>li.nav-item.active>a.nav-link,
    #sidebar.sidebar-bs5 .navbar-custom>li.nav-item.expanded>a.nav-link,
    #sidebar.sidebar-bs5 .navbar-custom>li.nav-item>a.nav-link[aria-expanded="true"] {
        color: var(--prClr) !important;
    }


    #sidebar.sidebar-bs5 .navbar-custom>li.nav-item.active>a.nav-link::after,
    #sidebar.sidebar-bs5 .navbar-custom>li.nav-item.expanded>a.nav-link::after,
    #sidebar.sidebar-bs5 .navbar-custom>li.nav-item>a.nav-link[aria-expanded="true"]::after {
        filter: brightness(0) saturate(100%) invert(29%) sepia(100%) saturate(2835%) hue-rotate(207deg) brightness(99%) contrast(104%);
        transform: rotate(-90deg);
    }

    #sidebar.sidebar-bs5 .navbar-custom .nv-icn {
        display: inline-flex;
        flex: 0 0 22px;
        align-items: center;
        justify-content: center;
        width: 22px;
        position: relative;
        z-index: 1;
        margin-left: 12px;
        margin-right: 12px;
    }

    #sidebar.sidebar-bs5 .navbar-custom .nv-icn>img {
        display: block;
        flex: 0 0 auto;
    }

    #sidebar.sidebar-bs5 .navbar-custom .nav-link>span:last-child {
        margin-left: 15px;
    }

    #sidebar.sidebar-bs5 .navbar-custom .nv-icn>img:last-child {
        display: none;
    }

    #sidebar.sidebar-bs5 .navbar-custom li.nav-item>a.nav-link:hover .nv-icn>img:first-child,
    #sidebar.sidebar-bs5 .navbar-custom li.nav-item>a.nav-link[aria-expanded="true"] .nv-icn>img:first-child,
    #sidebar.sidebar-bs5 .navbar-custom li.nav-item.active>a.nav-link .nv-icn>img:first-child,
    #sidebar.sidebar-bs5 .navbar-custom li.nav-item.expanded>a.nav-link .nv-icn>img:first-child {
        display: none;
    }

    #sidebar.sidebar-bs5 .navbar-custom li.nav-item>a.nav-link:hover .nv-icn>img:last-child,
    #sidebar.sidebar-bs5 .navbar-custom li.nav-item>a.nav-link[aria-expanded="true"] .nv-icn>img:last-child,
    #sidebar.sidebar-bs5 .navbar-custom li.nav-item.active>a.nav-link .nv-icn>img:last-child,
    #sidebar.sidebar-bs5 .navbar-custom li.nav-item.expanded>a.nav-link .nv-icn>img:last-child {
        display: block;
    }

    #sidebar.sidebar-bs5 .navbar-custom .nav-link>span:last-child,
    #sidebar.sidebar-bs5 .navbar-custom .dropdown-toggle::after {
        opacity: 0;
        visibility: hidden;
        position: relative;
        z-index: 1;
        transition: opacity .14s ease;
    }

    #sidebar.sidebar-bs5:hover .navbar-custom .nav-link>span:last-child,
    #sidebar.sidebar-bs5:hover .navbar-custom .dropdown-toggle::after,
    #sidebar.sidebar-bs5:focus-within .navbar-custom .nav-link>span:last-child,
    #sidebar.sidebar-bs5:focus-within .navbar-custom .dropdown-toggle::after,
    #sidebar.sidebar-bs5.sidebar-pinned .navbar-custom .nav-link>span:last-child,
    #sidebar.sidebar-bs5.sidebar-pinned .navbar-custom .dropdown-toggle::after {
        opacity: 1;
        visibility: visible;
    }

    #sidebar.sidebar-bs5:not(.sidebar-pinned):not(:hover):not(:focus-within) .navbar-custom .dropdown-menu {
        display: none !important;
    }

    /* Submenus expand as an accordion underneath their parent item instead
       of opening as Bootstrap floating menus. */
    #sidebar.sidebar-bs5 .navbar-custom .dropdown-menu {
        position: static !important;
        inset: auto !important;
        float: none;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 2px 0 6px 60px;
        transform: none !important;
        background: var(--bgClr);
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    #sidebar.sidebar-bs5 .navbar-custom .dropdown-menu .dropdown-item {
        display: block;
        width: 100%;
        padding: 0;
        white-space: normal;
    }

    .submenu .nav-link::after {
        top: 3px;
    }

    #sidebar.sidebar-bs5 .navbar-custom .dropdown-menu .nav-link {
        display: flex;
        padding: 10px 15px;
        line-height: 120%;
        font-size: 15px;
        font-weight: 400;
        white-space: normal;
        color: var(--trClr);
        transition: var(--ts);
    }

    .sidebar-menu-scroll .navbar-nav>.nav-item>.nav-link>.submenu .submenu .nav-link {
        font-size: 13px !important;
    }

    #sidebar.sidebar-bs5 .navbar-custom .dropdown-menu .nav-link:hover {
        color: var(--prClr) !important;
    }

    #sidebar.sidebar-bs5 .navbar-custom .dropdown-menu .dropdown-menu {
        padding-left: 16px;
        background: var(--bgClr);
    }

    .submenu .nav-link {
        /* font-size: 13px!important; */
    }

    #sidebar.sidebar-bs5 .navbar-custom .dropdown-toggle::after {
        margin-left: auto;
        transition: transform .18s ease, opacity .14s ease;
    }

    #sidebar.sidebar-bs5 .navbar-custom .dropdown-toggle[aria-expanded="true"]::after {
        transform: rotate(-90deg);
    }

    #sidebar.sidebar-bs5 .sidebar-user-area {
        position: static;
        flex: 0 0 auto;
        width: 100%;
        padding: 10px 12px 20px;
        overflow: hidden;
        background: var(--bgClr);
        border-top: 1px solid #e7ebf0;
    }

    #sidebar.sidebar-bs5 .sidebar-user-profile {
        display: flex;
        align-items: center;
        width: 254px;
        min-height: 50px;
        color: #172033;
    }

    #sidebar.sidebar-bs5 .sidebar-user-avatar {
        display: inline-flex;
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        background-image: url(../../assets/fascMailer/avatar.webp);
        border-radius: 50%;
        font-weight: 600;
        background-size: cover;
        color: var(--trClr);
        font-size: 20px;
    }

    #sidebar.sidebar-bs5 .sidebar-user-area:hover .sidebar-user-actions,
    #sidebar.sidebar-bs5 .sidebar-user-area:focus-within .sidebar-user-actions,
    #sidebar.sidebar-bs5 .sidebar-user-actions.is-open {
        display: block;
        opacity: 1;
        transition: var(--ts);
    }



    .sidebar-user-actions {
        display: none;
        position: absolute;
        right: 0px;
        bottom: 10px;
        display: none;
        opacity: 0;
    }

    .sidebar-user-actions.is-open {
        display: block;
        opacity: 1;
    }

    #sidebar.sidebar-bs5 .sidebar-user-copy {
        display: flex;
        min-width: 0;
        margin-left: 12px;
        flex-direction: column;
        opacity: 0;
        visibility: hidden;
        transition: opacity .14s ease;
    }

    #sidebar.sidebar-bs5 .sidebar-user-copy strong {
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px;
        font-weight: 300;
        line-height: 130%;
        color: var(--trClr);
    }

    #sidebar.sidebar-bs5 .sidebar-user-copy small {
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 500;
        line-height: 130%;
        color: var(--srClr);
    }

    #sidebar.sidebar-bs5 .sidebar-user-arrow {
        margin-left: auto;
        opacity: 0;
        visibility: hidden;
    }

    #sidebar.sidebar-bs5:hover .sidebar-user-copy,
    #sidebar.sidebar-bs5:hover .sidebar-user-arrow,
    #sidebar.sidebar-bs5:focus-within .sidebar-user-copy,
    #sidebar.sidebar-bs5:focus-within .sidebar-user-arrow,
    #sidebar.sidebar-bs5.sidebar-pinned .sidebar-user-copy,
    #sidebar.sidebar-bs5.sidebar-pinned .sidebar-user-arrow {
        opacity: 1;
        visibility: visible;
    }

    /* #sidebar.sidebar-bs5 .sidebar-user-actions {
        display: none !important;
    } */

    .sidebar-user-actions-content {
        position: absolute;
        bottom: 0px;
        background: #fff;
        width: 250px;
        padding: 18px 15px;
        left: 10px;
        box-shadow: 0 0 10px #3333330d;
        border-radius: var(--br);
        border: 1px solid #e7ebf0;
    }

    .strIcn {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        display: inline-flex;
        color: var(--trClr) !important;
        font-size: 18px;
        align-items: center;
        justify-content: space-around;
    }

    .sidebar-user-actions-content li,
    .sidebar-user-actions-content li>a {
        display: flex;
        align-items: center;
        cursor: pointer;
        width: 100%;
    }

    .sidebar-user-actions-content li:hover span,
    .sidebar-user-actions-content li>a:hover span {
        color: var(--prClr) !important;
        transition: var(--ts);
    }

    .sidebar-user-actions-content li span,
    .sidebar-user-actions-content li>a span {
        color: var(--trClr);
        transition: var(--ts);
    }

    #setting_lnk>a::after {
        transform: rotate(0deg) !important;
    }

    .sidebar-user-actions-content li.nav-item {
        display: flex;
        align-items: center;
        justify-content: start;
        text-align: start;
    }

    #sidebar-user-profile {
        cursor: pointer;
        position: relative;
    }

    body {
        overflow-x: hidden;
    }

    .crd-mlr_ttl {
        font-size: 27px;
        font-weight: 500;
        line-height: 120%;
        color: var(--srClr);
    }

    .sidebar-user-actions::before,
    #setting_lnk .topminimenu::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0px;
        width: 40px;
        height: 70vh;
        background-color: transparent;
    }

    #setting_lnk .topminimenu::before {
        left: -35px !important;
    }

    .strIcn+span {
        font-size: 14px;
        font-weight: 400;
        color: var(--trClr);
    }

    #sidebar.sidebar-bs5 .men-opn_cls_box {
        display: block;
        top: 3%;
        left: auto;
        right: -13px;
        z-index: 1040;
        transform: translateY(0%);
    }

    #sidebar.sidebar-bs5 .sidebar-pin-toggle {
        width: 25px;
        height: 50px;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    #sidebar.sidebar-bs5 .sidebar-pin-toggle img {
        position: static;
        left: auto !important;
        width: 25px;
        height: 50px;
        object-fit: contain;
        top: auto;
    }

    #sidebar.sidebar-bs5 .sidebar-pin-close,
    #sidebar.sidebar-bs5.sidebar-pinned .sidebar-pin-open {
        display: none;
    }

    #sidebar.sidebar-bs5:hover .sidebar-pin-open,
    #sidebar.sidebar-bs5:focus-within .sidebar-pin-open {
        display: none;
    }

    #sidebar.sidebar-bs5:hover .sidebar-pin-close,
    #sidebar.sidebar-bs5:focus-within .sidebar-pin-close,
    #sidebar.sidebar-bs5.sidebar-pinned .sidebar-pin-close {
        display: block;
    }

    .mainPageContent,
    .mainPageContent.contract,
    .mainPageContent.expand {
        margin-left: 72px !important;
        width: calc(100% - 72px);
    }
}

/* Bootstrap 5 toast used by the newsletter subscribers bulk actions. */
#subscriberToastContainer {
    z-index: 1090;
}

.subscriber-error-toast {
    width: min(420px, calc(100vw - 2rem));
    color: var(--bgClr);
    background-color: #d64b4b;
    border-radius: 10px;
    box-shadow: 0 0.75rem 2rem rgba(33, 37, 41, 0.2);
    width: fit-content;
}

.subscriber-error-toast .toast-body {
    padding: 10px 19px;
    color: inherit;
    background-color: transparent;
    font-size: 12px !important;
    font-weight: 400;
    width: fit-content;
}

.subscriber-error-toast .fa-times-circle {
    font-size: 16px;
}

.subscriber-error-toast .btn-close {
    margin-left: 10px;
    font-size: 10px;
}

/* Bootstrap 5 success/error toast used by redirect messages. */
/* #appToastContainer {
    position: fixed !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: auto !important;
    max-width: 100vw;
    z-index: 1090 !important;
    pointer-events: none;
} */

#appToastContainer .toast {
    pointer-events: auto;
}

.app-message-toast {
    width: fit-content;
    max-width: min(420px, calc(100vw - 2rem));
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 0.75rem 2rem rgba(33, 37, 41, 0.2);
}

.app-message-toast-success {
    background-color: #198754;
}

.app-message-toast-error {
    background-color: #d64b4b;
}

.app-message-toast .toast-body {
    width: fit-content;
    padding: 10px 19px;
    color: inherit;
    background-color: transparent;
    font-size: 12px !important;
    font-weight: 400;
}

.app-message-toast .fas {
    font-size: 16px;
}

.app-message-toast .btn-close {
    margin-left: 10px;
    font-size: 10px;
}

/* CSV import: make Chosen multi-selects match the standard text inputs. */
#csvImport .chosen-container {
    width: 100% !important;
    font-size: 14px !important;
}

#csvImport .chosen-container-multi .chosen-choices {
    min-height: 50px;
    margin: 0;
    padding: 7px 12px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    overflow: visible;
    color: var(--bodyTextColor);
    background: #fff !important;
    border: 1px solid #e2e8f0;
    border-radius: var(--br);
    box-shadow: none;
}

#csvImport .chosen-container-multi .chosen-choices li.search-field {
    flex: 1 1 120px;
    margin: 0;
}

#csvImport .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
    width: 100% !important;
    height: 34px;
    margin: 0;
    padding: 0 7px;
    color: var(--bodyTextColor) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    outline: 0;
}

#csvImport .chosen-container-active .chosen-choices {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

#csvImport .chosen-container .chosen-drop {
    width: 100%;
    margin-top: 4px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: var(--br);
    box-shadow: 0 0.5rem 1rem rgba(33, 37, 41, 0.12);
}

#csvImport .chosen-container .chosen-results {
    width: 100%;
    margin: 0;
    padding: 6px;
    background: #fff;
}

#csvImport .chosen-container .chosen-results li {
    padding: 9px 12px;
    border-radius: calc(var(--br) / 2);
    font-size: 14px;
}

#csvImport .chosen-container .chosen-results li.no-results {
    color: var(--bodyTextColor);
    background: #f8fafc;
}

/* Show one selected mailing list and collapse the remainder into a counter. */
#csvImport .csv-selection-summary {
    min-width: 0;
    max-width: calc(100% - 80px);
    margin: 0;
    padding: 7px 9px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--bodyTextColor);
    background: #f8fafc;
    border: 1px solid #d7dee8;
    border-radius: 6px;
    list-style: none;
}

#csvImport .csv-selection-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#csvImport .csv-selection-count {
    padding: 2px 7px;
    flex: 0 0 auto;
    color: #fff;
    background: #0d6efd;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

/* Keep the tags result panel attached directly below its input. */
#csvImport .csv-tags-select .chosen-container {
    height: 50px;
}

#csvImport .csv-tags-select .chosen-choices {
    height: 50px;
    min-height: 50px;
    overflow: hidden;
}

#csvImport .csv-tags-select .chosen-drop {
    top: 54px;
    left: 0;
    margin-top: 0;
}

/* Bootstrap searchable checkbox multi-select used by import forms. */
#importform #idList,
#importform #subTags {
    display: none !important;
}

.import-multiselect .dropdown-toggle {
    min-height: 50px;
    padding: 10px 14px;
    color: var(--bodyTextColor);
    background: var(--bgClr);
    border: 1px solid #d7dee8;
    border-radius: var(--br);
}

.import-multiselect .dropdown-toggle::after {
    margin-left: auto;
}

.import-multiselect .dropdown-menu {
    width: 100%;
    max-height: 340px;
    padding: 8px;
    overflow: hidden;
    border-color: #d7dee8;
    border-radius: var(--br);
    box-shadow: 0 .5rem 1rem rgba(33, 37, 41, .12);
}

.import-multiselect .import-multiselect-options {
    max-height: 245px;
    overflow-y: auto;
}

.import-multiselect .import-multiselect-option {
    padding: 9px 10px;
    white-space: normal;
    cursor: pointer;
    border-radius: 6px;
}

.import-multiselect .import-multiselect-option:hover {
    background: #f3f6fa;
}

.import-multiselect .import-multiselect-option.import-multiselect-option-hidden {
    display: none !important;
}

.checkbox .import-multiselect-option input[type="checkbox"] {
    display: block !important;
    flex: 0 0 auto;
    cursor: pointer;
}

.import-multiselect .import-multiselect-count {
    padding: 3px 8px;
    color: #fff;
    background: #0d6efd;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

/* Keep the Quick Import list selector inside its Bootstrap column. */
#quickImport2 .quick-list-select-field {
    flex: 1 1 auto;
    min-width: 0;
}

#quickImport2 .quick-list-update-field {
    flex: 0 0 auto;
}

#quickImport2 #quickListMultiSelect,
#quickImport2 #quickListMultiSelect .dropdown-toggle {
    min-width: 0;
}

#quickImport2 #quickListMultiSelect .import-multiselect-button-text {
    flex: 1 1 auto;
    min-width: 0;
}

#csfPers .field-filter {
    position: relative;
}

#csfPers .field-filter-control {
    min-height: 54px;
    padding: 7px 42px 7px 8px;
    gap: 7px;
    background: var(--bgClr);
    border: 1px solid #d7dee8;
    border-radius: var(--br);
    cursor: pointer;
}

#csfPers .field-filter-control::after {
    position: absolute;
    top: 24px;
    right: 18px;
    display: inline-block;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
    opacity: .65;
}

#csfPers .field-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 12px;
    color: var(--bodyTextColor);
    background: var(--bgClr);
    border: 1px solid #d7dee8;
    border-radius: 7px;
    line-height: 1;
}

#csfPers .field-filter-pill button {
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    font-size: 20px;
    line-height: 1;
    opacity: .6;
}

#csfPers .field-filter-placeholder {
    padding: 8px 5px;
    color: #7c8798;
}

#csfPers .field-filter-menu {
    width: 100%;
    max-height: 360px;
    padding: 10px;
    overflow: hidden;
}

#csfPers .field-filter-options {
    max-height: 285px;
    margin-top: 8px;
    overflow-y: auto;
}

#csfPers .field-filter-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
}

#csfPers .field-filter-option:hover {
    background: var(--ffClr);
}

#csfPers .field-filter-empty {
    padding: 12px 10px;
    color: #7c8798;
}