:root {
  --color-principal-red: #db0032;
  --color-principal-orange: #ff6c0e;
  --color-principal-yellow: #ffd600;
  --color-principal-blue: #19d3c5;
  --color-secondary-blue: #236c67;
  --color-screen-red: #ab0033;
  --color-screen-orange: #db6015;
  --color-screen-yellow: #ffc629;
}

.card-login {
  border: 1px solid var(--color-principal-red) !important;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

.link-login {
  color: var(--color-principal-red) !important;
}

.link-login:hover {
  color: #131825 !important;
}

.btn-App {
  background-color: white;
  border: 1px solid var(--color-principal-red) !important;
  color: var(--color-principal-red);
}

.btn-App:hover {
  background-color: var(--color-principal-red);
  border: 1px solid white !important;
  color: white;
}

.btn-rejected:hover {
  background-color: white;
  border: 1px solid var(--color-principal-red) !important;
  color: var(--color-principal-red) !important;
}
.btn-rejected {
  background-color: var(--color-principal-red);
  border: 1px solid white !important;
  color: white !important;
}
.btn-available:hover {
  background-color: white;
  border: 1px solid #3aef7c !important;
  color: #3aef7c !important;
}
.btn-available {
  background-color: #3aef7c;
  border: 1px solid white !important;
  color: white !important;
}

.btn-available:hover i {
  color: #3aef7c !important;
}
.btn-available i {
  color: white !important;
}

.btn-COM:hover {
  background-color: white !important;
  border: 1px solid var(--color-principal-blue) !important;
  color: var(--color-principal-blue) !important;
}
.btn-COM {
  background-color: var(--color-principal-blue) !important;
  border: 1px solid white !important;
  color: white !important;
}

.btn-create {
  background-color: var(--color-principal-blue);
  border: 1px solid white !important;
  color: white !important;
}

.btn-create .ki-plus-circle {
  color: white;
}

.btn-create:hover {
  background-color: white;
  border: 1px solid var(--color-principal-blue) !important;
  color: var(--color-principal-blue) !important;
}
.btn-create:hover .ki-plus-circle {
  color: var(--color-principal-blue) !important;
}

.btn-edit {
  background-color: var(--color-screen-yellow);
  border: 1px solid white !important;
  color: white !important;
}
.btn-edit:hover {
  background-color: white;
  border: 1px solid var(--color-screen-yellow) !important;
  color: var(--color-screen-yellow) !important;
}

.btn-edit .fa-pen-to-square {
  color: white !important;
}
.btn-edit:hover .fa-pen-to-square {
  color: var(--color-screen-yellow) !important;
}

.btn-delete {
  background-color: var(--color-principal-red);
  border: 1px solid white !important;
  color: white !important;
}
.btn-delete:hover {
  background-color: white;
  border: 1px solid var(--color-principal-red) !important;
  color: var(--color-principal-red) !important;
}

.btn-delete i {
  color: white !important;
}
.btn-delete:hover i {
  color: var(--color-principal-red) !important;
}

.btn-disable {
  background-color: rgb(73, 71, 71);
  border: 1px solid white !important;
  color: white !important;
}
.btn-disable:hover {
  background-color: white;
  border: 1px solid rgb(73, 71, 71) !important;
  color: rgb(73, 71, 71) !important;
}

.btn-disable .fa-ban {
  color: white !important;
}
.btn-disable:hover .fa-ban {
  color: rgb(73, 71, 71) !important;
}

.btn-view {
  background-color: var(--color-principal-blue);
  border: 1px solid white !important;
  color: white !important;
}
.btn-view:hover {
  background-color: white;
  border: 1px solid var(--color-principal-blue) !important;
  color: var(--color-principal-blue) !important;
}

.btn-view i {
  color: white !important;
}
.btn-view:hover i {
  color: var(--color-principal-blue) !important;
}

.btn-search {
  background-color: var(--color-principal-blue);
  border: 1px solid white !important;
  color: white !important;
}
.btn-search:hover {
  background-color: white;
  border: 1px solid var(--color-principal-blue) !important;
  color: var(--color-principal-blue) !important;
}

.btn-clear {
  background-color: var(--color-secondary-blue);
  border: 1px solid white !important;
  color: white !important;
}
.btn-clear:hover {
  background-color: white;
  border: 1px solid var(--color-secondary-blue) !important;
  color: var(--color-secondary-blue) !important;
}

.btn-actions {
  background-color: var(--color-principal-blue);
  border: 1px solid white !important;
  color: white !important;
}
.btn-actions:hover {
  background-color: white;
  border: 1px solid var(--color-principal-blue) !important;
  color: var(--color-principal-blue) !important;
}

.btn-actions i {
  color: white !important;
}
.btn-actions:hover i {
  color: var(--color-principal-blue) !important;
}

.btnAdd {
  background-color: #3aef7c;
  border: 1px solid white !important;
  color: white !important;
}

.btnAdd i {
  color: white !important;
}

.btnAdd:hover {
  background-color: white;
  border: 1px solid #3aef7c !important;
  color: #3aef7c !important;
}

.btnAdd:hover i {
  color: #3aef7c !important;
}

.btnRemove {
  background-color: var(--color-screen-orange) !important;
  border: 1px solid white !important;
  color: white !important;
}

.btnRemove i {
  color: white !important;
}

.btnRemove:hover {
  background-color: white !important;
  border: 1px solid var(--color-screen-orange) !important;
  color: var(--color-screen-orange) !important;
}

.btnRemove:hover i {
  color: var(--color-screen-orange) !important;
}

.btnActiveStatus {
  background-color: #3aef7c;
  border: 1px solid white !important;
  color: white !important;
}

.btnActiveStatus:hover {
  background-color: white;
  border: 1px solid #3aef7c !important;
  color: #3aef7c !important;
}

.btnActiveStatus i {
  color: white !important;
}

.btnActiveStatus:hover i {
  color: #3aef7c !important;
}

.btnInactiveStatus {
  background-color: var(--color-principal-red);
  border: 1px solid white !important;
  color: white !important;
}

.btnInactiveStatus i {
  color: white !important;
}

.btnInactiveStatus:hover i {
  color: var(--color-principal-red) !important;
}

.inp-crea-form {
  border-color: black;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.sel-crea-form {
  border-color: black;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  height: 68%;
}

.send {
  background-color: transparent;
  color: transparent;
  border: none;
}

.whatsappLink.mobile {
  display: none;
}
@media only screen and (max-width: 1024px) {
  .whatsappLink.desktop {
    display: none;
  }
  .whatsappLink.mobile {
    display: inline;
  }
}

input[type="file"] {
  display: none;
}

#label-picture {
  background-color: var(--color-principal-blue);
  color: #ffffff;
  font-size: 15px;
  text-align: center;
  width: 50%;
  padding: 1%;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  cursor: pointer;
}
.image-container {
  position: relative;
  max-width: 100%;
  overflow: hidden;
}

#chosen-img {
  width: 100%;
  height: auto;
  display: block;
}
.acortar {
  max-width: 100px; /* Cambia este valor según lo que desees */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer; /* Cambia el cursor a pointer para indicar que se puede hacer clic */
}

#card-menu {
 
  display: flex;
  align-items: center;
 
}

.contenedor-items {
  background: #F3F5FA;
  box-shadow: 0px 0px 20px rgba(149, 153, 159, .16);
  border-radius: 10px;
  padding: 20px; /* Añadido para espaciado interior */
}

.items {
  display: grid;
  gap: 20px; /* Espaciado entre elementos */
}

.items .item {
  background: #fff;
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr;
  align-items: center;
  padding: 20px;
  border: 2px dashed var(--color-principal-blue);
  border-radius: 10px;
  cursor: pointer;
}



.items .item img {
	width: 70px;
	border-radius: 100%;
	margin-right: 40px;
}

/* ? Clases para los estilos en los diferentes estados del drag and drop */
.items .item.select{
  transform: scale(1.02) rotate(-1deg);
  -webkit-transform: scale(1.02) rotate(-1deg);
  -moz-transform: scale(1.02) rotate(-1deg);
  -ms-transform: scale(1.02) rotate(-1deg);
  -o-transform: scale(1.02) rotate(-1deg);

  box-shadow: 0px 0px 20px rgba(149, 153, 159, .16);
}

.items .item.ghost{
  border: 2px solid var(--color-principal-blue);
}
.items .item.drag{
  opacity: 0;
}
/* ? ------- */