@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");


.dashboard_main {
  height: 100%;
  width: 100%;
  padding: 4%;
  letter-spacing: 0.08rem;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.box .dashboard_sidebar {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  width: 100% !important;
}

/* To make radio button hidden */
.dashboard_sidebar input[type="radio"] {
  display: none;
}

.dashboard_sidebar .list {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 280px;
background: #FCFCFC;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
padding: 2%;
}
.list_heading {
  font-size: 16px;
  color: #000000;
  padding-left: 5px;
  z-index: 5;
  cursor: pointer;
  font-weight: 500;
}
.list label,
.list label span a {
  width: 100%;
  height: 50px;
  display: flex;
  padding-left: 5px;
  align-items: baseline;
  /* gap: 15px; */
  font-size: 15px;
  color: #3f3f46;
  z-index: 5;
  cursor: pointer;
  font-weight: 400;
  text-decoration: none;
}
.list label:hover {
  color: blue;
}

/* To make label color white */
#Dashboard:checked ~ .list .Dashboard,
#pastOrder:checked ~ .list .pastOrder,
#Ongoing:checked ~ .list .Ongoing,
#Delivered:checked ~ .list .Delivered,
#Address:checked ~ .list .Address {
  color: #3563e9;
}

.list label i {
  font-size: 22px;
  margin-right: 15px;
}

.list .topic,
.list .topic a {
  font-size: 17px;
}

.indicator {
  width: 100%;
  height: 50px;
  color: #3563e9;
  border-radius: 10px;
  position: absolute;
  top: 0;
  transition: 0.3s ease-in;
}

/* To move the indicatore based on click */
#Dashboard:checked ~ .list .indicator {
  top: 0;
}

#pastOrder:checked ~ .list .indicator {
  top: 50px;
}

#Ongoing:checked ~ .list .indicator {
  top: 100px;
}

#Delivered:checked ~ .list .indicator {
  top: 150px;
}

#Address:checked ~ .list .indicator {
  top: 200px;
}

.dashboard_sidebar .content {
  width: calc(100% - 150px);
}

/* To hide all the content */
.content .Dashboard,
.content .pastOrder,
.content .Ongoing,
.content .Delivered,
.content .Address {
  display: none;
}
/* To show the content based on selection */

#Dashboard:checked ~ .content .Dashboard {
  display: block;
}

#pastOrder:checked ~ .content .pastOrder {
  display: block;
}

#Ongoing:checked ~ .content .Ongoing {
  display: block;
}

#Delivered:checked ~ .content .Delivered {
  display: block;
}

#Address:checked ~ .content .Address {
  display: block;
}

/* Dashboard */
.dashboard_content,.address_form1,.address_form2,.address_form1 form,.address_form2 form ,.address_page{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.dashborad_top_cards {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  align-items: center;
  justify-content: center;
}
.dashboard_topcard {
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
  text-align: center;
  padding: 2% 0%;
  width: 240px;
  background: #fbfbfb;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bottomcard {
  background-image: url("../images/Subtract.png");
  width: 350px;
  height: 110px;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 4%;
}
.dashboard_bottom_cards {
  display: flex;
  gap: 25px;
  align-items: center;
  justify-content: center;
  margin-top: 8%;
}
.dashboard_content_btns .btn {
  background: #ffffff;
  box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15),
    0px 1px 3px rgba(0, 0, 0, 0.3);
  border-radius: 16px;
  padding: 0.5rem 2rem;
  &:hover {
    color: #3563e9;
  }
}
.btn-group> :not(.btn-check:first-child)+.btn,
.btn-group>.btn-group:not(:first-child) {
    margin-left: -1px;
}

div.dt-buttons {
    position: initial;
    /*  display: none !important;*/
}

#datable_couponsList_wrapper .row {
    margin-top: 5px;
}
/* adress */
.address_form1,.address_form2{
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
background: #FCFCFC;
border-radius: 10px;
color: #18181B;
padding: 4%;
width: 100%;
}
.address_form1 form ,.address_form2 form ,.address_form1 .form_actionbtns,.address_form2 .form_actionbtns,.form_inputs,.address_forms{
  width: 100%;
}
.address_save_btn button{
  background: #ffffff;
  border-radius: 16px;
  padding: 0.5rem 2rem;
  &:hover {
    color: #3563e9;
  }
}
.address_form1 form input,.address_save_btn,.address_form2 form input{
  height: 48px;
}
.address_form1 form input,.address_save_btn,.address_form1 form textarea,.address_form2 form input,.address_form2 form textarea{
filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.25));
border-radius: 10px;
}
.form_actionbtns{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.address_forms{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
}
.pending{
  color: red;
}
.ongoing{
  color: orange;
}
.delievered{
  color: green;
}

.show_table_inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* media queries */
@media screen and (max-width: 575px) {
  .box .dashboard_sidebar ,.box{
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .content {
    width: 100% !important;
  }
  .list {
    padding-left: 8% !important;
  }
  .list label, .list label span a{
    padding-top: 3%;
  }
  .dashboard_topcard h5 {
    font-size: 16px;
  }
}
@media screen and (max-width: 992px) {
  ::-webkit-scrollbar{
    display: none !important;
  }
  .dashboard_bottom_cards {
    flex-wrap: wrap;
  }
  .dashboard_content_btns .btn {
    padding: 0.5rem 0.7rem;
  }
  .address_forms{
    flex-direction: column;
  }
}
@media screen and (max-width: 358px) {
  .bottomcard{
    width: 260px;
  }
  .bottomacard_content{
    border:none !important;
  }
  .bottomacard_content h4 ,.bottomacard_content h5 ,.bottomacard_content h6{
    font-size:14px ;
  }
  .dashboard_content_btns {
    gap: 1rem !important;
  }
}
@media (min-width: 359px) and (max-width: 479px) {
    .list {
        width: 90% !important;
      }
  .bottomcard{
    padding-left: 8%;
    width: 320px;
  }
}
@media (min-width: 480px) and (max-width: 575px) {
    .list {
        width: 90% !important;
      }
  .dashboard_topcard {
    width: 190px;
  }
  .box .dashboard_sidebar {
    flex-wrap: wrap;
  }
}
@media (min-width: 576px) and (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 992px) {
  .dashboard_topcard {
    width: 190px;
  }
  .dashboard_topcard h5 {
    font-size: 16px;
  }
}
@media (min-width: 993px) and (max-width: 1024px) {
  .address_forms{
    gap: 30px;
  }
  .dashboard_bottom_cards {
    flex-wrap: wrap;
  }
}