@import url("/assets/plugins/fontawesome/css/all.min.css");
@import url("/assets/branding/plugins/global/font/inter/stylesheet.css");
@import url("/assets/css/custom.css");

/*:root {
    --bs-primary: #007D3B;
    --bs-orange: #F78200;
    --bs-purple: #7239ea;
    --bs-info: #1b84ff;
    --bs-secondary: #f1f1f4;
    --bs-white: #FFFFFF;
    --bs-light: #F9F9F9;
    --bs-success: #50cd89;
    --bs-info-active: #056ee9;
    --bs-primary-active: #026b33;
    --bs-primary-light: rgb(0, 125, 59, 0.2);
    --bs-purple-light: rgb(114, 57, 234, 0.2);
    --bs-info-light: rgb(27, 132, 255, 0.2);
    --bs-orange-light: rgba(247, 130, 0, 0.2);
    --bs-text-primary: #007D3B;
    --bs-text-black: #000000;
    --bs-text-white: #ffffff;
    --bs-text-purple: #7239ea;
    --bs-text-info: #1b84ff;
    --bs-text-orange: #F78200;
    --bs-text-indigo: #17a2b8;
    --bs-text-green: #a6ce39;
    --bs-text-muted: #a1a5b7;
    --bs-bg-info: #7239ea;
    --bs-menu-link-color-active: #007D3B;
    --bs-menu-link-color-hover: #007D3B;
    --bs-app-bg-color: #f5f8fa;
    --bs-border-width: 1px !important;
    !* Social Color *!
    --bs-bg-whatsapp: #50cd89;
    --bs-bg-indigo: #17a2b8;
    --bs-bg-instagram: #dd2a7b;
    --bs-bg-x: #000000;
    --bs-bg-green: #a6ce39;
    --bs-bg-linkedin: #0077B5;
    --bs-bg-facebook: #1877F2;
    --bs-bg-messenger: #FF6070;
    --bs-bg-telegram: #0088cc;
    --bs-bg-snapchat: #FFFC00;
    --bs-bg-tiktok: #25F4EE;
    --bs-bg-line: #21B94E;
    --bs-text-whatsapp: #50cd89;
    --bs-text-instagram: #dd2a7b;
    --bs-text-x: #000000;
    --bs-text-linkedin: #0077B5;
    --bs-text-facebook: #1877F2;
    --bs-text-messenger: #FF6070;
    --bs-text-telegram: #0088cc;
    --bs-text-snapchat: #FFFC00;
    --bs-text-tiktok: #25F4EE;
    --bs-text-line: #21B94E;
    --bs-text-dark: #181C32;
    --bs-text-gray-100: #F9F9F9;
    --bs-text-gray-200: #F4F4F4;
    --bs-text-gray-300: #E1E3EA;
    --bs-text-gray-400: #B5B5C3;
    --bs-text-gray-500: #A1A5B7;
    --bs-text-gray-600: #7E8299;
    --bs-text-gray-700: #5E6278;
    --bs-text-gray-800: #3F4254;
    --bs-text-gray-900: #181C32;
    --bs-border-color: #F4F4F4;
    --bs-primary-inverse: #ffffff;
    --bs-secondary-inverse: #3F4254;
    --bs-light-inverse: #7E8299;
    --bs-success-inverse: #ffffff;
    --bs-info-inverse: #ffffff;
    --bs-warning-inverse: #ffffff;
    --bs-danger-inverse: #ffffff;
    --bs-dark-inverse: #ffffff;
    --bs-secondary-active: #B5B5C3;
    --bs-light-active: #F4F4F4;
    --bs-success-active: #47be7d;
    --bs-warning-active: #f1bc00;
    --bs-danger-active: #d9214e;
    --bs-dark-active: #131628;
    --bs-secondary-light: #F9F9F9;
    --bs-success-light: #e8fff3;
    !* --bs-info-light: #f8f5ff; *!
    --bs-warning-light: #fff8dd;
    --bs-danger-light: #fff5f8;
    --bs-dark-light: #F4F4F4;
    !* Pagination *!
    --bs-component-hover-color: #007D3B;
    --bs-component-active-color: #ffffff;
    --bs-component-active-bg: #007D3B;
    !* Link *!
    --bs-link-color-rgb: #007D3B;
    --bs-link-hover-color-rgb: rgb(0 125 59 / 70%);
    --bs-app-sidebar-light-separator-color: #E4E6EF;
    --bs-app-sidebar-light-menu-link-bg-color-active: #F4F6FA;
    !* Nav Pills *!
    !*--bs-nav-pills-link-active-bg: #007D3B;
    --bs-nav-pills-link-active-color: #ffffff;
    --bs-nav-link-color: #007D3B;
    -bs-nav-link-hover-color: #007D3B;*!
    --bs-body-font-family: 'Inter', Helvetica, "sans-serif";
}*/

:root,[data-bs-theme=light] {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-black: #000000;
    --bs-white: #ffffff;
    --bs-gray: #78829D;
    --bs-gray-dark: #252F4A;
    --bs-gray-100: #F9F9F9;
    --bs-gray-200: #F1F1F4;
    --bs-gray-300: #DBDFE9;
    --bs-gray-400: #C4CADA;
    --bs-gray-500: #99A1B7;
    --bs-gray-600: #78829D;
    --bs-gray-700: #4B5675;
    --bs-gray-800: #252F4A;
    --bs-gray-900: #071437;
    --bs-light: #F9F9F9;
    --bs-primary: #1B84FF;
    --bs-secondary: #F1F1F4;
    --bs-success: #17C653;
    --bs-info: #7239EA;
    --bs-warning: #F6C000;
    --bs-danger: #F8285A;
    --bs-dark: #1E2129;
    --bs-light-rgb: 249,249,249;
    --bs-primary-rgb: 27,132,255;
    --bs-secondary-rgb: 241,241,244;
    --bs-success-rgb: 23,198,83;
    --bs-info-rgb: 114,57,234;
    --bs-warning-rgb: 246,192,0;
    --bs-danger-rgb: 248,40,90;
    --bs-dark-rgb: 30,33,41;
    --bs-primary-text-emphasis: #0b3566;
    --bs-secondary-text-emphasis: #606062;
    --bs-success-text-emphasis: #094f21;
    --bs-info-text-emphasis: #2e175e;
    --bs-warning-text-emphasis: #624d00;
    --bs-danger-text-emphasis: #631024;
    --bs-light-text-emphasis: #4B5675;
    --bs-dark-text-emphasis: #4B5675;
    --bs-primary-bg-subtle: #d1e6ff;
    --bs-secondary-bg-subtle: #fcfcfd;
    --bs-success-bg-subtle: #d1f4dd;
    --bs-info-bg-subtle: #e3d7fb;
    --bs-warning-bg-subtle: #fdf2cc;
    --bs-danger-bg-subtle: #fed4de;
    --bs-light-bg-subtle: #fcfcfc;
    --bs-dark-bg-subtle: #C4CADA;
    --bs-primary-border-subtle: #a4ceff;
    --bs-secondary-border-subtle: #f9f9fb;
    --bs-success-border-subtle: #a2e8ba;
    --bs-info-border-subtle: #c7b0f7;
    --bs-warning-border-subtle: #fbe699;
    --bs-danger-border-subtle: #fca9bd;
    --bs-light-border-subtle: #F1F1F4;
    --bs-dark-border-subtle: #99A1B7;
    --bs-white-rgb: 255,255,255;
    --bs-black-rgb: 0,0,0;
    --bs-font-sans-serif: Inter,Helvetica,"sans-serif";
    --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #071437;
    --bs-body-color-rgb: 7,20,55;
    --bs-body-bg: #ffffff;
    --bs-body-bg-rgb: 255,255,255;
    --bs-emphasis-color: #000000;
    --bs-emphasis-color-rgb: 0,0,0;
    --bs-secondary-color: rgba(7, 20, 55, 0.75);
    --bs-secondary-color-rgb: 7,20,55;
    --bs-secondary-bg: #F1F1F4;
    --bs-secondary-bg-rgb: 241,241,244;
    --bs-tertiary-color: rgba(7, 20, 55, 0.5);
    --bs-tertiary-color-rgb: 7,20,55;
    --bs-tertiary-bg: #F9F9F9;
    --bs-tertiary-bg-rgb: 249,249,249;
    --bs-heading-color: #071437;
    --bs-link-color: #1B84FF;
    --bs-link-color-rgb: 27,132,255;
    --bs-link-decoration: none;
    --bs-link-hover-color: #056EE9;
    --bs-link-hover-color-rgb: 5,110,233;
    --bs-link-hover-decoration: none;
    --bs-code-color: #b93993;
    --bs-highlight-color: #071437;
    --bs-highlight-bg: #fff3cd;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #F1F1F4;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
    --bs-border-radius: 0.475rem;
    --bs-border-radius-sm: 0.425rem;
    --bs-border-radius-lg: 0.625rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-xxl: 2rem;
    --bs-border-radius-2xl: var(--bs-border-radius-xxl);
    --bs-border-radius-pill: 50rem;
    --bs-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
    --bs-box-shadow-sm: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05);
    --bs-box-shadow-lg: 0 1rem 2rem 1rem rgba(0, 0, 0, 0.1);
    --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
    --bs-focus-ring-width: 0.25rem;
    --bs-focus-ring-opacity: 0.25;
    --bs-focus-ring-color: rgba(27, 132, 255, 0.25);
    --bs-form-valid-color: #17C653;
    --bs-form-valid-border-color: #17C653;
    --bs-form-invalid-color: #F8285A;
    --bs-form-invalid-border-color: #F8285A
}

[data-kt-app-layout=light-sidebar][data-kt-app-header-fixed=true] .app-header {
    background-color: var(--bs-white) !important;
}

.app-default, body{
    background-color: var(--bs-app-bg-color);
}

i.bi, i[class*=" fa-"],
i[class*=" fonticon-"],
i[class*=" la-"],
i[class^=fa-],
i[class^=fonticon-],
i[class^=la-] {
    color: inherit;
}

p {
    margin-top: 0;
    margin-bottom: 0;
}

.alert.alert-warning {
    color: #665411 ;
}

/* Custom Color */
.bg-theme {
    background-color: var(--bs-primary);
}

.bg-light-purple {
    background-color: var(--bs-purple-light) !important;
}

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

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

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

.bg-green {
    --bs-bg-opacity: 1;
    background-color: var(--bs-bg-green) !important;
}

.bg-whatsapp {
    --bs-bg-opacity: 1;
    background-color: var(--bs-bg-whatsapp) !important;
}
.bg-instagram {
    --bs-bg-opacity: 1;
    background-color: var(--bs-bg-instagram) !important;
}
.bg-x {
    --bs-bg-opacity: 1;
    background-color: var(--bs-bg-x) !important;
}
.bg-linkedin {
    --bs-bg-opacity: 1;
    background-color: var(--bs-bg-linkedin) !important;
}
.bg-facebook {
    --bs-bg-opacity: 1;
    background-color: var(--bs-bg-facebook) !important;
}
.bg-messenger {
    --bs-bg-opacity: 1;
    background-color: var(--bs-bg-messenger) !important;
}
.bg-telegram {
    --bs-bg-opacity: 1;
    background-color: var(--bs-bg-telegram) !important;
}
.bg-snapchat {
    --bs-bg-opacity: 1;
    background-color: var(--bs-bg-snapchat) !important;
}
.bg-tiktok {
    --bs-bg-opacity: 1;
    background-color: var(--bs-bg-tiktok) !important;
}
.bg-line {
    --bs-bg-opacity: 1;
    background-color: var(--bs-bg-line) !important;
}
.bg-purple {
    background-color: var(--bs-purple);
}
.bg-indigo {
    background-color: var(--bs-bg-indigo) !important;
}
.bg-light-green {
    background-color: var(--bs-green-light);
}

.bg-orange {
    background-color: var(--bs-orange);
}

.bg-light-orange {
    background-color: var(--bs-orange-light);
}

.text-indigo {
    --bs-text-opacity: 1;
    color: var(--bs-text-indigo) !important;
}

.text-whatsapp {
    --bs-text-opacity: 1;
    color: var(--bs-text-whatsapp) !important;
}

.text-instagram {
    --bs-text-opacity: 1;
    color: var(--bs-text-instagram) !important;
}
.text-x {
    --bs-text-opacity: 1;
    color: var(--bs-text-x) !important;
}
.text-linkedin {
    --bs-text-opacity: 1;
    color: var(--bs-text-linkedin) !important;
}

.text-facebook {
    --bs-text-opacity: 1;
    color: var(--bs-text-facebook) !important;
}
.text-messenger {
    --bs-text-opacity: 1;
    color: var(--bs-text-messenger) !important;
}
.text-telegram {
    --bs-text-opacity: 1;
    color: var(--bs-text-telegram) !important;
}
.text-snapchat {
    --bs-text-opacity: 1;
    color: var(--bs-text-snapchat) !important;
}
.text-tiktok {
    --bs-text-opacity: 1;
    color: var(--bs-text-tiktok) !important;
}
.text-line {
    --bs-text-opacity: 1;
    color: var(--bs-text-line) !important;
}

.text-orange {
    color: var(--bs-text-orange);
}

.badge-purple {
    background-color: var(--bs-purple);
    color: var(--bs-white)
}

.badge-light-purple {
    background-color: var(--bs-purple-light);
    color: var(--bs-purple);
}

.nav-line-tabs .nav-item .nav-link {
    margin: 0 .5rem;
    font-size: 15px;
    font-weight: 500;
}

.nav-line-tabs .nav-item .nav-link.active,
.nav-line-tabs .nav-item .nav-link:hover:not(.disabled),
.nav-line-tabs .nav-item.show .nav-link {
    color: var(--bs-primary);
}

/*================================
        General Style
  ================================*/
body,html,
html.theme body{
    font-family: var(--bs-body-font-family);
    font-size: 13px;
    font-weight: 400;
    height: 100% !important;
}

a {
    color: var(--bs-link-color-rgb);
}

a:hover {
    color: var(--bs-link-hover-color-rgb);
}

.select2.select2-container {
    width: 100%;
}
/*
.select2-container .select2-selection--single {
    height: 43.56px;
    border: 1px solid var(--bs-gray-300);
    border-radius: .475rem;
}*/

.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    line-height: 40.56px;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--bs-gray-700);
    padding: 0 3rem 0 1rem;
}

/*Login*/
.auth-bg {
    background:  url("/assets/branding/media/auth/auth-bg.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
}

/* Nav Pills */
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: var(--bs-primary-light);
    color: var(--bs-primary);
}

.nav-link {
    color: var(--bs-gray-700);
}

.nav-link:focus, .nav-link:hover {
    color: var(--bs-primary);
}

/*Table*/
/*div.dataTables_wrapper .table-responsive {
    overflow: hidden;
}*/

table.dataTable thead tr th,
table.dataTable thead .sorting {
    background-color: #f9f9f9 !important;
}

table.dataTable.no-footer {
    border-bottom: none !important;
}

#kams_company_datatable thead,
#dashboard_activity thead,
#activity_data_table thead{
    display:none;
}

#storage_package_table thead {
    display: none !important;
}

.call-tab-btn {
    top: 9px !important;
}

#agent_activity_table thead {
    display: none !important;
}

.time-log .timeline-label:before {
    left: 83px;
}

.highcharts-title {
    display: none !important;
}

.chart-container {
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

.chart-container.visible {
    opacity: 1;
}

.active-check-input.form-check-input:checked {
    background-color: #50cd89;
    border-color: #50cd89;
}

.inactive-check-input.form-check-input:checked {
    background-color: #ffc700;
    border-color: #ffc700;
}

.block-check-input.form-check-input:checked {
    background-color: #f1416c;
    border-color: #f1416c;
}

.unblock-check-input.form-check-input:checked {
    background-color: #181c32;
    border-color: #181c32;
}

.suspended-check-input.form-check-input:checked {
    background-color: #b8b8b8;
    border-color: #b8b8b8;
}

#bundle_datatable .card h3 {
    max-width: 200px !important;
}

#bundle_datatable thead {
    display: none;
}

/*#bundle_datatable_pbx .card h3 {
    max-width: 200px !important;
}*/

.bundle_subscription_button_pbx ,
.bundle_subscription_button ,
.bundle_subscription_button_omni ,
.bundle_subscription_button_whatsapp ,
.bundle_subscription_button_ai ,
.bundle_subscription_button_storage ,
.bundle_subscription_button_audio ,
.bundle_subscription_button_utalk{
    opacity: 0;
    visibility: hidden;
    transition: .3s all ease-in-out;
}

#bundle_datatable_pbx .card:hover .bundle_subscription_button_pbx ,
#bundle_datatable .card:hover .bundle_subscription_button ,
#bundle_datatable_omni .card:hover .bundle_subscription_button_omni ,
#bundle_datatable_whatsapp .card:hover .bundle_subscription_button_whatsapp ,
#ai_bundle_datatable_omni .card:hover .bundle_subscription_button_ai ,
#storage_package_table .card:hover .bundle_subscription_button_storage ,
#bundle_datatable_audio_conf .card:hover .bundle_subscription_button_audio ,
#bundle_datatable_utalk .card:hover .bundle_subscription_button_utalk {
    opacity: 1;
    visibility: visible;
    transition: .3s all ease-in-out;
}

#bundle_datatable_pbx thead {
    display: none;
}

#card_ext_datatable thead {
    display: none !important;
}

#card_ext_datatable_pbx thead {
    display: none !important;
}

#log-viewer-list .card.sticky-top {
     top: 70px
}

.nav-pills .nav-link {
    font-size: 14px; /* Larger font size */

    border-radius: 5px; /* Smooth corners */
    text-align: left; /* Align text for readability */
}

.table_title_mine {
    font-size: 12px;
}

.paging_bootstrap {
    cursor: pointer;
}

.inactive_cls {
    color: red;
}

.inactive {
    color: red;
}

.btn-group{
    float: left;
    /*background-color: azure;*/
}

.btn-group-vertical>.btn, .btn-group>.btn {
    position: relative;
    flex: 1 1 auto;
    background-color: white;
}

.system-version h5 {
    position: absolute;
    bottom: -44px;
    right: 27px;
}

.center-text {
    display: flex;
    flex-direction: column;
}

.center-text .text-primary {
    font-size: 14px;
    margin-top: 5px;
}

.theme-main {
    display: flex;
    align-items: center;
}

.theme-main .theme-avtar {
    margin-right: 15px;
}

@media only screen and (max-width: 575px) {
    .system-version h5 {
        position: unset;
        margin-bottom: 0;
    }

    .system-version {
        text-align: center;
        margin-bottom: -22px;
    }
}

.time-log .timeline-label:before {
    left: 83px;
}

.highcharts-title {
    display: none !important;
}

.morebox {
    text-align: center;
    /*font-weight:bold;
color:#333333;
text-align:center;
border:solid 1px #333333;
padding:8px;
margin-top:8px;
margin-bottom:8px;
-moz-border-radius: 6px;-webkit-border-radius: 6px;*/
}

.morebox a {
    font-weight: bold;
    color: #333333;
    text-align: center;
    border: solid 1px #333333;
    padding: 8px;
    margin-top: 8px;
    margin-bottom: 8px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    display: block;
}

.morebox img {
    display: inline;
    text-align: center;
}

/*.morebox a{ color:#333333; text-decoration:none}*/
.morebox a:hover {
    color: #333333;
    text-decoration: none
}

/* Add CSS transitions */
.filter {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.filter.show {
    max-height: 1000px;
    /* Adjust based on content height */
    opacity: 1;
}

.time-log .timeline-label:before {
    left: 83px;
}

.highcharts-title {
    display: none !important;
}

.accordion-collapse .accordion-body .overflow-scroll {
    max-height: calc(100vh - 310px)
}

.ringing-animate {
    --fa-animation-duration: 2s;
    --fa-fade-opacity: 0.6;
}

.colored-toast.swal2-icon-success {
    background-color: #a5dc86 !important;
}

.colored-toast.swal2-icon-error {
    background-color: #f27474 !important;
}

.colored-toast.swal2-icon-warning {
    background-color: #f8bb86 !important;
}

.colored-toast.swal2-icon-info {
    background-color: #3fc3ee !important;
}

.colored-toast.swal2-icon-question {
    background-color: #87adbd !important;
}

.colored-toast .swal2-title {
    color: white;
}

.colored-toast .swal2-close {
    color: white;
}

.colored-toast .swal2-html-container {
    color: white;
}

.grayscale {
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

/* Optional: Restore original color on hover */
.grayscale:hover {
    filter: grayscale(0%);
}

.log-level-error {
    color: #dc3545;
    font-weight: bold;
}

.log-level-critical {
    color: #a71d2a;
    font-weight: bold;
}

.log-level-warning {
    color: #ffc107;
}

.log-level-info {
    color: #0d6efd;
}

.log-level-debug {
    color: #6c757d;
}

.log-level-audit {
    color: #28a745;
}

.search-container {
    margin-bottom: 1rem;
}

.has-error input {
    border-color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
.has-error textarea {
    border-color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
.has-error{
    border-color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}

.has-success input {
    border-color: green;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
.has-success textarea {
    border-color: green;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
.has-success{
    border-color: green;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
#myDiagramDiv
{
    flex-grow: 1; height: 750px; background-color:white;
}

#addNew
{
    position: relative;cursor: pointer;
}
#delNew
{
    cursor: pointer;
}
#keypaddiv > div {
    float: left;
}
.controls-row
{
    margin: 0 !important;
}

/*================================
        Modal
  ================================*/
#add_agent_modal .modal-body,
#kt_modal_create_app .modal-body,
#kt_modal_main .modal-body{
    height: calc(100vh - 17rem);
    overflow-y: scroll;
}

#add_agent_modal.add_agent_modal .modal-body ,
#kt_modal_create_app.kt_modal_create_app .modal-body {
    height: auto;
}

.plyr--audio .plyr__controls {
    background-color: transparent;
    border: none;
    color: #fff;
    width: 100%;
}

audio {
    width: 100%;
    min-width: 230px;
    height: 45px;
    background-color: #fff;
}
audio::-webkit-media-controls-panel {
    background-color: #fff;
}

/*================================
        Apex Chart
  ================================*/
.apexcharts-legend.apexcharts-align-center.apx-legend-position-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
}

.apexcharts-legend-series {
    display: flex;
    align-items: center;
    gap: 6px;
}


/*================================
        CMT-Custom-Style
  ================================*/
html.theme .sidebar-wrapper .metismenu .mm-active > a,
html.theme .sidebar-wrapper .metismenu a:active
 {
    background-color: transparent;
    color: var(--bs-primary);
}
html.theme .sidebar-wrapper .metismenu a:focus,
html.theme .sidebar-wrapper .metismenu a:hover{
    background-color: transparent;
    color: var(--bs-gray-900);
}
.sidebar-wrapper.new_users_class .metismenu a{
    color: var(--bs-gray-700);
}
.sidebar-wrapper .metismenu a .parent-icon {
color: var(--bs-gray-500);
    font-size: 1.5rem;
}
.sidebar-wrapper.new_users_class .metismenu a{

}
.sidebar-wrapper .metismenu a .menu-title{
    font-size: 13px;
    color: var(--bs-gray-500);;
}

.badge.rounded-pill.px-1.py-0 {
    padding: 4px 6px !important;
}

.accordion-item {
    border: 1px solid var(--bs-accordion-border-color) !important;
}

/*.form-check-input[type=checkbox] {
    background-size: 1rem;
}*/

div.dataTables_wrapper div.dataTables_filter {
    float: right;
}

.app-container .wizard .wizard-form .progressbar-list.active::before {
    font-family: "Font Awesome 6 Pro";
    background-color: var(--bs-primary);
    border: 1px solid var(--bs-primary);
    box-shadow: 0 0 0 7.5px var(--bs-primary-light);
}

:is([data-kt-app-layout=light-sidebar],
[data-kt-app-layout=light-header],
[data-kt-app-layout=dark-header]) .app-toolbar .form-select.form-select {
    background-color: var(--bs-gray-100);
}

.app-container .wizard .wizard-form .progressbar-list.active::after {
    background-color: var(--bs-primary);
}

/* Upload Files */
.ff_fileupload_wrap table.ff_fileupload_uploads tr {
    border-bottom: 1px solid #f4f4f4;
}

.ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_preview .ff_fileupload_preview_image {
    width: 40px;
    height: 40px;
    background-color: var(--bs-info);
}

.ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_summary .ff_fileupload_filename input {
    font-family: var(--bs-body-font-family);
    font-size: 14px;
    font-weight: 500;
    border: none;
    padding: 0;
    margin-bottom: 5px;
}

.ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_summary .ff_fileupload_filename input:focus,
.ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_summary .ff_fileupload_filename input:hover {
    border: none;
}

.ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_actions button {
    width: 34px;
    height: 34px;
    background-size: 1.5rem;
}

.form-check-input:checked{
    background-color:var(--bs-text-primary) !important;
    border-color: var(--bs-text-primary)!important;
}

.disable-widget i{
    color:var(--bs-text-muted) !important;
}

.disable-widget span{
    color:var(--bs-text-muted) !important;
}

.btn.btn-active-color-purple:Hover i,
.btn.btn-active-color-purple.active i{
    color: var(--bs-purple) !important;
}

.btn.btn-active-color-indigo:Hover i,
.btn.btn-active-color-indigo.active i{
    color: var(--bs-bg-indigo) !important;
}

/*================================
        DialPad
  ================================*/
.dial-pad-wrap .dial-table{
    width:100%;
}

.dial-pad-wrap .dial-table .dial-table-row{
    display: flex;
    align-items: center;
    justify-content: center;
}

.dial-pad-wrap .dial-table .dial-table-col{
    cursor:default;
    width:33.333333%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dial-key-wrap{
    margin-bottom: 10px;
    transition:background .3s ease-in-out 0s;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.dial-pad-wrap .dial-table .dial-sub-key{
    text-transform:uppercase;
}

.dial-pad-wrap .no-sub-key .dial-sub-key{
    display:none;
}

.call-tab-btn {
    position: absolute;
    top: 14px;
    right: 18px;
}

#incoming_call {
    position: fixed;
    top: 38px;
    right: 20px;
    z-index: 100;
}

.dial-connected-list {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: .3s all ease-in-out;
}

.dial-connected-list.active {
    left: 0;
    opacity: 1;
    visibility: visible;
    transition: .3s all ease-in-out;
}


/*================================
        OmniChat
  ================================*/

/*Sidebar*/
#layout-menu{
    height:100%;
}

.bg-menu-theme {
    background-color: var(--bs-white) !important;
    height:100% !important;
}

.menu-vertical, .menu-vertical .menu-block, .menu-vertical .menu-inner > .menu-item {
    width:265px;
}

.light-style .menu .app-brand.demo {
    height: 70px;
    border-bottom: 1px dashed #f5f5f5;
}

/* Logo */
.layout-menu-collapsed .logo-default,
.app-brand-logo img.logo-minimize,
.layout-menu-collapsed.layout-menu-hover .logo-minimize{
    display: none
}

.layout-menu-collapsed img.logo-minimize,
.layout-menu-collapsed.layout-menu-hover .logo-default{
    display: block;
}

/* sidebar toggle btn */
.layout-menu-collapsed.layout-menu-hover aside#layout-menu ,
.layout-menu-collapsed.layout-menu-hover aside#layout-menu .app-brand ,
aside#layout-menu .app-brand ,
aside#layout-menu {
    overflow: visible;
}

/*.layout-menu-collapsed aside#layout-menu .app-brand ,
.layout-menu-collapsed aside#layout-menu {
    overflow: hidden;
}*/

.app-brand.demo .layout-menu-toggle.menu-link {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(113, 121, 136, 0.2);
    background-color: var(--bs-white);
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translate(-50%, -50%);
    border-radius: 0.425rem;
}

.app-brand.demo .layout-menu-toggle.menu-link:hover {
    color: var(--bs-text-primary);
}

.fs-1:before ,
.fs-2:before ,
.fs-3:before ,
.fs-4:before ,
.fs-5:before ,
.fs-6:before {
    font-size: inherit;
}

/*Header*/
.layout-navbar-fixed .layout-navbar.navbar-detached {
    width: calc(100% - 265px);
    padding: 0 20px;
    border-radius: 0;
    border-bottom: 1px dashed var(--bs-app-sidebar-light-separator-color);
    height:70px;
}

.layout-navbar-fixed.layout-menu-collapsed .layout-navbar.navbar-detached {
    width: calc(100% - 4.375rem);
}

.layout-navbar-fixed .layout-page:not(.window-scrolled) .layout-navbar.navbar-detached {
    background: var(--bs-white);
}

.layout-navbar-fixed .window-scrolled .layout-navbar.navbar-detached {
    box-shadow: none;
    padding: 0 20px;
}

.card-header, .card-footer {
    display: flex;

    justify-content: space-between;
    align-items: center !important;
    flex-wrap: wrap;
    min-height: 70px;
    padding: 0 2.25rem;
    color: var(--bs-card-cap-color);
    background-color: var(--bs-card-cap-bg);
    border-bottom: 1px solid var(--bs-card-border-color);
}

@media (min-width: 1200px) {
    .layout-navbar-fixed:not(.layout-menu-collapsed) .layout-content-navbar:not(.layout-without-menu) .layout-navbar, .layout-menu-fixed.layout-navbar-fixed:not(.layout-menu-collapsed) .layout-content-navbar:not(.layout-without-menu) .layout-navbar, .layout-menu-fixed-offcanvas.layout-navbar-fixed:not(.layout-menu-collapsed) .layout-content-navbar:not(.layout-without-menu) .layout-navbar {
        left: 265px;
    }
    .layout-menu-fixed:not(.layout-menu-collapsed) .layout-page, .layout-menu-fixed-offcanvas:not(.layout-menu-collapsed) .layout-page {
        padding-left: 265px;
    }
}
@media (max-width: 1199px) {

    .layout-navbar-fixed .layout-navbar.navbar-detached {
        width: 100% !important;
    }

    .layout-menu-collapsed .app-brand.demo .layout-menu-toggle.menu-link {
        display: none;
    }

    .layout-menu-collapsed.layout-menu-expanded .app-brand.demo .layout-menu-toggle.menu-link {
        display: inline-flex;
    }
}

/*Main*/
.content-wrapper .container-fluid {
    padding: 30px !important
}

.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
    padding-top: 70px !important;
}

#path-container h3.page-heading {
    font-size: 1.35rem;
    font-weight: 600;
}

#path-container .breadcrumb {
    padding-bottom: 1.5rem;
    font-size: .85rem;
    font-weight: 500;
}

#path-container .breadcrumb .breadcrumb-item a{
    color: var(--bs-text-muted) !important
}

.breadcrumb-item:focus,
.breadcrumb-item:hover,
.breadcrumb-item.active {
    color: var(--bs-primary);
}

.breadcrumb-item + .breadcrumb-item::before {
    float: left;
    padding-right: var(--bs-breadcrumb-item-padding-x);
    color: var(--bs-text-muted);
    content: var(--bs-breadcrumb-divider, "-");
}

.card {
    box-shadow: 0 0 20px 0px rgba(76, 87, 125, 0.02) !important;
}

.card .card-header + .card-body, .card .card-header + .card-content > .card-body:first-of-type, .card .card-header + .collapse > .card-body, .card .card-header + .collapsing > .card-body, .card .card-body + .card-footer {
    padding: 2rem 2.25rem;
}

.nav-tabs .tab-slider {
    background-color: var(--bs-primary);
}

.nav .nav-link:not(.active):hover {
    color: var(--bs-primary);
}

.btn:not(.btn-outline):not(.btn-dashed):not(.border-hover):not(.border-active):not(.btn-flush):not(.btn-icon) {
    padding: calc(.775rem + 1px) calc(1.5rem + 1px);
}

/*Form*/
.form-check-input {
    width: 1.55rem;
    height: 1.55rem;
}

.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: 0;
}

.form-switch .form-check-input:checked[type=checkbox] {
    background-size: contain;
    width: 3.25rem;
}

.form-check-input:checked[type=checkbox] {
    background-size: .9rem;
}

.form-control{
    padding:.775rem 1rem;
}

.form-select{
    padding:.775rem 3rem .775rem 1rem;
}

.form-select.form-select-solid ,
.form-control.form-control-solid {
    background-color: var(--bs-gray-100);
    border-color: var(--bs-gray-100);
    color: var(--bs-gray-700);
    transition: color .2s ease;
}

.dropdown.show>.form-select.form-select-solid,
.form-select.form-select-solid.active,
.form-select.form-select-solid.focus,
.form-select.form-select-solid:active,
.form-select.form-select-solid:focus,
.dropdown.show>.form-control.form-control-solid,
.form-control.form-control-solid.active,
.form-control.form-control-solid.focus,
.form-control.form-control-solid:active,
.form-control.form-control-solid:focus {
    background-color: var(--bs-gray-200);
    border-color: var(--bs-gray-200) !important;
    color: var(--bs-gray-700);
    box-shadow: none !important;
    transition: color .2s ease;
}

/*Footer*/
.content-footer {
    display:flex;
    align-items: center;
    background-color: var(--bs-white);
    height: 60px
}

.content-footer .footer-container{
    padding: 0 30px !important;
}

/*=============================
        Header Bundle Detail
  =============================*/
.dropdown-content, .sub-dropdown-content {
    position: absolute;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: .3s ease-in-out;
}

.dropdown-content{
    margin-top: 33px;
}

.dropdown-content.active{
    margin-top: 12px;
}

.dropdown-content.active, .sub-dropdown-content.active {
    opacity: 1;
    visibility: visible;
    transition: .3s ease-in-out;
}

.sub-dropdown-content {
    top: 0;
    left: 100%;
    min-width: 200px;
    height: 100% !important;
    transition: .3s
}

.sub-dropdown-content.active {
    left: 0;
    top: 0;
    transition: .3s
}

/*.sub-dropdown-content .dropdown-item {*/
.sub-dropdown .dropdown-item {
    padding: 16px 1.5rem;
    display: block;
    width: 100%;
    border-bottom: 1px solid #f5f5f5 !important;
    box-sizing: border-box;
}

.fc-daygrid-event.text-primary .fc-daygrid-event-dot {
    border-color: var(--bs-primary);
}

.fc-daygrid-event.text-warning .fc-daygrid-event-dot {
    border-color: var(--bs-warning);
}

.fc-daygrid-event.text-purple .fc-daygrid-event-dot {
    border-color: var(--bs-purple) !important;
}