@import url("https://fonts.googleapis.com/css2?family=Fira+Sans: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=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

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

body {
    font-family: "Fira Sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    background-color: rgb(193, 188, 188);
}

main {
    display: flex;
}
/* .scrollClass {
    overflow: auto; 
    height: 200vh; 
} */
/* HTML: <div class="loader"></div> */
.loader {
    --w:10ch;
    font-weight: bold;
    font-family: monospace;
    font-size: 30px;
    line-height: 1.2em;
    letter-spacing: var(--w);
    width: var(--w);
    overflow: hidden;
    white-space: nowrap;
    color: #0000;
    animation: l17 2s infinite;
  }
  .loader:before {
    content:"Loading...";
  }
  
  @keyframes l17 {
     0% {text-shadow: 
          calc( 0*var(--w)) -1.2em #000,calc(-1*var(--w)) -1.2em #000,calc(-2*var(--w)) -1.2em #000,calc(-3*var(--w)) -1.2em #000,calc(-4*var(--w)) -1.2em #000, 
          calc(-5*var(--w)) -1.2em #000,calc(-6*var(--w)) -1.2em #000,calc(-7*var(--w)) -1.2em #000,calc(-8*var(--w)) -1.2em #000,calc(-9*var(--w)) -1.2em #000}
     4% {text-shadow: 
          calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) -1.2em #000,calc(-2*var(--w)) -1.2em #000,calc(-3*var(--w)) -1.2em #000,calc(-4*var(--w)) -1.2em #000, 
          calc(-5*var(--w)) -1.2em #000,calc(-6*var(--w)) -1.2em #000,calc(-7*var(--w)) -1.2em #000,calc(-8*var(--w)) -1.2em #000,calc(-9*var(--w)) -1.2em #000}
     8% {text-shadow: 
          calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) 0      #000,calc(-2*var(--w)) -1.2em #000,calc(-3*var(--w)) -1.2em #000,calc(-4*var(--w)) -1.2em #000, 
          calc(-5*var(--w)) -1.2em #000,calc(-6*var(--w)) -1.2em #000,calc(-7*var(--w)) -1.2em #000,calc(-8*var(--w)) -1.2em #000,calc(-9*var(--w)) -1.2em #000}
    12% {text-shadow: 
          calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) 0      #000,calc(-2*var(--w)) 0      #000,calc(-3*var(--w)) -1.2em #000,calc(-4*var(--w)) -1.2em #000, 
          calc(-5*var(--w)) -1.2em #000,calc(-6*var(--w)) -1.2em #000,calc(-7*var(--w)) -1.2em #000,calc(-8*var(--w)) -1.2em #000,calc(-9*var(--w)) -1.2em #000}
    16% {text-shadow: 
          calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) 0      #000,calc(-2*var(--w)) 0      #000,calc(-3*var(--w)) 0      #000,calc(-4*var(--w)) -1.2em #000, 
          calc(-5*var(--w)) -1.2em #000,calc(-6*var(--w)) -1.2em #000,calc(-7*var(--w)) -1.2em #000,calc(-8*var(--w)) -1.2em #000,calc(-9*var(--w)) -1.2em #000}
    20% {text-shadow: 
          calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) 0      #000,calc(-2*var(--w)) 0      #000,calc(-3*var(--w)) 0      #000,calc(-4*var(--w)) 0      #000, 
          calc(-5*var(--w)) -1.2em #000,calc(-6*var(--w)) -1.2em #000,calc(-7*var(--w)) -1.2em #000,calc(-8*var(--w)) -1.2em #000,calc(-9*var(--w)) -1.2em #000}
    24% {text-shadow: 
          calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) 0      #000,calc(-2*var(--w)) 0      #000,calc(-3*var(--w)) 0      #000,calc(-4*var(--w)) 0      #000, 
          calc(-5*var(--w)) 0      #000,calc(-6*var(--w)) -1.2em #000,calc(-7*var(--w)) -1.2em #000,calc(-8*var(--w)) -1.2em #000,calc(-9*var(--w)) -1.2em #000}
    28% {text-shadow: 
          calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) 0      #000,calc(-2*var(--w)) 0      #000,calc(-3*var(--w)) 0      #000,calc(-4*var(--w)) 0      #000, 
          calc(-5*var(--w)) 0      #000,calc(-6*var(--w)) 0      #000,calc(-7*var(--w)) -1.2em #000,calc(-8*var(--w)) -1.2em #000,calc(-9*var(--w)) -1.2em #000}
    32% {text-shadow: 
          calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) 0      #000,calc(-2*var(--w)) 0      #000,calc(-3*var(--w)) 0      #000,calc(-4*var(--w)) 0      #000, 
          calc(-5*var(--w)) 0      #000,calc(-6*var(--w)) 0      #000,calc(-7*var(--w)) 0      #000,calc(-8*var(--w)) -1.2em #000,calc(-9*var(--w)) -1.2em #000}
    36% {text-shadow: 
          calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) 0      #000,calc(-2*var(--w)) 0      #000,calc(-3*var(--w)) 0      #000,calc(-4*var(--w)) 0      #000, 
          calc(-5*var(--w)) 0      #000,calc(-6*var(--w)) 0      #000,calc(-7*var(--w)) 0      #000,calc(-8*var(--w)) 0      #000,calc(-9*var(--w)) -1.2em #000}
    40%,
    60% {text-shadow: 
          calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) 0      #000,calc(-2*var(--w)) 0      #000,calc(-3*var(--w)) 0      #000,calc(-4*var(--w)) 0      #000, 
          calc(-5*var(--w)) 0      #000,calc(-6*var(--w)) 0      #000,calc(-7*var(--w)) 0      #000,calc(-8*var(--w)) 0      #000,calc(-9*var(--w)) 0      #000}
    64% {text-shadow: 
          calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) 0      #000,calc(-2*var(--w)) 0      #000,calc(-3*var(--w)) 0      #000,calc(-4*var(--w)) 0      #000, 
          calc(-5*var(--w)) 0      #000,calc(-6*var(--w)) 0      #000,calc(-7*var(--w)) 0      #000,calc(-8*var(--w)) 0      #000,calc(-9*var(--w)) 1.2em  #000}
    68% {text-shadow: 
          calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) 0      #000,calc(-2*var(--w)) 0      #000,calc(-3*var(--w)) 0      #000,calc(-4*var(--w)) 0      #000, 
          calc(-5*var(--w)) 0      #000,calc(-6*var(--w)) 0      #000,calc(-7*var(--w)) 0      #000,calc(-8*var(--w)) 1.2em  #000,calc(-9*var(--w)) 1.2em  #000}
    72% {text-shadow: 
          calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) 0      #000,calc(-2*var(--w)) 0      #000,calc(-3*var(--w)) 0      #000,calc(-4*var(--w)) 0      #000, 
          calc(-5*var(--w)) 0      #000,calc(-6*var(--w)) 0      #000,calc(-7*var(--w)) 1.2em  #000,calc(-8*var(--w)) 1.2em  #000,calc(-9*var(--w)) 1.2em  #000}
    76% {text-shadow: 
          calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) 0      #000,calc(-2*var(--w)) 0      #000,calc(-3*var(--w)) 0      #000,calc(-4*var(--w)) 0      #000, 
          calc(-5*var(--w)) 0      #000,calc(-6*var(--w)) 1.2em  #000,calc(-7*var(--w)) 1.2em  #000,calc(-8*var(--w)) 1.2em  #000,calc(-9*var(--w)) 1.2em  #000}
    80% {text-shadow: 
          calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) 0      #000,calc(-2*var(--w)) 0      #000,calc(-3*var(--w)) 0      #000,calc(-4*var(--w)) 0      #000, 
          calc(-5*var(--w)) 1.2em  #000,calc(-6*var(--w)) 1.2em  #000,calc(-7*var(--w)) 1.2em  #000,calc(-8*var(--w)) 1.2em  #000,calc(-9*var(--w)) 1.2em  #000}
    84% {text-shadow: 
          calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) 0      #000,calc(-2*var(--w)) 0      #000,calc(-3*var(--w)) 0      #000,calc(-4*var(--w)) 1.2em  #000, 
          calc(-5*var(--w)) 1.2em  #000,calc(-6*var(--w)) 1.2em  #000,calc(-7*var(--w)) 1.2em  #000,calc(-8*var(--w)) 1.2em  #000,calc(-9*var(--w)) 1.2em  #000}
    88% {text-shadow: 
          calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) 0      #000,calc(-2*var(--w)) 0      #000,calc(-3*var(--w)) 1.2em  #000,calc(-4*var(--w)) 1.2em  #000, 
          calc(-5*var(--w)) 1.2em  #000,calc(-6*var(--w)) 1.2em  #000,calc(-7*var(--w)) 1.2em  #000,calc(-8*var(--w)) 1.2em  #000,calc(-9*var(--w)) 1.2em  #000}
    92% {text-shadow: 
          calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) 0      #000,calc(-2*var(--w)) 1.2em  #000,calc(-3*var(--w)) 1.2em  #000,calc(-4*var(--w)) 1.2em  #000, 
          calc(-5*var(--w)) 1.2em  #000,calc(-6*var(--w)) 1.2em  #000,calc(-7*var(--w)) 1.2em  #000,calc(-8*var(--w)) 1.2em  #000,calc(-9*var(--w)) 1.2em  #000}
    96% {text-shadow: 
          calc( 0*var(--w)) 0      #000,calc(-1*var(--w)) 1.2em  #000,calc(-2*var(--w)) 1.2em  #000,calc(-3*var(--w)) 1.2em  #000,calc(-4*var(--w)) 1.2em  #000, 
          calc(-5*var(--w)) 1.2em  #000,calc(-6*var(--w)) 1.2em  #000,calc(-7*var(--w)) 1.2em  #000,calc(-8*var(--w)) 1.2em  #000,calc(-9*var(--w)) 1.2em  #000}
    100% {text-shadow: 
          calc( 0*var(--w)) 1.2em  #000,calc(-1*var(--w)) 1.2em  #000,calc(-2*var(--w)) 1.2em  #000,calc(-3*var(--w)) 1.2em  #000,calc(-4*var(--w)) 1.2em  #000, 
          calc(-5*var(--w)) 1.2em  #000,calc(-6*var(--w)) 1.2em  #000,calc(-7*var(--w)) 1.2em  #000,calc(-8*var(--w)) 1.2em  #000,calc(-9*var(--w)) 1.2em  #000}
  }

/* HTML: <div class="loader"></div> */
.loader2 {
    --s: 40px;
    height: calc(var(--s)*0.9);
    width: calc(var(--s)*5);
   --v1:transparent,#000 0.5deg 108deg,#0000 109deg;
   --v2:transparent,#000 0.5deg  36deg,#0000  37deg;
   -webkit-mask:
     conic-gradient(from 54deg  at calc(var(--s)*0.68) calc(var(--s)*0.57),var(--v1)),
     conic-gradient(from 90deg  at calc(var(--s)*0.02) calc(var(--s)*0.35),var(--v2)),
     conic-gradient(from 126deg at calc(var(--s)*0.5)  calc(var(--s)*0.7) ,var(--v1)),
     conic-gradient(from 162deg at calc(var(--s)*0.5)  0                  ,var(--v2));
   -webkit-mask-size: var(--s) var(--s);
   -webkit-mask-composite: xor,destination-over;
           mask-composite: exclude,add;
   -webkit-mask-repeat:repeat-x;
   background:linear-gradient(#ffb940 0 0) left/0% 100% #ddd no-repeat;
   animation: l20 2s infinite linear;
 }
 @keyframes l20 {
     90%,100% {background-size:100% 100%}
 }

 /* HTML: <div class="loader"></div> */
.loader3 {
  width: fit-content;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 30px;
  padding: 0 5px 8px 0;
  background: repeating-linear-gradient(90deg,currentColor 0 8%,#0000 0 10%) 200% 100%/200% 3px no-repeat;
  animation: l3 2s steps(6) infinite;
}
.loader3:before {
  content:"Loading..."
}
@keyframes l3 {to{background-position: 80% 100%}}

.loginCard {
    background-color: rgb(242, 222, 222, 0.9);
    width: 300px;
}

.loginCard .imgContainer{
    background-color: white;
    width: 200px;
}
.loginCard .imgContainer img{
    width: 100px;
    height: 100px;
}

.createAccCard {
    background-color: rgb(242, 222, 222, 0.9);
    /* width: 300px; */
}

.createAccCard .imgContainer{
    background-color: white;
    width: 200px;
}
.createAccCard .imgContainer img{
    width: 100px;
    height: 100px;
}

.createAccCard .password-container {
    position: relative;
}
.createAccCard .password-toggle {
    position: absolute;
    top: 5px;
    right: 10px;
    /* transform: translateY(-50%); */
    cursor: pointer;
}
.createAccCard .password-toggle{
    /* width: 30px; */
    font-size: 20px;
}

.userShow {
    display: flex !important;
}

.userShowNone {
    display: none !important;
}

.sidebarBtn {
    display: none;
    /* position: fixed; Stick to the screen */
    top: 10px; /* Position from the top */
    left: 10px; /* Position from the left */
    z-index: 1000; /* Ensure it is on top of other content */ 
    width: 50px;
    height: 50px;
    border-radius: 14px;
    border: none;
    transition: all .3s ease-in-out;
}

.sideBarButtonClose {
    right: 10px;
    left: 0;
    top: 10px;
}

.sidebar {
    width: 25%;
    /* height: 100%; */
    /* background-color: whitesmoke; */
    border-radius: 0 12px 12px 0;
}
.mainContent {
    width: 75%;
    /* background-color: whitesmoke; */
    padding: 10px;
}
.mainMiddle {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.mainMiddle .mainMiddleLeft {
    width: 49%;
    padding: 20px;
    background-color: whitesmoke;
}
.mainMiddle .mainMiddleRight {
    width: 49%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: whitesmoke;
}

.chDetails {
    /* display: flex;
    justify-content: center;
    align-items: center; */
    flex-direction: column;
    background-color: rgb(204, 225, 230);
    /* padding: 1rem; */
    
}

/* .chDetailsImg {
    display: flex;
    justify-content: center;
    align-items: center; */
    /* margin-right: -1%;
} */

.chDetailsImg img {
    width: 30%;
    /* height: 30%; */
    border-radius: 14px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* .chDetailsInfo {
    width: 65%;
    display: flex;
    flex-direction: column;
} */

.chDetailsInfo h3 {
    font-size: 25px;
    font-family: "Ubuntu", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.chDetailsInfo h4 {
    font-size: 18px;
    font-family: "Ubuntu", sans-serif;
    font-weight: 400;
    font-style: italic;
    color: gray;
}

/* Ensure the container has some margin at the top */
.mainTop .container {
    margin-top: 5rem;
}

/* Styling for the metric cards */
.mainTop .metric-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 150px; /* Adjust height as needed */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.mainTop .metric-card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.mainTop .metric-card h4 {
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.mainTop .metric-card p {
    margin: 0;
    font-size: 2.5rem;
    font-weight: bold;
}
.mainMiddle .mainMiddleRight .chartsRow {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.mainMiddle .mainMiddleRight .chart-container {
    position: relative;
    width: 100%;
    /* height: 100px; */
    /* max-width: 500px; Adjust this to fit your design */
    margin: 0 auto; /* Center the container */
}

.mainMiddle .mainMiddleRight .chart-container #organsChart{
    height: 100px;
}

.mainMiddle .mainMiddleRight .chart-container #genderChart, 
.mainMiddle .mainMiddleRight .chart-container #genderChart{
    height: 100px;
    max-width: 200px;
}

.mainMiddle .mainMiddleRight canvas {
    width: 100% !important; /* Ensure canvas takes full width of its container */
    height: auto !important; /* Maintain aspect ratio */
}

.editUserModal{
    padding: 10px;
}

.editUserModal .userModalImage{
    width: 200px;
}

.editUserModal .userModalBtn{
    height: 30px;
    /* width: 30px; */
}

.editUserModal .userModalImageBtn span{
    font-size: 18;
}

@media (max-width: 1024px) {
    .allowScrollHorizontalsParent {
        overflow: hidden; /* Hide overflow to ensure the child scrolls horizontally */
        width: 100%; /* Full width of the parent container */
        position: relative; /* Ensure proper positioning of the child */
    }
    
    .allowScrollHorizontalsWrapper {
        overflow-x: auto; /* Enable horizontal scrolling for the table */
        width: 100%; /* Full width of the parent container */
    }
    
    .allowScrollHorizontals {
        min-width: 250%; /* Ensure the table respects its width */
        border-collapse: collapse; /* Ensure borders collapse properly */
        /* The width of the table can be adjusted based on content */
    }

    .allowScrollHorizontalsMemberParent {
        overflow: hidden; /* Hide overflow to ensure the child scrolls horizontally */
        width: 100%; /* Full width of the parent container */
        position: relative; /* Ensure proper positioning of the child */
    }
    
    .allowScrollHorizontalsMemberWrapper {
        overflow-x: auto; /* Enable horizontal scrolling for the table */
        width: 100%; /* Full width of the parent container */
    }
    
    .allowScrollHorizontalsMember {
        min-width: 150%; /* Ensure the table respects its width */
        border-collapse: collapse; /* Ensure borders collapse properly */
        /* The width of the table can be adjusted based on content */
    }
}




@media (max-width: 767.98px) {
    /* Styles for small devices */
    main {
        flex-direction: column;
        position: relative;
    }
    body {
        overflow: scroll;
    }
    .loginCard {
        background-color: rgb(242, 222, 222, 0.9);
        margin-top: -20%;
    }
    .loginCard .imgContainer img{
        width: 200px;
    }
    .sidebarBtn {
        display: block;
        position: relative;
        margin-bottom: 10px;
    }
    .sidebarBtn .bi {
        /* left: 300px; */
        color: rgb(27, 82, 233);
        font-size: 30px;
    }

    .sidebar {
        position: relative;
        z-index: 99;
        display: none;
        width: 90%;
        height: 100vh;
        opacity: 0;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    .sidebar.active {
        opacity: 1;
        transform: translateX(0);
        display: block;
    }
    .sidebar .chDetails {
        /* flex-direction: row; */
        padding-top: 10px;
    }
    .sidebar .chDetailsImg img {
        width: 25%;
    }
    .sidebar .chDetailsInfo {
        padding-top: 10px;
        padding-bottom: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .sidebar .chDetailsInfo h3 {
        font-size: 16px;
    }
    
    .sidebar .chDetailsInfo h4 {
        font-size: 12px;
    }
    .mainContent {
        width: 100%;
        /* background-color: whitesmoke; */
        padding: 10px;
    }
    .mainMiddle {
        flex-direction: column;
    }
    .mainMiddle .mainMiddleLeft {
        order: 2;
        width: 100%;
    }
    .mainMiddle .mainMiddleRight {
        width: 100%;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: whitesmoke;
    }
    /* .mainMiddle .mainMiddleRight .chart-container #organsChart{
        height: 100;
    } */
    
    .mainMiddle .mainMiddleRight .chart-container #genderChart, 
    .mainMiddle .mainMiddleRight .chart-container #genderChart{
        height: 150px;
        max-width: 200px;
    }
}

@media (max-width: 992px) {
    /* Styles for small devices */
    main {
        flex-direction: column;
        position: relative;
    }
    .sidebarBtn {
        display: block;
    }
    .sidebar {
        position: absolute;
        z-index: 99;
        display: none;
        width: 90%;
        height: 100vh;
        /* background-color: rgba(245, 245, 245, 0.308); */
        transform: translateX(-100%); /* Start off-screen to the left */
        transition: transform .5s ease-in-out;
    }
    .sidebar.active {
        display: block; /* Show the sidebar */
        transform: translateX(0); /* Slide in from the left */
    }
    .sidebar.remove {
        display: none; /* Show the sidebar */
        transform: translateX(-100%); /* Slide in from the left */
    }
    .sidebar.show {
        animation: sidebarSlide 1s ease-out; /* Adjust duration and easing as needed */
    }
    @keyframes sidebarSlide {
        from {
            transform: translateX(-100%); /* Off-screen to the left */
        }
        to {
            transform: translateX(0); /* Fully visible */
        }
    }
    .sidebar .chDetails {
        /* flex-direction: row; */
        padding-top: 10px;
    }
    .sidebar .chDetailsImg img {
        width: 25%;
    }
    .sidebar .chDetailsInfo {
        padding-top: 10px;
        padding-bottom: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .sidebar .chDetailsInfo h3 {
        font-size: 16px;
    }
    
    .sidebar .chDetailsInfo h4 {
        font-size: 12px;
    }
    .mainContent {
        width: 100%;
        /* background-color: whitesmoke; */
        padding: 10px;
    }
    .mainMiddle {
        flex-direction: column;
    }
    .mainMiddle .mainMiddleLeft {
        order: 2;
        width: 100%;
    }
    .mainMiddle .mainMiddleRight {
        width: 100%;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: whitesmoke;
    }
    /* .mainMiddle .mainMiddleRight .chart-container #organsChart{
        height: 100;
    } */
    
    .mainMiddle .mainMiddleRight .chart-container #genderChart, 
    .mainMiddle .mainMiddleRight .chart-container #genderChart{
        height: 200px;
        width: 200px;
    }
}