:root {
    --sidebar-color: #05050b;
    --sidebar-hover-color: #2d2d35;
    --sidebar-border-bottom-color: #393941;
    --font: "Poppins", sans-serif;
    --icon-color: #46bcaa;
    --icon-hover-color: #1a8d7b;
    --sidebar-menu-color: #e7eef8;
    --transition: .3s ease-in-out;
    --balloon-border-radius: 2px;
    --balloon-color: rgba(16, 16, 16, 0.95);
    --balloon-text-color: #fff;
    --balloon-font-size: 12px;
    --balloon-move: 4px;
}

button[aria-label][data-balloon-pos] {
    overflow: visible;
}

[aria-label][data-balloon-pos] {
    position: relative;
    cursor: pointer;
}

[aria-label][data-balloon-pos]:after {
    opacity: 0;
    pointer-events: none;
    transition: all 0.18s ease-out 0.18s;
    text-indent: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    font-weight: normal;
    font-style: normal;
    text-shadow: none;
    font-size: var(--balloon-font-size);
    background: var(--balloon-color);
    border-radius: 2px;
    color: var(--balloon-text-color);
    border-radius: var(--balloon-border-radius);
    content: attr(aria-label);
    padding: .5em 1em;
    position: absolute;
    white-space: nowrap;
    z-index: 10;
}

[aria-label][data-balloon-pos]:before {
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top-color: var(--balloon-color);
    opacity: 0;
    pointer-events: none;
    transition: all 0.18s ease-out 0.18s;
    content: "";
    position: absolute;
    z-index: 10;
}

[aria-label][data-balloon-pos]:hover:before, [aria-label][data-balloon-pos]:hover:after, [aria-label][data-balloon-pos][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-visible]:after, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:before, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:after {
    opacity: 1;
    pointer-events: none;
}

[aria-label][data-balloon-pos].font-awesome:after {
    font-family: FontAwesome, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

[aria-label][data-balloon-pos][data-balloon-break]:after {
    white-space: pre;
}

[aria-label][data-balloon-pos][data-balloon-break][data-balloon-length]:after {
    white-space: pre-line;
    word-break: break-word;
}

[aria-label][data-balloon-pos][data-balloon-blunt]:before, [aria-label][data-balloon-pos][data-balloon-blunt]:after {
    transition: none;
}

[aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:after {
    transform: translate(-50%, 0);
}

[aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:before {
    transform: translate(-50%, 0);
}

[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:after {
    left: 0;
}

[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:before {
    left: 5px;
}

[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:after {
    right: 0;
}

[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:before {
    right: 5px;
}

[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos*="-left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:after {
    transform: translate(0, 0);
}

[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos*="-left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:before {
    transform: translate(0, 0);
}

[aria-label][data-balloon-pos][data-balloon-pos^="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="up"]:after {
    bottom: 100%;
    transform-origin: top;
    transform: translate(0, var(--balloon-move));
}

[aria-label][data-balloon-pos][data-balloon-pos^="up"]:after {
    margin-bottom: 10px;
}

[aria-label][data-balloon-pos][data-balloon-pos="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos="up"]:after {
    left: 50%;
    transform: translate(-50%, var(--balloon-move));
}

[aria-label][data-balloon-pos][data-balloon-pos^="down"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="down"]:after {
    top: 100%;
    transform: translate(0, calc(var(--balloon-move) * -1));
}

[aria-label][data-balloon-pos][data-balloon-pos^="down"]:after {
    margin-top: 10px;
}

[aria-label][data-balloon-pos][data-balloon-pos^="down"]:before {
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-bottom-color: var(--balloon-color);
}

[aria-label][data-balloon-pos][data-balloon-pos="down"]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:before {
    left: 50%;
    transform: translate(-50%, calc(var(--balloon-move) * -1));
}

[aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:after {
    transform: translate(0, -50%);
}

[aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:before {
    transform: translate(0, -50%);
}

[aria-label][data-balloon-pos][data-balloon-pos="left"]:after, [aria-label][data-balloon-pos][data-balloon-pos="left"]:before {
    right: 100%;
    top: 50%;
    transform: translate(var(--balloon-move), -50%);
}

[aria-label][data-balloon-pos][data-balloon-pos="left"]:after {
    margin-right: 10px;
}

[aria-label][data-balloon-pos][data-balloon-pos="left"]:before {
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-left-color: var(--balloon-color);
}

[aria-label][data-balloon-pos][data-balloon-pos="right"]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:before {
    left: 100%;
    top: 50%;
    transform: translate(calc(var(--balloon-move) * -1), -50%);
}

[aria-label][data-balloon-pos][data-balloon-pos="right"]:after {
    margin-left: 10px;
}

[aria-label][data-balloon-pos][data-balloon-pos="right"]:before {
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-right-color: var(--balloon-color);
}

[aria-label][data-balloon-pos][data-balloon-length]:after {
    white-space: normal;
}

[aria-label][data-balloon-pos][data-balloon-length="small"]:after {
    width: 80px;
}

[aria-label][data-balloon-pos][data-balloon-length="medium"]:after {
    width: 150px;
}

[aria-label][data-balloon-pos][data-balloon-length="large"]:after {
    width: 260px;
}

[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after {
    width: 380px;
}

@media screen and (max-width: 768px) {
    [aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after {
        width: 90vw;
    }
}

[aria-label][data-balloon-pos][data-balloon-length="fit"]:after {
    width: 100%;
}

body {
    font-family: var(--font) !important;
}

.dasboardAside {
    border-radius: 10px;
    background: var(--sidebar-color);
    padding: .75rem;
    position: fixed;
    height: 96.5%;
    width: 15%;
    top: .75rem;
    left: .75rem;
}

.ml--1 {
    margin-left: 1%;
}

.w--15 {
    width: 15%;
}

.w--84 {
    width: 84%;
}

.asideBorderBottom {
    border-bottom: 1px solid var(--sidebar-border-bottom-color);
}

.asideMenu.asideOverlay {
    opacity: .4;
}

.asideMenu ul {
    padding: 0;
    margin: 0;
}

.asideMenu ul > li {
    list-style-type: none;
    padding: .25rem 0;
    position: relative;
}

.asideMenu ul > li > a {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--sidebar-menu-color);
    font-weight: 600;
    text-decoration: none;
    padding: .5rem;
    transition: var(--transition);
    border-radius: 8px;
}

.asideMenu ul > li > a i{
    line-height: 20px;
    font-size: 20px;
}

.asideMenu ul > li > a.active {
    background: var(--sidebar-hover-color);
    transition: var(--transition);
}

.asideMenu ul > li:hover > a {
    background: var(--sidebar-hover-color);
    transition: var(--transition);
}

.asideMenu > ul > li > a > i {
    line-height: 16px;
    font-size: 16px;
}

.asideMenu ul li a span {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 10px;
}

.asideMenu ul li a span i {
    line-height: 6px;
    font-size: 9px;
    transition: .3s ease-in-out;
}

.asideMenu ul li ul {
    visibility: hidden;
    opacity: 0;
    padding-left: 26px;
    width: 100%;
    height: auto;
    max-height: 0;
    transition: var(--transition);
}

.asideMenu ul li ul::-webkit-scrollbar {
    width: 5px;
}

.asideMenu ul li ul::-webkit-scrollbar-track {
    background: var(--sidebar-hover-color);
    border-radius: 10px;
}

.asideMenu ul li ul::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.asideMenu ul li ul::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.asideMenu ul li ul.active {
    visibility: visible;
    opacity: 1;
    max-height: 520px;
    height: auto;
    transition: var(--transition);
    margin: 5px 0;
}

.asideMenu ul li ul.toggleActive {
    visibility: visible;
    opacity: 1;
    max-height: 430px;
    height: auto;
    transition: var(--transition);
    margin: 5px 0;
}

.asideMenu ul li ul li {
    list-style-type: none;
}

.asideMenu ul li ul li a {
    display: block;
    font-size: 13px;
    color: var(--sidebar-menu-color);
    font-weight: 600;
    text-decoration: none;
    padding: .5rem;
    border-radius: 8px;
}

.asideMenu ul li ul li:hover a {
    background: var(--sidebar-hover-color);
    transition: var(--transition);
}

.asideMenu ul li ul li a.active {
    background: var(--sidebar-hover-color);
    transition: var(--transition);
}

.overflow-y-scroll {
    overflow-y: scroll;
}

.dasboardTopBar {
    background-color: hsla(0, 0%, 100%, .5);
    border-bottom: 0 solid #f8f9fa;
    box-shadow: 0 1.6rem 3rem rgb(0 0 0 / 10%);
    backdrop-filter: blur(0.5rem);
    border-radius: 10px;
    padding: 10px;
}

.dasboardTopBarTitle {
    font-size: 20px;
    font-weight: 700;
    color: #323232;
    letter-spacing: .4px;
}

.dasboardTopBarMenuIcon {
    cursor: pointer;
    width: 45px;
    height: 45px;
    background: #e7eef8;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 18px;
    color: #1f2128;
    position: relative;
    transition: var(--transition);
}

.dasboardTopBarNotification {
    cursor: pointer;
    width: 45px;
    height: 45px;
    background: #e7eef8;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 18px;
    color: #1f2128;
    position: relative;
    transition: var(--transition);
}

.dasboardTopBarNotification span {
    position: absolute;
    top: -7.5px;
    right: -7.5px;
    width: 15px;
    height: 15px;
    background: green;
    color: white;
    border-radius: 5px;
    font-size: 10px;
    line-height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dasboardTopBarImage {
    overflow: hidden;
    cursor: pointer;
    width: 45px;
    height: 45px;
    background: #e7eef8;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 18px;
    color: #1f2128;
    position: relative;
    transition: var(--transition);
    padding: 3px;
}

.dasboardTopBarName {
    cursor: pointer;
    height: 45px;
    background: #e7eef8;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 14px;
    color: #1f2128;
    position: relative;
    font-weight: 500;
    padding: 0 .75rem;
    transition: var(--transition);
    overflow: hidden !important;
    text-overflow: ellipsis;
}

.dasboardTopBarHvr:hover {
    background: #d8e5fa;
    transition: var(--transition);
}

.dasboardTopBarImage img {
    width: 100%;
    object-fit: contain;
}

.primary-button {
    box-shadow: unset;
    font-size: 14px;
    font-weight: 600;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    color: white;
    height: 45px;
    padding: 0 15px;
    background-color: #62c6b7 !important;
    border-color: #59c3b3 !important;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.primary-button:hover {
    background-color: #39897d !important;
    border-color: #59c3b3 !important;
}

.primaryButton {
    box-shadow: unset;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    color: white;
    height: 40px;
    padding: 0 15px;
}

.primaryButtonBlock {
    box-shadow: unset;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    color: white;
    height: 45px;
    width: 100%;
}

.primaryButtonSuccess {
    background-color: #46bcaa !important;
    border-color: #46bcaa !important;
}

.primaryButtonSuccess:hover {
    background-color: #62c6b7 !important;
    border-color: #59c3b3 !important;
}

.primaryButtonDanger {
    background-color: #f35421 !important;
    border-color: #f35421 !important;
}

.primaryButtonDanger:hover {
    background-color: #f56e42 !important;
    border-color: #f46537 !important;
}

.primaryButtonInfo {
    background-color: #4d69fa !important;
    border-color: #4d69fa !important;
}

.primaryButtonInfo:hover {
    background-color: #6880fb !important;
    border-color: #5f78fb !important;
}
.border-radius-8{
    border-radius: 8px;
}

.cardBody {
    background-color: #fff;
    border: 0 solid rgba(222, 226, 230, .5);
    box-shadow: 0 1.6rem 3rem rgb(0 0 0 / 5%);
    padding: 1.5rem;
    border-radius: 10px;
}

.cardBodyTitle {
    font-size: 16px;
    font-weight: bold;
    color: #323232;
}

.cardBodyText {
    word-break: break-all;
    margin-top: 5px;
    font-size: 15px;
    font-weight: 500;
    color: #323232;
}

.cardBodyButtons {
    line-height: 15px;
    margin-top: 10px;
}

.cardBodyButtons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    width: 35px;
    border-radius: 5px;
    background: #e7eef8;
    text-decoration: none;
    color: #1f2128;
}

.cardBodyButtons a i {
    font-size: 15px;
    line-height: 15px;

}

.font-weight-500 {
    font-weight: 500;
}

.cardBodyContent {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.cardBodyContent .cardBodyIcon {
    width: 20%;
}

.cardBodyContent .cardBodyIcon i {
    font-size: 30px;
    line-height: 30px;
    border-radius: 10px;
    background: #e7eef8;
    color: #1f2128;
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cardBodyContent .cardBodyText {
    margin-top: 0;
    width: 80%;
    font-size: 20px;
    font-weight: bold;
}

.cardRed {
    background: #e7eef3;
}

.cardWarning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

.cardSuccess {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.cardRed {
    background: #e7eef3;
}


.cardRed .cardBodyContent .cardBodyIcon i {
    background: #d3e0ea;
}

table {
    margin-bottom: 0;
}

.table td, .table th {
    font-size: 15px;
    font-weight: 600;
}

.dasboardAside .overlay{
    backdrop-filter: blur(0.5rem);
    transition: var(--transition);
    opacity: 0.5;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

@media only screen and (max-height: 800px) {
    .asideMenu ul li ul.active {
        max-height: 400px;
        overflow-y:scroll ;
    }
}

@media only screen and (max-height: 650px) {
    .asideMenu ul li ul.active {
        max-height: 280px;
        overflow-y:scroll ;
    }

    .asideMenu ul li ul li a {
        font-size: 11px;
    }
}

@media only screen and (max-height: 560px) {
    .asideMenu ul li ul.active {
        max-height: 140px;
        overflow-y:scroll ;
    }

    .asideMenu ul li ul li a {
        font-size: 11px;
        padding: 0.25rem;
    }

    .asideMenu ul > li > a {
        font-size: 13px;
        padding: 0.25rem;
    }
}

@media (min-width: 780px) and (max-width: 915px){
    .asideMenu .asideBorderBottom{
        height: 250px;
        overflow: scroll;
    }
}
@media only screen and (max-width: 999px) {
    .mobileWidth100 {
        width: 100% !important;
    }

    .mobileMarginNone {
        margin: 0 !important;
    }

    .mobileDashboardAside {
        width: 100% !important;

    }

    .dasboardAside {
        width: 0;
        max-width: 0;
        visibility: hidden;
        opacity: 0;
        z-index: 9999;
        left: 0;
        top: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        height: 100%;
        transition: var(--transition);
    }

    .dasboardPage {
        transition: var(--transition);
    }

    .dasboardAside.active {
        width: 80%;
        max-width: 80%;
        visibility: visible;
        opacity: 1;
        transition: var(--transition);
    }

    .mobileOffCanvas {
        margin-left: 82% !important;
    }
    .dasboardPageOverlay.active {
        background: rgba(0,0,0,.5);
        backdrop-filter: blur(0.5rem);
        transition: var(--transition);
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 10;
        top: 0;
        left: 0;
    }
}
.h-35{
    height: 35px;
}