@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&display=swap');

* {
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}

.fill-white {
    fill: #fff;
}

.fill-blue {
    fill: #0000FF;
}

.fill-orange {
    fill: #ff7300;
}

.fill-gray {
    fill: #6b7280;
}

.fill-green {
    fill: #0BDA51;
}

.fill-red {
    fill: red;
}

.apexcharts-toolbar {
    z-index: 11 !important;
}

.mydiv1 {
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}


.flexVertical {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.divSmartlist {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
}


.myShadow {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.fill-gray-400 {
    fill: #9ca3af;
}

.half-circle0 {
    width: 200px;
    height: 100px; /* as the half of the width */
    position: relative;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border: 15px solid #c1dcff;
    border-bottom: 0;

}

.half-circle1 {
    width: 200px;
    height: 100px; /* as the half of the width */
    margin-left: -15px;
    margin-top: -15px;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border-left: 15px solid rgb(0, 110, 255);
    border-bottom: 0;
    z-index: 10;
}


@property --p{
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
  }

  .pie {
    --p:20;
    --b:22px;
    --c:rgb(0, 110, 255);
    --w:150px;

    width:var(--w);
    aspect-ratio:1;
    position:relative;
    display:inline-grid;
    margin:5px;
    place-content:center;
    font-size:1.8rem;
    font-weight:bold;
  }
  .pie:before,
  .pie:after {
    content:"";
    position:absolute;
    border-radius:50%;
  }
  .pie:before {
    inset:0;
    background:
      radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
      conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
    -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
            mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
    background-color: #e0e0e0;

  }
  .pie:after {
    inset:calc(50% - var(--b)/2);
    background:var(--c);
    transform:rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
  }
  .animate {
    animation:p 1s .5s both;
  }
  .no-round:before {
    background-size:0 0,auto;
  }
  .no-round:after {
    content:none;
  }
  @keyframes p {
    from{--p:0}
  }


  .mytbody {
    display: block;
    max-height: 25rem;
    overflow-y: scroll;
}
.mythead, .mytbody .mytr {
    display: table;
    width: 100%;
    table-layout: fixed;/* even columns width , fix width of table too*/
}

/* width */
::-webkit-scrollbar {
    width: 5px;
  }

  /* Track
  ::-webkit-scrollbar-track {
    background: transparent;
  }

 
  ::-webkit-scrollbar-thumb {
    background: #ff9e4f;
    border-radius: 15px;
  }


  ::-webkit-scrollbar-thumb:hover {
    background: #ff7300;
  } */

  .vue-toasted {
    position: fixed;
    z-index: 9999;
    bottom: 10px;
    right: 10px;
    font-size: 14px;
    padding: 10px;
    border-radius: 4px;
    color: #fff;
    background-color: #333;
    width: 200px;
    line-height: 1.2;
    word-wrap: break-word;
  }

.error-border {
    border: 1px solid red;
}


.myshadow {
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

.bg-rosecolor {
  /* background: rgb(165, 32, 70);
  background: linear-gradient(
      90deg,
      rgba(165, 32, 70, 1) 0%,
      rgba(210, 60, 159, 1) 48%,
      rgba(241, 176, 250, 1) 100%
  ); */
  background-color: #f0798b;
}
.bg-orangecolor {
  /* background: rgb(255, 152, 28);
  background: linear-gradient(
      90deg,
      rgba(255, 152, 28, 1) 0%,
      rgba(255, 173, 79, 1) 48%,
      rgba(255, 197, 71, 1) 100%
  ); */
  background-color: #ffd24b;
}
.bg-purplecolor {
  background: rgb(148, 117, 210);
  background: linear-gradient(
      90deg,
      rgba(148, 117, 210, 1) 0%,
      rgba(172, 127, 219, 1) 48%,
      rgba(217, 140, 255, 1) 100%
  );
}

.bg-bluecolor {
  /* background: rgb(86, 119, 245);
  background: linear-gradient(
      90deg,
      rgba(86, 119, 245, 1) 0%,
      rgba(124, 159, 255, 1) 48%,
      rgba(145, 179, 245, 1) 100%
  ); */
  background-color: #789AF5;
}
.bg-greencolor {
  background: #D6F792
}
.bg-purple {
  background-color: #eaeaff;
}
.bg-rose {
  background-color: #fae1e1;
}
.bg-green {
  background-color: #d8e6e1;
}
.cl-rose {
  color: #704848;
}
.cl-green {
  color: #577067;
}