/* PERSONALIZACIÓN */

:root {
    --primary-color: #2C3E50;
    --secondary-color: #3498DB;
    --third-color: #39aafa;
    --fourth-color: #94bcc5;
    --fifth-color: #e0efff;
    --sixth-color: #2C3E50;
    --seventh-color: #dddddd;
    --alert-background: white;
    --alert-background-hover: red;
    --alert-color: red;
    --alert-color-hover: white;}

.cajanegro .ui-panel-titlebar, .cajanegro .ui-datatable-header, .cajanegro .ui-paginator-bottom, .cajanegrocelda {
    background: linear-gradient(to right, var(--primary-color) 60%, darkgray) !important
}
.cajanegro-box {
    background: darkgray;
}
.cajanegrorojo .ui-panel-titlebar, .cajanegrorojo .ui-datatable-header, .cajanegrorojo .ui-paginator-bottom, .cajanegrorojocelda {
    background: linear-gradient(to right, var(--primary-color) 60%, darkred) !important;
}
.cajanegrorojo-box {
    background: darkred;
}
.cajablancorojo .ui-panel-titlebar, .cajablancorojo .ui-datatable-header, .cajablancorojo .ui-paginator-bottom, .cajablancorojocelda {
    background: linear-gradient(to right, var(--primary-color) 60%, red) !important;
}
.cajablancorojo-box {
    background: red;
}
.cajanegroazul .ui-panel-titlebar, .cajanegroazul .ui-datatable-header, .cajanegroazul .ui-paginator-bottom, .cajanegroazulcelda {
    background: linear-gradient(to right, var(--primary-color) 60%, blue) !important;
}
.cajanegroazul-box {
    background: blue;
}
.cajablancoazul .ui-panel-titlebar, .cajablancoazul .ui-datatable-header, .cajablancoazul .ui-paginator-bottom, .cajablancoazulcelda {
    background: linear-gradient(to right, var(--primary-color) 60%, deepskyblue) !important;
}
.cajablancoazul-box {
    background: deepskyblue;
}
.cajanegroverde .ui-panel-titlebar, .cajanegroverde .ui-datatable-header, .cajanegroverde .ui-paginator-bottom, .cajanegroverdecelda {
    background: linear-gradient(to right, var(--primary-color) 60%, darkgreen) !important;
}
.cajanegroverde-box {
    background: darkgreen;
}
.cajablancoverde .ui-panel-titlebar, .cajablancoverde .ui-datatable-header, .cajablancoverde .ui-paginator-bottom, .cajablancoverdecelda {
    background: linear-gradient(to right, var(--primary-color) 60%, lime) !important;
}
.cajablancoverde-box {
    background: lime;
}
.cajanegroamarillo .ui-panel-titlebar, .cajanegroamarillo .ui-datatable-header, .cajanegroamarillo .ui-paginator-bottom, .cajanegroamarillocelda {
    background: linear-gradient(to right, var(--primary-color) 60%, darkgoldenrod) !important;
}
.cajanegroamarillo-box {
    background: darkgoldenrod;
}
.cajablancoamarillo .ui-panel-titlebar, .cajablancoamarillo .ui-datatable-header, .cajablancoamarillo .ui-paginator-bottom, cajablancoamarillocelda {
    background: linear-gradient(to right, var(--primary-color) 60%, yellow) !important;
}
.cajablancoamarillo-box {
    background: yellow;
}
.cajanegronaranja .ui-panel-titlebar, .cajanegronaranja .ui-datatable-header, .cajanegronaranja .ui-paginator-bottom, cajanegronaranjacelda {
    background: linear-gradient(to right, var(--primary-color) 60%, orangered) !important;
}
.cajanegronaranja-box {
    background: orangered;
}
.cajablanconaranja .ui-panel-titlebar, .cajablanconaranja .ui-datatable-header, .cajablanconaranja .ui-paginator-bottom, cajablanconaranjacelda {
    background: linear-gradient(to right, var(--primary-color) 60%, orange) !important;
}
.cajablanconaranja-box {
    background: orange;
}