@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Slackside+One&display=swap');

:root {
    --primary-color:#facd18;
    --secondary-color:#413FBC;
    --primary-background:#17181E;
    --primary-card-background:#181A20;
    --primary-text-color:white;
    --primary-outline-color:#17181E;
    --primary-input-color:#50525a;
    --primary-input-background:#262833;
    --primary-border-radius:15px;
}

html, body{
    margin:0;
    padding:0;
    width: 100%;
    background-color: var(--primary-background);
    color:var(--primary-text-color);
   font-family:"Inter", sans-serif;
    font-size: 14px;
}
.main-container{
    width:100%;
    display:flex;
}



sidebar{
    display:block;
    width: 240px;
    height:100vh;
    padding:10px;
    padding-right: 0;
    background-color: var(--primary-card-background);
    box-sizing: border-box;
    position:fixed;
    border:solid var(--primary-outline-color) 1px;
    z-index: 20;
    overflow-x: scroll;
   
}

sidebar.minimized .tog-but{
    display:none;
}
sidebar.minimized{
    width: 5.5rem;
    padding:10px;
    display:flex;
    flex-direction: column;
    align-items: center;
    
}
sidebar.minimized .nav .nav-item-box.active::after{
    display:none;
}
sidebar .logo-box{
    padding:30px;
    margin-bottom: 10px;
    border: 0rem solid transparent;
}
.logo-mini{
    width:30px;
    max-width: 100px;
}
.logo-full{
    width:80%;

}
sidebar .nav .nav-label{
    color:grey;
}
sidebar .nav{
    flex-direction: column;;
}
sidebar.minimized .nav .nav-item{
padding: 15px !important;
border-radius: 10%;

}
.cursor{
    cursor: pointer;
}
.label{
    color:gray;
}
.flex {
    display: flex;
}

.justify-content-center {
    justify-content: center;
}
.align-items-center {
    align-items: center;
}   
.sidebar .nav .nav-item{
    padding:15px;
    padding-right: 0;
    cursor:pointer;
    display:flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding-right: 10px;
}
sidebar .nav .nav-item-box.active .item{
    color:var(--primary-color);
}
sidebar .nav .nav-item-box.active a{
    color:var(--primary-color);
}
sidebar .nav .nav-item.active .item{
    max-width: 100%;
    display:flex;
    gap:10px;
    justify-content: space-between;
    
}
sidebar .nav .nav-item-box{
    
    width:100%;
  
    position: relative;
}
sidebar.minimized .nav .nav-item-box:hover .drop-down{
    display:block !important;
}
sidebar.minimized .nav .nav-item-box .drop-down{
    margin-left:4rem;
    position: absolute;
    left:0.4rem;
    top: 1rem;
    display:block !important;
    z-index: 10;
    background-color: var(--primary-card-background);
    width: fit-content;
    padding: 20px;
   border-radius: var(--primary-border-radius);
   transition: all .5s ease-in-out;
   display:none !important;

}
sidebar .nav .nav-item-box .drop-down{
    margin-left:2.5rem;
    
}
sidebar .nav .nav-item-box .drop-down .item-drop{
    padding:5px;
}
sidebar .nav .nav-item-box.active::after{
    content: "";
    background-color:var(--primary-color);
     position:absolute;
     right:0;
     top:1%;
     
    padding:2px;
    height: 3rem;
    border-radius: 10px;
}

sidebar .nav .nav-item:hover{
    background-color: rgb(27, 50, 129);
    color: aliceblue;
}
sidebar footer{
    position:absolute;
    bottom: 10px;
}


main{
    display:block;
    width: 100%;
    margin-left:240px;
    position:relative;
}
main.minimized {
    margin-left: 5.5rem;
}

header{
    width: 100%;
    display:flex;
    justify-content: space-between;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 20px;
    padding-bottom: 20px;
    box-sizing: border-box;
    border: 0rem solid transparent;
    position: absolute;
    top:0;
    z-index: 5;
    background-color: var(--primary-card-background);
    box-sizing: border-box;
    border:solid var(--primary-outline-color) 1px;

}
content{
    margin-top: 100px;
    display:block;
    padding:10px;
    width:100%;
    height:100vh;
    position: absolute;
    overflow: scroll;
    padding-bottom: 300px;
}
.user-box{
    position: relative;
    width:48px ;
    height: 48px;
    
}
.user-menu {
    position: absolute;
    top:4rem;
    right:1rem;
    min-width: 200px;
    transition: all .5s ease-in-out;
    
 
    height: 300px;
    z-index: 10;
  
}
.user-menu .item{
    padding:10px;
}

.user-thumb-box{
    width:48px ;
    height: 48px;
    position:absolute;
    top:0;
    cursor: pointer;
}
.user-thumb-box img{
    width: inherit;
    height: inherit;
    border-radius: 100%;
}

.flex{
    display:flex;
}
.flex-center{
    justify-content: center;
    align-items: center;
}
.page-title{
    font-size: 16px;
    color:grey;
}
.g-10{gap:10px;}

.card {
margin-bottom: 1.875rem;
  background-color: var(--card);
  transition: all .5s ease-in-out;
  position: relative;
  border: 0.1rem solid var(--primary-outline-color);
  border-radius: 0.5rem;
 
  
  color: inherit;
  background-color:var(--primary-card-background);
  padding:20px;
}
.card.inner{
    background-color: var(--primary-background);
}
.full-height{ height: calc(100% - 30px);}
.card-shadow{
    box-shadow: 0rem 0.3125rem 0.3125rem 0rem rgba(82, 63, 105, 0.05);
}
.asset-icon{
    width:20px;
}
.user-thumb{
    width:50px;
    height:50px;
    object-fit: cover;
    border-radius: 15px;
}
.flex-align-center{
    align-items: center;
}
.g-20{
    gap:20px;
}
.hidden{
    display:none;
}
.info-card{
    width:300px;
    cursor:pointer;
}
.info-card.active{
    background-color: #ef1552;
}
.search-stick{
    border-color: var(--primary-outline-color);
    border-width: 1px;
    border-style: solid;
    padding:5px 10px;
    border-radius: 30px;
    display:flex;
    align-items: center;
    min-width: 350px;
}
.search-stick input{
    background-color: transparent;
    border: 0;
    padding:4px;
    margin-bottom:0px;
}.search-stick input:focus{
    background-color: var(--primary-outline-color);
    border-radius: 30px;
    border: 0;
    color:white;
   
}
.form-control{
    background-color: var(--primary-input-background);
    border-radius: 30px;
    border: 0;
    color: var(--primary-text-color);
    padding:14px;
    margin-bottom:10px;
}
.form-control:focus{
    background-color: var(--primary-outline-color);
    color:white;
}
.table, tr, td {
    color:var(--primary-text-color)
}
a{text-decoration: none;}
a:visited{
    text-decoration: none;
    color: var(--primary-text-color);
}
.text-white{
    color:white !important;
}
button.active{
    background-color: var(--primary-color);
}
.small-menu {
    display:flex;
    gap:10px;
    align-items: center;
}
.small-menu a{

}

.badge{
       
    font-size:9px;
    color:grey;    
    border:solid grey 0.5px;
    padding:4%;
    border-radius:15px;
}
.fright{
    float:right;
}

.badge.badge-pending{
    color:green;    
    border:solid green 0.5px;
}
.badge.badge-approved{
    color:green;    
    border:solid green 0.5px;
}

.badge.badge-error{
    color:var(--primary-color);    
    border:solid var(--primary-color)  0.5px;
}
.outlined{
    border:solid grey 0.5px;
}
.mobile-only{
    display: none !important;
}
.auth-card{
    width:400px;
}
@media only screen and (max-width: 600px) {
   .hidden-mobile{
    display: none;
   }
   .auth-card{
    width:100%;
   }
  .desktop-only{
    display:none !important;
  }
  .small-menu{
    display:none !important;
  }
  sidebar{
    position:fixed;
    
  }
  sidebar.minimized{
    display:none !important;
  }
  main{
    width: 100% !important;
    margin-left:0;
  }
  .search-stick{
   display:none;
  }
  .mobile-only{
    display: block !important;
}

  }

  .hamburger{display:inline-block;left:0px;position:relative;top:3px;-webkit-transition:all 0.3s ease-in-out 0s;
    transition:all 0.3s ease-in-out 0s;width:26px;z-index:999}
    .hamburger .line
    {background:var(--primary-text-color);display:block;height:3px;border-radius:3px;margin-top:6px;margin-bottom:6px;margin-left:auto;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out}
    .hamburger .line:nth-child(1){width:20px}.hamburger .line:nth-child(2){width:26px}
    .hamburger .line:nth-child(3){width:22px}.hamburger:hover{cursor:pointer}
    .hamburger:hover .line{width:26px}
    .hamburger.is-active .line:nth-child(1),.hamburger.is-active .line:nth-child(3){width:10px;height:2px}
    .hamburger.is-active .line:nth-child(2)
    {-webkit-transform:translateX(0px);transform:translateX(0px);width:22px;height:2px}
    .hamburger.is-active .line:nth-child(1)
    {-webkit-transform:translateY(4px) rotate(45deg);transform:translateY(4px) rotate(45deg)}
    .hamburger.is-active .line:nth-child(3){-webkit-transform:translateY(-4px) rotate(-45deg);transform:translateY(-4px) rotate(-45deg)}
     
    .form-control[readonly]{
        background-color:#262833;
    }
    .btn-up {
        font-size: 16px;
        font-weight: 500;
        color: var(--color-primary-950);
        background: var(--primary-color);
        transition: all 0.5s ease;
        border: none;
      }
      .full-width{
        width: 100%;
      }

      .user-profile {
        width: 120px;
        height: 120px;
        flex-shrink: 0;
        object-fit: cover;
        border-radius: 20px;
      }
      .modal {
        background-color: var(--primary-card-background) !important;
      }
      .modal-content {
        max-width: 450px;
        border: none;
        border-radius: 10px;
        background-color: var(--primary-card-background) !important;
      }
      .center{
        justify-content: center;
      }

      
      .toast {
        position: absolute;
        background-color: #333;
        color: white;
        padding: 10px 20px;
        border-radius: 5px;
        font-size: 14px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        z-index: 1000;
        opacity: 0;
        transition: opacity 0.3s ease, transform 0.3s ease;
        text-align: center;
    }

    .toast.show {
        opacity: 1;
        transform: translateY(0);
    }
    .skeleton{
        animation-name: skel ;
        animation-duration:0.5s;
        animation-iteration-count: infinite;
    }

    @keyframes skel {
        from{opacity:0.3}
        to{opacity:1}
    }