.bulkselect {
    border: 1px solid #ddd;
    padding: 2px 0px;
    margin-right: 5px;
    margin-bottom: 14px;
    outline: 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #0f52cd !important;
    border: 1px solid #0f52cd !important;
}
.select2-selection__rendered,.select2-selection--single{
    height: 38px !important;
    line-height: 29px !important;
}
.select2-selection--multiple {
    max-height: auto !important;
    line-height: 29px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff !important;
}
.control-group.input-group {
    margin: 8px 0;
}
.backend-image{
    height: 50px;
    width: 50px;
    border-radius: 50px;
}
.edit-image {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    margin-top: 5px;
    background: #f1f1f1;
}

.switch {
  position: relative;
  display: inline-block;
  width: 58px;
  height: 32px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 25px;
  width: 25px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
.custom-drop a {
    background: transparent;
    padding: 0;
    margin: 5px 0;
}
.custom-drop button {
    width: 100%;
    padding: 5px;
    border: 0;
    background: #F3F7F9;
    text-align: center;
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
ul.nav-second-level svg {
    height: 14px;
}
.custom-btn-list button {
    background: transparent;
    border: 0;
}

.custom-btn-list button i, .custom-btn-list a i {
    color: #444;
    font-size: 16px;
}
.button-list.custom-btn-list a, .button-list.custom-btn-list button {
    margin: 3px 5px;
    padding: 0;
}
.action2-btn {
    margin: 0;
    padding: 0;
    margin-bottom: 20px;
}
.action2-btn li {
    display: inline-block;
    list-style: none;
    margin: 2px 0;
}
.card-body thead {
    background: #EEF2F7;
}
form.custom_form input, form.custom_form input:focus {
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 50px;
    padding: 0 17px;
    width: 70%;
    outline: 0;
}
/*==== Pos css start == */
.quantity button, .quantity input {
    border: 0;
}
input.invdiscount {
    height: 35px;
    border-radius: 5px;
}
.qty-cart .quantity {
    position: relative;
    border: 1px solid #ddd;
    height: 35px;
    overflow: hidden;
}
.qty-cart input {
    width: 100px !important;
    text-align: center;
}
.pos_form input,.pos_form input:focus {
    border: 1px solid #ddd !important;
    padding: 8px;
    width: 100% !important;
    outline: 0 !important;
}
.quantity input {
    position: relative;
    text-align: center;
    font-size: 16px;
    height: 100%;
    width: 100%;
    pointer-events: none;
    font-weight: 500;
}
.quantity .minus {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 9;
    height: 35px;
    line-height: 35px;
    width: 35px;
    border-right: 1px solid #ddd;
    text-align: center;
    font-size: 40px;
    cursor: pointer;
}
.quantity .plus {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 9;
    height: 35px;
    line-height: 35px;
    width: 35px;
    border-left: 1px solid #ddd;
    text-align: center;
    font-size: 26px;
    cursor: pointer;
}
ul#side-menu li {
    border-bottom: 1px solid #ddd;
}

/* ==========================================================================
   COMPREHENSIVE MOBILE RESPONSIVENESS - ADMIN PANEL
   Covers: Tables, Forms, Cards, Buttons, Modals, Dashboard, Reports,
           Settings, Orders, Products, Users, Pagination, Sidebar, Topbar
   ALL rules are inside media queries - desktop layout is NEVER changed.
   ========================================================================== */

/* ---- Tablet & below (991px) -------------------------------------------- */
@media only screen and (max-width: 991.98px) {

  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  #wrapper, .content-page, .container-fluid {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  .content-page {
    margin-left: 0 !important;
    padding: 70px 8px 60px 8px !important;
  }

  /* ---- Page Title Box ---- */
  .page-title-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    height: auto !important;
    min-height: auto !important;
    padding: 12px 0 10px 0 !important;
    margin-bottom: 12px !important;
  }
  .page-title-box .page-title {
    float: none !important;
    font-size: 1.15rem !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.3 !important;
    width: 100% !important;
    order: 1 !important;
  }
  .page-title-box .page-title-right {
    float: none !important;
    position: static !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
    order: 2 !important;
  }
  .page-title-box .page-title-right a,
  .page-title-box .page-title-right button,
  .page-title-box .page-title-right form {
    flex: 1 1 auto !important;
    min-width: 110px !important;
    text-align: center !important;
    margin: 0 !important;
  }

  /* ---- Cards ---- */
  .card {
    border-radius: 12px !important;
    margin-bottom: 14px !important;
  }
  .card-body {
    padding: 12px !important;
  }
  .card-header {
    padding: 10px 12px !important;
  }

  /* ---- Action Button Bar ---- */
  .action2-btn {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
  }
  .action2-btn li {
    display: inline-block !important;
    margin: 0 !important;
    list-style: none !important;
  }
  .action2-btn a,
  .action2-btn button {
    padding: 5px 10px !important;
    font-size: 0.78rem !important;
    white-space: nowrap !important;
  }

  /* ---- Search / Custom Form ---- */
  form.custom_form {
    width: 100% !important;
    margin-top: 6px !important;
    margin-bottom: 14px !important;
  }
  form.custom_form .form-group {
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
  }
  form.custom_form input,
  form.custom_form input:focus {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  form.custom_form button {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }

  /* ---- Card inner col stack ---- */
  .card-body > .row > [class*="col-sm"] {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* ---- Tables ---- */
  .table-responsive {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border: 0 !important;
    margin-bottom: 12px !important;
  }
  .table-responsive > table,
  .table-responsive table {
    min-width: 650px !important;
    width: 100% !important;
  }
  .table td,
  .table th {
    white-space: nowrap !important;
    vertical-align: middle !important;
    padding: 6px 8px !important;
    font-size: 0.82rem !important;
  }

  /* ---- Inline button groups in table cells ---- */
  .button-list.custom-btn-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .button-list.custom-btn-list a,
  .button-list.custom-btn-list button {
    margin: 0 !important;
  }

  /* ---- General form column stacking ---- */
  form .col-sm-2,
  form .col-sm-3,
  form .col-sm-4,
  form .col-sm-5,
  form .col-sm-6,
  form .col-sm-7,
  form .col-sm-8,
  form .col-sm-9,
  form .col-sm-10 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 10px !important;
  }
  .form-group {
    margin-bottom: 10px !important;
  }
  .form-control {
    font-size: 0.9rem !important;
  }
  .form-label {
    font-size: 0.85rem !important;
    margin-bottom: 4px !important;
  }

  /* ---- Select2 ---- */
  .select2-container {
    width: 100% !important;
  }

  /* ---- Image upload ---- */
  .control-group.input-group {
    flex-wrap: wrap !important;
  }
  .control-group.input-group input[type="file"] {
    width: 100% !important;
  }

  /* ---- Summernote editor ---- */
  .note-editor.note-frame {
    width: 100% !important;
  }
  .note-toolbar {
    flex-wrap: wrap !important;
  }

  /* ---- Badges ---- */
  .badge {
    font-size: 0.7rem !important;
    padding: 0.3em 0.5em !important;
  }

  /* ---- Pagination ---- */
  .custom-paginate .pagination {
    flex-wrap: wrap !important;
    gap: 3px !important;
  }
  .custom-paginate .page-link {
    padding: 5px 9px !important;
    font-size: 0.8rem !important;
  }

  /* ---- Modals ---- */
  .modal-dialog {
    margin: 10px auto !important;
    max-width: calc(100vw - 20px) !important;
  }
  .modal-body {
    padding: 12px !important;
  }
  .modal-footer {
    padding: 8px 12px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .modal-footer .btn {
    flex: 1 1 auto !important;
  }

  /* ---- Dashboard stats ---- */
  .row .col-md-6.col-xl-3 {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  /* ---- Footer ---- */
  footer.footer {
    padding: 10px !important;
    font-size: 0.78rem !important;
    text-align: center !important;
  }
  footer.footer .col-md-12 {
    text-align: center !important;
  }

  /* ---- Image thumbnails ---- */
  .backend-image {
    height: 40px !important;
    width: 40px !important;
  }

  /* ---- Bordered table cells ---- */
  .table-bordered td,
  .table-bordered th {
    padding: 5px 7px !important;
    font-size: 0.8rem !important;
  }

  /* ---- Cart qty controls ---- */
  .qty-cart .quantity {
    min-width: 100px !important;
  }
  .qty-cart input {
    width: 60px !important;
  }

  /* ---- Toastr ---- */
  #toast-container > div {
    max-width: 90vw !important;
    min-width: 0 !important;
  }
}

/* ---- Small phones (575px) ----------------------------------------------- */
@media only screen and (max-width: 575.98px) {

  .content-page {
    padding: 65px 6px 55px 6px !important;
  }
  .page-title-box .page-title {
    font-size: 1rem !important;
  }
  .page-title-box .page-title-right a,
  .page-title-box .page-title-right button {
    font-size: 0.78rem !important;
    padding: 5px 10px !important;
  }
  .card-body {
    padding: 10px !important;
  }
  .table td,
  .table th {
    font-size: 0.75rem !important;
    padding: 5px 6px !important;
  }
  .row .col-md-6.col-xl-3 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .action2-btn a,
  .action2-btn button {
    font-size: 0.72rem !important;
    padding: 4px 8px !important;
  }
  .pro-user-name {
    display: none !important;
  }
  .form-control,
  .form-select {
    font-size: 0.85rem !important;
  }
  .modal-dialog {
    margin: 6px !important;
    max-width: calc(100vw - 12px) !important;
  }
  .modal-footer {
    flex-direction: column !important;
  }
  .modal-footer .btn {
    width: 100% !important;
  }
  .custom-paginate .page-link {
    padding: 4px 7px !important;
    font-size: 0.75rem !important;
  }
  .backend-image {
    height: 34px !important;
    width: 34px !important;
  }
  .table-responsive > table,
  .table-responsive table {
    min-width: 520px !important;
  }
  .note-btn {
    padding: 2px 5px !important;
    font-size: 0.75rem !important;
  }
  .form-check-label {
    font-size: 0.82rem !important;
  }
  footer.footer {
    font-size: 0.72rem !important;
  }
}

/* ---- Very small phones (414px) ------------------------------------------ */
@media only screen and (max-width: 414px) {

  .page-title-box .page-title {
    font-size: 0.95rem !important;
  }
  [class*="col-sm-"],
  [class*="col-md-"],
  [class*="col-lg-"] {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .table td,
  .table th {
    font-size: 0.7rem !important;
    padding: 4px 5px !important;
  }
  .action2-btn a,
  .action2-btn button {
    font-size: 0.68rem !important;
    padding: 3px 7px !important;
  }
  .card-body {
    padding: 8px !important;
  }
  .btn {
    font-size: 0.78rem !important;
    padding: 5px 10px !important;
  }
}

/* ---- 320px minimum -------------------------------------------------------- */
@media only screen and (max-width: 320px) {

  .page-title-box .page-title {
    font-size: 0.88rem !important;
  }
  .table td,
  .table th {
    font-size: 0.65rem !important;
    padding: 3px 4px !important;
  }
  .action2-btn a,
  .action2-btn button {
    font-size: 0.65rem !important;
    padding: 3px 6px !important;
  }
  .card-body {
    padding: 6px !important;
  }
  form.custom_form input {
    font-size: 0.78rem !important;
  }
  .btn {
    font-size: 0.72rem !important;
    padding: 4px 8px !important;
  }
}

/* ---- Landscape phones ---------------------------------------------------- */
@media only screen and (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .content-page {
    padding-top: 60px !important;
  }
  .page-title-box {
    padding: 6px 0 !important;
    margin-bottom: 6px !important;
  }
  .card-body {
    padding: 8px !important;
  }
}
