/*====================== 
Default css 
========================*/
:root {   
    --bg-primary: #37c923;
    --bg-gradient: linear-gradient(180deg, rgba(183, 240, 61, 0.3) 0%, rgba(55, 213, 23, 0.3) 100%);
    --bg-gradient-2: linear-gradient(180deg, #b7f03d 0%, #37d517 100%);
    --bg-dark: #1d1d1d;
    --bg-light: #2c3030;
    --bg-red: #ff6c6c;
    --bg-lightgreen: #adea39;
    --bg-white: #ffffff;
    --bg-black: #000000;
    --bg-hidden: #613535;
    --bg-yellow: #FFAD33;
  
    --textcolor-primary: #37c923;
    --textcolor-white: #ffffff;
    --textcolor-black: #000000;
    --textcolor-muted: #6a6a6a;
    --textcolor-yellow: #FFAD33;
  
    --border-primary: #37c923;
    --border-secondary: #adea39;
    --border-tertiary: #575a5a;
    --border-dark: #1d1d1d;
    --border-light: #2c3030;
    --border-darkred: #c84a4a;
    --border-lightred: #ff6c6c;
  
    --fontfamily-primary: "Br Candor", sans-serif;
  }
  
  *,
  ::after,
  ::before {
    box-sizing: border-box;
  }
  
  body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    background-color: var(--bg-dark);
    font-family: var(--fontfamily-primary);
    font-size: 12px;
    color: var(--textcolor-white);
    font-weight: 400;
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
    padding: 0;
    font-family: var(--fontfamily-primary);
    color: var(--textcolor-white);
    font-weight: 500;
    line-height: 1.1;
  }
  
  p {
    margin: 0;
    padding: 0;
    font-family: var(--fontfamily-primary);
    color: var(--textcolor-white);
    font-size: 12px;
    font-weight: 300;
    line-height: 25px;
  }
  
  strong,
  b {
    font-weight: 700;
  }
  
  a {
    text-decoration: none;
    color: var(--textcolor-white);
  }
  
  a:hover {
    text-decoration: none;
  }
  
  ol,
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  ul li a:hover {
    text-decoration: none;
  }
  
  /*====================== 
  Font Size css 
  ========================*/
  .fs-30 {
    font-size: 30px;
  }
  
  .fs-25 {
    font-size: 25px;
  }
  
  .fs-22 {
    font-size: 22px;
  }
  
  .fs-20 {
    font-size: 20px;
  }
  
  .fs-18 {
    font-size: 18px;
  }
  
  .fs-16 {
    font-size: 16px;
  }
  
  .fs-15 {
    font-size: 15px;
  }
  
  .fs-14 {
    font-size: 14px;
  }
  
  .fs-12 {
    font-size: 12px;
  }
  
  .fs-10 {
    font-size: 10px;
  }
  
  @media (max-width: 1450px) {
    .fs-30 {
      font-size: 28px;
    }
  
    .fs-25 {
      font-size: 23px;
    }
  
    .fs-22 {
      font-size: 20px;
    }
  
    .fs-20 {
      font-size: 18px;
    }
  
    .fs-18 {
      font-size: 17px;
    }
  
    .fs-16 {
      font-size: 15px;
    }
  
    .fs-15 {
      font-size: 14px;
    }
  
    .fs-14 {
      font-size: 13px;
    }
  
    .fs-12 {
      font-size: 11px;
    }
  
    .fs-10 {
      font-size: 10px;
    }
  }
  @media (max-width: 1199px) {
    .fs-30 {
      font-size: 25px;
    }
  
    .fs-25 {
      font-size: 20px;
    }
  
    .fs-22 {
      font-size: 18px;
    }
  
    .fs-20 {
      font-size: 17px;
    }
  
    .fs-18 {
      font-size: 16px;
    }
  
    .fs-16 {
      font-size: 15px;
    }
  
    .fs-15 {
      font-size: 14px;
    }
  
    .fs-14 {
      font-size: 13px;
    }
  
    .fs-12 {
      font-size: 11px;
    }
  
    .fs-10 {
      font-size: 10px;
    }
  }
  
  @media (max-width: 767px) {
    .fs-30 {
      font-size: 22px;
    }
  
    .fs-25 {
      font-size: 18px;
    }
  
    .fs-22 {
      font-size: 17px;
    }
  
    .fs-20 {
      font-size: 16px;
    }
  
    .fs-18 {
      font-size: 15px;
    }
  
    .fs-16 {
      font-size: 13px;
    }
  
    .fs-15 {
      font-size: 12px;
    }
  
    .fs-14 {
      font-size: 11px;
    }
  
    .fs-12 {
      font-size: 10px;
    }
  
    .fs-10 {
      font-size: 10px;
    }
  }
  
  /*====================== 
  Global Button css 
  ========================*/
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .fadeIn {
    animation: fadeIn 1s ease-in forwards;
  }
  .SignaturePad{
    overflow: hidden;
  }
  .SignatureFooter{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .SignatureFooter .UndoClear [clear]{
    margin-right: 5px;
  }
  .SignatureFooter .UndoClear [clear],
  .SignatureFooter .UndoClear [undo]
  {
    padding: 4px 9px;
    background-color: #232323;
    border-radius: 3px;
    border: 1px solid var(--bg-gradient);
    cursor: pointer;
    color: white;
  }
  canvas{
    background-color: rgb(255, 255, 255);
  }
  .overflow-x-auto{
    overflow-x: auto
  }
  .border{
    border: 1px solid #313131 !important;
  }
  button {
    outline: 0;
    box-shadow: none;
  }
    
  button:hover,
  button:focus,
  button:active {
    outline: 0 !important;
    box-shadow: none !important;
  }
  
  .ionic-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    height: 38px;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    padding: 0 15px;
    font-size: 13px;
    font-weight: 400;
    border-radius: 15px;
    border: none;
    outline: 0;
    box-shadow: none;
    margin-left: 10px;
    line-height: 38px;
  }
  
  .ionic-btn-block {
    width: 100%;
  }
  
  .ionic-theme-btn {
    background: var(--bg-gradient);
    color: var(--textcolor-white);
  }
  
  .ionic-theme-btn2 {
    background: var(--bg-gradient-2);
    color: var(--textcolor-black);
  }
  .ionic-theme-btn:hover,
  .ionic-theme-btn2:hover {
    background: var(--bg-primary);
    color: var(--textcolor-black);
  }
  
  .ionic-border-btn {
    background: transparent;
    border: 1px solid var(--border-secondary);
    border-bottom: 1px solid var(--border-primary);
    color: var(--textcolor-white);
    font-weight: 300;
  }
  
  .ionic-btn.active-border {
    border: 1px solid var(--fontcolor-primary);
  }
  
  .ionic-back-btn {
    background-color: var(--bg-dark);
    color: var(--textcolor-white);
  }
  
  .ionic-back-btn:hover,
  .ionic-back-btn:focus,
  .ionic-back-btn:active {
    background-color: var(--bg-primary);
  }
  
  .ionic-submit-btn {
    background-color: var(--bg-primary);
    color: var(--textcolor-white);
  }
  
  .ionic-submit-btn:hover,
  .ionic-submit-btn:focus,
  .ionic-submit-btn:active {
    background-color: var(--bg-primary);
  }
  
  .ionic-cancel-btn {
    background-color: var(--bg-red);
    color: var(--textcolor-white);
  }
  
  .ionic-cancel-borderbtn {
    background-color: transparent;
    border: 1px solid var(--border-lightred);
    border-bottom: 1px solid var(--border-darkred);
    color: var(--textcolor-white);
  }
  
  .ionic-cancel-btn:hover,
  .ionic-cancel-btn:focus,
  .ionic-cancel-btn:active {
    background-color: var(--bg-red);
    color: var(--textcolor-white);
    opacity: 0.8;
  }
  
  button:disabled {
    color: #888888;
    opacity: 0.6;
    cursor: not-allowed;
  }
  
  .ionic-btnlg {
    height: 44px;
    padding-left: 30px;
    padding-right: 30px;
  }
  
  .ionic-btnxl {
    height: 46px;
    padding-left: 35px;
    padding-right: 35px;
  }
  
  .activestatus-btn,
  .redstatus-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 36px;
    padding: 0 20px;
    border-radius: 40px;
  }
  
  .activestatus-btn {
    background: var(--bg-gradient);
    border: 1px solid var(--border-secondary);
    border-bottom: 1px solid var(--border-primary);
    color: var(--textcolor-white);
  }
  
  .redstatus-btn {
    background: var(--bg-hidden);
    border: 1px solid var(--border-lightred);
    border-bottom: 1px solid var(--border-darkred);
    color: var(--textcolor-white);
  }
  
  .ionic-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    color: var(--textcolor-white);
    border-radius: 3px;
    border: none;
    outline: 0;
    box-shadow: none;
  }
  
  .ionic-iconbtn-circle {
    border-radius: 100px;
  }
  
  .iconbtn-delete {
    background-color: var(--bg-red);
  }
  
  .iconbtn-success {
    background-color: var(--bg-primary);
  }
  
  .iconbtn-primary {
    background-color: #2584ef;
  }
  
  .iconbtn-defualt {
    background-color: var(--bg-white);
  }
  @media (max-width:1199px) {
    .ionic-btnlg {
      height: 40px;
      padding-left: 15px;
      padding-right: 15px;
    }
    .ionic-btnxl {
      height: 42px;
      padding-left: 15px;
      padding-right: 15px;
    }
  }



  
  /*====================== 
  Form css 
  ========================*/
  form {
    width: 100%;
  }
  
  .form-label,
  .col-form-label,
  label {
    font-size: 14px;
    /* font-weight: 300; */
    line-height: 15px;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 5px;
  }
  
  .form-group {
    margin-bottom: 15px;
  }
  
  .form-control {
    background-color: var(--bg-dark);
    width: 100%;
    height: 48px;
    border: 1px solid var(--border-dark);
    color: var(--textcolor-white);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    background-clip: padding-box;
    display: block;
    border-radius: 15px;
    box-shadow: none;
    padding-left: 18px;
    border: 1px solid #3b3b3b !important;
  }
  
  .form-control:hover,
  .form-control:hover,
  .form-control:hover,
  .form-control:active,
  .form-control:active,
  .form-control:active,
  .form-control:focus,
  .form-control:focus,
  .form-control:focus {
    background-color: transparent;
    color: var(--textcolor-white);
    border: 1px solid var(--border-primary);
    outline: 0;
    box-shadow: none !important;
  }
  
  .input-group>.form-control,
  .input-group>.form-floating,
  .input-group>.form-select {
    width: 1% !important;
  }
  
  select {
    appearance: none;
    background-image: url("/img/down-arrow.png");
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: right center;
  }
  
  select.form-control[multiple],
  select.form-control[size] {
    height: auto;
  }

  select option{
      outline: none;
      border: none;
      background-color: rgb(24, 24, 24);
  }
  
  textarea.form-control {
    height: auto;
  }
  
  input:-internal-autofill-selected {
    background-color: var(--bg-dark);
  }
  
  input::placeholder {
    color: #888888 !important;
    font-weight: 400 !important;
  }
  
  .form-group .form-text {
    font-size: 11px;
    font-weight: 400 !important;
  }
  
  .text-muted {
    color: var(--fontcolor-muted) !important;
  }
  
  .form-text {
    display: block;
    margin-top: 0.25rem;
  }
  
  .input-group-text {
    display: flex;
    align-items: center;
    background-color: var(--bg-dark) !important;
    height: 48px;
    color: var(--textcolor-white);
    text-align: center;
    white-space: nowrap;
    margin-bottom: 0;
    border: none !important;
    border-radius: 15px;
  }
  
  .checkbox-inline {
    display: flex;
  }
  
  .checkbox {
    display: flex;
    align-items: center;
    position: relative;
    text-align: left;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s ease;
    margin: 0;
  }
  
  .checkbox-inline .checkbox {
    margin-right: 1rem;
  }
  
  .form-group label.checkbox {
    font-size: 13px;
    font-weight: 400;
    color: #3f4254;
  }
  
  .checkbox>span {
    background-color: #ebedf3;
    border: 1px solid transparent;
  }
  
  .checkbox>input {
    position: absolute;
    z-index: -1;
    opacity: 0;
  }
  
  .checkbox>input {
    position: absolute;
    z-index: -1;
    opacity: 0;
  }
  
  .checkbox>span {
    background-color: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
  }
  
  .checkbox>input:checked~span {
    background-color: #3699ff;
  }
  
  .checkbox-inline .checkbox span {
    margin-right: 0.75rem;
  }
  
  .checkbox>span {
    height: 18px;
    width: 18px;
    margin-right: 8px;
  }
  
  .checkbox>span:after {
    content: "";
    border-color: transparent;
    border-style: solid;
    border-width: 0 2px 2px 0 !important;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-top: -2px;
  }
  
  .checkbox>input:checked~span:after {
    border-color: #fff;
  }
  
  .checkbox>input:checked~span:after {
    display: block;
  }
  
  .checkbox>span:after {
    width: 5px;
    height: 10px;
  }
  
  .checkbox.checkbox-disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  
  .checkbox.checkbox-outline.checkbox-success>span {
    background-color: transparent;
    border-color: #d1d3e0;
  }
  
  .checkbox-inline .checkbox span {
    margin-right: 0.75rem;
  }
  
  .checkbox.checkbox-success>span {
    border: 1px solid transparent;
  }
  
  .checkbox.checkbox-outline.checkbox-success>input:checked~span {
    background-color: transparent;
    border-color: #1bc5bd;
  }
  
  .checkbox.checkbox-outline.checkbox-success>input:checked~span:after {
    border-color: #1bc5bd;
  }
  
  .form-check-input,
  .form-check-input:focus {
    background-color: #1e1e2d !important;
    border-color: #000000;
    width: 18px;
    height: 18px;
  }
  
  .leap-custom-file {
    padding: 6px;
    border: 1px dashed #4d4d66;
  }
  
  .leap-custom-file .form-control {
    display: none;
  }
  
  .leap-custom-file .input-group-text {
    background-color: var(--bgcolor-navyblue-light-1) !important;
    width: 100%;
    height: 40px;
    color: var(--fontcolor-tertiary) !important;
    text-align: center;
    font-weight: 400 !important;
    border: 1px solid var(--linecolor-navyblue-light-1) !important;
    border-radius: 3px !important;
    justify-content: center;
  }
  
  .upload-file-name,
  .upload-img {
    padding: 10px 5px;
  }
  
  .upload-img {
    width: 100%;
    display: block;
    text-align: center;
  }
  
  .upload-img img {
    width: 120px;
  }
  
  .upload-file-name p {
    color: var(--fontcolor-tertiary);
    font-size: 13px;
  }
  
  .ionic-img-upload {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 100%;
    height: 52px;
    border: 2px dashed var(--border-secondary);
    border-bottom: 2px dashed var(--border-primary);
    border-radius: 0.5em;
    min-height: 2.5rem;
    overflow: hidden;
    padding: 8px;
    transition: 0.75s ease-in-out;
  }
  
  .ionic-img-upload input[type="file"] {
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
  
  .ionic-img-upload i {
    color: var(--textcolor-primary);
  }
  
  .ionic-img-uploadshow {
    margin-top: 5px;
  }
  
  .ionic-img-uploadshow ul li {
    position: relative;
    background-color: var(--bg-dark);
    padding: 8px 15px 8px 8px;
    display: inline-block;
    border-radius: 5px;
    margin-right: 15px;
    border: 2px solid transparent;
  }
  
  .ionic-img-uploadshow ul li.active {
    border: 2px solid var(--bg-primary);
  }
  
  .ionic-img-uploadshow ul li img {
    width: 45px;
    height: 45px;
    border-radius: 4px;
  }
  
  .ionic-img-uploadshow ul li i {
    position: absolute;
    top: 3px;
    right: 2px;
    font-size: 10px;
    cursor: pointer;
  }
  
  .ionic-img-uploadshow ul li button {
    position: absolute;
    top: 75%;
    left: 15%;
    font-size: 10px;
    cursor: pointer;
  }
  
  .ionic-toggle {
    margin-bottom: 15px;
  }
  
  .ionic-toggle-switch {
    display: inline-block;
    height: 22px;
    position: relative;
    width: 50px;
    margin-bottom: 0;
  }
  
  .ionic-toggle-switch input {
    display: none;
  }
  
  .ionic-toggle-switch .toggle-switch-round {
    background-color: var(--bg-dark);
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: 0.4s;
    border-radius: 34px;
  }
  
  .ionic-toggle-switch input:checked+.toggle-switch-round {
    background-color: var(--bg-primary);
  }
  
  .ionic-toggle-switch .toggle-switch-round:before {
    background-color: var(--bg-white);
    bottom: 4px;
    content: "";
    height: 14px;
    left: 5px;
    position: absolute;
    transition: 0.4s;
    width: 14px;
  }
  
  .ionic-toggle-switch .toggle-switch-round:before {
    border-radius: 50%;
  }
  
  .ionic-toggle-switch input:checked+.toggle-switch-round:before {
    transform: translateX(26px);
  }
  
  .ionic-search-area {
    width: 100%;
  }
  
  .ionic-search-box {
    display: flex;
    align-items: center;
    background-color: var(--bg-dark);
    width: 100%;
    height: 48px;
    border-radius: 15px;
    padding-right: 3px;
  }
  
  .ionic-search-box input {
    border: none !important;
    height: 100%;
  }
  
  .ionic-search-btn {
    background-color: transparent;
    height: 48px;
    color: #fff;
    font-size: 18px;
  }
  
  .time-box,
  .date-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-dark);
    width: 100%;
    height: 48px;
    border-radius: 15px;
    border: 1px solid var(--border-dark);
  }
  
  .time-box:focus,
  .time-box:hover,
  .date-box:focus,
  .date-box:hover {
    border: 1px solid var(--border-primary);
  }
  
  .time-box .form-control,
  .date-box .form-control {
    height: 100%;
  }
  
  .time-box .form-control:hover,
  .time-box .form-control:focus,
  .time-box .form-control:active,
  .date-box .form-control:hover,
  .date-box .form-control:active,
  .date-box .form-control:focus {
    border: none !important;
    outline: 0 !important;
    box-shadow: none !important;
  }
  
  .time-box .ionic-btn,
  .date-box .ionic-btn {
    color: #fff;
    font-size: 22px;
    margin-left: 0;
  }
  
  /*========================== 
  Radio button css
  =============================*/
  
  .radio-list {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .radio {
    display: flex;
    align-items: center;
    position: relative;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    margin: 0;
    padding-left: 35px;
    margin-bottom: 15px;
  }
  .radio-inline .radio {
    display: inline-block !important;
    margin-right: 20px;
  }
  .form-group label.ras {
    font-size: 1rem;
    font-weight: 400;
  }
  .form-group label.radio {
    margin-bottom: 10px;
  }
  .radio>input {
    position: absolute;
    z-index: -1;
    opacity: 0;
  }
  .radio>span {
    background-color: transparent;
    border: 1px solid var(--bg-primary);
    border-top: 1px solid var(--bg-lightgreen);
  }
  .radio>span {
    border-radius: 50%;
    background-color: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .radio>input:checked~span {
    background-color: transparent;
  }
  .radio>input:checked~span {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    background-color: none;
  }
  .radio-list .radio span {
    margin-right: 0.75rem;
  }
  .radio>span {
    position: absolute;
    top: -4px;
    left: 0;
    height: 22px;
    width: 22px;
    margin-right: 14px;
  }
  .radio>span:after {
    content: "";
    display: none;
    width: 14px;
    height: 14px;
    border-radius: 100% !important;
  }
  .radio>input:checked~span:after {
    background: var(--bg-gradient-2);
  }
  .radio>input:checked~span:after {
    display: block;
  }
  
  
  /*====================== 
  Table css 
  ========================*/
  .table {
    margin-bottom: 0 !important;
  }
  
  .table tr th,
  .table tr td {
    position: relative;
    background-color: var(--bg-dark) !important;
    font-family: var(--fontfamily-primary);
    color: var(--textcolor-white);
    font-size: 13px;
    font-weight: 500;
    vertical-align: middle;
    border-bottom: none;
    padding: 10px 12px !important;
    padding-left: 25px !important;
  }
  
  .table tr th {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  
  .table tr td img {
    width: 40px;
    height: 40px;
    object-fit: cover;
  }
  
  .table tr th::after,
  .table tr td:not(.skip-abs-border):after {
    content: "";
    position: absolute;
    top: var(--td-abs-top, calc(50% - 8px));
    right: 0;
    background-color: var(--td-abs-bg, #414545);
    width: 1px;
    height: var(--td-abs-height, 16px);
  }
  
  .table tr th:last-of-type:after,
  .table tr td:last-of-type::after {
    display: none;
  }
  
  .table tr td {
    padding: 15px 18px;
  }
  
  .table tr.empty-tr td {
    background-color: var(--bg-light) !important;
    padding: 6px 0 !important;
  }
  
  .table tr th:first-of-type {
    border-radius: 15px 0 0 15px;
    padding-left: 30px !important;
  }
  
  .table tr th:last-of-type {
    border-radius: 0 15px 15px 0;
  }
  
  /*------- tr radius css -------------*/
  .table tbody tr.empty-tr+tr td:first-of-type {
    border-top-left-radius: 15px !important;
  }
  
  .table tbody tr.empty-tr+tr td:last-of-type {
    border-top-right-radius: 15px !important;
  }
  
  .table tbody tr:not(.empty-tr):last-of-type td:first-of-type {
    border-bottom-left-radius: 15px !important;
  }
  
  .table tbody tr:not(.empty-tr):last-of-type td:last-of-type {
    border-bottom-right-radius: 15px !important;
  }
  
  .table-action {
    position: relative;
    width: 10px;
    margin: auto;
  }
  
  .table-actionicon {
    cursor: pointer;
  }
  
  .table-actionicon i {
    font-size: 20px;
  }
  
  .table-action-body {
    position: absolute;
    top: 18px;
    right: 10px;
    background-color: var(--bg-light);
    width: 160px;
    padding: 10px;
    border: 1px solid var(--bg-black);
    border-radius: 10px;
    z-index: 1;
    display: block;
  }
  
  .table-action-body a {
    font-size: 15px;
    padding: 5px 0;
    display: block;
    cursor: pointer;
  }
  
  .table-action-body a i {
    font-size: 16px;
    margin-right: 5px;
  }
  
  .pkg-quantity {
    width: 100px;
  }
  
  .pkg-quantity input.form-control {
    background-color: var(--bg-light);
    width: 100px;
    height: 38px;
    border-radius: 12px;
  }
  
  .table-qty {
    display: flex;
    align-items: center;
    width: 106px;
  }
  
  .table-qty .form-control {
    width: 60px;
  }
  
  .table-qty-btn {
    position: relative;
    background-color: var(--bg-light);
    width: 36px;
    border-radius: 8px;
    padding-top: 2px;
    padding-bottom: 2px;
  }
  
  .table-qty-btn .ionic-btn {
    width: 100%;
    height: 20px;
    color: var(--textcolor-white);
    margin-left: 0;
  }
  
  @media (max-width: 767px) {
    .table-responsive {
      display: block;
    }
  
    .table tr th,
    .table tr td {
      font-size: 12px !important;
    }
  
    .table tr td,
    .table tr td p,
    .table tr td a {
      font-size: 12px !important;
    }
  
    .table.paddingless th,
    .table.paddingless td {
      padding: 0px !important;
    }
  
    .table.paddingless th,
    .table.paddingless td p {
      color: rgba(255, 255, 255, 0.5) !important;
    }
  }
  
  td .plus {
    padding: 4px 6px;
    background: black;
    color: var(--textcolor-primary);
    line-height: 12px;
    border-radius: 50%;
    font-weight: 500;
    cursor: pointer;
  }
  
  td .plus:hover {
    background: var(--bg-primary);
    color: var(--bg-dark);
  }
  
  /*====================== 
  Global class css 
  ========================*/
  .p-05 {
    padding: 2px 4px;
  }
  
  .w-auto {
    width: auto !important;
  }
  
  .radius-0 {
    border-radius: 0px !important;
  }
  
  .radius-3 {
    border-radius: 3px;
  }
  
  .radius-4 {
    border-radius: 4px;
  }
  
  .radius-5 {
    border-radius: 5px;
  }
  
  .radius-10 {
    border-radius: 10px;
  }
  
  .radius-10 {
    border-radius: 15px;
  }
  
  .radius-50 {
    border-radius: 50%;
  }
  
  .cp {
    cursor: pointer !important;
  }
  
  .pointer-events-none {
    pointer-events: none;
  }
  
  .absolute {
    position: absolute;
  }
  
  .relative {
    position: relative;
  }
  
  .no-radius-right {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
  }
  
  .no-radius-left {
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
  }
  
  .fullheight-100 {
    height: 100%;
  }
  
  .border {
    border: 1px solid var(--border-primary);
  }
  
  .border-primary {
    border: 1px solid var(--border-primary);
  }
  
  .border-secondary {
    border: 1px solid var(--border-secondary);
  }
  
  .border-tertiary {
    border: 1px solid var(--border-tertiary);
  }
  
  .border-dark {
    border: 1px solid var(--border-dark);
  }
  
  .border-light {
    border: 1px solid var(--border-light);
  }
  
  .border-darkred {
    border: 1px solid var(--border-darkred);
  }
  
  .border-lightred {
    border: 1px solid var(--border-lightred);
  }
  
  .size-05 {
    font-size: 0.5rem !important;
  }
  
  .size-06 {
    font-size: 0.6rem !important;
  }
  
  .size-07 {
    font-size: 0.7rem !important;
  }
  
  .size-08 {
    font-size: 0.8rem !important;
  }
  
  .size-09 {
    font-size: 0.9rem !important;
  }
  
  .size-1 {
    font-size: 1rem !important;
  }
  
  .size-2 {
    font-size: 1.2rem !important;
  }
  
  .size-3 {
    font-size: 1.3rem !important;
  }
  
  .size-sm {
    font-size: 1.4rem !important;
  }
  
  .ms-1 {
    margin-left: 0.25rem !important;
  }
  
  .ty--2 {
    transform: translateY(-2px);
  }
  
  /*================================ 
  Card css  
  ==================================*/
  .ionic-card {
    position: relative;
    background-color: var(--bg-light);
    min-height: 150px;
    margin-bottom: 25px;
    border-radius: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .ionic-card-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 65px;
  }
  
  .card-header-border {
    border-bottom: 1px solid var(--border-tertiary);
  }
  
  .ionic-card-body {
    padding: 20px 0;
  }
  
  .ionic-card.ionic-card-textnumber {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 145px;
  }
  
  .ionic-card.ionic-card-textnumber .ionic-card-body {
    text-align: center;
    padding: 28px 0;
  }
  
  .ionic-card.ionic-card-textnumber span {
    margin-bottom: 32px;
  }
  
  .ionic-card.ionic-card-textnumber h3 {
    font-size: 40px;
  }
  
  .ionic-card.ionic-card-textnumber.ionic-textnumber-small {
    min-height: 100px;
    padding: 0 6px;
  }
  
  .ionic-card.ionic-card-textnumber.ionic-textnumber-small .ionic-card-body {
    padding: 15px 0;
  }
  
  .ionic-card.ionic-card-textnumber.ionic-textnumber-small span {
    font-size: 11px;
    line-height: 14px;
    margin-bottom: 18px;
  }
  
  .ionic-card.ionic-card-textnumber.ionic-textnumber-small h3 {
    font-size: 20px;
  }
  
  .ionic-card-footer {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 65px;
  }
  
  .bottom-border {
    border-bottom: 1px solid var(--border-tertiary);
  }
  
  .top-border {
    border-top: 1px solid var(--border-tertiary);
  }
  
  @media (max-width: 1450px) {
    .ionic-card-header h6 {
      font-size: 15px;
    }
  
    .ionic-card-header h5 {
      font-size: 16px;
    }
  
    .ionic-card-header h4 {
      font-size: 16px;
    }
  
    .ionic-card-header h3 {
      font-size: 24px;
    }
  
    .ionic-card.ionic-card-textnumber {
      min-height: 115px;
    }
  
    .ionic-card.ionic-card-textnumber .ionic-card-body {
      padding: 20px 0;
    }
  
    .ionic-card.ionic-card-textnumber span {
      font-size: 12px;
      margin-bottom: 25px;
    }
  
    .ionic-card.ionic-card-textnumber h3 {
      font-size: 30px;
    }
  
    .ionic-card.ionic-card-textnumber.ionic-textnumber-small span {
      font-size: 10px;
    }
  
    .ionic-card.ionic-card-textnumber.ionic-textnumber-small h3 {
      font-size: 18px;
    }
  }
  
  /*======================= 
  Modal css
  ==========================*/
  .pagination-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 25px;
  }
  
  .pagination .page-item {
    margin-right: 10px;
  }
  
  .pagination .page-item .page-link {
    display: flex;
    align-items: center;
    height: 32px;
    background-color: var(--bg-dark);
    border-radius: 4px;
    border: none;
    color: var(--textcolor-white);
    font-size: 14px;
  }
  
  .pagination .page-item .page-link:hover,
  .pagination .page-item .page-link:active,
  .pagination .page-item .page-link:focus {
    border: none;
    box-shadow: none;
  }
  
  .pagination .page-item:first-child .page-link,
  .pagination .page-item:last-child .page-link {
    background: var(--bg-gradient-2);
    font-size: 14px;
    color: #00743a;
  }
  
  /*======================= 
  Modal css
  ==========================*/
  .modal {
    background-color: rgb(29 29 29 / 68%) !important;
  }
  
  .modal.fade .modal-dialog {
    transform: translate(0, 0);
  }
  
  .modal-content {
    animation: modalMove 0.4s;
  }
  
  @keyframes modalMove {
    from {
      top: 200px;
      opacity: 0.2;
      scale: 1;
    }
  
    to {
      top: 0px;
      opacity: 1;
      scale: 1;
    }
  }
  
  .modal-content {
    background-color: var(--bg-light);
    border: 1px solid var(--border-light);
    max-height: 80% !important;
    padding: 0 20px;
    border-radius: 25px;
  }
  
  .modal .btn-close {
    background: none;
    color: var(--textcolor-white);
    opacity: unset;
  }
  
  .modal .btn-close i {
    font-size: 18px;
  }
  
  .modal-header {
    border-bottom: 1px solid var(--border-tertiary);
    padding-left: 0;
    padding-right: 0;
  }
  
  .modal-title {
    color: var(--textcolor-white);
  }
  
  .modal-body {
    padding-left: 0;
    padding-right: 0;
  }
  
  .modal-footer {
    border-top: 1px solid var(--border-tertiary);
  }
  
  /*============================== 
  scrollbar css  
  ===============================*/
  ::-webkit-scrollbar {
    width: 5px;
  }
  
  ::-webkit-scrollbar-track {
    background: #242433;
  }
  
  ::-webkit-scrollbar-thumb {
    background: #000000;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #000000;
  }
  
  ::-webkit-scrollbar-corner {
    background-color: #0a0a0a00 !important;
  }
  
  .overflow-y-auto {
    overflow-y: auto;
  }
  
  .scrollbar-style-1 {
    overflow-y: scroll;
  }
  
  .scrollbar-style-1::-webkit-scrollbar {
    width: 2px;
  }
  
  .scrollbar-style-1::-webkit-scrollbar-track {
    background: #242433;
  }
  
  .scrollbar-style-1::-webkit-scrollbar-thumb {
    background: #14141d;
  }
  
  .scrollbar-style-1::-webkit-scrollbar-thumb:hover {
    background: #14141d;
  }
  
  .scrollbar-transparent::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .scrollbar-transparent::-webkit-scrollbar-thumb {
    background: transparent;
  }
  
  .scrollbar-transparent::-webkit-scrollbar-thumb:hover {
    background: transparent;
  }
  
  /*=========================== 
  tooltip css  
  =============================*/
  .leap-admin-sidebar .tooltip__text {
    display: block;
  }
  
  .leap-admin-sidebar.active .tooltip__text {
    display: none;
  }
  
  .menu-tooltip {
    position: relative;
    display: inline-block;
  }
  
  .menu-tooltip:hover .tooltip__text {
    opacity: 1;
    visibility: visible;
  }
  
  .tooltip__text {
    position: absolute;
    background-color: var(--bg-light);
    min-width: 100px;
    color: var(--fontcolor-white);
    font-size: 12px;
    font-weight: 400;
    text-align: center;
    line-height: 15px;
    visibility: hidden;
    padding: 5px 10px;
    border-radius: 5px;
    transition: 0.5s;
    z-index: 1;
    opacity: 0;
  }
  
  .accord-submenu .tooltip__text {
    font-size: 11px;
  }
  
  .accord-submenu.accord-sub-submenu .tooltip__text {
    font-size: 10px;
  }
  
  .tooltip__text::after {
    display: inline-block;
    position: absolute;
    content: "";
  }
  
  .tooltip__text--right {
    top: -48%;
    left: calc(100% + -77px);
    transform: translateY(-50%);
  }
  
  .accord-submenu .tooltip__text--right {
    left: calc(100% + -72px);
  }
  
  .accord-submenu.accord-sub-submenu .tooltip__text--right {
    left: calc(100% + -65px);
    top: -60%;
  }
  
  .tooltip__text--right::after {
    bottom: -6px;
    left: 43px;
    transform: translateY(-50%);
    border-left: 5px solid transparent;
    border-top: 5px solid var(--bg-light);
    border-right: 5px solid transparent;
  }
  
  @media (max-width: 991px) {
    .leap-admin-sidebar .tooltip__text {
      display: none;
    }
  
    .leap-admin-sidebar.active .tooltip__text {
      display: none;
    }
  }
  
  .ionic-main-wrapper .rm-height {
    height: 100%;
  }
  
  .ionic-mainsection-title {
    text-align: center;
  }
  
  .ionic-mainsection-title .rm-dot-title {
    position: relative;
    background-color: #000000;
    top: -10px;
    width: 100px;
    height: 2px;
    display: inline-block;
  }
  
  .ionic-mainsection-title .rm-section-title {
    font-size: 45px;
    font-weight: 800;
    padding-bottom: 15px;
  }
  
  @media (max-width: 575px) {
    .ionic-mainsection-title {
      text-align: center;
      padding-bottom: 30px;
    }
  
    .ionic-mainsection-title .rm-section-title {
      font-size: 30px;
    }
  }
  
  
  /*========================== 
  Header css  
  ============================*/
  .ionic-header .ionic-menu-header {
    background-color: var(--bg-dark);
    width: 100%;
    height: 84px;
    transition: all 0.4s ease-in-out;
    /* z-index: 99; */
    top: 0;
    position: sticky;
  }
  
  .ionic-header .ionic-menu-header.mobile-menu-header {
    display: none;
  }
  
  .ionic-header .ionic-menu-header .row {
    justify-content: space-between;
  }
  
  .ionic-header .ionic-menu-header .ionic-logo .ionic-logo-area {
    height: 84px;
  }
  
  .ionic-header .ionic-menu-header .ionic-logo .ionic-logo-area .ionic-logo-area-inner {
    display: table;
    table-layout: fixed;
    width: auto;
    height: 100%;
  }
  
  .ionic-header .ionic-menu-header .ionic-logo .ionic-logo-area .ionic-logo-area-inner .ionic-logo-area-middle {
    display: table-cell;
    height: 40px;
    vertical-align: middle;
    transition: all 0.4s ease-in-out;
  }
  
  .ionic-header .ionic-menu-header .ionic-logo .ionic-logo-area .ionic-logo-area-inner .ionic-logo-area-middle a {
    display: block;
    height: 40px;
  }
  
  .ionic-header .ionic-menu-header .ionic-logo .ionic-logo-area .ionic-logo-area-inner .ionic-logo-area-middle a img {
    width: unset;
    max-width: unset;
    height: 40px;
    transition: all 0.4s ease-in-out;
  }
  
  .ionic-header .ionic-menu-header .ionic-menu-area .ionic-menu {
    padding-right: 15px;
  }
  
  .ionic-header .ionic-menu-header .ionic-menu-area .ionic-menu .ionic-mobile-device {
    display: none;
  }
  
  .ionic-header .ionic-menu-header .ionic-menu-area .ionic-menu .ionic-nav-manu {
    display: inline-block;
  }
  
  .ionic-header .ionic-menu-header .ionic-menu-area .ionic-menu .ionic-nav-manu ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: 84px;
  }
  
  .ionic-header .ionic-menu-header .ionic-menu-area .ionic-menu .ionic-nav-manu ul li {
    display: inline-block;
    position: relative;
  }
  
  .ionic-header .ionic-menu-header .ionic-menu-area .ionic-menu .ionic-nav-manu ul li a {
    line-height: 84px;
    padding: 0 12px;
    display: block;
    font-weight: 500;
    font-size: 15px;
    color: #fff;
    transition: all 0.4s ease-in-out;
  }
  .ionic-header .ionic-menu-header .ionic-menu-area .ionic-menu .ionic-nav-manu ul li a i {
    font-size: 20px;
  }
  
  .ionic-header .ionic-menu-header .ionic-menu-area .ionic-menu .ionic-nav-manu ul li:last-child a {
    padding-right: 0;
  }
  
  .ionic-header .ionic-menu-header.shrink {
    top: 0;
  }
  
  .ionic-header .ionic-menu-header.shrink .ionic-nav-manu ul li a {
    padding: 0 15px;
    line-height: 84px;
  }
  
  @media (max-width: 1199px) {
    .ionic-header .ionic-menu-header .ionic-logo .ionic-logo-area .ionic-logo-area-inner .ionic-logo-area-middle {
      height: 50px;
    }
  
    .ionic-header .ionic-menu-header .ionic-logo .ionic-logo-area .ionic-logo-area-inner .ionic-logo-area-middle a {
      height: 50px;
    }
  
    .ionic-header .ionic-menu-header .ionic-logo .ionic-logo-area .ionic-logo-area-inner .ionic-logo-area-middle a img {
      height: 50px;
    }
  
    .ionic-header .ionic-menu-header .ionic-menu-area .ionic-menu .ionic-nav-manu ul li a {
      font-size: 16px;
    }
  
    .ionic-header .ionic-menu-header .ionic-menu-area .ionic-menu .ionic-nav-manu ul li a i {
      font-size: 18px;
    }
  
    .ionic-header .ionic-menu-header .ionic-menu-area.ionic-rightside-menu .ionic-menu .ionic-nav-manu ul li a {
      height: 40px;
      line-height: 42px;
    }
  
    .ionic-header .ionic-menu-header .ionic-menu-area.ionic-rightside-menu .ionic-menu .ionic-nav-manu ul li a i {
      font-size: 18px;
    }
  }
  
  @media (min-width: 992px) {
    .ionic-header .ionic-menu-header .ionic-menu .ionic-nav-manu {
      display: inline-block !important;
    }
  }
  
  @media (max-width: 991px) {
    .ionic-header .ionic-top-header .header-top-left {
      padding-left: 15px;
    }
  
    .ionic-header .ionic-top-header .header-top-left .header-top-inner ul li a {
      font-size: 12px;
    }
  
    .ionic-header .ionic-top-header .header-top-left .header-top-inner h5 {
      padding-left: 35px;
    }
  
    .ionic-header .ionic-top-header .header-top-right {
      display: none;
    }
  
    .ionic-header .ionic-menu-header {
      height: 60px;
      top: 36px;
    }
  
    .ionic-header .ionic-menu-header.desktop-menu-header {
      display: none;
    }
  
    .ionic-header .ionic-menu-header.mobile-menu-header {
      display: block;
    }
  
    .ionic-header .ionic-menu-header .container {
      background-color: transparent;
    }
  
    .ionic-header .ionic-menu-header .ionic-logo .ionic-logo-area {
      height: 60px;
    }
  
    .ionic-header .ionic-menu-header .ionic-logo .ionic-logo-area .ionic-logo-area-inner .ionic-logo-area-middle {
      height: 25px;
    }
  
    .ionic-header .ionic-menu-header .ionic-logo .ionic-logo-area .ionic-logo-area-inner .ionic-logo-area-middle a {
      height: 25px;
    }
  
    .ionic-header .ionic-menu-header .ionic-logo .ionic-logo-area .ionic-logo-area-inner .ionic-logo-area-middle a img {
      height: 25px !important;
      width: auto !important;
      max-width: unset !important;
    }
  
    .ionic-header .ionic-menu-header .ionic-menu-area {
      padding-left: 22px;
      padding-right: 10px;
    }
  
    .ionic-header .ionic-menu-header .ionic-menu-area .ionic-menu {
      position: relative;
    }
  
    .ionic-header .ionic-menu-header .ionic-menu-area .ionic-menu .ionic-mobile-device {
      display: flex;
      padding-right: 0;
      justify-content: flex-end;
      align-items: center;
    }
  
    .ionic-header .ionic-menu-header .ionic-menu-area .ionic-menu .ionic-mobile-device li {
      display: inline-block;
      position: relative;
    }
  
    .ionic-header .ionic-menu-header .ionic-menu-area .ionic-menu .ionic-mobile-device li a {
      line-height: 60px;
      padding: 0 4px;
      color: #fff;
    }
  
    .ionic-header .ionic-menu-header .ionic-menu-area .ionic-menu .ionic-mobile-device li a i {
      font-size: 25px;
    }
  
    .ionic-header .ionic-menu-header .ionic-menu-area .ionic-menu .ionic-nav-manu {
      display: none;
      position: fixed;
      left: 0;
      width: 100%;
      background: #fff;
      box-shadow: 0 0 30px 0 rgba(51, 77, 136, 0.08);
      top: 60px;
      z-index: 9;
      border-top: 1px solid #2d673c;
    }
  
    .ionic-header .ionic-menu-header .ionic-menu-area .ionic-menu .ionic-nav-manu ul {
      height: auto;
      padding: 15px 0;
    }
  
    .ionic-header .ionic-menu-header .ionic-menu-area .ionic-menu .ionic-nav-manu ul li {
      display: inline-block;
      margin: 0;
      width: 100%;
    }
  
    .ionic-header .ionic-menu-header .ionic-menu-area .ionic-menu .ionic-nav-manu ul li.rm-desktop-cart-bar,
    .ionic-header .ionic-menu-header .ionic-menu-area .ionic-menu .ionic-nav-manu ul li.rm-desktop-search-bar,
    .ionic-header .ionic-menu-header .ionic-menu-area .ionic-menu .ionic-nav-manu ul li.rm-desktop-sidebar-menu {
      display: none;
    }
  
    .ionic-header .ionic-menu-header .ionic-menu-area .ionic-menu .ionic-nav-manu ul li a {
      line-height: 37px;
      padding: 0 20px;
      color: #000000;
    }
  
    .ionic-header .ionic-menu-header .ionic-rightside-menu {
      display: none;
    }
  
    .ionic-header .ionic-menu-header.shrink {
      height: 60px;
    }
  
    .ionic-header .ionic-menu-header.shrink .ionic-logo-area .ionic-logo-area-inner .ionic-logo-area-middle a img {
      width: unset;
    }
  
    .ionic-header .ionic-menu-header.shrink .ionic-menu .ionic-nav-manu ul li a {
      line-height: 37px;
      padding: 0 20px;
    }
  }
  
  @media (max-width: 767px) {
    .ionic-header .ionic-top-header .header-top-left {
      width: 100%;
    }
  
    .ionic-header .ionic-top-header .header-top-left .header-top-inner {
      justify-content: center;
      width: 100%;
    }
  
    .ionic-header .ionic-top-header .header-top-left .header-top-inner ul {
      position: absolute;
      top: 35px;
      width: 100%;
      left: 0;
    }
  
    .ionic-header .ionic-top-header .header-top-left .header-top-inner ul li {
      width: 33.3333333%;
    }
  
    .ionic-header .ionic-top-header .header-top-left .header-top-inner ul li a {
      justify-content: center;
      font-size: 10px;
      line-height: 27px;
      padding: 0;
    }
  
    .ionic-header .ionic-top-header .header-top-left .header-top-inner h5 {
      padding-left: 0;
      text-align: center;
    }
  
    .ionic-header .ionic-menu-header {
      top: 61px;
    }
  }
  
  /*-- right toggle bar --*/
  .ionic-search-body {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 1290px;
    height: 100px;
    background: #fff;
    top: 120px;
    z-index: 9;
    border-top: 1px solid #2d673c;
  }
  
  .ionic-search-body .ionic-search-inner-body {
    height: 100%;
  }
  
  .ionic-search-body .ionic-search-inner-body .ionic-search-closebar {
    position: absolute;
    color: #555;
    top: 35px;
    right: 15px;
  }
  
  .ionic-search-body .ionic-search-inner-body .ionic-search-closebar i {
    font-size: 20px;
  }
  
  .ionic-search-body .ionic-search-inner-body .ionic-search-form {
    position: relative;
    display: flex;
    width: 100%;
    border: 1px solid #fff;
    height: 50px;
    border-radius: 5px;
  }
  
  .ionic-search-body .ionic-search-inner-body .ionic-search-form input {
    position: relative;
    height: auto;
    margin-bottom: 0;
    font-size: 18px;
    padding-left: 20px;
    border-radius: 5px;
    border: 1px solid #2d673c;
    box-shadow: none;
  }
  
  .ionic-search-body .ionic-search-inner-body .ionic-search-form input:focus {
    box-shadow: none;
  }
  
  .ionic-search-body .ionic-search-inner-body .ionic-search-form .ionic-input-group-append {
    display: flex;
    margin-left: -1px;
  }
  
  .ionic-search-body .ionic-search-inner-body .ionic-search-form .ionic-input-group-append button {
    position: relative;
    z-index: 2;
    height: 48px;
    width: 80px;
    background-color: #2d673c;
    border-radius: 5px;
    border-color: #2d673c;
    color: #eee;
    cursor: pointer;
    margin: 0;
    line-height: 0;
    padding: 0;
    margin-left: 15px;
  }
  
  .ionic-search-body .ionic-search-inner-body .ionic-search-form .ionic-input-group-append button i {
    font-size: 18px;
  }
  
  .ionic-search-body .ionic-search-inner-body .ionic-search-form .ionic-input-group-append button:hover {
    background-color: #000000;
  }
  
  .shrink .ionic-search-body {
    top: 90px;
  }
  
  @media (max-width: 1399px) {
    .ionic-search-body {
      width: 1110px;
    }
  }
  
  @media (max-width: 1199px) {
    .ionic-search-body {
      width: 930px;
    }
  }
  
  @media (max-width: 991px) {
    .ionic-search-body {
      top: 70px;
      height: 80px;
      width: 100%;
      position: fixed;
      padding: 0 40px;
    }
  
    .ionic-search-body .ionic-search-inner-body .ionic-search-closebar {
      top: 28px;
    }
  
    .ionic-search-body .ionic-search-inner-body .ionic-search-closebar i {
      font-size: 18px;
    }
  
    .ionic-search-body .ionic-search-inner-body .ionic-input-group input {
      height: 45px;
    }
  
    .ionic-search-body .ionic-search-inner-body .ionic-input-group .ionic-input-group-append button {
      width: 50px;
      height: 45px;
      cursor: pointer;
    }
  
    .ionic-search-body .ionic-search-inner-body .ionic-input-group .ionic-input-group-append button i {
      font-size: 16px;
    }
  
    .shrink .ionic-search-body {
      top: 70px;
    }
  }
  
  @media (max-width: 575px) {
    .ionic-search-body {
      padding: 0;
    }
  
    .ionic-search-body .ionic-search-inner-body .ionic-search-closebar {
      display: none;
    }
  
    .ionic-search-body .ionic-search-inner-body .col-12 {
      padding: 0 28px;
    }
  
    .ionic-search-body .ionic-search-inner-body .ionic-search-form {
      height: 45px;
    }
  
    .ionic-search-body .ionic-search-inner-body .ionic-search-form input {
      font-size: 15px;
    }
  
    .ionic-search-body .ionic-search-inner-body .ionic-search-form .ionic-input-group-append .ionic-button {
      height: 43px;
      width: 80px;
    }
  }
  
  .ionic-banner-section {
    width: 100%;
    height: 331px;
    margin-top: 84px;
    background-size: 100% 100%;
  }
  
  .ionic-banner-section .container {
    height: 100%;
  }
  
  .ionic-banner-section .container .row {
    height: 100%;
  }
  
  .ionic-banner-section .container .row ul {
    margin-bottom: 15px;
    margin-top: -100px;
  }
  
  .ionic-banner-section .container .row ul li {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    display: inline-block;
    font-family: "Inter", sans-serif;
  }
  
  .ionic-banner-section .container .row ul li a {
    color: #fff;
    font-weight: 400;
    font-size: 16px;
    font-family: "Inter", sans-serif;
  }
  
  .ionic-banner-section .container .row .ionic-banner-maintitle {
    font-size: 48px;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    padding-bottom: 20px;
  }
  
  .ionic-banner-section .container .row .ionic-banner-short-des {
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    color: #fff;
  }
  
  @media (max-width: 991px) {
    .ionic-banner-section {
      margin-top: 60px;
    }
  }
  
  @media (max-width: 767px) {
    .ionic-banner-section {
      height: 177px;
      margin-top: 85px;
    }
  
    .ionic-banner-section .container .row ul {
      margin-top: 0px;
      margin-bottom: 10px;
    }
  
    .ionic-banner-section .container .row .ionic-banner-maintitle {
      font-size: 24px;
      padding-bottom: 15px;
    }
  
    .ionic-banner-section .container .row .ionic-banner-short-des {
      font-size: 14px;
    }
  }
  
  
  /*========================== 
  Banner css  
  ===========================*/
  .ionic-slider-section {
    position: relative;
    height: 590px;
    padding-top: 20px;
  }
  .ionic-slider-inner {
    height: 500px;
  }
  .ionic-slider,
  .ionic-slider-item,
  .ionic-slider-item .container,
  .slider-row {
    height: 100%;
  }

  .slider-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .slider-content h2 {
    font-size: 45px;
    font-weight: 500;
    line-height: 60px;
    margin-bottom: 40px;
  }
  .slider-img {
    position: relative;
    background-color: var(--bg-white);
    width: 493px;
    height: 482px;
    border-radius: 10px 10px 35% 10px;
  }
  .slider-img img {
    border-radius: 0 0 35% 0;
    overflow: hidden;
  }
  .slider-img::after{
    content: "";
    position: absolute;
    left: 20px;
    top: 20px;
    border: 2px solid var(--border-primary);
    width: 100%;
    height: 100%;
    border-radius: 0px 0px 35% 0px;
    z-index: -1;
  }
  .ionic-sldier-dot {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 32px;
  }
  .ionic-sldier-dot ul {
    display: flex;
    align-items: center;
  }
  .ionic-sldier-dot ul li {
    display: inline-block;
    margin: 0 5px;
  }
  .ionic-sldier-dot ul li a {
    display: block;
    background-color: #7D8184;
    width: 12px;
    height: 12px;
    border-radius: 100px;
  }
  .ionic-sldier-dot ul li a.ionic-dot-active {
    background-color: var(--bg-primary);
    width: 14px;
    height: 14px;
  }
  @media (max-width:1450px) {
    .slider-content h2 {
      font-size: 40px;
      line-height: 55px;
    }
  }
  @media (max-width:1199px) {
    .slider-content h2 {
      font-size: 35px;
      line-height: 40px;
    }
    .slider-img {
      width: 420px;
      height: 410px;
    }
  }
  @media (max-width:992px) {
    .slider-content h2 {
      font-size: 26px;
      line-height: 33px;
    }
    .slider-img {
      width: 330px;
      height: 320px;
    }
  }
  @media (max-width:767px) {
    .ionic-slider-section {
      height: auto;
    }
    .ionic-slider-inner {
      height: auto;
    }
    .slider-row {
      flex-wrap: wrap;
    }
    .slider-leftside {
      width: 100%;
      order: 2;
    }
    .slider-rightside {
      width: 100%;
      order: 0;
      padding-left: 0px;
      padding-right: 20px;
    }
    .slider-img {
      width: 100%;
      height: auto;
    }
    .slider-content {
      text-align: center;
      padding-top: 50px;
    }
    .slider-content h2 {
      font-size: 25px;
      line-height: 30px;
      margin-bottom: 20px;
    }
  }



  /*========================== 
  Product list css  
  ===========================*/
  .ionic-product-section,
  .ionic-related-product {
    padding: 50px 0;
    position: relative;
  }
  .ionic-product-section .product-leftside,
  .ionic-related-product .product-leftside {
    padding: 0;
    flex: 0 0 auto;
    padding-left: 0px;
  }
  .ionic-product-section .product-rightside,
  .ionic-related-product .product-rightside {
    flex: 1 auto;
    min-width: 0;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }
  
  .product-title-search-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .product-search-area {
    display: flex;
  }
  .product-search-area .form-group {
    padding-left: 20px;
    margin-bottom: 0;
    margin-right: 20px;
  }
  .product-search-area .ionic-search-box {
    background-color: var(--bg-light);
  }
  .ionic-search-area .form-control {
    background-color: var(--bg-light);
  }
  .looking-search-box .form-control {
    width: 225px;
  }
  .ionic-search-area .ionic-btn {
    color: var(--textcolor-white);
    font-size: 20px;
    margin-left: 0;
  }
  
  .ionic-filter-area {
    background-color: var(--bg-black);
    padding: 20px;
    border-radius: 15px;
  }
  .filter-main-title {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bg-gradient);
    width: 100%;
    height: 50px;
    border: 1px solid var(--border-primary);
    border-top: 1px solid var(--border-secondary);
    border-radius: 12px;
    font-size: 18px;
  }
  .filter-sub-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-light);
    width: 100%;
    height: 50px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 12px;
    margin-top: 25px;
    margin-bottom: 35px;
    min-width: 248px;
  }
  .filter-body ul li {
    margin-bottom: 30px;
  }
  .productlist-row {
    flex: 1 0 auto;
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
  }
  .ionic-productlist {
    position: relative;
  }
  .ionic-productlist-inner {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--bg-black);
    padding: 30px;
    overflow: hidden;
    margin-bottom: 20px;
    cursor: pointer;
    transition: all 0.5s;
    border-radius: 25px;
  }
  .ionic-productlist-inner:hover {
    box-shadow: none;
  }
  .ionic-productlist-image {
    width: 275px;
    min-width: 275px;
    overflow: hidden;
    position: relative;
  }
  .ionic-productlist-image img {
    width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    transition: all ease-in-out 0.5s;
    border-radius: 20px;
  }
  .ionic-productlist-body {
    position: relative;
    width: 100%;
    padding-left: 40px;
    padding-right: 15px;
  }
  .ionic-productlist-title {
    font-size: 18px;
    padding-bottom: 15px;
  }
  .ionic-productlist-title small {
    font-size: 12px;
    color: var(--bg-red);
    padding-left: 20px;
  }
  .product-star {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .product-star ul {
    display: flex;
  }
  .product-star ul li {
    color: var(--textcolor-yellow);
    font-size: 16px;
  }
  .product-star span {
    margin-left: 10px;
    font-size: 14px;
  }
  .product-price-list {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right: -10px;
  }
  .product-price-item {
    width: 130px;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
  }
  .product-priceitem-inner {
    position: relative;
    background-color: var(--bg-light);
    padding: 12px;
    border-radius: 12px;
    border: 2px solid transparent;
  }
  .product-priceitem-inner:not(.DaterangeActive) {
    cursor: pointer;
  }
  .product-priceitem-inner.DaterangeActive {
    border: 2px solid var(--bg-primary);
  }
  .product-price-item span {
    display: block;
    margin-bottom: 10px;
  }
  .price-checkmark {
    position: absolute;
    top: 4px;
    right: 12px;
    color: var(--bg-primary);
    font-size: 22px;
  }
  .loadmore-btn {
    font-size: 14px;
  }
  .loadmore-btn i {
    font-size: 20px;
  }
  @media (max-width: 1199px) {
    .ionic-featured-product-section {
      padding: 50px 0;
    }
    .product-price-list {
      flex-wrap: wrap;
    }
    .ionic-productlist-inner {
      padding: 20px;
    }
    .ionic-productlist-body {
      padding-left: 30px;
      padding-right: 0;
    }
  }
  
  @media (max-width: 992px) {
    .ionic-product-section {
      padding: 50px 0;
    }
    .ionic-product-section .search-result-msg {
      font-weight: 500;
      font-size: 28px;
    }
    .ionic-product-section .product-leftside {
      flex: 0 0 41%;
      max-width: 41%;
    }
    .ionic-product-section .product-rightside {
      flex: 0 0 67%;
      max-width: 67%;
    }
    .ionic-productlist-inner {
      flex-wrap: wrap;
    }
    .ionic-productlist-image,
    .ionic-productlist-body {
      width: 100%;
    }
    .ionic-productlist-body {
      padding-top: 25px;
      padding-left: 0;
    }
    .ionic-product-body .ionic-product-title {
      font-size: 13px;
    }
    .ionic-product-body .ionic-product-title {
      font-size: 12px;
    }
  }
  @media (max-width: 992px) {
    .productlist-row {
      display: flex;
      flex-direction: unset;
      flex-wrap: wrap;
    }
    .product-maintitle {
      font-size: 25px;
    }
    .ionic-product-section .product-leftside {
      flex: 0 0 100%;
      max-width: 100%;
      margin-bottom: 30px;
    }
    .ionic-product-section .product-rightside {
      flex: 0 0 100%;
      max-width: 100%;
    }
    .ionic-product-section .product-rightside {
      padding-left: 0;
      padding-right: 0;
    }
    .product-search-area .form-group {
      margin-right: 0;
    }
  }
  
  @media (max-width: 575px) {
    .product-title-search-area {
      flex-wrap: wrap;
    }
    .product-search-area {
      margin-top: 15px;
    }
    .product-search-area .form-group {
      padding-left: 0;
    }
  }
  

/*============================ 
Product details css 
===============================*/
.productdetails-content {
  margin-top: 60px;
}
.productdetails-content .ionic-card {
  background-color: var(--bg-black);
  padding: 30px;
  border-radius: 30px;
}
.productdetails-gallery {
  display: flex;
  align-items: center;
}
.productdetails-view-img {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  height: 468px;
  margin-bottom: 20px;
  overflow: hidden;
  border-radius: 20px;
}
.productdetails-view-img img {
  width: 80%;
}
.productdetails-img-list {
  width: 50px;
    height: 100%;
    margin-left: -32px;
}

.productdetails-img-list ul li {
  display: inline-flex;
  align-items: center;
  background-color: var(--bg-light);
  width: 90px;
  min-width: 90px;
  height: 90px;
  min-height: 90px;
  padding: 8px;
  border-radius: 12px;
  cursor: pointer;
  margin-bottom: 15px;
}
.productdetails-img-list ul li img {
  height: 74px;
  border-radius: 10px;
}

.productdetails-content .productdetails-img-list ul li.active {
  background-color: var(--bg-primary);
}
.stock-list {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.stock-list li {
  margin-right: 10px;
}
.stock-list .in-stock-color {
  color: var(--bg-primary);
}
.stock-list .outof-stock-color {
  color: var(--bg-red);
}
.product-someinfo-area {
  padding-left: 70px;
}
.ionic-name-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.ionic-name-price .ionic-price small {
  font-size: 12px;
  position: relative;
  top: -3px;
  padding-left: 5px;
}
.ionic-pd-name {
  font-weight: 500;
  font-size: 22px;
}
.ionic-brand-name {
  display: block;
  font-weight: 400;
  font-size: 14px;
  margin-bottom: 5px;
}
.ionic-product-information {
  margin-bottom: 15px;
}
.ionic-product-information p {
  font-size: 12px;
  line-height: 20px;
}
.pd-devided {
  border-top: 1px dashed var(--border-light);
}
.ionic-duration-area h5 {
  margin-top: 25px;
  margin-bottom: 20px;
}
.ionic-duration-qtyarea {
  display: flex;
  align-items: center;
}
.ionic-duration-qty {
  margin-right: 50px;
}
.ionic-duration-qtyarea .form-control {
  background-color: transparent;
  width: 100px;
  border: 1px solid var(--bg-primary);
  border-top: 1px solid var(--bg-lightgreen);
  text-align: center;
}
.ionic-duration-list label {
  margin-bottom: 0;
  margin-right: 35px;
}
.ionic-qty {
  display: flex;
  align-items: center;
  width: 106px;
}
.ionic-qty .form-control {
  width: 60px;
}
.ionic-qty-btn {
  position: relative;
  background-color: var(--bg-light);
  width: 36px;
  border-radius: 8px;
  padding-top: 2px;
  padding-bottom: 2px;
}
.ionic-qty-btn .ionic-btn {
  width: 100%;
  height: 20px;
  color: var(--textcolor-white);
  margin-left: 0;
}
.ionic-quantity-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ionic-quantity-area h5 {
  margin-top: 25px;
  margin-bottom: 25px;
}
.ionic-quantity-area .form-control {
  background-color: transparent;
  border: none !important;
}
.ionic-quantity-area .form-control:hover,
.ionic-quantity-area .form-control:focus,
.ionic-quantity-area .form-control:active {
  border: 1px solid var(--border-primary) !important;
}
.cart-btn-area .ionic-btn {
  margin-top: 5px;
  margin-bottom: 25px;
}
.productdetails-content .ionic-card.fastreturn-delivery-card {
  background-color: var(--bg-light);
  padding: 5px 30px;
  border-radius: 12px;
}
.productdetails-content .ionic-card.fastreturn-delivery-card .ionic-card-body {
  padding: 0;
}
.fastreturn-delivery-card .pd-devided {
  border-top: 1px dashed var(--border-tertiary);
}
.fastreturn-delivery-box {
  display: flex;
  align-items: center;
  padding-top: 25px;
  padding-bottom: 25px;
}
.fastreturn-delivery-box i {
  font-size: 35px;
  color: var(--bg-primary);
  margin-right: 20px;
}
.fastreturn-delivery-box h5 {
  margin-bottom: 8px;
  font-weight: 400;
}



/*========================= 
cart css  
==========================*/
.ionic-order-section {
  margin-top: 60px;
}
.ionic-order-section .ionic-card {
  padding: 0px 30px;
}
.ionic-order-section .ionic-card .ionic-card-body {
  padding: 30px 0;
}
.order-maintitle {
  margin-bottom: 25px;
}
.order-devided {
  border-top: 1px solid var(--border-tertiary);
}
.ionic-date-show {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--bg-dark);
  width: 100%;
  height: 50px;
  border-radius: 20px;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 25px;
}
.ionic-date-show .ionic-btn {
  color: var(--textcolor-white);
  margin-left: 0;
}
.cart-list {
  list-style: none;
}
.cart-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.cart-img-info {
  display: flex;
  align-items: center;
}
.cart-qtyshow {
  margin-right: 15px;
}
.cart-qtyshow i {
  font-size: 8px;
}
.cart-img {
  background-color: var(--bg-white);
  width: 70px;
  height: 70px;
  padding: 5px;
  border-radius: 12px;
}
.cart-img img {
  width: 60px;
  height: 60px;
}
.cart-info {
  padding-left: 15px;
}
.cart-info span,
.cart-info h5 {
  padding-bottom: 3px;
}
.cart-closeicon {
  display: flex;
  align-items: center;
  background-color: var(--bg-dark);
  padding: 8px;
  color: var(--bg-red);
  border-radius: 10px;
  cursor: pointer;
}
.cart-closeicon:hover {
  background-color: var(--bg-red);
  color: var(--bg-white);
}
.cart-total-title {
  padding-top: 20px;
  padding-bottom: 5px;
}
.cart-total-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
}
.total-amount {
  font-size: 18px;
}
.order-btn-area {
  margin-top: 10px;
}
.ionic-card.cart-card .ionic-card-body {
  padding-top: 20px;
}


/*========================= 
footer css 
===========================*/
.ionic-footer {
  position: relative;
  /* background-color: var(--bg-dark); */
  flex-shrink: 0;
}
.ionic-top-footer {
  padding: 40px 0 50px;
}
.ionic-footer-info {
  text-align: center;
}
.ionic-footer-info img {
  margin-bottom: 60px;
}
.ionic-footer-info ul li {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 12px;
}
.ionic-bottom-footer {
  border-top: 1px solid var(--border-light);
  padding-top: 25px;
  padding-bottom: 25px;
  text-align: center;
}
.ionic-bottom-footer-content {
  flex: 0 0 100%;
  max-width: 100%;
}
.ionic-bottom-footer-content p {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: 400;
}
.ionic-bottom-footer-content p span {
  font-size: 25px;
  font-weight: 400;
  margin-right: 5px;
}

.shape-gredient-topright {
  position: absolute;
  right: -282px;
  top: -282px;
  background: var(--GRADIANT, linear-gradient(180deg, #ADEA39 0%, #37C923 100%));
  width: 424px;
  height: 424px;
  filter: blur(187px);
  border-radius: 424px;
  opacity: 0.5;
}
.shape-gredient-topleft {
  position: absolute;
  left: -40px;
  top: 260px;
  border-radius: 424px;
  opacity: 0.5;
  background: var(--GRADIANT, linear-gradient(180deg, #ADEA39 0%, #37C923 100%));
  width: 424px;
  height: 424px;
  filter: blur(187px);
}
.shape-gredient-leftcenter {
  position: absolute;
  left: -107px;
  bottom: 134px;
  border-radius: 424px;
  opacity: 0.5;
  background: var(--GRADIANT, linear-gradient(180deg, #ADEA39 0%, #37C923 100%));
  width: 424px;
  height: 424px;
  filter: blur(187px);
}
.shape-gredient-rightcenter {
  position: absolute;
  right: -186px;
  top: 200px;
  border-radius: 424px;
  opacity: 0.5;
  background: var(--GRADIANT, linear-gradient(180deg, #ADEA39 0%, #37C923 100%));
  width: 424px;
  height: 424px;
  filter: blur(187px);
}
.shape-gredient-bottomright {
  position: absolute;
  right: -186px;
  bottom: 0;
  border-radius: 424px;
  opacity: 0.5;
  background: var(--GRADIANT, linear-gradient(180deg, #ADEA39 0%, #37C923 100%));
  width: 424px;
  height: 424px;
  filter: blur(187px);
}


/*========================= 
Order complete css  
===========================*/
.order-complete {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 650px;
}
.order-msg-title {
  color: var(--textcolor-primary);
  font-size: 45px;
  line-height: 30px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.order-msg-title span {
  color: var(--textcolor-white);
  font-size: 16px;
  font-weight: 300;
}
.order-confirm-box {
  background-color: var(--bg-black);
  padding: 25px;
  border-radius: 25px;
  text-align: center;
}
.order-confirm-box img {
  height: 90px;
  object-fit: contain;
  margin-bottom: 20px;
  transition: all .3s;
}
.order-confirm-box h3 {
  font-size: 16px;
  color: var(--textcolor-white);
  font-weight: 300;
}
.order-complete-row {
  padding-left: 200px;
  padding-right: 200px;
}


/*=========================== 
order summery css  
=============================*/

.order-summery-section {
  padding-top: 100px;
}
.order-summery-table {
  background-color: var(--bg-black);
  border-radius: 15px;
  padding: 20px;
  padding-top: 0;
  margin-bottom: 20px;
}
.order-summery-table table tr th,
.order-summery-table table tr td {
  background-color: transparent !important;
}
.order-summery-table table tr td {
  border-top: 1px solid var(--border-light);
}
.order-summery-table table tr th::after,
.order-summery-table table tr td::after {
  display: none;
}
.order-summery {
  margin-top: 15px;
}
.ordersummery-daterange {
  padding-left: 20px;
}
.order-summery-totaltable {
  background-color: var(--bg-black);
  border-radius: 15px;
  padding-top: 0;
  padding-bottom: 15px;
}
.ordersummery-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--bg-light);
  width: 100%;
  height: 50px;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 15px 15px 0 0;
  margin-bottom: 15px;
  min-width: 248px;
}
.order-summery-totaltable table tr th,
.order-summery-totaltable table tr td {
  background-color: transparent !important;
}