:root {
    --dropdown-shadow:
        0 20px 50px -20px rgb(95 101 173 / 55%),
        0 0 20px -20px rgb(95 101 173 / 55%);
    --border-color: #e9ecef;
    --border-color-2: #ced4da;
    --primary-color: #623ceb;
    --bg-color: #f3f2f7;
    --secondary-color: #2cc2a5;
    --white: #fff;
}

@media(min-width: 1024px){

     div{
        scrollbar-color: #623ceb #ececef;
        scrollbar-color: var(--bg-primary) #ececef;
        scrollbar-width: thin;
    } 
    ::-webkit-scrollbar {
    	width: 2px;
    }

    ::-webkit-scrollbar-thumb {
    	background: var(--primary-color);
    	width: 5px;
    }

    ::-webkit-scrollbar-track {
    	background: rgb(233, 233, 233);
    	width: 2px;
    }
}

body {
    font-family: "lato", sans-serif;
}

.ci-btn-round {
    /* font-size: 80%; */
    padding: .75rem;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    height: auto;

}

.ci-main {
    grid-template-columns: 300px 1fr;
    background: var(--secondary-color);
    background: var(--bg-color);
}

.ci-content {
    background-color: unset;
    height: 100vh;
    overflow: auto;
    padding: 2rem;
    padding-left: 1rem;
}

.ci-project-list-wrap {
    height: auto;
    min-height: calc(100vh - 230px);
}

.ci-main-box {
    height: auto;
    min-height: calc(100vh - 80px);
    background: var(--white);
}

.ci-sidebar {
    background-color: unset;
	height: 100vh;
    min-height: unset;
	width: 100%;
    overflow: auto;
}

.ci-sidebar-content {
    display: flex;
    flex-flow: column;
    min-height: 100%;
    padding: 40px 30px;
    background: unset;
}


.ci-menu-wrap {
    max-height: unset;
}

.ci-menu-item {
    border-radius: 2rem;
}

.ci-menu-text {
    font-size: 15px;
}

.active-menu-item .ci-menu-content,
.active-menu-item .ci-menu-content:hover {
    background-color: rgba(93, 106, 141, 0.078);

}
.active-menu-item .ci-menu-sub-item.active{
    background-color: var(--white);
}

.active-menu-item .ci-menu-sub-item.active a{
    color: #623ceb;
}

.ci-menu-content:hover {
    background-color: rgba(93, 106, 141, 0.078);
}

.ci-menu-content {
    padding: 10px 1rem;
    border-radius: inherit;
}

.ci-sider-profile-wrap {
    position: relative;
    margin-top: auto;
    bottom: auto;
    left: auto;
    width: auto;
}

.ci-menu-wrap {
    margin: 40px 0;
    height: auto;
}

.dropdown-content {
  	box-shadow: var(--dropdown-shadow);
  	width: 100%;
  	right: 0;
    bottom: 60px;
    padding-bottom: 1rem;
}

.dropdown-content a {
    padding: 5px 16px 10px;
}

.dropdown-content:after {
    display: none;
}

.ci-user-info-wrap {
	padding: 20px 10px;
	border-bottom: 1px solid #e9ecef;
	display: grid;
    margin-bottom: 1rem;
	grid-template-columns: 30px 1fr;
	gap: 1rem;
	font-size: 80%;
}

.ci-user-info-item-img {
	 text-align: center;
	 padding-top: 10px;
}

.ci-user-image {
    width: 30px;
    height: 30px;
}

.ci-user-info-item-img img {
	width: 100%;
	max-width: 100%;
	object-fit: cover;
}

.ci-user-info-item-name p:first-child {
	font-size: 1rem !important;
}

.ci-profile-setting-item img {
    height: 14px;
}

.ci-profile-setting-item {
	display: grid !important;
	grid-template-columns: auto 1fr;
	grid-gap: 10px;
}



.ci-loading-wrap {
    /* background: rgba(8, 6, 19, 0.941); */
    background: rgba(255, 255, 255, 0.88);
}

.loader {
    display: flex;
    flex-flow: column;
    align-items: center;
    text-align: center;
    font-family: sans-serif;
    width: 50%;
    padding: 2rem 0;
    background: var(--white);
    /* color: #fff !important; */
  }

  .loader-loading {
    width: 60%;
    height: 5px;
    display: flex;
    align-items: center;
    background: #e5e3e9;
    /* border: 1px solid #dcdcdc; */
    border-radius: 2rem;
    /* padding: 0 4px; */
  }

  .loader-loading::before {
    content: '';
    display: block;
    animation: loader 30s 3s linear 1 forwards;
    width: 5%;
    height: 100%;
    background: #623CEB;
    border-radius: 2rem;
  }



  @keyframes loader {
    0% {
  /*     transform: translateX(0%); */
      width: 8%
    }
    30% {
      width: 60%;
    }

    50% {
      width: 70%;
    }

    80% {
      width: 80%;
    }


    100% {
      width: 98.5%;
  /*     transform: translateX(150%); */
    }
  }
@media(max-width: 768px){
    .ci-flex{
        flex-flow: column;
    }
    body{
        overflow: auto !important;
        height: 100VH;
        background-color: #f3f2f7;
    }
    .ci-main{
        grid-template-columns: 300px 600px;
    }
    .ci-content{
        background: #f3f2f7;
        height: 100% !important;
    }
    .ci-sidebar{
        height: 100% !important;
    }
    .ci-header{
        grid-template-columns: 250px 650px;
    }
}