.dataTables_wrapper .toprow {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.table td:first-child,
.table th:first-child,
.table tr:first-child {
    padding-left: 9.75px;
}

table.dataTable thead tr {
    background-color: #214b81;
    color: white;
}

form .buttonHolder {
    text-align: right;
}

.success {
    background-color: #06bf6b;
}

.error {
    background-color: #dc3545;
}

.warning {
    background-color: #a09d0f;
}

.repeater .row {
    position: relative;
}

.repeater .delete {
    position: absolute;
    top: 0;
    right: -7px;
}

.repeater .delete i {
    color: #dc3545;
}

.select2-container--bootstrap5 .select2-selection--single .select2-selection__rendered {
    color: #181c32;
}

table.dataTable>thead .sorting:after,
table.dataTable>thead .sorting_asc:after,
table.dataTable>thead .sorting_asc_disabled:after,
table.dataTable>thead .sorting_desc:after,
table.dataTable>thead .sorting_desc_disabled:after {
    content: '';
}

/*  CALENDARIO */

.fc {
    --fc-border-color: #69A2B9 !important;
}

.fc-col-header tbody tr {
    background-color: #214b81;
}

.fc .fc-col-header-cell .fc-col-header-cell-cushion {
    color: #fff !important;
}

@media print {

    #kt_aside_mobile_toggle,
    #kt_toolbar_container,
    #kt_header_user_menu_toggle {
        display: none !important;
    }
}

/* Para los logos */
.bloque_logo {
    display: inline-block;
    width: 100px;
    height: 100px;
    /*
    padding: 5px;
    border: 1px solid blue;
    background-color: yellow;
    */
}

.floatImage {
    display: inline-block;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.4);
    margin: 15px;
    margin-right: 0px;
    z-index: -1;
    width: 20%;
    text-align: center;
}

figcaption {
    height: 1.0em;
    width: 100%;
    margin-top: -2.4em;
    float: right;
    text-align: center;
    color: rgb(17, 17, 17);
    z-index: 1;
    font-family: 'Open Sans', sans;
}


/* Para las acciones en los datatables */
.borrar {
    color: rgb(238, 5, 5);
}

.editar {
    color: #214b81
}

.ver {
    color: #214b81
}

.imprimir {
    color: #214b81;
}

.rueda {
    color: #214b81;
}

/* TABLES2 */
.table2-table {
    --bs-table-bg: #fcfcfc;
    --bs-table-striped-bg: #f4f4f4;
    --bs-table-striped-color: #000000;
    --bs-table-active-bg: #a01336;
    --bs-table-active-color: #000000;
    --bs-table-hover-bg: #e0e0e0;
    --bs-table-hover-color: #000000;
    color: #000000;
    border-color: #ccc2e2;
    border-radius: 6px;
}

.table2-header {
    --bs-table-bg: #0b497c;
    --bs-table-striped-bg: #d8ccee;
    --bs-table-striped-color: #000000;
    --bs-table-active-bg: #ccc2e2;
    --bs-table-active-color: #000000;
    --bs-table-hover-bg: #d2c7e8;
    --bs-table-hover-color: #000000;
    color: #fcf9f9;
    border-color: #ccc2e2;
}

.texto_chico {
    font-size: "x-small" !important;
}

.table2 {
    --bs-table-bg: #fcfcfc;
    --bs-table-striped-bg: #f4f4f4;
    --bs-table-striped-color: #000000;
    --bs-table-active-bg: #a01336;
    --bs-table-active-color: #000000;
    --bs-table-hover-bg: #e0e0e0;
    --bs-table-hover-color: #000000;
    color: #000000;
    border: 1px solid rgb(192, 34, 34);
    border-color: #09139c;
    border-radius: 6px;
}

/* FloatingLabels */
.label-derecha label {
      position: absolute;
      right: 10px; /* Adjust as needed for desired spacing from the right */
      top: 50%; /* Center vertically */
      transform: translateY(-50%); /* Adjust for perfect vertical centering */
      pointer-events: none; /* Ensure label doesn't interfere with input clicks */
      transition: all 0.1s ease-in-out; /* Add transition for a smooth effect */
    }

.label-derecha .form-control:focus ~ label,
.label-derecha .form-control:not(:placeholder-shown) ~ label {
    /* Adjust styling when label is "floating" */
    font-size: 0.75em; /* Smaller font size for floating state */
    top: 5px; /* Adjust vertical position when floating */
    right: 15px; /* Adjust horizontal position when floating */
}

/* Indicator */
.hx-loading-indicator {
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    background: linear-gradient(90deg, transparent,#000, transparent, #000, transparent);
}

.htmx-request.hx-loading-indicator {
    opacity: 1;
    animation: fadeIn 2s linear forwards, slide 1.2s ease-in-out infinite;
}

.htmx-request .hx-loading-indicator {
    opacity: 1;
    animation: fadeIn 2s linear forwards, slide 1.2s ease-in-out infinite;
}

@keyframes slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX( 100%); }
}

@keyframes fadeIn {
    0%   { opacity: 0; }
    50%  { opacity: 0; }
    100% { opacity: 1; }
}