@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap");

body{
    background-color: rgb(244, 245, 247 )!important;
    /* font-family: Roboto,sans-serif !important; */
    line-height: 20px !important;
    font-size: 15px !important;
}
:root {
    --header-height: 3rem;
    --nav-width: 68px;
    --first-color: #122cb9;
    --first-color-light: #AFA5D9;
    --white-color: #ffffff;
    --black-color:rgb(39, 43, 65);
    --body-font: 'Nunito', sans-serif;
    --normal-font-size: 1rem;
    --z-fixed: 100
}

*,
::before,
::after {
    box-sizing: border-box
}

a {
    text-decoration: none !important
}

.header {
    width: 100%;
    height: var(--header-height);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    background-color: var(--white-color);
    z-index: var(--z-fixed);
    transition: .5s;
    box-shadow: rgb(146 153 184 / 6%) 0px 2px 30px;
}

.header_toggle {
    color: var(--first-color);
    font-size: 1.5rem;
    cursor: pointer
}

.header_img {
    width: 80px;
    height: 35px;
    display: flex;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden
}

.header_img svg {
    width: 40px
}

.l-navbar {
    position: fixed;
    top: 0;
    left: -30%;
    width: var(--nav-width);
    height: 100vh;
    background-color: var(--white-color);
    padding: .5rem 1rem 0 0;
    transition: .5s;
    z-index: var(--z-fixed)
}

.nav-Sidebar  {
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden
}

.nav_logo,.nav_logo-admin,
.nav_link {
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: center;
    column-gap: 1rem;
    padding: .5rem 0 .5rem 1.5rem
}

.nav_logo,.nav_logo-admin {
    margin-bottom: 2rem
}

/* .nav_logo,.nav_logo-admin svg {
    color: var(--white-color)
} */
/* img, svg {
    color: var(--black-color);
} */
.nav_logo-name,.nav_logo-admin {
    color: var(--black-color);
    font-weight: 700
}

.nav_link {
    position: relative;
    color: var(--black-color);
    transition: .3s
}

.nav_name {
    color: var(--black-color);
}
.nav_link:hover {
    background: rgb(13 110 253 / .12);
    border-radius: 15px;
}

.nav_icon {
    font-size: 1.25rem
}

.show-slide-bar {
    left: 0
}

.body-pd .header {
    padding-left: calc(var(--nav-width) + 1rem)
}

.active {
    color: var(--black-color)
}
		.mtc-5{
		margin-top: 5rem!important
	}
	.bx-menu-show01{
	display:none
	}
	.bx-menu-show .bx-menu-show01{
	display:block !important
	}
	.bx-menu-show .bx-menu-show02{
	display:none
	}

.bx-menu-none{
display: none
}

.active::before {
    content: '';
    position: absolute;
    left: 0;
    width: 2px;
    height: 32px;
    background-color: var(--white-color)
}

.height-100 {
    height: 100vh
}
.sidebar .nav_list .collapse-box {
    padding: 5px 0 0 0;
	margin: 0 1rem;
}
.sidebar .nav_list .collapse-box .collapse-inner{
    min-width: 10rem;
}
.sidebar .nav_list .collapse-box .collapse-inner .collapse-item{
    height: 40px;
    display: flex;
    color: rgb(39, 43, 65);
    text-decoration: none;
    border-radius: 15px;
    white-space: nowrap;
    padding-left: 50px !important;
    cursor: pointer;
    align-items: center;
}

.collapse-item:hover{
    /* background: linear-gradient( 
        0deg
         ,rgba(41,121,255,.1),rgb(41 121 255 / 26%)),#fff; */
         color: #0d6efd !important;
}

.collapse-inner .collapse-active-item{
    background-color:#e7f4ff;
    color: #0d6efd !important;
}

.l-navbar:hover{
width: calc(var(--nav-width) + 200px)
}
@media screen and (min-width: 768px) {
    body {
        margin: calc(var(--header-height) + 1rem) 0 0 0;
        padding-left: calc(var(--nav-width) + 2rem)
    }

    .header {
        height: calc(var(--header-height) + 1rem);
        padding: 0 2rem 0 calc(var(--nav-width) + 2rem)
    }

    .header_img {
        width: 80px;
        height: 40px
    }

    .header_img img {
        width: 45px
    }

    .l-navbar {
        left: 0;
        padding: 1rem 1rem 0 0 
    }

    .show-slide-bar {
        width: calc(var(--nav-width) + 200px)
    }

    .body-pd .header  {
        padding-left: calc(var(--nav-width) + 220px)
    }
}



.container-loader {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    filter: url('#goo');
    animation: rotate-move 2s ease-in-out infinite;
  }
  
  .dot { 
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #000;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  
  .dot-3 {
    background-color: #f74d75;
    animation: dot-3-move 2s ease infinite, index 6s ease infinite;
  }
  
  .dot-2 {
    background-color: #10beae;
    animation: dot-2-move 2s ease infinite, index 6s -4s ease infinite;
  }
  
  .dot-1 {
    background-color: #ffe386;
    animation: dot-1-move 2s ease infinite, index 6s -2s ease infinite;
  }
  
  @keyframes dot-3-move {
    20% {transform: scale(1)}
    45% {transform: translateY(-18px) scale(.45)}
    60% {transform: translateY(-90px) scale(.45)}
    80% {transform: translateY(-90px) scale(.45)}
    100% {transform: translateY(0px) scale(1)}
  }
  
  @keyframes dot-2-move {
    20% {transform: scale(1)}
    45% {transform: translate(-16px, 12px) scale(.45)}
    60% {transform: translate(-80px, 60px) scale(.45)}
    80% {transform: translate(-80px, 60px) scale(.45)}
    100% {transform: translateY(0px) scale(1)}
  }
  
  @keyframes dot-1-move {
    20% {transform: scale(1)}
    45% {transform: translate(16px, 12px) scale(.45)}
    60% {transform: translate(80px, 60px) scale(.45)}
    80% {transform: translate(80px, 60px) scale(.45)}
    100% {transform: translateY(0px) scale(1)}
  }
  
  @keyframes rotate-move {
    55% {transform: translate(-50%, -50%) rotate(0deg)}
    80% {transform: translate(-50%, -50%) rotate(360deg)}
    100% {transform: translate(-50%, -50%) rotate(360deg)}
  }
  
  @keyframes index {
    0%, 100% {z-index: 3}
    33.3% {z-index: 2}
    66.6% {z-index: 1}
  }