:root {

  --font-sans: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --color-primary: #007bff;
  --color-primary-hover: #0069d9;
  --color-accent: #17a2b8;
  --color-accent-hover: #138496;
  --color-white: #ffffff;
  --color-icons: #6c757d;

  --color-bg: #f4f6f9;
  --color-bg-dark: #343a40;
  --color-bg-hover: rgba(255, 255, 255, .1);

  --color-text-sidebar: #c2c7d0;
  --color-text-primary: #343a40;
  --color-text-secondary: #6c757d;


  --color-brd: #ced4da;

  --color-info: #17a2b8;
  --color-warning: #ffc107;
  --color-danger: #dc3545;
  --color-danger-hover: #c82333;
  --color-success: #28a745;
  --color-success-hover: #218838;
  --color-neutral: #6c757d;
  --color-neutral-hover: #5a6268;

  --tab-border-radius: 0.25rem;
  --btn-border-radius: 0.25rem;

  --color-table-odd: rgba(0, 0, 0, .05);
  --color-table-brd: #dee2e6;

  --dt-button-text: #444444;
  --dt-button-bg: #f4f4f4;
  --dt-button-brd: #dddddd;


  --dt-button-text-focus: #333333;
  --dt-button-bg-focus: #e6e6e6;
  --dt-button-brd-focus: #8c8c8c;


  --scrollbar-bg: #fafafa;
  /* Scrollbar background color */
  --scrollbar-thumb-bg: #c1c1c1;
  /* Scrollbar thumb color */
  --scrollbar-shadow-color: rgba(0, 0, 0, 0.3);
  /* Scrollbar thumb shadow color */
}

body,
.tw-font-sans {
  font-family: var(--font-sans);
}

.tw-font-mono {
  font-family: var(--font-mono);
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-sans);
}

body,
.right-col {
  background: var(--color-bg) !important;
  height: 100vh
}

.tw-bg-dark {
  background-color: var(--color-bg-dark) !important
}

.tw-to-primary-900 {
  --tw-gradient-from: var(--color-accent);
  --tw-gradient-to: var(--color-accent);
}

.tw-bg-primary-800 {
  background-color: var(--color-accent);
}

.tw-bg-primary-900 {
  background-color: var(--color-primary);
}

.hover\:tw-bg-primary-700:hover {
  background-color: var(--color-accent);
}


.tw-text-primary-700,
.hover\:tw-text-gray-900:hover {
  color: var(--color-primary) !important;
}


.focus\:tw-text-gray-900:focus {
  color: var(--color-primary) !important
}

.focus\:tw-bg-gray-100:focus {
  background-color: var(--color-bg-hover) !important
}

.\!tw-rounded-lg,
.tw-rounded-md,
.tw-rounded-lg,
.tw-rounded-xl,
.tw-rounded-2xl,
.tw-rounded-tl-xl,
.tw-rounded-tr-xl {
  border-radius: var(--tab-border-radius) !important
}

.tw-text-black,
.tw-text-\[\#1e1e1e\],
.tw-text-gray-900 {
  color: var(--color-text-primary) !important
}

.tw-text-gray-500 {
  color: var(--color-text-secondary) !important
}

.tw-bg-\[\#001F3E\] {
  background-color: var(--color-warning) !important
}

.tw-bg-\[rgb\(40\,183\,123\)\] {
  background-color: var(--color-success) !important
}

.tw-bg-red-600 {
  background-color: var(--color-danger) !important
}

.tw-text-green-900 {
  color: var(--color-success) !important
}

.tw-text-\[\#D61B60\] {
  color: var(--color-success) !important
}

.tw-text-\[\#E7A500\] {
  color: var(--color-warning) !important
}

.tw-text-\[\#009ce4\] {
  color: var(--color-info) !important
}

hr {
  border-color: var(--color-brd) !important
}

/*text*/
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-text-primary);
}

a {
  color: var(--color-accent);
}

a:hover {
  color: var(--color-accent-hover);
}

/*Menu*/
aside {
  height: 100vh !important
}

aside svg {
  width: 20px;
  height: 20px
}

aside a {
  color: var(--color-text-sidebar) !important
}

aside .tw-bg-gray-200,
aside .hover\:tw-bg-gray-100:hover {
  background-color: var(--color-bg-hover) !important;
  color: var(--color-white) !important
}

aside #side-bar {
  border-right: 0 !important
}

/*Datatables*/
div.table-responsive>div.dataTables_wrapper>div.row>div[class^=col-]:nth-child(3) {
  padding-right: 0 !important;
}

.dataTables_wrapper {
  margin-top: 0.57rem
}

.table-responsive {
  width: 100%
}

table.table-bordered.table-bordered.dataTable tbody td {
  vertical-align: middle;
}

table.table-bordered>thead:first-child>tr:first-child>th {
  white-space: nowrap
}

.table-striped>tbody>tr:nth-of-type(odd) {
  background-color: var(--color-table-odd) !important;
}

.table-bordered>tbody>tr>td,
.table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>td,
.table-bordered>tfoot>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>thead>tr>th {
  border-color: var(--color-table-brd) !important
}

table.table-bordered.table-bordered.dataTable tbody td {
  position: relative;
}

table.table-bordered.table-bordered.dataTable tbody td .old-entry-48,
table.table-bordered.table-bordered.dataTable tbody td .old-entry-96,
table.table-bordered.table-bordered.dataTable tbody td .status-completed-sms-sent {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: left;
  align-items: center;
  background: var(--color-warning);
  padding: 8px;
}


table.table-bordered.table-bordered.dataTable tbody td .old-entry-96 {
  color: var(--color-white);
  background: var(--color-danger);
}

table.table-bordered.table-bordered.dataTable tbody td .status-completed-sms-sent {
  color: var(--color-white);
  background: var(--color-success);
}

/*bottons*/
.tw-dw-btn {
  height: 42px !important;
  min-height: 42px !important;
  border-radius: var(--btn-border-radius) !important
}

.tw-dw-btn:not(.tw-dw-btn-outline) {
  border: 0 !important;
}

.tw-dw-btn.tw-dw-btn-primary.tw-text-white:not(.tw-dw-btn-lg),
.tw-dw-btn.tw-from-indigo-600,
.tw-dw-btn.tw-from-indigo-500,
.tw-dw-btn-sm {
  background: var(--color-primary) !important;
  padding: 0.5rem 1rem !important;
  border: 0 !important;
}

.tw-dw-btn.tw-dw-btn-primary.tw-text-white:hover,
.tw-dw-btn.tw-from-indigo-600:hover,
.tw-dw-btn.tw-from-indigo-500:hover,
.tw-dw-btn-sm:hover,
.tw-dw-btn.tw-dw-btn-primary.tw-text-white:focus,
.tw-dw-btn.tw-from-indigo-600:focus,
.tw-dw-btn.tw-from-indigo-500:focus,
.tw-dw-btn-sm:focus {
  background: var(--color-primary-hover) !important;
  color: var(--color-white) !important;
}

.tw-dw-btn.tw-from-indigo-600:hover,
.tw-dw-btn.tw-from-indigo-500:hover,
.tw-dw-btn-sm:hover {
  color: var(--color-white) !important
}

.btn-primary,
.tw-dw-btn.tw-dw-btn-primary.tw-text-white {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn-primary.btn-flat,
.btn-info {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}

.btn-primary.btn-flat:hover,
.btn-info.active,
.btn-info:active,
.open>.dropdown-toggle.btn-info {
  background-color: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
}

button,
.tw-from-indigo-600,
.tw-from-indigo-500 {
  --tw-gradient-from: var(--color-primary) !important;
  --tw-gradient-to: var(--color-primary) !important;
}

.tw-dw-btn-xs {
  height: 2rem !important;
  min-height: 2rem !important;
}


.tw-dw-btn-lg {
  height: 48px !important;
  min-height: 48px !important;
}

.tw-dw-btn-error:not(.tw-dw-btn-outline) {
  background: var(--color-primary) !important;
  border: 0 !important
}

button.tw-rounded-full {
  border-radius: var(--tab-border-radius) !important
}

.focus\:tw-ring-blue-500:focus {
  --tw-ring-color: var(--color-primary) !important;
}

.tw-bg-\[\#646EE4\] {
  background: var(--color-primary) !important
}

.bg-maroon {
  background-color: var(--color-success) !important
}

.bg-purple {
  background-color: var(--color-info) !important
}

.bg-orange {
  background-color: var(--color-warning) !important;
  color: var(--color-text-primary) !important;
}

.bg-lightgray {
  background-color: var(--color-bg) !important;
}

.bg-green {
  background-color: var(--color-success) !important
}

.bg-table-odd {
  background: var(--color-table-odd);
}

.tw-dw-btn-neutral:not(.tw-dw-btn-outline) {
  background-color: var(--color-neutral) !important
}

.tw-dw-btn-neutral:not(.tw-dw-btn-outline):hover {
  background-color: var(--color-neutral-hover) !important
}

.tw-dw-btn-outline.tw-dw-btn-primary {
  color: var(--color-info) !important
}

.tw-dw-btn-outline.tw-dw-btn-info {
  color: var(--color-warning) !important
}

.tw-dw-btn-outline.tw-dw-btn-info .fa-eye {
  padding-top: 3px
}

.tw-dw-btn-outline.tw-dw-btn-neutral {
  color: var(--color-neutral) !important
}

.tw-dw-btn-outline.tw-dw-btn-error {
  color: var(--color-danger) !important
}

.tw-dw-btn-success:not(.tw-dw-btn-outline) {
  background-color: var(--color-success) !important;
}

.tw-dw-btn-info:not(.tw-dw-btn-outline) {
  background-color: var(--color-accent) !important;
}

.tw-dw-btn-error:not(.tw-dw-btn-outline) {
  background-color: var(--color-danger) !important;
}

@media (hover: hover) {
  .tw-dw-btn-outline.tw-dw-btn-primary:hover {
    color: var(--color-white) !important;
    background-color: var(--color-info) !important;
    border-color: var(--color-info) !important;
  }

  .tw-dw-btn-outline.tw-dw-btn-info:hover {
    color: var(--color-white) !important;
    background-color: var(--color-warning) !important;
    border-color: var(--color-warning) !important;
  }

  .tw-dw-btn-outline.tw-dw-btn-error:hover {
    color: var(--color-white) !important;
    background-color: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
  }

  .tw-dw-btn-outline.tw-dw-btn-neutral:hover {
    color: var(--color-white) !important;
    background-color: var(--color-neutral) !important;
    border-color: var(--color-neutral) !important;
  }

  .tw-dw-btn-success:not(.tw-dw-btn-outline):hover {
    color: var(--color-white) !important;
    background-color: var(--color-success-hover) !important;
  }

  .tw-dw-btn-info:not(.tw-dw-btn-outline):hover {
    color: var(--color-white) !important;
    background-color: var(--color-accent-hover) !important;
  }

  .tw-dw-btn-error:not(.tw-dw-btn-outline):hover {
    color: var(--color-white) !important;
    background-color: var(--color-danger-hover) !important;
  }

}

.dt-buttons.btn-group a {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--dt-button-text);
  background-color: var(--dt-button-bg);
  border-color: var(--dt-button-brd);
}

.dt-buttons.btn-group a.focus,
.dt-buttons.btn-group a:focus {
  color: var(--dt-button-text-focus);
  background-color: var(--dt-button-bg-focus);
  border-color: var(--dt-button-brd-focus);
}

/*label*/

label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

div.dataTables_wrapper div.dataTables_length label {
  overflow: visible;
}

/*switch*/

.switch-light>span,
.switch-toggle {
  background: transparent !important;
  box-shadow: none !important
}

.switch-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.switch-toggle input {
  display: none;
}

.switch-toggle label {
  cursor: pointer;
  padding: 8px 12px;
  border: 1px solid var(--color-brd);
  color: var(--color-neutral);
  border-radius: 4px;
  background-color: var(--color-bg);
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.switch-toggle input:checked+label {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-white);
}

.switch-toggle input[id$="_yes"]:checked+label {
  background-color: var(--color-success);
  border-color: var(--color-success);
}

.switch-toggle input[id$="_no"]:checked+label {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
}

.switch-toggle input[id$="_not_applicable"]:checked+label {
  background-color: var(--color-neutral);
  border-color: var(--color-neutral);
}

.switch-toggle label:hover {
  background-color: #e9ecef;
}

.switch-toggle .btn {
  display: none;
}

/*borders*/

.tw-border-primary-500\/30 {
  border-color: var(--color-brd) !important
}

/*texts*/

.text-green,
.text-success {
  color: var(--color-success) !important;
}

/*icons*/

.input-group-addon i {
  --tw-text-opacity: 1;
  color: rgb(var(--color-icons) / var(--tw-text-opacity)) !important;
}


.text-aqua,
.text-info,
.text-light-blue,
.text-primary {
  color: var(--color-primary) !important;
}

.fa,
.fas,
.fa-times {
  font-size: 1em;
}

/*alert*/
.alert-info,
.bg-aqua,
.callout.callout-info,
.label-info,
.modal-info .modal-body,
.progress-bar-aqua,
.progress-bar-info {
  background: var(--color-info) !important;
  border-color: var(--color-info) !important
}

.alert-warning,
.bg-yellow,
.callout.callout-warning,
.label-warning,
.modal-warning .modal-body,
.progress-bar-warning,
.progress-bar-yellow {
  background: var(--color-warning) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-warning) !important
}

.alert h4,
.callout h4 {
  color: var(--color-white) !important;
  margin-bottom: 0
}

.toast-info {
  background-color: var(--color-info) !important;
}

.toast-success {
  background-color: var(--color-success) !important;
}

.toast-warning {
  background-color: var(--color-warning) !important;
}

.toast-error {
  background-color: var(--color-danger) !important;
}

/*rp*/

span.rp-info {
  position: relative;
  display: inline-block;
  background-color: var(--color-success);
  color: var(--color-white);
  padding: 5px 10px;
  margin-top: 8px;
  border-radius: var(--btn-border-radius);
  overflow: hidden;
  box-shadow: 2px 2px 4px rgba(136, 152, 170, .15);
}

span.rp-info .rp-info-icon {
  background: rgba(0, 0, 0, .08);
  padding: 5px;
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
  width: 30px;
  text-align: center;
}

span.rp-info .rp-info-number {
  margin-left: 30px;
}

/*input*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  box-shadow: 0 0 0 1000px #f4f6f9 inset;
  -webkit-text-fill-color: var(--color-text-primary);
}

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

.form-control:not(select),
select.form-control,
.select2-container--default .select2-selection,
.tox-tinymce,
.input-group-addon:first-child,
.input-group-btn:first-child>.btn {
  border-radius: var(--btn-border-radius) !important
}

.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child>.btn,
.input-group span.select2:nth-child(2) .select2-selection,
.input-group span.select2:nth-child(5) .select2-selection {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.input-group .form-control:last-child,
.input-group span:nth-child(3),
.input-group span:nth-child(3) .select2-selection {
  border-top-right-radius: var(--btn-border-radius) !important;
  border-bottom-right-radius: var(--btn-border-radius) !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.input-group .form-control:not(:first-child):not(:last-child),
.input-group span.select2:nth-child(7) .select2-selection {
  border-radius: 0 !important
}

.input-group .input-group-addon:last-child,
.input-group-btn:last-child>.btn,
.btn-group>.btn:last-child:not(:first-child) {
  border-top-right-radius: var(--btn-border-radius) !important;
  border-bottom-right-radius: var(--btn-border-radius) !important;
}

.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
  border-top-left-radius: var(--btn-border-radius) !important;
  border-bottom-left-radius: var(--btn-border-radius) !important;
}

.input-group-btn .btn-primary.btn-file {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important
}

.input-group-btn .btn-primary.btn-file:hover {
  background-color: var(--color-accent-hover) !important
}

.icheckbox_square-blue,
.iradio_square-blue {
  width: auto !important;
  height: auto !important;
  background: 0 0 !important;
  margin-right: unset !important;
  border-radius: var(--btn-border-radius) !important
}

.icheckbox_square-blue .input-icheck,
.iradio_square-blue .input-icheck {
  position: relative !important;
  opacity: 1 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.daterangepicker .ranges li.active {
  background-color: var(--color-accent) !important
}

.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  background: var(--color-white) !important
}

.input-group #delivery_date-error,
.input-group #customer_id-error,
.input-group #brand_id-error,
.input-group #device_id-error,
.input-group #device_model_id-error {
  position: absolute;
  top: 100%;
  left: 0;
}

textarea,
input {
  background-color: var(--color-bg)
}

/*Login*/
.login-logo {
  width: 120px
}

.sidebar-logo {
  width: 80px
}

/*Pos*/
.pos-header {
  z-index: 300
}

.pos-form-actions {
  width: calc(100% - 30px);
  margin-left: 15px;
  margin-right: 15px;
}

/*jobsheet*/
#job_sheet_form .box.box-solid {
  margin-top: 20px
}

/*Reparation*/
.navbar-default {
  border: 0 !important;
  box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !important;
  --webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !important;
}

.small-box {
  text-align: center;
}

.small-box h3 {
  color: var(--color-white) !important
}

.small-box p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*tabs*/
.nav-tabs-custom>.nav-tabs {
  overflow-x: auto;
  overflow-y: hidden;
}

.nav-tabs-custom>.nav-tabs>li {
  max-width: 100%;
}

.nav-tabs-custom>.nav-tabs>li>a {
  font-size: 100%;
  white-space: nowrap;
}

div.pos-tab-menu div.list-group>a.active,
div.pos-tab-menu div.list-group>a.active .glyphicon,
div.pos-tab-menu div.list-group>a.active .fa {
  background: var(--color-accent) !important
}

.nav-tabs-custom>.nav-tabs>li.active {
  border-top-color: var(--color-accent) !important
}


@media (min-width: 768px) {
  .navbar-default .navbar-collapse {
    position: relative;
  }

  .navbar-nav {
    float: left;
    margin: 0;
    display: inline-flex;
    display: inline-flex;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
  }

  .navbar-nav>li {
    position: static;
    white-space: nowrap;
  }

  .navbar-nav>li>.dropdown-menu {
    border: 0 !important;
    border-color: var(--color-brd) !important;
    box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !important;
    --webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !important;
  }
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover {
  background-color: var(--color-accent) !important;
  color: var(--color-white) !important;
}

.navbar-nav>li>.dropdown-menu {
  left: 0;
  right: 0
}


.box-header.with-border {
  border: 0 !important
}

ul.dt-button-collection {
  background-color: var(--color-white);
  box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !important;
  --webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !important;
}

.dropdown-menu>.active>a {
  color: var(--color-text-primary);
  background-color: var(--color-white);
}

.dropdown-menu>.active>a:focus,
.dropdown-menu>.active>a:hover {
  color: var(--color-primary);
  background-color: rgb(238 242 246)
}

/*Modal*/
.modal-content {
  border-radius: var(--tab-border-radius) !important
}

.swal-button--confirm {
  background-color: var(--color-primary) !important;
}

.swal-button--cancel {
  background-color: var(--color-danger) !important;
  color: var(--color-white) !important;
}

.swal-button:focus {
  box-shadow: none !important;
}

/*Spreadsheet*/

.luckysheet-share-logo,
#luckysheet_info_detail_save,
#luckysheet_info_detail_update {
  display: none !important;
}

#my_spreadsheet {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
  top: 0px;
}

.luckysheet_info_detail div.luckysheet_info_detail_back,
.luckysheet_info_detail div.luckysheet_info_detail_import,
.luckysheet_info_detail div.luckysheet_info_detail_update {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-white);
  padding: 0.5rem 1rem !important;
  border-radius: var(--btn-border-radius) !important
}

.luckysheet_info_detail div.luckysheet_info_detail_import {
  background: var(--color-accent)
}

.luckysheet_info_detail div.luckysheet_info_detail_import:hover {
  background: var(--color-accent-hover)
}

.luckysheet_info_detail div.luckysheet_info_detail_update {
  background: var(--color-primary)
}

.luckysheet_info_detail div.luckysheet_info_detail_update:hover {
  background: var(--color-primary-hover)
}

.luckysheet_info_detail div.luckysheet_info_detail_back {
  background: var(--color-neutral) !important
}

.luckysheet_info_detail div.luckysheet_info_detail_back:hover {
  background: var(--color-neutral-hover) !important
}


.luckysheet_info_detail div.luckysheet_info_detail_back i,
.luckysheet_info_detail div.luckysheet_info_detail_import i,
.luckysheet_info_detail div.luckysheet_info_detail_update i {
  color: var(--color-white) !important;
  font-size: 18px !important
}

.luckysheet_info_detail div.luckysheet_info_detail_back i:before {
  content: "\f053"
}

.luckysheetLoaderGif {
  display: none !important
}

/*Spacing*/
.tw-mb-14 {
  margin-top: 3.5rem
}

/*Shadow*/

.tw-shadow-sm {
  border-color: var(--color-brd) !important;
  box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !important;
  --webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !important
}

.tw-ring-1 {
  --tw-ring-offset-shadow: none !important;
  --tw-ring-shadow: none !important;
  border-color: var(--color-brd) !important;
  box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !important;
  --webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !important
}

.box.box-solid,
.hover\:tw-shadow-md:hover {
  --tw-shadow: none !important;
  --tw-shadow-colored: none !important;
  border-color: var(--color-brd) !important;
  box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !important;
  --webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !important
}

.elevation-4 {
  box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22) !important;
}

/*Animation*/
.hover\:tw-translate-y-0\.5:hover,
.hover\:tw--translate-y-0\.5:hover {
  --tw-translate-y: none !important;
}

/*pagination*/
.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}

.scrolltop {
  display: none !important;
}

/*scrollbar*/
main,
aside {
  max-height: 100vh
}

::-webkit-scrollbar,
.dataTables_scrollBody::-webkit-scrollbar {
  background-color: var(--scrollbar-bg) !important;
  width: 6px !important;
  height: 6px !important;
}

::-webkit-scrollbar-thumb,
.dataTables_scrollBody::-webkit-scrollbar {
  background-color: var(--scrollbar-thumb-bg) !important;
  border-radius: 0 !important;
  -webkit-box-shadow: inset 0 0 6px var(--scrollbar-shadow-color) !important;
}

::-webkit-scrollbar-track,
.dataTables_scrollBody::-webkit-scrollbar {
  background-color: var(--scrollbar-bg) !important;
  border-radius: 0 !important;
  -webkit-box-shadow: inset 0 0 6px var(--scrollbar-shadow-color) !important;
}