@font-face {
      font-family: "Vazir";
      src: url("../fonts/Vazir.eot");
      src: url("../fonts/Vazir.eot?#iefix") format('embedded-opentype'),
           url("../fonts/Vazir.woff2") format("woff2"),
           url("../fonts/Vazir.woff") format("woff"),
           url("../fonts/Vazir.ttf") format("truetype");
    }

    body {
      font-family: "Vazir" !important;
     
    }
    ::-webkit-scrollbar{
      width: 6px;
    }
    ::-webkit-scrollbar-track{
      background-color: rgb(255, 254, 253);
    }
    ::-webkit-scrollbar-thumb{
      background-color: rgb(183, 81, 18);
      border-radius: 6px;
    }
      ::-webkit-scrollbar-thumb:hover{
        background: rgb(253, 165, 165);
      }

    /* content */
    .card{
      border: none;
      border-radius: 0.7rem;
    }

    .card-header{
      padding: 1rem;
      background-color: white;
      border-bottom: none;
    }
    .card-header:first-child{
      border-radius: 0.7rem;
    }
    .stats-icon{
      width: 3rem;
      height: 3rem;
      border-radius: 0.5rem;
      
      color: aliceblue;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .bg1{
       background-color:rgb(255, 61, 61);
    }
    .bg2{
      background-color: rgb(255, 61, 61);
    }
    .bg3{
      background-color: rgb(255, 61, 61);
    }
    .bg4{
      background-color: rgb(255, 61, 61);
    }
    .lh-0{
      line-height: 0;
    }

     
        /* sidebar */
        .sidebar {
            width: 250px;
            height: 100vh;
            position: fixed;
            background-color: rgb(219, 48, 48);
            transition: all 0.5s ease-out;
            padding: 2rem;
            overflow-y:hidden;
            z-index: 99;
        }

        .sidebar:hover{
          overflow-y: auto;
        }
          .sidebar.inactive {
             margin-right: -250px;
           }


      .sidebar .sidebar-item{
        margin-top: .5rem;
      }
      .sidebar .sidebar-item .sidebar-link{
        text-decoration: none;
        color: brown;
        padding: .7rem 1rem;
        display: flex;
        align-items: center;
        border-radius: 0.5rem;
        transition: 0.5s;
      }

      .sidebar .sidebar-item .sidebar-link{
        cursor: pointer;
      }

      .sidebar .sidebar-item .sidebar-link {
        color: rgb(255, 255, 255);
      }

      .sidebar-item.active .sidebar-link{
        background-color: rgb(255, 255, 255);
        color: rgb(255, 2, 2);
      }

      .sidebar .sidebar-item .sidebar-link:hover{
       background-color: rgba(243, 187, 172, 0.352);
      }

      .sidebar .submenu{
        list-style: none;
      }
     .sidebar-item a{
      padding: 0.7rem 1rem;
      display: block;
      color: rgb(255, 255, 255);
      font-size: 0.85rem;
      font-weight: 600px;
      text-decoration: none;
      transition: all 0.3s;
     }
     .sidebar-item a:hover{
      margin-right: 0.3rem;
      background-color: rgba(255, 255, 255, 0.371);
      color: rgb(28, 4, 4);
      border-radius: 4px;
     }

     .sidebar-item .bi-chevron-down{
      font-size: 0.8rem;
     }
        
        /* Main */
        .bar1{
          background-color: rgb(255, 77, 0);
        }
        .main{
          
            background-color: rgb(251, 246, 246);
            transition: all 0.5s ease-out;
        }
        .main.active {
        margin-right: 0;
        }
        .toggle-sidebar-icon{
          color: rgb(118, 12, 12);
        }
        .text-gray{
          color: rgb(96, 166, 26);
        }
        .text-gray-600{
          color:rgb(42, 61, 4) !important;
        }

        .fs-7{
          font-size: 0.9rem;
        }

         .fs-8{
          font-size: 0.8rem;
        }

      .profill::after{
          display: none !important;
        }
        .bg-red{
          background-color: rgb(255, 61, 61);
        }
        @media (min-width:992px) {
           .main{
            margin-right: 250px;
            
        } 
        }
    [x-cloak]{
      display: none !important;
    }
        
        
    .simple-bar-chart {
      --line-count: 10;
      --line-color: currentcolor;
      --line-opacity: 0.25;
      --item-gap: 2%;
      --item-default-color: #060606;

      height: 10rem;
      display: grid;
      grid-auto-flow: column;
      gap: var(--item-gap);
      align-items: end;
      padding-inline: var(--item-gap);
      --padding-block: 1.5rem;
      /*space for labels*/
      padding-block: var(--padding-block);
      position: relative;
      isolation: isolate;
    }

    .simple-bar-chart::after {
      content: "";
      position: absolute;
      inset: var(--padding-block) 0;
      z-index: -1;
      --line-width: 1px;
      --line-spacing: calc(100% / var(--line-count));
      background-image: repeating-linear-gradient(to top, transparent 0 calc(var(--line-spacing) - var(--line-width)), var(--line-color) 0 var(--line-spacing));
      box-shadow: 0 var(--line-width) 0 var(--line-color);
      opacity: var(--line-opacity);
    }

    .simple-bar-chart>.item {
      height: calc(1% * var(--val));
      background-color: var(--clr, var(--item-default-color));
      position: relative;
      animation: item-height 1s ease forwards
    }

    @keyframes item-height {
      from {
        height: 0
      }
    }

    .simple-bar-chart>.item>* {
      position: absolute;
      text-align: center
    }

    .simple-bar-chart>.item>.label {
      inset: 100% 0 auto 0
    }

    .simple-bar-chart>.item>.value {
      inset: auto 0 100% 0
    }