/*
 *   Mis Estilos
 *   Author: opaul83
*/

:root {
    --lightblue: #3c8dbc;
    --lightblue2: #307399;
    --lightblue3: #2a6486;
    --lightblue4: #22516d;
    --moregris: #59585D;
    --moregris2: #727274;
    --moregris3: #616162;
    --moregris4: #3c3b3f;
    --morevino: #720F3C;
    --uphazul: #1276BB;
    --uphrojo: #9D3133;    
}

.card-morevino.card-outline {
    border-top: 3px solid var(--morevino);
}

.btn-lightblue {
    color: #fff;
    background-color: var(--lightblue);
    border-color: var(--lightblue);
    box-shadow: none;
}

.btn-lightblue:hover {
    color: #fff;
    background-color: var(--lightblue2);
    border-color: var(--lightblue3);
}

.btn-lightblue:focus,
.btn-lightblue.focus {
    color: #fff;
    background-color: var(--lightblue2);
    border-color: var(--lightblue3);
    box-shadow: 0 0 0 0 rgba(38, 143, 255, 0.5);
}

.btn-lightblue.disabled,
.btn-lightblue:disabled {
    color: #fff;
    background-color: var(--lightblue);
    border-color: var(--lightblue);
}

.btn-lightblue:not(:disabled):not(.disabled):active,
.btn-lightblue:not(:disabled):not(.disabled).active,
.show>.btn-lightblue.dropdown-toggle {
    color: #fff;
    background-color: var(--lightblue3);
    border-color: var(--lightblue4);
}

.btn-lightblue:not(:disabled):not(.disabled):active:focus,
.btn-lightblue:not(:disabled):not(.disabled).active:focus,
.show>.btn-lightblue.dropdown-toggle:focus {
    box-shadow: 0 0 0 0 rgba(38, 143, 255, 0.5);
}

.btn-outline-lightblue {
    color: var(--lightblue);
    border-color: var(--lightblue);
}

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

.btn-outline-lightblue:focus,
.btn-outline-lightblue.focus {
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.5);
}

.btn-outline-lightblue.disabled,
.btn-outline-lightblue:disabled {
    color: var(--lightblue);
    background-color: transparent;
}

.btn-outline-lightblue:not(:disabled):not(.disabled):active,
.btn-outline-lightblue:not(:disabled):not(.disabled).active,
.show>.btn-outline-lightblue.dropdown-toggle {
    color: #fff;
    background-color: var(--lightblue);
    border-color: var(--lightblue);
}

.btn-outline-lightblue:not(:disabled):not(.disabled):active:focus,
.btn-outline-lightblue:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-lightblue.dropdown-toggle:focus {
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.5);
}

.btn-moregris {
    color: #fff;
    background-color: var(--moregris);
    border-color: var(--moregris);
    box-shadow: none;
}

.btn-moregris:hover {
    color: #fff;
    background-color: var(--moregris2);
    border-color: var(--moregris3);
}

.btn-moregris:focus,
.btn-moregris.focus {
    color: #fff;
    background-color: var(--moregris2);
    border-color: var(--moregris3);
    box-shadow: 0 0 0 0 rgba(88, 93, 99, 0.5);
}

.btn-moregris.disabled,
.btn-moregris:disabled {
    color: #fff;
    background-color: var(--moregris);
    border-color: var(--moregris);
}

.btn-moregris:not(:disabled):not(.disabled):active,
.btn-moregris:not(:disabled):not(.disabled).active,
.show>.btn-moregris.dropdown-toggle {
    color: #fff;
    background-color: var(--moregris3);
    border-color: var(--moregris4);
}

.btn-moregris:not(:disabled):not(.disabled):active:focus,
.btn-moregris:not(:disabled):not(.disabled).active:focus,
.show>.btn-moregris.dropdown-toggle:focus {
    box-shadow: 0 0 0 0 rgba(88, 93, 99, 0.5);
}

.btn-outline-moregris {
    color: var(--moregris);
    border-color: var(--moregris);
}

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

.btn-outline-moregris:focus,
.btn-outline-moregris.focus {
    box-shadow: 0 0 0 0 rgba(51, 54, 57, 0.5);
}

.btn-outline-moregris.disabled,
.btn-outline-moregris:disabled {
    color: var(--moregris);
    background-color: transparent;
}

.btn-outline-moregris:not(:disabled):not(.disabled):active,
.btn-outline-moregris:not(:disabled):not(.disabled).active,
.show>.btn-outline-moregris.dropdown-toggle {
    color: #fff;
    background-color: var(--moregris);
    border-color: var(--moregris);
}

.btn-outline-moregris:not(:disabled):not(.disabled):active:focus,
.btn-outline-moregris:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-moregris.dropdown-toggle:focus {
    box-shadow: 0 0 0 0 rgba(51, 54, 57, 0.5);
}

.bg-uph-grisclaro-vw {
    min-width: 100vw;
    background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(../img/fondo_uph_gris_claro1_1920x1080.jpg) center center no-repeat;
    background-attachment: fixed;
    background-size: cover;  
}

.form-floating
{
    position:relative
}
.form-floating>.form-control,.form-floating>.form-select
{
    height:calc(3.5rem + 2px);
    padding:1rem .75rem
}
.form-floating>label
{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    padding:1rem .75rem;
    pointer-events:none;
    border:1px solid transparent;
    transform-origin:0 0;
    transition:opacity 0.1s ease-in-out,transform 0.1s ease-in-out
}
    @media (prefers-reduced-motion: reduce)
{
.form-floating>label
{
    transition:none
}

}
.form-floating>.form-control::placeholder
{
    color:transparent
}
.form-floating>.form-control:focus,.form-floating>.form-control:not(:placeholder-shown)
{
    padding-top:1.625rem;
    padding-bottom:.625rem
}
.form-floating>.form-control:-webkit-autofill
{
    padding-top:1.625rem;
    padding-bottom:.625rem
}
.form-floating>.form-select
{
    padding-top:1.625rem;
    padding-bottom:.625rem
}
.form-floating>.form-control:focus ~ label,.form-floating>.form-control:not(:placeholder-shown) ~ label,.form-floating>.form-select ~ label
{
    opacity:.65;
    transform:scale(0.85) translateY(-0.5rem) translateX(0.15rem)
}
.form-floating>.form-control:-webkit-autofill ~ label
{
    opacity:.65;
    transform:scale(0.85) translateY(-0.5rem) translateX(0.15rem)
}

.backcolor {
    background-color: #343a40; /* Cambia esto al color de fondo deseado */
    color: #fff; /* Cambia esto al color de texto deseado */
    padding: 20px;   
}

.card-backcolor {
    background-color: #343a40; /* Cambia esto al color de fondo deseado */
    color: #fff; /* Cambia esto al color de texto deseado */
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);    
}

th {
	background-color:var(--morevino);
	background-image:linear-gradient(180deg,var(--morevino) 10%,#35091d 100%);
	background-size:cover;
	color: white; 
	font-size: 12px; 
	vertical-align: middle !important;
}

td { font-size: 12px; vertical-align: middle !important;}

td.dt-nowrap { white-space: nowrap }