/* Roboto Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
/* Icons */
@import url("https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css");
/* Tailwind */
@import url("https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css");    

/*root default styles*/

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root{
    --color-white: #ffffff;
    --color-light-white: #ddd;
    --color-pure-black: #000000;
    --color-light-gray:#282828;
    --color-light-black:#4D4D4D;
    --color-dark-white:#FDFDFD;
    --color-gray-2:#646464;
    --color-gray-3: #A3A3A3;
    --color-dark-gray: rgba(0, 0, 0, 0.38);
    --color-dark-yellow:#FDCF01;
    --color-light-pink:#FFD9D9;
    --color-lighten-gray:#F9F9F9;
    --color-medium-gray:#6D6D6D;
    --color-link-blue: #00ADEF;
    --color-creame-yellow: #FFF4C2;
    --color-green: #09ab40;
    --bg-linear-gradient: linear-gradient(204deg, #FFF 15.46%, rgba(217, 217, 217, 0.56) 118.36%);
    --box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    --border-radius:0px 10px 10px 0px;
   /*Font Family and Font Size */
    --font-family-roboto: "Roboto", sans-serif;
    --font-size-50: 50px;
    --font-size-24: 24px;
    --font-size-20: 20px;
    --font-size-18: 18px;
    --font-size-16: 16px;
    --font-size-14: 14px;
    /*Font Weight */
    --font-weight-400:400;
    --font-weight-400:500;
}

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


/* sidebar */
.sidebar {
    background: url('/images/sidebar-bg.svg');
    background-size: cover;
    background-position: center;
    width: 0;
    max-width: 290px;
    transition: all 0.3s ease;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-bottom: 1rem;
}
.sidebar .sidebar-container {
    min-width: 290px;
}

@media (width > 768px){
    .sidebar {
        /* max-height: calc(100vh - 60px); */
        max-height: calc(100vh);
    }
}
@media (width < 767.98px){
    .sidebar {
        /* max-height: calc(100vh - 45px); */
        max-height: calc(100vh);

    }
}

@media (width > 992px) {
    .sidebar {
        min-width: min(290px, 45vw); 
    }
}

#sidebar-toggle:checked ~ .sidebar {
    width: 290px;
}

.sidebar::-webkit-scrollbar {
    display: none;
}

 
.sidebar .drop-menu .drop-list {
    max-height: 0;
    transition: max-height 0.5s ease-out;
    overflow: hidden;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background: var(--color-light-white);
}
.sidebar .drop-menu.active .drop-list {
    max-height: 500px;
    transition: max-height 0.25s ease-in;
}
.sidebar i.big-right-arrow {
    transition: 0.3s ease;
}
.sidebar .drop-menu.active  i.big-right-arrow {
    transform: rotate(90deg);
}
.sidebar li a:hover,
.sidebar li div.drop-menu > div:hover {
    transition: all 0.3s ease;
    background: var(--color-light-gray);
    color: var(--color-dark-yellow);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.sidebar li a.active{
    background: var(--color-light-gray);
    color: var(--color-dark-yellow);
}
.sidebar .right-arrow {
    display: none;
}
.sidebar li a.active .right-arrow {
    display: block;
}