@import url("https://fonts.googleapis.com/css2?family=Barlow&display=swap");

.telcos-botton-duplicar {
  position: absolute;
  width: 20px;
  border-radius: 50%;
  padding: 0%;
  margin-left: -1%;
}
a:hover {
  text-decoration: none;
}

.border-left {
  border-left: 2px solid var(--danger) !important;
}

.list-group-item.active {
  background-color: #cd1f1d !important;
  color: white !important;
}

.sidebar {
  top: 0;
  left: 0;
  z-index: 100;
  overflow-y: auto;
}

.overlay {
  background-color: rgb(0 0 0 / 45%);
  z-index: 99;
}

/* sidebar for small screens */
@media screen and (max-width: 767px) {
  .sidebar {
    max-width: 18rem;
    transform: translateX(-100%);
    transition: transform 0.4s ease-out;
  }

  .sidebar.active {
    transform: translateX(0);
  }

  ul.breadcrumb {
    margin-top: -7%;
  }
}

#close-sidebar {
  position: absolute;
  z-index: 999;
  margin-left: 84%;
  margin-top: -20%;
}

.btn:focus,
.btn:hover {
  background: transparent !important;
  cursor: pointer;
}

ul.breadcrumb {
  padding: 8px 16px;
  list-style: none;
  background-color: #eee;
  margin-top: -4%;
}

ul.breadcrumb li {
  display: inline;
}

ul.breadcrumb li + li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}

ul.breadcrumb a:link,
ul.breadcrumb a:visited {
  text-decoration: none;
  color: black;
}

ul.breadcrumb li.active {
  color: #4caf50;
  font-weight: bold;
}

ul.breadcrumb li.active:hover {
  color: #397f3b;
  font-weight: bold;
}

.card-body a {
  color: white !important;
}

.card-body a:hover {
  color: black !important;
}

.alert-message {
  line-height: 20px;
  font-size: 15px;
  padding-bottom: 12px;
}

h1 {
  color: #e35154 !important;
  font-size: 18px;
  margin-left: 20px;
  margin-bottom: 20px;
  font-weight: 700;
  text-transform: uppercase;
}

body a,
body #test {
  color: black;
}

.unstyled {
  margin: 0;
  list-style: none;
}

.unstyled a,
.unstyled #test {
  width: 120px;
  text-decoration: none;
  padding: 0.5em 1em;
  background-color: #213347;
  border-radius: 4px;
  display: block;
  margin-bottom: 0.5em;
  font-size: 15px;
  font-weight: 300;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.unstyled a:hover,
.unstyled #test:hover {
  background-color: #f25c5d;
}

.cf,
.alert {
  *zoom: 1;
}

.cf:before,
.alert:before,
.cf:after,
.alert:after {
  display: table;
  content: "";
  line-height: 0;
}

.cf:after,
.alert:after {
  clear: both;
}

#alerts {
  width: 400px;
  top: 12px;
  position: fixed;
  z-index: 9999;
  list-style: none;
}

.alert {
  width: 100%;
  margin-bottom: 8px;
  display: block;
  position: relative;
  border-left: 4px solid;
  right: -50px;
  opacity: 0;
  line-height: 1;
  padding: 0;
  transition: right 400ms, opacity 400ms, line-height 300ms 100ms,
    padding 300ms 100ms;
  display: table;
}

.alert:hover {
  cursor: pointer;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

.open {
  right: 0;
  opacity: 1;
  line-height: 2;
  padding: 3px 15px;
  transition: line-height 200ms, padding 200ms, right 350ms 200ms,
    opacity 350ms 200ms;
}

.alert-title {
  font-weight: bold;
}

.alert-block {
  width: 80%;
  width: -webkit-calc(100% - 10px);
  width: calc(100% - 10px);
  text-align: left;
}

.alert-block em,
.alert-block small {
  font-size: 0.75em;
  opacity: 0.75;
  display: block;
}

.alert i {
  font-size: 2em;
  width: 1.5em;
  max-height: 48px;
  top: 50%;
  margin-top: -12px;
  display: table-cell;
  vertical-align: middle;
}

.alert-success {
  color: #fff;
  border-color: #539753;
  background-color: #8fbf2f;
}

.alert-error {
  color: #fff;
  border-color: #dc4a4d;
  background-color: #f25c5d;
}

.alert-trash {
  color: #fff;
  border-color: #dc4a4d;
  background-color: #f25c5d;
}

.alert-info {
  color: #fff;
  border-color: #076d91;
  background-color: #3397db;
}

.alert-warning {
  color: #fff;
  border-color: #dd6137;
  background-color: #f7931d;
}

.error {
  border: 1px solid red !important;
}

.no_mostrar {
  display: none;
}

.btn:hover {
  color: black !important;
}

button:focus:not(:focus-visible) {
  color: black;
}

.telcos-line {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}

.telcos-blue {
  background-color: #23266a;
  color: white;
  padding: 7px;
  margin-top: 6px;
}

.select2-search__field {
  width: 100% !important;
  color: rgb(0, 0, 0) !important;
  background-clip: padding-box !important;
  border: 1px solid #ced4da !important;
}

.select2-selection--multiple .select2-selection__choice {
  background-color: #201f49 !important;
  color: white !important;
}

.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__remove {
  color: #e78415 !important;
  padding: 2px !important;
}

.select2-container--default .select2-selection--multiple {
  border: 1px solid transparent !important;
}

.telcos-info {
  color: red;
  font-size: 10px;
  justify-content: center;
  text-align: center;
  width: 100%;
  cursor: pointer;
}

.telcos-info i {
  font-size: 30px;
}

@media (min-width: 650px) {
  .table-responsive {
    display: inline-table !important;
  }
}

@media (max-width: 650px) {
  .table-responsive {
    display: block !important;
  }
}

.telcos-text {
  background-color: #fff;
  /* Fondo blanco */
  border: none;
  /* Sin bordes */
  outline: none;
  /* Sin borde de enfoque */
  resize: none;
  /* Deshabilita el redimensionamiento */
  padding: 10px;
  /* Espacio interno */
  font-size: 16px;
  /* Tamaño de fuente */
  color: #000;
  /* Color del texto */
  box-shadow: none;
  /* Sin sombra */
}

.telcos_tipo_trabajo_border {
  margin-top: 8px;
  border: 1px solid black;
  height: 27px;
  z-index: 1;
}

.telcos_tipo_trabajo_border_blue label.title {
  font-size: 15px;
  color: #305496;
  font-weight: 400;
}

.telcos_tipo_trabajo_border_blue {
  border: 1px solid #305496;
  z-index: 1;
  padding-top: 5px;
}

.telcos-h-50-font-10 {
  height: 25px;
  font-size: 10px;
}

.telcos-w-100 {
  width: 100px;
}

.telcos-align-left {
  display: flex;
  justify-content: flex-start;
}

.telcos-align-left textarea {
  resize: none !important;
}

.telcos-tipo-trabajo-general {
  margin-left: 20px;
  display: flex;
  flex-wrap: wrap;
  /* Espacio entre los elementos, ajustable */
}

.inicio_tipo_trabajo {
  /* Ancho del 50% sin espacio entre los elementos */
  box-sizing: border-box;
  /* Asegura que el borde y el padding se incluyan en el ancho */
  margin: 0;
  /* Elimina el margen entre los elementos */
  padding: 0;
  /* Elimina cualquier padding adicional */
}

/* ESTILOS FORMATOS TABLAS */

.tabla-trabajadores {
  letter-spacing: 1.5px;
}

.tabla-trabajadores th {
  border: 2px solid white;
  height: 100px;
}

.tabla-trabajadores td {
  border: 1px solid black;
  height: 30px;
}

.border-white {
  border-bottom: 2px solid white !important;
  border-top: 1px solid transparent !important;
}

.bg-telcos {
  background-color: #23266a;
  font-family: Arial, sans-serif;
  /* Arial como fuente principal, sans-serif como fuente secundaria */
  font-size: 10.67px;
  /* Tamaño de fuente de 8 píxeles */
  color: white;
  padding: 5px;
  text-align: center;
}

.bg-telcos p {
  color: white !important;
  font-size: 12px;
  padding: 0px 30px 0px 30px;
}
.bg-telcos-gray {
  background-color: #808080;
  font-family: Arial, sans-serif;
  /* Arial como fuente principal, sans-serif como fuente secundaria */
  font-size: 10.67px;
  /* Tamaño de fuente de 8 píxeles */
  color: white;
  padding: 5px;
  text-align: center;
}

.bg-telcos-gray p {
  color: white !important;
  font-size: 12px;
  padding: 0px 30px 0px 30px;
}

.bg-telcos-gray {
  background-color: #aaaaae;
  font-family: Arial, sans-serif;
  /* Arial como fuente principal, sans-serif como fuente secundaria */
  font-size: 10.67px;
  /* Tamaño de fuente de 8 píxeles */
  color: white;
  padding: 5px;
  text-align: center;
}

.rotate {
  color: white;
  font-size: 10px;
  font-weight: 900;
  margin-top: 10%;
  margin-left: 10%;
  height: 60px;
  width: 100px;
  max-width: 100px;
  transform: rotate(-90deg);
}

td.selected {
  position: relative;
  text-align: center;
  vertical-align: middle;
  padding: 0;
}

td.selected::before {
  content: "✔";
  font-size: 24px;
  /* Ajusta el tamaño según sea necesario */
  color: black;
  /* Color de la X */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

div.selected {
  position: relative;
  text-align: center;
  vertical-align: middle;
  padding: 0;
}

div.selected::before {
  content: "✔";
  font-size: 24px;
  /* Ajusta el tamaño según sea necesario */
  color: rgba(0, 0, 0, 0.685);
  /* Color de la X */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.telcos-blue-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

.telcos-blue-table th,
.telcos-blue-table td {
  border: 1px solid #305496;
  padding: 2px;
  color: #305496;
}

.telcos-blue-color {
  font-weight: 900;
}

.telcos-back-blue {
  background: #305496;
  text-align: center;
}

.telcos-back-blue p {
  color: white;
}

@media (max-width: 800px) {
  .telcos-tipo-trabajo-general {
    widows: 100%;
    overflow: scroll;
  }

  .telcos-align-left {
    flex-direction: column;
  }

  .inicio_tipo_trabajo {
    flex: 100%;
    width: 600px;
  }

  .inicio_tipo_trabajo .hr {
    position: relative !important;
  }

  .telcos-mt-09 {
    margin-top: 3% !important;
  }
}

.platform-title {
  text-align: center;
  font-size: 32px;
  font-weight: bold;
  color: #d9534f;
  /* Rojo suave para resaltar el título */
  margin-bottom: 30px;
}

.role-card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  justify-content: center;
}

.role-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.role-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.role-header {
  background-color: #4a90e2;
  padding: 20px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.role-icon {
  font-size: 36px;
  color: #ffffff;
}

.role-body {
  padding: 20px;
  flex-grow: 1;
}

.role-title {
  font-size: 20px;
  color: #333;
  font-weight: bold;
  margin: 10px 0;
}

.role-description {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}

.role-link {
  color: #4a90e2;
  font-weight: bold;
  text-decoration: none;
  transition: color 0.3s ease;
}

.role-link:hover {
  color: #357ab8;
}

[rel="next"] svg {
  width: 10px;
}
[rel="prev"] svg {
  width: 10px;
}

svg.w-5.h-5 {
  width: 10px;
}

span[aria-current="page"] {
  color: #201f49;
}

[role="navigation"] {
  margin-top: 5%;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  /* Permite que las etiquetas salten de línea si no caben */
  gap: 16px;
  /* Espaciado horizontal entre etiquetas */
  font-family: Arial, sans-serif;
}

.tag {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Espaciado entre el cuadro de color y el texto */
}

.color-box {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  /* Bordes redondeados */
  display: inline-block;
}

.tag-label {
  font-size: 14px;
  color: #333;
  /* Color del texto */
}

/* Ajustes para pantallas pequeñas */

.input-bx-telcos {
  position: relative;
  width: 300px;
}

.input-bx-telcos input {
  width: 100%;
  padding: 10px;
  border: 2px solid #7f8fa6;
  border-radius: 5px;
  outline: none;
  font-size: 1rem;
  transition: 0.6s;
}

.input-bx-telcos span {
  position: absolute;
  left: 0;
  padding: 10px;
  font-size: 0.8rem;
  color: #7f8fa6;
  text-transform: uppercase;
  pointer-events: none;
  transition: 0.6s;
}

.input-bx-telcos input:focus ~ span,
.input-bx-telcos input:not(:placeholder-shown) ~ span {
  color: #353872;
  transform: translateX(10px) translateY(-7px);
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0 10px;
  background: #fff;
  letter-spacing: 0.1rem;
}

/* formulario por pasos */
.step_telcos {
  display: none;
}

.step_telcos.active {
  display: block;
}

.step_telcos-buttons {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.step_telcos-header {
  margin-bottom: 20px;
  font-size: 1rem;
  font-weight: bold;
  color: #3742fa;
}

.form-label {
  font-weight: bold;
}

.form-control {
  border-radius: 0.25rem;
  border: 1px solid #ced4da;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
}

.step_telcos-indicator {
  font-size: 1rem;
  color: #6c757d;
}

.step_telcos-nav {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  border-bottom: 1px solid #e9ecef;
  padding-bottom: 10px;
  flex-wrap: wrap;
}

.step_telcos-nav .step_telcos-item {
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  color: #6c757d;
  padding: 10px 20px;
  cursor: pointer;
  flex: 1;
  text-align: center;
  position: relative;
  justify-content: center;
}

.step_telcos-nav .step_telcos-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 50%;
  width: 1px;
  background-color: #e9ecef;
}

.step_telcos-nav .step_telcos-item.active {
  font-weight: bold;
  color: #007bff;
  border-bottom: 2px solid #007bff;
}

.step_telcos-nav .step_telcos-item i {
  margin-right: 10px;
}

#prevBtn.hidden {
  display: none;
}

.textarea-telcos {
  border-color: #3742fa;
  width: 200%;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .step_telcos-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .step_telcos-nav {
    flex-direction: column;
    align-items: stretch;
  }
  .textarea-telcos {
    width: 100% !important;
  }
  .step_telcos-nav .step_telcos-item {
    justify-content: flex-start;
    padding: 10px;
  }

  .step_telcos-nav .step_telcos-item:not(:last-child)::after {
    display: none;
  }
}

.button13 {
  position: relative;
  margin: 0;
  padding: 0.8em 1em;
  outline: none;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: none;
  text-transform: uppercase;
  background-color: #153747;
  border-radius: 10px;
  color: #fff !important;
  font-weight: 300;
  font-size: 18px;
  font-family: inherit;
  z-index: 0;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
}

.button13:hover {
  animation: sh0 0.5s ease-in-out both;
}

@keyframes sh0 {
  0% {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }

  25% {
    transform: rotate(7deg) translate3d(0, 0, 0);
  }

  50% {
    transform: rotate(-7deg) translate3d(0, 0, 0);
  }

  75% {
    transform: rotate(1deg) translate3d(0, 0, 0);
  }

  100% {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }
}

.button13:hover span {
  animation: storm 0.7s ease-in-out both;
  animation-delay: 0.06s;
}

.button13::before,
.button13::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1),
    opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
  z-index: -1;
  transform: translate(100%, -25%) translate3d(0, 0, 0);
}

.button13:hover::before,
.button13:hover::after {
  opacity: 0.15;
  transition: transform 0.2s cubic-bezier(0.02, 0.01, 0.47, 1),
    opacity 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
}

.button13:hover::before {
  transform: translate3d(50%, 0, 0) scale(0.9);
}

.button13:hover::after {
  transform: translate(50%, 0) scale(1.1);
}

/* botones con tooltip */
.telcos_botones1 {
  display: flex;
  text-align: left !important;
}

.telcos_botones1 .icon-content {
  margin: 0 10px;
  position: relative;
}

.telcos_botones1 .icon-content .tooltip {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  padding: 6px 10px;
  border-radius: 15px;
  opacity: 0;
  visibility: hidden;
  font-size: 14px;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.telcos_botones1 .icon-content:hover .tooltip {
  opacity: 1;
  visibility: visible;
  top: -50px;
}

.telcos_botones1 .icon-content a {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 20%;
  color: #4d4d4d;
  background-color: #456777 !important;
  transition: all 0.3s ease-in-out;
}

.telcos_botones1 .icon-content a:hover {
  box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 50%);
}

.telcos_botones1 .icon-content a:hover {
  color: white;
}

.telcos_botones1 .icon-content a .filled {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: #000;
  transition: all 0.3s ease-in-out;
}

.telcos_botones1 .icon-content a:hover .filled {
  height: 100%;
}

.telcos_botones1 .icon-content a:hover i {
  color: white;
}

.telcos_botones1 .icon-content i {
  font-size: 1.5rem; /* Increase the icon size */
}

.telcos_botones1 .icon-content a[data-social="create"] .filled,
.telcos_botones1 .icon-content a[data-social="create"] ~ .tooltip {
  background-color: #1db954;
}

.telcos_botones1 .icon-content a[data-social="delete"] .filled,
.telcos_botones1 .icon-content a[data-social="delete"] ~ .tooltip {
  background-color: #bd081c;
}

.telcos_botones1 .icon-content a[data-social="read"] .filled,
.telcos_botones1 .icon-content a[data-social="read"] ~ .tooltip {
  background-color: #ea4c89;
}

.telcos_botones1 .icon-content a[data-social="view"] .filled,
.telcos_botones1 .icon-content a[data-social="view"] ~ .tooltip {
  background-color: #0088cc;
}

.telcos_animacion_blink {
  animation: grow-shrink 2s infinite;
}
@keyframes grow-shrink {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}
/* carrusel modal */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: #fc185a;
  border-radius: 50%;
  padding: 10px;
}
.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
  background-color: #990a32;
}

.carousel-control-prev,
.carousel-control-next {
  width: 5%;
}

.carousel-control-prev {
  left: -4%;
}

.carousel-control-next {
  right: -4%;
}
/* barra scroll */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #bbe1fa;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #3282b8, #0f4c75);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #1b6ca8, #0a3d62);
}

.button_proccess {
  position: relative;
  margin: 0;
  padding: 0.8em 1em;
  outline: none;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: none;
  text-transform: uppercase;
  background-color: #187abb;
  border-radius: 10px;
  color: #fff !important;
  font-weight: 300;
  font-size: 18px;
  font-family: inherit;
  z-index: 0;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
}

.button_proccess:hover {
  animation: sh0 0.5s ease-in-out both;
}

@keyframes sh0 {
  0% {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }

  25% {
    transform: rotate(7deg) translate3d(0, 0, 0);
  }

  50% {
    transform: rotate(-7deg) translate3d(0, 0, 0);
  }

  75% {
    transform: rotate(1deg) translate3d(0, 0, 0);
  }

  100% {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }
}

.button_proccess:hover span {
  animation: storm 0.7s ease-in-out both;
  animation-delay: 0.06s;
}

.button_proccess::before,
.button_proccess::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1),
    opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
  z-index: -1;
  transform: translate(100%, -25%) translate3d(0, 0, 0);
}

.button_proccess:hover::before,
.button_proccess:hover::after {
  opacity: 0.15;
  transition: transform 0.2s cubic-bezier(0.02, 0.01, 0.47, 1),
    opacity 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
}

.button_proccess:hover::before {
  transform: translate3d(50%, 0, 0) scale(0.9);
}

.button_proccess:hover::after {
  transform: translate(50%, 0) scale(1.1);
}

.folder-tree-wrapper {
  background-color: #fff;
  width: 220px;
  min-height: 260px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.11);
  margin-left: 20px;
}

.folder-tree {
  list-style: none;
  cursor: pointer;
  padding-left: 20px;
}

.folder-tree li {
  margin-bottom: 10px;
  font-size: 14px;
  transition: all 0.4s ease;
  position: relative;
  color: black;
}

.folder-tree li:hover {
}

.folder-tree li i {
  color: rgb(242, 176, 53);
}

.folder-tree li ul {
  padding-left: 10px;
  padding-top: 8px;
}

.folder-tree ul {
  display: none;
  position: relative;
}

.folder-tree ul:before {
  position: absolute;
  content: "";
  left: -10px;
  top: 0;
  width: 2px;
  height: 100%;
  background-color: transparent;
  border-left: dashed 1px #c2c2c2;
  border-bottom: dashed 1px #c2c2c2;
}

.folder-tree li ul li {
  display: block;
  margin-bottom: 8px;
}

.folder-tree .arrow {
  position: absolute;
  top: 4px;
  left: -14px;
  width: 8px;
  height: 8px;
  transition: all 0.4s ease;
  transform: rotate(-90deg);
}

.folder-tree .arrow i {
  color: #595959;
  transition: all 0.4s ease;
}

.folder-tree .arrow:hover i {
  color: #292929;
}

.folder-tree li.expanded > ul {
  display: block;
}

.folder-tree li.expanded > .arrow {
  transform: rotate(0deg);
}

.container2 {
  --transition: 350ms;
  --folder-W: 120px;
  --folder-H: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 10px;
  background: linear-gradient(135deg, #6dd5ed, #2193b0);
  border-radius: 15px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  height: calc(var(--folder-H) * 1.7);
  position: relative;
}

.folder {
  position: absolute;
  top: -20px;
  left: calc(50% - 60px);
  animation: float 2.5s infinite ease-in-out;
  transition: transform var(--transition) ease;
}

.folder:hover {
  transform: scale(1.05);
}

.folder .front-side,
.folder .back-side {
  position: absolute;
  transition: transform var(--transition);
  transform-origin: bottom center;
}

.folder .back-side::before,
.folder .back-side::after {
  content: "";
  display: block;
  background-color: white;
  opacity: 0.5;
  z-index: 0;
  width: var(--folder-W);
  height: var(--folder-H);
  position: absolute;
  transform-origin: bottom center;
  border-radius: 15px;
  transition: transform 350ms;
  z-index: 0;
}

.container2:hover .back-side::before {
  transform: rotateX(-5deg) skewX(5deg);
}

.container2:hover .back-side::after {
  transform: rotateX(-15deg) skewX(12deg);
}

.folder .front-side {
  z-index: 1;
}

.container2:hover .front-side {
  transform: rotateX(-40deg) skewX(15deg);
}

.folder .tip {
  background: linear-gradient(135deg, #ff9a56, #ff6f56);
  width: 80px;
  height: 20px;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  position: absolute;
  top: -10px;
  z-index: 2;
}

.folder .cover {
  background: linear-gradient(135deg, #ffe563, #ffc663);
  width: var(--folder-W);
  height: var(--folder-H);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

.custom-file-upload {
  font-size: 1.1em;
  color: #ffffff;
  text-align: center;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: background var(--transition) ease;
  display: inline-block;
  width: 100%;
  padding: 10px 35px;
  position: relative;
}

.custom-file-upload:hover {
  background: rgba(255, 255, 255, 0.4);
}

.custom-file-upload input[type="file"] {
  display: none;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0px);
  }
}
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  width: 160px;
  height: 100px;
  margin-left: -80px;
  margin-top: -50px;
  border-radius: 5px;
  background: #1e3f57;
  animation: dot1_ 3s cubic-bezier(0.55, 0.3, 0.24, 0.99) infinite;
}

.loader:nth-child(2) {
  z-index: 11;
  width: 150px;
  height: 90px;
  margin-top: -45px;
  margin-left: -75px;
  border-radius: 3px;
  background: #3c517d;
  animation-name: dot2_;
}

.loader:nth-child(3) {
  z-index: 12;
  width: 40px;
  height: 20px;
  margin-top: 50px;
  margin-left: -20px;
  border-radius: 0 0 5px 5px;
  background: #6bb2cd;
  animation-name: dot3_;
}

@keyframes dot1_ {
  3%,
  97% {
    width: 160px;
    height: 100px;
    margin-top: -50px;
    margin-left: -80px;
  }

  30%,
  36% {
    width: 80px;
    height: 120px;
    margin-top: -60px;
    margin-left: -40px;
  }

  63%,
  69% {
    width: 40px;
    height: 80px;
    margin-top: -40px;
    margin-left: -20px;
  }
}

@keyframes dot2_ {
  3%,
  97% {
    height: 90px;
    width: 150px;
    margin-left: -75px;
    margin-top: -45px;
  }

  30%,
  36% {
    width: 70px;
    height: 96px;
    margin-left: -35px;
    margin-top: -48px;
  }

  63%,
  69% {
    width: 32px;
    height: 60px;
    margin-left: -16px;
    margin-top: -30px;
  }
}

@keyframes dot3_ {
  3%,
  97% {
    height: 20px;
    width: 40px;
    margin-left: -20px;
    margin-top: 50px;
  }

  30%,
  36% {
    width: 8px;
    height: 8px;
    margin-left: -5px;
    margin-top: 49px;
    border-radius: 8px;
  }

  63%,
  69% {
    width: 16px;
    height: 4px;
    margin-left: -8px;
    margin-top: -37px;
    border-radius: 10px;
  }
}

#content {
  display: none;
  color: black;
}

.hidden {
  display: none;
}

#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* formlario altutas  */
.tabla_alturas {
  border: 2px solid #000000;
  width: auto;
  /* Allows the table to shrink dynamically */
  max-width: 1000px;
  /* Limits the table width on larger screens */
  margin: 0 auto;
  /* Centers the table */
}

.tabla_alturas th,
.tabla_alturas td {
  overflow: hidden;
  /* Hides overflowing text */
  text-overflow: ellipsis;
  /* Adds ellipsis for overflowing text */
  white-space: normal;
  /* Allows text wrapping */
  word-wrap: break-word;
  /* Breaks long words */
  text-align: center;
  /* Centers text */
}

.tabla_alturas th {
  background-color: #adb8bd;
  color: #000;
  border: 2px solid #000000;
}

.tabla_alturas td {
  background-color: #ffffff;
  border: 2px solid #000000;
}

@media (max-width: 768px) {
  .tabla_alturas th,
  .tabla_alturas td {
    font-size: 14px;
  }
}

.form-check-input {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #007bff; /* Change the color of the checkbox */
  border: 2px solid #adb8bd;
  border-radius: 4px;
}

.form-check-input:checked {
  background-color: #007bff;
  border-color: #0056b3;
}

.form-check-input:hover {
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* boton de descarga */
.telcos-button-descargar {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

.label {
  background-color: transparent;
  border: 2px solid #0a3d62;
  display: flex;
  align-items: center;
  border-radius: 50px;
  width: 160px;
  cursor: pointer;
  transition: all 0.4s ease;
  padding: 5px;
  position: relative;
}

.label::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  width: 8px;
  height: 8px;
  transition: all 0.4s ease;
  border-radius: 100%;
  margin: auto;
  opacity: 0;
  visibility: hidden;
}

.label .input {
  display: none;
}

.label .title {
  font-size: 17px;
  color: #000000;
  transition: all 0.4s ease;
  position: absolute;
  right: 18px;
  bottom: 2px !important;
  text-align: center;
}

.label .title:last-child {
  opacity: 0;
  visibility: hidden;
}

.label .circle {
  height: 45px;
  width: 45px;
  border-radius: 50%;
  background-color: #0a3d62;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.4s ease;
  position: relative;
  box-shadow: 0 0 0 0 rgb(255, 255, 255);
  overflow: hidden;
}

.label .circle .icon {
  color: #fff;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
}

.label .circle .square {
  aspect-ratio: 1;
  width: 15px;
  border-radius: 2px;
  background-color: #fff;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
}

.label .circle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background-color: #0a3d62;
  width: 100%;
  height: 0;
  transition: all 0.4s ease;
}

.label:has(.input:checked) {
  width: 57px;
  animation: installed 0.4s ease 3.5s forwards;
}

.label:has(.input:checked)::before {
  animation: rotate 3s ease-in-out 0.4s forwards;
}

.label .input:checked + .circle {
  animation: pulse 1s forwards, circleDelete 0.2s ease 3.5s forwards;
  rotate: 180deg;
}

.label .input:checked + .circle::before {
  animation: installing 3s ease-in-out forwards;
}

.label .input:checked + .circle .icon {
  opacity: 0;
  visibility: hidden;
}

.label .input:checked ~ .circle .square {
  opacity: 1;
  visibility: visible;
}

.label .input:checked ~ .title {
  opacity: 0;
  visibility: hidden;
}

.label .input:checked ~ .title:last-child {
  animation: showInstalledMessage 0.4s ease 3.5s forwards;
}

@keyframes pulse {
  0% {
    scale: 0.95;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  70% {
    scale: 1;
    box-shadow: 0 0 0 16px rgba(255, 255, 255, 0);
  }
  100% {
    scale: 0.95;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

@keyframes installing {
  from {
    height: 0;
  }
  to {
    height: 100%;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(-90deg) translate(27px) rotate(0);
    opacity: 1;
    visibility: visible;
  }
  99% {
    transform: rotate(270deg) translate(27px) rotate(270deg);
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes installed {
  100% {
    width: 150px;
    border-color: rgb(35, 174, 35);
  }
}

@keyframes circleDelete {
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes showInstalledMessage {
  100% {
    opacity: 1;
    visibility: visible;
    right: 56px;
  }
}

/* checkbox telcos  */
.telcos_checkbox-wrapper input[type="checkbox"] {
  visibility: hidden;
  display: none;
}

.telcos_checkbox-wrapper *,
.telcos_checkbox-wrapper ::after,
.telcos_checkbox-wrapper ::before {
  box-sizing: border-box;
  user-select: none;
}

.telcos_checkbox-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.telcos_checkbox-wrapper .telcos_label {
  background-color: transparent;
  border: 1px solid #0a3d62;
  display: flex;
  align-items: center;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.4s ease;
  padding: 5px;
  position: relative;
  width: auto;
  min-width: 160px;
}

.telcos_checkbox-wrapper .telcos_label span {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1;
}

.telcos_checkbox-wrapper .telcos_label svg {
  width: 45px !important;
  height: 45px !important;
  flex-shrink: 0;
}

.telcos_checkbox-wrapper .telcos_path1 {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: 0.5s stroke-dashoffset;
  opacity: 0;
}

.telcos_checkbox-wrapper .telcos_check:checked + .telcos_label svg g path {
  stroke-dashoffset: 0;
  opacity: 1;
}

/* City and Cargo Wrapper */
.telcos_city-cargo-wrapper {
  border: 1px solid #ddd;
  border-radius: 8px;
  border: 2px solid #0a3d62;
  padding: 16px;
  margin-bottom: 16px;
  background-color: #f9f9f9;
}

.telcos_cargo-wrapper {
  margin-top: 16px;
  border: 1px solid #ddd;
  border: 1px solid #0a3d62;
  border-radius: 8px;
  padding: 16px;
  background-color: #f9f9f9;
  transition: background-color 0.3s ease;
}

.telcos_cargo-wrapper:hover {
  background-color: #f1f1f1;
}
.telcos_title {
  font-size: 1.8rem;
  font-weight: bold;
  color: #333;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.footer {
  height: 4rem !important;
}

.floating-button {
  position: fixed;
  bottom: 70px; /* Ajustado para estar un poco más arriba */
  right: 35px;
  width: 50px;
  height: 50px;
  background-color: #181f4a;
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-size: 20px;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.floating-button span {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 60px;
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}

.floating-button:hover span {
  visibility: visible;
  opacity: 1;
}
/* Solo en pantallas pequeñas */
@media (max-width: 576px) {
  .floating-button {
    right: 20px;
    bottom: 20px; /* Más abajo solo en móviles */
  }
}

.form-group {
    margin-bottom: 15px;
}

.required {
    color: red;
    font-size: 18px;
}

.column {
    flex: 1;
    padding: 15px;
}

label {
    font-weight: bold;
    color: #555;
}

.imagen {
    width: 50% !important;
    height: 80%;
}

.button12 {
    position: relative;
    font-size: 1.2em;
    padding: 0.7em 1.4em;
    background-color: #153747;
    text-decoration: none;
    border: none;
    border-radius: 0.5em;
    color: #fff !important;
    box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 0, 0.3);
}

.button12::before {
    position: absolute;
    content: '';
    height: 0;
    width: 0;
    top: 0;
    left: 0;
    background: linear-gradient(135deg, rgba(33, 33, 33, 1) 0%, rgba(33, 33, 33, 1) 50%, #153747, #3c84a5 60%);
    border-radius: 0 0 0.5em 0;
    box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.3);
    transition: 0.3s;
}

.button12:hover::before {
    width: 1.6em;
    height: 1.6em;
}

.button12:active {
    box-shadow: 0.2em 0.2em 0.3em rgba(0, 0, 0, 0.3);
    transform: translate(0.1em, 0.1em);
}

.button2 {
    border: none;
    width: 15em;
    height: 5em;
    border-radius: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    background: #153747;
    cursor: pointer;
    transition: all 450ms ease-in-out;
}

.sparkle {
    fill: #AAAAAA;
    transition: all 800ms ease;
}

.text {
    font-weight: 600;
    color: #AAAAAA;
    font-size: medium;
}

.button2:hover {
    background: linear-gradient(0deg, #548ea8, #153747);
    box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4),
        inset 0px -4px 0px 0px rgba(0, 0, 0, 0.2),
        0px 0px 0px 4px rgba(255, 255, 255, 0.2),
        0px 0px 180px 0px #013750;
    transform: translateY(-2px);
}

.button2:hover .text {
    color: white;
}

.button2:hover .sparkle {
    fill: white;
    transform: scale(1.2);
}

@media (max-width: 768px) {
    .imagen {
        width: 80% !important;
        height: auto;
        display: block;
        /* Hace que las imágenes se apilen una debajo de otra */
        margin: 0 auto;
        /* Centra las imágenes */
    }
}

@media (max-width: 480px) {
    .imagen {
        width: 100% !important;
        height: auto;
        display: block;
        /* Hace que las imágenes se apilen una debajo de otra */
        margin: 0 auto;
        /* Centra las imágenes */
    }
}

.dataTables_paginate {
  margin-top: 10px;
  text-align: right;
}

.dataTables_paginate .paginate_button.current {
  background: #007bff;
  color: #fff;
  border: none;
}
.dataTables_length label,
.dataTables_filter label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-weight: 500;
    font-size: 0.85rem;
    margin-bottom: 0;
}

.dataTables_length select,
.dataTables_filter input {
    margin-top: 0.15rem !important;
    height: calc(1.5em + 0.75rem + 2px); /* igualar alto Bootstrap input */
}

.dataTables_filter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.dataTables_wrapper .dt-buttons {
  display: flex;
  flex-wrap: wrap; 
  gap: 10px; 
  align-items: center; 
  margin-bottom: 0;
  margin-left: 15px;
  margin-top: 5px;
}
.dt-buttons button,
.dt-buttons .dropdown-item {
  background-color: #2c2c40;
  color: #fff;
  border: 1px solid #444;
  padding: 8px 15px; 
  border-radius: 5px;
  font-size: 14px; 
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
  display: inline-block; 
  width: auto; 
}

.dt-buttons button:hover,
.dt-buttons .dropdown-item:hover {
  background-color: #373757;
  transform: scale(1.05);
}

.dt-buttons button:focus,
.dt-buttons .dropdown-item:focus {
  outline: none;
}

.dt-buttons .dropdown-item {
  background-color: #2c2c40;
  color: #fff;
  border: 1px solid #444;
  padding: 8px 15px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.dt-buttons .dropdown-item:hover {
  background-color: #373757;
}

.dt-buttons .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1050;
  display: none;
  flex-direction: column;
  background-color: #2c2c40;
  border: 1px solid #444;
  border-radius: 5px;
  padding: 5px 0;
}

.dt-buttons .dropdown-item:focus + .dropdown-menu,
.dt-buttons .dropdown-item:hover + .dropdown-menu {
  display: flex;
}

.dt-buttons .dropdown-menu .dropdown-item {
  padding: 5px 10px;
  font-size: 12px;
  color: #fff;
}

.dt-buttons .dropdown-menu .dropdown-item:hover {
  background-color: #444;
}

.dataTables_wrapper .dt-buttons .btn,
.dataTables_wrapper .dt-buttons .dropdown-item {
  margin: 0;
}

.selectTable {
  background-color: #2c2c40;
  color: #fff;
  padding: 5px 15px;
  border-radius: 5px;
  font-size: 14px;
  border: 1px solid #444;
  cursor: pointer;
  transition: background-color 0.3s;
}

.selectTable:hover {
  background-color: #373757;
}

.selectTable:focus {
  outline: none;
}

.dataTables_wrapper .dt-buttons .dropdown-item {
  position: relative;
}

.dataTables_wrapper .dt-buttons .dropdown-item:hover::after {
  content: attr(title);
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1000;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease-in-out;
}

.dataTables_wrapper .dt-buttons .dropdown-item:hover {
  cursor: pointer;
}

.dataTables_wrapper .dt-buttons .dropdown-item::after {
  opacity: 0;
  visibility: hidden;
}

.small-text {
  font-size: 10px;
  line-height: 1.2;
  color: #b6b0b0;
}

span.code {
  font-weight: bold;
}

span.name {
  margin-left: 5px;
}

.round-btn {
  border-radius: 35%;
  padding: 10px;
}

.nav-item {
  margin-bottom: 5px;
}

body a,
body #test {
  color: #a7acb1;
}

.nav-link {
  display: flex;
  align-items: center;
  color: #ecf0f1;
  padding: 10px 15px;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.parent-icon {
  width: 30px;
  text-align: center;
  margin-right: 10px;
}

.menu-title {
  flex-grow: 1;
}

.menu-label {
  color: #bdc3c7;
  font-weight: bold;
  padding: 10px 15px;
  text-transform: uppercase;
  font-size: 14px;
}

.dataTables_wrapper table.dataTable th,
.dataTables_wrapper table.dataTable td {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis; 
  max-width: 200px; 
}

.dataTables_wrapper table.dataTable th:hover,
.dataTables_wrapper table.dataTable td:hover {
  position: relative;
}

.dataTables_wrapper table.dataTable th:hover::after,
.dataTables_wrapper table.dataTable td:hover::after {
  content: attr(title); 
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff; 
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1000;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease-in-out;
}

.dataTables_wrapper table.dataTable th::after,
.dataTables_wrapper table.dataTable td::after {
  opacity: 0;
  visibility: hidden;
}

.dataTables_wrapper table.dataTable th,
.dataTables_wrapper table.dataTable td {
  cursor: pointer;
}

/* Adjust tooltip behavior to show on click */
.dataTables_wrapper table.dataTable td[title] {
  position: relative;
  cursor: pointer;
}

.dataTables_wrapper table.dataTable td[title]:focus::after,
.dataTables_wrapper table.dataTable td[title]:focus::before {
  opacity: 1;
  visibility: visible;
}

.dataTables_wrapper table.dataTable td[title]::after,
.dataTables_wrapper table.dataTable td[title]::before {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out;
}

.dataTables_wrapper table.dataTable td[title]:focus::after {
  content: attr(title);
  position: absolute;
  top: -30px; 
  left: 50%;
  transform: translateX(-50%);
  background-color: black; 
  color: white; 
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1000;
}

.dataTables_wrapper table.dataTable td[title]:focus::before {
  content: " ";
  position: absolute;
  top: -10px; 
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

.dt-buttons-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.dt-buttons .btn-pdf {
  background-color: #cc8780; 
  color: #000; 
}

.dt-buttons .btn-excel {
  background-color: #82bb99;
  color: #000; 
}

.dt-buttons .btn-csv {
  background-color: #cfc085; 
  color: #000;
}

.dt-buttons .btn-print {
  background-color: #86b0cc; 
  color: #000;
}

.dt-buttons .btn-page-length {
  background-color: #88c4c4;
  color: #000;
}

.dt-buttons .btn-colvis {
  background-color: #9b79aa; 
  color: #000; 
}

.dt-buttons button:hover {
  opacity: 0.8;
}

.dt-buttons .btn-page-length + .dropdown-menu,
.dt-buttons .btn-colvis + .dropdown-menu {
  background-color: inherit; 
  border: 1px solid #444; 
  border-radius: 8px;
  color: #000; 
  padding: 5px 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.dt-buttons .btn-page-length + .dropdown-menu .dropdown-item,
.dt-buttons .btn-colvis + .dropdown-menu .dropdown-item {
  background-color: transparent;
  color: #000;
  padding: 5px 10px;
  font-size: 14px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.dt-buttons .btn-page-length + .dropdown-menu .dropdown-item:hover,
.dt-buttons .btn-colvis + .dropdown-menu .dropdown-item:hover {
  background-color: rgba(0, 0, 0, 0.1);
  color: #000;
}

div.dt-button-collection {
  position: absolute !important;
  top: -200px !important;
  left: 50% !important;
  transform: translateX(-50%);
  background-color: #2c2c40;
  border: 1px solid #444;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  width: max-content;
  z-index: 9999;
}

div.dt-button-collection .dt-button {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  background: none;
  border: none;
  padding: 5px 10px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

div.dt-button-collection .dt-button:before {
  content: "☑️";
  margin-right: 8px;
  visibility: hidden;
}

div.dt-button-collection .dt-button.active:before {
  visibility: visible;
}

.swal2-dark {
  background-color: #2c2c40;
  color: #fff;
}
.swal2-dark .swal2-title {
  color: #fff;
}
.swal2-dark .swal2-confirm {
  background-color: #4c8aa0;
  color: #fff;
}
td.dtr-control::before {
  margin-right: 8px !important;
  vertical-align: middle;
}