@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;900&display=swap');

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input {font: inherit;text-decoration: none;-webkit-text-size-adjust: none;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;box-sizing:border-box;font-family: 'Lato', sans-serif;}
a, a:hover{transition:.3s;}
.descMod{margin-bottom: 20px;font-size: .8em;}
.contImaList{overflow: hidden;position: relative;height: 200px;margin-bottom: 20px;border-radius: 8px;box-shadow: var(--shadow-sm);}
.contImaList img{position: absolute;object-fit: cover;height: 100%;width: 100%;}
.contLogoP{
    overflow: hidden;
    position: relative;
    height: 70px;
    width: 70px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    background-color: var(--cd-color-2);
}
 body{
}
.logoHome{
    text-align: center;
    margin-bottom: 20px;
}
    .logoHome img{
    max-width: 170px;
}
.dataQ{}
    .dataQ label{}
.imaListGral{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}
    .imaListGral img{
    max-height: 50px;
    border: 5px solid white;
    box-shadow: var(--shadow-sm);
    border-radius: var(--form-control-radius);
}
.logoIntWelcome{
    display: flex;
    justify-content: center;
    margin: 30px 0px 50px;
}
    .logoIntWelcome img{
    max-width: 210px;
}
.imaAuxUploadInt{
    margin: 10px 0px;
}
    .imaAuxUploadInt img{
    max-height: 60px;
    border-radius: 5px;
}
.descMod strong{
    color: var(--cd-color-1);
}
.contImaList{overflow: hidden;position: relative;height: 200px;margin-bottom: 20px;border-radius: 8px;box-shadow: var(--shadow-sm);}
.contImaList img{position: absolute;object-fit: cover;height: 100%;width: 100%;}
.bx{color: var(--cd-color-1);font-size: 1.6em;}
.userlogin{text-align: right;font-size: var(--small-font-size);color: var(--cd-color-2);}
.userlogin span{color: var(--cd-color-1);}
.header__logo span img{max-height: 35px;width: auto;vertical-align: middle;}
main{top: 0px;position: relative;} 
h1, h2, h3, strong{font-weight: bolder;color: var(--color-contrast-higher);}
h1{font-size: var(--btn-font-size-xxlg);}
h2{font-size: var(--btn-font-size-xlg);}
h3{}
p{color: var(--cd-color-2);font-size: var(--btn-font-size-sm);line-height: var(--body-line-height);}

a{cursor:pointer;transition:.2s;}   

/* ==== LOGIN ==== */
#resultado{
    font-size: .74em;
    text-align: center;
    color: var(--color-error-dark);
    font-weight: bold;
}
.contLogosFooter{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2em;
}
    .contLogosFooter > div{}
    .contLogosFooter > div > img{
    max-width: 110px;
}
.loadingLogin{
    font-size: .6em;
    font-weight: bold;
    text-align: center;
    margin: 10px 0 0;
}
    .loadingLogin img{
    vertical-align: middle;
    margin: 0 10px 0 0;
    width: 15px;
    height: 15px;
}
footer{text-align: center;padding: 20px 10px !important;}
    footer p{}
    footer p small{color: var(--color-contrast-low);}
.contLogin{}
    .contLogin > ul{display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;max-width: 440px;margin: auto;padding: 0px 10px;}
    .contLogin > ul > li{-ms-flex: 0 0 50%;flex: 0 0 100%;max-width: 100%;}
    .contLogin > ul > li > .imaconlogin{position: relative;top: 0px;overflow: hidden;height: 530px;border-radius: 0 20px 20px 0px;box-shadow: var(--shadow-lg);}
    .contLogin > ul > li > .imaconlogin img{width: 100%;height: 100%;position: absolute;object-fit: cover;}
.loginF{background-color: var(--cd-color-1);border-radius: 20px;box-shadow: var(--shadow-lg);padding: 40px;/* height: 530px; */}
.loginF h1{color: var(--color-contrast-higher);font-size: 1.2em;}
.loginF label{width: 100%;text-align: left;color: var(--color-contrast-medium);display: block;}
.formOp{text-align: center;margin-bottom: 20px;}
    .formOp label{
    font-size: .8em;
    margin: 10px 0px;
    }
    .loginF p{
    font-size: .7em;
    color: var(--color-contrast-medium);
    margin-bottom: 10px;
    }
    .loginF input[type="submit"]{
    font-size: .75em !important;
}
    .formOp input{
    padding: 13px 20px;
    width: 100%;
    appearance: none;
    border-radius: 8px;
    font-size: .8em;
    border: 1px solid silver;
}
.btlogin{background-color: var(--cd-color-3) !important;font-size: .9em !important;padding: 15px 10px !important;}
.bgLogin{background-color: var(--cd-color-2);}
.text-sm a{color: var(--color-contrast-medium);}
.headerLogin{display: flex;margin: 30px 0px;gap: 1em;align-items: center;color: silver;justify-content: center;}
.headerLogin img{width: 120px;height: auto;}
.titHeader{
    font-size: .9em;
    font-weight: bold;
}

.onetitle{
    padding: 0px 10px;
}
.titles{
    display: flex;
    align-items: center;
    margin: 40px 0px;
    justify-content: center;
}
.titTitle{
    text-align: center;
    font-weight: bold;
    color: var(--cd-color-1);
    font-size: 2.4em;
    margin-top: 16px;
    padding-bottom: 12px;
    background: radial-gradient(white,gray 80%);
    background-position: 50% 75%;
    background-size: 100% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.subtitTitle{
    text-align: center;
    font-weight: bold;
    color: var(--color-contrast-low);
    font-size: 1.1em;
}
.contIcoTitle{
    background-image: linear-gradient(330deg,#fff 65%,#e2e2e2);
    padding: 20px;
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    width: 33%;
    border: 5px solid var(--cd-color-2);
}
.contIcoTitle > div{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: stretch;
    gap: 1.5em;
}
.contIcoTitle > div > div{
    flex: 1 1 0;
}
.icoTitleAccess{}
    .icoTitleAccess i{
    font-size: 2em;
    color: var(--cd-color-2);
    background: linear-gradient(25deg, #2a364e,#455a83 90%);
    background-position: 50% 75%;
    background-size: 100% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: var(--shadow-sm);
}
.titTitleAccess > div{
    font-weight: bold;
}
    .titTitleAccess a{
    display: flex;
    background-color: var(--cd-color-3);
    text-transform: uppercase;
    font-size: .7em;
    font-weight: bold;
    padding: 15px 25px;
    border-radius: var(--radius-lg);
    transition: .3s;
    text-align: center;
    justify-content: center;
    }
     .titTitleAccess a:hover{
         box-shadow: var(--shadow-sm);
    background-color: var(--cd-color-2);
    transition: .3s;
     }
.contAccess{
    display: flex;
    justify-content: center;
    text-align: center;
    max-width: 870px;
    margin: 50px auto;
    flex-wrap: wrap;
    flex-direction: row;
}

    @media (max-width: 440px){
    .contIcoTitle{
    width: 100%;
}
        
    }