@import "./variable.css";
@import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap');

/* .row>* {
    padding-left: 0;
    padding-right: 0;
} */

zc-com-render {
    padding: 0 !important;
}

.ml-0 {
    margin-left: 0 !important
}

.ml-1 {
    margin-left: .25rem !important
}

.ml-2 {
    margin-left: .5rem !important
}

.ml-3 {
    margin-left: 1rem !important
}

.ml-4 {
    margin-left: 1.5rem !important
}

.ml-5 {
    margin-left: 3rem !important
}

.ml-auto {
    margin-left: auto !important
}

.mr-0 {
    margin-right: 0 !important
}

.mr-1 {
    margin-right: .25rem !important
}

.mr-2 {
    margin-right: .5rem !important
}

.mr-3 {
    margin-right: 1rem !important
}

.mr-4 {
    margin-right: 1.5rem !important
}

.mr-5 {
    margin-right: 3rem !important
}

.mr-auto {
    margin-right: auto !important
}


/* .pe-0 {
    padding-right: 0 !important
}

.pe-1 {
    padding-right: .25rem !important
}

.pe-2 {
    padding-right: .5rem !important
}

.pe-3 {
    padding-right: 1rem !important
}

.pe-4 {
    padding-right: 1.5rem !important
}

.pe-5 {
    padding-right: 3rem !important
}

.ps-0 {
    padding-left: 0 !important
}

.ps-1 {
    padding-left: .25rem !important
}

.ps-2 {
    padding-left: .5rem !important
}

.ps-3 {
    padding-left: 1rem !important
}

.ps-4 {
    padding-left: 1.5rem !important
}

.ps-5 {
    padding-left: 3rem !important
} */

ul {
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
}


/********** login page styles strat here ************/

.zc-login {
    background-color: var(--login-bg);
    min-height: var(--login-minheight);
}

.zc-login .zc-login-left {
    /* background-image: var(--login-bg-img); */
    background: var(--login-left-bg);
    background-size: var(--login-bg-size);
    background-repeat: no-repeat;
    background-position: var(--login-bg-position);
    position: relative;
    height: 100vh;
}

.zc-login .zc-login-left .new-login-left {
    background-image: var(--login-bg-img);
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: repeat;
    overflow: auto;
    height: 100vh;
}

.zc-login .zc-login-left .new-login-left h1 {
    font-family: 'Monoton', cursive;
    font-size: var(--zc-login-left-title-font-size);
    color: #fff;
    line-height: var(--zc-login-left-title-line-height);
    font-weight: var(--zc-login-left-title-font-weight);
    text-align: center;
}

.zc-login .zc-login-left .zc-logo {
    position: absolute;
    top: 50px;
    left: 50px;
}

.zc-login-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    padding-right: var(--zc-login-info-left-space);
    color: #000;
    padding-left: var(--zc-login-info-left-space);
}


/* .zc-login-left .zc-login-info h1 {
    color: var(--login-left-title-color);
} */

.zc-login .zc-login-right {
    background-color: var(--login-right-bg);
    padding: var(--login-right-padding);
    height: 100vh;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.zc-login .zc-login-right zc-form h3 {
    font-size: var(--login-form-heading-font-size);
    color: var(--login-form-heading-color);
    margin-bottom: var(--login-form-heading-margin-bottom);
    text-align: var(--login-form-heading-align);
}

.brand-title {
    margin: 15px 0;
}

.brand-title h1 {
    font-size: var(--brand-title-font-size) !important;
    font-weight: var(--brand-title-font-weight);
    margin: 0 !important;
    line-height: var(--brand-title-line-height);
    margin-bottom: var(--brand-title-margin-bottom);
}

.brand-title p {
    color: var(--brand-title-color) !important;
    font-size: var(--font-size-normal);
    margin-top: 8px;
    margin-bottom: 8px;
}

.login-right-block .rembemer-me-checkbox {
    flex: 1 0 0%;
    max-width: 100%;
    padding: 0;
}

.login-right-block .cant-login-text {
    text-align: right;
}

.login-right-block .login-or {
    font-size: var(--font-size-normal);
    color: var(--login-or-text-color);
    ;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    position: relative;
    text-align: center;
}

.zc-or-login label {
    width: 100%;
}

.login-right-block .login-or span::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: var(--login-or-after-color);
    right: 0;
    top: 10px;
    z-index: 1;
}

.login-right-block .login-or span::before {
    content: 'OR';
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #FFF;
    right: 50%;
    transform: translateX(50%);
    padding: 10px 20px;
    z-index: 32;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-13);
    color: #ddd;
}

.zc-btn-alignments .btn-link {
    text-decoration: none;
    text-transform: capitalize;
    font-weight: 400;
    font-size: var(--font-size-normal);
    padding: 0 5px;
}

.zc-facebook-block .btn {
    width: 100%;
    margin-bottom: 10px;
}

.zc-login .zc-login-right .zc-login-logo img {
    height: var(--login-form-logo-height);
}

.zc-login .zc-login-right .captcha-icon {
    border-radius: var(--field-border-radius) !important;
}

.zc-login .zc-login-right .captcha-icon img {
    max-width: var(--captcha-max-width) !important;
    border-radius: var(--field-border-radius);
}

.zc-login .zc-login-right .captcha-icon .refresh-captcha {
    color: var(--captcha-icon-color);
    padding-right: 10px;
}

.zc-login .zc-login-right .cant-login-text a {
    color: var(--cant-login-links-color);
    font-size: var(--cant-login-links-font-size);
}


/********** login page styles end here ************/


/********** header styles strat here ************/

header {
    background-color: var(--header-bg-color);
    padding: var(--header-padding);
    height: var(--header-height);
    box-shadow: var(--header-box-shadow);
    position: var(--header-position);
    width: var(--header-width);
    top: var(--header-top);
    z-index: var(--header-z-index);
}

.environment {
    display: var(--environment-block-display);
    position: var(--environment-block-position);
    width: var(--environment-block-width);
    transform: var(--environment-block-transform);
    left: var(--environment-block-left);
    padding: var(--environment-block-padding);
    z-index: var(--environment-block-z-index);
}

.environment .inplementing-btn {
    border-radius: var(--inplementing-btn-border-radius);
    padding: var(--inplementing-btn-padding);
    background-color: var(--inplementing-btn-bg-color);
    color: var(--inplementing-btn-color);
    font-size: var(--inplementing-btn-font-size);
    display: var(--inplementing-btn-display);
}

.zc-header-left .sidebar-toggle {
    font-size: var(--toggle-memu-link-font-size);
    padding: 8px;
    margin-right: 8px;
    color: var(--toggle-memu-link-color);
    border-radius: 4px;
}

.zc-header-left .sidebar-toggle:hover {
    background-color: var(--toggle-memu-link-hover-bgcolor);
}

.zc-logo img {
    height: var(--header-logo-height);
    width: var(--header-logo-width);
}

.zc-notifications .dropdown-toggle {
    padding: 10px 12px;
    margin: 0 4px;
    color: var(--notifications-dp-toggle-color);
    border-radius: 0.25rem;
    top: 2px;
    font-size: var(--font-size-normal);
    cursor: pointer;
}

header .zc-header-right .zc-profile-dp-list {
    margin-left: 20px;
}

li.zc-notifications {
    padding-top: 7px;
}

.zc-notifications .dropdown-toggle:hover {
    color: var(--notifications-dp-toggle-hover-color);
    background-color: var(--notifications-dp-toggle-hover-bgcolor);
}

.zc-notifications .dropdown-toggle::after,
.zc-profile-dp-link.dropdown-toggle::after,
.card-item zc-button-dropdowns .dropdown-toggle::after {
    display: none;
}

header .zc-header-right .zc-profile-dp-link {
    padding-left: 15px;
    border-left: 1px solid var(--profile-dp-border-leftcolor);
    cursor: pointer;
}

header .zc-header-right .welcome-user-pic {
    width: var(--welcome-user-pic-width);
    height: var(--welcome-user-pic-height);
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.75rem;
}

header .zc-header-right .welcome-user-pic img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

header .zc-header-right .welcome-widget {
    text-align: left;
    font-size: var(--font-size-normal);
    margin-right: 0.75rem;
    padding-right: 1.5rem;
}

.zc-header .zc-header-right ul li .zc-profile-dp a .welcome-user {
    max-width: 125px;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    color: var(--welcome-user-text-clr);
    font-weight: 600;
}

.zc-user-info {
    padding: 0;
    color: var(--welcome-user-text-clr);
    opacity: 0.7;
}

.zc-user-info label {
    font-size: var(--font-size-small);
    cursor: pointer;
}

.zc-profile-dp-menu {
    box-shadow: var(--bs-box-shadow);
    width: 12rem;
}

.zc-profile-dp-menu:after {
    content: "";
    display: block;
    position: absolute;
    border-left: 10px solid var(--profile-dp-menu-after-border-left-color);
    border-right: 10px solid var(--profile-dp-menu-after-border-right-color);
    border-bottom: 10px solid var(--profile-dp-menu-after-border-color);
    right: 15px;
    top: -9px;
}

.zc-profile-dp-menu-list {
    margin: 10px 0;
}

.zc-profile-dp-menu .zc-profile-dp-menu-list li .dropdown-item {
    padding: 0.6rem 0.8rem;
    font-size: var(--font-size-normal);
    display: flex;
    align-items: center;
}

.zc-profile-dp-menu .zc-profile-dp-menu-list li .dropdown-item span {
    margin-right: 0.5rem;
    width: 1.25rem;
    color: var(--profile-dp-menu-icon-color);
    font-size: var(--font-size-lg);
}

.zc-profile-dp-menu .zc-profile-dp-menu-list li .dropdown-item:hover {
    color: var(--profile-dp-menu-item-hover-color);
    background-color: var(--profile-dp-menu-item-hover-bgcolor);
}

.zc-profile-dp-menu .zc-profile-dp-menu-list li .dropdown-item:hover span {
    color: var(--profile-dp-menu-item-hover-icon-color);
}


/********** header styles end here ************/


/********** footer styles start here ************/

.show-menu footer {
    padding-left: var(--show-menu-footer-padding-left);
}

footer {
    width: var(--footer-width);
    position: var(--footer-position);
    padding: var(--footer-padding);
    font-size: var(--footer-font-size);
    padding-left: var(--show-menu-footer-padding-left);
    bottom: 0;
    color: var(--footer-color);
    text-align: center;
    display: block;
    background-color: var(--footer-bgcolor);
    transition: all 0.3s;
}


/********** footer styles end here ************/


/********** breadcrumb styles start here ************/

.breadcrumb-widget {
    background-color: var(--breadcrumb-bgcolor);
    height: var(--breadcrumb-height);
    top: var(--breadcrumb-top);
    padding: var(--breadcrumb-padding);
    position: var(--breadcrumb-position);
    width: 100%;
    z-index: 9;
    flex-direction: row;
    box-sizing: border-box;
    display: flex;
    max-height: 100%;
    place-content: center space-between;
    align-items: center;
}

.breadcrumb-widget .zc-breadcrumb-left {
    color: var(--breadcrumb-color);
    flex-direction: row;
    box-sizing: border-box;
    display: flex;
    place-content: center flex-start;
    align-items: center;
    flex: 1 1 0%;
    padding-left: 60px;
    transition: all 0.3s;
}

.breadcrumb-widget .zc-breadcrumb-left ul {
    display: flex;
    align-items: center;
    padding-left: 0;
    padding-bottom: 4px;
}

.breadcrumb-widget .zc-breadcrumb-left ul li .bredcrumb-item {
    font-size: var(--font-size-normal);
    color: var(--bredcrumb-item-color);
}

.zc-breadcrumb-right {
    display: flex;
}

.back-btn {
    font-size: 26px;
    color: var(--back-btn-color);
    cursor: pointer;
}

.breadcrumb-contain .main-content {
    padding-top: var(--breadcrumb-contain-main-content-top);
}


/********** breadcrumb styles end here ************/


/********** side-menu styles start here **********/

.side-menu {
    position: var(--side-menu-position);
    top: var(--side-menu-top-space);
    left: 0;
    width: var(--side-menu-width);
    height: 100%;
    background-color: var(--side-menu-bgcolor);
    border-right: 1px solid var(--side-menu-border-right-color);
    z-index: 99;
    transition: var(--side-menu-transition);
}

.side-menu .zc-menu {
    padding: var(--zc-menu-padding) !important;
    height: var(--side-menu-height);
}

.show-menu ul.zc-menu {
    overflow: visible;
}

.side-menu div .zc-menu .nav-item {
    position: relative;
}

.side-menu div .zc-menu .nav-item.nav-dropdown.open {
    background-color: var(--side-menu-nav-dropdown-open-bgcolor);
}

.side-menu div .zc-menu .nav-item.activatedNode.open a.nav-dropdown-toggle {
    background-color: var(--side-menu-nav-dropdown-open-bgcolor);
}

.hide-menu .side-menu div .zc-menu .nav-item.activatedNode.open a.nav-dropdown-toggle,
.hide-menu .side-menu div .zc-menu .nav-item.open a.nav-dropdown-toggle {
    background-color: var(--hidemenu-side-menu-nav-dropdown-open-bgcolor);
}

.side-menu ul.zc-menu li.nav-item .dp-arrow {
    position: absolute;
    transition: all .3s;
}

.side-menu ul.zc-menu li.nav-item.nav-dropdown.open .dp-arrow {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.show-menu ul.zc-menu li.nav-item .dp-arrow {
    right: 6px;
    transform: rotate(-90deg);
    display: none;
}

.hide-menu ul.zc-menu li.nav-item .dp-arrow {
    right: 10px;
    transform: rotate(-90deg);
}

.hide-menu .side-menu ul.zc-menu li.nav-item.open .dp-arrow {
    transform: rotate(0deg);
}

.side-menu div .zc-menu .nav-item .nav-link i {
    line-height: 36px;
    font-size: var(--side-menu-nav-link-icon-font-size);
    width: var(--side-menu-nav-link-icon-width);
    position: absolute;
    height: 100%;
    text-align: center;
    top: 0;
    left: 0;
}

.show-menu ul.zc-menu li.nav-item a.nav-link .nav-link-text {
    display: none;
}

.side-menu div .zc-menu .nav-item .nav-link .nav-link-text {
    margin-left: 36px;
    font-size: var(--font-size-normal);
    color: var(--side-menu-nav-link-text-color);
    padding-right: 0;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.side-menu ul.zc-menu li.nav-item .nav-dropdown-items {
    max-height: 0;
    transition: max-height .5s ease;
    opacity: 0;
    z-index: inherit;
    background-color: var(--sidemenu-nav-dropdown-items-bgcolor);
    padding: 0;
    overflow: hidden;
    opacity: 1;
}

.side-menu ul.zc-menu li.nav-item.nav-dropdown.open>.nav-dropdown-items .nav-item .nav-link:hover {
    border-bottom: none;
}

.hide-menu .side-menu ul.zc-menu li.nav-item.nav-dropdown.open>.nav-dropdown-items .nav-item .nav-link:hover {
    background-color: var(--sidemenu-nav-dropdown-items-nav-link-hover-bgcolor);
}

.side-menu ul.zc-menu li.nav-item.nav-dropdown.open>.nav-dropdown-items .nav-item {
    transition: height .5s ease;
}

.hide-menu .side-menu div .zc-menu .nav-item.nav-dropdown .icon-angle-down-1,
.hide-menu .side-menu div .zc-menu .nav-item.nav-dropdown .nav-dropdown-items .icon-angle-down-1 {
    left: auto;
    right: 10px;
    width: auto;
    font-size: var(--font-size-normal);
}

.show-menu ul.zc-menu li.nav-item.nav-dropdown a.nav-link .icon-angle-down-1 {
    display: none;
}

.show-menu .side-menu div .zc-menu .nav-item:hover .nav-dropdown-items .nav-item .nav-link .icon-angle-down-1 {
    display: block;
    left: auto;
    right: 0;
    width: auto;
}

.hide-menu .side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item {
    padding-left: 10px;
}

.side-menu ul.zc-menu li.nav-item.nav-dropdown.open>.nav-dropdown-items .nav-item .nav-link span {
    display: inline-block;
}

.show-menu ul.zc-menu li.nav-item .nav-dropdown-items {
    transition: none;
    display: none;
    /* overflow: overlay; */
    overflow: visible;
}

.show-menu ul.zc-menu li.nav-item:hover>.nav-dropdown-items {
    display: block;
}

.side-menu ul.zc-menu li.nav-item.nav-dropdown.open>.nav-dropdown-items {
    transition: max-height .5s ease;
    opacity: 1;
    max-height: inherit;
}

.show-menu ul.zc-menu li.nav-item.nav-dropdown.open>.nav-dropdown-items {
    opacity: 0;
    left: 50px;
    position: absolute;
    max-height: var(--side-menu-dropdown-item-max-height);
}

ul.zc-menu li.nav-item.nav-dropdown .nav-dropdown-items::-webkit-scrollbar,
ul.zc-menu li.nav-item.nav-dropdown.open .nav-dropdown-items::-webkit-scrollbar {
    width: var(--webkit-scrollbar-width);
}

ul.zc-menu li.nav-item.nav-dropdown .nav-dropdown-items::-webkit-scrollbar-track,
ul.zc-menu li.nav-item.nav-dropdown.open .nav-dropdown-items::-webkit-scrollbar-track {
    background: var(--webkit-scrollbar-track-color);
}

ul.zc-menu li.nav-item.nav-dropdown .nav-dropdown-items::-webkit-scrollbar-thumb,
ul.zc-menu li.nav-item.nav-dropdown.open .nav-dropdown-items::-webkit-scrollbar-thumb {
    background: var(--webkit-scrollbar-thumb-bgcolor);
}

.side-menu div .zc-menu .nav-item .nav-link {
    padding: var(--side-menu-nav-link-padding);
    position: relative;
    height: var(--side-menu-nav-link-height);
    line-height: initial;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item {
    font-size: var(--font-13);
    height: auto;
    border-bottom: 0;
    transition: height .5s ease;
}

.side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link.active,
.side-menu div .zc-menu .nav-item .nav-link.active {
    background-color: var(--sidemenu-nav-dropdown-items-nav-link-active-bgcolor);
    font-weight: var(--sidemenu-nav-dropdown-items-nav-link-active-font-weight);
}

.hide-menu .side-menu {
    width: var(--hide-menu-side-menu-width);
}

.show-menu ul.zc-menu li.nav-item:hover>a.nav-link {
    width: var(--show-menu-nav-link-width);
    min-width: var(--show-menu-nav-link-min-widht);
    border-right: 1px solid var(--show-side-menu-nav-link-border-color);
    background: 0 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px
}

.show-menu ul.zc-menu li.nav-item:hover>a.nav-link.nav-dropdown-toggle {
    width: var(--show-menu-nav-link-width);
    border-bottom-right-radius: 0;
    position: relative;
}

.side-menu div .zc-menu .nav-item:hover>a.nav-link {
    background: 0 0;
}

.side-menu div .zc-menu .nav-item.nav-dropdown:hover>a.nav-link {
    color: var(--side-menu-nav-link-color);
    background: 0 0;
}

.show-menu ul.zc-menu li.nav-item:hover>a.nav-link .nav-link-text {
    font-weight: 400;
    display: block;
    width: auto;
    min-width: var(--zc-nav-link-text-min-width);
    height: auto;
    margin-left: 44px;
    padding: var(--zc-nav-link-text-padding);
    color: var(--side-menu-nav-link-text-color);
    background-color: var(--show-side-menu-nav-link-text-bgcolor);
    line-height: 1.625rem;
    visibility: visible;
    opacity: 1;
    overflow: unset;
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}

.show-menu ul.zc-menu li.nav-item.nav-dropdown:hover>a.nav-link .nav-link-text {
    box-shadow: none;
    width: 100%;
    font-size: var(--font-13);
    color: var(--sidemenu-nav-link-text-color);
    position: relative;
    padding-left: 12px;
}

.show-menu ul.zc-menu li.nav-item.nav-dropdown:hover>a.nav-link::after {
    position: absolute;
    right: -1px;
    border: 1px solid var(--show-side-menu-nav-link-after-border-col);
    top: 0;
    height: 100%;
    width: 20px;
    background: var(--dropdown-hover-nav-link-after-bg-color);
    border-left: 0;
}

.hide-menu .side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link i {
    padding-left: 20px;
}

.hide-menu .side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link span {
    padding-left: 0;
}

.hide-menu .side-menu div .zc-menu .nav-item.nav-dropdown {
    overflow: visible;
    position: relative;
}

.hide-menu .side-menu ul.zc-menu li.nav-item.nav-dropdown.open>.nav-dropdown-items .nav-item {
    background-color: var(--hidemenu-dropdown-items-nav-item-bg-color);
}

.show-menu .side-menu div .zc-menu .nav-item:hover>.nav-dropdown-items,
.show-menu ul.zc-menu li.nav-item.nav-dropdown.open:hover>.nav-dropdown-items {
    opacity: 1;
    position: absolute;
    min-width: var(--side-menu-dropdown-item-width);
    width: auto;
    z-index: 9;
    max-height: var(--side-menu-dropdown-item-max-height);
    border: 1px solid var(--show-side-menu-nav-link-border-color);
    border-bottom-right-radius: 4px;
}

.show-menu ul.zc-menu li.nav-item.nav-dropdown.open:hover>.nav-dropdown-items {
    left: 61px;
    top: 37px;
    background-color: var(--show-side-menu-nav-dropdown-open-item-color);
    border-top: none;
}

ul.zc-menu li.nav-item .dp-arrow::before {
    content: "";
    font-size: var(--font-size-xxs);
    color: var(--nav-item-dp-arrow-color);
}

.hide-menu .side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item:last-child {
    border-bottom: 0 solid var(--hide-side-menu-nav-item-last-child-border-color);
}


/* .hide-menu .side-menu .nav-dropdown .nav-dropdown-toggle:before,
.hide-menu .side-menu .nav-dropdown .nav-dropdown-items .nav-dropdown-toggle:before {
    content: '\e1d4';
    font-family: 'tssfont' !important;
    position: absolute;
    right: 10px;
    color: #364553;
} */

.show-menu .side-menu div .zc-menu .nav-item:hover>.nav-dropdown-items li {
    background-color: var(--showmenu-dropdown-items-li-bg-color);
}

.show-menu .side-menu div .zc-menu .nav-item:hover>.nav-dropdown-items li a {
    box-shadow: none;
}

.hide-menu ul.zc-menu {
    overflow: auto;
}

.side-menu div .zc-menu::-webkit-scrollbar-thumb {
    background-color: var(--side-menu-webkit-scrollbar-thumb-color);
}

.side-menu div .zc-menu .nav-item:hover {
    background-color: var(--sidemenu-nav-item-hover-bgcolor);
}

.side-menu div .zc-menu::-webkit-scrollbar {
    width: .3em;
}

.side-menu div .zc-menu::-webkit-scrollbar-track {
    -webkit-box-shadow: var(--sidemenu-scrollbar-track);
    box-shadow: var(--sidemenu-scrollbar-track);
}

.side-menu div .zc-menu .nav-item.activatedNode:hover>a.nav-dropdown-toggle {
    background-color: var(--sidemenu-nav-item-activatedNode-hover-bgcolor);
}


/* .show-menu .zc-menu-advanced .side-menu div .zc-menu .nav-item>.nav-link>i::after{
    background-color:
} */

.show-menu .zc-menu li:hover>a.nav-link {
    background-color: var(--showmenu-li-hover-nav-link-bg-color);
}

.show-menu ul.zc-menu li.nav-dropdown:hover>a.nav-link.nav-dropdown-toggle,
.show-menu ul.zc-menu li.nav-dropdown:hover>a.nav-link.nav-dropdown-toggle:hover {
    background-color: var(--dropdown-items-nav-item-bg-color);
}

.side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link.active::before,
.side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link.nav-dropdown-toggle::before,
.side-menu div .zc-menu .nav-item.activatedNode a.nav-dropdown-toggle::before {
    content: unset;
    height: 102%;
    left: 0;
    position: absolute;
    top: 0;
    width: 4px;
}

.side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link i {
    font-size: var(--font-size-medium);
    width: 40px;
}

.side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link span {
    padding-left: 20px;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: var(--font-13);
    white-space: nowrap;
}

.hide-menu ul.zc-menu li.nav-item.nav-dropdown.open .nav-dropdown-items {
    max-height: auto;
}

.hide-menu .side-menu div .zc-menu .nav-item.nav-dropdown:hover {
    background-color: var(--hidemenu-dropdown-hover-bgcolor);
}

ul.zc-menu li.nav-item.nav-dropdown.open .nav-dropdown-items::-webkit-scrollbar-thumb:hover {
    background: var(--webkit-scrollbar-thumb-hover-color);
}

.toast-center-center {
    top: 12px;
    right: 12px;
    left: inherit;
    transform: none;
}

.show-menu .side-menu div .zc-menu .nav-item>.nav-link>i::after {
    position: absolute;
    content: "";
    background-color: var(--side-menu-icon-hover-bgcolor);
    transform: scale(0);
    transition: all .3s ease;
    z-index: -1;
    /* width: 90%;
    height: 90%;
    border-radius: var(--nav-link-hover-icon-broder-radius);
    left: 5%;
    top: 5%; */
    width: var(--nav-link-icon-hover-width);
    height: var(--nav-link-icon-hover-height);
    border-radius: var(--nav-link-hover-icon-broder-radius);
    left: var(--nav-link-icon-hover-left);
    top: var(--nav-link-icon-hover-top);
    transition: all .3s ease;
    z-index: -1;
}

.show-menu .side-menu div .zc-menu .nav-item:hover>.nav-link>i::after {
    transform: scale(1);
}

.show-menu .side-menu div .zc-menu .nav-item.activatedNode.open>.nav-link>i::after,
.show-menu .side-menu div .zc-menu .nav-item>.nav-link.active>i::after,
.side-menu .side-menu div .zc-menu .nav-item.activatedNode:hover>a.nav-dropdown-toggle i::after,
.side-menu .side-menu div .zc-menu .nav-item:hover>a.nav-link>i::after {
    transform: scale(1);
    background-color: var(--active-menu-icon-bgcolor);
}

.show-menu .side-menu div .zc-menu .nav-item.activatedNode:hover>a.nav-dropdown-toggle i {
    color: var(--sidemenu-activatedNode-nav-dropdown-toggle-icon-color);
}

.side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link i {
    color: var(--sidemenu-nav-dropdown-toggle-icon-color);
}

.side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link span {
    color: var(--sidemenu-nav-link-text-color);
}

.hide-menu .side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link .nav-link-text {
    color: var(--hide-menu-navdropdown-items-nav-link-text-color);
}

.side-menu div .zc-menu .nav-item .nav-link {
    color: var(--sidemenu-nav-dropdown-toggle-text-color);
}

.side-menu ul.zc-menu li.nav-dropdown:hover>a.nav-link.nav-dropdown-toggle,
.side-menu ul.zc-menu li.nav-dropdown:hover>a.nav-link.nav-dropdown-toggle:hover>.side-menu div .zc-menu .nav-item.nav-dropdown:hover>a.nav-link {
    color: var(--side-menu-nav-drop-down-toggle-color);
}

.hide-menu .side-menu div .zc-menu .nav-item.nav-dropdown.open .nav-dropdown-toggle i,
.hide-menu .side-menu div .zc-menu .nav-item.nav-dropdown.open .nav-dropdown-toggle .nav-link-text {
    color: var(--hidemenu-menu-nav-dropdown-open-text-color);
}

.show-menu .side-menu div .zc-menu .nav-item.activatedNode.open a.nav-dropdown-toggle,
.show-menu .side-menu div .zc-menu .nav-item.activatedNode.open:hover>a.nav-dropdown-toggle i,
.show-menu .side-menu div .zc-menu>.nav-item>.nav-link.active i,
.show-menu .side-menu div .zc-menu>.nav-item>.nav-link.active:hover>i {
    color: var(--showmenu-nav-item-nav-link-color);
}

.hide-menu .side-menu div .zc-menu .nav-item.nav-dropdown.open .nav-dropdown-items .nav-link.active i,
.hide-menu .side-menu div .zc-menu .nav-item.nav-dropdown.open .nav-dropdown-items .nav-link.active .nav-link-text,
.hide-menu .side-menu div .zc-menu .nav-item.nav-dropdown.open .nav-dropdown-items .nav-link:hover i,
.hide-menu .side-menu div .zc-menu .nav-item.nav-dropdown.open .nav-dropdown-items .nav-link:hover .nav-link-text {
    color: var(--hidemenu-nav-item-nav-link-color);
}

.show-menu .side-menu ul.zc-menu li.nav-item:hover>a.nav-link.nav-dropdown-toggle {
    width: var(--show-menu-nav-link-width);
    position: relative;
}

.show-menu .side-menu ul.zc-menu li.nav-item:hover>a.nav-link.nav-dropdown-toggle>.nav-link-text {
    padding: 10px 10px 12px 20px;
    color: var(--active-menu-text-color);
}

.show-menu .side-menu ul.zc-menu li.nav-item:hover>a.nav-link .nav-link-text {
    min-width: 213px;
    margin-left: 53px;
    background-color: var(--show-side-menu-nav-link-text-bgcolor);
    border: 1px solid var(--side-menu-dropdown-item-border-color);
    border-radius: .5rem;
    box-shadow: 0 0 8px var(--side-menu-dropdown-item-border-color);
    -moz-box-shadow: 0 0 8px var(--side-menu-dropdown-item-border-color);
    -webkit-box-shadow: 0 0 8px var(--side-menu-dropdown-item-border-color);
}

.show-menu .side-menu ul.zc-menu>li.nav-item:hover>a.nav-link .nav-link-text::after,
.show-menu .side-menu ul.zc-menu>li.nav-item:hover>a.nav-link .nav-link-text::before {
    content: "";
    display: block;
    position: absolute;
    border: 8px solid var(--showmenu-sidemenu-nav-link-text-after-border-color);
    border-right-color: var(--showmenu-sidemenu-nav-link-text-after-right-color);
    left: -16px;
    top: 45%;
    transform: translateY(-50%);
}

.show-menu .side-menu ul.zc-menu>li.nav-item:hover>a.nav-link .nav-link-text::before {
    left: -17px;
    border-right-color: var(--side-menu-dropdown-item-border-color);
}

.show-menu .side-menu div .zc-menu .nav-item:hover>.nav-dropdown-items,
.show-menu .side-menu ul.zc-menu li.nav-item.nav-dropdown.open:hover>.nav-dropdown-items {
    left: 70px;
    top: 37px;
    border-radius: 0 0 .5rem .5rem;
    border-color: var(--side-menu-dropdown-item-border-color);
    padding: var(--side-menu-dropdown-item-padding) !important;
    background-color: var(--side-menu-dropdown-item-bgcolor);
    border-top: 1px solid var(--side-menu-dropdown-item-border-color);
    box-shadow: var(--side-menu-dropdown-box-shadow);
    -moz-box-shadow: var(--side-menu-dropdown-box-shadow);
    -webkit-box-shadow: var(--side-menu-dropdown-box-shadow);
    /* overflow-y: auto; */
}

.show-menu .side-menu .zc-menu li:hover>a.nav-link {
    background-color: var(--showmenu-navitem-hover-navlink-bg-color);
    color: var(--showmenu-sidemenu-nav-link-color);
}

.show-menu .side-menu div .zc-menu .nav-item:hover>a.nav-link,
.show-menu .side-menu ul.zc-menu li.nav-dropdown:hover>a.nav-link.nav-dropdown-toggle,
.show-menu .side-menu ul.zc-menu li.nav-dropdown:hover>a.nav-link.nav-dropdown-toggle:hover {
    background-color: var(--showmenu-sidemenu-navitem-hover-bgcolor);
}

.show-menu .side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link {
    border-radius: 20px;
    height: 34px;
    margin: 2px 0;
    width: 195px;
    border: 0;
}

.show-menu .side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link i {
    line-height: 34px;
    color: var(--showmenu-sidemenu-nav-dropdown-items-icon-color);
}

.show-menu .side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link.active i,
.show-menu .side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link.active span {
    color: var(--menu-dropdown-link-active-color);
}

.show-menu .side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link.active:hover>i,
.show-menu .side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link.active:hover>span {
    color: var(--menu-dropdown-link-active-icon-color);
}

.show-menu .side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link.active,
.show-menu .side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link.active:hover,
.show-menu .side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link:hover {
    background-color: var(--menu-dropdown-link-hover-bgcolor);
}

.show-menu .side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link:hover>i,
.show-menu .side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link:hover>span,
.show-menu .side-menu div .zc-menu .nav-item:hover>.nav-link:hover>i {
    color: var(--showmenu-sidemenu-nav-link-hover-color);
}

.hide-menu .side-menu div .zc-menu .nav-item.nav-dropdown:hover>.nav-dropdown-toggle i,
.hide-menu .side-menu div .zc-menu .nav-item.nav-dropdown:hover>.nav-dropdown-toggle span {
    color: var(--hidemenu-dropdown-link-hover-color);
}

.side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link.active i,
.side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link.active span,
.side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link:hover>i,
.side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link:hover>span,
.side-menu div .zc-menu .nav-item .nav-link.active i,
.side-menu div .zc-menu .nav-item .nav-link.active span,
.side-menu div .zc-menu .nav-item .nav-link.active:hover>i,
.side-menu div .zc-menu .nav-item.activatedNode.open a.nav-dropdown-toggle,
.side-menu div .zc-menu .nav-item:hover>a.nav-link {
    color: var(--menu-dropdown-link-active-color);
}

.show-menu .side-menu div .zc-menu .nav-item:hover>.nav-link.active:hover>i {
    color: var(--showmenu-item-hover-link-active-color);
}

.show-menu .side-menu ul.zc-menu .nav-dropdown-items li.nav-item:hover>a.nav-link .nav-link-text {
    box-shadow: none;
    box-shadow: none;
    border: none;
    min-width: auto !important;
    margin-left: 0 !important;
    background-color: transparent;
    padding: 1px 0 0 20px !important;
}


/* .show-menu .zc-menu-advanced .side-menu ul.zc-menu .nav-dropdown-items li.nav-item:hover>a.nav-link .nav-link-text {
    margin-left: 0 !important;
  } */

.show-menu .zc-menu-advanced .side-menu ul.zc-menu .nav-dropdown-items li.nav-item:hover>.nav-dropdown-items {
    position: absolute;
    top: -5px;
    left: 210px;
    border-radius: 0.5rem;
}

.show-menu .side-menu ul.zc-menu .nav-dropdown-items li.nav-item:hover>a.nav-link.nav-dropdown-toggle {
    width: 195px;
}

.show-menu .side-menu ul.zc-menu .nav-dropdown-items li.nav-item:hover>.nav-dropdown-items,
.show-menu .side-menu ul.zc-menu .nav-dropdown-items li.nav-item.nav-dropdown.open:hover>.nav-dropdown-items {
    position: absolute;
    top: -5px;
    left: 210px;
    border-radius: 0.5rem;
}

.show-menu .side-menu ul.zc-menu .nav-dropdown-items li.nav-item:hover>.nav-dropdown-items:after {
    content: "";
    display: block;
    position: absolute;
    border: 8px solid var(--showmenu-sidemenu-nav-link-text-after-border-color);
    border-right-color: var(--showmenu-sidemenu-nav-link-text-after-right-color);
    left: -16px;
    top: 18px;
    transform: translateY(-50%);
}

.show-menu .side-menu ul.zc-menu .nav-dropdown-items li.nav-item:hover>.nav-dropdown-items:before {
    content: "";
    display: block;
    position: absolute;
    border: 8px solid transparent;
    border-right-color: var(--light-gray);
    left: -17px;
    top: 18px;
    transform: translateY(-50%);
}

.show-menu .side-menu ul.zc-menu .nav-dropdown-items li.nav-item>a.nav-link .nav-link-text {
    padding-left: 20px !important;
    margin-left: 0 !important;
    overflow: hidden;
}


/* .show-menu .side-menu ul.zc-menu>li.nav-dropdown:hover>a.nav-link>i {
    color: var(--showmenu-nav-link-hover-icon-color);
} */

.show-menu .side-menu div .zc-menu li.nav-dropdown:hover>.nav-link>i,
.show-menu .side-menu div .zc-menu .nav-item:hover>.nav-link:hover>i {
    color: var(--showmenu-nav-link-hover-icon-color);
}


/********** side-menu styles end here **********/

.main-content {
    padding-top: var(--main-content-top-gap);
    min-height: var(--main-content-min-height);
    margin-left: var(--main-content-left-gap);
    transition: all .3s;
}

.blank-layout .main-content {
    margin-left: 0;
}

.p-contain {
    padding: var(--p-contain-padding);
}


/* table styles start here  */

.zc-table-header.top {
    position: relative;
    padding-bottom: 6px;
    justify-content: end;
}

.table-header {
    display: flex;
    align-items: center;
    padding: 0;
}

.zc-table-header.top .table-header {
    width: max-content;
    flex: unset;
    align-items: center;
    margin-right: auto;
}

.table-header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 !important;
    width: auto;
}

.filter-position-top {
    flex: auto;
    max-width: 100%;
}

.zc-table-header.top .table-header-right .filter-position-top zc-data-list-filter .fltr-btns-widget {
    margin: 0;
}

.zc-data-list-filters {
    display: flex;
    align-items: center;
    margin: 0;
    justify-content: flex-end;
    font-family: var(--bs-body-font-family) !important;
}

.zc-data-list-filters .ui-fluid-filters-div {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.filter-position-top .zc-data-list-filters {
    margin-top: 0 !important;
}

.filter-position-top .zc-data-list-filters .filter-container {
    padding: 0;
}

.filter-position-top .zc-data-list-filters .filter-container label {
    display: inherit;
}

.filter-position-top .filter-footer .filter-clear-btn i {
    top: 1px;
    position: relative;
}

.zc-filter-date,
.zc-filter-date .ui-inputgroup,
.zc-filter-number,
.zc-filter-number .ui-inputgroup,
.zc-filter-select,
.zc-filter-select .ui-inputgroup,
.zc-filter-text,
.zc-filter-text .ui-inputgroup {
    position: relative;
}

.filter-position-top input {
    height: var(--search-field-height);
}

.zc-table-header .zc-filter-text .ui-inputgroup>input {
    border-radius: 0.25rem !important;
    border: 1px solid var(--search-field-border-color);
    border-radius: 0.25rem;
    background-color: var(--filter-input-bg-color);
    box-shadow: inset var(--ui-inputgroup-input-box-shadow);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: all .2s ease-in-out;
    padding: var(--search-field-padding) !important;
    margin-left: auto;
}

.zc-table-header .zc-filter-text .ui-inputgroup>input:focus {
    color: var(--input-focus-color);
    background-color: var(--filter-input-bg-color);
    border-color: var(--input-focus-border-color) !important;
    outline: 0;
    box-shadow: 0 0 0 1px var(--input-focus-border-color);
}

.zc-filter-date .filter-searchclear,
.zc-filter-number .filter-searchclear,
.zc-filter-select .filter-searchclear,
.zc-filter-text .filter-searchclear {
    position: absolute;
    right: 15px;
    bottom: 10px;
    height: 14px;
    margin: auto;
    font-size: var(--font-size-xxs);
    cursor: pointer;
    color: var(--filter-text-color);
}


/* zc-table-header .zc-filter-text .ui-inputgroup> */
.form-control::placeholder,
input::placeholder {
    color: var(--light-gray);
    font-size: var(--font-size-normal);
    font-weight: 400 !important;
}

.zc-table-header .zc-filter-text .ui-inputgroup .ui-button-warn {
    display: none;
}

.filter-footer {
    background-color: transparent !important;
}

.filter-position-top .filter-footer div {
    padding: 0 !important;
    margin: 0 !important;
}

.filter-position-top .filter-footer .filter-clear-btn {
    width: auto;
    margin-left: 5px;
    padding: 6px 12px !important;
    font-size: var(--font-size-normal);
}

.filter-position-top .filter-footer .filter-clear-btn i.icon-serch-1 {
    position: relative;
    top: 1px;
}

.zc-table-header .table-header-right .group-actions {
    justify-content: flex-end;
}

.zc-table-header .table-header-right .group-actions .zc-form-add-btn {
    display: inline-flex;
}

.zc-table-header .table-header-right .group-actions .zc-form-add-btn .btn {
    margin-left: 5px;
    padding: 6px 12px;
    font-size: var(--font-size-normal);
    display: flex;
    align-items: center;
    justify-content: center;
}

.zc-form-add-btn .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.zc-form-add-btn .btn i {
    margin-right: 5px;
}

.zc-widget-data-list .ui-table {
    font-size: var(--font-size-medium);
    font-weight: 400;
}

.ui-table-wrapper {
    background-color: var(--table-wrapper-bg-color);
}

.ui-table table {
    border: none;
}

.ui-table table tbody.ui-table-tbody tr:nth-child(even) {
    background-color: var(--tr-even-bgcolor);
}

.table-even-bg .ui-table table tbody.ui-table-tbody tr:nth-child(even) {
    background-color: var(--tr-even-bgcolor);
}

.ui-table table .ui-table-thead tr th,
.ui-table table tbody.ui-table-tbody tr td {
    position: relative;
    border-bottom: 1px solid var(--table-border-color) !important;
    padding: var(--columns-padding) !important;
    border: 1px solid var(--table-border-color) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
}

.ui-table table .ui-table-thead tr th {
    font-size: var(--font-size-medium) !important;
    font-weight: 600 !important;
    background-color: var(--th-background) !important;
    white-space: nowrap;
    color: var(--th-color) !important;
    border-top: 1px solid var(--table-border-color) !important;
}

.ui-table table .ui-table-thead tr th .pre-filters {
    display: flex;
    align-items: center;
    position: relative;
    width: max-content;
}

.ui-table table .ui-table-thead tr th .pre-filters .predefined-filters {
    position: absolute;
    left: auto;
    right: 0px;
    top: 3px;
}

.ui-table table .ui-table-thead tr th .pre-filters .predefined-filters .btn-sm {
    position: absolute;
    left: 6px;
    top: 8px;
    font-size: var(--font-size-xxs);
}

.th-filter-dropdown.show {
    background-color: var(--th-filter-dropdown-bg-color);
    border-radius: 5px;
}

.th-filter-dropdown.show .dropdown-item.ui-sortable-column {
    border-radius: 5px 5px 0 0;
    border-bottom: 1px solid var(--ui-sortable-column-border-color);
    font-size: var(--font-13);
    line-height: 1;
}

.th-filter-dropdown.show .dropdown-item.ui-sortable-column:hover {
    background-color: transparent;
}

.ui-table table tbody.ui-table-tbody tr td {
    font-size: var(--font-size-normal);
    color: var(--td-color);
}

.zc-widget-data-list .ui-table-thead>tr>th.zc-actions {
    text-align: right;
}

zc-actions .zc-form-add-btn {
    display: inline-flex;
    float: right;
}

zc-actions .zc-form-add-btn .btn i {
    padding: 0 5px 1px 0;
}

.ui-table-tbody .zc-form-add-btn i.ui-clickable {
    padding: 0 !important;
    line-height: calc(1.5em + .5rem);
    width: var(--row-action-size);
    display: flex;
    height: var(--row-action-size);
    align-items: center;
    justify-content: center;
    border: 1px solid var(--row-action-border-color);
    border-radius: var(--row-action-border-radius) !important;
    color: var(--row-action-icon-color);
    background: var(--ui-clickable-linear-gradiant);
    box-shadow: var(--ui-clickable-box-shadow);
    margin-right: 5px;
    cursor: pointer;
}

.actions-menu.dropdown-menu {
    background-color: var(--actions-menu-dropdown-menu-bg-color);
}

.actions-menu.dropdown-menu .dropdown-item {
    border-bottom: 0 !important;
    font-size: var(--font-size-normal);
    padding: 8px 16px !important;
}

.ui-table-tbody .zc-form-add-btn .ui-clickable.dropdown .ui-clickable,
.ui-table-tbody .zc-form-add-btn i.ui-clickable:last-child {
    margin-right: 0px;
}

.zc-widget-data-list .ui-paginator-bottom {
    padding: 10px;
    text-align: center;
    border: 0;
    background-color: var(--paginator-bg-color);
}

.zc-widget-data-list .ui-paginator-bottom .btn-sm.icon-refresh-1 {
    padding-top: 9px;
    display: flex;
    color: var(--pagination-refresh-color);
}

.ui-paginator .ui-paginator-first,
.ui-paginator .ui-paginator-prev,
.ui-paginator .ui-paginator-next,
.ui-paginator .ui-paginator-last {
    border-radius: 50% !important;
    margin: 0 1px !important;
    border: 1px solid var(--ui-paginator-border-color) !important;
}

.ui-paginator .ui-paginator-pages .ui-paginator-element {
    border: 1px solid var(--ui-paginator-element-border-color) !important;
    border-radius: 50% !important;
    margin: 0 1px !important;
}

.ui-paginator .ui-paginator-pages .ui-paginator-page.ui-state-active {
    background-color: var(--page-no-active-bg-color) !important;
    border-color: var(--page-no-active-bg-color) !important;
    border-radius: 50%;
    color: var(--ui-state-active-color) !important;
}

.ui-paginator .ui-paginator-right-content {
    float: right;
    display: flex;
    padding-top: 9px;
    font-family: var(--bs-body-font-family) !important;
    padding-right: 8px;
}

.zc-widget-data-list th .dropdown-menu .dropdown-item {
    padding-left: 25px !important;
    font-family: var(--bs-body-font-family) !important;
    background-color: var(--th-filter-dropdown-bg-color);
}

.zc-widget-data-list th .dropdown-menu .dropdown-item:hover {
    background-color: var(--th-filter-dropdown-bg-color) !important;
}

.zc-widget-data-list th .dropdown-menu p-sorticon {
    position: absolute;
    left: 0;
    top: 5px;
}

.zc-widget-data-list .dropdown-menu.show {
    transform: translate(0, -20%) !important;
    top: 60px !important;
    margin-top: 26px;
}

.zc-widget-data-list th:last-child .dropdown-menu.show,
tr th:last-child .dropdown-menu.show {
    left: unset !important;
    right: 0;
}

.zc-widget-data-list th .dropdown-menu.show,
.zc-widget-data-list th .dropdown-menu.show .ui-datepicker-trigger.ui-button {
    border: 0 !important;
    z-index: 1 !important;
}

.ui-datepicker-trigger.ui-button .zc-widget-data-list th .th-filter-dropdown .zc-filter-text input,
.zc-widget-data-list th .th-filter-dropdown .zc-filter-text input:focus {
    border: 0;
    box-shadow: none;
}

.zc-widget-data-list th .th-filter-dropdown .ui-dropdown {
    border: 0 !important;
}

.zc-widget-data-list .ui-table .ui-sortable-column.ui-state-highlight {
    background-color: var(--ui-state-highlight-bg-color) !important;
    border-radius: .25rem .25rem 0 0;
}

.zc-widget-data-list th .th-filter-dropdown .ui-dropdown .ui-dropdown-label,
.zc-widget-data-list th .th-filter-dropdown .ui-dropdown-open {
    background: url("../images/select-drop.png") no-repeat right .75rem center !important;
    border: 0 !important;
    font-family: var(--bs-body-font-family);
    font-size: var(--font-size-normal) !important;
}

.ui-dropdown .ui-dropdown-trigger {
    display: none;
}

.zc-widget-data-list th .th-filter-dropdown .ui-dropdown .ui-dropdown-label.ui-placeholder {
    color: var(--light-gray);
    padding-left: 7px !important;
    font-size: var(--font-size-normal) !important;
}

.zc-widget-data-list th .dropdown-menu .dropdown-item i {
    padding-left: 5px;
}

.ui-table table .ui-sortable-column.ui-state-highlight .ui-sortable-column-icon {
    color: var(--ui-sortable-column-icon-color) !important;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: .25rem 1.5rem;
    clear: both;
    font-weight: 400;
    color: var(--dropdown-item-color);
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0
}

.dropdown .th-filter-dropdown.show .dropdown-item i {
    font-size: var(--font-size-medium);
    padding-left: 5px;
    padding-top: 3px;
}

.zc-widget-data-list th .dropdown-menu .dropdown-item.ui-state-highlight .ui-sortable-column-icon:before {
    color: var(--ui-sortable-column-icon-before-color);
}

.th-filter-dropdown input {
    border: 0 !important;
    padding: 7px;
    height: 30px;
    font-size: var(--font-size-normal);
    width: 100%;
}

.th-filter-dropdown input::placeholder {
    color: var(--light-gray);
}

.th-filter-dropdown .ui-inputtext {
    padding: 7px !important;
}

.ui-table-wrapper .zc-filter-text .icon-search {
    display: none;
}

.zc-filter-text .ui-inputgroup button.btn,
table th .ui-inputgroup .filter-search-btn {
    border: 0;
    padding: 6px 12px;
    background-color: transparent;
    color: var(--filter-search-btn-color);
    font-size: var(--font-13);
}

.zc-filter-select .ui-inputgroup>input:focus-visible,
.zc-filter-date .ui-inputgroup>input:focus-visible,
.zc-filter-currency .ui-inputgroup>input:focus-visible,
.zc-filter-text .ui-inputgroup>input:focus-visible,
.zc-filter-number .ui-inputgroup>input:focus-visible,
.zc-widget-data-list th .th-filter-dropdown .ui-dropdown .ui-dropdown-label.ui-placeholder:focus-visible {
    outline-color: var(--field-focus-border-color);
}

zc-actions .dropdown-toggle::after {
    display: none;
}


/* table styles end here  */


/* DROPDOWN position to beside Global search  */

.zc-positioned-block zc-form {
    padding: 0 !important;
    border: 0 !important;
}

.zc-positioned-block .zc-absolute-form {
    position: absolute;
    width: auto;
    bottom: -46px;
    left: 0;
    z-index: 9;
}

.zc-positioned-block .zc-absolute-form .ui-dropdown.ui-widget {
    height: 37px;
}

body .zc-positioned-block .zc-absolute-form .ui-dropdown .ui-dropdown-label {
    padding-right: 3em !important;
    color: var(--ui-dropdown-label-color) !important;
}

.zc-positioned-block formly-group formly-field {
    width: auto;
}

.zc-positioned-block .zc-absolute-form .ui-dropdown .ui-dropdown-label {
    height: 35px;
    /* line-height: 1.4; */
}

.zc-positioned-block .zc-position-dropdown {
    flex: unset;
    max-width: unset;
    width: auto;
    position: relative;
    top: -1px;
    padding: 0;
}


/* DROPDOWN position to beside Global search  */


/* notification styles start here  */

.zc-notifications .dropdown-toggle {
    padding: 10px 12px;
    margin: 0 4px;
    color: var(--notification-icon-color);
    border-radius: .25rem;
    top: 2px;
    font-size: var(--font-size-normal) !important;
}

.zc-notifications .dropdown-toggle:hover {
    color: var(--notification-toggle-hover-color);
    background-color: var(--notification-icon-hover-bg-color);
}

.zc-notifications .show.dropdown .dropdown-toggle {
    background-color: var(--dropdown-toggle-bg-color);
    color: var(--notification-toggle-hover-color);
}

.zc-notifications .dropdown-menu.show {
    min-width: var(--zc-notifications-dropdown-menu-width) !important;
    transform: translate(-209px, 20px) !important;
    box-shadow: var(--zc-notifications-dropdown-menu-box-shadow);
    border: none;
    padding: 0;
    margin-top: 20px;
}

.zc-notifications .dropdown-menu::before {
    right: 13px;
    color: var(--zc-notifications-dropdown-menu-before-color);
    content: "";
    display: block;
    position: absolute;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--notification-border-bottom-color);
    right: 15px;
    top: -10px;
}

.zc-notifications .dropdown-menu h4 {
    background-color: var(--notification-heading-color) !important;
    border-bottom: 1px solid var(--zc-notifications-dropdown-menu-h4-border-color);
    padding: var(--notification-title-padding) !important;
    font-size: var(--font-size-normal);
    font-weight: 600;
    color: var(--notification-title-color);
    border-radius: 5px 5px 0 0;
    margin: 0;
}

.zc-notifications-list {
    display: block !important;
}

.zc-notifications .dropdown-menu::after {
    right: 13px;
    border-bottom: 10px solid var(--notification-dropdown-after-border-color);
}

.zc-notifications .dropdown-menu ul li a {
    padding: 0.75rem 1rem !important;
    color: var(--onyx-color);
    font-weight: 400;
}

.zc-notifications .dropdown-menu ul li {
    border-bottom: 1px solid var(--bright-gray);
}

.zc-notifications .dropdown-menu ul li a {
    padding: 0.75rem 1rem !important;
    width: 100%;
    display: block;
    font-size: var(--font-size-normal);
}

.zc-notifications .dropdown-menu ul li a:hover {
    color: var(--notification-dropdown-a-hover-color);
    background-color: var(--notification-list-hover-bg-color);
}

.zc-notifications .dropdown-toggle .zc-number {
    top: -3px !important;
    right: -4px !important;
    font-weight: bold;
    width: 20px;
    display: inline-block;
    font-family: var(--bs-body-font-family);
}

.zc-notifications .notification-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.zc-notifications .notification-footer a {
    color: var(--notification-footer-links-color);
    font-size: var(--font-size-normal);
    padding: 8px;
    cursor: pointer;
}


/* notification styles end here  */


/* tabs styles start here  */

.mat-tab-list {
    background: var(--tabs-header-background);
}

.mat-tab-list .mat-tab-labels {
    align-items: center;
}

.mat-tab-list .mat-tab-labels .mat-tab-label {
    font-family: var(--bs-body-font-family);
    min-width: unset;
    font-weight: normal;
    border-bottom: 3px solid transparent;
    outline: 0;
    height: var(--tab-label-height);
    padding: var(--tab-label-padding);
    color: var(--tabs-labels-color);
    opacity: 1;
}

.mat-tab-list .mat-tab-labels .mat-tab-label:hover {
    /* border-color: #e6e8ed #e6e8ed rgba(34, 34, 48, .1); */
    color: var(--tab-hover-label-color);
}

.zc-tabs .mat-tab-header .mat-tab-labels .mat-tab-label .mat-tab-label-content>div {
    display: flex;
}

.zc-tabs .mat-tab-header .mat-tab-labels .mat-tab-label .mat-tab-label-content i {
    line-height: 1;
    display: flex;
    align-items: center;
    padding-bottom: 2px;
    padding-right: 4px;
}

.mat-tab-list .mat-tab-labels .mat-tab-label-active {
    color: var(--mat-tab-label-active-color);
}

.zc-tab-content {
    padding: 0.5rem;
}

.zc-tab-content .zc-table-header {
    padding: 0.5rem 0;
    justify-content: flex-end;
    background: #f6f7f9;
}

.zc-role-action {
    position: absolute;
    right: 0;
    top: 8px;
}

.zc-role-action .btn-link {
    text-decoration: none;
}

.zc-tab-content zc-data-list-table .row {
    --bs-gutter-x: 0;
}

.mat-ink-bar {
    height: var(--inkbar-height) !important;
    background-color: var(--active-tab-inkbar) !important;
}


/* tabs styles end here  */


/* Accordions styles */

.zc-accordion .ui-accordion-header a .ui-accordion-toggle-icon {
    position: absolute;
    left: auto;
    right: 15px;
    padding-right: 0;
}

.zc-accordion .ui-accordion-header a p-header {
    display: flex;
    align-items: center;
}

.zc-accordion .ui-accordion-header a p-header i {
    padding-right: 4px;
}

.ui-accordion .ui-accordion-header a {
    border-radius: var(--accordion-border-radius);
    background-color: var(--accordion-background) !important;
    border-color: var(--accordion-border-color) !important;
}

.ui-accordion .ui-accordion-header a .zc-accordion-title {
    font-size: var(--accordion-title-font-size);
}

.ui-accordion .ui-accordion-header:not(.ui-state-active):not(.ui-state-disabled):hover a {
    background-color: var(--accordion-hover-background);
    border-color: var(--accordion-hover-background);
}

.ui-accordion .ui-accordion-header:not(.ui-state-disabled).ui-state-active a {
    background-color: var(--accordion-open-active-bg-color) !important;
    border: 1px solid var(--accordion-open-active-bg-color) !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    color: var(--accordion-open-active-title-color) !important;
}

.ui-accordion .ui-accordion-content {
    border-radius: 0 0 var(--accordion-border-radius) var(--accordion-border-radius);
}

.ui-accordion .ui-accordion-header:not(.ui-state-disabled).ui-state-active:hover a {
    border: 1px solid var(--accordion-open-active-hover-bg-color) !important;
    background-color: var(--accordion-open-active-hover-bg-color) !important;
}


/* accordion styles end here  */


/* form styles start here */

::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder,
:-moz-placeholder,
.ui-placeholder {
    color: var(--light-gray) !important;
    font-weight: 400 !important;
}

.btn-group formly-field {
    width: auto !important;
}

.btn-group .row {
    width: 100%;
    margin: 0;
}

.form-group {
    margin-bottom: 1rem;
    position: relative;
}

.zc-fg-no-margin .form-group {
    margin: 0;
}

zc-form {
    padding: 15px;
    border: 1px solid var(--form-border-color);
    background-color: var(--form-bg-color);
    border-radius: 3px;
    display: block;
    font-family: var(--bs-body-font-family);
}

.ui-dropdown {
    min-width: auto !important;
}

.required-star {
    color: var(--required-star-color);
}

.zc-no-bg-form zc-form {
    border: 0px solid var(--zc-no-bg-form-form-border-color);
    padding: 0;
    background: transparent;
}

zc-form>div>h3 {
    color: var(--form-heading-color);
    font-weight: 500;
    font-size: var(--font-size-lg);
    margin: 0 0 5px 0;
}

.captcha-label,
label {
    font-size: var(--font-size-normal);
    display: block;
}

.form-control,
.ui-calendar.ui-calendar-w-btn .ui-inputtext,
.zc-field-select .ui-dropdown,
.ui-calendar input,
.zc-field-select .ui-dropdown,
.zc-chips ul.ui-inputtext,
.ui-autocomplete-multiple-container.ui-inputtext {
    background-color: var(--field-bg-color) !important;
    border-radius: var(--field-border-radius) !important;
    height: var(--field-height) !important;
    width: 100%;
    border-color: var(--field-border-color) !important;
    min-height: unset !important;
    font-size: var(--font-size-normal);
}

input[readonly] {
    background-color: var(--field-readonly-bg-color) !important;
    cursor: not-allowed;
}

.field-radio.readonly {
    pointer-events: none !important;
}

.zc-field-radio .field-radio {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.zc-field-radio .field-radio.zc-vertical-radio {
    display: block;
}

.zc-field-radio .field-radio .radio {
    margin-right: 10px;
}

.zc-radio-btns-wrap .zc-field-radio .field-radio {
    flex-wrap: wrap;
}

.zc-radio-btns-wrap .zc-field-radio .field-radio .radio {
    margin-top: 3px;
}

.field-radio.readonly .custom-control-label::before {
    background-color: #312c2c6e;
    border: 1px solid #e0e0e0;
}

zc-form .select-field.readonly {
    cursor: not-allowed;
}

zc-form .select-field.readonly p-dropdown {
    pointer-events: none;
}

.zc-field-autocomplete zc-autocomplete>div {
    position: relative;
}

.form-group .form-control,
.ui-dropdown.ui-dropdown-clearable .ui-dropdown-label,
zc-form .ui-calendar.ui-calendar-w-btn .ui-inputtext {
    padding-left: var(--field-left-padding) !important;
}

body .ui-inputswitch.ui-inputswitch-checked .ui-inputswitch-slider {
    background-color: var(--input-switch-on-color);
}

body .ui-inputswitch .ui-inputswitch-slider {
    background: var(--input-switch-off-color);
}

.field textarea {
    height: auto !important;
    max-width: 100%;
    min-height: var(--field-height) !important;
}

.captcha-label,
.form-group-label {
    color: var(--field-label-color);
    display: block;
    margin-bottom: 0.1rem;
}

.form-group.view .form-group-label {
    color: var(--field-view-label-color);
}

.form-control::placeholder,
.ui-calendar.ui-calendar-w-btn .ui-inputtext::placeholder,
.ui-autocomplete.ui-autocomplete-multiple .ui-autocomplete-input-token input::placeholder,
.zc-chips ul.ui-inputtext input::placeholder {
    color: var(--field-placeholder-color) !important;
    font-size: var(--font-size-normal);
    font-weight: 100;
}

.ui-calendar {
    width: 100%;
}

.ui-calendar-button.ui-widget.ui-button {
    background: transparent !important;
    color: var(--ui-calendar-button-color) !important;
    border: 0;
    font-size: var(--font-size-xl);
}

.bs-datepicker-container {
    padding: 0 !important;
}

.ui-button-icon-only .ui-button-icon-left {
    right: 5px !important;
    left: unset !important;
}

.ui-button.ui-button-icon-only .ui-button-text {
    padding: 0;
}

.ui-calendar-button.ui-widget.ui-button {
    padding: 0px;
    position: absolute;
    top: 2px;
    right: 3px;
    height: 90%;
}

.ui-calendar input {
    padding-left: 12px;
    font-size: var(--font-size-normal);
}

.ui-chips>ul.ui-inputtext .ui-chips-token {
    margin: 1px !important;
    font-size: var(--font-size-normal) !important;
    background-color: var(--tags-bg-color) !important;
}

.ui-chips>ul.ui-inputtext .ui-chips-token i {
    margin-right: 1.5em;
}

.ui-chips-input-token input {
    width: 100% !important;
    padding-left: 6px !important;
}

.ui-calendar input:focus,
.form-group .inner-addon:focus .form-control,
.form-group .form-control:focus,
.zc-chips ul.ui-inputtext.ui-state-focus,
.ui-state-default.ui-dropdown-open,
.ui-inputtext:enabled:focus:not(.ui-state-error),
.ui-inputtext.ui-state-focus {
    color: var(--input-focus-color);
    background-color: var(--field-bg-color);
    border-color: var(--field-focus-border-color) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 1px var(--field-focus-border-color) !important;
}

.form-group .form-control[readonly]:focus {
    background-color: #e9ecef !important;
    border-color: #c6c9d5 !important;
    box-shadow: none;
}

/* .ui-state-default {
    border: 1px solid var(--ui-state-default-border-color) !important;
} */

.zc-field-autocomplete .ui-autocomplete {
    width: 100%;
}

.ui-calendar.ui-calendar-w-btn .ui-inputtext {
    border: 1px solid var(--field-border-color) !important;
}

.zc-field-autocomplete .autocomplete-icon {
    position: absolute;
    top: 7px;
    right: 6px;
    font-size: var(--font-size-xl);
    color: var(--autocomplete-icon-color);
}

.ui-autocomplete.ui-autocomplete-multiple .ui-autocomplete-multiple-container {
    padding-left: var(--field-left-padding) !important;
    display: flex;
    align-items: center;
}

.zc-chips ul.ui-inputtext {
    height: unset !important;
    min-height: var(--field-height) !important;
    padding: 2px 3px 2px 6px !important;
}

zc-form zc-date .inner-addon,
zc-form zc-date-range .inner-addon,
zc-form zc-date-time .inner-addon,
form zc-date .inner-addon,
form zc-date-time .inner-addon,
form zc-date-range .inner-addon {
    position: relative;
}

zc-form zc-date i,
zc-form zc-date-range i,
zc-form zc-date-time i,
form zc-date i,
form zc-date-time i,
form zc-date-range i {
    position: absolute;
    top: 0;
    right: 0;
    padding: 8px;
    color: var(--zc-date-range-icon-color);
    font-size: var(--font-size-xl);
    cursor: pointer;
}

.ui-dropdown.ui-dropdown-clearable .ui-dropdown-label {
    color: var(--bs-body-color);
}

formly-field .ui-button {
    border: 0;
}

formly-field .ui-button:hover {
    background-color: transparent;
}

.ui-dropdown .ui-dropdown-label {
    background: url(../images/select-drop.png) no-repeat right 0.75rem center;
    font-family: var(--bs-body-font-family);
    font-size: var(--font-size-normal) !important;
    box-shadow: inset var(--ui-inputgroup-input-box-shadow);
    height: var(--ui-dropdown-label-height);
    line-height: var(--ui-dropdown-label-line-height);
    padding: var(--ui-dropdown-label-padding) !important;
}

.ui-dropdown .ui-dropdown-label.ui-placeholder {
    color: var(--light-gray);
    font-weight: 400;
}

.ui-dropdown-panel .ui-dropdown-items .ui-dropdown-item,
.ui-dropdown-panel .ui-dropdown-items .ui-dropdown-item-group {
    font-family: var(--bs-body-font-family);
}


/* checkbox and radio styles  */

.custom-control {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 1.5rem;
    padding-left: 1.5rem
}

.custom-control-inline {
    display: inline-flex;
    margin-right: 1rem
}

.custom-control-input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

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

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

.custom-control-input:not(:disabled):active~.custom-control-label::before {
    color: var(--custom-control-checked-color);
    background-color: var(--custom-control-label-active-bgcolor);
    border-color: var(--custom-control-label-active-before-border-color)
}

.custom-control-input:disabled~.custom-control-label {
    color: var(--custom-control-label-color);
}

.custom-control-input:disabled~.custom-control-label::before {
    background-color: var(--custom-control-label-bgcolor);
}

.custom-control-label {
    position: relative;
    margin-bottom: 0;
    vertical-align: top;
    padding-top: 2px;
    cursor: pointer;
}

.custom-control-label::before {
    position: absolute;
    top: .25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    border-radius: 4px;
    pointer-events: none;
    content: "";
    background-color: var(--custom-control-label-before-color);
    border: 1px solid var(--custom-control-label-border-color);
}

.custom-control-label::after {
    position: absolute;
    top: .25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50% 50%
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::after {
    content: '\e234';
    font-family: 'tssfont';
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--custom-control-checked-after-color);
    font-size: var(--font-size-small);
}

.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before {
    border-color: var(--radio-checked-color);
    background-color: var(--radio-checked-color);
}


/* .custom-checkbox .custom-control-input:indeterminate~.custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e")
} */

.custom-checkbox .custom-control-input:disabled:checked~.custom-control-label::before {
    background-color: var(--custom-checkbox-bgcolor);
}

.custom-checkbox .custom-control-input:disabled:indeterminate~.custom-control-label::before {
    background-color: var(--custom-checkbox-bgcolor);
}

.custom-radio .custom-control-label::before {
    border-radius: 50%
}


/* .custom-radio .custom-control-input:checked~.custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")
} */

.custom-radio .custom-control-input:checked~.custom-control-label::after,
.active .custom-radio .custom-control-input~.custom-control-label::after {
    content: '\e243';
    font-family: 'tssfont';
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: var(--custom-radio-checked-after-color);
}

.custom-radio .custom-control-input:disabled:checked~.custom-control-label::before,
.active .custom-radio .custom-control-input:disabled~.custom-control-label::before {
    background-color: var(--custom-checkbox-bgcolor);
}

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

zc-password .inner-addon .input-group-append .input-group-text {
    height: 100%;
    border-color: var(--form-border-color);
    border-radius: 4px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

zc-password .input-group.inner-addon .form-control {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: 0;
}

.ui-datepicker {
    z-index: 1080 !important;
}


/* profile styles start here */

.zc-field-image .profile.no-img .custom-file {
    background-image: url(../images/default-profile.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 150px;
    width: 150px;
    border-radius: 10px;
    height: 150px;
    display: block;
    margin: 0 auto;
}

.custom-file {
    position: relative;
    z-index: 0;
}

.zc-field-image .profile.no-img .custom-file .custom-file-input {
    min-height: 130px;
    cursor: pointer;
}

.custom-file-input {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0;
    opacity: 0;
}

.zc-field-image .profile.no-img .custom-file .custom-file-label {
    border-radius: 10px;
    display: flex;
    align-items: flex-end;
    line-height: 18px !important;
    background-color: transparent !important;
    height: calc(100% - 20px);
}

.custom-file-label {
    position: absolute;
    padding: 0.375rem 0.75rem;
    line-height: 1.5 !important;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.no-img.profile .profile .image-description {
    display: block !important;
    text-align: center;
}

.image-allowedtype {
    display: block;
}

.profile .profile .custom-file,
.profile .profile .image-description {
    display: none;
}

.zc-field-image .profile img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
    border-radius: 20px;
}

.zc-field-image .profile .profile-actions {
    position: relative;
    top: -50px;
    padding: 10px;
    visibility: hidden;
}

.zc-field-image .profile .profile-actions a {
    background-color: var(--profile-actions-a-bg-color);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--manatee);
    cursor: pointer;
    padding: 10px;
}

.text-danger {
    color: var(--danger) !important;
}

.zc-field-image .profile:hover .profile-actions {
    text-align: center;
    visibility: visible;
}


/* Gallery styles start here */

.zc-field-image .gallery.no-img {
    position: relative;
}

.zc-field-image .gallery.no-img .custom-file {
    width: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    height: 100%;
    border-radius: 0;
    background-color: transparent;
}

.zc-field-image .gallery .custom-file {
    right: 15px;
    text-align: center;
    line-height: 47px;
    cursor: pointer;
    box-shadow: 0 0 6px var(--light-gray);
    float: right;
}

.custom-file {
    padding: 10px;
    border: 1px solid var(--custom-file-border-color);
}

.zc-field-image .gallery.no-img .custom-file .custom-file-input {
    top: -0px;
    width: 100%;
    left: 0;
    height: 100%;
    cursor: pointer;
}

.zc-field-image .gallery .custom-file .input-icon::before,
.zc-field-image .gallery.no-img .custom-file .input-icon::before {
    content: "\e136";
    font-family: tssFont;
}

.zc-field-image .gallery .custom-file .input-icon,
.zc-field-image .gallery.no-img .custom-file .input-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.zc-field-image .gallery .custom-file .custom-file-label {
    display: none;
}

.zc-field-image .gallery .image-description {
    padding: 10px 15px 15px;
}

.zc-field-image .gallery .image-description .max-file-size,
.image-allowedtype {
    display: block;
}

.zc-field-image .gallery .custom-file {
    width: 40px !important;
    height: 40px;
    right: 15px;
    text-align: center;
    line-height: 47px;
    cursor: pointer;
    background-color: var(--custom-file-bgcolor);
    box-shadow: 0 0 6px var(--light-gray);
    float: right;
}

.zc-field-image .gallery .custom-file .custom-file-input {
    top: -10px;
    width: 40px;
    left: -11px;
    height: 39px;
}

.zc-field-image .gallery .ui-galleria .ui-galleria-panel-wrapper .ui-galleria-panel,
.zc-field-image .gallery .ui-galleria {
    width: 100% !important;
}

.zc-field-image .gallery .ui-galleria .ui-galleria-panel-wrapper {
    width: 100% !important;
    max-width: 350px;
    box-shadow: var(--zc-field-image-box-shadow);
}

.ui-galleria .ui-galleria-panel-wrapper {
    margin-top: 8px;
}

.ui-galleria .ui-galleria-panel-wrapper {
    position: relative;
    padding: 0;
    margin: 0;
}

.zc-field-image .gallery .ui-galleria .ui-galleria-panel-wrapper .ui-galleria-panel .ui-panel-images {
    width: 100% !important;
    height: 100%;
}

.zc-field-image .gallery .ui-galleria .ui-galleria-filmstrip-wrapper {
    height: 60px !important;
}

.ui-galleria .ui-galleria-filmstrip-wrapper {
    overflow: hidden;
    margin: 0.25em auto;
    position: relative;
}

.ui-galleria .ui-galleria-frame-content {
    overflow: hidden;
}

.zc-field-image .gallery .ui-galleria .ui-galleria-frame {
    opacity: 1;
}

.zc-field-time .clear-button {
    color: #ff0000;
    background: transparent;
    top: 3px;
}

.zc-field-weekly-time-slot ul li {
    padding: 20px 0 10px 0 !important;
}

.zc-field-weekly-time-slot .ui-dropdown .ui-dropdown-label {
    padding-right: 1.9rem !important;
    width: 100px;
}

.zc-field-weekly-time-slot ul li .time-slot-container {
    width: 335px !important;
}

.zc-field-weekly-time-slot ul li .time-slot-container input {
    margin-top: 3px;
}

.zc-field-weekly-time-slot button {
    border: 1px solid #aaa;
    border-radius: 2px;
    padding: 3px 8px;
    margin: 5px 0;
}

.zc-field-weekly-time-slot li button {
    border-radius: 30px;
    margin: 0px;
}

.zc-field-weekly-time-slot ul li .errorMsg {
    font-size: 11px;
}

.zc-field-weekly-time-slot ul li .time-slot-container .time-container {
    margin-bottom: 5px !important;
}

.zc-field-weekly-time-slot p-dropdown .ui-dropdown {
    margin-bottom: 5px;
}

/* form styles end here  */


/* modal styles start here  */
.modal-open .ng-trigger {
    z-index: 1504 !important;
}

.modal-content {
    background-color: var(--background-color) !important;
    border-radius: var(--border-radius) !important;
}

.modal-header {
    background-color: var(--modal-header-bg-color) !important;
    border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
    padding: var(--padding) !important;
}

.modal-body {
    padding: var(--padding) !important;
}

.modal-body h3 {
    margin-bottom: 15px;
}

.modal .close {
    top: 0;
}

.close {
    background-color: transparent;
    border: none;
    font-size: 32px;
    padding: 0;
    font-weight: 500 !important;
}

.modal-title {
    font-size: var(--modal-title-font-size);
    line-height: var(--modal-title-line-height) !important;
}

.modal zc-form {
    border: none;
    background-color: transparent;
    padding: 0;
}

.zc-form-model .modal-body {
    padding: 0 !important;
}

.zc-form-model .modal-body zc-form>div>h3 {
    padding: var(--padding) !important;
    border-bottom: 1px solid var(--modal-title-border-bottom-color);
    color: var(--modal-title-color);
}

.zc-form-model .modal-body form {
    padding: var(--padding) !important;
}

.zc-modal-right .modal-dialog {
    position: fixed;
    right: 0;
    width: 350px;
    top: 0;
    height: 100%;
    margin: 0;
    transform: translate(0) !important;
    animation-name: sidemodal;
    animation-duration: 0.3s;
}

.zc-modal-right .modal-dialog .modal-content {
    height: 100%;
    border-radius: 0 !important;
    border: none;
}

.zc-modal-left .modal-dialog {
    position: fixed;
    width: 350px;
    top: 0;
    height: 100%;
    margin: 0;
    left: 0;
    transition: .3s ease-out !important;
    transform: translate(0) !important;
    animation-name: sidemodal;
    animation-duration: 0.3s;
}

.zc-modal-left .modal-dialog .modal-content {
    height: 100%;
    border-radius: 0 !important;
    border: none;
}

.zc-modal-top .modal-dialog.modal-dialog-centered {
    align-items: flex-start !important;
}

.zc-modal-bottom .modal-dialog.modal-dialog-centered {
    align-items: flex-end !important;
}

@keyframes sidemodal {
    0% {
        width: 0;
    }

    100% {
        width: 350px;
    }
}


/* modal styles end here  */


/* masters page styles start here  */

.default-masters .ui-table-wrapper {
    background-color: transparent;
}

.default-masters .ui-table .ui-table-tbody {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% + 10px);
    margin-left: -5px;
}

.default-masters .ui-table .ui-table-tbody .card {
    width: calc(33.33% - 10px);
    margin: 0 5px 10px;
    padding: 10px;
    background-color: var(--default-masters-card-bg-color);
}

.default-masters .ui-table .lessons-list {
    background-color: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    margin: 0 !important;
}

.default-masters .ui-table .lessons-list .lesson-info {
    font-size: var(--font-size-normal);
}


/* masters page styles end here  */


/* app selection styles start here  */

.appManagment {
    position: absolute;
    right: 0;
    top: -18px;
    z-index: 9;
}

#wdAppList .ui-table-wrapper {
    background-color: transparent;
}

#wdAppList .ui-table table .ui-table-tbody {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#wdAppList .ui-table table .ui-table-tbody .card {
    width: calc(var(--app-select-card-width) - 20px);
    border: 1px solid var(--app-select-card-border-color);
    padding: var(--app-select-card-padding);
    margin: var(--app-select-card-margin);
    cursor: pointer;
    box-shadow: var(--app-select-card-box-shadow);
    transition: var(--app-select-card-transition);
    background: var(--app-select-card-background);
    text-align: var(--app-select-card-text-align);
    border-radius: var(--app-select-card-border-radius);
}

#wdAppList .ui-table table .ui-table-tbody .card:hover {
    box-shadow: var(--app-select-card-hover-box-shadow);
}

.mngdescription span {
    font-size: var(--app-select-card-icon-font-size);
    color: var(--app-select-card-icon-color);
}

.mngdescription p {
    margin: 0;
    font-size: var(--app-select-card-title-font-size);
    color: var(--app-select-card-title-color);
}


/* zc horizontal stepform styles start here  */

.zc-horizontal-stepform zc-headings .zc-custom-heading {
    color: var(--stepform-title-color) !important;
    font-weight: 500;
    font-size: var(--font-22);
    margin: 0 0 10px;
}

.zc-horizontal-stepform .mat-stepper-horizontal {
    border-radius: .25rem;
    box-shadow: var(--mat-stepper-horizontal-box-shadow);
}

.zc-horizontal-stepform .zc-stepform-title {
    margin: 0 0 20px;
    color: var(--stepform-title-color) !important;
    font-weight: 500;
    font-size: var(--font-size-xl);
}

.zc-horizontal-stepform .zc-stepform-heading {
    margin: 2px 0 8px;
}

.zc-horizontal-stepform .mat-horizontal-stepper-header-container {
    justify-content: center;
    padding: 15px 0;
    border-bottom: 1px solid var(--mat-horizontal-stepper-header-border-color);
}

.zc-horizontal-stepform .mat-horizontal-content-container {
    padding: 10px;
}

.zc-horizontal-stepform .mat-horizontal-content-container h4 {
    margin: 5px 0 10px;
}

.zc-horizontal-stepform .mat-step-icon-state-number {
    display: none;
}

.zc-horizontal-stepform .zc-stepper-header .zc-step-header-title {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}

.zc-horizontal-stepform .mat-step-label .tab-icon {
    display: flex;
    margin-right: 6px;
}

.zc-horizontal-stepform .mat-stepper-horizontal-line {
    display: none;
}

.zc-horizontal-stepform .mat-horizontal-stepper-header {
    height: auto;
    font-family: var(--bs-body-font-family);
    padding: 0;
}

.zc-horizontal-stepform .mat-horizontal-stepper-header .zc-stepper-header {
    border-right: 1px solid var(--horizontal-stepform-border-right-color);
}

.zc-horizontal-stepform .mat-horizontal-stepper-header .zc-step-header-title {
    padding: var(--step-title-padding);
    background-color: var(--step-title-bgcolor);
    position: relative;
    color: var(--step-title-color);
}

.zc-horizontal-stepform .mat-horizontal-stepper-header .zc-stepper-header:hover,
.zc-horizontal-stepform .mat-horizontal-stepper-header .mat-step-label:hover {
    background-color: var(--step-hover-bgcolor);
}

.zc-horizontal-stepform .mat-horizontal-stepper-header .zc-stepper-header.step-active .zc-step-header-title {
    background-color: var(--step-active-bgcolor);
    font-family: var(--bs-body-font-family);
    color: var(--step-color);
    font-weight: normal;
}

.zc-horizontal-stepform .mat-horizontal-stepper-header .zc-stepper-header.step-active .zc-step-header-title:hover,
.zc-horizontal-stepform .mat-horizontal-stepper-header .zc-stepper-header.step-success {
    background-color: var(--step-active-bgcolor) !important;
}

.zc-horizontal-stepform .mat-horizontal-stepper-header .zc-stepper-header.step-active .zc-step-header-title:after {
    border-bottom-color: var(--step-active-bgcolor) !important;
}

.zc-horizontal-stepform .mat-horizontal-stepper-header .zc-stepper-header.step-active.step-error .zc-step-header-title,
.zc-horizontal-stepform .mat-horizontal-stepper-header .zc-stepper-header.step-error .zc-step-header-title:hover {
    background-color: var(--step-error-bgcolor) !important;
    color: var(--step-color);
}

.zc-horizontal-stepform .mat-horizontal-stepper-header .zc-stepper-header.step-error .zc-step-header-title:after {
    border-bottom-color: var(--step-error-bgcolor) !important;
}

.zc-horizontal-stepform .mat-horizontal-stepper-header .zc-stepper-header.step-success .zc-step-header-title,
.zc-horizontal-stepform .mat-horizontal-stepper-header .zc-stepper-header.step-success .zc-step-header-title:hover {
    background-color: var(--step-success-bgcolor) !important;
    color: var(--step-color);
}

.zc-horizontal-stepform .mat-horizontal-stepper-header .zc-stepper-header.step-success .zc-step-header-title:after {
    border-bottom-color: var(--step-success-bgcolor) !important;
}

.zc-horizontal-stepform .mat-horizontal-stepper-header:last-child .zc-stepper-header {
    border-right: none;
}

.zc-horizontal-stepform .mat-horizontal-stepper-header .zc-step-header-title:hover {
    background-color: #dde0e7;
}

.zc-horizontal-stepform .mat-horizontal-stepper-header:first-child,
.zc-horizontal-stepform .mat-horizontal-stepper-header:first-child .zc-stepper-header {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.zc-horizontal-stepform .mat-horizontal-stepper-header:last-child,
.zc-horizontal-stepform .mat-horizontal-stepper-header:last-child .zc-stepper-header {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.zc-horizontal-stepform .mat-horizontal-stepper-header:last-child .zc-stepper-header .zc-step-header-title:after {
    content: unset;
}

.zc-horizontal-stepform .step-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
}

.zc-horizontal-stepform .step-actions button:first-child {
    margin-right: auto !important;
}

.zc-horizontal-stepform .step-actions button:last-child,
.zc-horizontal-stepform .step-actions button:nth-child(2) {
    /* margin-left: auto !important; */
    margin-right: unset !important;
    /* padding: 8px 24px !important;
    font-size: .975rem; */
}

.mat-horizontal-content-container {
    font-family: var(--bs-body-font-family);
}


/* .mat-horizontal-content-container .mat-horizontal-stepper-content:last-child .step-actions button:first-child,
.mat-horizontal-content-container .mat-horizontal-stepper-content:last-child .step-actions button {
    margin-right: auto !important;
    margin-left: unset !important;
} */


/* .zc-tabtable-absolute-btn {
    position: absolute;
    right: 0;
    justify-content: flex-end;
    display: flex;
    z-index: 9;
} */


/* .zc-tabtable-absolute-btn .btn {
    font-size: .975rem;
    padding: 8px 24px !important;
} */

.zc-horizontal-stepform zc-step-form .mat-horizontal-content-container zc-form {
    padding: 0 !important;
    border: none;
}

body .ui-widget {
    font-family: var(--ui-widget-font-family);
}


/* zc horizontal stepform styles end here  */
/* zc vertical stepform styles start here */
.zc-vertical-stepform .mat-stepper-horizontal {
    display: inline-flex;
    width: var(--stepper-width);
}

.zc-vertical-stepform .mat-stepper-horizontal .mat-horizontal-stepper-header-container {
    width: var(--stepper-header-width);
    display: block;
    padding: var(--stepper-header-container-padding);
    background: var(--stepper-header-bg);
}

.zc-vertical-stepform .mat-stepper-horizontal .mat-horizontal-content-container {
    width: var(--content-width);
}

.zc-vertical-stepform .mat-step-header .mat-step-icon.mat-step-icon-selected {
    background-color: var(--background-selected-icon);
    opacity: var(--opacity-icon-selected);
}

.zc-vertical-stepform .mat-step-header .mat-step-icon {
    background-color: var(--background-icon);
    color: var(--color-icon);
    opacity: var(--opacity-icon);
}

.zc-vertical-stepform .mat-step-header .mat-step-label .tab-title {
    color: var(--tab-title-color);
    font-weight: var(--stepper-tab-title-font-weight);
}

.zc-vertical-stepform .mat-step-header .mat-step-label.mat-step-label-selected .tab-title {
    color: var(--tab-title-color-selected);
}

.zc-vertical-stepform .mat-horizontal-stepper-content zc-form {
    border: var(--border-none);
    padding: 15px 0;
}

.zc-vertical-stepform .mat-step-header {
    height: inherit;
    padding: var(--stepper-header-padding);
}

.zc-vertical-stepform .mat-stepper-horizontal-line {
    min-width: inherit;
    margin: 0;
    border: none;
}

.zc-vertical-stepform .step-actions.btn-align {
    display: flex;
    justify-content: space-between;
}

.zc-vertical-stepform .step-actions {
    display: flex;
    justify-content: end;
}

.zc-vertical-stepform .zc-stepper-header.step-success {
    background-color: inherit;
}

/* zc vertical stepform styles end here */

/* zc vertical radio button styles start here */
.zc-vertical-radios .zc-field-radio .field-radio {
    display: block;
}

/* zc vertical radio button styles end here */
.btn .info-icon {
    padding-right: 5px;
    top: 2px;
    position: relative;
}

table .ui-chkbox .ui-chkbox-box {
    width: 1.125em !important;
    height: 1.125em !important;
}

.table-header h2 {
    font-size: var(--font-size-xl);
    margin: 0;
}

.cdk-overlay-container.timepopup {
    z-index: 1060;
}

.th-filter-dropdown.show {
    top: 25px !important;
    position: absolute !important;
    left: 0 !important;
    width: 200px;
    box-shadow: 0px 0px 25px #c5c5c5;
    border: none;
    background-color: #fff;
    transform: translate(-48%, -19%);
    padding: 0;
}

.th-filter-dropdown.show li {
    border-bottom: 1px solid #eaedf2;
    position: relative;
}

.th-filter-dropdown.show .dropdown-item.ui-sortable-column {
    color: #424242;
    padding: 10px 10px 10px 25px;
}

.th-filter-dropdown.show .dropdown-item.ui-sortable-column p-sorticon {
    position: absolute;
    left: 0;
    top: 5px;
}

.th-filter-dropdown.show .ui-dropdown {
    border: 0 !important;
}

.th-filter-dropdown.show .ui-dropdown .ui-dropdown-label {
    padding: 0.375rem 0.75rem !important;
}

/*zc nav styles start*/
.zc-nav-tabs.zc-tabs .mat-tab-label {
    margin-bottom: -1px;
}

.zc-nav-tabs.mat-tab-labels {
    border-bottom: 1px solid #e2e3e3;
}

.zc-nav-tabs.zc-tabs .mat-tab-label-active {
    border: 1px solid #e2e3e3;
    border-bottom: none;
    background-color: #fff;
    opacity: 1;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.zc-nav-tabs .mat-tab-header {
    border-bottom: none;
}

.zc-nav-tabs .mat-tab-body-content {
    border: 1px solid #e2e3e3;
    /* border-top: 0px solid #e2e3e3; */
    background-color: #fff;
}

.zc-nav-tabs.zc-tabs .mat-tab-group.mat-primary .mat-ink-bar,
.zc-nav-tabs.zc-tabs .mat-tab-nav-bar.mat-primary .mat-ink-bar {
    background-color: transparent;
}

.zc-nav-pills.zc-tabs .mat-tab-label-active {
    opacity: 1;
    background: #5cb5fe;
    border-radius: 4px;
    color: #fff;
}

.zc-nav-pills .mat-ink-bar {
    display: none;
}

.zc-nav-pills .mat-tab-header {
    border-bottom: none;
    margin-bottom: 10px;
}

.zc-vertical-tabs {
    background-color: #fff;
}

.zc-vertical-tabs .mat-tab-labels {
    flex-wrap: wrap;
    width: 100%;
}

.zc-vertical-tabs .mat-tab-label {
    min-width: auto;
    width: 100%;
    align-items: initial;
    justify-content: flex-start;
    padding: .85rem 1.5rem;
    border-color: rgba(24, 28, 33, .03) !important;
    border-bottom: 1px solid;
}

.zc-vertical-tabs .mat-ink-bar {
    display: none;
}

.zc-vertical-tabs .mat-tab-group {
    flex-direction: row;
}

.zc-vertical-tabs .mat-tab-header {
    width: 25%;
    border: 1px solid #e8e8e9;
}

.zc-vertical-tabs .mat-tab-body-wrapper {
    width: 75%;
    border: 1px solid #e8e8e9;
    border-left: none;
}

.zc-vertical-tabs .mat-tab-label-active {
    color: #000 !important;
    opacity: 1;
}

.zc-vertical-tabs .zc-tab-content zc-form {
    padding: 15px !important;
    border: none !important;
}

.zc-widget-data-list .card-item zc-button-dropdowns {
    position: absolute;
    right: 10px;

}

.zc-widget-data-list .card-item zc-button-dropdowns button {
    padding: 0 !important;
    border: none;

}

.zc-widget-data-list .card-item zc-button-dropdowns button .dropdown-toggle {
    color: #666;
}

.zc-widget-data-list .card-item zc-button-dropdowns .dropdown-menu.show {
    top: 0px !important;
}

.zc-widget-data-list .card-item zc-button-dropdowns button.dropdown-item {
    padding: .25rem 0.65rem !important;
    font-size: 14px;
    display: flex;
    align-items: center;
}

zc-actions .zc-group-icon {
    font-size: 20px;
    margin-left: 5px;
}

.card-no-records-tr {
    width: 100%;
}

.card-no-records-tr td {
    width: 100%;
    display: block;
    text-align: center !important;
}

/*zc nav styles end*/
.zc-video-player .btn {
    margin-bottom: 5px;
}

.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width:1400px) {

    /* table styles start here  */
    .ui-table table .ui-table-thead tr th,
    .ui-table table tbody.ui-table-tbody tr td {
        font-size: var(--font-13) !important;
    }

    /* table styles end here  */
}

@media (max-width:1023px) {

    /********* side-menu styles start here **********/
    /* .hide-menu .main-content,
    .show-menu .main-content {
        margin-left: 0;
    } */
    .hide-menu ul.zc-menu li.nav-item a.nav-link .nav-link-text,
    .show-menu ul.zc-menu li.nav-item a.nav-link .nav-link-text {
        display: block;
        padding-right: 0;
        margin-left: 26px;
    }

    .show-menu ul.zc-menu li.nav-item:hover a.nav-link .nav-link-text {
        min-width: unset;
        font-weight: 400;
        display: block;
        width: auto;
        overflow: hidden;
        height: 24px;
        margin-left: 26px;
        padding: 0;
        /* color: #346cb0; */
        background-color: unset;
        line-height: 1.625rem;
        visibility: visible;
        opacity: 1;
        box-shadow: none;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .show-menu .side-menu {
        width: 200px;
        transform: translateX(0);
    }

    .hide-menu .side-menu {
        width: 0;
        left: -50px;
    }

    .show-menu ul.zc-menu li.nav-item.nav-dropdown.open:hover .nav-dropdown-items {
        opacity: 1;
        position: relative;
        left: 0;
        top: 0;
    }

    .show-menu .side-menu div .zc-menu .nav-item:hover .nav-dropdown-items {
        position: relative;
        max-height: 0;
    }

    .show-menu ul.zc-menu li.nav-item:hover a.nav-link {
        width: 200px;
    }

    .show-menu ul.zc-menu li.nav-item:hover a.nav-link.nav-dropdown-toggle {
        width: auto;
    }

    .show-menu ul.zc-menu li.nav-item.nav-dropdown.open>.nav-dropdown-items {
        opacity: 1;
        left: 0;
        position: relative;
        visibility: visible;
        max-height: initial;
        background-color: var(--dropdown-hover-nav-link-after-bg-color);
    }

    .show-menu .side-menu ul.zc-menu .nav-dropdown-items li.nav-item:hover>a.nav-link .nav-link-text {
        padding-left: 28px !important;
    }

    .side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item:last-child {
        border-bottom: 0 solid var(--hide-side-menu-nav-item-last-child-border-color);
    }

    .show-menu ul.zc-menu li.nav-item.nav-dropdown:hover a.nav-link .nav-link-text {
        padding-left: 0;
        border: 1px solid var(--show-side-menu-nav-link-after-border-color);
        border: 0;
        margin-left: 26px;
    }

    .hide-menu .side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link i,
    .side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link i,
    .side-menu div .zc-menu .nav-item .nav-link i {
        width: 50px;
        padding-left: 0;
    }

    .side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link span {
        padding-left: 26px;
        font-size: var(--font-size-normal);
    }

    .show-menu .side-menu ul.zc-menu .nav-dropdown-items li.nav-item>a.nav-link .nav-link-text {
        padding-left: 28px !important;
    }

    .hide-menu .side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link span {
        padding-left: 26px;
    }

    .show-menu .side-menu div .zc-menu .nav-item>.nav-link>i::after,
    .show-menu .side-menu ul.zc-menu>li.nav-item:hover a.nav-link .nav-link-text::after,
    .show-menu .side-menu ul.zc-menu>li.nav-item:hover a.nav-link .nav-link-text::before,
    .show-menu ul.zc-menu li.nav-item.nav-dropdown:hover>a.nav-link::after {
        content: unset;
    }

    .show-menu .side-menu div .zc-menu .nav-item:hover .nav-dropdown-items {
        overflow: hidden;
        visibility: visible;
        border: 0;
    }

    .show-menu ul.zc-menu li.nav-item.nav-dropdown.open:hover .nav-dropdown-items {
        overflow: hidden;
        box-shadow: none;
        visibility: visible;
        border: 0;
    }

    .show-menu ul.zc-menu li.nav-item:hover a.nav-link.active .nav-link-text {
        font-weight: var(--sidemenu-nav-dropdown-items-nav-link-active-font-weight);
    }

    .show-menu ul.zc-menu li.nav-item.nav-dropdown:hover>a.nav-link .nav-link-text {
        font-size: var(--font-size-normal);
    }

    .hide-menu .side-menu ul.zc-menu li.nav-item.open .dp-arrow,
    .show-menu .side-menu ul.zc-menu li.nav-item.open .dp-arrow {
        transform: rotate(0deg);
        display: flex;
    }

    .show-menu ul.zc-menu li.nav-item .dp-arrow {
        right: 10px;
        display: block;
    }

    .show-menu ul.zc-menu li.nav-item>.nav-dropdown-items {
        transition: max-height .5s ease;
    }

    .show-menu ul.zc-menu li.nav-item.open>.nav-dropdown-items {
        display: block;
    }

    .show-menu .zc-menu-advanced .side-menu ul.zc-menu .nav-dropdown-items li.nav-item:hover>.nav-dropdown-items,
    .show-menu .side-menu ul.zc-menu .nav-dropdown-items li.nav-item:hover>.nav-dropdown-items,
    .show-menu .side-menu ul.zc-menu .nav-dropdown-items li.nav-item.nav-dropdown.open:hover>.nav-dropdown-items {
        position: unset;
    }

    .show-menu .side-menu div .zc-menu .nav-item:hover>a.nav-link,
    .show-menu ul.zc-menu li.nav-dropdown:hover>a.nav-link.nav-dropdown-toggle,
    .show-menu ul.zc-menu li.nav-dropdown:hover>a.nav-link.nav-dropdown-toggle:hover {
        background-color: var(--showmenu-sidemenu-navitem-hover-bgcolor);
        border: 0;
    }

    .show-menu ul.zc-menu {
        overflow-y: auto;
    }

    .side-menu div .zc-menu .nav-item.nav-dropdown:hover {
        overflow: unset;
    }

    ul.zc-menu li.nav-item.nav-dropdown.open .nav-dropdown-items::-webkit-scrollbar {
        width: 0;
    }

    .side-menu div .zc-menu .nav-item:hover {
        overflow: unset;
    }

    .side-menu div .zc-menu::-webkit-scrollbar-thumb {
        outline: 0 solid #708090;
    }

    .show-menu .side-menu ul.zc-menu li.nav-item:hover a.nav-link.nav-dropdown-toggle {
        width: auto;
    }

    .show-menu .side-menu ul.zc-menu li.nav-item:hover a.nav-link .nav-link-text {
        width: 100%;
        background-color: var(--showmenu-sidemenu-nav-link-text-color);
        min-width: unset;
        margin-left: 26px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        /* color: var(--active-menu-icon-bgcolor); */
    }

    .show-menu .side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link:hover span,
    .show-menu .side-menu div .zc-menu .nav-item.activatedNode.open a.nav-dropdown-toggle,
    .show-menu .side-menu div .zc-menu .nav-item.activatedNode.open:hover a.nav-dropdown-toggle i,
    .show-menu .side-menu div .zc-menu .nav-item:hover>.nav-link.active:hover i,
    .show-menu .side-menu div .zc-menu .nav-item:hover>.nav-link:hover i,
    .show-menu .side-menu div .zc-menu>.nav-item>.nav-link.active i,
    .show-menu .side-menu div .zc-menu>.nav-item>.nav-link.active:hover i {
        color: var(--active-menu-icon-bgcolor);
    }

    .show-menu .side-menu div .zc-menu .nav-item:hover .nav-dropdown-items,
    .show-menu .side-menu ul.zc-menu li.nav-item.nav-dropdown.open:hover .nav-dropdown-items {
        left: 0;
        top: 0;
        border-top: 0;
        box-shadow: none;
        padding: 0 !important;
        background-color: var(--showmenu-sidemenu-nav-dropdown-open-bgcolor);
        border-radius: 0;
    }

    .show-menu .side-menu ul.zc-menu li.nav-item:hover a.nav-link.nav-dropdown-toggle>.nav-link-text {
        padding: 0;
        color: var(--showmenu-sidemenu-nav-dropdown-toggle-navlink-text-color);
    }

    .side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link span {
        color: var(--sidemenu-nav-dropdown-items-span-color);
    }

    .hide-menu .side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link,
    .show-menu .side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link {
        border-radius: 0;
        height: 34px;
        margin: 0;
        width: 100%;
    }

    .side-menu div .zc-menu .nav-item .nav-link i {
        line-height: 38px;
    }

    /* .show-menu .side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link.active,
    .show-menu .side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link.active:hover,
    .show-menu .side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link:hover {
        background-color: var();
    } */
    .show-menu ul.zc-menu li.nav-item.nav-dropdown a.nav-link .icon-angle-down-1,
    .show-menu .side-menu div .zc-menu .nav-item:hover .nav-dropdown-items .nav-item .nav-link .icon-angle-down-1 {
        display: block;
        width: auto;
        left: auto;
        right: 5px;
        font-size: var(--font-size-normal);
    }

    .side-menu ul.zc-menu li.nav-item.nav-dropdown .nav-dropdown-items .nav-item {
        padding-left: 10px !important;
    }

    .show-menu .side-menu ul.zc-menu .nav-dropdown-items li.nav-item:hover>a.nav-link.nav-dropdown-toggle {
        width: 100%;
    }

    .show-menu ul.zc-menu li.nav-item:hover>a.nav-link,
    .show-menu ul.zc-menu li.nav-item.nav-dropdown.open:hover>.nav-dropdown-items,
    .show-menu ul.zc-menu li.nav-item.nav-dropdown:hover>.nav-dropdown-items {
        min-width: 100%;
    }

    .show-menu .side-menu div .zc-menu .nav-item.nav-dropdown.open .nav-dropdown-toggle .nav-link-text,
    .show-menu .side-menu div .zc-menu .nav-item.nav-dropdown.open .nav-link {
        color: var(--hidemenu-menu-nav-dropdown-open-text-color);
    }

    /********** side-menu styles end here **********/
    /********** table styles start here **********/
    .ui-table-wrapper {
        overflow: auto;
    }

    /********** table styles end here **********/
    .breadcrumb-widget .zc-breadcrumb-left {
        padding-left: 0;
    }
}

@media (max-width:991px) {
    .default-masters .ui-table .ui-table-tbody .card {
        width: calc(50% - 10px);
    }
}

@media(max-width:768px) {
    .zc-header-left .sidebar-toggle {
        padding: 0px;
    }

    .zc-notifications .dropdown-toggle {
        padding: 5px;
    }

    .zc-notifications .dropdown-menu.show {
        transform: translate(-218px, 15px) !important;
    }
}


/* @media only screen and (max-width:767.5px) { */

@media (width<768px) {
    .zc-login .zc-login-left {
        display: none;
    }

    .appManagment {
        padding: 0 !important;
    }

    .appManagment .mngContent {
        flex: 0 0 50% !important;
    }

    .main-content {
        margin-left: 0;
    }

    /********** side-menu styles start here **********/
    .show-menu .menu-overlay {
        height: 100%;
        width: 100%;
        z-index: 999;
        position: fixed;
        top: 0;
        left: 0;
        background: var(--show-menu-menu-overlay-bgcolor);
        overflow-y: auto;
        overflow-x: hidden;
        text-align: center;
        opacity: 1;
        transition: opacity .2s ease-in-out;
    }

    .show-menu .menu-overlay.new-header-menu {
        z-index: 9998;
    }

    .show-menu .side-menu {
        top: 0;
        width: 265px;
        height: 100%;
        left: 0;
    }

    .show-menu ul.zc-menu li.nav-item:hover a.nav-link.nav-dropdown-toggle {
        width: 100%;
    }

    .side-menu {
        top: 0;
        z-index: 999;
        width: 0;
        left: -50px;
    }

    .side-menu .zc-profile-dp-link {
        border: 0;
        background-color: var(--zc-profile-dp-link-bg-color);
        padding: 0;
        z-index: 99;
        overflow: hidden;
        cursor: pointer;
        display: flex;
        align-items: center;
        position: relative;
    }

    .hide-menu .side-menu .zc-profile-dp-link,
    .show-menu .side-menu .zc-profile-dp-link {
        padding: 1rem;
    }

    .side-menu .welcome-widget {
        display: block;
        margin: 0;
        padding: 0;
        font-family: var(--bs-body-font-family);
        text-align: left;
        font-size: var(--font-size-normal);
    }

    .side-menu .welcome-user-pic {
        height: 50px;
        width: 50px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 5px;
    }

    .welcome-user-pic img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
    }

    .side-menu .welcome-widget .welcome-user {
        max-width: 160px;
        /* color: var(--side-menu-nav-link-text-color); */
        font-weight: 600;
        font-size: var(--font-size-medium-plus);
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
        overflow: hidden;
    }

    .side-menu .welcome-widget .zc-user-info {
        /* color: var(--side-menu-nav-link-text-color); */
        padding: 0;
        opacity: .7;
    }

    .side-menu .welcome-widget .zc-user-info label {
        font-size: var(--font-size-normal);
    }

    .side-menu .zc-profile-dp {
        height: auto;
        box-shadow: var(--zc-profile-dp-box-shadow);
    }

    .side-menu .zc-profile-dp .dp-toggle-icon {
        transition: all .3s ease-in-out;
        margin-left: auto;
        font-size: var(--font-size-xl);
        color: var(--zc-profile-dp-dp-toggle-icon-color);
    }

    .side-menu .zc-profile-dp .zc-profile-dp-link::after {
        content: unset;
    }

    .side-menu .zc-profile-dp.show .dp-toggle-icon {
        transform: rotate(180deg);
    }

    .side-menu .zc-profile-dp .zc-profile-dp-menu-list {
        margin: 0 0 10px;
    }

    .side-menu .zc-profile-dp .dropdown-menu {
        width: 100%;
        z-index: 1;
        transition: all .3s ease-in-out;
        border: 0;
        padding: 0;
    }

    .side-menu .zc-profile-dp.show .dropdown-menu {
        top: -3px;
        box-shadow: var(--zc-profile-dp-box-shadow);
        border-radius: 0;
    }

    .side-menu .zc-profile-dp .dropdown-menu .zc-profile-dp-menu-list li .dropdown-item {
        padding: .62rem 1rem;
        color: #191927;
        font-size: var(--font-size-normal);
        align-items: center;
        display: flex;
        cursor: pointer;
    }

    .side-menu .zc-profile-dp .dropdown-menu .zc-profile-dp-menu-list li .dropdown-item span {
        color: var(--cade-blue);
        font-size: var(--font-size-lg-plus);
        margin-right: 12px;
    }

    .side-menu .zc-profile-dp .dropdown-menu .zc-profile-dp-menu-list li .dropdown-item:hover,
    .side-menu .zc-profile-dp .dropdown-menu .zc-profile-dp-menu-list li .dropdown-item:hover span {
        color: var(--dropdown-hover-nav-link-after-bg-color);
        background-color: var(--profile-dp-menu-item-hover-bgcolor);
    }

    .side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link span,
    .side-menu div .zc-menu .nav-item .nav-link .nav-link-text {
        font-size: var(--font-size-normal);
    }

    .hide-menu .side-menu div .zc-menu .nav-item .nav-link,
    .show-menu .side-menu div .zc-menu .nav-item .nav-link {
        height: 42px;
    }

    .side-menu div .zc-menu .nav-item .nav-link i {
        line-height: 38px;
        width: 40px;
    }

    .side-menu div .zc-menu .nav-item .nav-link .nav-link-text {
        margin-left: 36px;
    }

    .show-menu ul.zc-menu li.nav-item.nav-dropdown:hover a.nav-link .nav-link-text,
    .show-menu ul.zc-menu li.nav-item:hover a.nav-link .nav-link-text {
        margin-left: 26px;
    }

    .show-menu ul.zc-menu li.nav-item .dp-arrow {
        transform: rotate(-90deg);
    }

    .show-menu .side-menu ul.zc-menu li.nav-item.open .dp-arrow {
        transform: rotate(0deg);
    }

    .show-menu ul.zc-menu li.nav-item:hover a.nav-link {
        width: unset;
    }

    .hide-menu .side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link i,
    .side-menu div .zc-menu .nav-item .nav-dropdown-items .nav-item .nav-link i {
        width: 42px;
    }

    /********** side-menu styles end here **********/
    /********* table styles start here  ***********/
    .zc-table-header.top .table-header-right .filter-position-top .filter-footer .filter-clear-btn span {
        display: none;
    }

    .table-header-right .group-actions .zc-form-add-btn.for-group .btn span {
        line-height: 17px;
    }

    .zc-table-header .zc-filter-text .ui-inputgroup>input {
        height: 32px;
    }

    .filter-position-top .filter-footer .filter-clear-btn {
        padding: 5px 12px !important;
        font-size: var(--font-13);
    }

    .zc-filter-date .filter-searchclear,
    .zc-filter-number .filter-searchclear,
    .zc-filter-select .filter-searchclear,
    .zc-filter-text .filter-searchclear {
        right: 10px;
        bottom: 8px;
    }

    .zc-table-header .table-header-right .group-actions .zc-form-add-btn.for-group {
        flex-wrap: wrap;
    }

    .zc-table-header .table-header-right .group-actions .zc-form-add-btn.for-group .btn {
        margin-top: 2px;
        margin-bottom: 2px;
    }

    /********* table styles end here  ***********/
    .zc-responsive-stepform .mat-stepper-horizontal {
        display: inline-flex;
        width: var(--stepper-width);
    }

    .zc-responsive-stepform .mat-stepper-horizontal .mat-horizontal-stepper-header-container {
        width: var(--stepper-header-width);
        display: block;
        border-bottom: none;
        padding: 0;
        /* padding: var(--stepper-header-container-padding);
        background: var(--stepper-header-bg); */
    }

    .zc-horizontal-stepform.zc-responsive-stepform .mat-stepper-horizontal {
        border-radius: 0rem;
        box-shadow: none;
    }

    .zc-horizontal-stepform.zc-responsive-stepform .mat-step-header .mat-step-label {
        width: 100%;
    }

    .zc-horizontal-stepform.zc-responsive-stepform .zc-stepper-header .zc-step-header-title {
        justify-content: flex-end;
    }

    .zc-responsive-stepform .mat-stepper-horizontal .mat-horizontal-content-container {
        width: var(--content-width);
    }

    .zc-horizontal-stepform.zc-responsive-stepform .mat-horizontal-stepper-header:first-child,
    .zc-horizontal-stepform.zc-responsive-stepform .mat-horizontal-stepper-header:first-child .zc-stepper-header {
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }

    .zc-horizontal-stepform.zc-responsive-stepform .mat-horizontal-stepper-header:last-child,
    .zc-horizontal-stepform.zc-responsive-stepform .mat-horizontal-stepper-header:last-child .zc-stepper-header {
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    /* .zc-vertical-stepform .mat-step-header .mat-step-icon.mat-step-icon-selected {
        background-color: var(--background-selected-icon);
        opacity: var(--opacity-icon-selected);
    } */

    /* .zc-vertical-stepform .mat-step-header .mat-step-icon {
        background-color: var(--background-icon);
        color: var(--color-icon);
        opacity: var(--opacity-icon);
    } */

    /* .zc-vertical-stepform .mat-step-header .mat-step-label .tab-title {
        color: var(--tab-title-color);
        font-weight: var(--stepper-tab-title-font-weight);
    } */

    /* .zc-vertical-stepform .mat-step-header .mat-step-label.mat-step-label-selected .tab-title {
        color: var(--tab-title-color-selected);
    } */

    /* .zc-vertical-stepform .mat-horizontal-stepper-content zc-form {
        border: var(--border-none);
        padding: 15px 0;
    } */

    .zc-responsive-stepform .mat-step-header {
        height: inherit;
        /* padding: var(--stepper-header-padding); */
    }

    /* .zc-vertical-stepform .mat-stepper-horizontal-line {
        min-width: inherit;
        margin: 0;
        border: none;
    } */

    .zc-responsive-stepform .step-actions.btn-align {
        display: flex;
        justify-content: space-between;
    }

    .zc-responsive-stepform .step-actions {
        display: flex;
        justify-content: end;
    }

    .zc-vertical-stepform .mat-stepper-horizontal,
    .zc-responsive-stepform .mat-stepper-horizontal {
        display: block;
    }

    .zc-vertical-tabs .mat-tab-header,
    .zc-vertical-tabs .mat-tab-body-wrapper {
        width: 100%;
    }

    .zc-vertical-tabs .mat-tab-group {
        flex-direction: column;
    }

    zc-data-list-card .table-header-right,
    zc-data-list-card .zc-table-header.top .table-header-right .filter-position-top .zc-data-list-filters .ui-fluid-filters-div {
        width: 100% !important;
    }

    zc-data-list-card .filter-position-top .zc-data-list-filters {
        margin-top: 8px !important;
    }

    zc-actions .zc-group-icon {
        position: absolute;
        right: 0px;
        top: 0px;
    }
}

@media (max-width:640px) {
    .ui-table-responsive .ui-table-tbody>tr {
        position: relative;
    }


    /* .zc-widget-data-list .ui-table.ui-table-responsive .ui-table-tbody>tr>td:last-child {
        padding: 0 !important;
        border: none !important;
    } */
    .zc-widget-data-list .ui-table-responsive .ui-table-tbody tr td {
        border: none !important;
        padding: 0 !important;
        width: 100% !important;
        display: block;
        word-break: break-word;
    }

    .zc-widget-data-list .ui-table.ui-table-responsive .ui-table-tbody>tr>td span {
        display: block;
        margin-bottom: 6px;
    }

    .ui-table-responsive td zc-actions .zc-form-add-btn {
        float: left;
    }

    .ui-table-responsive .ui-table-tbody>tr>td .ui-column-title {
        margin: 0 !important;
        padding: 0;
        color: #888c9b !important;
        font-weight: 400;
        min-width: auto;
        line-height: initial;
    }

    .zc-widget-data-list .ui-table-responsive .ui-table-tbody>tr {
        margin-bottom: 5px;
        box-shadow: none;
        border-radius: 4px;
        border-top: 0 !important;
        border-bottom: 1px solid #ecedf1 !important;
        padding: 10px !important;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        position: relative;
    }

    .zc-widget-data-list .ui-table-responsive .ui-table-tbody tr td.zc-mob-fixed-row-action {
        position: absolute !important;
        right: 0;
        left: auto;
        width: 41px !important;
    }

}

@media (max-width: 599px) {

    /********* table styles start here  ***********/
    .zc-table-header.top .table-header-right .filter-position-top .zc-data-list-filters .ui-fluid-filters-div,
    .zc-group-search-block .form-control,
    .zc-knowledgebase-search .zc-table-header.top .table-header-right .filter-position-top .zc-data-list-filters .ui-fluid-filters-div {
        width: 100% !important;
    }

    .default-masters .ui-table .ui-table-tbody {
        margin: 0;
        width: 100%;
    }

    .default-masters .ui-table .ui-table-tbody .card {
        width: 100%;
        margin: 0 0 8px;
    }

    /********* table styles end here  ***********/
}

@media (max-width: 475px) {
    .zc-field-weekly-time-slot ul li .time-slot-container .week-name {
        padding: 0 15px 0 5px !important;
        min-width: 55px !important;
    }

}

@media (max-width: 425px) {
    .appManagment .mngContent {
        flex: 0 0 100% !important;
    }
}