.Txcen {
    text-align: center;
    margin: 5px;
}

.highlight-change {
    background-color: #fff3cd !important;
    transition: background-color 0.5s ease;
}

.btn {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btnDT {
    width: 90px;
}

.btn:hover {
    transform: scale(1.2);
    filter: brightness(1.4);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.47);
}


.opcion1 {
    background-color: #A8CF45;
    color: white;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-radius: 0.5vw;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.opcion1:hover,
.opcion2:hover,
.opcion3:hover {
    transform: scale(1.2);
}

.opcion2 {
    background-color: #dc3545;
    color: white;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-radius: 0.5vw;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.opcion3 {
    background-color: rgb(255, 166, 0);
    color: white;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-radius: 0.5vw;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.opcion1,
.opcion2,
.opcion3 {
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.FiltroFechas {
    width: 200px;
    height: 35px;
    text-align: center;
    font-size: medium;
    font-style: italic;
}

/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */


































.Activo {
    background-color: #A8CF45;
    color: white;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-radius: 0.5vw;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.Suspendido {
    background-color: red;
    color: white;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-radius: 0.5vw;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.SuspendidoO {
    background-color: rgb(255, 166, 0);
    color: white;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-radius: 0.5vw;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.TerceraOpcion {
    background-color: #4581cf;
    color: white;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-radius: 0.5vw;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.Activo:hover,
.Suspendido:hover,
.SuspendidoO:hover,
.TerceraOpcion:hover {
    transform: scale(1.2);
}

.Activo:hover {
    background-color: #7e9b35;
}

.Suspendido:hover {
    background-color: rgb(155, 0, 0);


}

.SuspendidoO:hover {
    background-color: rgb(209, 136, 0);
}

.TerceraOpcion:hover {
    background-color: #2e578d;
}

.EditImg {
    height: 30px;
    width: auto;
    border-radius: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
    cursor: pointer;
}


.EditImg:hover {
    transform: scale(1.4);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.47);
    filter: brightness(2);
}

.InfoImg {
    height: 40px;
    width: auto;
    margin-right: 15px;
    transition: transform 0.3s ease, filter 0.3s ease;
    cursor: pointer;
}


.InfoImg:hover {
    transform: scale(1.4);
    filter: brightness(2);
}

.DeleteImg {
    height: 40px;
    width: auto;
    margin-right: 15px;
    transition: transform 0.3s ease, filter 0.3s ease;
    cursor: pointer;
}


.DeleteImg:hover {
    transform: scale(1.4);
    filter: brightness(1.1);
}

.PrintOrder svg {
    height: 40px;
    width: auto;
    transition: transform 0.3s ease, filter 0.3s ease;
    cursor: pointer;
}


.PrintOrder svg:hover {
    transform: scale(1.4);
    filter: brightness(2);
}

.AddImg {
    height: 40px;
    width: auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.AddImgTxt {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
    cursor: pointer;
}

.AddImgTxt:hover {
    transform: scale(1.2);
    filter: brightness(2);
}

.Titulo-Add {
    display: flex;
    width: 100%;
    height: auto;
    justify-content: space-between;
}



.swal2-container .swal2-html-container {
    width: 100%;
    padding: 10px;
}

.swal-form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    align-items: center;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
}

.swal-form-group-inline {
    display: flex;
    justify-content: space-between;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    gap: 10px;
}

.swal-form-group-inline .swal-form-field {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.swal-form-group label,
.swal-form-group-inline label {
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 500;
}

.swal-form-group select,
.swal-form-group input,
.swal-form-group-inline input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

.DivDivProfImgEdit {
    width: 100%;
    justify-items: center;
}

.DivProfImgEdit {
    height: 150px;
    width: 150px;
}

.ProfileIMGEdit {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 100%;
    border: ridge #4581cf 5px;
}



.zoomOpUn {
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.zoomOpUn:hover {
    transform: scale(1.2);
    filter: brightness(2);
}


.Doc {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.47);
    transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.Doc:hover {
    box-shadow: 0 4px 20px rgb(0, 0, 0);

}

.Ticket {
    height: 30px;
    width: auto;
    transition: transform 0.3s ease, filter 0.3s ease;
    cursor: pointer;
}


.Ticket:hover {
    transform: scale(1.4);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.47));
}