/* ============ */
/*    Colors    */
/* ============ */

:root {
    --titleBlue: #0077BA;
    --grayTexts: #585858;
    --headerFooterBackground: #1E5CAF;
    --header--box-shadow: 0px 3px 8px #00000029;
    --font-weight-600: 600;
    --color-ffffff: #ffffff;
    --color-1E5CAF: #1E5CAF;
    --color-1351B4: #1351B4;
    --color-585858: #585858;
    --color-000000: #000000;
    --font-size-14: 14px;
}


/* ========================================= */
/*    Header, page and footer integration    */
/* ========================================= */

.header__barra-gov,
.header__barra-gov__logo,
.login-pf-page .card-pf,
.social-media,
.footer-login,
.navbar,
.center_row_forgotpass_rememberme {
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar {
    box-shadow: var(--header--box-shadow);
    padding: 0.5rem;
    height: 73.7px;
    margin: 0 !important;
    z-index: 10;
}

.navbar-blue {
    background-color: var(--color-1E5CAF) !important;
    height: 77px;
    justify-content: start;
    gap: 0.8rem;
}

.navbar-blue h6 {
    font-size: var(--font-size-14) !important;
    color: var(--color-ffffff);
    font-weight: var(--font-weight-600);
    display: none;
}

@media (min-width: 478px) {
    .navbar-blue h6 {
        display: flex;
    }
}

.page-div {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.footer-container {
    min-height: 5vh !important;
}


/* =================== */
/* Login screen - body */
/* =================== */

.login-pf {
    background: url("../img/inpe-background.png");
    background-size: auto;
}

.login-pf body {
    background: transparent;
    display: flex;
    font-size: 14px;
}


/* ======================== */
/* Login screen - Login div */
/* ======================== */

/* div */
.login-pf-header {
    width: 100%;
}

.pf-c-dropdown__menu.pf-m-align-right {
    display: none;
}

#kc-current-locale-link[aria-expanded="true"]:focus + .pf-c-dropdown__menu.pf-m-align-right,
#kc-current-locale-link[aria-expanded="true"]:focus-within + .pf-c-dropdown__menu.pf-m-align-right {
    display: block;
}

#kc-current-locale-link[aria-expanded="false"] + .pf-c-dropdown__menu.pf-m-align-right {
    display: none;
}

#kc-current-locale-link {
    position: relative;
    padding-right: 20px;
    border: none;
    background: none;
    font-size: 14px;
    font-family: Arial, sans-serif;
}

#kc-current-locale-link::after {
    content: '>';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    font-size: 12px;
    color: currentColor;
}

.login-pf-page {
    margin: auto;
    padding: 10px;
    max-width: 500px;
    /*Forgot password*/
}

.login-pf-page .login-pf-settings {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Remove header */
.login-pf-page .login-pf-page-header {
    display: none;
}

/* container */
.login-pf-page .card-pf {
    border-radius: 15px;
    padding: 30px 70px;
    margin: 5% auto;
    flex-direction: column;
}

/* Locale selector component and color */
#kc-info-wrapper {
    background-color: transparent;
}

#kc-locale {
    width: 100%;
    text-align: right;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    #kc-locale {
        position: relative;
        top: 0;
        right: 0;
    }
}

/* INPE logo */
.logo-inpe-img {
    max-height: 80px;
    margin: 10px;
    content: url(../img/inpe-logo.png);
}

/* login header margin */
h1#kc-page-title {
    margin: 30px auto;
}

/* INPE title */
.login-title {
    color: var(--grayTexts);
    text-align: center;
    margin: auto;
    font-size: large;
    font-family: Roboto;
    font-weight: bold;
}

/* INPE title ("Instituto Nacional" text color) */
.login-title-blue {
    color: var(--titleBlue);
}

/* Login form margin botton  */
.form-group.form-group-login-inputs {
    margin: 20px auto;
}

/* User and Password left icons */
.form-group-login-inputs {
    display: flex;
    align-items: center;
}

.user-password-fa {
    margin-right: 15px;
}

/* User and password input class */
.pf-c-form-control {
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
}

/* Input error message */
.form-input-error {
    display: grid;
    text-align: center;
    color: red;
}

/* Sign In button */
.pf-c-button.pf-m-block {
    font-weight: bold;
    margin: auto;
    width: auto;
    padding: 10px 35px;
    border-radius: 25px;
    background-color: var(--titleBlue) !important;
}


/* ====================== */
/* Forgot password screen */
/* ====================== */

#kc-info {
    margin: auto;
}


/* ============== */
/* Projects logos */
/* ============== */
.projects-div {
    margin: 40px auto;
    width: 100%;
    display: flex;
    gap: 30px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.projects-images {
    height: 70px;
}

.projects-images.bdc {
    content: url("../img/projects-bdc.png");
}

.projects-images.queimadas {
    content: url("../img/projects-queimadas.png");
}

.projects-images.biomas {
    content: url("../img/projects-biomas.png");
}

.projects-images.lgi {
    content: url("../img/projects-lgi.svg");
}

.projects-images.big {
    content: url("../img/projects-big.png");
}

[data-page-id="login-login-update-profile"] input {
    padding: 0.4rem 0.6rem;
    font-size: 0.88rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}