root {
    font-size: 8px;
}
*, html {
    scroll-behavior: smooth !important;
}
body{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1rem;
    text-decoration: none;
    margin: 0;
    padding: 0;
}

.dialogBox{
    top: 15% !important;
    left:30% !important;
    right: 30% !important;
}
.title{
    font-size: 3em;
    font-weight: bold;
    padding: 20px;
    margin: 0px;
    color: #FFFFFF;
    text-shadow: 2px 2px 0 #4074b5, 2px -2px 0 #4074b5, -2px 2px 0 #4074b5, -2px -2px 0 #4074b5, 2px 0px 0 #4074b5, 0px 2px 0 #4074b5, -2px 0px 0 #4074b5, 0px -2px 0 #4074b5;
}
.title-2{
    font-size: 3rem;
    font-weight: bold;
    padding: 20px;
    margin: 0px;
    color: var(--red-900);
    text-shadow: 2px 2px 0 var(--red-200), 2px -2px 0 var(--red-200), -2px 2px 0 var(--red-200), -2px -2px 0 var(--red-200), 2px 0px 0 var(--red-200), 0px 2px 0 var(--red-200), -2px 0px 0 var(--red-200), 0px -2px 0 var(--red-200);
}

label{
    font-weight: bolder;
    color: gray;
}

.parpadear {
    animation: blinker 1s linear infinite;
}
.textoFileSize{
    border-radius: 2px;
    padding: .25em .5rem;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .3px;
    background-color: brown;
    color: whitesmoke;
}
.ui-panelgrid-cell {
    padding: .3rem !important;
}
.estadoTramite {
    border-radius: 3px;
    border: 2px solid lightgray;
    padding: 1px;
    font-size: .8em;
    font-weight: bold;
}
.espaciadoToolbar{
    margin-right: .5rem !important;
}
.tabla-font table tbody, table thead {
    font-size: .9em !important;
}
.body-image {
    background-image: url("../img/logo_da.fw.png");
    background-color: #cccccc;
    height: 400px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.body-logo{
    position: absolute;
    top: 91%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 5px;
    background: rgba(0, 0, 0, 0.7);
}
.body-text {
    position: absolute;
    top: 40%;
    left: 50%;
    width: 90%;
    transform: translate(-50%, -50%);
}
.body-text h1{
    display: inline-flex;
    color: white;
    text-shadow: 0px 0px 10px black,0px 0px 10px black,0px 0px 10px black,0px 0px 10px black,0px 0px 10px black;
    font-size: 3em;
}
.body-text h3{
    width: 100%;
    padding: 5px;
    background: rgba(102, 26, 20, 0.7);
    color: white;
    text-align: center;
}

@media screen and (max-width: 1024px) {
    .body-logo {
        display: none !important;
    }
    .body-text {
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 80%;
    }
}
h1 {
    font-family: var(--fuente);
    color: white;
    font-weight: bold;
    margin: 0.2em;
}
footer {
    border-top-style: solid;
    border-top-width: 10px;
    border-top-color: #002532;
    background-color: #003F5A;
    margin: 0px;
    padding: 20px;
}
header {
    padding: 20px;
    background-color: #DCE1E8;
    margin-left: -10px;
    margin-right: -10px;
    margin-top: -10px;
}

.lineaHeaderGradiente{
    height: 20px;
    background: linear-gradient(45deg,var(--bluegray-900) 10%, var(--indigo-800) 20%, var(--blue-800) 30%, var(--teal-600) 40%,var(--green-500) 50%, var(--yellow-500) 60%, var(--orange-600) 70%,var(--red-800) 80%, var(--pink-800) 90%,var(--purple-800) 100%);
    background-size: 1000% 1000%;
    animation-name: headerAnimado;
    animation-duration: 60s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes headerAnimado {
    0%{
        background-position:0% 60%
    }
    50%{
        background-position:100% 41%
    }
    100%{
        background-position:0% 60%
    }
}
.cardHeaderLine{
    height: 20px;
    background: linear-gradient(45deg,#1A508B 20%, #364547 20% 40%, #ffe268 40% 60%, #ffb037 60% 80%, #bf0603 80% 100%);
}
.title-background{
    background: linear-gradient(45deg, var(--teal-900) 60% 61%, white 61% 61.5%, var(--yellow-200) 39% );
}

.hover-container:hover {
    transform: scale(1.05);
    opacity: 0.8;
    cursor: pointer;
}
.hover-container{
    transition: all 250ms ease-in-out;
}