/* Global */
body {
    --ecellar-back-blue-1: #EEF3F8;
    --ecellar-back-blue-2: #F7F9FB;
    --ecellar-bright-blue: #4EADE9;
    --ecellar-dark-blue: #445462;
    --ecellar-light-blue: #DCEFFB;
    --ecellar-mute-blue: #598BB7;
    --ecellar-blue-highlight: #2777D9;
    --white: #FFFFFF;
    --gray: #E6E6E6;
    --black: #212A31;
    --footer-links-color: #0071BC;
    margin: 0;
    font-family: 'proxima-nova', sans-serif;
    line-height: 1.4;
    color: var(--ecellar-dark-blue);
}

body h1, 
body .h1, 
body h2, 
body .h2, 
body h3, 
body .h3, 
body h4, 
body .h4, 
body h5, 
body .h5, 
body h6, 
body .h6 {
    font-family: 'proxima-nova', sans-serif;
    line-height: 1;
    color: var(--ecellar-dark-blue);
}

body h1, 
body .h1,
.dashboard-main-title h2 {
    font-size: 2rem;
    font-weight: 700;
    text-transform: none;
}

body [type="text"], 
body [type="password"], 
body [type="date"],
body [type="datetime"],
body [type="datetime-local"],
body [type="month"],
body [type="week"],
body [type="email"],
body [type="number"],
body [type="search"],
body [type="tel"],
body [type="time"],
body [type="url"],
body [type="color"],
body textarea,
body select {
    font-family: 'proxima-nova', sans-serif;
    box-shadow: none;
    border-radius: 4px;
    border: 1px solid var(--gray);
    color: var(--ecellar-dark-blue);
    padding: .3rem .4rem;
}

body [type="text"]:focus,
body [type="password"]:focus,
body [type="date"]:focus,
body [type="datetime"]:focus,
body [type="datetime-local"]:focus,
body [type="month"]:focus,
body [type="week"]:focus,
body [type="email"]:focus,
body [type="number"]:focus,
body [type="search"]:focus,
body [type="tel"]:focus,
body [type="time"]:focus,
body [type="url"]:focus,
body [type="color"]:focus,
body textarea:focus {
    border: none;
    box-shadow: inherit;
}

a {
    transition: ease 0.2s all;
    text-decoration: none;
    color: var(--black);
}

a:hover {
    color: var(--ecellar-bright-blue);
}

body thead {
    background-color: var(--ecellar-dark-blue);
}

body tbody td {
    color: var(--ecellar-dark-blue);
}

body tbody tr:nth-child(2n) {
  background-color: var(--ecellar-back-blue-2);
}

.board-main a {
    color: var(--ecellar-bright-blue);
}

.board-main a:hover {
    color: var(--ecellar-dark-blue);
}

.btn,
.button, 
.button.disabled, 
.button[disabled], 
.button.disabled:hover, 
.button[disabled]:hover, 
.button.disabled:focus, 
.button[disabled]:focus,
body .acp_CampaignList .button-group .button.h-filter-active {
    background-color: var(--ecellar-blue-highlight);
    border-radius: 4px;
    -webkit-transition: background-color 0.25s ease-out, color 0.25s ease-out;
    transition: background-color 0.25s ease-out, color 0.25s ease-out;
}

.button:hover, 
.button:focus,
body .acp_CampaignList .button-group .button:hover {
    background-color: var(--ecellar-dark-blue);
}

body .acp_CampaignList .button-group .button {
    background-color: var(--ecellar-bright-blue);
    opacity: 1;
    color: var(--white);
}

.bright-blue-link {
    color: var(--ecellar-bright-blue);
}

.bright-blue-link:hover {
    color: var(--ecellar-mute-blue);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.bold {
    font-weight: bold;
}

/* Header */
body header {
    background-color: var(--ecellar-back-blue-1);
    background-image: none;
    z-index: 10;
}

header section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background-color: var(--ecellar-back-blue-1);
}

header .nav-left-column,
header .nav-right-column {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
}

header .logo-container {
    display: flex;
    align-items: center;
    gap: 30px;
}

header .nav-toggle {
    cursor: pointer;
}

header .nav-toggle::before {
    content: url('../images/icons/hamburger-menu.svg');
}

header .search-box {
    display: flex;
    align-items: center;
    background-color: var(--white);
    border-radius: 20px;
    padding: 4px 40px 4px 20px;
    gap: 6px;
}

header .search-box .search-icon {
    content: url('../images/icons/search.svg');
}

header .search-box input {
    min-width: 240px;
    font-size: 16px;
    margin: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
    height: auto;
    color: var(--ecellar-dark-blue);
}

header .search-box input:focus {
    outline: none;
    box-shadow: none;
    border: none;
    background: transparent;
}

.search-title p span {
    color: var(--ecellar-dark-blue);
}

.search-area.acp_QuickSearch .fa-search::before {
    color: var(--ecellar-bright-blue);
}

.form-control {
    height: auto;
}

.acp_QuickSearch .form-group .form-control {
  font-size: .8rem;
}

.acp_QuickSearch .form-group .btn.btn-white {
  border: none;
  border-radius: 4px;
  background-color: var(--ecellar-bright-blue);
  text-transform: capitalize;
  color: var(--white);
  height: auto;
  padding: .3rem .4rem;
  font-size: .8rem;
  line-height: 1.5;
}

.acp_QuickSearch .form-group .btn.btn-white:hover {
  background-color: var(--ecellar-dark-blue);
} 

header .nav-right-column .quick-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

header .nav-right-column .quick-actions-text {
    font-size: 18px;
    line-height: 1;
    width: 110px;
}

header .nav-right-column .quick-actions-icon {
    position: relative;
    width: 24px;
}

header .nav-right-column .quick-actions-icon::before {
    content: url('../images/icons/plus.svg');
    position: absolute;
    top: -12px;
    transition: ease 0.2s all;
}

header .nav-right-column .quick-actions-icon::after {
    content: url('../images/icons/minus.svg');
    position: absolute;
    top: -12px;
    opacity: 0;
    transition: ease 0.2s all;
}

header .nav-right-column .quick-actions:hover .quick-actions-icon::before {
    opacity: 0;
}

header .nav-right-column .quick-actions:hover .quick-actions-icon::after {
    opacity: 1;
}

header .nav-right-column .quick-actions div {
    height: 0;
    opacity: 0;
    position: absolute;
    overflow: hidden;
    top: 22px;
    right: 11px;
    list-style: none;
    width: 170px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    transition: ease 0.2s all;
}

header .nav-right-column .quick-actions div::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    background: var(--white);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

header .nav-right-column .quick-actions:hover div {
    height: auto;
    opacity: 1;
    overflow: visible;
}

header .nav-right-column .quick-actions ul {
    list-style: none;
    padding: 0;
    margin: 0;
    padding: 10px 5px 20px;
    background: var(--white);
    box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0.2);
    border-radius: 10px 0 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

header .nav-right-column .quick-actions ul li a {
    line-height: 1;
}

header .nav-right-column .quick-actions ul li a:hover {
    color: var(--black);
}

header .nav-right-column .quick-actions ul li a span {
    width: max-content;
    padding: 5px 10px;
    border-radius: 60px;
    display: block;
    transition: ease 0.2s all;
}

header .nav-right-column .quick-actions ul li a:hover span {
    background-color: var(--ecellar-light-blue);
    color: var(--black);
} 

header .nav-right-column .right-menu {
    font-size: 14px;
}

header .top-list select[name="client_id"] {
    height: 1.8rem;
    font-size: .8rem;
}

.top-list ul li a {
    color: var(--ecellar-dark-blue);
}

.form-control {
  background: var(--ecellar-back-blue-2);
}

.main-nav {
    background-color: var(--white);
    width: 0;   
    overflow: hidden;
    transition: ease all .2s;
}

.main-nav.open,
#nav-menu,
#nav-menu.dropdown.menu.vertical.acp-nav-shrunk.open {
    width: 255px;
    padding: 40px 10px 20px 10px;
}

.main-nav ul {
    list-style: none;
}

.main-nav #nav-menu,
#nav-menu {
    padding: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-left: 0;
}

#nav-menu.dropdown.menu > li a,
#nav-menu.dropdown.menu > li a span {
    font-family: 'proxima-nova', sans-serif;
    font-size: 1rem;
    line-height: 1;
}

.main-nav #nav-menu > li > a,
#nav-menu > li > a,
#nav-menu.dropdown.menu > li.is-dropdown-submenu-parent > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 6px 10px 16px;
    border-radius: 30px;
    font-size: 1rem;
    line-height: 1;
    color: var(--black);
}

.main-nav #nav-menu > li > a.active,
.main-nav #nav-menu > li > a:hover,
body main #nav-menu.dropdown.menu > li > a.active,
body main #nav-menu.dropdown.menu > li > a:hover,
#nav-menu.dropdown.menu > li.is-dropdown-submenu-parent.sm-active > a {
    background-color: var(--ecellar-blue-highlight);
    color: var(--white);
}

#nav-menu.dropdown.menu li a img {
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0;
    max-width: 1.1rem;
    transition: ease 0.2s all;
}

.main-nav #nav-menu > li > a.active span,
.main-nav #nav-menu > li > a:hover span,
body main #nav-menu.dropdown.menu > li > a.active span,
body main #nav-menu.dropdown.menu > li > a:hover span,
#nav-menu.dropdown.menu li a:hover img,
#nav-menu.dropdown.menu li a:active img {
    filter: brightness(10);
}

.main-nav #nav-menu li.has-submenu > a .submenu-chevron,
.is-dropdown-submenu .is-dropdown-submenu-parent.opens-right > a::after,
#nav-menu.dropdown.menu.vertical > li.opens-right > a::after,
#nav-menu.dropdown.menu > li.is-dropdown-submenu-parent > a::after,
body main #nav-menu.dropdown.menu li.has-submenu > a::after {
    content: url('../images/icons/chevron-down.svg')!important;
    width: 9.6px;
    margin-left: auto;
    transition: ease all .2s;
    rotate: -90deg;
    display: block;
    padding: 10px;
    background: url('../images/icons/chevron-down.svg') no-repeat;
    background-size: 9.6px;
    background-position: center;
    border: none;
    padding: 5px;
    right: 10px;
    top: 15px;
}

main #nav-menu.dropdown.menu.vertical > li.is-dropdown-submenu-parent > a::after {
    top: 20px;
}

/* .main-nav #nav-menu > li.has-submenu:hover > a .submenu-chevron */
.main-nav #nav-menu li.has-submenu.sm-active > a .submenu-chevron,
body main #nav-menu.dropdown.menu li.has-submenu.sm-active > a::after,
#nav-menu.dropdown.menu.vertical > li.opens-right > a:hover::after,
#nav-menu.dropdown.menu > li.is-dropdown-submenu-parent > a:hover::after {
    filter: invert(1);
}

#nav-menu.dropdown.menu > li.is-dropdown-submenu-parent.sm-active > a::after {
    filter: invert(1);
    rotate: 0deg;
}

#nav-menu.dropdown.menu > li.is-dropdown-submenu-parent.sm-active > a > img {
    filter: brightness(100);
}

.is-dropdown-submenu li.is-dropdown-submenu-parent.opens-right.sm-active > a::after {
    rotate: 0deg;
}

.main-nav #nav-menu > li.has-submenu > a:hover .submenu-chevron,
body main #nav-menu.dropdown.menu > li.has-submenu > a:hover::after {
    filter: invert(1);
}


.main-nav .dashboard-icon {
    content: url('../images/icons/dashboard.svg');
    margin-left: 2px;
}

.main-nav .ecellar-hub-icon {
    content: url('../images/icons/ecellar-hub.svg');
    margin-left: 2px;
}

.main-nav .search-icon {
    content: url('../images/icons/nav-search.svg');
    margin-left: 2px;
}

.main-nav .customers-icon {
    content: url('../images/icons/customers.svg');
    margin-left: 2px;
}

.main-nav .orders-icon {
    content: url('../images/icons/orders.svg');
    margin-left: 2px;
}

.main-nav .reports-icon {
    content: url('../images/icons/reports.svg');
    margin-left: 2px;
}

.main-nav .campaigns-icon {
    content: url('../images/icons/campaigns.svg');
    margin-left: 2px;
}

.main-nav .products-icon {
    content: url('../images/icons/products.svg');
    margin-left: 2px;
}

.main-nav .company-icon {
    content: url('../images/icons/company.svg');
    margin-left: 2px;
}

.main-nav .club-icon {
    content: url('../images/icons/club.svg');
    margin-left: 2px;
}

.main-nav .allocation-icon {
    content: url('../images/icons/allocation.svg');
    margin-left: 2px;
}

.main-nav .pos-icon {
    content: url('../images/icons/pos.svg');
    margin-left: 2px;
}

.main-nav .res-mgr-icon {
    content: url('../images/icons/res-mgr.svg');
    margin-left: 2px;
}

.main-nav .log-out-icon {
    content: url('../images/icons/logout.svg');
    margin-left: 2px;
}

.main-nav #nav-menu .submenu .bullet,
#nav-menu.dropdown.menu ul li a::before {
    content: '•';
    color: var(--ecellar-mute-blue);
    margin-right: 5px;
}

/* .main-nav #nav-menu .has-submenu:hover .submenu,
.main-nav #nav-menu .has-submenu a.active + .submenu, 
.main-nav #nav-menu .has-submenu.sm-active .submenu,
.main-nav #nav-menu .has-submenu a.active + .submenu .submenu
*/
.main-nav #nav-menu .has-submenu.sm-active > .submenu {
    display: block;
    margin-left: 0;
} 

.main-nav #nav-menu .submenu {
    padding: 0;
    display: none;
}

.main-nav #nav-menu .submenu a,
#nav-menu.dropdown.menu ul li a {
    padding: 6px 6px 6px 50px;
    border-radius: 30px;
    display: flex;
    line-height: 1;
}

.main-nav #nav-menu .submenu a:hover,
body main #nav-menu.dropdown.menu .is-submenu-item a:hover,
.is-dropdown-submenu li.is-dropdown-submenu-parent.opens-right.sm-active > a {
    background-color: var(--ecellar-light-blue);
    color: var(--black);
} 

.main-nav #nav-menu .submenu .submenu a,
#nav-menu.dropdown.menu .submenu .submenu a {
    padding: 6px 6px 6px 66px;
}

.main-nav #nav-menu .submenu .submenu .submenu a,
#nav-menu.dropdown.menu .submenu .submenu .submenu a  {
    padding: 6px 6px 6px 76px;
}

.main-nav #nav-menu .submenu .submenu .submenu .submenu a,
#nav-menu.dropdown.menu .submenu .submenu .submenu .submenu a {
    padding: 6px 6px 6px 86px;
}

.menu-subtitle {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: .6rem;
    margin-left: 60px;
}

/* Main Nav */
#nav-menu.dropdown.menu {
    position: relative;
}

#nav-menu.dropdown.menu.vertical.acp-nav-shrunk {
    width: 0;
    background-color: var(--white);  
    overflow: hidden;
    transition: ease all .2s;
}

#nav-menu .toogler {
    display: none;
}

#nav-menu.dropdown.menu.vertical.acp-nav-shrunk > li > a > span {
    display: block;
}

#nav-menu.dropdown.menu li a img,
#nav-menu.dropdown.menu li a:hover img,
#nav-menu.dropdown.menu.vertical.acp-nav-shrunk li a img:hover {
    background: transparent;
    margin-right: 0;
}

#nav-menu.dropdown.menu .is-dropdown-submenu {
    position: relative;
    left: unset;
    top: unset;
    background-color: transparent;
    border: none;
}

.close-main-nav{
    position: absolute;
    top: 10px;
    right: 10px;
    line-height: 1;
    font-weight: 500;
    font-size: 20px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    color: var(--ecellar-bright-blue);
}
.close-main-nav::before {
    content: 'X';
}

/* Main Content */
main {
    display: flex;
}

.board-main {
    padding: 40px 20px;
    background-color: var(--ecellar-back-blue-2);
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    transition: ease all .2s;
}

.board-main.menu-open {
    width: calc(100% - 255px);
} 

.board-main > div,
.board-main section {
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
}

.full-column-section {
    display: flex;
    justify-content: center;
}

.full-column-section .ecellar-widget {
    width: 100%;
}

.three-columns-section {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px 2%;
}

.three-columns-section .ecellar-widget {
    width: 32%;
    min-width: 314px;
}

.ecellar-widget {
    background-color: var(--white);
    border-radius: 20px;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.05);
    width: 100%;
}

.ecellar-widget-heading {
    padding: 16px 20px 5px;
    border-bottom: 1px solid var(--gray);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ecellar-widget-heading h2 {
    font-size: 18px;
    font-weight: 500;
    margin: 0;
}

.ecellar-widget-heading select {
    padding: 4px 22px 4px 4px;
    border-radius: 4px;
    border: 1px solid var(--gray);
    background-color: var(--ecellar-back-blue-2);
    font-size: 14px;
    color: var(--ecellar-dark-blue);
    width: auto;
    height: auto;
    background-image: url('../images/icons/chevron-right.svg');
    background-size: 6px 11px;
}

.ecellar-widget-heading select:focus {
    box-shadow: none;
}

.ecellar-widget-content {
    padding: 5px 20px 20px;
}

.ecellar-widget-content .average-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

 .ecellar-widget-content .average {
    margin: 0;
    line-height: 1;
 }

 .ecellar-widget .widget-search-icon {
    content: url('../images/icons/widget-search.svg');
    margin-left: 2px;
    transition: ease 0.2s all;
 }

 .ecellar-widget a:hover .widget-search-icon {
    filter: saturate(3) contrast(.8) brightness(.6);
 }

 .ecellar-widget .widget-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px 20px;
    gap: 20px;
    font-size: 14px;
    text-transform: uppercase;
 }

/* chart */
.widget-chart {
    display: flex;
    justify-content: center;
    gap: 34px;
    align-items: flex-end;
    padding: 35px 20px 10px;
}

.chart-item {
    text-align: center;
    color: #405366;
    font-family: Arial, sans-serif;
}

.bars {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    height: 190px;
}

.bar {
    width: 32px;
    height: var(--height);
    border-radius: 4px;
    position: relative;
}

.bar span {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    white-space: nowrap;
    color: #405366;
}

.bar-light {
    background-color: #aebfce;
}

.bar-dark {
    background-color: #435565;
}

.chart-item p {
    margin: 8px 0 0;
    font-size: 16px;
    line-height: 1;
}

/* News */
.ecellar-widget-tabs {
    margin-left: 40px;
}

.ecellar-widget-tabs button {
    color: var(--ecellar-mute-blue);
    background: none;
    border: none;
    padding: 5px 12px;
    border-radius: 30px;
    transition: ease 0.2s all;
    font-size: .8rem;
}
.ecellar-widget-tabs button:not(.active) {
    cursor: pointer;
}

.ecellar-widget-tabs button:hover:not(.active) {
    color: var(--ecellar-bright-blue);
}

.ecellar-widget-tabs button.active {
    background-color: var(--ecellar-light-blue);
}

.heading-link {
    font-size: 14px;
    text-transform: uppercase;
    margin-left: auto;
}

.ecellar-widget-news {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ecellar-widget-content .news-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ecellar-widget-content .news-item h3 {
    margin: 0;
    font-weight: 600;
    color: var(--ecellar-dark-blue);
    font-size: 14px;
    line-height: 1;
}

.ecellar-widget-content .news-item p {
    margin: 0;
    font-size: 12px;
    line-height: 1;
}

.ecellar-widget-content .news-item a {
    text-transform: uppercase;
    font-size: 12px;
}

.grid-padding-x > .cell {
  padding-bottom: 1rem;
}

/* Footer */
footer {
    padding: 20px 0;
    background-color: var(--ecellar-back-blue-2);
    max-width: 1300px;
    margin: 0 auto;
    width: 100%;
}

footer img,
.dashboard-footer img {
    max-width: 120px;
}

footer p {
    font-size: 12px;
    margin-bottom: 0;
}

footer a {
    color: var(--footer-links-color);
}

body .dashboard-footer p a {
    font-weight: 400;
}

/* campaign */
.result-top-nav, .reports-top-nav {
    background-color: var(--ecellar-dark-blue);
    border-radius: 4px;
}

.result-nav ul li {
    display: flex;
}

.order-table-data {
    border-radius: 10px;
}

.order-table-data > div {
    border-radius: 10px;
    overflow: hidden;
}

ul.acp-functions li .fa, ul.acp-functions li .far, ul.acp-functions li .fas {
    border-radius: 6px;
}

body .result-show select, 
body .result-show-1 select, 
body .result-show input[type="text"], 
body .result-show-1 input[type="text"] {
    border-radius: 4px;
}

/* products */
body #productsWrapper a.bubble {
    border-color: var(--ecellar-light-blue);
    border-radius: 4px 4px 0 0;
    color: var(--black);
}

body #productsWrapper a.bubble:hover {
    background: var(--ecellar-back-blue-1);
    color: var(--ecellar-bright-blue);
}

body #productsWrapper a.bubble.current {
    background: var(--ecellar-back-blue-1);
    color: var(--black);
}

body #productListWrapper, 
body #productTreeWrapper {
    background: var(--ecellar-back-blue-1);
    border-color: var(--ecellar-light-blue);
    border-radius: 0 6px 6px 6px 6px;
}

#productsWrapper .productTable {
    box-shadow: none;
    border-color: var(--ecellar-light-blue);
}

body form.ml_search_results_frm .search_action_bar,
body #productsWrapper .productTable th {
    background-color: var(--ecellar-dark-blue);
}


body #productsWrapper .productTable td {
    border-color: var(--ecellar-light-blue);
}

/*** Responsive ***/
@media only screen and (max-width: 1300px) {
    .widget-chart {
        gap: 20px;
    }

    .bars {
        gap: 10px;
    }
}

@media only screen and (max-width: 1023px) {
    header .main-header {
        gap: 1rem;
    }

    header .search-area {
        justify-content: flex-start;
    }
}
@media only screen and (max-width: 992px) {
    .navbar-brand {
        position: relative;
        top: unset;
    }
    .acp_QuickSearch .form-group .form-control {
        font-size: .8rem;
        margin-right: .2rem;
        margin-bottom: .1rem;
    }
}
@media only screen and (max-width: 900px) {
    header .nav-toggle {
        margin-right: 7px;
    }

    header .nav-left-column, 
    header .nav-right-column {
        gap: 10px;
    }

    header .nav-right-column {
        flex-direction: column-reverse;
        align-items: flex-end;
    }

    header .search-box {
        padding: 4px 10px 4px 20px;
    }

    header .search-box input {
        min-width: 180px;
    }
}

@media only screen and (max-width: 767px) {
    body.menu-open {
        overflow-y: hidden;
        max-height: 100vh;
    }

    .top-list {
        margin-top: 0;
        margin-bottom: .5rem;
    }

    .top-list ul {
        flex-wrap: wrap;
    }

    #nav-menu.dropdown.menu.vertical.acp-nav-shrunk.open {
        width: 100%;
        overflow-y: auto;
        height: calc(100vh - 170px);
    }

    .board-main.menu-open {
        width: 0;
        padding: 0;
        overflow: hidden;
    } 

    .main-nav.open {
        width: 100%;
        position: fixed;
        z-index: 10;
        top: 0;
        max-width: 100vw;
        height: 100vh;
    }

    .close-main-nav::before {
        content: "X";
        font-size: 24px;
        line-height: 1;
    }

    .main-nav #nav-menu {
        padding-top: 30px;
    }

    .ecellar-widget-heading {
        flex-direction: column;
        gap: 10px;
    }

    .three-columns-section .ecellar-widget {
        width: 100%;
        min-width: 1px;
    }
}

@media only screen and (max-width: 480px) {
    .header {
        flex-direction: column;
    }

    header .nav-right-column {
        flex-direction: row-reverse;
        width: 100%;
        justify-content: space-between;
        margin-top: 18px;
    }

    .board-main {
        padding: 20px 10px;
        width: calc(100% - 20px);
    }
    #nav-menu.dropdown.menu.vertical.acp-nav-shrunk.open {
        height: calc(100vh - 230px);
    }
}