body {
        margin: 0;
        font-family: Arial, sans-serif;
        background: rgb(255, 243, 203) !important;
    }

    /* watermark container */
    .watermark {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        pointer-events: none;   /* so user can click through */
        opacity: 0.08;          /* light effect */
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
    }

    .watermark span {
        font-size: 1rem;
        padding-left: 3rem;
        color: #000;
        transform: rotate(-30deg);
        margin-top: 30px;
        margin-bottom: 30px;
        white-space: nowrap;
        flex: 0 0 auto;
    }

    /* page content */
    .content {
        position: relative;
        z-index: 1;
        padding: 50px;
    }

    .front{
        z-index: 1;
    }

    .bg-vs-primary{
        --bs-bg-opacity: 1;
        background-color: rgb(170, 74, 0) !important;
    }

    .bg-vs-secondary{
        --bs-bg-opacity: 1;
        background-color: rgb(238, 182, 126) !important;
    }

    .front footer{
        margin-top: 0rem!important;
    }

    .phone-tag {
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-padding-y: 0.375rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 400;
  --bs-btn-line-height: 1.5;
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-width: var(--bs-border-width);
  --bs-btn-border-color: transparent;
  --bs-btn-border-radius: var(--bs-border-radius);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
  --bs-btn-disabled-opacity: 0.65;
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
  display: inline-block;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  font-family: var(--bs-btn-font-family);
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  line-height: var(--bs-btn-line-height);
  color: var(--bs-btn-color);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: auto!important;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  border-radius: var(--bs-btn-border-radius);
  background-color: var(--bs-btn-bg);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.card{
    background-color: rgba(255, 223, 205, 0.12) !important;
}

.radius{
    border-radius: 15px;
}

.form-control.phone{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.form-control.password{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}


/* datatables */
table.dataTable thead > tr > th.dt-orderable-asc:hover, table.dataTable thead > tr > th.dt-orderable-desc:hover,
table.dataTable thead > tr > td.dt-orderable-asc:hover,
table.dataTable thead > tr > td.dt-orderable-desc:hover {
  /* outline: 2px solid var(--main-bg)55; */
  background-color: chocolate !important;
  color:#d70a0a;
  /* outline-offset: -2px; */
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
}

.front div.dt-container .dt-paging .dt-paging-button.current{
    color: white !important;
    border: 1px solid rgba(0, 0, 0, 0.3);
    background-color: chocolate !important;

}

.front div.dt-container .dt-paging .dt-paging-button.current:hover {
    color: rgb(255, 255, 255) !important;
    border: 1px solid rgba(0, 0, 0, 0.3);
    background-color: chocolate !important;

}

.front div.dt-container .dt-paging .dt-paging-button:hover {
  color: chocolate !important;
  /* border: 1px solid #111; */
  background-color: transparent;

}

.front div.dt-container .dt-paging .dt-paging-button:active {
  color: chocolate !important;
  border: 1px solid chocolate;
  background-color: rgb(255, 158, 41) !important;

}

div.dt-container .dt-search input:focus {
    border: 2px solid;
	border-color: chocolate !important;
    outline: none;
}



    /* Fixed bottom container */
    .bottom-container {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background: #ffc066;
      border-top: 2px solid #ccc;
      box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
      display: none; /* Hidden by default */
      padding: 15px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 999;
    }

    .bottom-container span {
      font-size: 16px;
      font-weight: bold;
    }

    .buy-btn {
      background-color: chocolate;
      color: #fff;
      border: none;
      padding: 10px 18px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 14px;
    }

    .buy-btn:hover {
      background: rgba(210, 105, 30, 0.682);
    }

    .row-quantity{
        max-width: 50px;
    }

.list-group-cart {
  --bs-list-group-color: var(--bs-body-color);
  --bs-list-group-bg: antiquewhite;
  --bs-list-group-border-color: var(--bs-border-color);
  --bs-list-group-border-width: var(--bs-border-width);
  --bs-list-group-border-radius: var(--bs-border-radius);
  --bs-list-group-item-padding-x: 1rem;
  --bs-list-group-item-padding-y: 0.5rem;
  --bs-list-group-action-color: var(--bs-secondary-color);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-tertiary-bg);
  --bs-list-group-action-active-color: var(--bs-body-color);
  --bs-list-group-action-active-bg: var(--bs-secondary-bg);
  --bs-list-group-disabled-color: var(--bs-secondary-color);
  --bs-list-group-disabled-bg: var(--bs-body-bg);
  --bs-list-group-active-color: #fff;
  --bs-list-group-active-bg: #0d6efd;
  --bs-list-group-active-border-color: #0d6efd;
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  border-radius: var(--bs-list-group-border-radius);
}

/*toast*/
 
 .toast.success{
    background-color: rgba(236, 255, 246, 1) !important;
    color: rgba(36, 156, 12, 1) !important;
 }
 
  .toast.warning{
    background-color: rgba(255, 252, 212, 1) !important;
    color: rgba(147, 133, 0, 1) !important;
 }
 
  .toast.danger{
    background-color: rgba(255, 236, 236, 1) !important;
    color: rgba(156, 12, 12, 1) !important;
 }
 
 .toast.info{
    background-color: rgba(212, 218, 255, 1) !important;
    color: rgba(0, 40, 147, 1) !important;
 }