@font-face {
  font-family: 'Inder';
  font-weight: 400;
  font-style: normal;
  src: url('../../fonts/Inder/Inder-Regular.ttf');
}

.page-login-v2 {
  height: 100%;
  overflow-x: hidden;
}

.page-login-background:before {
  background-image: url("../../remark/examples/images/login.jpg");
  background-position: center center !important;
}

.page-login-v2.page-dark.layout-full:after {
  background-color: rgba(244, 241, 241, 0.50);
}

/* Termos de uso / Privacidade — pinned to the bottom of the viewport and
 * centred, independent of where the block sits in the template. On phones the
 * `max-width: 767px` rule below drops it back into normal flow (under the form)
 * so it can never overlap the login card on short screens. */
.page-login-v2 .page-brand-info {
  padding: 12px 16px;
  text-align: center;
}

.page-login-v2 .page-brand-info .brand-text {
  display: inline-block;
  vertical-align: middle;
  margin: 11px 0 11px 20px;
}

.page-login-v2 .page-brand-info p {
  opacity: .6;
  max-width: 650px;
}

.spacer {
    padding-top: 10px;
}

.page-login-v2 .page-login-main {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    max-width: 440px;
    width: calc(100% - 40px);
    
    margin-bottom: 28px;
    min-width: 320px;
    min-height: 338px;
    overflow: hidden;
    top: 10%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.page-content, .sign-in-form {
    height: 100%;
}

/* ── Sign-in: one form, both fields ─────────────────────────────────────────
 * The two-step flow's rules are gone with it: `.password-form { display:none }`
 * (the hidden second step), `.blurred` and `.login-loader` (the full-panel mask
 * over the step swap), `#inserted-email` / `#password-back-button` (the "go
 * back to the email step" affordance) and `.login-changes-warning` (a notice
 * whose own JS stopped showing it in November 2020).
 *
 * `[hidden]` gets an explicit rule because Bootstrap's `display` declarations
 * on these blocks would otherwise win over the UA sheet's `[hidden]` and the
 * SSO panel and password block would both be visible at once.
 */
.sign-in-form [hidden] {
    display: none !important;
}

.login-title {
    font-family: Inder, sans-serif;
}

/* Inline probe status ("Verificando…") — sits under the email field so it can
 * never reflow the form or cover the password input. */
.login-hint {
    display: block;
    min-height: 18px;
    margin-top: 4px;
    font-size: 12px;
    color: #949391;
}

/* SSO panel, shown in place of the password block when the probed domain
 * resolves to an identity provider. */
.login-sso-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 4px 0 18px;
    font-size: 13px;
    line-height: 1.5;
    color: #1e1e1e;
}

.login-sso-note .icon {
    margin-top: 2px;
    flex-shrink: 0;
}

[data-sso-continue] .fa-arrow-right {
    margin-left: 6px;
}

.page-login-v2 .brand-img {
  max-width: 256px;
  height: auto;
}

.page-login-v2 .page-login-main .brand-text {
  display: inline-block;
  vertical-align: middle;
  margin: 11px 0 11px 20px;
  color: #62a8ea;
}

.page-login-v2 form {
  width: 350px;
  margin: 20px 0 20px;
}

.page-login-v2 form > button {
  margin-top: 38px;
}

.page-login-v2 footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 50px 60px;
  text-align: center;
}

.page-login-v2 .social .icon, .page-login-v2 .social .icon:hover, .page-login-v2 .social .icon:active {
  color: gray;
}

.page-login-title {
  display: inline-block;
}

.page-login-icon {
  margin-left: 10px;
  height: 100px;
  width: 100px;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}

.title_icon_wrapper {
    align-content: center;
    display: flex;
}

@media (max-width: 991px) {
  .page-login-v2 .page-login-main {
    padding-top: 60px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .page-login-v2 .page-login-main {
    padding-top: 80px;
  }
}

@media (max-width: 767px) {
  .page-login-v2 .page-login-main {
    padding-top: 60px;
    width: 100%;
  }
  .page-login-v2 form {
    width: auto;
  }
  /* On phones, don't pin to the viewport: let the links sit in normal flow
   * just below the form so they never cover the card on short screens. */
  .page-login-v2 .page-brand-info {
    margin-top: 20px;
    padding: 16px;
  }
}

@media (max-width: 479px) {
  .page-login-v2 .page-login-main {
  }
  .page-login-v2 form {
    width: auto;
  }
  .page-login-v2 footer {
    margin: 50px 30px;
  }
}

.text-accent-300 {
  color: #B8372E;
  font-weight: 300;
}

.text-accent-400 {
  color: #B8372E;
  font-weight: 400;
}

.text-accent-600 {
  color: #B8372E;
  weight: 600;
}

.text-accent-800 {
  color: #B8372E;
  font-weight: 800;
}

.text-primary-300 {
  color: #1e1e1e;
  font-weight: 300;
}

.text-primary-400 {
  color: #1e1e1e;
  font-weight: 400;
}

.text-primary-600 {
  color: #1e1e1e;
  font-weight: 600;
}

.text-primary-800 {
  color: #1e1e1e;
  font-weight: 800;
}

.text-secondary-300 {
  color: #37474F;
  font-weight: 300;
}

.text-secondary-400 {
  color: #37474F;
  font-weight: 400;
}

.text-secondary-600 {
  color: #37474F;
  font-weight: 600;
}

.text-secondary-800 {
  color: #37474F;
  font-weight: 800;
}

.text-tertiary-300 {
  color: #808080;
  font-weight: 300;
}

.text-tertiary-400 {
  color: #808080;
  font-weight: 400;
}

.text-tertiary-600 {
  color: #808080;
  font-weight: 600;
}

.text-tertiary-800 {
  color: #808080;
  font-weight: 800;
}

.no-gutters {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.no-gutters>.col,
.no-gutters>[class*="col-"] {
  padding-right: 0 !important;
  padding-left: 0 !important;
}
/* ============================================================================
 * Sign-in news column (second column of the two-column sign-in layout).
 *
 * Everything here is inert until authentication.js adds `has-news` to
 * `.login-columns`: with the feature off, JS broken, or the feed unreachable,
 * the page keeps the single centred form it has always had. That is why the
 * two-column rules hang off `.has-news` rather than off a media query alone.
 * ==========================================================================*/

/* NO base rule for `.login-columns` on purpose -- it must be a completely
 * transparent block in the single-column state.
 *
 * It briefly carried `max-width: 440px` here, which broke the default page:
 * `.page-login-main` sizes itself off its parent with
 * `width: calc(100% - 40px); max-width: 440px`, so capping the wrapper at 440
 * made that resolve to 400px instead of 440px. With `box-sizing: border-box`
 * and 44px of padding the content box fell to 312px against a fixed 350px form
 * (`.page-login-v2 form { width: 350px }`), and `overflow: hidden` on the card
 * silently CLIPPED the right edge of both inputs and the Entrar button -- in
 * the feature-off state, which is every deployment until the flag is turned on.
 * The card already centres itself with `margin: 0 auto`; the wrapper must add
 * nothing until `has-news` is present. */

/* GRID, not flex, and the reason is `.page-login-main`'s 44px padding.
 *
 * The obvious `flex: 1 1 0` on both children does NOT produce equal columns
 * here: with `box-sizing: border-box`, a flex base size of 0 is floored at the
 * item's own padding + border, so the padded form column starts 88px ahead and
 * keeps that lead after the free space is split. Measured: 514px vs 426px in a
 * 968px row.
 *
 * `1fr 1fr` sizes the TRACKS, which owe nothing to what the items are padded
 * with, so the two columns are exactly equal by construction. */
.login-columns.has-news {
    max-width: 968px;
    margin-left: auto;    /* centring now belongs to the two-column state only */
    margin-right: auto;
    /* Anchor the two-column layout to the viewport height and centre the
     * columns within it, instead of pushing them down with a top margin. This
     * is what keeps the sign-in page from ever gaining a vertical scrollbar
     * once the news column appears: the container is exactly the height of the
     * page's content area, and the news card -- the only piece that can be
     * taller than the screen -- is capped to that height and scrolls INSIDE
     * itself (see its overflow rule below) rather than growing the page.
     * `margin-top: 0` replaces the old 5% push; `align-items: center` replaces
     * the brand's 5% and the card's 10% that used to do the vertical framing. */
    height: 95%;
    margin-top: 0;
    padding-bottom: 48px;   /* clearance for the fixed Termos/Privacidade bar */
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 28px;
}

/* `min-width: 0` overrides the base `min-width: 320px` and lets a long unbroken
 * headline shrink instead of blowing the track out past its 1fr share. */
.login-columns.has-news > .login-col-form,
.login-columns.has-news > .login-news {
    min-width: 0;
}

.login-columns.has-news > .login-col-form > .page-login-main {
    /* The card's own centring and width cap would fight the grid track. */
    max-width: none;
    width: auto;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
}

/* The logo carried `margin-top: 5%` as an inline style. It is a rule now so the
 * two-column state can override it -- a percentage margin resolves against the
 * container WIDTH, so in a half-width column it silently halved. */
.login-col-form > .brand { margin-top: 5%; }

.login-columns.has-news > .login-col-form > .brand {
    margin-top: 0;
    margin-bottom: 22px;
}

/* Percentage `top` is neutralised in the two-column state on BOTH columns.
 * `.page-login-main`'s `top: 10%` resolves against its containing block's
 * height, which here is a grid row whose height is whatever the taller column
 * happens to be -- so the gap between the two cards would grow and shrink with
 * the length of a news headline. Zeroing both and expressing the offset in
 * pixels makes the relationship fixed and gives one number to tune. */
.login-columns.has-news > .login-col-form > .page-login-main,
.login-columns.has-news > .login-news {
    top: 0;
}

/* No scrollbar anywhere -- not on the page, not inside the card. Instead of
 * capping the card and letting it scroll, the card is made to FIT the column
 * height and its contents scale with the viewport (see the `min-width: 992px`
 * block further down). The column fills its track so the card can size the
 * image against the space that is actually left. The margins are zeroed because
 * the container frames both columns with `align-items: center`. */
.login-columns.has-news > .login-news {
    margin: 0;
    height: 100%;
}

/* Column one slides from where it was (centred, single column) to where it is
 * now (left column) -- logo and card together, because they are one element as
 * far as the animation is concerned. `--dp-slide-from` is measured by JS right
 * after the layout flips, so it starts at the column's real previous position
 * whatever the viewport width; no hard-coded offset to drift out of sync.
 *
 * Easing is a soft ease-out (`.16, 1, .3, 1` -- an expo-ish curve): most of the
 * distance is covered early and the last few pixels settle slowly, which is
 * what reads as "smooth" rather than "fast then stop". Durations are long
 * enough to be followed by eye without feeling sluggish, and the fade starts
 * partway through the slide so the two overlap instead of queueing. */
@keyframes dp-slide-to-left {
    from { transform: translateX(var(--dp-slide-from, 240px)); }
    to   { transform: translateX(0); }
}

@keyframes dp-fade-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.login-columns.has-news > .login-col-form {
    animation: dp-slide-to-left .78s cubic-bezier(.16, 1, .3, 1) both;
    /* Hints the compositor before the first frame; both properties animated
     * here are compositor-friendly, so this only buys a smoother start. */
    will-change: transform;
}

.login-columns.has-news > .login-news {
    animation: dp-fade-in .85s cubic-bezier(.16, 1, .3, 1) .16s both;
    will-change: opacity, transform;
}

/* Set by authentication.js for the single frame in which it measures how far
 * the form column has to travel. Without this the fill-mode `both` on the
 * keyframes above means the element is already displaced when it is measured,
 * and the measurement comes back short by exactly the keyframe's fallback. */
.login-columns.dp-measuring > .login-col-form,
.login-columns.dp-measuring > .login-news {
    animation: none !important;
}

/* Respect the OS "reduce motion" setting: the layout still changes, it just
 * arrives without the travel. */
@media (prefers-reduced-motion: reduce) {
    .login-columns.has-news > .login-col-form,
    .login-columns.has-news > .login-news {
        animation: none;
        will-change: auto;
    }
}

/* ── The card ───────────────────────────────────────────────────────────── */

.login-news {
    position: relative;
    margin-bottom: 28px;
}

.news-card {
    background: #fff;
    border: 1px solid #e4eaec;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
    overflow: hidden;
}

/* Fixed aspect box, so a missing or slow image never reflows the column.
 * padding-top on a zero-height box is the ratio trick that works everywhere
 * this app is expected to run (no aspect-ratio dependency). */
.news-media {
    position: relative;
    width: 100%;
    padding-top: 52%;
    background: #eef3f6;
    overflow: hidden;
}

.news-media > img,
.news-media > .news-media-ph {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}

.news-media > img {
    object-fit: cover;
    display: block;
}

.news-media-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #a3afb7;
}

.news-body { padding: 22px 24px 18px; }

.news-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.news-badge {
    display: inline-block;
    padding: 4px 9px;
    background: #e03c31;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.4;
}

.news-date { font-size: 12px; color: #76838f; }

.news-title {
    margin: 0 0 12px;
    font-size: 21px;
    line-height: 1.32;
    font-weight: 700;
}

.news-title > a {
    color: #183254;
    text-decoration: none;
}

.news-title > a:hover,
.news-title > a:focus { color: #e03c31; text-decoration: none; }

.news-excerpt {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: #76838f;
}

.news-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e4eaec;
}

.news-author {
    font-size: 13px;
    color: #37474f;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news-cta {
    flex-shrink: 0;
    padding: 9px 20px;
    background: #e03c31;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.4;
}

.news-cta:hover,
.news-cta:focus { background: #c9362c; color: #fff; text-decoration: none; }

/* ── "Outras leituras" ──────────────────────────────────────────────────── */

.news-more {
    padding: 18px 24px 22px;
    border-top: 1px solid #e4eaec;
    background: #f8fafb;
}

.news-more-label {
    display: block;
    margin-bottom: 12px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #a3afb7;
}

.news-more-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.news-more-list > li + li { margin-top: 12px; }

.news-more-list a {
    color: #37474f;
    font-size: 13.5px;
    line-height: 1.45;
    text-decoration: none;
}

.news-more-list a:hover,
.news-more-list a:focus { color: #e03c31; text-decoration: none; }

/* ── Two-column state: scale the card to the viewport height ─────────────────
 * The card must fit the screen with no scrollbar -- on the page OR inside the
 * card -- so its elements shrink to the space available. Two mechanisms:
 *   1. The card is a flex column filling the column height; the IMAGE is the
 *      only growable/shrinkable element, so it soaks up spare space and gives it
 *      back first on short screens (object-fit keeps it framed as it shrinks).
 *   2. Text and padding use `clamp(min, vh, max)`, so they step down as the
 *      viewport shortens instead of forcing the card past the screen edge.
 * `overflow: hidden` on the card is only a sub-pixel guard; the sizing above is
 * what makes it fit. Scoped to `min-width: 992px` because narrower than that the
 * layout stacks and the page scrolls, where full-size text is the right call. */
@media (min-width: 992px) {
    .login-columns.has-news .news-card {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
    }

    /* Replaces the fixed 52% aspect box: the image takes whatever height is left
     * after the text and is the first thing to shrink when the screen is short. */
    .login-columns.has-news .news-media {
        flex: 1 1 auto;
        min-height: 80px;
        padding-top: 0;
    }

    /* Text blocks keep their content height (no flex shrink that would clip
     * mid-line); the image absorbs the variation instead. */
    .login-columns.has-news .news-body {
        flex: 0 0 auto;
        padding: clamp(10px, 2.2vh, 22px) clamp(16px, 1.6vw, 24px) clamp(8px, 1.6vh, 18px);
    }

    .login-columns.has-news .news-meta {
        margin-bottom: clamp(6px, 1.2vh, 14px);
    }

    .login-columns.has-news .news-title {
        margin-bottom: clamp(6px, 1.1vh, 12px);
        font-size: clamp(15px, 2.1vh, 21px);
    }

    .login-columns.has-news .news-excerpt {
        font-size: clamp(11px, 1.5vh, 13.5px);
        /* Bound the excerpt height so it can never be the thing that overflows. */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    .login-columns.has-news .news-foot {
        margin-top: clamp(10px, 1.6vh, 20px);
        padding-top: clamp(8px, 1.4vh, 16px);
    }

    .login-columns.has-news .news-more {
        flex: 0 0 auto;
        padding: clamp(10px, 1.6vh, 18px) 24px clamp(12px, 1.8vh, 22px);
    }

    .login-columns.has-news .news-more-label {
        margin-bottom: clamp(6px, 1vh, 12px);
    }

    .login-columns.has-news .news-more-list > li + li {
        margin-top: clamp(6px, 1vh, 12px);
    }
}

/* Shorter viewports: trim the excerpt to two lines and lower the image floor. */
@media (min-width: 992px) and (max-height: 720px) {
    .login-columns.has-news .news-excerpt { -webkit-line-clamp: 2; }
    .login-columns.has-news .news-media { min-height: 64px; }
}

/* Very short viewports: "Outras leituras" is dropped first, then the excerpt is
 * cut to a single line -- headline, image and the "Leia mais" button remain. */
@media (min-width: 992px) and (max-height: 600px) {
    .login-columns.has-news .news-more { display: none; }
    .login-columns.has-news .news-excerpt { -webkit-line-clamp: 1; }
    .login-columns.has-news .news-media { min-height: 48px; }
}

/* ── Narrow screens: stack, form first ──────────────────────────────────── */

@media (max-width: 991px) {
    .login-columns.has-news {
        display: block;   /* drops the grid: one track, form first */
        max-width: 440px;
        /* Stacked, the page is meant to scroll: undo the viewport-height cap and
         * the fixed-bar clearance the two-column layout used to avoid scrolling. */
        height: auto;
        margin-top: 0;   /* the brand's own 5% takes over again below */
        padding-bottom: 0;
    }
    .login-columns.has-news > .login-col-form {
        animation: none;   /* nothing moves sideways when stacked */
    }
    .login-columns.has-news > .login-news {
        margin-top: 0;
    }
    .login-columns.has-news > .login-col-form > .brand {
        margin-top: 5%;
    }
    .login-columns.has-news > .login-col-form > .page-login-main {
        /* Back to the single-column card. */
        max-width: 440px;
        width: calc(100% - 40px);
        margin-left: auto;
        margin-right: auto;
    }
    .login-columns.has-news > .login-news {
        top: 0;
        width: calc(100% - 40px);
        margin: 0 auto 28px;
        /* Stacked: natural height and full-size elements; the page scrolls. */
        height: auto;
    }
}

@charset "utf-8";
/* CSS Document */
.button_strength{
    display: none;
}

.strength_meter{
	height:23px;
    width: 100%;
	background:silver;
	
}
.strength_meter div{
    color:white;
	height:23px;
	width:100%;
	height:23px;
	text-align:center;
	line-height:23px;
	font-family: inherit;
}
.popover-content{
  color: #76838f !important; /*black color*/
}

.veryweak{
	background-color: #f96868;
    border-color: #f96868!important
}
.weak{
    background-color: #f2a654;
    border-color: #f2a654!important;
}
.medium{
    background-color: #57c7d4;
    border-color: #57c7d4!important;
}
.strong{
    background-color: #46be8a;
    border-color: #57c7d4!important;
}