/* Governor Bay Color Palette */
:root {
    --sisorbe-50: #eef4ff;
    --sisorbe-100: #e0ebff;
    --sisorbe-200: #c6d9ff;
    --sisorbe-300: #a4bffd;
    --sisorbe-400: #7f9bfa;
    --sisorbe-500: #6178f3;
    --sisorbe-600: #4451e7;
    --sisorbe-700: #3640cc;
    --sisorbe-800: #2e37a4;
    --sisorbe-900: #2d3682;
    --sisorbe-950: #1a1e4c;
}


/* Clases para colores usando las variables definidas */
.bg-sisorbe-50 {
    background-color: var(--sisorbe-50);
}

.bg-sisorbe-100 {
    background-color: var(--sisorbe-100);
}

.bg-sisorbe-200 {
    background-color: var(--sisorbe-200);
}

.bg-sisorbe-300 {
    background-color: var(--sisorbe-300);
}

.bg-sisorbe-400 {
    background-color: var(--sisorbe-400);
}

.bg-sisorbe-500 {
    background-color: var(--sisorbe-500);
}

.bg-sisorbe-600 {
    background-color: var(--sisorbe-600);
}

.bg-sisorbe-700 {
    background-color: var(--sisorbe-700);
}

.bg-sisorbe-800 {
    background-color: var(--sisorbe-800);
}

.bg-sisorbe-900 {
    background-color: var(--sisorbe-900);
}

.bg-sisorbe-950 {
    background-color: var(--sisorbe-950);
}

/* Clases para el color de texto */
.text-sisorbe-50 {
    color: var(--sisorbe-50);
}

.text-sisorbe-100 {
    color: var(--sisorbe-100);
}

.text-sisorbe-200 {
    color: var(--sisorbe-200);
}

.text-sisorbe-300 {
    color: var(--sisorbe-300);
}

.text-sisorbe-400 {
    color: var(--sisorbe-400);
}

.text-sisorbe-500 {
    color: var(--sisorbe-500);
}

.text-sisorbe-600 {
    color: var(--sisorbe-600);
}

.text-sisorbe-700 {
    color: var(--sisorbe-700);
}

.text-sisorbe-800 {
    color: var(--sisorbe-800);
}

.text-sisorbe-900 {
    color: var(--sisorbe-900);
}

.text-sisorbe-950 {
    color: var(--sisorbe-950);
}



.btn-indigo,
.bg-indigo {
    background: var(--sisorbe-800);
    color: white;
}



.btn-outline-indigo {
    color: var(--sisorbe-800);
    border-color: var(--sisorbe-800);
}

.btn-outline-indigo:hover {
    color: #fff;
    background-color: var(--sisorbe-800);
    border-color: var(--sisorbe-800);
}

.btn-outline-indigo:focus,
.btn-outline-indigo.focus {
    box-shadow: 0 0 0 0 var(--sisorbe-800);
    ;
}


.btn-indigo:hover {
    background: #4609a8;
    color: white;
}

.text-indigo {
    color: var(--sisorbe-800) !important;
}

.text-blue {
    color: #2f80ed !important;
}

.select2-selection {
    height: 41px !important;
}

#select2-type_service-container {
    height: 100% !important;
}

.user-img-xs {
    max-width: 40px !important;
}

.nav-treeview .nav-link {
    padding-left: 30px;
}

.select2-selection__choice {
    background: #4609a8 !important;
    color: white !important;
}


.dropzone .dz-remove {
    background-color: #f44336;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}

/* Estilo para cuando se pasa el ratón sobre el ícono de eliminación */
.dropzone .dz-remove:hover {
    background-color: #d32f2f;
}

#myDropzone .dz-preview {
    display: inline-block;
    width: 23%;
    /* Ajusta el ancho de cada archivo para que quepan 4 por fila */
    margin: 1%;
    /* Espaciado entre los archivos */
    box-sizing: border-box;
}


.dz-preview .dz-image img {
    object-fit: cover;
    /* Hace que la imagen se ajuste sin perder proporciones */
    width: 100%;
    /* Se ajusta al tamaño del contenedor */
    height: 100%;
    /* Asegura que la altura sea proporcional */
}

.custom-badge {
    border-radius: 8px;
    display: inline-block;
    min-width: 115px;
    padding: 5px 15px;
    text-align: center;
    border: 0;
}

.status-pendiente,
.status-enviada {
    background: rgba(255, 165, 0, 0.1);
    color: rgb(255, 165, 0);
}

/* .status-respondido {
    color: blue;
} */
.badge-success,
.status-aceptado,
.status-activo,
.status-success {
    background: rgba(0, 128, 0, 0.1);
    color: rgb(0, 128, 0);
}

.status-cerrado {
    background: rgba(10, 120, 172, 0.1);
    color: rgb(5, 57, 168);
}

.badge-info,
.status-enviado,
.status-info {
    background: rgba(0, 211, 199, 0.1);
    color: #00D3C7;
}

.status-caducado,
.status-en-proceso {
    background: #e0ecfc;
    color: #2f80ed;
}

/* .status-observado {
    color: purple;
} */
.status-rechazada,
.status-rechazado,
.status-inactivo,
.status-notificado {
    background: rgba(211, 0, 0, 0.1);
    color: #d30700;
}

.status-anulado {
    background: rgb(128, 128, 128, 0.1);
    color: rgb(128, 128, 128);
}

.bg-anulado {
    background: rgb(128, 128, 128, 0.1);
    color: rgb(128, 128, 128);
}

.direct-chat-text {
    background-color: #f3f6f8 !important;
    border: 1px solid #f3f6f8 !important;

}

.direct-chat-text::after,
.direct-chat-text::before {
    border-right-color: #f3f6f8;
    color: #000;
}

.direct-chat-primary .right>.direct-chat-text {
    background-color: var(--sisorbe-100) !important;
    border-color: var(--sisorbe-100) !important;
    color: var(--sisorbe-900) !important;

}


.direct-chat-primary .right>.direct-chat-text::after,
.direct-chat-primary .right>.direct-chat-text::before {
    border-left-color: var(--sisorbe-100);
}

.offscreen-capture {
    position: absolute;
    top: -9999px;
    left: -9999px;
    display: block !important;
}


.card-custom {
    border: none;
    background-color: #f9f9f9;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


.card-custom .card-body {
    padding: 24px;
}

.card-custom .card-title {
    font-size: 18px;
    color: #343a40;
}

.card-custom .card-text {
    font-size: 24px;
    font-weight: bold;
}

.card-custom .progress-bar {
    height: 5px;
}

.card-custom .status {
    font-size: 1rem;
    color: green;
}

.card-custom .text-left {
    font-size: 2.5rem;
    color: green;
}

.card-custom .detail-points {
    font-size: 14px;
}