body {
      transition: .9s ease-in;
      margin: 0px;
      background-color: #F4F5FF;
      padding: 0px;
      border-radius: 15px;
  }

  html {
      scroll-behavior: smooth;
  }

  :root {
      --themeColor: #5B3145;
      --secondaryColor: #2785C2;
      --bgColor: #F0F8FF;
      --primaryTextColor: #34312C;
      --secondaryTextColor: #535558;
      --font-family: 'ProductSans Regular';
      --font-weight-bold: 700;
      --font-weight-regular: 400;
      --line-height: 1.5;
      --color-white: white;
      --line-height-titles: 1.2;
      --grid-gap: 40px 60px;
      --box-shadow20: 0 .5rem 2rem rgba(0, 0, 0, 0.1);
      --Approved: #45b39d;
      --New: #B03A2E;
      --InProgress: #F39C12;
      --OnHold: #FF5733;
      --Closed: #1e8449;
      --Assigned: #0096CC;
      --Delete: #cb4335;
      --Add: #FF7D29;
      --themeColorRGBA01: rgba(91, 49, 69, 0.1);
      --themeColorRGBA02: rgba(91, 49, 69, 0.2);
      --themeColorRGBA03: rgba(91, 49, 69, 0.3);
      --themeColorRGBA04: rgba(91, 49, 69, 0.4);
      --themeColorRGBA05: rgba(91, 49, 69, 0.5);
      --themeColorRGBA06: rgba(91, 49, 69, 0.6);
      --themeColorRGBA07: rgba(91, 49, 69, 0.7);
      --themeColorRGBA08: rgba(91, 49, 69, 0.8);
      --themeColorRGBA09: rgba(91, 49, 69, 0.9);

  }

  /*TOP HEADER */

  .logoutFrame {

      color: var(--themeColor);
      float: right;
      cursor: pointer;
      padding-top: 20px;
      padding-right: 30px;
  }

  .logoutFrame a {
      text-decoration: none;
      color: var(--themeColor);
  }

  .logoutFrame a:hover {
      color: var(--themeColor);
  }

  .profileAnchor {
      padding-top: 0px;
  }

  .profileAnchor h5 {
      padding-left: 15px;
  }

  .profileAnchor a {
      color: white;
      text-decoration: none;
      transition: 0.7s;
      cursor: pointer;
  }

  .profileAnchor .editProfile {
      padding-bottom: 0px;
  }

  .profileAnchor .editProfile:hover a {
      color: #00B8E0;
  }

  .profileAnchor .logout {
      background-color: var(--themeColor);
      padding: 3px;
      border-radius: 7px;
      overflow: hidden;
  }

  .profileAnchor .logout:hover {
      background-color: var(--themeColor);
      color: white;
      transition: 0.5s;
  }

  .profileAnchor .logout:hover a {
      color: white;
      transition: 0.5s;
  }

  /*TOP HEADER*/

  /*PAGGINATION PANNEL*/

  .tablePannel table {
      margin-bottom: 10px;
      font-size: 1.3em;
  }

  .tablePannel table tr {
      margin: 0px;
  }

  .moduleContent .tablePannel table th {
      font-size: 1em;
  }

  .tablePannel table td {
      font-size: 0.9em;
  }

  .tablePannel table td a {
      color: var(--themeColor);
      text-decoration: none;
  }

  .tablePannel table td a:hover {
      color: var(--themeColor);
  }

  .tablePannel img {
      height: 50px;
      border-radius: 10px;
  }

  .table-striped>tbody>tr:nth-child(2n+1)>td,
  .table-striped>tbody>tr:nth-child(2n+1)>th {
      background-color: var(--secondary-color);
  }

  .tablePannel tr:nth-child(even) {
      background-color: white;
  }

  /*PAGGINATION PANNEL*/

  /*BUTTONS*/
  .buttonTimes {
      background-color: red;
      border-radius: 5px;
      padding: 3px 10px;
      border: 1px solid red;
      color: white;
  }

  .buttonCheck {
      background-color: orange;
      border-radius: 5px;
      padding: 3px 10px;
      border: 1px solid orange;
      color: white;
  }







  .buttonNavDeleted {
      background-color: red;
      border: 1px solid red;
      border-radius: 4px;
      padding: 3px 12px;
      font-size: 1em;
      margin: 0px;
      transition: 0.5s;
      color: white;
  }




  button.Approved {
      background-color: var(--Approved);
      color: white;
  }

  button.Pending {
      background-color: var(--InProgress);
      color: white;
  }

  button.New {
      background-color: var(--New);
      color: white;
  }

  span.New {
      background: var(--New);
  }

  span.InProgress {
      background: var(--InProgress);
  }

  span.Approved {
      background: var(--Approved);
  }

  span.Assigned {
      background: var(--Assigned);
  }

  span.Closed {
      background: var(--Closed);
  }

  span.OnHold {
      background: var(--OnHold);
  }

  span.Cancelled,
  span.Rejected {
      background: #cb4335;
  }

  span.Null {
      background: white;
      color: var(--theme-color);
  }

  .AddCartComp {
      position: absolute;
      right: 20px;
      bottom: 25px;
      z-index: 555;
      color: white;
      box-shadow: var(--box-shadow40);
      background-color: var(--Closed);
      padding: 10px 25px;
      border-radius: 5px;
  }

  .DeleteCartComp {
      position: absolute;
      right: 20px;
      bottom: 25px;
      z-index: 555;
      color: white;
      box-shadow: var(--box-shadow40);
      background-color: var(--Delete);
      padding: 10px 25px;
      border-radius: 5px;
  }

  .moduleHead .buttonNavDeleted {
      float: right;
  }

  .moduleHead a:hover {
      text-decoration: none;
  }


  /*BUTTONS*/

  /*SIDE BAR*/

  /*SIDE BAR*/

  /*PAGES PRODUCT*/
  .modal input {
      border: 1px solid var(--themeColorRGBA03);
      padding: 20px 10px;
      font-size: 0.9em;
  }

  .modal select {
      border: 1px solid var(--themeColorRGBA03);
      height: 40px;
  }

  .modal textarea {
      border: 1px solid var(--themeColorRGBA03);
  }

  .modal label {
      font-size: 0.9em;
      font-weight: normal;
  }

  .modal-body {
      padding: 0px;
      margin: 0px;
  }

  .modal-header h4 {
      padding: 0px;
      text-align: center;
      margin: 0px;
      font-size: 1em;
  }


  a .counterWell .well {
      color: white;
  }

  .counterWell .well {
      background-color: var(--themeColor);
      padding: 3px 0px 7px 0px;
      border: none;
      border-radius: 5px;
      margin-bottom: 0px;

  }

  .counterWell .well h5 {
      padding-left: 10px;
      letter-spacing: 0px;
      margin: 0px;
      padding-top: 5px;
      font-size: 0.9em;
  }

  .counterWell .well span {
      font-size: 1em;
      float: right;
      padding-right: 10px;
      padding-top: 0px;
  }

  .wrapperComp {
      height: 100%;
  }

  .bodyContent {
      padding: 0px;
      margin-top: -5px;
  }

  .wrapperComp .sideContent .well {
      background-color: white;
      border: 1px solid var(--themeColorRGBA02);
      box-shadow: var(--box-shadow20);
      border-radius: 10px;
      padding: 5px;
      overflow-y: scroll;
      overflow-x: hidden;
      height: 575px;
      margin-top: 0px;
  }




  .formPannel {
      padding: 5px 15px;
  }

  .controlLabel {
      padding: 10px 5px 5px 5px;
      margin-bottom: 0px;
  }

  .moduleAdd {
      padding: 10px 25px;
      margin-bottom: -20px;
  }

  .moduleAdd .well {
      padding: 0px 10px;
      border-radius: 10px;
      background-color: #EAEDED;
  }

  .formPannel label {
      font-size: 0.9em;
      font-weight: normal;
  }

  .formPannel input {
      border: 1px solid var(--themeColorRGBA03);
  }

  .formPannel select {
      border: 1px solid var(--themeColorRGBA03);
  }

  /*INSERT PRODUCT*/

  /* ------- AUTHENTICATE STARTS ------- */
.wrapper{
background-image: url(../assets/
  image/bgBanner03.png);
background-size: cover;
background-position: center;
}
.wrapper .container-fluid{
padding: 3% 7%;
background-position: center;
background-size: cover;
}
.mainLogo img{
height: 50px;
}
.showPassword span{
font-size: 0.9em;
}
.toast-container {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 9999;
}
.toast {
padding: 16px 24px;
border-radius: 8px;
font-size: 15px;
margin-top: 10px;
color: #fff;
animation: slideIn 0.4s ease, fadeOut 0.4s ease 3s forwards;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.toast.success { background-color: #28a745; }
.toast.error   { background-color: #e74c3c; }
.toast.warning { background-color: #f39c12; }
@keyframes slideIn {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes fadeOut {
to { opacity: 0; transform: translateX(100%); display: none; }
}
.spinner-border {
display: inline-block;
width: 2rem;
height: 2rem;
margin-right: 10px;
vertical-align: text-bottom;
border: 0.1em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: spinner-border 0.75s linear infinite;
}
.spinner-lg {
width: 1.5rem;
height: 1.5rem;
border-width: 0.25em;
}
@keyframes spinner-border {
100% {
transform: rotate(360deg);
}
}
.wrapper h5{
text-align: center;
color: var(--secondaryTextColor);
line-height: 18px;
padding-top: 10px;
font-size: 0.8em;
}
.LoginformPannel .well{
margin-top: 80px;
padding: 20px 20px 10px 20px;
background-color: white;
box-shadow: var(--box-shadow20);
border-radius: 10px;
}
.loginHead h3
{
margin: 0px;
text-align: left;
font-weight: bold;
letter-spacing: 1px;
padding: 0px;
color: var(--primaryTextColor);
}
.loginHead h4
{
margin: 0px;
text-align: left;
padding: 10px 0px;
font-size: 1em;
color: var(--secondaryTextColor);
}
.LoginformPannel .well input
{
margin-top:20px;
border-radius: 5px;
border: 1px solid var(--themeColorRGBA04);
padding: 25px 15px;
box-shadow: none;
}
.newAccount .well{
margin: 00px;
padding: 10px 20px;
background-color: white;
text-align: center;
box-shadow: var(--box-shadow20);
border-radius: 10px;
}
.newAccount .well h4{
font-size: 1em;
}
.LoginformPannel .buttonInsert {
background-color: var(--themeColor);
border-radius: 45px;
padding: 10px 25px;
border: 1px solid var(--themeColor);
color: white;
margin-top: 15px;
width: 100%;
font-size: 1em;
}

/* ------- AUTHENTICATE ENDS ------- */