/* @keyframes transform {
    from {
      transform: scale(0.01);
    }
    to {
      transform: scale(1);
    }
}
  
.wrapper.ew-layout {
    animation: transform 1s;
} */

.tooltipTeldat {
  position: absolute;
  padding: 5px;
  background-color: #555;
  color: #fff;
  border-radius: 6px;
  z-index: 1000;
  pointer-events: none;
  /* box-shadow: 2px 2px 0px 0px rgb(70, 70, 70,0.5); */
}

.tooltip-container {
  position: relative;
}

.tooltipTeldat::before {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  border-width: 0 10px 10px 0;
  border-style: solid;
  border-color: transparent transparent rgb(85 85 85) transparent;
  transform: rotate(90deg);
}

/* .tooltipTeldat::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 4px;
    border-width: 0px 6px 6px 0;
    border-style: solid;
    border-color: transparent transparent rgb(70, 70, 70,0.5) transparent;
    transform: rotate(90deg);
    z-index: 50;
  } */

input[readonly] {
  /* background-color: #f1f1f1; */
  /* font-weight: bold; */
  cursor: auto;
}

input[readonly]:focus {
  background-color: #f1f1f1;
  border-color: #ced4da;
  box-shadow: none;
}

.card.ew-card.ew-grid {
  width: 100%;
}

body {
  overflow-x: hidden;
  /* overflow-y: hidden; */
  background-color: #f0f0f0;
}

.ew-message-dialog {
  display: none;
}

@keyframes blink {
  0% {
    background-color: green;
  }

  50% {
    background-color: transparent;
  }

  100% {
    background-color: green;
  }
}

@keyframes panic {
  0% {
    background-color: #ff3333;
  }

  50% {
    background-color: transparent;
  }

  100% {
    background-color: #ff3333;
  }
}

.circle {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 50%;
  border: 1px solid #7a7a7a;
  margin-right: 5px;
}

.circleGreen {
  background-color: green;
  animation: blink 2s linear infinite;
}

.circleGray {
  background-color: #666;
}

.circleOrange {
  background-color: #ff8902;
}

.circleYellow {
  background-color: #fbff02;
}

.circleRed {
  background-color: #ff3333;
  animation: panic 1s linear infinite;
}

.centrado {
  display: flex;
  align-items: center;
}

div#ew-list {
  box-shadow: 0 0 10px 0 #8e8e8e;
  border-radius: 5px;
}

tr:nth-child(2n) {
  background-color: #e3eeff;
}

tr:nth-child(2n):hover {
  --bs-table-accent-bg: rgba(0, 0, 0, 0.075);
  color: var(--bs-table-color);
}

tr:nth-child(2n + 1) {
  --bs-table-striped-bg: #fbfbfb;
}

.card-body.ew-grid-middle-panel.table-responsive.h-auto {
  /*max-height: 500px;*/
  overflow-y: auto;
}

.nav-tabs,
.nav-pills {
  margin-bottom: 0;
}

.nav-tabs .nav-link.active,
button.nav-link.active:focus {
  color: #fbfbfb;
  background-color: #0c66ea;
  border-color: #16315a;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
  color: #3c3c3c;
  transform: none !important;
  background-color: #deecff;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link.active:hover {
  color: #fbfbfb;
  transform: none !important;
  background-color: #0c66ea;
  cursor: auto;
}

.nav-tabs .nav-link {
  transition: background-color 0.75s !important;
}

.ew-form:not(.ew-list-form):not(.ew-user-priv-form),
table.ew-master-table.ew-vertical,
.query-builder {
  max-width: 100%;
}

.msgWarning {
  background-color: #fff6f6;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 20px;
  margin-top: 20px;
  border: 1px solid #d0d0d0;
  box-shadow: 0 0 3px 0 #ff0000;
  font-weight: bold;
  color: #ab0b0b;
}

/* CSS del country */
#select-container {
  justify-content: center;
  padding: 5px;
  width: 200px;
  height: 150px;
  background-color: #5e9ffe;
  position: fixed;
  bottom: 20px;
  right: -200px;
  z-index: 1;
  transition: right 0.5s ease-out;
  cursor: pointer;
}

#select-container.active:before {
  content: "";
  position: absolute;
  left: -28.8px;
  top: 0;
  width: 0;
  height: 0;
  border: transparent solid 15px;
  border-right-color: #5e9ffe;
}

#select-container.open {
  right: 0;
}

#country-select {
  max-width: 180px;
  z-index: 2;
  height: 20px;
}

label.testingSlider {
  padding-right: 5px;
}

.testingRow {
  display: grid;
  margin-bottom: 20px;
  margin-left: 5px;
}

/* fin del CSS country */

body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav)
  .content-wrapper,
body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav)
  .main-footer,
body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav)
  .main-header {
  margin-left: 0;
}

#details_Page .nav .nav-item .nav-link {
  background-color: transparent !important;
  color: black !important;
  border: transparent !important;
  font-weight: bold !important;
  padding-bottom: 1px !important;
  margin-bottom: 15px !important;
  margin-right: 10px;
}

#details_Page .nav .nav-item .nav-link:hover {
  border-bottom: 3px solid #3780ef !important;
}

#details_Page .nav .nav-item .nav-link.active {
  border-bottom: 3px solid #1154b8 !important;
}

.card-header {
  background-color: #d0e3ff;
  border-bottom: 0px;
}

.tabulator-tableholder {
  max-height: 600px;
}

.tabulator-header {
  background-color: #d0e3ff !important;
  border: transparent !important;
}

.information {
  margin-left: 10px;
}

.ew-no-record div#ew-list {
  box-shadow: unset !important;
}

#r_id_dir_facturacion {
  display: none;
}

ol.breadcrumb.float-sm-end.ew-breadcrumbs {
  display: none;
}

.navbar-blue {
  color: white;
  background-color: #fff;
  background-image: linear-gradient(
    180deg,
    #86a6bf 10%,
    #1b5291 90%,
    #001d3f 100%
  ) !important;
}

/* Nuevos estilos */

body.pace-done.ew-layout-top-nav {
  background-color: #f0f0f0;
}

a.nav-link.active {
  color: white;
  transition: transform 0.5s;
  border-bottom: 2px solid #403457;
}

footer.main-footer {
  width: 100%;
  margin: auto;
  position: absolute;
  box-shadow: 0 0 11px 5px #cccccc;
  box-shadow: 10px 0 11px 0px #cccccc, -10px 0 17px -5px #cccccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

/* .btn-primary {
    background-color: #5a83ac;
    border: 1px solid #3f6489;
}

.btn-primary:hover,.btn-primary:active {
    background-color: #416589;
    border-color: #193755;
} */

.content-newRMA {
  color: #343434;
  /* margin-right: -3500px; */
  margin-right: 0;
  margin-bottom: 40px;
  transition: margin-right 1.5s, height 1s;
  background-color: #f0f0f0;
  box-shadow: 0 0 10px 0 #636363;
  width: 95%;
  padding: 20px 0;
  border-radius: 10px;
}

#ew-nav-link-user i.fa-solid.fa-user {
  color: white;
}

div#r_id_parent_irreparable,
div#r_id_rma {
  display: none;
}

.modal-body div div .btn-group.btn-group-sm.ew-btn-group.ew-list-options {
  display: none;
}

.btn-toolbar.ew-toolbar {
  display: none;
}

button#cancel-buttonconfirmModal {
  margin-left: 15px;
}

.hidden {
  display: none;
}

.ui-widget-overlay {
  opacity: 1 !important;
  background-color: rgba(119, 119, 119, 0.5) !important;
}

/* En principio esto es para ocultarlo de la tabla, ya que no quiero que salga, falta probar que igual el PHPMaker lo tome, que entiendo que si.*/
tr#r_id_rma {
  display: none;
}

#r_whoDo {
  display: none;
}

div#toastsContainerTopRight {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: rgb(128, 128, 128, 0.5); */
}

.toast.ew-toast {
  height: 25%;
  width: 25%;
}

.toast-body {
  padding: var(--bs-toast-padding-x);
  word-wrap: break-word;
}

li[data-name="mi_warranty"] {
  display: none !important;
}

[data-bs-target="#tab_rma_detalles_v_cliente5"],
[data-bs-target="#tab_rma_detalles_v5"],
[data-bs-target="#tab_rma_detalles_v_repar5"] {
  display: none;
}

.ew-desktop {
  padding-bottom: 1rem !important;
}


.spin-button {
  position: relative;
  overflow: hidden;
}

.spin-button img {
  width: 100px; /* Ajusta el tamaño según tu imagen */
  height: 100px; /* Ajusta el tamaño según tu imagen */
  transition: transform 1s ease-in-out;
}

.spin {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


.ew-table-header-caption {
	text-align: center !important;
}

.ew-table-header-cell {
	text-align: center !important;
}

.ew-table-header>th {
  color: white;
}

.ew-detail-pages {
  width: 100% !important;
}

.modalBackgroundOpacity {
  overflow: scroll;
}