@charset "UTF-8";
html,
body {
  background: #f3f3f3;
  -webkit-font-smoothing: antialiased;
  color: #333333;
  font-size: 15px !important;
}

body {
  background: #f3f3f3;
}

.titulo_login {
  font-family: "Poppins", sans-serif;
  font-size: 28px;
  color: #122242 !important;
  font-weight: bold;
}

.btn-primary {
  color: #fff;
  border: none !important;
  background-color: #74788D !important;
}

.input-login {
  background-color: #F3F3F8 !important;
}

#btnentrar {
  height: 50px;
  border-radius: 10px !important;
}

.select2-container .select2-selection--single {
  height: 35px !important;
  padding-top: 4px !important;
  border: 1px solid #ced4da !important;
}

label {
  margin-top: 20px !important;
}

select {
  min-width: 150px !important;
}

.table thead tr {
  color: #495057;
  border-color: #eff2f7;
  background-color: #f8f9fa;
}

ul {
  list-style: none;
  padding: 0;
}

ul li {
  margin: 0;
}

.grid {
  display: grid;
}

.grid-template-areas {
  grid-template-areas: "pedido pedido pedido pedido" "status comprador entrega info-pedido" "item-pedido item-pedido item-pedido totalizador" "pagamento pagamento rastreio rastreio" "pagamento pagamento fiscais fiscais" "timeline timeline timeline timeline" "obs obs obs obs" "footer footer footer footer";
  column-gap: 30px;
  row-gap: 30px;
}

.pedido {
  grid-area: pedido;
}

.status {
  grid-area: status;
}

.comprador {
  grid-area: comprador;
}

.entrega {
  grid-area: entrega;
}

.info-pedido {
  grid-area: info-pedido;
}

.item-pedido {
  grid-area: item-pedido;
}

.totalizado {
  grid-area: totalizador;
}

.pagamento {
  grid-area: pagamento;
}

.rastreio {
  grid-area: rastreio;
}

.fiscais {
  grid-area: fiscais;
}

.timeline {
  grid-area: timeline;
}

.obs {
  grid-area: obs;
}

.footer {
  grid-area: footer;
}

/* Estilização do site */
.heading h4 {
  font-weight: 700;
}

.heading h4 small {
  font-size: 0.9rem;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  color: #A0A0A0;
}

.breadcrumb > li {
  font-size: 1rem !important;
}

.breadcrumb > li > a {
  text-decoration: none;
  color: #333;
}

.card-body,
.card,
.card-header {
  border: none;
}

.card-header {
  background: #e9e9e9;
}

.card-header p,
.card-body p {
  padding: 0;
  margin: 0;
}

.circle {
  padding: 0.4rem;
  border-radius: 2rem;
  background: white;
  font-size: 0.8rem;
}

.botao-sep {
  border-radius: 5rem;
}

.page-title-box {
  padding-bottom: 0px !important;
}

.swal2-container {
  z-index: 9999999 !important;
}

.notyf__toast--success {
  background-color: rgb(71, 174, 87) !important;
}

.notyf__icon--error,
.notyf__icon--success {
  background: darkblue !important;
}

notyf__toast notyf__toast--lower notyf__toast--success [tooltip] {
  position: relative;
  /* opinion 1 */
}

/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
  text-transform: none;
  /* opinion 2 */
  font-size: 0.9em;
  /* opinion 3 */
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}

[tooltip]::before {
  content: "";
  border: 5px solid transparent;
  /* opinion 4 */
  z-index: 1001;
  /* absurdity 1 */
}

[tooltip]::after {
  content: attr(tooltip) !important;
  /* magic! */
  /* most of the rest of this is opinion */
  font-family: Helvetica, sans-serif;
  text-align: center;
  /* 
  Let the content set the size of the tooltips 
  but this will also keep them from being obnoxious
  */
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  border-radius: 0.3ch;
  box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35) !important;
  background: #333;
  color: #fff;
  z-index: 1000;
  /* absurdity 2 */
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}

/* don't show empty tooltips */
[tooltip=""]::before,
[tooltip=""]::after {
  display: none !important;
}

/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^=up]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #333;
}

[tooltip]:not([flow])::after,
[tooltip][flow^=up]::after {
  bottom: calc(100% + 5px) !important;
}

[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^=up]::before,
[tooltip][flow^=up]::after {
  left: 50%;
  transform: translate(-50%, -0.5em) !important;
}

/* FLOW: DOWN */
[tooltip][flow^=down]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #333;
}

[tooltip][flow^=down]::after {
  top: calc(100% + 5px) !important;
}

[tooltip][flow^=down]::before,
[tooltip][flow^=down]::after {
  left: 50%;
  transform: translate(-50%, 0.5em) !important;
}

/* FLOW: LEFT */
[tooltip][flow^=left]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #333;
  left: calc(0em - 5px) !important;
  transform: translate(-0.5em, -50%) !important;
}

[tooltip][flow^=left]::after {
  top: 50%;
  right: calc(100% + 5px) !important;
  transform: translate(-0.5em, -50%) !important;
}

/* FLOW: RIGHT */
[tooltip][flow^=right]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #333;
  right: calc(0em - 5px) !important;
  transform: translate(0.5em, -50%) !important;
}

[tooltip][flow^=right]::after {
  top: 50%;
  left: calc(100% + 5px) !important;
  transform: translate(0.5em, -50%) !important;
}

/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: 0.9;
    transform: translate(-50%, 0) !important;
  }
}
@keyframes tooltips-horz {
  to {
    opacity: 0.9;
    transform: translate(0, -50%) !important;
  }
}
/* FX All The Things */
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^=up]:hover::before,
[tooltip][flow^=up]:hover::after,
[tooltip][flow^=down]:hover::before,
[tooltip][flow^=down]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}

[tooltip][flow^=left]:hover::before,
[tooltip][flow^=left]:hover::after,
[tooltip][flow^=right]:hover::before,
[tooltip][flow^=right]:hover::after {
  animation: tooltips-horz 300ms ease-out forwards;
}

/* Hide the browser's default checkbox */
label.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 5px;
  left: 0px;
  height: 20px;
  width: 20px;
  background-color: #eee;
  border-radius: 4px;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 8px;
  top: 4px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg) !important;
  -ms-transform: rotate(45deg) !important;
  transform: rotate(45deg) !important;
}

.dark {
  /* The switch - the box around the slider */
  /* Hide default HTML checkbox */
  /* The switch - the box around the slider */
  /* Hide default HTML checkbox */
  /* The slider */
  /* Rounded sliders */
}
.dark .switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin-top: 40px !important;
  padding-top: 7px !important;
}
.dark .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.dark .switch {
  position: absolute;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin-top: 0px !important;
  padding-top: 0px !important;
}
.dark .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.dark .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #29292b;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.dark .slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.dark input:checked + .slider {
  background-color: #CCC;
}
.dark input:focus + .slider {
  box-shadow: 0 0 1px #CCC;
}
.dark input:checked + .slider:before {
  -webkit-transform: translateX(26px) !important;
  -ms-transform: translateX(26px) !important;
  transform: translateX(26px) !important;
}
.dark .slider.round {
  border-radius: 34px;
}
.dark .slider.round:before {
  border-radius: 50%;
}
.dark .form-control, .dark input, .dark select {
  background-color: #3a3a3a !important;
  border-color: #3a3a3a;
  color: #fff;
}

#page-topbar {
  background-color: #FFFFFF !important;
  -webkit-box-shadow: none !important;
}

.table-striped > tbody > tr:nth-of-type(2n+1) {
  --bs-table-accent-bg: unset !important;
}

.dark-mode:root {
  --primary-color: white;
  --secondary-color: rgb(61, 68, 73) !important;
  --highlight-color: #3282b8;
  --dt-status-available-color: greenyellow;
  --dt-status-away-color: lightsalmon;
  --dt-status-offline-color: lightgray;
  --dt-padding: 12px;
  --dt-padding-s: 6px;
  --dt-padding-xs: 2px;
  --dt-border-radius: 3px;
  --dt-background-color-container: #212121;
  --dt-border-color: var(--secondary-color) !important;
  --dt-bg-color: var(--highlight-color) !important;
  --dt-text-color: var(--primary-color) !important;
  --dt-bg-active-button: var(--highlight-color) !important;
  --dt-text-color-button: var(--primary-color) !important;
  --dt-text-color-active-button: var(--primary-color) !important;
  --dt-hover-cell-color: var(--highlight-color) !important;
  --dt-even-row-color: var(--secondary-color) !important;
  --dt-focus-color: var(--highlight-color) !important;
  --dt-input-background-color: var(--secondary-color) !important;
  --dt-input-color: var(--primary-color) !important;
}
.dark-mode:root .logo-dark {
  display: none;
}
.dark-mode:root .logo-light {
  display: block !important;
}
.dark-mode:root .page-content,
.dark-mode:root footer {
  background: #29292b !important;
}
.dark-mode:root .main-content {
  min-height: 100vh !important;
}
.dark-mode:root html,
.dark-mode:root body {
  background-color: #29292b !important;
  color: #FFFFFF !important;
}
.dark-mode:root html a,
.dark-mode:root body a {
  color: #FFFFFF;
}
.dark-mode:root a#topnav-dashboard {
  color: #FFFFFF !important;
}
.dark-mode:root .dropdown-menu {
  background-color: #212121 !important;
  box-shadow: none !important;
}
.dark-mode:root .dropdown-menu a {
  color: #FFFFFF !important;
}
.dark-mode:root .dropdown-menu a:hover {
  background: #29292b !important;
}
.dark-mode:root .h1,
.dark-mode:root .h2,
.dark-mode:root .h3,
.dark-mode:root .h4,
.dark-mode:root .h5,
.dark-mode:root .h6,
.dark-mode:root h1,
.dark-mode:root h2,
.dark-mode:root h3,
.dark-mode:root h4,
.dark-mode:root h5,
.dark-mode:root h6 {
  color: #FFFFFF !important;
}
.dark-mode:root #page-topbar {
  background-color: #212121 !important;
}
.dark-mode:root .card {
  background: #212121 !important;
  color: #dedede !important;
}
.dark-mode:root .card-body {
  width: 100% !important;
}
.dark-mode:root .simple-container {
  max-width: 675px;
  margin: 0 auto;
  padding-top: 70px;
  padding-bottom: 20px;
}
.dark-mode:root .simple-print {
  fill: white;
  stroke: white;
}
.dark-mode:root .simple-print svg {
  height: 100%;
}
.dark-mode:root .simple-close {
  color: white;
  border-color: white;
}
.dark-mode:root .simple-ext-info {
  border-top: 1px solid #aaa;
}
.dark-mode:root p {
  font-size: 16px;
}
.dark-mode:root h1 {
  font-size: 30px;
  line-height: 34px;
}
.dark-mode:root h2 {
  font-size: 20px;
  line-height: 25px;
}
.dark-mode:root h3 {
  font-size: 16px;
  line-height: 27px;
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #D8D8D8 !important;
  border-top: 1px solid #D8D8D8 !important;
}
.dark-mode:root hr {
  height: 1px;
  background-color: #D8D8D8 !important;
  border: none;
  width: 100%;
  margin: 0px;
}
.dark-mode:root a[href] {
  color: #D8D8D8;
}
.dark-mode:root a[href]:hover {
  color: #3ba0e6;
}
.dark-mode:root img {
  max-width: 100%;
}
.dark-mode:root li {
  line-height: 1.5em;
}
.dark-mode:root .wrappertable {
  border: none !important;
}
.dark-mode:root .topnav {
  background: #29292b !important;
}
.dark-mode:root .table thead tr {
  color: #FFFFFF !important;
}
.dark-mode:root .material-icons {
  font-size: 16px;
}
.dark-mode:root .datatable-container {
  font-family: sans-serif;
  background-color: var(--dt-background-color-container) !important;
  border-radius: var(--dt-border-radius) !important;
  color: var(--dt-text-color) !important;
  margin: 0 auto;
  font-size: 12px;
}
.dark-mode:root .datatable-container .header-tools {
  border-bottom: solid 1px var(--dt-border-color) !important;
  padding: var(--dt-padding) !important;
  padding-left: 0;
  display: flex;
  align-items: baseline;
}
.dark-mode:root .datatable-container .header-tools .search {
  width: 30%;
}
.dark-mode:root .datatable-container .header-tools .search .search-input {
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px) !important;
  padding: 0.375rem 0.75rem;
  background-color: var(--dt-input-background-color) !important;
  display: block;
  box-sizing: border-box;
  border-radius: var(--dt-border-radius) !important;
  border: solid 1px var(--dt-border-color) !important;
  color: var(--dt-input-color) !important;
}
.dark-mode:root .datatable-container .header-tools .tools {
  width: 70%;
}
.dark-mode:root .datatable-container .header-tools .tools ul {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: start;
  align-items: baseline;
}
.dark-mode:root .datatable-container .header-tools .tools ul li {
  display: inline-block;
  margin: 0 var(--dt-padding-xs) !important;
  align-items: baseline;
}
.dark-mode:root .datatable-container .footer-tools {
  padding: var(--dt-padding) !important;
  display: flex;
  align-items: baseline;
}
.dark-mode:root .datatable-container .footer-tools .list-items {
  width: 50%;
}
.dark-mode:root .datatable-container .footer-tools .pages {
  margin-left: auto;
  margin-right: 0;
  width: 50%;
}
.dark-mode:root .datatable-container .footer-tools .pages ul {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
}
.dark-mode:root .datatable-container .footer-tools .pages ul li {
  display: inline-block;
  margin: 0 var(--dt-padding-xs) !important;
}
.dark-mode:root .datatable-container .footer-tools .pages ul li button,
.dark-mode:root .datatable-container .header-tools .tools ul li button {
  color: var(--dt-text-color-button) !important;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--dt-border-radius) !important;
  background: transparent;
  cursor: pointer;
}
.dark-mode:root .datatable-container .footer-tools .pages ul li button:hover,
.dark-mode:root .datatable-container .header-tools .tools ul li button:hover {
  background: var(--dt-bg-active-button) !important;
  color: var(--dt-text-color-active-button) !important;
}
.dark-mode:root .datatable-container .footer-tools .pages ul li span.active {
  background-color: var(--dt-bg-color) !important;
  border-radius: var(--dt-border-radius) !important;
}
.dark-mode:root .datatable-container .footer-tools .pages ul li button,
.dark-mode:root .datatable-container .footer-tools .pages ul li span,
.dark-mode:root .datatable-container .header-tools .tools ul li button {
  padding: var(--dt-padding-s) var(--dt-padding) !important;
}
.dark-mode:root .datatable-container .datatable {
  border-collapse: collapse;
  width: 100%;
}
.dark-mode:root .datatable-container .datatable,
.dark-mode:root .datatable-container .datatable th,
.dark-mode:root .datatable-container .datatable td {
  padding: var(--dt-padding) var(--dt-padding) !important;
  border: none !important;
}
.dark-mode:root .datatable-container .datatable th {
  font-weight: bolder;
  text-align: left;
  border-bottom: solid 1px var(--dt-border-color) !important;
}
.dark-mode:root .datatable-container .datatable td {
  border-bottom: solid 1px var(--dt-border-color) !important;
}
.dark-mode:root .datatable-container .datatable tbody tr:nth-child(even) {
  background-color: var(--dt-even-row-color) !important;
}
.dark-mode:root .datatable-container .datatable tbody tr:hover {
  background-color: var(--dt-hover-cell-color) !important;
}
.dark-mode:root .datatable-container .datatable tbody tr .available::after,
.dark-mode:root .datatable-container .datatable tbody tr .away::after,
.dark-mode:root .datatable-container .datatable tbody tr .offline::after {
  display: inline-block;
  vertical-align: middle;
}
.dark-mode:root .datatable-container .datatable tbody tr .available::after {
  content: "Online";
  color: var(--dt-status-available-color) !important;
}
.dark-mode:root .datatable-container .datatable tbody tr .away::after {
  content: "Away";
  color: var(--dt-status-away-color) !important;
}
.dark-mode:root .datatable-container .datatable tbody tr .offline::after {
  content: "Offline";
  color: var(--dt-status-offline-color) !important;
}
.dark-mode:root .datatable-container .datatable tbody tr .available::before,
.dark-mode:root .datatable-container .datatable tbody tr .away::before,
.dark-mode:root .datatable-container .datatable tbody tr .offline::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border-radius: 50%;
  vertical-align: middle;
}
.dark-mode:root .datatable-container .datatable tbody tr .available::before {
  background-color: var(--dt-status-available-color) !important;
}
.dark-mode:root .datatable-container .datatable tbody tr .away::before {
  background-color: var(--dt-status-away-color) !important;
}
.dark-mode:root .datatable-container .datatable tbody tr .offline::before {
  background-color: var(--dt-status-offline-color) !important;
}
.dark-mode:root .page-item.disabled .page-link {
  background: transparent !important;
}
.dark-mode:root .page-item.active .page-link, .dark-mode:root .page-item:not(:first-child) .page-link {
  background: transparent !important;
}
.dark-mode:root .tab-content {
  background-color: #29292b !important;
}
.dark-mode:root .submit-row {
  background: #29292b !important;
}
.dark-mode:root .tabs-menu li {
  background-color: #2a3338 !important;
}
.dark-mode:root .tabs-menu li.current {
  background-color: #29292b !important;
}
.dark-mode:root .form-control, .dark-mode:root input, .dark-mode:root select {
  background-color: #3a3a3a !important;
  border-color: #3a3a3a;
  color: #fff;
}
.topbar .topbar-left {
  background-color: #2b3a4a !important;
}

.side-menu {
  background-color: #2b3a4a !important;
}
.side-menu .topbar .topbar-left {
  background-color: #2b3a4a !important;
}
.side-menu #sidebar-menu > ul > li:hover {
  background-color: #2b3a4a !important;
}
.side-menu #sidebar-menu > ul > li a:hover {
  background-color: #fec32b !important;
}
.side-menu #sidebar-menu > ul > li > a {
  color: #FFFFFF !important;
  font-weight: bold !important;
}
.side-menu .submenu li a {
  color: #FFFFFF !important;
}
.side-menu .menu-title {
  color: #FFFFFF !important;
}