.trial_counter_text {color: yellow; padding: 15px; display: inline-block; font-weight:400;}
/* The trial countdown links to the Subscription page when the user is allowed to
   open it. The anchor stays visually identical to the plain text it replaced and
   picks up an underline on hover so it reads as clickable. */
.trial_counter_link {text-decoration: none;}
.trial_counter_link:hover .trial_counter_text, .trial_counter_link:focus .trial_counter_text {text-decoration: underline;}
.nav_partner_text {color:#ffffff; padding: 15px; display: inline-block; font-weight:400;}

#topnav {
    background-color: transparent;
    border: 0 none;
    left: 0;
    position: relative;
    right: 0;
    top: 0;
    z-index: 850;

    font-family: 'roboto',sans-serif;
    font-size: 14px;
}

/* color highlighting for selected menu items*/

#topnav .navigation-menu > li.active > a {
    color: #1c76cc;
}

#topnav .navigation-menu > li.active > a [class^="fa"] {
    color: #1c76cc;
}

#topnav .has-submenu.active .submenu li.active a
{
    color: #1c76cc;
}

/*highlight dropdown item from submenu */
#topnav .has-submenu.active > li.active
{
    color: #1c76cc;
}

/*#topnav .has-submenu.active a {
    color: #5fbeaa;
}
#topnav .has-submenu.active a i {
    color: #5fbeaa;
}
#topnav .has-submenu.active .submenu li.active a {
    color: #5fbeaa;
}*/

/* end of color highlighting for selected menu items*/

#topnav .topbar-main {
    background-color: #36404a;
}
#topnav .topbar-main .logo {
    color: #ffffff !important;
    float: left;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-top: 8px;
    text-transform: uppercase;
}
#topnav .topbar-main .logo h1 {
    margin: 0 auto;
    text-align: center;
}
#topnav .topbar-main .logo i {
    color: #5fbeaa;
}
#topnav .topbar-main .badge {
    position: absolute;
    right: 7px;
    top: 12px;
}
#topnav .topbar-main .nav > li > a {
    background: transparent none repeat scroll 0 0 !important;
    color: #ffffff !important;
    line-height: 60px;
    padding: 0 15px;
    position: relative;
}
#topnav .topbar-main .nav > li > a i {
    font-size: 16px;
}
#topnav .topbar-main .navbar-nav > .open > a {
    background-color: rgba(255, 255, 255, 0.1) !important;
}
#topnav .topbar-main .profile img {
    border: 2px solid #edf0f0;
    height: 36px;
    width: 36px;
}
#topnav .topbar-main .dropdown-menu-lg {
    width: 300px;
}
#topnav .topbar-main .dropdown-menu-lg .list-group {
    margin-bottom: 0;
}
#topnav .topbar-main .dropdown-menu-lg .list-group-item {
    border: medium none;
    padding: 10px 20px;
}
#topnav .topbar-main .dropdown-menu-lg .media-heading {
    margin-bottom: 0;
}
#topnav .topbar-main .dropdown-menu-lg .media-body p {
    color: #828282;
}
#topnav .topbar-main .notification-list {
    max-height: 230px;
}
#topnav .topbar-main .notification-list em {
    text-align: center;
    width: 34px;
}
#topnav .topbar-main .notification-list .media-body {
    display: inherit;
    margin-left: 50px;
    overflow: hidden;
    width: auto;
}
#topnav .topbar-main .notification-list .media-body h5 {
    display: block;
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}
#topnav .topbar-main .notifi-title {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    color: #4c5667;
    font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 15px;
    font-weight: 600;
    padding: 11px 20px 15px;
    text-transform: uppercase;
}
#topnav .topbar-main .navbar-nav {
    margin: 0;
}
#topnav .app-search {
    margin: 15px 20px 15px 10px;
    position: relative;
}
#topnav .app-search a {
    color: #c4c4cd;
    position: absolute;
    right: 20px;
    top: 5px;
}
#topnav .app-search .form-control, #topnav .app-search .form-control:focus {
    background: rgba(255, 255, 255, 0.1) none repeat scroll 0 0;
    border: medium none;
    border-radius: 30px;
    box-shadow: none;
    color: #ffffff;
    font-size: 13px;
    height: 30px;
    padding-left: 20px;
    padding-right: 40px;
    width: 180px;
}
#topnav .navbar-custom {
    background-color: #ffffff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
#topnav .navbar-toggle {
    border: 0 none;
    cursor: pointer;
    height: 60px;
    margin: 0;
    padding: 0;
    position: relative;
    width: 60px;
}
#topnav .navbar-toggle:hover {
    background-color: transparent;
}
#topnav .navbar-toggle:hover span {
    background-color: #5fbeaa;
}
#topnav .navbar-toggle:focus {
    background-color: transparent;
}
#topnav .navbar-toggle:focus span {
    background-color: #5fbeaa;
}
#topnav .navbar-toggle .lines {
    display: block;
    height: 18px;
    margin: 23px auto 17px;
    position: relative;
    width: 25px;
}
#topnav .navbar-toggle span {
    background-color: #fff;
    display: block;
    height: 2px;
    margin-bottom: 5px;
    transition: transform 0.5s ease 0s;
    width: 100%;
}
#topnav .navbar-toggle.open span {
    position: absolute;
}
#topnav .navbar-toggle.open span:first-child {
    top: 6px;
    transform: rotate(45deg);
}
#topnav .navbar-toggle.open span:nth-child(2) {
    visibility: hidden;
}
#topnav .navbar-toggle.open span:last-child {
    top: 6px;
    transform: rotate(-45deg);
    width: 100%;
}
#topnav .navigation-menu {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
/*#topnav .navigation-menu > li {
    display: block;
    float: left;
    position: relative;
}*/

#topnav .navigation-menu > li {
    display: inline-block;
    position: relative;
}

#topnav .navigation-menu > li > a {
    color: #546e7a;
    display: block;
    font-weight: 300;
    line-height: 20px;
    padding-left: 20px;
    padding-right: 20px;
    transition: all 0.3s ease 0s;
}
#topnav .navigation-menu > li > a:hover {
    color: #03a9f4;
}
#topnav .navigation-menu > li > a:hover i {
    color: #03a9f4;
}
#topnav .navigation-menu > li > a:focus {
    color: #5fbeaa;
}
#topnav .navigation-menu > li > a:focus i {
    color: #5fbeaa;
}
#topnav .navigation-menu > li > a:active {
    color: #5fbeaa;
}
#topnav .navigation-menu > li > a:active i {
    color: #5fbeaa;
}
#topnav .navigation-menu > li > a i {
    color: #546e7a;
    display: block;
    font-size: 22px;
    margin-bottom: 5px;
    text-align: center;
}
#topnav .navigation-menu > li > a:hover, #topnav .navigation-menu > li > a:focus {
    background-color: transparent;
}

@media (min-width: 0px) {
#topnav .navigation-menu > li > a {
    padding-bottom: 22px;
    padding-top: 22px;
}
}

@media (min-width: 0px) {
#topnav .navigation-menu > li.last-elements .submenu {
    left: auto;
    right: 0;
}
#topnav .navigation-menu > li.last-elements .submenu > li.has-submenu .submenu {
    left: auto;
    margin-left: 0;
    margin-right: 10px;
    right: 100%;
}
/*#topnav .navigation-menu > li:first-of-type a {
    padding-left: 0;
}*/
#topnav .navigation-menu > li:hover a {
    color: #03a9f4;
}
#topnav .navigation-menu > li:hover a i {
    /*color: #5fbeaa;*/
}
#topnav .navigation-menu > li .submenu {
    background-color: #ffffff;
    border: 1px solid #e7e7e7;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    left: -115px;
    list-style: outside none none;
    min-width: 200px;
    opacity: 0;
    padding: 15px 0;
    position: absolute;
    top: 100%;
    transition: all 0.2s ease 0s;
    visibility: hidden;
    z-index: 1000;
}
#topnav .navigation-menu > li .submenu.megamenu {
    white-space: nowrap;
    width: auto;
}
#topnav .navigation-menu > li .submenu.megamenu > li {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    width: 200px;
}
#topnav .navigation-menu > li .submenu > li.has-submenu > a::after {
    content: "?";
    font-family: "themify";
    font-size: 9px;
    position: absolute;
    right: 20px;
}
#topnav .navigation-menu > li .submenu > li .submenu {
    left: 100%;
    margin-left: 10px;
    margin-top: -1px;
    top: 0;
}
#topnav .navigation-menu > li .submenu li {
    position: relative;
}
#topnav .navigation-menu > li .submenu li ul {
    list-style: outside none none;
    margin: 0;
    padding-left: 0;
}
#topnav .navigation-menu > li .submenu li a {
    clear: both;
    color: #546e7a;
    display: block;
    font-weight: 300;
    padding: 8px 25px;
    white-space: nowrap;
}
#topnav .navigation-menu > li .submenu li a:hover {
    color: #03a9f4;
}
#topnav .navigation-menu > li .submenu li span {
    clear: both;
    color: #949ba1;
    display: block;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 1.42857;
    padding: 8px 25px;
    text-transform: uppercase;
    white-space: nowrap;
}
#topnav .navbar-toggle {
    display: none;
}
/*#topnav #navigation {
    display: block !important;
}*/
}

@media (min-width: 0px) {

#topnav .navigation-menu > li.has-submenu:hover > .submenu {
    margin-top: 0;
    opacity: 1;
    visibility: visible;
}
#topnav .navigation-menu > li.has-submenu:hover > .submenu > li.has-submenu:hover > .submenu {
    margin-left: 0;
    margin-right: 0;
    opacity: 1;
    visibility: visible;
}

.navbar-toggle {
    display: block;
}
}

 /*Current Page Selected*/
/*#topnav .navigation-menu > li.active a {
    color:#1c76cc;
    font-weight:600;
}*/

/*#topnav .navigation-menu > li.active a .fa{
    color:#1c76cc;
}*/



/*******New Menu*******/
/*Migrate BS4 to Menu */
/**********************/

.bs4_menu_migrate {

}

/*
.bs4_menu_migrate .dropdown-menu.show {
    display: block;
}

.bs4_menu_migrate .collapse:not(.show) {
    display: none;
}
*/

/*dropdown on hover*/
/*
.bs4_menu_migrate .ascora-main-nav .dropdown:hover > .dropdown-menu {
    display: block !important;
}
*/

.bs4_menu_migrate .nav-link {
    display: block;
    padding: .5rem 1rem;
}

.bs4_menu_migrate .navbar-nav {
    list-style: none;
}

.bs4_menu_migrate .flex-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
}

.bs4_menu_migrate .ml-auto, .bs4_menu_migrate .mx-auto {
    margin-left: auto !important;
}

.bs4_menu_migrate .mr-auto, .bs4_menu_migrate .mx-auto {
    margin-right: auto !important;
}


.bs4_menu_migrate .navbar {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.bs4_menu_migrate .navbar {
    position: relative !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
}

/* Adds carot but since it's being added manually to the menu it's removed*/
/*
.bs4_menu_migrate .dropdown-toggle::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}
*/

.bs4_menu_migrate .dropdown-toggle {
    white-space: nowrap;
}

.bs4_menu_migrate .navbar-collapse {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-align: center;
    align-items: center;
}

@media (min-width: 768px) {

    .bs4_menu_migrate .navbar {
        position: relative !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
        -ms-flex-align: center !important;
        align-items: center !important;
        -ms-flex-pack: justify !important;
        justify-content: space-between !important;
    }

    .bs4_menu_migrate .navbar-expand-md .navbar-nav {
        -ms-flex-direction: row;
        flex-direction: row;
    }

    .bs4_menu_migrate .navbar-expand-md {
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

    .bs4_menu_migrate .navbar-expand-md .navbar-collapse {
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
}

/* new */

/*.bs4_menu_migrate .d-none {
    display: none !important;
}

.bs4_menu_migrate .flex-column {
    flex-direction: column !important;
}

@media (min-width: 768px) {
    .bs4_menu_migrate .d-md-block {
        display: block !important;
    }
}

@media (min-width: 992px){
    .bs4_menu_migrate .flex-lg-row {
        flex-direction: row !important;
    }

    .bs4_menu_migrate .ml-lg-auto, .bs4_menu_migrate .mx-lg-auto {
        margin-left: auto !important;
    }
}

@media (min-width: 1400px) {
    .bs4_menu_migrate .d-xl-block {
        display: block !important;
    }
}*/



/********************/
/* new menu 2/05/22 */
/********************/
/*hide tour as its currently broken*/
/*.btn_tour {display:none}*/
.introjs-helperLayer-transparent {
    background: transparent !important;
}

.btn_topbar {
    background-color: #0d56a5;
    color: #ffffff;
}

.ascora-main-nav .sub-menu-categories .subtitle {
    background-color: #eaeaea;
    padding: 5px;
    font-size: 14px;
}

.ascora-main-nav .dropdown-menu > li > a {
    clear: both;
    color: #546e7a;
    display: block;
    font-weight: 300;
    padding: 8px 25px;
    white-space: nowrap;
}

.ascora-main-nav .dropdown-menu {
    top:98%;
}

.ascora-main-nav .dropdown-menu > li > a:hover {
    color: #1c76cc;
}

.ascora-main-nav .navbar-nav > li.active > a i,
.ascora-main-nav .navbar-nav > li.active > a span {
    color: #1c76cc;
}

.ascora-main-nav .dropdown-menu > .active > a,
.ascora-main-nav .dropdown-menu > .active > a:hover,
.ascora-main-nav .dropdown-menu > .active > a:focus {
    color: #1c76cc;
    background-color:transparent;
}

.ascora-main-nav .dropdown-menu > li > a i {
    margin-right: 5px;
}

.ascora-main-nav .dropdown-menu {
    padding:15px 0;
}

.ascora-main-nav {
    background-color: #ffffff !important;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
}

.ascora-main-nav {
    font-size: 14px;
    background-color: #ffffff;
    padding: 0px;
    margin: 0px;
}

/* min-width rather than width: the items are white-space: nowrap, so a fixed
   200px box let a long entry such as "Billable vs Non-Billable Hours" render
   outside the white panel instead of widening it. */
.ascora-main-nav .dropdown-menu {
    min-width: 200px;
}

.ascora-main-nav .dropdown-item {
    color: #546e7a;
    font-size: 14px;
    padding: 6px 20px;
}

.ascora-main-nav .dropdown-item:hover {
    color: #03a9f4;
}

.ascora-main-nav .dropdown-item i {
    padding: 5px;
}

.ascora-main-nav {
    font-size: 14px;
    background-color: #ffffff;
    padding: 0px!important;
    margin: 0px!important;
}

    .ascora-main-nav .navbar-nav .nav-link {
        color: #546e7a !important;
        padding: 11px 8px;
    }

.ascora-main-nav .navbar-nav .nav-link:hover {
    color: #03a9f4 !important;
}

.ascora-main-nav .nav-item .nav-link i {
    font-size: 22px;
    display: block;
    text-align: center;
    margin-bottom: 5px;
}

    .ascora-main-nav .navbar-nav {
        padding: 11px 7px;
    }

.ascora-main-nav .sub-menu-categories {
    width: 750px;
    left: -620px;
    padding: 15px 0px;
}

.ascora-main-nav .sub-menu-categories.show {
    z-index: 1000000 !important;
}

.ascora-main-nav .sub-menu-categories li a {
    text-decoration: none !important;
    clear: both;
    color: #546e7a;
    display: block;
    font-weight: 300;
    padding: 10px 12px;
    white-space: nowrap;
    font-size: 14px;
}

.ascora-main-nav .sub-menu-categories li a:hover {
    color: #03a9f4;
    text-decoration: none !important;
}

.ascora-main-nav .card .card-header {
    padding: 0px;
    font-size: 14px;
    border-top: 3px solid #3c8dbc;
    text-decoration: none !important;
}

.ascora-main-nav .card .card-header h1 a,
.ascora-main-nav .sub-menu-categories .card.card-automation .card-header h1 a {
    padding: 6px;
    font-size: 14px;
    color: #546e7a;
    display: block;
    text-decoration: none !important;
    font-weight: 300;
}

.ascora-main-nav .card .card-body {
    padding: 10px;
}

.ascora-main-nav .card .card-subtitle {
    padding: 5px;
    margin: 10px;
    background-color: #eaeaea;
    color: #546e7a;
    font-size: 14px;
}

.ascora-main-nav .sub-menu-categories .card{
    overflow:hidden;
    border: 1px solid rgba(0, 0, 0, 0.125);
}

.ascora-main-nav .sub-menu-categories .card .card-header{
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.ascora-main-nav .sub-menu-categories .card ul {
    list-style: none;
    padding: 0px;
}

.ascora-main-nav .sub-menu-categories .card a {
    padding: 6px 16px;
    font-size: 14px;
}

.ascora-main-nav .sub-menu-categories .card i {
    font-size: 15px;
    padding-right: 25px;
}

.ascora-main-nav .sub-menu-categories .card.card-automation .card-body a {
    font-size: 11px;
    padding: 6px 18px;
}

.ascora-main-nav .sub-menu-categories .card.card-automation i {
    font-size: 15px;
}

.ascora-main-nav .card-automation li a {
    font-size: 12px;
}

.ascora-main-nav .dropdown-menu {
    z-index: 10000;
}

.ascora-main-nav .sub-menu-categories.dropdown-position-left {
    left: 0;
}

@media (max-width: 767px) {
    .ascora-main-nav .sub-menu-categories,
    .ascora-main-nav .dropdown-menu {
        width: 100%;
    }

    .ascora-main-nav .nav-item .nav-link i {
        font-size: 22px;
        display: inline-block;
        text-align: center;
        margin-bottom: 5px;
    }

    .ascora-main-nav .nav-item .nav-link {
        display: flex;
    }

    .ascora-main-nav .nav-item .nav-link i {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }

    .dropdown-toggle::after {
        margin: 10px;
    }

    .ascora-main-nav .nav-item .nav-link span {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 70%;
        flex: 0 0 70%;
        max-width: 70%;
    }

    .ascora-main-nav .navbar-nav .nav-link {
        color: #546e7a !important;
        padding: 8px;
    }

    .ascora-main-nav .navbar-nav .dropdown-menu {
        position: static;
        float: none;
    }

    .ascora-main-nav .sub-menu-categories, 
    .ascora-main-nav .dropdown-menu {
        width: 100%;
    }

    .ascora-main-nav .dropdown-menu li a{
        padding:6px 16px;
    }

    .ascora-main-nav .sub-menu-categories .card.card-automation .card-body a {
        font-size: 14px;
        padding: 6px 16px;
    }

    .hide-mobile {
        display: none!important;
    }
}

@media (min-width: 768px) {
    .collapse.dont-collapse-sm,
    .collapsing.dont-collapse-sm {
        display: block !important;
        height: auto !important;
    }

    /*dropdown on hover*/
    .ascora-main-nav .dropdown:hover > .dropdown-menu {
        display: block !important;
    }

    .hide-desktop {
        display: none!important;
    }


    /* for the tour to work the display must not be none, instead visibility is used to hide and show on desktop*/
    .ascora-main-nav .sub-menu-categories,
    .ascora-main-nav .sub-menu-categories li a {
        display: block;
        visibility: hidden;
    }

    .ascora-main-nav .sub-menu-categories.show,
    .ascora-main-nav .sub-menu-categories.show li a {
        visibility: visible;
    }

 /*   .ascora-main-nav .has-categories:hover .sub-menu-categories, 
    .ascora-main-nav .has-categories:hover .sub-menu-categories li a
    {
        visibility: visible;
    }*/


    .ascora-main-nav .dropdown:hover > .sub-menu-categories,
    .ascora-main-nav .dropdown:hover > .sub-menu-categories li a {
        visibility: visible;
    }
}

@media (max-width: 768px) {

    .ascora-main-nav {
        font-size: 14px;
        background-color: #ffffff;
        padding: 0px;
        margin: 0px;
    }

    .ascora-main-nav ul.navbar-nav {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
    }

    .navbar-collapse {
        padding:0px;
    }

    .ascora-main-nav .navbar-nav .open .dropdown-menu > li > a {
        padding: 12px 16px;
    }

    .ascora-main-nav .navbar-nav .open .dropdown-menu {
        border: 1px solid rgba(0,0,0,.15);
        border-radius: .25rem;
    }

    /*reduce padding on smaller screen to reduce wrapping*/
    .ascora-main-nav .navbar-nav .nav-link {
        color: #546e7a !important;
        padding: 22px 10px;
    }
}


/*reduce padding on smaller screen to reduce wrapping*/
@media (max-width: 1600px) {.ascora-main-nav .navbar-nav .nav-link {padding: 22px 10px;}}
@media (max-width: 1400px) {.ascora-main-nav .navbar-nav .nav-link {padding: 22px 8px;font-size:12px;}}



.edge {

}




/* ===============================================
   ASCORA LEFT NAV – WHITE THEME FINAL VERSION
   =============================================== */

/* ===============================================
   MAIN WRAPPER
   =============================================== */

/*#asora-nav-collapse{
    overflow-y: auto !important;
    overflow-x: hidden !important;
}*/

.ascora-leftnav-wrapper {
    width: 220px !important;
    background: #ffffff !important;
    min-height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    padding-top: 70px !important;
    overflow-y: auto !important;
    overflow-x: visible;        /* so the button can hang outside */
    z-index: 1000;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    color: #2A363C;
    box-sizing: border-box;
/*    transition: width 0.12s ease !important;*/


    /* Firefox scrollbar */
    scrollbar-width: none;
}

/* Transitions are enabled only after the first paint (the collapse script
   adds ascora-nav-ready) so the state restored from localStorage never
   animates on page load. The rail, page content and footer share one
   duration so they glide in lockstep for both the collapse button and
   the hover peek. */
body.ascora-nav-ready .ascora-leftnav-wrapper {
    transition: width 0.18s ease !important;
}

body.ascora-nav-ready.ascora-leftnav-mode .content-wrapper {
    transition: margin-left 0.18s ease !important;
}

body.ascora-nav-ready.ascora-leftnav-mode .main-footer {
    transition: margin-left 0.18s ease !important;
}

/* Keep labels on one line so they never re-wrap mid animation */
.ascora-leftnav-main {
    white-space: nowrap;
}

/* Chrome, Edge, Safari */
.ascora-leftnav::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

/*html, body {
    height: 100%;
    overflow: hidden;
}

.content-wrapper {
    margin-left: 220px;*/        /* same as sidebar width */
    /*height: 100vh;
    overflow-y: auto;
}*/

/*.ascora-leftnav-wrapper {
    border: 3px solid red;
}*/

/* collapsed width */
.ascora-leftnav-wrapper.ascora-leftnav-collapsed {
    width: 60px !important;
}

/* WebKit scrollbar */
.ascora-leftnav-wrapper::-webkit-scrollbar {
    width: 2px !important;          /* thinner scrollbar */
}
.ascora-leftnav-wrapper::-webkit-scrollbar-track {
    background: transparent !important;
}
.ascora-leftnav-wrapper::-webkit-scrollbar-thumb {
    background: #c7cdd3 !important; /* light grey */
    border-radius: 10px !important;
}
.ascora-leftnav-wrapper::-webkit-scrollbar-thumb:hover {
    background: #aeb5bb !important; /* darker on hover */
}



/* ===============================================
   NAV INNER CONTAINER + LISTS
   =============================================== */

.ascora-leftnav,
.ascora-leftnav.navbar,
.ascora-leftnav-inner,
.ascora-leftnav-menu,
.ascora-leftnav-menu-secondary {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}

.ascora-leftnav {
/*    height: 100%;*/
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;      /* VERY IMPORTANT */
    overflow-y: auto;
    overflow-x: hidden;
/*    padding-bottom: 40px;*/
}

/* Footer should not block mouse events */
.ascora-leftnav-footer {
    pointer-events: none;
}

/* But the collapse button inside it should still be clickable */
.ascora-leftnav-footer #ascora-collapse-btn,
.ascora-leftnav-footer .collapse-square {
    pointer-events: auto;
}

/* Make the menu layer above the footer */
.ascora-leftnav-menu {
    position: relative;
    z-index: 2;
}

/* Footer stays below menu items */
.ascora-leftnav-footer {
    position: relative;
    z-index: 1;
}

.ascora-leftnav-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ascora-leftnav-inner {
    width: 100%;
}

.ascora-leftnav-menu,
.ascora-leftnav-menu-secondary {
    list-style: none;
}

.ascora-leftnav-menu-secondary {
    /* auto (not a fixed gap) pins the Onboarding group to the bottom of the
       rail, separated from the main menu; it still flows under the last item
       when the menu is long enough to scroll. */
    margin-top: auto !important;
    padding-top: 10px !important;
    border-top: 1px solid #e6e6e6;
}

/* items */
.ascora-leftnav-item {
    width: 100% !important;
    display: block;
    margin: 0 !important;
    box-sizing: border-box;
}


/* ===============================================
   MAIN LINK STYLE
   =============================================== */

.ascora-leftnav-link {
    display: flex !important;
    align-items: center;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 12px 18px !important;
    font-size: 14px;
    text-decoration: none;
    color: #2A363C !important;
    background: transparent;
    transition: background .15s ease, color .15s ease;
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 0 !important;
}

/* left group: icon + label */
.ascora-leftnav-main {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.ascora-leftnav-main > i {
    font-size: 17px;
    color: #536D79 !important;
    width: 20px !important;       /* makes icons align perfectly */
    text-align: center !important;
    /* slight overshoot so the icon springs rather than slides */
    transition: transform .18s cubic-bezier(0.34, 1.56, 0.64, 1), color .15s ease;
    transform-origin: center;
}

/* right arrow */
.ascora-leftnav-arrow {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
}

.ascora-leftnav-arrow i {
    font-size: 12px;
    color: #536D79 !important;
    transition: transform .2s ease, color .15s ease;
}

/* Hover highlight */
.ascora-leftnav-link:hover {
    background: #F2F5F7 !important;
    color: #016DD6 !important;
}

/* Positioning context */
.ascora-leftnav-item {
    position: relative;
}

/* Hover card */
.ascora-hover-card {
    position: absolute;
    top: 0;                 /* adjust this */
    left: calc(100% + 12px);

    width: 260px;
    padding: 16px;

    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;

    z-index: 9999;
}

/* Show on hover */
.ascora-leftnav-item:hover > .ascora-hover-card {
    opacity: 1;
    visibility: visible;
}

/* Allow flyout outside nav */
.ascora-leftnav-wrapper {
    overflow: visible !important;
}

.ascora-leftnav-link:hover .ascora-leftnav-main i,
.ascora-leftnav-link:hover .ascora-leftnav-arrow i {
    color: #016DD6 !important;
}

/* Icon micro-interactions: a gentle pop on hover, a squash on press,
   and the chevron leaning toward its flyout. */
.ascora-leftnav-link:hover .ascora-leftnav-main > i {
    transform: scale(1.18);
}

.ascora-leftnav-link:active .ascora-leftnav-main > i {
    transform: scale(0.92);
    transition-duration: .08s;
}

.ascora-leftnav-item:hover > .ascora-leftnav-link .ascora-leftnav-arrow i {
    transform: translateX(3px);
}

/* Same pop for the flyout submenu icons, slightly smaller */
.ascora-leftnav-submenu > li > a i {
    display: inline-block;
    transition: transform .18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ascora-leftnav-submenu > li > a:hover i {
    transform: scale(1.15);
}

@media (prefers-reduced-motion: reduce) {
    .ascora-leftnav-main > i,
    .ascora-leftnav-arrow i,
    .ascora-leftnav-submenu > li > a i {
        transition: none;
    }

    .ascora-leftnav-link:hover .ascora-leftnav-main > i,
    .ascora-leftnav-link:active .ascora-leftnav-main > i,
    .ascora-leftnav-item:hover > .ascora-leftnav-link .ascora-leftnav-arrow i,
    .ascora-leftnav-submenu > li > a:hover i {
        transform: none;
    }
}

.ascora-leftnav-item {
    position: relative;
}

/* Turn submenu into flyout panel */
.ascora-leftnav-submenu {
    position: fixed;
    top: 0;
    left: calc(100% + 12px);
    min-width: 200px;
    padding: 12px;
    padding-left: 4px;
    padding-right: 4px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;

    z-index: 9999;
}

/* Hide single flyouts always by default */
.ascora-single-flyout {
    display: none !important;
}

/* Show ONLY when collapsed */
body.ascora-leftnav-collapsed 
.ascora-leftnav-item:hover 
> .ascora-single-flyout {
    display: block !important;
}

.ascora-single-flyout {
    min-width: auto;
    padding-right: 26px;
}

.ascora-single-flyout ul,
.ascora-single-flyout li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ascora-flyout-title {
    margin: 0;
    padding: 4px 6px;
    line-height: 1.3;
}

/* Fix gap when hovered flyout sub-menu */
.ascora-leftnav-submenu::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 0;
    width: 12px;
    height: 100%;
}

.ascora-flyout-bridge {
    position: absolute;
    left: -20px;
    top: 0;

    width: 20px;
    height: 100%;

    background: transparent;
}

/* Hide title by default */
.ascora-flyout-title {
    display: none;
    font-weight: 600;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    text-transform: uppercase;
/*    margin-bottom: 6px;*/
}

/* Show only when collapsed */
body.ascora-leftnav-collapsed .ascora-flyout-title {
    display: block;
}

/* Show on hover */
.ascora-leftnav-item:hover > .ascora-leftnav-submenu {
    opacity: 1;
    visibility: visible;
}

.ascora-leftnav-item:hover > .ascora-leftnav-submenu,
.ascora-leftnav-submenu:hover {
    opacity: 1;
    visibility: visible;
}

/* Hover gap fix */
.ascora-leftnav-item::after {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 12px;   /* gap width */
    height: 100%;
}

/* active */
.ascora-leftnav-item.active > .ascora-leftnav-link {
    background: #E8EEF0 !important;
    color: #016DD6 !important;
    font-weight: 600;
}

.ascora-leftnav-item.active > .ascora-leftnav-link .ascora-leftnav-main i,
.ascora-leftnav-item.active > .ascora-leftnav-link .ascora-leftnav-arrow i {
    color: #016DD6 !important;
}

/* open state – rotate arrow */
/*.ascora-leftnav-item.is-open .ascora-leftnav-arrow i {
    transform: rotate(180deg);
    color: #016DD6 !important;
}*/


/* ===============================================
   GENERIC SUBMENU
   =============================================== */

.ascora-leftnav-submenu {
    list-style: none;
    margin: 0 !important;
    padding-left: 24px !important;
    display: block;
/*    width: 100% !important;*/
    box-sizing: border-box;
}

/* simple li > a */
.ascora-leftnav-submenu > li > a {
    display: block;
    padding: 7px 0;
    font-size: 13px;
    color: #536D79 !important;
    text-decoration: none;
    width: 100% !important;
    transition: color .15s ease;
    gap: 10px !important;
}

/* submenu icons aligned */
.ascora-leftnav-submenu li a i {
    width: 20px !important;
    text-align: center !important;
    font-size: 15px !important;
    color: inherit !important;
}

.ascora-leftnav-submenu > li > a:hover {
    color: #016DD6 !important;
}

.ascora-leftnav-submenu > li.active > a {
    color: #016DD6 !important;
    font-weight: 600;
}

/* Hide right arrow when hovering a menu item */
.ascora-leftnav-item:hover .ascora-leftnav-arrow {
    opacity: 0;
}

/* Triangle */
.ascora-leftnav-submenu::before {
    content: "";
    position: absolute;
    left: -8px;
    top: var(--triangle-y, 24px);
    transform: translateY(-50%);

    width: 0;
    height: 0;

    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #fff;
    z-index: 0;
}

/* Mega menu width */
.ascora-leftnav-submenu.sub-menu-categories{
    min-width:30000px;
    padding:20px;
}

/* disable bootstrap layout inside submenu */
.ascora-leftnav-submenu .container-fluid{
    display:flex;
    gap:40px;
}

/* columns */
.ascora-leftnav-submenu .col-md-6,
.ascora-leftnav-submenu .col-md-4{
    flex:1;
    max-width:none;
}

/* Make the row a 3-column layout */
.ascora-leftnav-submenu.sub-menu-categories .row{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

/* Remove bootstrap column width limits */
.ascora-leftnav-submenu.sub-menu-categories .col-md-4,
.ascora-leftnav-submenu.sub-menu-categories .col-md-6{
    max-width:none;
    width:auto;
}

.ascora-leftnav-submenu .card{
    border:none;
    box-shadow:none;
}

.ascora-leftnav-submenu .card-header{
    font-weight:600;
    font-size:13px;
    padding:0;
    margin-bottom:6px;
    background:none;
    border:none;
}

/* ===============================================
   ADMINISTRATION MEGA-MENU
   =============================================== */

/*.ascora-leftnav-submenu.sub-menu-categories {
    padding-bottom:46px !important;
}*/

.ascora-leftnav-submenu.sub-menu-categories .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.ascora-leftnav-submenu.sub-menu-categories .row {
    display: block !important;
    margin: 0 !important;
}

.ascora-leftnav-submenu.sub-menu-categories .col-md-4 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin-bottom: 0px !important;
}

/* cards */
.ascora-leftnav-submenu.sub-menu-categories .card {
    border: none !important;
    box-shadow: none !important;
    margin-bottom: -4px !important;
}

.ascora-leftnav-submenu.sub-menu-categories .card-header {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* section headers */
.ascora-leftnav-submenu.sub-menu-categories .card-header a {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #2A363C !important;
    padding: 6px 0 !important;
    text-decoration: none !important;
}

/* card body */
.ascora-leftnav-submenu.sub-menu-categories .card-body {
    padding: 0 !important;
}

.ascora-leftnav-submenu.sub-menu-categories .card-body ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* admin submenu links */
.ascora-leftnav-submenu.sub-menu-categories .card-body li a {
    display: flex !important;
    align-items: center !important;
    padding: 6px 0 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    color: #536D79 !important;
    text-decoration: none !important;
    width: 100% !important;
    transition: color .15s ease !important;
}

/* admin submenu icons */
.ascora-leftnav-submenu.sub-menu-categories .card-body li a i {
    margin-right: 10px !important;
    font-size: 15px !important;
    width: 16px !important;
    text-align: center !important;
    color: inherit !important;
}

/* hover */
.ascora-leftnav-submenu.sub-menu-categories .card-body li a:hover {
    color: #016DD6 !important;
}
.ascora-leftnav-submenu.sub-menu-categories .card-body li a:hover i {
    color: #016DD6 !important;
}

/* active */
.ascora-leftnav-submenu.sub-menu-categories .card-body li.active > a {
    font-weight: 600 !important;
    color: #016DD6 !important;
}
.ascora-leftnav-submenu.sub-menu-categories .card-body li.active > a i {
    color: #016DD6 !important;
}

.ascora-leftnav-submenu.sub-menu-categories .subtitle {
    padding: 6px 0;
    font-weight: 600;
    font-size: 12px;
    font-style: italic;
}
/* Hide admin subtitles during search */
body.search-active .ascora-leftnav-submenu.sub-menu-categories .subtitle {
    display: none !important;
}


/* ===============================================
   LEFT NAV SEARCH
   =============================================== */

.ascora-leftnav-search {
    position: relative;
    width: 95%;
    padding: 0 18px 12px 18px;
    box-sizing: border-box;
}

/* full search input (expanded mode) */
.ascora-leftnav-search input {
    width: 100%;
    height: 34px;
    padding: 6px 32px 6px 28px;
    border: 1px solid #ededed !important;
    border-radius: 6px;
    font-size: 13px;
    color: #2A363C;
    outline: none;
    transition: border-color .2s ease, background .2s ease;
}

.ascora-leftnav-search input:focus {
    border-color: #016DD6;
    background: #ffffff;
}

/* magnifying glass icon (inside input) */
.ascora-leftnav-search i {
    position: absolute;
    left: 26px;
    top: 45%;
    transform: translateY(-60%);
    font-size: 14px;
    color: #536D79;
    pointer-events: none;
}

/* collapsed search icon container (hidden by default) */
.ascora-search-expanded { /* marker class – styling via input above */ }

.ascora-search-collapsed-icon {
    display: none;
    margin-top: 6px !important;
    padding: 10px 0;
    cursor: pointer;
    justify-content: center;
}

.ascora-search-collapsed-icon i {
    font-size: 18px;
    color: #536D79;
    margin-left: -5px;
}

/* divider */
.ascora-nav-divider {
    height: 1px;
    background: #F0F0F0;
    margin: 6px 16px;
}
body.search-active .ascora-nav-divider {
    display: none !important;
}




/* ===============================================
   COLLAPSE BUTTON
   =============================================== */

/* Rail wrapper layout. MUST stay scoped to left-nav mode: in top-nav
   mode the same id is the horizontal nav's collapse container, and an
   unscoped 100vh + overflow:hidden turns it into a dark band that
   clips every dropdown (including the Administration mega menu). */
body.ascora-leftnav-mode #ascora-nav-collapse {
    display: flex;
    flex-direction: column;
    height: 100vh;      /* full viewport height */
    overflow: hidden;   /* important */
}

/* COLLAPSE TOOLTIP */
.collapse-tooltip {
    position: absolute;
    left: calc(100% + 26px);
    top: 50%;
    transform: translateY(-50%);

    background: #ffffff;
    color: #536D79 !important;
    font-size: 13px;
    font-weight: 500;

    padding: 12px 26px;
    border-radius: 10px;
    white-space: nowrap;

    box-shadow: 0 15px 40px rgba(0,0,0,0.15);

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;

    z-index: 9999;
}

/* Default = expanded */
.collapse-tooltip::after {
    content: "Collapse navigation";
}

/* Collapsed */
body.ascora-leftnav-collapsed .collapse-tooltip::after {
    content: "Expand navigation";
}

/* Show on hover */
#ascora-collapse-btn:hover .collapse-tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.ascora-leftnav-footer {
    flex-shrink: 0;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 14px;
/*    border-top: 1px solid #e5e7eb;*/
    background: transparent;
}

.collapse-square {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.collapse-square:hover {
    background: var(--title-bar-background-colour-1);
    color: white;
}

/* The chevron flips smoothly in both directions */
.collapse-square i {
    transition: transform 0.25s ease;
}

body.ascora-leftnav-collapsed .collapse-square i {
    transform: rotate(180deg);
}

/* The footer keeps flex-end in every state: the square rides the rail's
   right edge as the width animates, instead of jumping between a centred
   and a right-aligned layout. In the 60px collapsed rail flex-end with
   the 14px padding leaves the square visually centred anyway. */

/* Bridge the gap between collapsed sidebar and flyout */
body.ascora-leftnav-collapsed .ascora-leftnav-item::after {
    content: "";
    position: absolute;
    top: -10px;
    left: 100%;
    width: 20px;     /* gap width */
    height: calc(100% + 20px);
    background: transparent;
}


/* SCROLL INDICATOR */

.sidebar-scroll-indicator {
    position: absolute;
    bottom: 60px; /* above footer */
    left: 0;
    right: 0;
    height: 50px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 5;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.95));
}

.sidebar-scroll-indicator i {
    margin-bottom: 10px;
    font-size: 14px;
    color: #6b7280;
}

.sidebar-scroll-indicator * {
    pointer-events: auto;
}


/* ===============================================
   COLLAPSED SEARCH & ICON-ONLY NAV
   (body.ascora-leftnav-collapsed)
   =============================================== */

/* collapsed: hide labels, arrows, full search */
body.ascora-leftnav-collapsed .ascora-leftnav-main span,
body.ascora-leftnav-collapsed .ascora-leftnav-arrow,
body.ascora-leftnav-collapsed .ascora-search-expanded {
    display: none !important;
}

/* show only the small search icon when collapsed */
body.ascora-leftnav-collapsed .ascora-search-collapsed-icon {
    display: flex !important;
}

/* center icons in collapsed mode */
body.ascora-leftnav-collapsed .ascora-leftnav-main {
    justify-content: center;
    width: 100%;
}


/* ===============================================
   CONTENT SHIFT (uses .content-wrapper)
   The rail has exactly two states, expanded and collapsed, toggled by
   the collapse button. Collapsed navigation uses the hover flyouts.
   =============================================== */

/* default: sidebar 220px (only when the left nav mode is active) */
body.ascora-leftnav-mode .content-wrapper {
    margin-left: 220px !important;
    transition: none !important;
}

/* Keep the top header pinned so it stays in view while the page scrolls,
   instead of scrolling away and leaving the fixed rail (and, on settings pages,
   the fixed .admin-sidebar top:60px) without a header. Two scopes:
     - .ascora-sticky-header = standard content pages (set in _LayoutShared);
     - .ascora-admin-page    = Administration pages in EITHER master layout,
       including the Bootstrap4 ones (Supplier Integrations / Ascora Intelligence)
       that do not carry the sticky-header class.
   Full-screen views (Scheduler/Map/Whiteboard) render from _LayoutBootstrap4Shared,
   get neither class, and keep their own full-height layout; top-nav mode keeps
   AdminLTE's default position:relative header. */
body.ascora-leftnav-mode.ascora-sticky-header .main-header,
body.ascora-leftnav-mode.ascora-admin-page .main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;   /* above the rail (1000) and the settings sidebar (100) */
}
body.ascora-leftnav-mode.ascora-sticky-header .content-wrapper,
body.ascora-leftnav-mode.ascora-admin-page .content-wrapper {
    padding-top: 60px !important;   /* clear the now-fixed 60px header */
}

/* section itself has no extra left margin */
body.ascora-leftnav-mode .content.container-fluid {
    margin-left: 0 !important;
}

/* collapsed: sidebar 60px → content closer to left */
body.ascora-leftnav-mode.ascora-leftnav-collapsed .content-wrapper {
    margin-left: 60px !important;
}




/* Administration - full-width settings panel beside the rail */
#dropdown-menu.ascora-leftnav-submenu.sub-menu-categories {
    width: calc(100vw - 240px) !important;
    min-width: calc(100vw - 240px) !important;
    left: 220px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    padding: 20px !important;
}

#dropdown-menu.ascora-leftnav-submenu.sub-menu-categories > li {
    display: block !important;
    width: 100% !important;
}

#dropdown-menu.ascora-leftnav-submenu.sub-menu-categories .container-fluid {
    display: block !important;
    padding: 0 !important;
    width: 100% !important;
}

#dropdown-menu.ascora-leftnav-submenu.sub-menu-categories .row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 30px !important;
    margin: 0 !important;
    width: 100% !important;
}

#dropdown-menu.ascora-leftnav-submenu.sub-menu-categories .col-md-4 {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* -----------------------------------------------
   FOOTER MARGIN
----------------------------------------------- */
body.ascora-leftnav-mode .main-footer                                        { margin-left: 220px !important; transition: none; }
body.ascora-leftnav-mode.ascora-leftnav-collapsed .main-footer          { margin-left: 60px !important; }