body {
     background-color: #d7d7d7;
 }
.loading-div {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(255, 255, 255); /* Fondo blanco con transparencia */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 9999; /* Asegura que esté por encima de otros elementos */
    }

    .loading-logo {
        width: 150px; /* Ajusta el tamaño del logo según sea necesario */
        margin-bottom: 20px;
    }
 .navbar {
     background-color: #fff;
     color: black;
     font-weight: 500;
 }

 .navbar-brand img {
     width: 150px;
 }

 .line-div {
     background: #F09A00;
     width: 100%;
     height: 5px;
     position: absolute;
     bottom: 0px;
     left: 0px;
     /* box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.27);*/
 }

 .paddingCustom {
     margin-top: 100px !important;
     margin-bottom: 50px !important;
 }

 .btb-ctsm {
     color: #000;
     border-color: #000;
 }

 .toppaddingbuttons {
     padding-top: 0px;
 }

 .CustomBorder {
     margin: 1px;
     border-radius: 10px;
     overflow: hidden;
 }

 .CustomBorder div div div div div {
     background: #ffffff;
 }

 .CustomBorder div div div div div:last-child {
     background: #ebebeb;
     text-align: center;
 }

 .customline {
     border-radius: 1px solid black;
     background: red;
     height: 30px;
 }

 .leftmenu .dropdown-menu {
     left: -20px;
 }

 .perfil {
     width: 30px;
 }

 .btb-ctsm {
     background: #F09A00;
     color: white;
     border: 1px solid #d38700;
 }

 .btb-ctsm:hover {
     background: rgba(255, 164, 0, 0);
     border: 1px solid #F09A00;
     color: #F09A00;
 }

 footer {
     position: fixed;
     bottom: 0px;
     text-align: center;
     background: #F09A00;
     width: 100%;
     height: 40px;
     color: white;
     font-weight: 400;
     vertical-align: middle;
 }

 .fontmystery {
     font-size: 30px;
     border-bottom: 1px solid #818181;
     padding-bottom: 10px;
 }

 table,
 th,
 tr,
 td {
     border: none !important;
 }

 table th {
     font-size: 14px;
     font-weight: 600 !important;
 }

 table {
     background: white;
     border-radius: 10px;
     overflow: hidden;
     margin-top: 10px !important;
 }

 #tb_clientes_filter input {
     border: none;
 }

 #Cliente {
     width: 100%;
     padding: 5px;
     border-radius: 0px;
     border: none;
     border-bottom: 1px solid black;
 }

 /* Estilos para personalizar el scrollbar dentro del SweetAlert2 */

 /* Firefox */
 .swal2-html-container {
     scrollbar-width: thin;
     /* Ancho del scrollbar para Firefox */
     scrollbar-color: #f09a00 #dbdbdb;
     /* Color del scrollbar y del fondo */
     padding: 0px !important;
     margin: 0px !important;
 }

 /* Chrome, Edge, and Safari */
 .swal2-html-container::-webkit-scrollbar {
     width: 8px;
     /* Ancho del scrollbar */
 }

 .swal2-html-container::-webkit-scrollbar-track {
     background: #dbdbdb;
     /* Color del fondo del track */
 }

 .swal2-html-container::-webkit-scrollbar-thumb {
     background-color: #f09a00;
     /* Color de la barra de desplazamiento */
     border-radius: 10px;
     /* Bordes redondeados */
     border: 3px solid #ffffff;
     /* Borde alrededor de la barra de desplazamiento */
 }

 .selected {
     background-color: #dbae4b !important;
     color: black !important;
 }

 .objet-left {
     text-align: left !important;
     align-content: flex-start;
     justify-content: flex-start;

 }

 .objet-left div {
     width: 100%;
     text-align: left;
 }

 .objet-left div label {
     display: block;
     text-align: left;
 }

 .objet-left div label input {
     width: 80%;
     border: none;
     border-bottom: 1px solid grey;
     background: transparent;
 }

 .objet-left div label input:focus {
     width: 80%;
     border: none;
     border-bottom: 1px solid grey;
     background: transparent;
     box-shadow: none;
     border: none !important;
     border-bottom: 1px solid grey !important;
     outline: inherit !important;
 }

 .objet-right div {
     width: 100%;
     text-align: right;
 }

 .tox-notifications-container {
     display: none !important;
 }

 .us-ng button {
     border: none;
     width: 40px;
     height: 40px;
     border-radius: 10px;
     margin: 5px;
     background: #e3e3e3;
     box-shadow: 0px 1px black;
 }

 .us-ng select[multiple] {
     border: none;
     border-radius: 10px;
     background: #f2f2f2;
     padding: 10px;
 }

 .us-ng select[multiple] {
     scrollbar-width: thin;
     /* Ancho del scrollbar para Firefox */
     scrollbar-color: #f09a00 #dbdbdb;
     /* Color del scrollbar y del fondo */
 }

 /* Chrome, Edge, and Safari */
 .us-ng select[multiple]::-webkit-scrollbar {
     width: 8px;
     /* Ancho del scrollbar */
 }

 .us-ng select[multiple]::-webkit-scrollbar-track {
     background: #dbdbdb;
     /* Color del fondo del track */
 }

 .us-ng select[multiple]::-webkit-scrollbar-thumb {
     background-color: #f09a00;
     /* Color de la barra de desplazamiento */
     border-radius: 10px;
     /* Bordes redondeados */
     border: 3px solid #ffffff;
     /* Borde alrededor de la barra de desplazamiento */
 }

 .us-ng select[multiple]:focus {
     border: none;
     outline: none !important;
 }

 @media (max-width: 890px) {
     .swal2-popup {
         width: 95% !important;
         /* Más ancho en dispositivos móviles */
     }
 }



 .banner {
     background-color: #f8f8f8;
     /* Color de fondo del banner */
     color: white;
     /* Color del texto */
     padding: 20px;
     /* Espaciado interno */
     text-align: left;
     /* Alineación del texto */
     position: relative;
     /* Necesario para el posicionamiento absoluto del pseudo-elemento */
 }

 .banner::before {
     content: '';
     /* Necesario para que el pseudo-elemento se muestre */
     position: absolute;
     /* Posicionamiento absoluto respecto al banner */
     height: 3px;
     /* Altura del elemento */
     width: 100%;
     /* Ancho del elemento */
     background: #F09A00;
     /* Color de fondo del elemento */
     left: 0px;
     /* Posición desde la izquierda */
     bottom: 0px;
     /* Posición desde la parte superior */
     border-radius: 0px;
     /* Bordes redondeados (opcional) */
 }

 .banner img {
     width: 10%;
     /* Ajuste del tamaño del logo */
 }

 .login-container {
     display: flex;
     flex: 1;
     /* Toma todo el espacio disponible */
     justify-content: center;
     /* Centrar elementos */
     align-items: stretch;
     /* Alinear verticalmente */
     padding: 20px;
     /* Espaciado interno */
     gap: 20px;
     /* Espacio entre la caja de login y la info */
 }

 .login-box {
     width: 100%;
     /* Ancho total para responsividad */
     max-width: 30%;
     /* Ancho máximo */
     padding: 30px;
     background: #F09A00;
     /* Color de fondo */
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     border-radius: 10px;
     /* Bordes redondeados */
 }

 .info-box {
     width: 100%;
     /* Ancho total para responsividad */
     max-width: 70%;
     /* Ancho máximo */
     padding: 20px;
     background: #e9ecef;
     /* Color de fondo */
     border-radius: 10px;
     /* Bordes redondeados */
 }

 .footer {
     background-color: #343a40;
     /* Color del footer */
     color: white;
     /* Color del texto */
     text-align: center;
     /* Alineación centrada */
     padding: 10px;
     /* Espaciado interno */
 }

 .login-box h2 {
     margin-bottom: 60px;
 }

 /* Estilos para el label flotante */
 .form-group {
     margin-bottom: 0rem;
     padding: 0px;
 }
.form-control:-webkit-autofill {
    background-color: transparent !important;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
    box-shadow: 0 0 0px 1000px transparent inset;
    transition: background-color 5000s ease-in-out 0s;
}
 .form-control {
     padding: 0px 10px;
     font-size: 1rem;
     width: 100%;
     border: none;
     border-bottom: 1px solid grey;
     border-radius: 0px;
 }

 .form-control:focus {
     outline: none;
     box-shadow: none;
     background: transparent;
 }

 .form-label {
     position: relative;
     top: -30px;
     left: 15px;
     font-size: 1rem;
     color: #000000;
     pointer-events: none;
     transition: all 0.3s ease;
     height: 0px;
 }

 /* Cuando el input está enfocado o tiene valor */
 .form-control:focus ~ .form-label,
 .form-control:not(:placeholder-shown) ~ .form-label {
     top: -60px;
     left: 10px;
     font-size: 1rem;
     color: #000000;
 }

 @media (max-width: 768px) {
     .login-container {
         flex-direction: column;
         /* Cambiar a columna en pantallas pequeñas */
         align-items: stretch;
         /* Estirar elementos */
     }

     .login-box,
     .info-box {
         max-width: 100%;
         /* Ancho total en pantallas pequeñas */
     }
 }


 .card {
     margin-bottom: 20px;
     border: none;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     border-radius: 1000px;
     cursor: pointer;
 }

 .card:hover {
     transform: translateY(-10px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
 }

 .card-icon {
     font-size: 30px;
     color: #F09A00;
     margin-bottom: 15px;
     transition: color 0.3s ease;
 }

 .card:hover .card-icon {
     color: #e67e22;
 }

 .card-body {
     text-align: center;
 }

 .card-title {
     font-weight: bold;
     color: #333;
     font-size: 15px;
 }

 .card-text {
     color: #555;
     font-size: 11px;
 }

 /* Animation */
 .icon-bounce {
     animation: bounce 2s infinite;
 }
.centrar{
    text-align: center;
    padding: 10px;
    margin-bottom: 30px;
}
.rds{
    width: 40%;
    margin: auto;
    text-align: center;
    background: #4b4b4b;
    border-radius: 100%;
    padding: 5px;
}
 @keyframes bounce {

     0%,
     20%,
     50%,
     80%,
     100% {
         transform: translateY(0);
     }

     40% {
         transform: translateY(-10px);
     }

     60% {
         transform: translateY(-10px);
     }
 }
.floating{
    position: fixed;
    bottom: 50px;
    z-index: 9;
    left: 0px;
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
}
.direccion-icon{
    color: red;
    margin: auto !important;
}
img.swal2-image {
    width: 500px; /* Ancho del contenedor */
    height: 500px; /* Alto del contenedor */
    margin-top: 0px; /* Margen superior */
    /*object-fit: cover; /* Hace que la imagen cubra el contenedor sin desproporcionarse */
}
.star-rating i {
    color: #ccc; /* Color por defecto (gris) */
    cursor: pointer;
}

.star-rating i.starselect {
    color: #ffcc00; /* Color amarillo para las estrellas seleccionadas */
}
.close-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    color: #000;
    cursor: pointer;
}
.star-rating {
    margin-top: 10px;
    font-size: 45px;
}
.algodeejemplo .swal2-title {
    background: white;
}
.enlace-btn{
    border: none;border-radius: 15px;
    width: 40px;
    height: 40px;
    background: #44a9ff;
    color: white;
}