:root {
    /* Custom Colors (complementing Bootstrap) */
    --custom1: #f08080;  /* Light Coral (similar to Danger) */
    --custom1_hover: #e06666;

    --custom2: #ffed66;  /* Light Yellow (similar to Warning) */
    --custom2_hover: #f4da50;

    --custom3: #e467c7;  /* Bright Green (similar to Success) */
    --custom3_hover: #c959af;

    --custom4: #3d739f;  /* Steel Blue (similar to Primary) */
    --custom4_hover: #214565;

    --custom5: #8a94a6;  /* Soft Grey (similar to Secondary) */
    --custom5_hover: #7b8593;

    --custom6: #e57373;  /* Light Red (soft alternative to Danger) */
    --custom6_hover: #d86060;

    --custom7: #ffb74d;  /* Soft Orange (variant of Warning) */
    --custom7_hover: #ffa726;

    --custom8: #81c784;  /* Soft Green (lighter Success) */
    --custom8_hover: #66bb6a;

    --custom9: #64b5f6;  /* Soft Blue (variant of Primary) */
    --custom9_hover: #42a5f5;

    /* New Custom Colors */
    --custom10: #dda0dd;  /* Pale Violet (soft purple) */
    --custom10_hover: #c088c0;

    --custom11: #20b2aa;  /* Light Sea Green */
    --custom11_hover: #1a958a;

    --custom12: #ff6347;  /* Tomato (bright red-orange) */
    --custom12_hover: #e45339;

    --custom13: #ffdab9;  /* Peach Puff (light pastel orange) */
    --custom13_hover: #ecc8a4;

    --custom14: #cd853f;  /* Peru (rich brown-orange) */
    --custom14_hover: #975c27;
}


/* BACKGROUNDS */
.bg-custom1 { background-color: var(--custom1); }
.bg-custom2 { background-color: var(--custom2); }
.bg-custom3 { background-color: var(--custom3); }
.bg-custom4 { background-color: var(--custom4); }
.bg-custom5 { background-color: var(--custom5); }
.bg-custom6 { background-color: var(--custom6); }
.bg-custom7 { background-color: var(--custom7); }
.bg-custom8 { background-color: var(--custom8); }
.bg-custom9 { background-color: var(--custom9); }
.bg-custom10 { background-color: var(--custom10); }
.bg-custom11 { background-color: var(--custom11); }
.bg-custom12 { background-color: var(--custom12); }
.bg-custom13 { background-color: var(--custom13); }
.bg-custom14 { background-color: var(--custom14); }

/* BUTTONS */
.btn-custom1 { background-color: var(--custom1); color: var(--white); }
.btn-custom1:hover { background-color: var(--custom1_hover); color: var(--white)}

.btn-custom2 { background-color: var(--custom2); color: var(--white); }
.btn-custom2:hover { background-color: var(--custom2_hover); color: var(--white)}

.btn-custom3 { background-color: var(--custom3); color: var(--white); }
.btn-custom3:hover { background-color: var(--custom3_hover); color: var(--white)}

.btn-custom4 { background-color: var(--custom4); color: var(--white); }
.btn-custom4:hover { background-color: var(--custom4_hover); color: var(--white)}

.btn-custom5 { background-color: var(--custom5); color: var(--white); }
.btn-custom5:hover { background-color: var(--custom5_hover); color: var(--white)}

.btn-custom6 { background-color: var(--custom6); color: var(--white); }
.btn-custom6:hover { background-color: var(--custom6_hover); color: var(--white)}

.btn-custom7 { background-color: var(--custom7); color: var(--white); }
.btn-custom7:hover { background-color: var(--custom7_hover); color: var(--white)}

.btn-custom8 { background-color: var(--custom8); color: var(--white); }
.btn-custom8:hover { background-color: var(--custom8_hover); color: var(--white)}

.btn-custom9 { background-color: var(--custom9); color: var(--white); }
.btn-custom9:hover { background-color: var(--custom9_hover); color: var(--white)}

.btn-custom10 { background-color: var(--custom10); color: var(--white); }
.btn-custom10:hover { background-color: var(--custom10_hover); color: var(--white)}

.btn-custom11 { background-color: var(--custom11); }
.btn-custom11:hover { background-color: var(--custom11_hover); }

.btn-custom12 { background-color: var(--custom12); color: var(--white); }
.btn-custom12:hover { background-color: var(--custom12_hover); color: var(--white)}

.btn-custom13 { background-color: var(--custom13); color: var(--black); }
.btn-custom13:hover { background-color: var(--custom13_hover); color: var(--white)}

.btn-custom14 { background-color: var(--custom14); color: var(--white); }
.btn-custom14:hover { background-color: var(--custom14_hover); color: var(--white)}

/* TEXT */
.text-custom1 { color: var(--custom1); }
.text-custom2 { color: var(--custom2); }
.text-custom3 { color: var(--custom3); }
.text-custom4 { color: var(--custom4); }
.text-custom5 { color: var(--custom5); }
.text-custom6 { color: var(--custom6); }
.text-custom7 { color: var(--custom7); }
.text-custom8 { color: var(--custom8); }
.text-custom9 { color: var(--custom9); }
.text-custom10 { color: var(--custom10); }
.text-custom11 { color: var(--custom11); }
.text-custom12 { color: var(--custom12); }
.text-custom13 { color: var(--custom13); }
.text-custom14 { color: var(--custom14); }

/* BADGES */
.badge-custom1 { color: var(--white); background-color: var(--custom1); }
.badge-custom2 { color: var(--black); background-color: var(--custom2); }
.badge-custom3 { color: var(--white); background-color: var(--custom3); }
.badge-custom4 { color: var(--white); background-color: var(--custom4); }
.badge-custom5 { color: var(--white); background-color: var(--custom5); }
.badge-custom6 { color: var(--white); background-color: var(--custom6); }
.badge-custom7 { color: var(--white); background-color: var(--custom7); }
.badge-custom8 { color: var(--white); background-color: var(--custom8); }
.badge-custom9 { color: var(--white); background-color: var(--custom9); }
.badge-custom10 { color: var(--white); background-color: var(--custom10); }
.badge-custom11 { color: var(--white); background-color: var(--custom11); }
.badge-custom12 { color: var(--white); background-color: var(--custom12); }
.badge-custom13 { color: var(--black); background-color: var(--custom13); }
.badge-custom14 { color: var(--white); background-color: var(--custom14); }


.font-size-10 {
    font-size: 10px;
}
.font-size-11 {
    font-size: 11px;
}
.font-size-12 {
    font-size: 12px;
}


.icon-copy {
    opacity: 0;
    transition: opacity 0.3s ease;
}
/* Mostrar el ícono al hacer hover sobre la fila */
tr:hover .icon-copy {
    opacity: 1;
}


/* Estilo para las columnas que no están fijas */
#documents tbody td:not(.fixed-column) {
    background-color: #fff;
}
#documents th.title-fixed {
    z-index: 100!important;
}
#documents .bg-fixed {
    background-color: rgb(200, 200, 200);
}

.hover-black-30:hover{
    opacity: 0.8;
    transition: opacity 0.3s ease;
}