/* Scroll CSS */
::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb {
    --tw-border-opacity: 1;
    background-color: rgba(217, 217, 227, .8);
    border-color: rgba(255, 255, 255, var(--tw-border-opacity));
    border-radius: 9999px;
    border-width: 1px;
}

::-webkit-scrollbar {
    height: 1rem;
    width: 0.5rem;
}

/* Scroll CSS */

/* Loader CSS */
#pep-page-loader {
    background: #e3e4e8;
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pl {
    display: block;
    width: 70px;
    height: 70px;
}

.pl__ring,
.pl__ball1,
.pl__ball2 {
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    transform-origin: 32px 32px;
}

.pl__ring {
    animation-name: ring;
}

.pl__ball1 {
    animation-name: ball1;
}

.pl__ball2 {
    animation-name: ball2;
}

/* Animation */
@keyframes ring {
    from {
        animation-timing-function: ease-in-out;
        stroke-dashoffset: -122.52;
        transform: rotate(135deg);
    }

    15% {
        animation-timing-function: ease-in;
        stroke-dashoffset: -122.52;
        transform: rotate(90deg);
    }

    35% {
        animation-timing-function: ease-out;
        stroke-dashoffset: -65.34;
        transform: rotate(297.5deg);
    }

    55% {
        animation-timing-function: ease-in-out;
        stroke-dashoffset: -122.52;
        transform: rotate(505deg);
    }

    70% {
        animation-timing-function: ease-in-out;
        stroke-dashoffset: -122.52;
        transform: rotate(490deg);
    }

    85%,
    to {
        stroke-dashoffset: -122.52;
        transform: rotate(497.5deg);
    }
}

@keyframes ball1 {
    from {
        transform: rotate(14deg);
    }

    20% {
        transform: rotate(-7deg);
    }

    60% {
        transform: rotate(399deg);
    }

    75% {
        transform: rotate(361deg);
    }

    90%,
    to {
        transform: rotate(374deg);
    }
}

@keyframes ball2 {
    from {
        transform: rotate(-21deg);
    }

    25% {
        transform: rotate(-47deg);
    }

    60% {
        transform: rotate(364deg);
    }

    75% {
        transform: rotate(326deg);
    }

    90%,
    to {
        transform: rotate(339deg);
    }
}

/* Loader CSS */

/* Theme CSS */
body {
    background-color: #f9f9f9;
}

.sidebar-wrapper {
    background-color: #353541;
}

.sidebar-wrapper .menu .sidebar-title {
    color: #f2f2f2;
}

.sidebar-wrapper .menu .sidebar-link,
.sidebar-wrapper .menu .sidebar-link i,
.sidebar-wrapper .menu .sidebar-link svg,
.sidebar-wrapper .menu .submenu .submenu-item a {
    color: #b2b2b2;
}

.sidebar-wrapper .menu .sidebar-link:hover,
.sidebar-wrapper .menu .sidebar-item.active>.sidebar-link {
    background-color: #1a1a20;
}

.sidebar-wrapper .menu .sidebar-link:hover,
.sidebar-wrapper .menu .sidebar-link:hover i,
.sidebar-wrapper .menu .sidebar-item.active>.sidebar-link,
.sidebar-wrapper .menu .sidebar-item.active>.sidebar-link i,
.sidebar-wrapper .menu .submenu .submenu-item a:hover,
.sidebar-wrapper .menu .submenu .submenu-item.active>a {
    color: #FFF;
}

/* .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: #642fdf;
} */

.text-primary {
    color: #642fdf !important;
}

.alert-primary {
    background-color: #642fdf;
}

.form-check-input:checked {
    background-color: #642fdf;
    border-color: #642fdf;
}

a {
    color: #642fdf;
}

a:hover {
    color: #442fdf;
}

/* Theme CSS */
.usr-ver-txt {
    color: #9f37e2;
    bottom: -7px;
    right: 0;
    z-index: 2;
    font-size: 12px;
    font-weight: 800;
}

.api_blr {
    width: 340px;
    height: 24px;
    background: url("/assets/images/secret.png") no-repeat scroll center center / cover transparent;
}

.api_blr>a {
    top: -2px;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
    font-size: 0.75rem;
}

.api_blr>a .spinner-border-sm {
    --bs-spinner-width: .75rem;
    --bs-spinner-height: .75rem;
    --bs-spinner-border-width: 0.1em;
}

.fs-7 {
    font-size: .85rem !important;
}

.fs-8 {
    font-size: .7rem !important;
}

.fs-9 {
    font-size: .6rem !important;
}

input:autofill {
    background: #3E3E4A;
    /* or any other */
}

.ci-responsive {
    position: relative;
    width: 100%;
    padding: 0;
    overflow: hidden;
}

.ci-res-169 {
    padding-top: 56.25%;
}

.ci-res-11 {
    padding-top: 100%;
}

.ci-responsive>img {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    height: 100%;
    object-fit: cover;
}

.hdr-dd .dropdown-menu {
    background-color: #353541;
}

.hdr-dd .dropdown-header {
    color: #f2f2f2;
}

.hdr-dd .dropdown-item {
    color: #b2b2b2;
    font-weight: 600;
}

.hdr-dd .dropdown-item:focus,
.hdr-dd .dropdown-item:hover {
    background-color: #1a1a20;
    color: #FFFFFF;
}

.hdr-dd .dropdown-item.di-lo {
    background-color: #f3616d;
    color: #fff;
}

.log-rht-bg::after {
    content: "";
    position: absolute;
    background-color: #353541;
    border-right: 1px solid #707070;
    rotate: -10deg;
    top: 0;
    left: 0;
    width: 80%;
    height: 100%;
    scale: 1.3;
}

.badge.bg-primary {
    background-color: rgba(100, 47, 223, 1) !important;
}

#auth #auth-left label {
    color: #B2B2B2;
    margin-bottom: 5px;
    margin-left: 5px;
}

#auth #auth-left label,
#auth #auth-left a {
    font-size: 14px;
}

#auth #auth-left .form-control {
    background-color: #3E3E4A;
    border-color: transparent;
    color: #FFF;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background: rgb(100, 47, 223);
    background: linear-gradient(90deg, rgba(100, 47, 223, 1), rgba(159, 55, 226, 1) 51%, rgba(100, 47, 223, 1)) var(--x, 0)/ 200%;
    color: var(--bs-nav-pills-link-active-color);
}

.btn {
    --bs-btn-padding-x: 1.4rem;
    --bs-btn-padding-y: 0.5rem;
    transition: 0.3s;
    font-weight: 600;
}

.btn-group-sm>.btn,
.btn-sm {
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-padding-x: 0.5rem;
}

.btn-pep-primary {
    color: #fff;
    background: rgb(100, 47, 223);
    background: linear-gradient(90deg, rgba(100, 47, 223, 1), rgba(159, 55, 226, 1) 51%, rgba(100, 47, 223, 1)) var(--x, 0)/ 200%;
    /* background: linear-gradient(90deg, rgba(100, 47, 223, 1) 0%, rgba(159, 55, 226, 1) 100%); */
    border: none;
}

.btn-pep-primary:disabled {
    color: #FFF;
}

.btn-pep-primary:hover,
.btn-check:focus+.btn-pep-primary,
.btn-pep-primary:focus,
.btn-check:checked+.btn-pep-primary,
.btn-check:active+.btn-pep-primary,
.btn-pep-primary:active,
.btn-pep-primary.active,
.show>.btn-pep-primary.dropdown-toggle {
    color: #fff;
    --x: 100%;
}

.btn-check:checked+.btn-pep-primary:focus,
.btn-check:active+.btn-pep-primary:focus,
.btn-pep-primary:active:focus,
.btn-pep-primary.active:focus,
.show>.btn-pep-primary.dropdown-toggle:focus {
    box-shadow: none;
}


.btn-outline-pep-primary {
    color: #642fdf;
    background-color: transparent;
    background-image: none;
    border-color: #642fdf;
}

.btn-outline-pep-primary:hover,
.btn-outline-pep-primary:not(:disabled):not(.disabled):active,
.btn-outline-pep-primary:not(:disabled):not(.disabled).active,
.show>.btn-outline-pep-primary.dropdown-toggle,
.btn-outline-pep-primary:focus,
.btn-outline-pep-primary.focus {
    color: #fff;
    background: rgb(100, 47, 223);
    background: linear-gradient(90deg, rgba(100, 47, 223, 1), rgba(159, 55, 226, 1) 51%, rgba(100, 47, 223, 1)) var(--x, 0)/ 200%;
    border-color: #642fdf;
}

.btn-outline-pep-primary:focus,
.btn-outline-pep-primary.focus,
.btn-outline-pep-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-pep-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-pep-primary.dropdown-toggle:focus {
    box-shadow: none;
}

.btn-outline-pep-primary.disabled,
.btn-outline-pep-primary:disabled {
    color: #642fdf;
    background-color: transparent;
}


.pep-add-ws {
    background: rgb(100, 47, 223);
    background: linear-gradient(90deg, rgba(100, 47, 223, 1) 0%, rgba(159, 55, 226, 1) 100%);
    /* padding: 30px 25px; */
    padding: 20px;
}

.paw-ico {
    font-size: 40px;
}

.pep-lst-ws {
    padding: 15px;
}

.pep-lst-ws small {
    font-size: .75em;
}

.pep-add-ws,
.pep-lst-ws {
    min-height: 125px;
}

.menu-icon {
    /* flex-shrink: 0; */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    /* margin-right: 0.5rem; */
}

.pep-lst-ws .dropdown-menu {
    min-width: 11rem;
}

.pep-lst-ws .dropdown-item {
    padding: 0.4rem 0.5rem;
    font-size: .9rem;
}

.pep-lst-ws .dropdown-item:active {
    background-color: var(--bs-dropdown-link-hover-bg);
    color: var(--bs-dropdown-link-hover-color);
}

.camp-bs {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.symbol {
    display: inline-block;
    flex-shrink: 0;
    position: relative;
    border-radius: 0.65rem;
}

.symbol>img {
    width: 100%;
    flex-shrink: 0;
    display: inline-block;
    border-radius: 0.65rem;
}

.symbol>img {
    width: 50px;
    height: 50px;
}

.symbol.symbol-45px>img {
    width: 45px;
    height: 45px;
}

.symbol.symbol-30px>img {
    width: 30px;
    height: 30px;
}

.symbol.symbol-60px>img {
    width: 60px;
    height: 60px;
}

.symbol .symbol-label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    color: #3F4254;
    background-color: #f5f8fa;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    border-radius: 0.475rem;
}

.symbol.symbol-60px.symbol-2by3 .symbol-label {
    height: 60px;
    width: 90px;
}

.flex-row-fluid {
    flex: 1 auto;
    min-width: 0;
}

.bd-callout {
    padding: .75rem;
    border: 1px solid #e9ecef;
    border-left-width: 0.25rem;
    border-radius: 0.25rem;
}

.bd-callout-primary {
    border-left-color: #435EBE;
}