@import url(global.css);

/* LOGIN CSS :: STARTS */
.login-form input[type="text"],
.login-form input[type="password"],
.login-form input[type="email"] {
    width: 100% !important;
    height: var(--inputbox-height) !important;
    outline: none;
    border: none !important;
    background-color: var(--white-color) !important;
    border: 1px solid var(--textbox-border) !important;
    border-radius: 5px;
    padding-left: 48px;
    color: var(--dark-gray-color);
    font-size: 15px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0em;
    outline: none;
    letter-spacing: .7px;
}

.login-form input[type="text"]::placeholder,
.login-form input[type="password"]::placeholder,
.login-form input[type="email"]::placeholder,
textarea::placeholder {
    color: var(--light-gray);
}

.main-container {
    background: var(--radial-gradient);
}

.login-form .logo-container img {
    max-width: 120px;
    height: 55px;
    object-fit: contain;
}

.login-form {
    background-color: var(--white-color);
    border-radius: 30px;
    width: 550px;
    max-width: 90%;
    height: fit-content;
    padding: 40px 50px;
    box-shadow: 6px 14px 34px 0px #0000004D;
}

.login-form .welcome-text {
    color: var(--dark-gray-color);
    font-size: 40px;
    font-weight: 400;
    line-height: 56px;
    letter-spacing: 0em;
}

.curser_pointer {
    cursor: pointer;
}

.login-form .logo-container {
    margin-bottom: 40px;
    gap: 15px;
    color: var(--dark-gray-color);
    font-size: 40px;
    font-weight: 400;
    line-height: 56px;
    letter-spacing: 0em;
}

.login-form .input-filed img {
    left: 15px;
}

.login-form .input-filed .eye_button {
    right: 15px;
    left: unset;
}

.input-filed i {
    right: 15px;
    cursor: pointer;
    color: var(--primary-color);
    font-size: 20px !important;
}

.login-form .label {
    color: var(--gray-color);
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 0em;
    margin-bottom: 5px;
}

.remember-section label,
.remember-section a {
    font-size: 18px;
    font-weight: 400;
    line-height: 25px;
    letter-spacing: 0em;
    color: var(--gray-color);
}

.remember-section a {
    color: var(--primary-color);
    text-decoration: none;
}

.login-form button {
    height: var(--button-height);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white-color);
    font-size: 22px;
    font-weight: 500;
    /* line-height: 35px; */
    letter-spacing: 0em;
    text-align: center;
    border: none;
    outline: none;
    border-radius: 5px;
    background-color: var(--primary-color);
    gap: 10px;
    text-decoration: none;
}

.login-form .back-to-login a {
    color: var(--primary-color);
    text-decoration: underline;
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    letter-spacing: 0.015em;
}

.login-form .input-filed {
    margin-top: 10px;
}

.contact-us {
    font-size: 18px;
    font-weight: 400;
    line-height: 25px;
    letter-spacing: 0em;
    color: var(--gray-color);
}

.contact-us a {
    color: var(--primary-color);
}

.form-footer,
.form-footer p a {
    color: var(--gray-color);
    font-size: 16px;
    font-weight: 300;
    line-height: 19px;
    letter-spacing: 0.015em;
    gap: 10px;
}

.form-footer p {
    gap: 8px;
}

/* LOGIN CSS :: ENDS */

/* SIDE NAVIGATIONBAR CSS :: STARTS */
a.app-ui__logo {
    content: url(../img-new/logo-full.svg);
}

.app-ui__nav.js-app-ui__nav.is-hidden a.app-ui__logo {
    content: url(../img-new/logo-sm.svg);
    margin-top: 10px;
    width: auto;
}

.app-ui__nav.js-app-ui__nav.is-hidden .hide-show-icon {
    transform: rotate(180deg);
}

.app-ui__nav {
    position: fixed;
    top: 0;
    left: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    flex-direction: column;
    z-index: 1;
    display: none;
    overflow: visible;
    border-radius: 0px 30px 30px 0px;
    background-color: var(--side-drawer-bg);
}

.sidenav {
    padding: 5px 30px 5px 30px;
    overflow-y: hidden;
}

.hide-show-icon {
    width: 35px;
    height: 35px;
    border-radius: 100%;
    border: 6px solid var(--hide-show-icon-border);
    background-color: var(--hide-show-icon-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    position: absolute;
    right: -15px;
    top: 10px;
    z-index: 999;
    cursor: pointer;
}

/* DROPDOWN :: STARTS */
.sidenav__list .sidenav__list {
    display: none
}

.sidenav__item {
    position: relative;
    cursor: pointer;
    width: 100%;
    /* padding: 5px 10px; */
}

.sidenav__item .arrow-down {
    position: absolute;
    top: 10px;
    right: 5px;
    transition: .3s;
}

/* .sidenav__list .sidenav__list .sidenav__item{
    padding: 0px 10px;
} */

.sidenav__item .arrow-down {
    position: absolute;
    top: 10px;
    right: 5px;
    transition: .3s;
}

.sidenav__item--expanded .sidenav__list {
    display: flex;
    justify-content: flex-start;
    align-items: start;
    flex-direction: column;
    gap: 5px;
    padding-left: 15px;
    margin-top: 0px;
}

.app-ui__nav.js-app-ui__nav.is-hidden .sidenav__item--expanded .sidenav__list {
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding-left: 0px;
}

/* .sidenav__sublist-control .icon{
    transform: rotate(-90deg);
    transition: all .2s linear;
    margin: auto !important;
}

.sidenav__item--expanded .sidenav__sublist-control .icon {
    transform: rotate(0deg);
} */
.sidenav__item--expanded .sidenav__link i::before {
    background-color: var(--primary-color);
}

/* .sidenav__list .sidenav__list .sidenav__link{
    padding: 10px !important;
} */

.sidenav__item--expanded .js-sidenav__sublist-control .sidenav__text {
    color: var(--dark-gray-color);
    font-weight: 600 !important;
}

.sidenav__item--expanded .sidenav__link.bg-contrast-low {
    background-color: transparent;
}

.sidenav__item--expanded .sidenav__link.bg-contrast-low .sidenav__text {
    color: var(--dark-gray-color);
    opacity: 1;
}

.sidenav__item--expanded .sidenav__link.bg-contrast-low::before {
    background-color: var(--white-color) !important;
    border: 2px solid var(--primary-color);
    height: 4px !important;
    width: 4px !important;
}

.sidenav__item--expanded .sidenav__list a span {
    font-size: 15px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0.02em;
    color: var(--gray-color);
    margin-left: 20px;
}

.sidenav__item--expanded .sidenav__list a::before {
    content: '';
    position: absolute;
    height: 6px;
    width: 6px;
    border-radius: 100%;
    background-color: var(--light-gray);
}

.sidenav__item--expanded .arrow-down {
    transform: rotate(180deg)
}

.sidenav__link.active .sidenav__text {
    color: var(--dark-gray-color) !important;
}

.sidenav__link.active svg path {
    fill: var(--primary-color);
}

.app-ui__nav.js-app-ui__nav.is-hidden .sidenav__item .reset {
    right: 8px;
}

/* DROPDOWN :: ENDS */

.sidenav__list {
    gap: 35px;
    padding: 0;
}

.sidenav__link {
    text-decoration: none;
    color: var(--gray-color);
    transition: .2s;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0.02em;
    gap: 15px;
    height: var(--sidenav-list-item-height);
    padding: 0px 5px;
}

.sidenav__link i::before {
    background-color: var(--light-gray);
}

.sidenav__item .arrow-down {
    position: absolute;
    top: 10px;
    right: 5px;
    transition: .3s;
    background-color: transparent;
}

.sidenav__item--expanded .arrow-down {
    transform: rotate(180deg);
}

.sidenav__item .arrow-down svg {
    width: 10px;
}

.sidenav__item--expanded .sidenav__link.js-sidenav__sublist-control {
    position: relative;
}

.app-ui__nav.js-app-ui__nav.is-hidden .sidebar-set-open .sidenav__link.js-sidenav__sublist-control {
    height: 60px;
    background-color: var(--primary-color);
    border-radius: 0px 10px 10px 0px;
}

.app-ui__nav.js-app-ui__nav.is-hidden .sidebar-set-open .sidenav__link.js-sidenav__sublist-control i::before {
    background-color: var(--white-color);
}

.app-ui__nav.js-app-ui__nav.is-hidden .sidebar-set-open .arrow-down svg path {
    fill: var(--white-color) !important;
}


.sidenav__text {
    color: var(--gray-color);
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0.02em;
    margin-top: 3px;
}

.sidenav__label {
    font-size: 15px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0.02em;
    color: var(--black-color);
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 0 0 10px 0 !important;
    border-bottom: 1px solid var(--light-stroke);
}

.window-split {
    position: absolute;
    right: -18px;
    top: 8px;
    cursor: pointer;
}

.app-ui__nav {
    z-index: 9 !important;
    height: calc(100vh - 51px) !important;
}

.app-ui__nav .icon-logo {
    width: 30px;
    height: 30px;
    object-fit: contain;
    margin: auto;
    display: none;
}

.app-ui__nav .full-logo {
    display: block;
    margin: auto;
    width: 100%;
    height: 40px;
    object-fit: contain;
}

.app-ui__nav.js-app-ui__nav.is-hidden .full-logo {
    display: none;
}

.app-ui__nav.js-app-ui__nav.is-hidden .icon-logo {
    display: block;
}

.sidenav__divider {
    height: 1px;
    background-color: var(--light-stroke);
    left: 0;
    right: 0;
}

.balance-info-box .accordion__header {
    background: var(--primary-gradient);
    height: 105px;
    border-radius: 10px;
    padding: 20px;
    color: var(--white-color);
    /* overflow: hidden; */
}

.accordion:has(.balance-info-box) {
    box-shadow: 0px 10px 25px rgba(10, 158, 242, 0.30) !important;
}

.balance-info-box .accordion__header h4 {
    font-size: 35px;
    font-weight: 700;
    letter-spacing: 0em;
    color: var(--white-color);
    margin-bottom: 5px;
}

.alert-info {
    background-color: var(--light-stroke);
    border-color: transparent;
    color: var(--gray-color);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 500;
}

[data-theme="dark"] .alert-info {
    background-color: var(--table-border) !important;
    color: var(--gray-color) !important;
}

.balance-info-box .accordion__header span {
    color: var(--white-color);
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0em;
    margin-right: 5px;
}

.balance-info-box .accordion__header .plus {
    width: 25px;
    height: 25px;
    background: var(--primary-color);
    border-radius: 5px;
    right: 10px;
    top: 10px;
    box-shadow: -4px 5px 9px 0px #00000033;
}

.balance-info-box .low-balance-indicator {
    top: -8px;
    left: -8px;
    z-index: 99;
}

.app-ui__nav.js-app-ui__nav.is-hidden .balance-info-box .low-balance-indicator {
    right: 0px;
    left: unset;
}

.balance-info-box .low-balance-indicator img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.active-link .sidenav__text {
    color: var(--dark-gray-color) !important;
    font-weight: 400 !important;
}

.active-link::before {
    background-color: var(--white-color) !important;
    border: 2px solid var(--primary-color);
    height: 6px !important;
    width: 6px !important;
}

.app-ui--nav-expanded .app-ui__nav {
    display: flex
}

.app-ui--nav-expanded .app-ui__nav>* {
    -webkit-animation: app-ui-nav-animation 0.5s var(--ease-out);
    animation: app-ui-nav-animation 0.5s var(--ease-out)
}

.app-ui--nav-expanded .app-ui__menu-btn .icon__group>*:nth-child(1) {
    transform: translateY(6px) rotate(-45deg)
}

.app-ui--nav-expanded .app-ui__menu-btn .icon__group>*:nth-child(2) {
    stroke-dashoffset: 24
}

.app-ui--nav-expanded .app-ui__menu-btn .icon__group>*:nth-child(3) {
    transform: translateY(-6px) rotate(45deg)
}

.app-ui__body {
    position: relative;
    z-index: 1;
    height: calc(100vh - var(--app-ui-header-height));
}

.app-ui__header {
    position: relative;
}

/* SIDE NAVIGATIONBAR CSS :: ENDS */

/* NARROW SIDE NAVIGATIONBAR CSS :: STARTS */

.app-ui__nav.js-app-ui__nav.is-hidden {
    width: 80px !important;
    display: flex !important;
    z-index: 4;
}

.app-ui__nav.js-app-ui__nav.is-hidden .sidenav {
    padding: 0px;
    padding-bottom: 30px !important;
}

.app-ui__nav.js-app-ui__nav.is-hidden .sidenav__text {
    display: none;
}

/* .app-ui__nav.js-app-ui__nav.is-hidden .sidenav__item .arrow-down{
    display: none;
} */

.app-ui__nav.js-app-ui__nav.is-hidden .sidebar-set-open .arrow-down {
    top: 22px;
}

.app-ui__nav.js-app-ui__nav.is-hidden .sidenav__item .sidenav__link {
    justify-content: center;
}

.app-ui__nav.js-app-ui__nav.is-hidden .sidenav__item .sidenav__link.active+.arrow-down svg path {
    fill: var(--white-color) !important;
}

.app-ui__nav.js-app-ui__nav.is-hidden .sidenav__label {
    text-align: center;
}

.app-ui__nav.js-app-ui__nav.is-hidden .balance-info-box .accordion__header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 5px;
    border-radius: 0px 10px 10px 0px;
}

.app-ui__nav.js-app-ui__nav.is-hidden .hide-on-narrow {
    display: none;
}

.app-ui__nav.js-app-ui__nav.is-hidden .balance-info-box .accordion__header .plus {
    position: unset !important;
    margin: auto;
    margin-bottom: 10px;
}

.app-ui__nav.js-app-ui__nav.is-hidden .balance-info-box .accordion__header h4 {
    font-size: 20px;
}

.app-ui__nav.js-app-ui__nav.is-hidden .balance-info-box .accordion__header span {
    font-size: 14px;
    margin-right: 0px;
}

.app-ui__nav.js-app-ui__nav.is-hidden .balance-info-box .text-left {
    text-align: center;
}

/* NARROW SIDE NAVIGATIONBAR CSS :: ENDS */

/* HEADER CSS :: STARTS */
.app-ui__header {
    display: flex;
    justify-content: end;
    align-items: center;
    padding-right: 0px;
    background-color: transparent;
}

.app-ui__header .header-options {
    gap: 5px;
}

.app-ui__user-btn {
    gap: 5px;
    text-decoration: none;
    overflow: visible;
    width: fit-content;
    height: 100%;
    display: flex;
    align-items: center;
    color: var(--gray-color);
    justify-content: end;
}

.app-ui__user-btn span {
    margin-top: 5px;
}

.mode-change-section {
    padding: 6px 10px;
}

.switch__label svg {
    fill: var(--white-color);
    width: 18px;
    height: 18px !important;
}

.app-ui__user-btn img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.mode-change-section {
    padding: 6px 10px;
}

.switch__label svg {
    fill: var(--white-color);
    width: 18px;
    height: 18px !important;
}

.switch__label {
    display: flex;
    align-items: center;
    padding: 4px;
    gap: 5px;
    cursor: pointer;
}

.app-ui__user-btn img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: relative;
}

.app-ui__user-btn p {
    font-size: 18px;
    font-weight: 600;
    line-height: 25px;
    letter-spacing: 0em;
    color: var(--gray-color);
}

/* HEADER CSS :: ENDS */

/* MAIN CONTAINER CSS :: START */
.app-ui__body {
    position: relative;
    z-index: 1;
}

.form .sidenav,
.stats-card .sidenav,
.form-with-accordian .sidenav {
    padding: 0px !important;
}

/* MAIN CONTAINER CSS :: ENDS */

/* TABLE CSS :: STARTS */
.app-ui__body {
    padding-bottom: 30px;
    z-index: 0;
}

.data-table {
    /* background-color: var(--table-bgcolor); */
    /* border: 1px solid var(--table-border); */
    /* box-shadow: var(--table-box-shadow); */
    /* border-radius: 10px; */
}

.content-padding {
    padding: 0px;
}

.stats-card .table-header {
    padding: 20px 30px 20px 30px;
    border-bottom: 1px solid var(--table-border);
}

.table-header-button {
    gap: 5px;
}

.stats-card .table-options {
    gap: 5px;
}

.stats-card .table-header button {
    width: fit-content;
    padding: 0px 20px;
    height: var(--table-input-height);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0em;
    border-radius: 5px;
    outline: none;
    border: none;
    text-decoration: none;
    background-color: var(--light-stroke);
    color: var(--gray-color);
}

.stats-card .table-header .create-btn,
.primary-btn {
    color: var(--white-color);
    background-color: var(--primary-color);
}
.white-btn {
    color: var(--color-black) !important;
    background-color: var(--white-color) !important;
    border: 1px solid var(--textbox-border);
}

/* TO MAKE ACTION HEADER OF LISTING RIGHT ALIGN */
.user-list-table .int-table__header .int-table__cell:last-child,
.user-list-table .int-table__header .int-table__cell:last-child,
.usergroup-listing .int-table__header .int-table__cell:last-child,
.schedul-announcment-list .int-table__header .int-table__cell:last-child,
.speed-dial-listing .int-table__header .int-table__cell:last-child,
.recording-listing .int-table__header .int-table__cell:last-child,
.trunk-listing .int-table__header .int-table__cell:last-child,
.trunk-listing .int-table__header .int-table__cell:last-child,
.inbound-listing .int-table__header .int-table__cell:last-child,
.outbound-listing .int-table__header .int-table__cell:last-child,
.announcement-listing .int-table__header .int-table__cell:last-child,
.auto-notification-listing .int-table__header .int-table__cell:last-child,
.call-flow-listing .int-table__header .int-table__cell:last-child,
.call-recording-listing .int-table__header .int-table__cell:last-child,
.cid-listing .int-table__header .int-table__cell:last-child,
.conference-listing .int-table__header .int-table__cell:last-child,
.custom-feature-listing .int-table__header .int-table__cell:last-child,
.dialer-listing .int-table__header .int-table__cell:last-child,
.disa-listing .int-table__header .int-table__cell:last-child,
.directory-listing .int-table__header .int-table__cell:last-child,
.ivr-table-section .int-table__header .int-table__cell:last-child,
.live-call-listing .int-table__header .int-table__cell:last-child,
.misc-destination-listing .int-table__header .int-table__cell:last-child,
.share-voicemail-listings .int-table__header .int-table__cell:last-child,
.time-condition-listing .int-table__header .int-table__cell:last-child,
.time-rule-listing .int-table__header .int-table__cell:last-child,
.extension-listing .int-table__header .int-table__cell:last-child,
.voice-mail-listing .int-table__header .int-table__cell:last-child,
.paging-listing .int-table__header .int-table__cell:last-child,
.parking-listing .int-table__header .int-table__cell:last-child,
.queue-listing .int-table__header .int-table__cell:last-child,
.ring-group-listing .int-table__header .int-table__cell:last-child,
.vm-blast-listing .int-table__header .int-table__cell:last-child,
.wake-up-listing .int-table__header .int-table__cell:last-child,
.moh-listing .int-table__header .int-table__cell:last-child,
.firewall-listing .int-table__header .int-table__cell:last-child,
.block-caller-table .int-table__header .int-table__cell:last-child,
.blacklist-table-list .int-table__header .int-table__cell:last-child,
.transport-listings .int-table__header .int-table__cell:last-child,
.follow-me .int-table__header .int-table__cell:last-child,
.backup-restore-listing .int-table__header .int-table__cell:last-child,
.popup-config-listing .int-table__header .int-table__cell:last-child,
.fail2ban-listing .int-table__header .int-table__cell:last-child,
.ami-user-listing .int-table__row th:last-child,
.custom-audio-listing .int-table__header .int-table__cell:last-child,
.ari-listing .int-table__header .int-table__cell:last-child,
.action-group-listing .int-table__header .int-table__cell:last-child {
    text-align: center !important;
    width: 100px;
}

.common-table-ui .int-table__cell:last-child {
    text-align: left;
    width: 180px;
}

.sucess-table-section .int-table__cell {
    width: 25%;
}

.statatics-table-section #success-call .int-table__cell,
#callagent .int-table__cell,
#callqueuename .int-table__cell {
    width: 25%;
}

.statatics-table-section #total-queue .int-table__cell:last-child,
.statatics-table-section #success-call .int-table__cell:last-child,
.statatics-table-section #callbyDid .int-table__cell:last-child,
.statatics-table-section #callagent .int-table__cell:last-child,
#failed-call .int-table__cell:last-child,
.failed-call .int-table__header .int-table__cell:last-child {
    width: 100px;
}

.common-table-ui .int-table__cell:first-child {
    width: 100%;
}

.failed-data-table .int-table__cell:first-child {
    width: 40%;
}

.custom-audio-listing .int-table__cell:first-child {
    width: 40%
}

#failed-call .int-table__cell:not(:last-child),
.failed-call.int-table__header .int-table__cell:not(:last-child) {
    width: 45%;
}

.failed-data-table .int-table__cell:last-child {
    width: 100px;
}

.failed-by-did-table .int-table__cell,
#total-success .int-table__cell {
    width: 33%;
}

/* TO MAKE ACTION BUTTON CENTER WHEN THERE IS ONLY ONE ACTION */
.blacklist-table-list .int-table__cell:last-child .table-actions,
.transport-listings .int-table__cell:last-child .table-actionss,
.follow-me .int-table__cell:last-child .table-actions {
    text-align: center !important;
    float: unset !important;
    justify-content: center !important;
}

/* TO MAKE TEXT  AND RIGHT/WRONG SIGN OF LISTING CENTER ALIGN */
.action-group-listing #header-Forward,
.action-group-listing #header-Spy,
.action-group-listing #header-Login,
.action-group-listing #header-Status,
.action-group-listing #header-Voicemail,
.action-group-listing .int-table__cell:nth-child(3),
.action-group-listing .int-table__cell:nth-child(4),
.action-group-listing .int-table__cell:nth-child(5),
.action-group-listing .int-table__cell:nth-child(6),
.action-group-listing .int-table__cell:nth-child(7),
.extension-listing #header-NoAnswer,
.extension-listing #header-Busy,
.extension-listing #header-Unavailable,
.extension-listing .int-table__cell:nth-child(7),
.extension-listing .int-table__cell:nth-child(8),
.extension-listing .int-table__cell:nth-child(9),
.trunk-listing .int-table__cell:nth-child(2),
.announcement-listing .int-table__cell:nth-child(3),
.announcement-listing .int-table__cell:nth-child(4),
.announcement-listing .int-table__cell:nth-child(5),
.call-flow-listing .int-table__cell:nth-child(3),
.custom-feature-listing .int-table__cell:nth-child(2),
.custom-feature-listing #header-Enabled,
.disa-listing .int-table__cell:nth-child(4),
.disa-listing #header-AnswerCall,
.misc-destination-listing #header-CIDMode,
.misc-destination-listing .int-table__cell:nth-child(3),
.voice-mail-listing .int-table__cell:nth-child(5),
.voice-mail-listing #header-AttachEmail,
.voice-mail-listing .int-table__header .int-table__cell:nth-child(2),
.int-table__cell.enable {
    width: 180px;
    text-align: center !important;
}

.paging-listing .int-table__cell:nth-child(3),
.paging-listing .int-table__cell:nth-child(7),
.parking-listing .int-table__cell:nth-child(2),
.parking-listing .int-table__cell:nth-child(5),
.share-voicemail-listings .int-table__cell:nth-child(3),
.vm-blast-listing .int-table__cell:nth-child(2),
.wake-up-listing .int-table__cell:nth-child(6),
.backup-restore-listing .int-table__cell:nth-child(3),
.backup-restore-listing .int-table__cell:nth-child(7),
.popup-config-listing .int-table__cell:nth-child(4),
.follow-me .int-table__cell:nth-child(2) {
    width: 220px;
    text-align: center !important;
}

.backup-restore-listing .int-table__cell {
    width: 250px;
}

.user-list-table .int-table__cell:last-child .table-actions.float-left,
.schedul-announcment-list .int-table__cell:last-child .table-action {
    float: right !important;
}

/* TO MAKE TABLE ACTION BUTTONS RIGHT ALIGN */
.int-table__cell:last-child .table-actions {
    justify-content: center !important;
    width: 100%;
}

/* TABLE CENTER ALIGN ITEMS AND ACTION BUTTON ALIGNMENT CSS :: STARTS */
.int-table__cell.enable,
.int-table__cell#header-Enabled,
.int-table__cell#header-NoAnswer,
.int-table__cell.noanswer_destination_id,
.int-table__cell.busy_destination_id,
.int-table__cell#header-Busy,
.int-table__cell#header-Unavailable,
.int-table__cell.unavail_destination_id,
.int-table__header .int-table__cell#header-Canceled,
.int-table__cell.canceled,
.int-table__cell#header-Default,
.int-table__cell.default,
.int-table__cell#header-EmailAttach,
.int-table__cell.attach {
    text-align: left;
    /* min-width: fit-content; */
    min-width: 70px;
}

/* TABLE CENTER ALIGN ITEMS AND ACTION BUTTON ALIGNMENT CSS :: ENDS */
.extension-listing .int-table__cell:last-child .table-actions,
.wake-up-listing .int-table__cell:last-child .table-actions,
.vm-blast-listing .int-table__cell:last-child .table-actions,
.time-conditon-listing .int-table__cell:last-child .table-actions,
.time-rule-listing .int-table__cell:last-child .table-actions,
.ring-group-list .int-table__cell:last-child .table-actions,
.shared-voice-isting .int-table__cell:last-child .table-actions,
.moh-listing .int-table__cell:last-child .table-actions {
    float: unset !important;
}

.int-table__cell.isAdmin,
#header-Admin {
    text-align: center;
}

.ticket-table .int-table__cell {
    max-width: 250px;
    line-break: anywhere;
    white-space: normal;
}

.schedul-announcment-list .int-table__cell:nth-child(4) {
    max-width: fit-content;
}

.follow-me .enable {
    text-align: center !important;
}

.audio-file-table tr td.application,
.audio-file-table thead th {
    padding: 0px !important;
}

.flex.items-center.justify-between.padding-top-sm {
    display: none;
}

.status_id {
    text-align: right !important;
}

/* TABLE CSS :: ENDS */

/* DOTS */
.dot-active,
.dot-inactive {
    height: 25px;
    width: 25px;
    border-radius: 50%;
    display: inline-block;
}

.dot-active {
    background-color: var(--primary-color);
}

.dot-inactive {
    background-color: var(--textbox-border);
}

/* DOTS */

/* PAGINATION CSS :: STARTS */
#results {
    font-size: 14px;
    color: #A0B5BE;
}

.results,
.pagination {
    color: var(--light-gray);
    font-size: 15px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 1px;
}

.results .dark-text {
    font-size: 14px;
    color: var(--gray-color);
    margin-left: 6px;
}

.pagination {
    overflow: hidden;
    margin-left: 10px;
    padding-bottom: 20px;
    margin-top: 10px;
    margin-bottom:20px
}

.pagination ul {
    gap: 5px;
}

.pagination input {
    width: 28px !important;
    height: 28px !important;
    border-radius: 100%;
    background-color: var(--primary-color) !important;
    color: var(--white-color);
    margin-right: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0em;
    border: none !important;
    outline: none;
    text-align: center;
    padding: 0px !important;
}

.pagination,
.pagination__list {
    gap: 1px;
}

.pagination__jumper {
    line-height: 1;
    width: 20px !important;
    height: 20px !important;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    letter-spacing: 0em;
    border: none !important;
    outline: none;
    text-align: center;
    padding: 0px !important;
    cursor: pointer;
}

.pagination__item svg {
    width: 11px;
    height: 11px;
}

.active-page .pagination__jumper {
    background-color: var(--primary-color);
    color: var(--white-color);
    width: 100% !important;
    height: 100% !important;
}

.active-page {
    width: 28px !important;
    height: 28px !important;
    border-radius: 100%;
    background-color: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0em;
    border: none !important;
    outline: none;
    text-align: center;
    padding: 0px !important;
}

.pagination__jumper.active-page {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.active-page .pagination__jumper {
    color: var(--white-color) !important;
}

.active-page .pagination__jumper div {
    margin-bottom: -3px;
}

/* PAGINATION CSS :: ENDS */

/* DARK THEME CSS :: STARTS */
[data-theme="dark"] .data-table {
    border: unset;
}

[data-theme="dark"].stats-card .table-header .card-header {
    color: var(--dark-gray-color);
}

[data-theme="dark"] .expandable-row thead {
    background-color: var(--table-border);
}

[data-theme="dark"] .stats-card .table-header .download-btn {
    background-color: var(--dark-theme-button-bg);
    color: var(--light-gray);
}

[data-theme="dark"] .results {
    color: var(--gray-color);
}

[data-theme="dark"] .results .dark-text {
    color: #698A99;
}

[data-theme="dark"] .pagination {
    color: var(--table-border);
}

[data-theme="dark"] .pagination input,
[data-theme="dark"] .active-page {
    background-color: var(--table-border) !important;
    color: var(--gray-color) !important;
}

[data-theme="dark"] .pagination ul li svg path {
    fill: var(--table-border);
}

/* DARK THEME CSS :: ENDS */

/* ROUND CHECKBOX CSS :: STARTS */
.round-checkbox {
    top: -13px;
    left: 10px;
}

.round-checkbox .custom-checkbox input:checked~.checkmark:after {
    top: 4px;
}

.round-checkbox .custom-checkbox,
.round-checkbox .custom-checkbox .checkmark {
    height: 24px !important;
    width: 24px !important;
    border-radius: 50%;
    margin-bottom: 0px !important;
}

.round-checkbox .custom-checkbox .checkmark {
    background-color: var(--textbox-border);
}

.round-checkbox .custom-checkbox .checkmark:after {
    width: 5px;
    height: 10px;
    top: 4px !important;
}

.server-option.selected-server {
    border: 2px solid var(--primary-color);
}

/* ROUND CHECKBOX CSS :: ENDS */

/* ACCORDION CSS :: STARTS */
.js-accordion__item .accordion__header {
    width: 100% !important;
    background-color: var(--table-bgcolor) !important;
    border: 1px solid var(--table-border);
    box-shadow: var(--table-box-shadow);
    border-radius: 10px !important;
    font-size: 18px;
    font-weight: 700;
    line-height: 25px;
    letter-spacing: 0em;
    color: var(--dark-gray-color);
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 35px;
}

.accordion__item--is-open .accordion__header {
    border-radius: 10px 10px 0px 0px !important;
}

.accordion__item .accordion__header svg {
    transition-duration: .3s;
}

.accordion__item--is-open .accordion__header svg {
    transform: rotate(90deg);
    transform-origin: center;
}

.queue-queued-calls .card-body-list .flex-list:last-child .accordion__header svg,
.extension-list .card-body-list .flex-list .accordion__header svg {
    transform: rotate(0) !important;
}

.accordion__item .stats-card {
    padding: 30px 35px;
    background-color: var(--table-bgcolor);
    box-shadow: var(--table-box-shadow);
    border-radius: 0px 0px 10px 10px;
    border: 1px solid var(--table-border);
    border-top: 0;
}

/* ACCORDION CSS :: ENDS */

/* FEATURE CODE CSS :: STARTS */
.feature-section .input-wrapper .w-50 {
    width: 49%;
}

/* FEATURE CODE CSS :: ENDS */

/* ACCESS LOG CSS :: STARTS */
.access-log-section tr .int-table__cell:last-child {
    text-align: center !important;
    width: 200px;
}

/* ACCESS LOG CSS :: ENDS */

/* BULK MODULE CSS :: STARTS */
.bulk-section .input-wrapper {
    padding: 30px 35px;
}

.bulk-section .btn-group {
    margin-top: 20px !important;
}

.bulk-section .btn-group .btn {
    gap: 5px;
}

.bulk-section .input-wrapper .form-label {
    color: var(--gray-color);
    font-size: 18px;
    font-weight: 400;
    line-height: 25px;
    letter-spacing: 0em;
}

.gray-header {
    font-size: 18px;
    font-weight: 400;
    line-height: 34px;
    letter-spacing: 0em;
    color: var(--gray-color);
}

.img-box {
    max-width: 850px;
    width: 100%;
}

.img-box img {
    width: 100%;
    height: auto;
}

/* BULK MODULE CSS :: ENDS */

/* CUSTOMER BRANDING CSS :: STARTS */
.branding-info {
    font-size: 18px;
    font-weight: 400;
    line-height: 34px;
    letter-spacing: 0em;
    color: var(--gray-color);
}

/* CUSTOMER BRANDING CSS :: ENDS */

/* SYSTEM SETTING CSS :: STARTS */
.system-setting-section .data-table {
    padding: 30px 35px;
}

.custom-table-border {
    background-color: var(--table-bgcolor);
    border: 1px solid var(--textbox-border);
    border-radius: 10px;
    max-width: 80%;
    overflow-x: auto;
}

.system-setting-section .custom-table-border tr td:first-child {
    width: 260px;
}

.system-setting-section .custom-table-border tr td {
    padding: 18px 35px;
}


.system-setting-section .custom-table-border tr td:last-child {
    padding-right: 150px;
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    gap: 10px;
}

.system-setting-section .custom-table-border tr:not(:last-child) {
    border-bottom: 1px solid var(--table-border);
}

.system-setting-heading {
    font-size: 30px;
    font-weight: 800;
    line-height: 42px;
    letter-spacing: 0em;
    color: var(--dark-gray-color);
}

.system-setting-section .custom-table-border tr td a {
    font-size: 15px;
    font-weight: 600;
    line-height: 21px;
    letter-spacing: 0em;
    color: var(--primary-color) !important;
    /* margin-left: 15px; */
    margin-left: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
}

.system-setting-section .custom-table-border tr td button a {
    color: var(--white-color) !important;
}

.timezone-info {
    font-size: 15px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0em;
    color: var(--primary-color);
    background-color: #f6f7f8;
    border-radius: 5px;
    padding: 12px 18px;
    width: fit-content;
}

/* SYSTEM SETTING CSS :: ENDS */

/* ASTERISK INFO CSS :: STARTS */
.info-box {
    color: var(--primary-color);
    padding: 15px 20px;
    background-color: #f6f7f8;
    font-size: 15px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0em;
}

[data-theme="dark"] .info-box {
    background-color: var(--table-border);
}

/* ASTERISCK INFO CSS :: ENDS */

/* CUSTOM BRANDING CSS :: STARTS */
.alert-info .form-text {
    font-weight: 400 !important;
    line-height: 34px;
}

/* CUSTOM BRANDING CSS :: ENDS */

/* DARK THEME CSS :: STARTS */

[data-theme="dark"] .node a text {
    fill: var(--gray-color);
}

[data-theme="dark"] .hide-on-dark {
    display: none;
}

[data-theme="dark"] .hide-on-light {
    display: block;
}

[data-theme="dark"] body {
    background-color: var(--body-background);
}

[data-theme="dark"] .app-ui__user-btn p {
    color: var(--dark-gray-color);
}

[data-theme="dark"] a.app-ui__logo {
    content: url(../img-new/logo-full-white.svg);
}

[data-theme="dark"] .active-link .sidenav__text {
    color: var(--white-color) !important;
}

[data-theme="dark"] .sidenav__divider {
    background-color: var(--table-bgcolor);
}

[data-theme="dark"] .sidenav__label {
    color: #EDEDFB;
}

[data-theme="dark"] .sidenav__item .arrow-down svg path {
    fill: var(--dark-theme-button-bg);
}

[data-theme="dark"] .round-checkbox .custom-checkbox .checkmark {
    background-color: var(--side-drawer-bg);
}

[data-theme="dark"] .sidenav__link.active .sidenav__text {
    color: var(--white-color) !important;
}

[data-theme="dark"] .common-table-ui .int-table__row:last-child{
    border-bottom: unset !important;
}

[data-theme="dark"] #qr-code-str {
    background-color: white;
    padding: 15px;
    width: fit-content;
}

/* DARK THEME CSS :: ENDS */

/* MEDIAQUERY :: STARTS */
@media only screen and (max-width: 1024px) {
    .app-ui__header {
        display: flex;
        justify-content: space-between;
        align-items: end;
        padding: 0px 20px;
        background-color: #fff !important;
    }

    .display\@md {
        display: flex !important;
    }

    .stats-card .table-header {
        padding: 20px 30px 20px 30px;
        border-bottom: 1px solid var(--table-border);
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .bulk-section .container .w-50 {
        width: 100% !important;
    }

    .stats-card .table-header button {
        padding: 0px 15px;
    }

    .table-header-button {
        gap: 10px;
        flex-wrap: wrap;
        justify-content: end;
    }
}

@media only screen and (max-width: 767px) {
    .window-split {
        display: none;
    }

    .app-ui__nav {
        width: 250px;
    }

    #modal-callHistory .modal__content {
        max-width: 90% !important;
    }

    .sidenav__text {
        font-size: 14px !important;
    }

    .sidenav__item--expanded .sidenav__list a span {
        font-size: 13px !important;
    }

}

@media only screen and (max-width: 600px) {
    .chart-area-report{
        flex-direction: column;
    }

    #main-grid {
        padding: 15px;
    }

    .common-table-ui {
        flex-direction: column !important;
    }

    .common-table-ui .form {
        width: 100% !important;
    }

    /* HEADER CSS :: STARTS */
    .app-ui__header {
        display: flex;
        justify-content: space-between;
        align-items: end;
        padding: 0px 20px;
        background-color: #fff;
    }

    .display\@md {
        display: flex !important;
    }

    .app-ui__header .flex {
        height: 100%;
    }

    .app-ui__user-btn span {
        display: none;
    }

    .expandable-search {
        display: none;
    }

    .window-split {
        display: none;
    }

    .app-ui__header .header-options {
        gap: 20px;
    }

    .app-ui__header .dropdown {
    }

    /* HEADER CSS :: ENDS */

    /* SIDEBAR CSS :: STARTS */
    .app-ui__nav.js-app-ui__nav.is-hidden {
        display: none !important;
    }

    .app-ui.js-app-ui.app-ui--nav-expanded .app-ui__nav.js-app-ui__nav.is-hidden {
        display: flex !important;
    }

    .app-ui__nav,
    .app-ui__nav.js-app-ui__nav.is-hidden {
        top: 55px;
        width: 100%;
        z-index: 99 !important;
        border-top: 1px solid var(--light-stroke);
    }

    .app-ui__logo-wrapper {
        justify-content: flex-start;
    }

    .hide-show-icon,
    .app-ui__user-btn p {
        display: none;
    }

    .sidenav {
        padding: 10px 30px 50px 30px;
    }

    /* SIDEBAR CSS :: ENDS */

    /* LOGIN CSS :: STARTS */
    .login-form {
        width: 100% !important;
        padding: 30px 20px !important;
    }

    .login-form .welcome-text {
        font-size: 25px;
    }

    /* LOGIN CSS :: ENDS */
    /* SYSTEM SETTING CSS :: STARTS */
    .custom-table-border {
        max-width: 100% !important;
    }

    .system-setting-section .custom-table-border tr td:last-child {
        flex-direction: column;
        min-width: fit-content !important;
    }

    .system-setting-section .custom-table-border tr td a {
        margin-left: 0px;
    }

    .system-setting-section .custom-table-border tr td svg {
        flex-shrink: 0;
    }

    /* SYSTEM SETTING CSS :: ENDS */

    /* ASTERISK CSS :: STARTS */
    .info-box {
        max-width: 100% !important;
    }

    /* ASTERISK CSS :: ENDS */

    /* BULK CSS :: STARTS */

    .bulk-section .btn-group {
        flex-wrap: wrap;
        gap: 5px;
    }

    /* BULK CSS :: ENDS */

    /* QUEUE PANEL CSS :: STARTS */
    .queue-data-show {
        flex-direction: column;
        padding-right: 0px !important;
    }

    .quuepanel,
    .queue-member {
        flex: 0 0 100% !important;
        width: 100%;
    }

    .call-history-detail,
    .mail-box-history {
        padding: 20px 10px !important;
    }

    .mail-box-history .parent-accordian {
        padding: 20px 10px !important;
    }

    .queue-queued-calls .card-body,
    .extension-list .card-body {
        width: 100% !important;
        display: block;
    }

    /* QUEUE PANEL CSS :: ENDS */

    #modal-callHistory .modal__content {
        max-width: 90% !important;
    }

    /* TRUNK CSS :: STARTS */
    .ip-trunk-update .form .padding-md {
        padding: 20px 10px;
    }

    #endpoint-allow-div select,
    .dial-plan-div .w-25,
    .dial-plan-div .w-30,
    #advanced-setting-div .w-25 {
        width: 100% !important;
    }

    #endpoint-allow-div .w-50 {
        width: unset !important;
    }

    .dial-plan-div,
    #advanced-setting-div .d-flex.justify-start.align-center.gap-20 {
        gap: 10px;
        flex-direction: column;
        margin-bottom: 30px !important;
        align-items: flex-start;
    }

    /* TRUNCK CSS :: ENDS */

    /* TRANSPORT CSS :: STARTS */
    #local-net-div .input-wrapper {
        margin-bottom: 30px !important;
    }

    /* TRANSPORT CSS :: ENDS */

    /* QUEUE CSS :: STARTS */
    .div-add-more {
        gap: 10px;
        flex-direction: column;
        align-items: flex-start !important;
        margin-bottom: 30px !important;
    }

    .join-check-opts {
        display: flex !important;
        gap: 20px !important;
    }

    /* QUEUE CSS :: ENDS */

    /* TABLE CSS :: STARTS */
    .stats-card .card-header {
        font-size: 16px;
    }

    .stats-card .table-header .card-header {
        padding: 0;
    }

    .stats-card .table-header {
        padding: 10px 10px;
    }

    .stats-card .table-header {
        flex-direction: column;
        justify-content: flex-start;
        align-items: start;
        gap: 10px 20px;
    }

    .search-bar {
        width: 100% !important;
    }

    .stats-card .table-options {
        gap: 5px;
        flex-direction: column;
        width: 100%;
    }

    .stats-card .table-header button {
        padding: 0px 10px;
        height: 35px;
    }

    /* TABLE CSS :: ENDS */

    .main-content-container {
        padding: 20px;
    }

    .stats-card .results,
    .stats-card .pagination {
        font-size: 11px !important;
    }

    .table-header-button {
        width: 100%;
        justify-content: flex-start;
        margin-top: 10px;
        flex-wrap: wrap;
    }

    .stats-card .pagination {
        flex-direction: column;
    }

    .active-page .pagination__jumper div {
        margin-bottom: -2px;
    }
}

@media (min-width: 1024px) {
    .app-ui__nav {
        display: flex;
        width: var(--app-ui-static-sidebar-width);
    }

    .app-ui__body {
        left: var(--app-ui-static-sidebar-width);
        width: calc(100% - var(--app-ui-static-sidebar-width));
        -webkit-overflow-scrolling: touchus;
    }

    .app-ui__body-no-beast {
        width: calc(100% - 80px);
        float: right;
    }

    .hide-md {
        display: block;
    }

}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {

    /* HEADER CSS :: STARTS */
    .app-ui__nav {
        z-index: 9;
        width: 250px;
    }

    .window-split {
        display: none;
    }

    /* HEADER CSS :: ENDS */

    /* SYSTEM SETTING CSS :: STARTS */
    .custom-table-border {
        max-width: 100%;
    }

    .system-setting-section .custom-table-border tr td:first-child {
        width: 230px;
    }

    /* SYSTEM SETTING CSS :: ENDS */

    /* ASTERISK CSS :: STARTS */
    .info-box {
        max-width: 100% !important;
    }

    .tabs-v2 .tabs-nav-v2 {
        flex-wrap: wrap;
        margin-bottom: 30px;
    }

    .tabs-nav-v2__item[aria-selected=true]::after {
        content: unset !important;
    }

    /* ASTERISK CSS :: ENDS */

    /* QUEUE PANEL CSS :: STARTS */
    .queue-data-show {
        flex-direction: column;
        padding-right: 0px !important;
    }

    .quuepanel,
    .queue-member {
        flex: 0 0 100% !important;
        width: 100%;
    }

    .call-history-detail,
    .mail-box-history {
        padding: 20px 10px !important;
    }

    .mail-box-history .parent-accordian {
        padding: 20px 10px !important;
    }

    .queue-queued-calls .card-body,
    .extension-list .card-body {
        width: 100% !important;
        display: block;
    }

    /* QUEUE PANEL CSS :: ENDS */

    #modal-callHistory .modal__content {
        max-width: 90% !important;
    }

    .bulk-section .input-wrapper {
        padding: 30px 20px;
        flex-direction: column;
        align-items: flex-start;
    }
}

@media only screen and (max-width: 1600px) {

    /* LOGIN CSS :: STARTS */
    .login-form {
        width: 450px;
        padding: 30px 40px;
    }

    .login-form .welcome-text {
        font-size: 25px;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"] {
        padding-left: 40px;
    }

    .login-form .label {
        font-size: 14px;
    }

    .login-form .logo-container {
        margin-bottom: 30px;
    }

    .login-form .input-filed {
        margin-bottom: 15px;
    }

    .login-form .input-filed:first-child img {
        width: 15px;
    }

    .login-form .input-filed:last-child img {
        height: 15px;
    }

    .remember-section label,
    .remember-section a {
        font-size: 14px;
    }

    .login-form button,
    .login-form .back-to-login {
        font-size: 16px;
        margin-top: 0px;
    }

    .contact-us,
    .form-footer,
    .form-footer p a {
        font-size: 14px;
        margin-top: 15px;
    }

    /* LOGIN CSS :: ENDSs */

    /* LEFT SIDE NAVBAR CSS :: STARTS */
    a.app-ui__logo {
        width: 200px;
    }

    .balance-info-box .accordion__header h4 {
        font-size: 28px;
    }

    .balance-info-box .accordion__header span {
        font-size: 13px;
    }

    .sidenav__list {
        gap: 5px;
    }

    .sidenav__text {
        font-size: 13px !important;
    }

    .sidenav__link svg {
        width: 16px;
        height: auto;
    }

    .sidenav__label {
        font-size: 12px;
    }


    .sidenav__text {
        font-size: 13px !important;
    }

    .sidenav__item--expanded .sidenav__list a span {
        font-size: 13px !important;
    }

    i::before {
        width: 15px;
        height: 15px;
    }

    /* LEFT SIDE NAVBAR CSS :: ENDS */

    /* CUSTOM CSS :: STARTS */
    .section-heading {
        font-size: 22px !important;
    }

    /* CUSTOM CSS :: ENDS */

    /* ROUND CHECKBOX CSS :: STARTS */
    .round-checkbox {
        top: -10px;
        left: 15px;
    }

    .round-checkbox .custom-checkbox,
    .round-checkbox .custom-checkbox .checkmark {
        height: 20px !important;
        width: 20px !important;
    }

    /* ROUND CHECKBOX CSS :: ENDS */

    /* ACCORDION CSS :: STARTS */
    .js-accordion__item .accordion__header {
        height: 60px !important;
        padding: 20px 25px !important;
        font-size: 15px !important;
    }

    .accordion__item .stats-card {
        padding: 30px 25px !important;
    }

    /* ACCORDION CSS :: ENDS */

    /* BULK MODULE CSS :: STARTS */
    .bulk-section .input-wrapper {
        padding: 30px 20px;
    }

    .gray-header,
    .bulk-section .input-wrapper .form-label {
        font-size: 15px;
    }

    .bulk-section .btn-group svg {
        width: 18px;
        margin-top: -3px;
    }

    /* BULK MODULE CSS :: ENDS */

    /* CUSTOM BRANDING CSS :: STARTS */
    .create-custom-branding .radio-btn-group {
        margin-top: 10px !important;
    }

    .branding-info {
        font-size: 15px;
    }

    .create-custom-branding .btn-group {
        flex-wrap: wrap;
    }

    /* CUSTOM BRANDING CSS :: ENDS */

    /* SYSTEM SETTING CSS :: STARTS */
    .system-setting-section .data-table {
        padding: 30px 20px;
    }

    .system-setting-heading {
        font-size: 22px;
    }

    .custom-table-border tr td a {
        font-size: 13px;
    }

    /* SYSTEM SETTING CSS :: ENDS */

    .system-setting-section .custom-table-border tr td:last-child {
        padding-right: 0px;
    }

    .alert-info {
        font-size: 13px;
    }

    /* TABLE CSS :: STARTS */
    .stats-card .table-header button {
        font-size: 12px;
    }

    .int-table__cell .table-actions button svg {
        height: 16px;
    }

    .extension-listing .int-table__cell {
        min-width: 150px;
    }

    /* TABLE CSS :: ENDS */

    /* PAGINATION CSS :: STARTS */
    .results,
    .pagination {
        font-size: 13px;
    }

    .pagination ul li svg {
        height: 15px;
    }

    .pagination input,
    .active-page {
        font-size: 12px;
    }

    /* PAGINATION CSS :: ENDS */
}

@media only screen and (min-width: 1601px) and (max-width: 2000px) {
    .sidenav__list {
        gap: 15px;
    }
}

/* MEDIAQUERY :: ENDS */

/* TOOLTIP CSS :: STARTS */
.tootip-form {
    border: 1px solid var(--textbox-border);
    border-radius: 0px 5px 5px 0px;
    height: 50px !important;
}

.tootip-form input,
.tootip-form button {
    height: 100%;
}

.tootip-form input {
    font-size: 14px;
    color: var(--gray-color);
}

.tooltip .tooltiptext {
    border: 1px solid var(--textbox-border) !important;
    background-color: var(--table-bgcolor) !important;
    box-shadow: var(--table-box-shadow);
}

.tooltip .tooltiptext::after {
    border-color: transparent var(--textbox-border) transparent transparent !important;
}

.popover-title {
    border-bottom: 1px solid var(--textbox-border);
    border-radius: 5px 5px 0 0;
    font-weight: 500;
    line-height: 1.2;
    color: var(--primary-color);
    font-size: 17px;
    padding: 15px 20px;
    margin-bottom: 10px;
}

.peer-status.tooltip .tooltiptext {
    top: 30px;
    left: 90%;
    font-size: 14px;
    text-align: left;
}

.peer-status.tooltip .tooltip-data {
    max-height: 180px;
    overflow-y: scroll;
}

.peer-status.tooltip .tooltiptext .int-table__row th:first-child,
.peer-status.tooltip .tooltiptext .int-table__row td:first-child {
    padding-left: 15px;
}

/* TOLLTIP CSS :: ENDS */

.open_chat_menu {
    background-color: var(--color-primary);
    outline: none;
    border: none;
    color: #fff;
    margin-right: 20px;
}

.has-error~.select2-container--default {
    border: 1px solid #ff0000 !important;
    border-radius: 4px;
}

.loader125 {
    border: 15px solid #f3f3f3;
    border-top: 15px solid #3498db;
    border-radius: 50%;
    width: 125px;
    height: 125px;
    animation: spin 2s linear infinite;
}

/* SERVER DASHBOARD CSS :: STARTS */

.gauge-container {
    position: relative;
    box-shadow: 0px -10px 15px #05bfff26;
    background: conic-gradient(from 130.35deg at 50% 50%, #068af000 96deg, #05bfff78 222.75deg, #068af005 360deg);
    border-radius: 50%;
    position: relative;
    width: 100px;
    z-index: 1;
    margin-top:20px
}

.gauge {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gauge-container .needle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 50% 100%;
    transform: translate(-50%, -100%) rotate(2deg);
    transition: transform 1s ease;
    width: 5px;
    height: 75px;
    margin: 0 auto;
    position: relative;
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    z-index: -1;
    box-shadow: 0px 0px 16.182863235473633px 0px #fc983429;
    border-width: 0 3px 45px 3px;
    border-color: transparent transparent #0578D8 transparent;
}

.gauge-container .dot{
    background: linear-gradient(0deg, #FFFFFF, #FFFFFF),radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 57.81%, rgba(10, 4, 34, 0.3) 100%);
    border: 3px solid white;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    box-shadow: 0px 20px 35px #b6b698;
}

.gauge-container .clock {
    height: 110px;
    width: 110px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    position: absolute;
    left: -5px;
    top: -5px;
    transform: rotate(16deg);
}

.gauge-container .clock__indicator {
    position: absolute;
    left: calc(50% - 1px);
    width: 1px;
    transform-origin: bottom center;
    z-index: 2;
    border-radius: 1px;
    height: 53px;
    border-top: 5px solid #0578D8;
    background: none;
}

.gauge-container section:nth-of-type(1) {
    transform: rotateZ(calc(6deg * 38));
}

.gauge-container section:nth-of-type(2) {
    transform: rotateZ(calc(6deg * 40))
}

.gauge-container section:nth-of-type(3) {
    transform: rotateZ(calc(6deg * 41));
}

.gauge-container section:nth-of-type(4) {
    transform: rotateZ(calc(6deg * 42));
}

.gauge-container section:nth-of-type(5) {
    transform: rotateZ(calc(6deg * 43));
}

.gauge-container section:nth-of-type(6) {
    transform: rotateZ(calc(6deg * 44));
}

.gauge-container section:nth-of-type(7) {
    transform: rotateZ(calc(6deg * 45));
}

.gauge-container section:nth-of-type(8) {
    transform: rotateZ(calc(6deg * 46));
}

.gauge-container section:nth-of-type(9) {
    transform: rotateZ(calc(6deg * 47));
}

.gauge-container section:nth-of-type(10) {
    transform: rotateZ(calc(6deg * 48));
}

.gauge-container section:nth-of-type(11) {
    transform: rotateZ(calc(6deg * 49));
}

.gauge-container section:nth-of-type(12) {
    transform: rotateZ(calc(6deg * 50));
}

.gauge-container section:nth-of-type(13) {
    transform: rotateZ(calc(6deg * 51.8));
}

.gauge-container section:nth-of-type(14) {
    transform: rotateZ(calc(6deg * 52));
}

.gauge-container section:nth-of-type(15) {
    transform: rotateZ(calc(6deg * 53));
}

.gauge-container section:nth-of-type(16) {
    transform: rotateZ(calc(6deg * 54));
}

.gauge-container section:nth-of-type(17) {
    transform: rotateZ(calc(6deg * 55));
}

.gauge-container section:nth-of-type(18) {
    transform: rotateZ(calc(6deg * 56));
}

.gauge-container section:nth-of-type(19) {
    transform: rotateY(calc(6deg * 4)) rotateZ(calc(6deg * -5)) rotateX(-26deg);
}

.gauge-container section:nth-of-type(20) {
    transform: rotateZ(calc(6deg * 58.5));
}

.gauge-container section:nth-of-type(21) {
    transform: rotateZ(calc(6deg * 60));
}

.gauge-container section:nth-of-type(22) {
    transform: rotateZ(calc(6deg * 61));
}

.gauge-container section:nth-of-type(23) {
    transform: rotateZ(calc(6deg * 62));
}

.gauge-container section:nth-of-type(24) {
    transform: rotateZ(calc(6deg * 63));
}

.gauge-container section:nth-of-type(25) {
    transform: rotateZ(calc(6deg * 64));
}

.gauge-container section:nth-of-type(26) {
    transform: rotateZ(calc(6deg * 65));
}

.gauge-container section:nth-of-type(27) {
    transform: rotateZ(calc(6deg * 66));
}

.gauge-container section:nth-of-type(28) {
    transform: rotateZ(calc(6deg * 67));
}

.gauge-container section:nth-of-type(29) {
    transform: rotateZ(calc(6deg * 68));
}

.gauge-container section:nth-of-type(30) {
    transform: rotateZ(calc(6deg * 69));
}

.gauge-container section:nth-of-type(31) {
    transform: rotateZ(calc(6deg * 69.5 ));
}
.gauge-container section:nth-of-type(32) {
    transform: rotateZ(calc(6deg * 71));
}

.gauge-container section:nth-of-type(33) {
    transform: rotateZ(calc(6deg * 72));
}

.gauge-container section:nth-of-type(34) {
    transform: rotateZ(calc(6deg * 73));
}

.gauge-container section:nth-of-type(35) {
    transform: rotateZ(calc(6deg * 74));
}

.gauge-container section:nth-of-type(36) {
    transform: rotateZ(calc(6deg * 75));
}

.gauge-container section:nth-of-type(37) {
    transform: rotateZ(calc(6deg * 76));
}

.gauge-container section:nth-of-type(1),
.gauge-container section:nth-of-type(7),
.gauge-container section:nth-of-type(13)     {
    border-top-width: 10px;
    width: 2px;
    left: calc(50% - 7px);
}

.gauge-container section:nth-of-type(19) {
    height: 69px;
    top: -17px;
    width: 2px;
    border-top-width: 10px;
}

.gauge-container section:nth-of-type(25){
    height: 56px;
    top: -5px;
    width: 2px;
    border-top-width: 10px;
}


.gauge-container section:nth-of-type(31),
.gauge-container section:nth-of-type(37){
    border-top-width: 10px;
    width: 2px;
    left: calc(50% - -4px);
}

.chart-header a {
    letter-spacing: 0em;
    color: var(--primary-color);
    text-decoration: none;
}
.chart-header{
    padding: 20px 35px 25px 35px;
    border-bottom: 1px solid var(--table-border);
    background-color: var(--table-bgcolor);
    border-radius: 10px 10px 0px 0px;
}

.dashboard-wrapper .chart-header{
    padding: 10px 10px 0px 10px;
}
.dashboard-container .meter-chart-container{
    padding: 0px 0px 20px 0px;
}

.server-chart-section .guage-chart-section{
    max-height: 300px;
    min-height: 300px;
}

.dashboard-container .chart-header {
    padding:20px 20px 5px 20px;
}

.dashboard-container .gauge-container{
    margin-bottom: 5px;
}

.dashboard-container .meter-chart-container h3{
    font-size: 16px;
}

.dashboard-container .meter-chart-container p{
    margin-top: 5px;
    color: var(--light-text-color);
    font-weight: 300;
    letter-spacing: 1px;
}

.dashboard-container .meter-chart-container img{
    width: 18px;
    height: 18px;
    margin-right: 5px;
}

.dashboard-container .meter-chart-container::before,
.dashboard-container .meter-chart-container::after{
    content: unset !important;
}

.dashboard-container .gauge-container{
    width: 160px;
}

.dashboard-container .gauge-container .clock {
    height: 170px;
    width: 170px;
}

.dashboard-container .gauge {
    width: 160px;
    height: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dashboard-container .gauge-container .clock__indicator{
    height: 85px;
}

.dashboard-container .gauge-container .needle {
    border-width: 0 5px 72px 5px;
}

.dashboard-container .info::before{
    border: 1px solid var(--light-gray);
}

.dashboard-container i::before {
    background-color: var(--light-gray);
}

.dashboard-container .network-traffic-chart,
.dashboard-container .system-load-chart{
    height: 472px;
}

.dashboard-container .process-chart{
    height: 285px;
}

.process-chart-area{
    position: absolute;
    width: 94%;
    bottom: 10px;
    height: 65px;
    margin-right: 3%;
    margin-left: 3%;
}

.chart-data{
    padding: 35px 10px;
}

.chart-data h3{
    color: var(--gray-color);
    font-size: 36px;
    font-weight: 600;
    line-height: 50px;
    margin-bottom: 10px;
}

.chart-data p{
    font-size: 14px;
    font-weight: 300;
    line-height: 16.71px;
    letter-spacing: 1px;
    color: var(--light-text-color);
}

.dashboard-container .top-process-chart{
    height: 400px;
}

.top-process-chart .health-bar-section .bar-container{
    width: 100%;
}

.top-process-chart .health-bar-section {
    padding: 25px;
    gap: 18px 20px;
}

.top-process-chart .health-bar-section .bar-container .chart-heading:first-child p{
    min-width: 100px;
}

.top-process-chart .health-bar-section .bar-container .chart-heading:last-child p{
    margin-left: 10px;
    text-align: right;
}

.top-process-chart .health-bar-section .light-bar{
    background:linear-gradient(270deg, #0271D0 -5.74%, #068AF0 109.29%);
}

.dashboard-container .usage-chart{
    margin-top: 30px;
    min-height: 560px;
    max-height: 560px;
}

.server-section{
    min-width: 25%;
    max-width: 25%;
}
.dashboard.server-section{
    min-width: 30%;
    max-width: 30%;
}
.server-chart-area{
    min-width: calc(100% - 20px);
    max-width: calc(100% - 20px);
}

.server-section .top-header{
    padding: 20px;
}

.server-section .top-header button{
    height: 36px;
    width: 36px;
    border-radius: 5px;
    outline: none;
    border: none;
    text-decoration: none;
    background-color: var(--light-stroke);
    display: flex;
    justify-content: center;
    align-items: center;
}

.server-section .top-header button:last-child{
    min-width: 96px !important;
    background-color: var(--primary-color) !important;
    color: var(--white-color) !important;
    border-radius: 70px;
    font-size: 18px;
    font-weight: 600;
    line-height: 25.2px;
}

[data-theme="dark"] .server-section .top-header button {
    background-color: var(--dark-theme-button-bg);
    color: var(--light-gray);
}

.server-img{
    display: flex;
    justify-content: center;
    align-items: center;
}

.server-img .img-fluid{
    height: auto;
    max-width: 100%;
}

.server-details .disk-space-chart{
    min-height: 350px;
    max-height: 350px;
    border-top: 1px solid var(--light-stroke);
}

.server-details .cpu-usage-chart{
    max-height: 320px;
    border-top: 1px solid var(--light-stroke);
}

.server-details .cpu-usage-chart .meter-chart-container {
    padding: 0 0px 20px 0px;
}

.server-details .server-btn-group button{
    width: 100%;
    padding: 0px 20px;
    height: var(--modal-input-height);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0em;
    border-radius: 5px;
    outline: none;
    border: none;
    text-decoration: none;
    background-color: var(--light-stroke);
    color: var(--gray-color);
    margin-bottom: 12px;
}

[data-theme="dark"] .server-details .server-btn-group button {
    background-color: var(--dark-theme-button-bg);
    color: var(--light-gray);
}

.server-details .server-btn-group {
    padding: 20px 20px 0px 20px;
}

.server-details .server-btn-group button.upgrade-btn{
    background-color: var(--primary-color) !important;
    color: var(--white-color) !important;
}

.about-server{
    padding: 20px 20px 0px 20px;
}

.about-server p,
.about-server span{
    font-size: 14px;
    font-weight: 600;
    line-height: 19.6px;
    color: var(--gray-color);
}

.about-server span{
    font-weight: 400;
}

.about-server div{
    border-top: 1px solid var(--light-stroke);
    padding: 15px 10px;
}

.about-server div:last-child{
    padding-bottom: 0px !important;
}

.usage-chart-section{
    margin-top: 20px;
}



/* SERVER DASHBOARD CSS :: ENDS */

.canvas-w-100\% {
    width: 100% !important;
}