:root {
  --sidebar-width-open: 270px;
  --sidebar-width-closed: 70px;
  --primary-color: #ef3340;
  --secondary-color: #ffebf0;
  --primary-color-light: #f58b7b;
  --bs-body-bg: #f5f5f5;
  --main-text-color: #324054;
  --muted-text-color: #9d9d9d;
}

.pagination {
  --bs-pagination-padding-x: 0.75rem;
  --bs-pagination-padding-y: 0.375rem;
  --bs-pagination-font-size: 1rem;
  --bs-pagination-color: #324054;
  --bs-pagination-bg: var(--bs-body-bg);
  --bs-pagination-border-width: var(--bs-border-width);
  --bs-pagination-border-color: var(--bs-border-color);
  --bs-pagination-border-radius: var(--bs-border-radius);
  --bs-pagination-hover-color: black;
  --bs-pagination-hover-bg: var(--bs-tertiary-bg);
  --bs-pagination-hover-border-color: var(--bs-border-color);
  --bs-pagination-focus-color: var(--bs-link-hover-color);
  --bs-pagination-focus-bg: var(--bs-secondary-bg);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: #ef3340;
  --bs-pagination-active-border-color: #ef3340;
  --bs-pagination-disabled-color: var(--bs-secondary-color);
  --bs-pagination-disabled-bg: var(--bs-secondary-bg);
  --bs-pagination-disabled-border-color: var(--bs-border-color);
  display: flex;
  padding-left: 0;
  list-style: none;
}
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #ef3340;
  --bs-btn-border-color: #ef3340;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #a21e21;
  --bs-btn-hover-border-color: #a21e21;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #ef3340;
  --bs-btn-active-border-color: #ef3340;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #ef3340;
  --bs-btn-disabled-border-color: #ef3340;
}
.sorters .active {
  color: var(--primary-color);
}
.sorters .inactive {
  color: #bdc2c8;
}

.login-header .logo {
  width: 200px;
  height: 50px;
}
.login-container {
  padding-top: 10%;
  padding-left: 25%;
  padding-right: 25%;
}

/* Open sidebar styles */
.sidebar-open {
  height: calc(100vh - 32px);
  width: var(--sidebar-width-open);
}
.sidebar-open .nav-link-collapsed {
  display: none;
}
.sidebar-open .nav-link-l1 {
  display: block;
}

.sidebar-open .active .nav-link-l1 .menu-up {
  position: absolute;
  display: inline !important;
  right: 16px;
}
.sidebar-open .active-closed .nav-link-l1 .menu-up {
  display: none !important;
}

.sidebar-open .nav-link-l1 .menu-up {
  display: none;
}

.sidebar-open .active .nav-link-l1 .menu-down {
  display: none !important;
}

.sidebar-open .active-closed .nav-link-l1 .menu-down {
  display: inline !important;
}

#sidebar > ul > li.nav-item.hasmenu.active.active-closed > ul {
  display: none !important;
}

.sidebar-open .active-closed .nav-link-l1 {
  border-radius: 6px;
  background-color: var(--secondary-color);
  color: var(--primary-color);
}

.sidebar-open nav-link nav-link-l1 .nav-link-l1 .menu-down {
  position: absolute;
  display: inline !important;
  right: 16px;
}

.sidebar-open .logo-image {
  background-image: url(../static/logo.png);
  background-repeat: no-repeat;
  display: block;
  background-size: 150px 30px;
  width: 150px;
  height: 30px;
  margin-top: 1rem;
}

.sidebar-open .off-canvas-button {
  z-index: 9999;
  left: calc(var(--sidebar-width-open) - 12px);
  bottom: 175px;
  width: 25px;
}

.logo {
  padding-left: 16px;
}

.sidebar-open .logo-image-collapsed {
  display: none;
}

.sidebar-open hr {
  display: none;
}
/* Closed sidebar styles */
.sidebar-closed {
  height: calc(100vh - 32px);
  width: var(--sidebar-width-closed);
}
.sidebar-closed .text-muted {
  display: none;
}
.sidebar-closed .logo-image-collapsed {
  display: inline;
}
.sidebar-closed hr {
  display: block;
  margin: 4px 0px;
}
.sidebar-closed .nav-link-collapsed {
  display: inline-block;
  padding: 8px !important;
}
.sidebar-closed .sub-menu .nav-link {
  display: none;
}
.sidebar-closed .nav-item.hasmenu .nav-link.nav-link-l1.position-relative {
  display: none !important;
}

.sidebar-closed .nav-item.active .nav-link-collapsed {
  color: var(--primary-color);
}
.sidebar-closed .nav-link-l1 {
  display: none;
}
.sidebar-closed .logo {
  display: none;
}
.content-full {
  width: calc(100% - var(--sidebar-width-closed));
}
.content-collapsed {
  width: calc(100% - var(--sidebar-width-open));
}

/* Icon box modification for fontawesome migrations */
.main .page-header .icon-box {
  padding-top: 3px;
  color: var(--secondary-color);
  text-align: center;
  padding-left: 0px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: var(--primary-color);
}

.sidebar-closed .off-canvas-button {
  z-index: 9999;
  left: calc(var(--sidebar-width-closed) - 12px);
  bottom: 175px;
  width: 25px;
}

.sidebar-closed .nav-link {
  padding: 4px 0px;
  color: var(--main-text-color);
}

.nav-link {
  padding: 7px 16px;
  color: var(--main-text-color);
}
/* 
.nav-link:hover {
  color: #009de1;
} */

.sidebar {
  position: fixed;
  padding: 24px 12px 24px 12px;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  border-radius: 16px;
  background: #fff;
}

.sidebar .nav-item {
  font-weight: 500;
}

.sidebar .nav-item.active:not(.hasmenu) {
  border-radius: 6px;
  background-color: var(--secondary-color);
  color: var(--primary-color);
}

.sidebar .nav-item.active .nav-link-l1 {
  border-radius: 6px;
}

.sidebar .nav-link-l1:hover {
  color: var(--primary-color);
}
.sidebar .hasmenu .active {
  background-color: var(--secondary-color);
  color: var(--primary-color);
}

.sidebar .sub-menu {
  padding-left: 20px !important;
}

.sidebar .sub-menu li {
  padding: 8px 16px;
  list-style-type: none;
}

.sidebar .sub-menu li a {
  padding-left: 0;
  color: #324054;
  text-decoration: none;
}

.sidebar .logout {
  bottom: 32px;
}

.sidebar .nav-item .active a {
  color: var(--primary-color);
}

.main {
  padding: 20px;
}

.main .content {
  background: #fff;
  border-radius: 16px;
}

.main .page-header {
  height: 32px;
  font-weight: 400;
  font-size: 20px;
  line-height: 160%;
  letter-spacing: 0.15px;
  color: #324054;
}

.off-canvas .main {
  width: 100%;
}

.off-canvas .off-canvas-button {
  left: -8px;
  width: 24px;
}

.off-canvas-button .badge {
  border: 0 !important;
}
.bg-brand {
  background-color: var(--primary-color) !important;
}

.avatar {
  width: 40px;
  height: 40px;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  letter-spacing: 0.14px;
  color: #fff;
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 0;
  order: 0;
  -ms-flex-item-align: stretch;
  align-self: stretch;
  -ms-flex-positive: 1;
  flex-grow: 1;
  background: var(--primary-color);
  border-radius: 64px;
}

.checkbox-col {
  width: 15px;
}

td.status button {
  color: #4169e1;
  background-color: rgb(230, 230, 250, 0.3);
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0.375rem;
}
td.status button.draft {
  color: #000000;
  background-color: #ffd700;
}

td.status button.pending {
  color: #ffffff;
  background-color: #ffa500;
}

td.status button.pendingapproval {
  color: #ffffff;
  background-color: #ff8c00;
}

td.status button.approved {
  color: #ffffff;
  background-color: #008000;
}

td.status button.rejected {
  color: #ffffff;
  background-color: #ff0000;
}

td.status button.awaiting {
  color: #ffffff;
  background-color: #0000ff;
}

td.status button.control {
  color: #ffffff;
  background-color: #4b0082;
}

td.status button.completed {
  color: #ffffff;
  background-color: #800080;
}

td.status button.ARCHIVED {
  color: #ffffff;
  background-color: #808080;
}

td.status button.requestinformation {
  color: white;
  background-color: #4682b4;
}
td.status button.available {
  color: white;
  background-color: #32cd32;
}
td.status button.requested {
  color: white;
  background-color: #ff8c00;
}

.select2 {
  min-width: 80%;
  max-width: 100%;
}
.select2-selection__rendered {
  background-color: var(--bs-body-bg);
}
.select2-container--bootstrap-5 .select2-selection {
  background-color: var(--bs-body-bg);
}

.action-col {
  width: 50px;
}
.form-control-color:not(:disabled):not([readonly]),
.form-control[type="file"]:not(:disabled):not([readonly]),
[role="button"],
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled),
button:not(:disabled),
summary {
  cursor: pointer;
}

.form-control[type="file"] {
  overflow: hidden;
}

#packing_list_field input,
#commercial_invoice_field input,
#transport_document_field input,
#origin_certificates_field input,
#additional_documents_field input {
  -webkit-transition: outline-offset 0.15s ease-in-out, background-color 0.15s linear;
  transition: outline-offset 0.15s ease-in-out, background-color 0.15s linear;
  padding: 60px 0 65px 35%;
  margin: 0;
  width: 100% !important;
  opacity: 0;
  border-radius: 5px;
}

#packing_list_field .file-wrapper,
#transport_document_field .file-wrapper,
#commercial_invoice_field .file-wrapper,
#origin_certificates_field .file-wrapper,
#additional_documents_field .file-wrapper {
  border: 1px dashed var(--primary-color);
  border-radius: 8px;
}

.file-wrapper:hover {
  background-color: #ffebf0;
}

.fa-trash-can {
  color: var(--primary-color);
}

input[type="checkbox"][name="ids"]:checked {
  background-color: gray;
  border-color: gray;
}
input[type="radio"] {
  accent-color: var(--primary-color);
}

#selectAll:checked {
  background-color: gray;
  border-color: gray;
}

.select2-container--bootstrap-5 .select2-selection--single {
  padding: 0.375rem 2.25rem 0.375rem 0.375rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
}

.checkbox-container {
  padding: 8px;
  border: solid 1px #dee2e6;
  border-radius: 6px;
  input[type="checkbox"]:checked {
    background-color: gray;
    border-color: gray;
  }
}
