/* =====================================
    Theme Custom CSS / style.bundle.css
   ===================================== */

@media (min-width: 992px) {
    .app-header.call-header,
    .app-header.call-header {
        left: 0 !important;
    }
}

[data-bs-theme="dark"] .app-header.call-header .light-img {
    display: none !important;
}

[data-bs-theme="light"] .app-header.call-header .dark-img {
    display: none !important;
}

/* Theme Custom Btn */
.btn.btn-info {
    color: var(--bs-info-inverse);
    border-color: #00d5f7;
    background-color: #00d5f7
}

.btn.btn-info .svg-icon, .btn.btn-info i {
    color: var(--bs-info-inverse)
}

.btn.btn-info.dropdown-toggle:after {
    color: var(--bs-info-inverse)
}

.btn-check:active + .btn.btn-info,
.btn-check:checked + .btn.btn-info,
.btn.btn-info.active, .btn.btn-info.show,
.btn.btn-info:active:not(.btn-active),
.btn.btn-info:focus:not(.btn-active),
.btn.btn-info:hover:not(.btn-active),
.show > .btn.btn-info {
    color: var(--bs-info-inverse);
    border-color: #00b8d5;
    background-color: #00b8d5 !important
}

.btn-check:active + .btn.btn-info .svg-icon, .btn-check:active + .btn.btn-info i,
.btn-check:checked + .btn.btn-info .svg-icon, .btn-check:checked + .btn.btn-info i,
.btn.btn-info.active .svg-icon, .btn.btn-info.active i, .btn.btn-info.show .svg-icon,
.btn.btn-info.show i, .btn.btn-info:active:not(.btn-active) .svg-icon,
.btn.btn-info:active:not(.btn-active) i,
.btn.btn-info:focus:not(.btn-active) .svg-icon,
.btn.btn-info:focus:not(.btn-active) i,
.btn.btn-info:hover:not(.btn-active) .svg-icon,
.btn.btn-info:hover:not(.btn-active) i,
.show > .btn.btn-info .svg-icon,
.show > .btn.btn-info i {
    color: var(--bs-info-inverse)
}

.btn-check:active + .btn.btn-info.dropdown-toggle:after,
.btn-check:checked + .btn.btn-info.dropdown-toggle:after,
.btn.btn-info.active.dropdown-toggle:after,
.btn.btn-info.show.dropdown-toggle:after,
.btn.btn-info:active:not(.btn-active).dropdown-toggle:after,
.btn.btn-info:focus:not(.btn-active).dropdown-toggle:after,
.btn.btn-info:hover:not(.btn-active).dropdown-toggle:after,
.show > .btn.btn-info.dropdown-toggle:after {
    color: var(--bs-info-inverse);
}

/* theme Custom Badge */
.badge-info{
    color:var(--bs-info-inverse);
    background-color: #00d5f7;
}

.badge-info.badge-outline{
    border:1px solid #00d5f7;
    color: #00d5f7;
    background-color:transparent
}

.badge-light-info{
    color: #00d5f7;
    background-color: #dffbff;
}

/* =====================================
    Custom CSS
   ===================================== */

.content-width {
    width: 90%;
    float: left;
}

.call-active-width {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 8%;
    float: right;
    height: calc(100% - 70px);
    padding: 20px;
}

.call-num {
    position: relative;
    display: block;
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    border-radius: 50%;
    margin: 0 auto 10px;
    font-size: 17px;
    color: #fff;
}

.call-txt {
    display: block;
    text-align: center;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.5;
}

.calling-icon i {
    font-size: 1.8em;
}

.calling-icon.rotate i {
    transform: rotate(-35deg)
}

.call-graph .card-header {
    min-height: auto;
}

.call-card {
    border-right: 1px solid #f2f2f2;
}

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

.bg-theme{
    background-color: #15163F
}

@media (max-width: 768px) {
    .call-num {
        width: 37px;
        height: 37px;
        line-height: 37px;
        font-size: 16px;
    }
}

@media (max-width: 991.98px) {
    .call-active-width {
        width: 10%;
        height: calc(100% - 60px);
    }

    .call-tab-btn {
        position: relative;
        top: auto;
        right: auto;
    }

}

@media (max-width: 1199px) {
    .call-card {
        border-right: none;
    }
}