@import url('https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,100..900;1,100..900&family=Inter:wght@100..900&display=swap');

*{
    margin: 0;
    padding: 0;
}

/* Admin Panel dashboard */
.main-heading{
    font-family: Epilogue; /* Heading */
    font-size: 20px; 
    line-height: 30px; 
    font-weight: 700; 
    color: #171A1FFF;
    margin:10px 0px;
}
.overview-div{
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-evenly;
}
.overview-div li{
    width:100%;
    height: 100px;
    border-radius: 6px;
    margin: 10px;
}
.overview-div li:nth-child(1){
    background-color: #F5F2FDFF;
}
.overview-div li:nth-child(2){
  background-color: #F1F4FDFF;
}
.overview-div li:nth-child(3){
    background-color: #FEF6F1FF;
  }
.overview-div li:nth-child(4){
    background-color:  #EBFDFFFF;
  }
.overview-div li:nth-child(5){
    background-color: #EBFDFFFF;
  }
 .text-div{
    padding: 20px 0px 0px 10px;
 } 
 .text-overview{
    font-family: Inter; /* Body */
    font-size: 12px; 
    line-height: 20px; 
    font-weight: 700; 
    color: #171A1FFF;
   /* margin: 25px 0px 10px 0px; */
 } 
 .text-no{
    font-family: Inter; /* Body */
    font-size: 28px; 
    line-height: 42px; 
    font-weight: 700; 
    color: #171A1FFF;
 }
 .align-chart{
   margin-top: 20px;
   border: none !important;
   box-shadow: 0px 0px 1px #dcdee1, 0px 0px 2px #dcdee1 !important; 
 }
 .chart-heading{
    padding-left: 24px; 
    font-family: Epilogue; /* Heading */
    font-size: 18px; 
    line-height: 28px; 
    font-weight: 700; 
    color: #171A1FFF;
    padding: 0px 20px;
 }
 .tbl-heading{
  font-family: Epilogue; /* Heading */
  font-size: 14px; 
  line-height: 22px; 
  font-weight: 600; 
  color: #171A1FFF;
  padding: 20px !important;
 }
 .tblEvent-text{
  font-family: Inter; /* Body */
  font-size: 14px; 
  line-height: 22px; 
  font-weight: 400; 
  color: #171A1FFF;
  padding: 20px !important;
 }
 /* .align-canvas{
  width: 100% !important;
  height: 100% !important;
} */
.legend-circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}
#price-event-chart{
  width: 100%;
  height: 400px; /* Adjust the height as needed */
}
#ticket-sales-chart{
  width: 100%;
  height: 400px; /* Adjust the height as needed */
}
#revenue-chart {
  width: 100%;
  height: 400px; /* Adjust the height as needed */
}
#registration-chart{
  width: 100%;
  height: 400px; /* Adjust the height as needed */
}
#vote-event-chart {
  width: 100%;
  height: 400px; /* Adjust the height as needed */
}
#resales-ticket-chart {
  width: 100%;
  height: 400px; /* Adjust the height as needed */
}
/* Seller Panel Dashboard */
.heading-icon{
  width: 30px;
  height: 30px;
  margin:0px 10px;
}
.align-cornerdiv{
  display: flex;
  justify-content: space-between;
}
.select-control{
  height: 30px;
}
.dashboard-div{
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.dashboard-div li{
    width:300px;
    height: 150px;
    border-radius: 6px;
    margin: 10px 0px;
    text-align: center;

}
.dashboard-div li:nth-child(1){
    background-color: #f1f4fd;
    border: 1px solid #e0e6fa;
}
.dashboard-div li:nth-child(2){
  background-color: #f5f2fd;
  border:1px solid #eae4fa;
}
.dashboard-div li:nth-child(3){
    background-color: #ebfdff;
    border:1px solid #d2f9ff;
  }
.dashboard-No{
  font-family: Epilogue; /* Heading */
  font-size: 32px; 
  line-height: 48px; 
  font-weight: 600; 
}
.d-no1{
  color: #4069e5;
}
.d-no2{
  color: #8353e2;
}
.d-no3{
  color:#00bdd6;
}
.img-dicon{
  width:30px;
  height:30px
}
.dashboard-text{
  font-family: Inter; /* Body */
  font-size: 16px; 
  line-height: 26px; 
  font-weight: 700; 
  color: #323842FF;
}
.align-heading{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
.t-reservation{
  font-family: Inter; /* Body */
  font-size: 24px; 
  line-height: 36px; 
  font-weight: 700; 
  color: #171A1FFF;
  padding: 20px 0px;
}
#s-prices-event-chart {
  width: 100%;
  height: 400px; /* Adjust the height as needed */
}
#s-ticket-sales-chart {
  width: 100%;
  height: 400px; /* Adjust the height as needed */
}


 /* Responsive design */
 @media screen and (min-width: 320px) and (max-width:575px){
  /* Admin Dashboard */
  .main-heading {
    font-size: 16px;
  }
  .text-overview {
    font-size: 12px;
  }
  .text-no {
    font-size: 18px;
    line-height: 24px;
  }
  .text-div {
    padding: 20px 2px 0px 20px;
  }
  .overview-div {
    flex-wrap: wrap;
  }
  .overview-div li{
    margin: 10px 5px 10px 5px;
  }
  .chart-heading {
    padding-left: 10px;
    font-size: 14px;
  }
  .tbl-heading {
    font-size: 12px;
  }
  .tblEvent-text {

    font-size: 12px;
  }
  .align-canvas{
    width: 100% !important;
    height: 100% !important;
  }
  #price-event-chart{
    width: 100% !important;
    height: 200px !important; /* Adjust the height as needed */
  }
  #ticket-sales-chart{
    width: 100% !important;
    height: 200px !important; /* Adjust the height as needed */
  }
  #revenue-chart {
    width: 100% !important;
    height: 200px !important; /* Adjust the height as needed */
  }
  #registration-chart{
    width: 100% !important;
    height: 200px !important; /* Adjust the height as needed */
  }
  #vote-event-chart {
    width: 100% !important;
    height: 200px !important; /* Adjust the height as needed */
  }
  #resales-ticket-chart {
    width: 100% !important;
    height: 200px !important; /* Adjust the height as needed */
  }



  /* Seller Panel Dashboard */
  .dashboard-div {
    flex-wrap: wrap;
  }
  .dashboard-div li {
    width: 100%;
  }
  .dashboard-No {
    font-size: 28px;
  }
  .dashboard-text {
     font-size: 12px;
  }
  .img-dicon {
    width: 25px;
    height: 25px;
  }
  .select-control {
    font-size: 12px;
    height: 25px;
  }
  .t-reservation {
    font-size: 20px;
  }  
  #s-prices-event-chart {
    width: 100% !important;
    height: 200px !important; /* Adjust the height as needed */
  }
  #s-ticket-sales-chart {
    width: 100% !important;
    height: 200px !important; /* Adjust the height as needed */
  }
 }
 @media screen and (min-width: 576px) and (max-width:767px){
  /* Admin Panel Dashboard */
  .main-heading {
    font-size: 16px;
  }
  .text-overview {
    font-size: 12px;
  }
  .text-no {
    font-size: 26px;
  }
  .text-div {
    padding: 20px 2px 0px 20px;
  }
  .overview-div {
    flex-wrap: wrap;
  }
  .overview-div li{
    margin: 10px 5px 10px 5px;
  }
  .chart-heading {
    padding-left: 10px;
    font-size: 14px;
  }
  .tbl-heading {
    font-size: 12px;
  }
  .tblEvent-text {

    font-size: 12px;
  }
  .align-canvas{
    width: 100% !important;
    height: 100% !important;
  }
  #price-event-chart{
    width: 100% !important;
    height: 300px !important; /* Adjust the height as needed */
  }
  #ticket-sales-chart{
    width: 100% !important;
    height: 300px !important; 
  }
  #revenue-chart {
    width: 100% !important;
    height: 300px !important; 
  }
  #registration-chart{
    width: 100% !important;
    height: 300px !important; 
  }
  #vote-event-chart {
    width: 100% !important;
    height: 300px !important; 
  }
  #resales-ticket-chart {
    width: 100% !important;
    height: 300px !important; 
  }

    /* Seller Panel Dashboard */
    .dashboard-div {
      flex-wrap: wrap;
    }
    .dashboard-div li {
      width: 100%;
    }
   .dashboard-No {
      font-size: 28px;
    }
    .dashboard-text {
       font-size: 12px;
    }
    .img-dicon {
      width: 25px;
      height: 25px;
    }
    .select-control {
      font-size: 12px;
      height: 25px;
    }
    .t-reservation {
      font-size: 20px;
    } 
    #s-prices-event-chart {
      width: 100% !important;
      height: 300px !important; 
    }
    #s-ticket-sales-chart {
      width: 100%;
      height: 300px; 
    } 
 }
 @media screen and (min-width: 768px) and (max-width:1023px){
  /* Admin Panel Dashboard */

  .main-heading {
    font-size: 18px;
  }
  .text-overview {
    font-size: 12px;
  }
  .text-no {
    font-size: 26px;
  }
  .text-div {
    padding: 20px 2px 0px 7px;
  }
  .overview-div li{
    margin: 10px 5px 10px 5px;

  }
  .chart-heading {
    padding-left: 10px;
    font-size: 14px;
  }
  .tbl-heading {
    font-size: 12px;
  }
  .tblEvent-text {

    font-size: 12px;
  }
  .align-canvas{
    width: 100% !important;
    height: 100% !important;
  }
  #price-event-chart{
    width: 100% !important;
    height: 300px !important; 
  }
  #ticket-sales-chart{
    width: 100% !important;
    height: 300px !important; 
  }
  #revenue-chart {
    width: 100% !important;
    height: 300px !important; 
  }
  #registration-chart{
    width: 100% !important;
    height: 300px !important; 
  }
  #vote-event-chart {
    width: 100% !important;
    height: 300px !important; 
  }
  #resales-ticket-chart {
    width: 100% !important;
    height: 300px !important; 
  }
  #userschart {
    width: 100% !important;
    height: 300px !important; 
  }

  /* Seller Panel Dashboard */
  .dashboard-div li {
    width: 200px;
    }
  .dashboard-No {
      font-size: 28px;
    }
    .dashboard-text {
       font-size: 12px;
    }
    .img-dicon {
      width: 25px;
      height: 25px;
    }
    .select-control {
      font-size: 12px;
      height: 25px;
    }
    .t-reservation {
      font-size: 20px;
    } 
    #s-prices-event-chart {
      width: 100% !important;
      height: 300px !important; 
    }
    #s-ticket-sales-chart {
      width: 100% !important;
      height: 300px !important; 
    }  
 }
 @media screen and (min-width: 1024px) and (max-width:1199px){
  /* Admin Panel Dashboard */
  .main-heading {
    font-size: 18px;
  }
  .text-overview {
    font-size: 12px;
  }
  .text-no {
    font-size: 26px;
  }
  /* .text-div {
    padding-top: 22px;
  } */
  .overview-div {
    margin: 20px 15px 20px 17px;
  }
  .chart-heading {
    padding-left: 10px;
    font-size: 14px;
  }
  .tbl-heading {
    font-size: 12px;
  }
  .tblEvent-text {

    font-size: 12px;
  }
  #price-event-chart{
    width: 100% !important;
    height: 400px !important; 
  }
  #ticket-sales-chart{
    width: 100% !important;
    height: 400px !important; 
  }
  #revenue-chart {
    width: 100% !important;
    height: 400px !important; 
  }
  #registration-chart{
    width: 100% !important;
    height: 400px !important;
  }
  #vote-event-chart {
    width: 100% !important;
    height: 400px !important; 
  }
  #resales-ticket-chart {
    width: 100% !important;
    height: 400px !important;
  }

    /* Seller dashboard Page */
    .dashboard-No {
      font-size: 30px;
    }
    .dashboard-text {
       font-size: 14px;
    }
    .img-dicon {
      width: 30px;
      height: 30px;
    }
    .select-control {
      font-size: 14px;
      height: 25px;
    }
    .t-reservation {
      font-size: 22px;
    } 
    #s-prices-event-chart {
      width: 100% !important;
      height: 400px !important; 
    }
    #s-ticket-sales-chart {
      width: 100% !important;
      height: 400px !important; 
    }  
 }
 @media screen and (min-width:1200px) and (max-width:1440px){
  /* Admin Dashboard Page */
  .main-heading {
    font-size: 20px;
  }
  .text-overview {
    font-size: 12px;
  }
  .text-no {
    font-size: 28px;
  }
  /* .text-div {
    padding-top: 25px;
  } */
  /* .overview-div {
    height: 100px;
  } */
  .chart-heading {
    padding-left: 10px;
    font-size: 18px;
  }
  .tbl-heading {
    font-size: 14px;
  }
  .tblEvent-text {

    font-size: 14px;
  }
  #price-event-chart{
    width: 100% !important;
    height: 400px !important; 
  }
  #ticket-sales-chart{
    width: 100% !important;
    height: 400px !important; 
  }
  #revenue-chart {
    width: 100% !important;
    height: 400px !important; 
  }
  #registration-chart{
    width: 100% !important;
    height: 400px !important; 
  }
  #vote-event-chart {
    width: 100% !important;
    height: 400px !important; 
  }
  #resales-ticket-chart {
    width: 100% !important;
    height: 400px !important; 
  }

  /* Seller dashboard Page */
     .dashboard-No {
      font-size: 32px;
    }
    .dashboard-text {
       font-size: 16px;
    }
    .img-dicon {
      width: 30px;
      height: 30px;
    }
    .select-control {
      font-size: 16px;
      height: 25px;
    }
    .t-reservation {
      font-size: 24px;
    }  
    #s-prices-event-chart {
      width: 100% !important;
      height: 400px !important; 
    }
    #s-ticket-sales-chart {
      width: 100% !important;
      height: 400px !important; 
    } 
 }
 @media screen and (min-width:1441px) and (max-width:1600px){
  
  /* Admin Dashboard page */
  .main-heading {
    font-size: 20px;
  }
  .text-overview {
    font-size: 12px;
  }
  .text-no {
    font-size: 28px;
  }
  /* .text-div {
    padding-top: 25px;
  } */
  /* .overview-div {
    height: 100px;
  } */
  .chart-heading {
    padding-left: 10px;
    font-size: 18px;
  }
  .tbl-heading {
    font-size: 14px;
  }
  .tblEvent-text {

    font-size: 14px;
  }
  #price-event-chart{
    width: 100% !important;
    height: 400px !important; 
  }
  #ticket-sales-chart{
    width: 100% !important;
    height: 400px !important;
  }
  #revenue-chart {
    width: 100% !important;
    height: 400px !important; 
  }
  #registration-chart{
    width: 100% !important;
    height: 400px !important; 
  }
  #vote-event-chart {
    width: 100% !important;
    height: 400px !important; 
  }
  #resales-ticket-chart {
    width: 100% !important;
    height: 400px !important; 
  }

     /* Seller dashboard Page */
     .dashboard-No {
      font-size: 32px;
    }
    .dashboard-text {
       font-size: 16px;
    }
    .img-dicon {
      width: 30px;
      height: 30px;
    }
    .select-control {
      font-size: 16px;
      height: 25px;
    }
    .t-reservation {
      font-size: 24px;
    }
    #s-prices-event-chart {
      width: 100% !important;
      height: 400px !important; 
    }
    #s-ticket-sales-chart {
      width: 100% !important;
      height: 400px !important; 
    } 
 }
 @media screen and (min-width:1601px) and (max-width:1919px){
  /* Admin dashboard page */
  .main-heading {
    font-size: 22px;
  }
  .text-overview {
    font-size: 14px;
  }
  .text-no {
    font-size: 30px;
  }
  /* .text-div {
    padding-top: 25px;
  } */
  .overview-div {
    height: 110px;
  }
  .chart-heading {
    padding-left: 10px;
    font-size: 20px;
  }
  .tbl-heading {
    font-size: 16px;
  }
  .tblEvent-text {

    font-size: 16px;
  }
  #price-event-chart{
    width: 100% !important;
    height: 400px !important; 
  }
  #ticket-sales-chart{
    width: 100% !important;
    height: 400px !important; 
  }
  #revenue-chart {
    width: 100% !important;
    height: 400px !important; 
  }
  #registration-chart{
    width: 100% !important;
    height: 400px !important; 
  }
  #vote-event-chart {
    width: 100% !important;
    height: 400px !important; 
  }
  #resales-ticket-chart {
    width: 100% !important;
    height: 400px !important; 
  }


   /* Seller dashboard Page */
   .dashboard-No {
    font-size: 32px;
  }
  .dashboard-text {
     font-size: 16px;
  }
  .img-dicon {
    width: 30px;
    height: 30px;
  }
  .select-control {
    font-size: 16px;
  }
  .t-reservation {
    font-size: 24px;
  }
  #s-prices-event-chart {
    width: 100% !important;
    height: 400px !important; 
  }
  #s-ticket-sales-chart {
    width: 100% !important;
    height: 400px !important; 
  } 
 }
 @media screen and (min-width:1920px) and (max-width:2300px){
  /* Admin Dashboard page */
  .main-heading {
    font-size: 22px;
  }
  .text-overview {
    font-size: 16px;
  }
  .text-no {
    font-size: 32px;
  }
  /* .text-div {
    padding-top: 25px;
  } */
  .overview-div {
    height: 110px;
  }
  .chart-heading {
    padding-left: 10px;
    font-size: 22px;
  }
  .tbl-heading {
    font-size: 16px;
  }
  .tblEvent-text {

    font-size: 16px;
  }
  #price-event-chart{
    width: 100% !important;
    height: 400px !important; 
  }
  #ticket-sales-chart{
    width: 100% !important;
    height: 400px !important; 
  }
  #revenue-chart {
    width: 100% !important;
    height: 400px !important; 
  }
  #registration-chart{
    width: 100% !important;
    height: 400px !important; 
  }
  #vote-event-chart {
    width: 100% !important;
    height: 400px !important; 
  }
  #resales-ticket-chart {
    width: 100% !important;
    height: 400px !important; 
  }

  /* Seller dashboard Page */
    .dashboard-No {
      font-size: 34px;
    }
    .dashboard-text {
       font-size: 16px;
    }
    .img-dicon {
      width: 40px;
      height: 40px;
    }
    .select-control {
      font-size: 16px;
    }
    .t-reservation {
      font-size: 26px;
    }
    #s-prices-event-chart {
      width: 100% !important;
      height: 400px !important; 
    }
    #s-ticket-sales-chart {
      width: 100% !important;
      height: 400px !important; 
    } 
 }

 @media screen and (min-width:2301px) and (max-width:2560px){
  /* Admin Dashboard Page */
  .main-heading {
    font-size: 24px;
  }
  .text-overview {
    font-size: 18px;
  }
  .text-no {
    font-size: 34px;
  }
  /* .text-div {
    padding-top: 25px;
  } */
  .overview-div {
    height: 120px;
  }
  .chart-heading {
    padding-left: 10px;
    font-size: 22px;
  }
  .tbl-heading {
    font-size: 18px;
  }
  .tblEvent-text {
    font-size: 18px;
  }
  #price-event-chart{
    width: 100% !important;
    height: 400px !important;
  }
  #ticket-sales-chart{
    width: 100% !important;
    height: 400px !important; 
    }
  #revenue-chart {
    width: 100% !important;
    height: 400px !important; 
  }
  #registration-chart{
    width: 100% !important;
    height: 400px !important; 
  }
  #vote-event-chart {
    width: 100% !important;
    height: 400px !important;
  }
  #resales-ticket-chart {
    width: 100% !important;
    height: 400px !important; 
  }


  /* Seller dashboard Page */
  .heading-icon {
    width: 40px;
    height: 40px;
  }
  .dashboard-No {
    font-size: 36px;
  }
  .dashboard-text {
     font-size: 18px;
  }
  .img-dicon {
    width: 40px;
    height: 40px;
  }
  .select-control {
    font-size: 16px;
}
  .t-reservation {
    font-size: 28px;
  }
  #s-prices-event-chart {
    width: 100% !important;
    height: 400px !important;
  }
  #s-ticket-sales-chart {
    width: 100% !important;
    height: 400px !important;
  } 
 }