.mnpMenuTop {
	BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 0px solid; FONT-SIZE: small; BACKGROUND: #f1f1f1; BORDER-LEFT: #999999 0px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #999999 0px solid
}
.mnpMenuSub {
	BORDER-RIGHT: #999999 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #999999 1px solid; PADDING-LEFT: 0px; BACKGROUND: #f1f1f1; PADDING-BOTTOM: 2px; BORDER-LEFT: #999999 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #999999 1px solid; POSITION: absolute
}
.mnpMenuRow {
	BORDER-RIGHT: 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: 1px solid; PADDING-LEFT: 6px; PADDING-BOTTOM: 3px; MARGIN: 0px 2px; BORDER-LEFT: 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 1px; BORDER-BOTTOM: 1px solid
}
.mnpMenuRow A {
	FONT-WEIGHT: normal; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: black; TEXT-DECORATION: none
}
.mnpMenuRow A:visited {
	FONT-WEIGHT: normal; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: black; TEXT-DECORATION: none
}
.mnpMenuRow A:hover {
	FONT-WEIGHT: normal; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: black; TEXT-DECORATION: none
}
.mnpMenuLabel {
	PADDING-RIGHT: 2px; PADDING-LEFT: 4px; BACKGROUND: #f1f1f1; PADDING-BOTTOM: 4px; COLOR: black; PADDING-TOP: 2px
}
.mnpMenuBorder {
	BACKGROUND: #999999; MARGIN: 2px 0px; OVERFLOW: hidden; HEIGHT: 1px
}
.mnpMenuArrow {
	MARGIN-TOP: 4px; POSITION: absolute
}
.mnpMenuScroller {
	BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; MARGIN: 0px 2px; OVERFLOW: hidden; BORDER-LEFT: 1px solid; PADDING-TOP: 4px; BORDER-BOTTOM: 1px solid; HEIGHT: 19px; TEXT-ALIGN: center
}
.mnpMenuScrollArea {
	BACKGROUND: none transparent scroll repeat 0% 0%; OVERFLOW: hidden
}
.mnpAds {
	BACKGROUND: none transparent scroll repeat 0% 0%
}
.mnpAds A {
	BACKGROUND: none transparent scroll repeat 0% 0%
}
.mnpAds A:link {
	BACKGROUND: none transparent scroll repeat 0% 0%
}
.mnpAds A:visited {
	BACKGROUND: none transparent scroll repeat 0% 0%
}
.mnpAds A:hover {
	BACKGROUND: none transparent scroll repeat 0% 0%
}
.mnpInherit {
	BACKGROUND: none transparent scroll repeat 0% 0%
}
.mnpMenuLabel {
	FONT: bold 70% Verdana
}
.mnpMenuRow {
	FONT: 70% Verdana
}
BODY {
	MARGIN: 0px
}

.topLinks {
	FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #666666; FONT-FAMILY: Verdana, sans-serif
}
.usaPhone {
	FONT-WEIGHT: bold; FONT-SIZE: 14px; COLOR: #0047be; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
.whiteChart {
	FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #ffffff; FONT-FAMILY: Verdana, Arial, sans-serif
}
.chartCircus {
	FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #333333; FONT-FAMILY: Verdana, sans-serif
}
.smallGreen {
	FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #7fa900; FONT-FAMILY: Verdana, sans-serif
}
.circusType1 {
	MARGIN-TOP: 0px; FONT-WEIGHT: bold; FONT-SIZE: 16px; MARGIN-BOTTOM: 2px; COLOR: #3e8cdd; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
.circusType2 {
	MARGIN-TOP: 0px; FONT-WEIGHT: normal; FONT-SIZE: 19px; MARGIN-BOTTOM: 10px; COLOR: #06498f; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
.greenCircle {
	FONT-WEIGHT: bold; FONT-SIZE: 14px; COLOR: #ffffff; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
.redHead {
	FONT-WEIGHT: normal; FONT-SIZE: 18px; COLOR: #c61d32; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
.largerText {
	FONT-WEIGHT: normal; FONT-SIZE: 14px; COLOR: #333333; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
.otherPhone {
	FONT-WEIGHT: normal; FONT-SIZE: 11px; COLOR: #003366; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
.GreenStatement {
	FONT-WEIGHT: normal; FONT-SIZE: 18px; COLOR: #8cb800; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
.BookStatement {
	FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #3e8cdd; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
.BookCopy {
	FONT-WEIGHT: normal; FONT-SIZE: 11px; COLOR: #333333; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
.BookPrice {
	FONT-WEIGHT: bold; FONT-SIZE: 14px; COLOR: #f46400; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
.newsheadlineOrange {
	FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #f46400; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
.newsheadlineBlue {
	FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #3e8cdd; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
.newsText {
	FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #333333; FONT-FAMILY: Verdana, sans-serif
}
#contestWinners {
	BORDER-TOP-WIDTH: 0px; MARGIN-TOP: 0px; BORDER-LEFT-WIDTH: 0px; FLOAT: left; BORDER-BOTTOM-WIDTH: 0px; MARGIN-BOTTOM: 10px; WIDTH: 473px; BORDER-RIGHT-WIDTH: 0px
}
#currentLeaders {
	BORDER-TOP-WIDTH: 0px; MARGIN-TOP: 0px; BORDER-LEFT-WIDTH: 0px; FLOAT: right; BORDER-BOTTOM-WIDTH: 0px; MARGIN-BOTTOM: 10px; WIDTH: 210px; BORDER-RIGHT-WIDTH: 0px
}
.headline {
	MARGIN-TOP: 0px; FONT-WEIGHT: bold; FONT-SIZE: 30px; MARGIN-BOTTOM: 15px; COLOR: #0047be; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
.resultsSubject {
	FONT-WEIGHT: normal; FONT-SIZE: 11px; COLOR: #606060; FONT-FAMILY: Verdana, sans-serif
}
.resultsStandings {
	FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #606060; FONT-FAMILY: Verdana, sans-serif
}
.resultsPrizes {
	FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #606060; FONT-FAMILY: Verdana, sans-serif
}
.doYou {
	FONT-WEIGHT: bold; FONT-SIZE: 12px; MARGIN-BOTTOM: -5px; COLOR: #0047be; FONT-FAMILY: Trebuchet MS, Arial, sans-serif; TEXT-ALIGN: left
}
.kingLink {
	FONT-WEIGHT: bold; FONT-SIZE: 20px; COLOR: #f46400; FONT-FAMILY: Trebuchet MS, Arial, sans-serif; TEXT-ALIGN: left
}
.contestLinks {
	FONT-WEIGHT: normal; FONT-SIZE: 10px; COLOR: #606060; FONT-FAMILY: Verdana, sans-serif; TEXT-ALIGN: left
}
P {
	MARGIN-TOP: 25px
}
H1 {
	MARGIN-TOP: 0px; FONT-WEIGHT: bold; FONT-SIZE: 16px; MARGIN-BOTTOM: 0px; COLOR: #3e8cdd; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
H2 {
	MARGIN-TOP: -2px; FONT-WEIGHT: normal; FONT-SIZE: 19px; MARGIN-BOTTOM: 13px; COLOR: #06498f; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
.h2toolbar {
	MARGIN-TOP: -2px; FONT-WEIGHT: normal; FONT-SIZE: 19px; MARGIN-BOTTOM: -3px; COLOR: #06498f; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
H3 {
	MARGIN-TOP: 0px; FONT-WEIGHT: bold; FONT-SIZE: 14px; MARGIN-BOTTOM: -6px; COLOR: #f46400; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
.stepName {
	MARGIN-TOP: 0px; FONT-WEIGHT: bold; FONT-SIZE: 14px; COLOR: #8d8d8d; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
UL {
	MARGIN-TOP: 7px; LIST-STYLE-POSITION: outside; LIST-STYLE-TYPE: square
}
UL LI {
	PADDING-LEFT: 0px; FONT-SIZE: 12px; MARGIN-BOTTOM: 10px; COLOR: #ff6600; PADDING-TOP: 0px; FONT-FAMILY: Trebuchet MS, Verdana, sans-serif
}
OL {
	MARGIN-TOP: 7px; LIST-STYLE-POSITION: outside; LIST-STYLE-TYPE: decimal
}
OL LI {
	PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 12px; MARGIN-BOTTOM: 10px; COLOR: #333333; PADDING-TOP: 0px; FONT-FAMILY: Trebuchet MS, Verdana, sans-serif
}
.list_text {
	FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #333333; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
.list_text_sm {
	FONT-WEIGHT: normal; FONT-SIZE: 11px; COLOR: #333333; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
.list_text_ol {
	FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #333333; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
A.effect1:link {
	COLOR: #003366; TEXT-DECORATION: none
}
A.effect1:active {
	COLOR: #003366; TEXT-DECORATION: none
}
A.effect1:visited {
	COLOR: #003366; TEXT-DECORATION: none
}
A.effect1:hover {
	COLOR: #ff6600; TEXT-DECORATION: underline
}
A.effect2:link {
	COLOR: #f46400; TEXT-DECORATION: none
}
A.effect2:active {
	COLOR: #f46400; TEXT-DECORATION: none
}
A.effect2:visited {
	COLOR: #f46400; TEXT-DECORATION: none
}
A.effect2:hover {
	COLOR: #f46400; TEXT-DECORATION: none
}
A.effect3:link {
	COLOR: #003366; TEXT-DECORATION: none
}
A.effect3:active {
	COLOR: #003366; TEXT-DECORATION: none
}
A.effect3:visited {
	COLOR: #003366; TEXT-DECORATION: none
}
A.effect3:hover {
	COLOR: #003366; TEXT-DECORATION: underline
}
A.effect4:link {
	COLOR: #0047be; TEXT-DECORATION: none
}
A.effect4:active {
	COLOR: #0047be; TEXT-DECORATION: none
}
A.effect4:visited {
	COLOR: #0047be; TEXT-DECORATION: none
}
A.effect4:hover {
	COLOR: #0047be; TEXT-DECORATION: underline
}
A.effect5:link {
	COLOR: #ffffff; TEXT-DECORATION: none
}
A.effect5:active {
	COLOR: #ffffff; TEXT-DECORATION: none
}
A.effect5:visited {
	COLOR: #ffffff; TEXT-DECORATION: none
}
A.effect5:hover {
	COLOR: #ffffff; TEXT-DECORATION: underline
}
A.effect6:link {
	COLOR: #333333; TEXT-DECORATION: none
}
A.effect6:active {
	COLOR: #333333; TEXT-DECORATION: none
}
A.effect6:visited {
	COLOR: #333333; TEXT-DECORATION: none
}
A.effect6:hover {
	COLOR: #606060; TEXT-DECORATION: none
}
A.effect7:link {
	COLOR: #666666; TEXT-DECORATION: none
}
A.effect7:active {
	COLOR: #666666; TEXT-DECORATION: none
}
A.effect7:visited {
	COLOR: #666666; TEXT-DECORATION: none
}
A.effect7:hover {
	COLOR: #666666; TEXT-DECORATION: underline
}
A.effect10:link {
	COLOR: #666666; TEXT-DECORATION: none
}
A.effect10:active {
	COLOR: #666666; TEXT-DECORATION: none
}
A.effect10:visited {
	COLOR: #666666; TEXT-DECORATION: none
}
A.effect10:hover {
	COLOR: #666666; TEXT-DECORATION: underline
}
A.effect11:link {
	COLOR: #0047be; TEXT-DECORATION: none
}
A.effect11:active {
	COLOR: #0047be; TEXT-DECORATION: none
}
A.effect11:visited {
	COLOR: #0047be; TEXT-DECORATION: none
}
A.effect11:hover {
	COLOR: #0047be; TEXT-DECORATION: none
}
A.effect12:link {
	COLOR: #003366; TEXT-DECORATION: underline
}
A.effect12:active {
	COLOR: #003366; TEXT-DECORATION: underline
}
A.effect12:visited {
	COLOR: #003366; TEXT-DECORATION: underline
}
A.effect12:hover {
	COLOR: #ff6600; TEXT-DECORATION: underline
}
A.effect13:link {
	COLOR: #0047be; TEXT-DECORATION: underline
}
A.effect13:active {
	COLOR: #0047be; TEXT-DECORATION: underline
}
A.effect13:visited {
	COLOR: #0047be; TEXT-DECORATION: underline
}
A.effect13:hover {
	COLOR: #0047be; TEXT-DECORATION: underline
}
A {
	COLOR: #003366; TEXT-DECORATION: none
}
A:hover {
	COLOR: #ff6600; TEXT-DECORATION: underline
}
.subhead {
	MARGIN-TOP: 20px; FONT-WEIGHT: bold; FONT-SIZE: 14px; MARGIN-BOTTOM: 2px; COLOR: #f46400; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
.question {
	MARGIN-TOP: 0px; FONT-WEIGHT: normal; FONT-SIZE: 12px; MARGIN-BOTTOM: 2px; COLOR: #0047be; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
.copy {
	MARGIN-TOP: 0px; FONT-SIZE: 12px; COLOR: #333333; LINE-HEIGHT: normal; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
.copyHighlight {
	MARGIN-TOP: 0px; FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #0047be; LINE-HEIGHT: normal; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
.pairIndicator {
	MARGIN-TOP: 0px; FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #003366; LINE-HEIGHT: normal; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
.note {
	MARGIN-TOP: 0px; FONT-SIZE: 10px; MARGIN-BOTTOM: 0px; COLOR: #333333; LINE-HEIGHT: normal; FONT-FAMILY: Verdana, Arial, sans-serif
}
.notification {
	MARGIN-TOP: 0px; FONT-WEIGHT: bold; FONT-SIZE: 10px; MARGIN-BOTTOM: 0px; COLOR: #82ad00; LINE-HEIGHT: normal; FONT-FAMILY: Verdana, Arial, sans-serif
}
.toolbar {
	MARGIN-TOP: 0px; FONT-SIZE: 10px; MARGIN-BOTTOM: 0px; COLOR: #0047be; LINE-HEIGHT: normal; FONT-FAMILY: Verdana, Arial, sans-serif
}
.smDescriptions {
	MARGIN-TOP: 10px; FONT-SIZE: 10px; MARGIN-BOTTOM: 0px; COLOR: #333333; LINE-HEIGHT: 15px; FONT-FAMILY: Verdana, Arial, sans-serif
}
.contactNumbers {
	MARGIN-TOP: 10px; FONT-SIZE: 11px; MARGIN-BOTTOM: 0px; COLOR: #333333; LINE-HEIGHT: 22px; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
.more {
	FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #003366; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
.tryPractice {
	FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #06498f; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
.chartHeader {
	FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #ffffff; TEXT-INDENT: 5px; FONT-FAMILY: Verdana, sans-serif; TEXT-ALIGN: left
}
.chartSub {
	FONT-SIZE: 11px; COLOR: #ffffff; FONT-FAMILY: Verdana, sans-serif; TEXT-ALIGN: left
}
.chartLinks {
	FONT-SIZE: 11px; COLOR: #003366; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
.stepsNav {
	FONT-SIZE: 11px; COLOR: #003366; FONT-FAMILY: Verdana, Arial, sans-serif
}
.miniLinks {
	FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #0047be; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
.asteriskBig {
	MARGIN-TOP: 0px; FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #d40101; LINE-HEIGHT: normal; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
.asteriskSmall {
	MARGIN-TOP: 0px; FONT-SIZE: 10px; COLOR: #d40101; LINE-HEIGHT: normal; FONT-FAMILY: Verdana, Arial, sans-serif
}
#next {
	BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; FLOAT: right; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 420px; BORDER-RIGHT-WIDTH: 0px
}
#pips {
	BORDER-TOP-WIDTH: 0px; MARGIN-TOP: 10px; BORDER-LEFT-WIDTH: 0px; FLOAT: left; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 420px; BORDER-RIGHT-WIDTH: 0px
}
#competitiveEdge {
	BORDER-TOP-WIDTH: 0px; MARGIN-TOP: 5px; BORDER-LEFT-WIDTH: 0px; FLOAT: right; BORDER-BOTTOM-WIDTH: 0px; MARGIN-BOTTOM: 10px; WIDTH: 204px; BORDER-RIGHT-WIDTH: 0px
}
.featureSubMain {
	MARGIN-TOP: 0px; FONT-WEIGHT: bold; FONT-SIZE: 13px; COLOR: #06498f; LINE-HEIGHT: normal; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
.featureSubSecondary {
	MARGIN-TOP: 0px; FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #ffffff; LINE-HEIGHT: normal; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
.featureCopyMain {
	MARGIN-TOP: 0px; FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #333333; LINE-HEIGHT: normal; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
.featureCopySecondary {
	MARGIN-TOP: 0px; FONT-WEIGHT: normal; FONT-SIZE: 11px; COLOR: #333333; LINE-HEIGHT: normal; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
.openAccountLink {
	FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #003366; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
.featureTopic {
	MARGIN-TOP: 0px; FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #ffffff; LINE-HEIGHT: normal; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
.FormRequired {
	FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #333333; FONT-FAMILY: Verdana, Arial, sans-serif
}
.FormNormal {
	FONT-WEIGHT: normal; FONT-SIZE: 11px; COLOR: #333333; FONT-FAMILY: Verdana, Arial, sans-serif
}
.forexVS {
	FONT-WEIGHT: bold; FONT-SIZE: 14px; COLOR: #06498f; FONT-FAMILY: Trebuchet MS, Arial, sans-serif
}
.Ariel_10N {
	FONT: 10px Arial, Helvetica, sans-serif
}
.Verdana_9N {
	FONT: 9px Verdana, Arial, Helvetica, sans-serif
}
.Verdana_10N {
	FONT: 10px/14px Verdana, Arial, Helvetica, sans-serif
}
.Verdana_11N {
	FONT: 11px/14px Verdana, Arial, Helvetica, sans-serif
}
.Verdana_11B {
	FONT: bold 11px Verdana, Arial, Helvetica, sans-serif
}
.Verdana_12N {
	FONT: 12px Verdana, Arial, Helvetica, sans-serif
}
.Verdana_12B {
	FONT: bold 12px Verdana, Arial, Helvetica, sans-serif
}
.Verdana_14B {
	FONT: bold 14px Verdana, Arial, Helvetica, sans-serif
}
.Verdana_14N {
	FONT: 14px Verdana, Arial, Helvetica, sans-serif
}
.TrebuchetMS {
	FONT: 16px/20px "trebuchet ms", arial, helvetica, sans-serif
}


/* La ventana modal que reemplaza a window.showModalDialog. Ver App_Client_Code/modal.js.
   overflow:hidden es DOBLE proposito: recorta las esquinas redondeadas del iframe, y ademas
   impide que el dialogo mismo tenga barra de scroll -- el unico scroll que debe existir es el
   del contenido adentro del iframe, no el del marco. */
.fcc-modal {
    padding: 0;
    border: none;
    border-radius: 14px;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.45), 0 4px 14px rgba(15, 23, 42, 0.22);
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    animation: fccModalIn 0.16s ease-out;
}
@keyframes fccModalIn {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}
.fcc-modal::backdrop {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.fcc-modal-close {
    position: absolute;
    top: 2px;
    right: 4px;
    z-index: 1;
    width: 22px;
    height: 22px;
    line-height: 18px;
    padding: 0;
    cursor: pointer;
    border: 1px solid #A0A0A0;
    background: #F0F0F0;
    font: bold 14px Verdana, Arial, sans-serif;
}
.fcc-modal-close:hover {
    background: #E0E0E0;
}

/* El camino de respaldo, para donde no haya <dialog> nativo. */
.fcc-modal-back {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
}
.fcc-modal-back .fcc-modal {
    position: relative;
}


/* ==========================================================================
   TEMA MODERNO 2026 -- Friendly Check Cashing
   --------------------------------------------------------------------------
   La interfaz original es de 2007: Trebuchet MS, gradientes DXImageTransform,
   bordes de 1px grises y tablas por todos lados. Esto la moderniza SIN tocar
   la estructura: se reescribe la apariencia sobre los MISMOS nombres de clase
   que ya usan las paginas (.doYou, .BookStatement, .mnpMenu*, .question...),
   asi que nada que dependa de ellos se rompe. Va al FINAL de la hoja a
   proposito: en igualdad de especificidad, la regla que viene despues gana.
   ========================================================================== */

:root {
    --brand:        #1b4fa0;   /* azul de la marca, heredado de #06498f/#003366 */
    --brand-strong: #12386f;
    --brand-bright: #2563eb;
    --brand-050:    #eef4fc;
    --brand-100:    #dce8f8;
    --accent:       #ef6c00;   /* el naranja de siempre, apenas mas limpio */
    --ink:          #1f2a37;
    --muted:        #5b6b7f;
    --line:         #e3e8ef;
    --app-bg:       #eef1f6;
    --card:         #ffffff;
    --radius:       8px;
    --radius-sm:    6px;
    --shadow:       0 1px 2px rgba(16,32,64,.06), 0 4px 16px rgba(16,32,64,.08);
    --font:         "Segoe UI", system-ui, -apple-system, "Trebuchet MS", Arial, sans-serif;
}

html, body {
    font-family: var(--font);
    color: var(--ink);
    background: var(--app-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body { margin: 0; }

/* --- barra superior, franja de marca ------------------------------------ */
.fccTop {
    height: 6px !important;
    background: linear-gradient(90deg, var(--brand-strong), var(--brand-bright)) !important;
    padding: 0 !important;
}

/* --- fila de categorias de busqueda ------------------------------------- */
.fccNav {
    background: var(--card) !important;
    border-bottom: 1px solid var(--line) !important;
    padding: 8px 16px !important;
    height: auto !important;
}
.fccNav label.doYou {
    display: inline-block;
    font-family: var(--font);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--brand);
    margin: 0 2px;
    padding: 5px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.fccNav label.doYou:hover { background: var(--brand-050) !important; color: var(--brand-strong); }

/* --- fila de la caja de busqueda ---------------------------------------- */
.fccSearch {
    background: var(--brand-050) !important;
    border-bottom: 1px solid var(--line) !important;
    padding: 12px 16px !important;
    text-align: right;
}
.fccSearch .doYou {
    color: var(--muted);
    font-weight: 600;
    font-size: 12.5px;
    margin-right: 6px;
    margin-bottom: 0;
}

/* --- barra lateral (menu) ----------------------------------------------- */
.fccSide {
    background: var(--card) !important;
    border: none !important;
    border-right: 1px solid var(--line) !important;
    padding: 10px 0 0 0 !important;
    vertical-align: top;
}
.mnpMenuTop {
    background: var(--card) !important;
    border: none !important;
    font-family: var(--font) !important;
    padding-top: 4px !important;
}
.mnpMenuLabel {
    font-family: var(--font) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted) !important;
    background: transparent !important;
    padding: 12px 14px 4px 14px !important;
}
.mnpMenuRow {
    font-family: var(--font) !important;
    font-size: 13px !important;
    color: var(--ink) !important;
    background: transparent !important;
    border: none !important;
    border-left: 3px solid transparent !important;
    margin: 1px 6px !important;
    padding: 7px 12px !important;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.mnpMenuRow:hover {
    background: var(--brand-050) !important;
    border-left-color: var(--brand-bright) !important;
}
.mnpMenuRow a, .mnpMenuRow a:visited, .mnpMenuRow a:hover {
    color: var(--ink) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}
.mnpMenuBorder {
    background: var(--line) !important;
    height: 1px !important;
    margin: 6px 12px !important;
}
.mnpMenuSub {
    background: var(--card) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius);
    box-shadow: var(--shadow) !important;
    padding: 4px !important;
}
.mnpMenuArrow { margin-top: 6px !important; opacity: .5; }

/* --- pie ---------------------------------------------------------------- */
.fccFoot {
    height: 4px !important;
    background: linear-gradient(90deg, var(--brand-bright), var(--brand-strong)) !important;
    padding: 0 !important;
}

/* --- el marco de contenido ---------------------------------------------- */
#mainframecontainer { background: var(--app-bg); padding: 0; }
#mframe { background: var(--card); }

/* --- controles de formulario (la transformacion mas visible) ------------ */
input[type="text"], input[type="password"], input[type="number"],
input[type="email"], textarea, select, input.question {
    font-family: var(--font) !important;
    font-size: 13px !important;
    color: var(--ink) !important;
    background: var(--card) !important;
    border: 1px solid #cdd6e2 !important;
    border-radius: var(--radius-sm) !important;
    padding: 7px 10px !important;
    outline: none;
    transition: border-color .12s ease, box-shadow .12s ease;
    box-sizing: border-box;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus,
textarea:focus, select:focus, input.question:focus {
    border-color: var(--brand-bright) !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.15) !important;
}
input:disabled, textarea:disabled, select:disabled {
    background: #f5f7fa !important;
    color: #9aa7b6 !important;
}
textarea { line-height: 1.5; resize: vertical; }

/* botones: submit, button, y los <input> con clase de titulo que son botones */
input[type="submit"], input[type="button"], button, input.BookStatement[type="submit"], input.BookStatement[type="button"] {
    font-family: var(--font) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    background: var(--brand-bright) !important;
    border: 1px solid var(--brand-bright) !important;
    border-radius: var(--radius-sm) !important;
    padding: 7px 16px !important;
    cursor: pointer;
    transition: background .12s ease, box-shadow .12s ease, transform .04s ease;
    box-shadow: 0 1px 2px rgba(16,32,64,.12);
}
input[type="submit"]:hover, input[type="button"]:hover, button:hover,
input.BookStatement[type="submit"]:hover, input.BookStatement[type="button"]:hover {
    background: var(--brand) !important;
}
input[type="submit"]:active, input[type="button"]:active, button:active { transform: translateY(1px); }
input[type="submit"]:disabled, input[type="button"]:disabled, button:disabled {
    background: #b8c4d4 !important;
    border-color: #b8c4d4 !important;
    color: #eef1f6 !important;
    cursor: default;
    box-shadow: none;
}

/* --- tipografia de los reportes ----------------------------------------- */
.h2toolbar, H2 {
    font-family: var(--font) !important;
    font-weight: 600 !important;
    color: var(--brand-strong) !important;
    letter-spacing: -.01em;
}
.BookStatement {
    font-family: var(--font) !important;
    font-weight: 600 !important;
    color: var(--brand) !important;
}
.BookCopy, .list_text, .copy {
    font-family: var(--font) !important;
    color: var(--ink) !important;
}
.BookPrice { font-family: var(--font) !important; color: var(--accent) !important; font-weight: 700 !important; }
.toolbar   { font-family: var(--font) !important; color: var(--brand) !important; font-size: 12px !important; }
.doYou     { font-family: var(--font) !important; }
.chartHeader, .chartSub { font-family: var(--font) !important; }

/* Encabezado de reporte: la barra de titulo que arman los reportes, y que SIEMPRE es un DIV
   ("H=document.createElement('DIV'); H.className='h2toolbar'", en los cinco reportes que la usan).

   🛑 EL SELECTOR VA CON div, Y NO ES UN DETALLE. La misma clase se usa tambien en <label> --
   cinco veces en la planilla del CTR y dos en los reportes -- y ahi esta regla los convertia en
   bloque con 24px de relleno y un borde: la caja de cada etiqueta pasaba de 22px de alto a 52.

   En el CTR eso desarma la planilla ENTERA. Sus 28 rotulos se posicionan con "position:relative"
   y un "top" negativo, o sea RELATIVO AL FLUJO: cada etiqueta que crece empuja hacia abajo a
   todas las de abajo, y el error se acumula. Reportado el 04/09/2026 -- los datos del CTR caian
   corridos, cada vez mas abajo, hasta salirse de la hoja. */
div.h2toolbar {
    display: block;
    padding: 14px 0 10px 0;
    border-bottom: 2px solid var(--brand-100);
    margin-bottom: 12px;
}

/* --- tablas de datos (las grillas de los reportes) ---------------------- */
/* Suave a proposito: mejora tipografia, cabecera y filas sin cambiar el
   ancho ni la estructura que los reportes fijan con atributos. */
table.BookStatement, .Container table, table.Grid {
    border-collapse: collapse;
}
td.BookStatement, th.BookStatement {
    background: var(--brand-050);
    color: var(--brand-strong) !important;
    font-weight: 600 !important;
    border-bottom: 2px solid var(--brand-100) !important;
    padding: 8px 10px !important;
}
tr.BookCopy > td, td.BookCopy {
    padding: 7px 10px !important;
    border-bottom: 1px solid var(--line) !important;
}

/* ==========================================================================
   LA PLANILLA DEL CTR (PopupForm, "ctrtransactions")
   --------------------------------------------------------------------------
   🛑 CADA ROTULO LLEVA SU top MEDIDO CONTRA EL FORMULARIO (04/09/2026), y aca
   se fija lo que hace que ese top signifique siempre lo mismo:

     - la caja mide lo que la imagen, 760x1000, y recorta: sin eso debajo
       quedaban ~500px de nada, scroll al pedo en pantalla y una carilla en
       blanco en el papel;
     - cada rotulo es un BLOQUE DE ALTO CERO con position:relative. Alto cero
       para que no ocupe lugar en el flujo: los 28 arrancan todos en el borde
       de arriba de la caja, y "top" es la distancia a ese borde, sin que
       importe la fuente, el tema, el navegador ni cuantos rotulos haya. La
       imagen va despues de ellos y arranca tambien en el borde;
     - las alturas de linea de los tres tipos quedan fijas (15, 26 y 35) para
       que el glifo caiga a una distancia conocida del top. Y label.h2toolbar
       NO recibe el relleno, el borde ni el display:block que el tema le pone
       a la barra de titulo de los reportes (que es un DIV): ese fue el primer
       motivo por el que la planilla se desarmo;
     - cada digito del SSN va en una celda del ancho del cuadrito del
       formulario (21,2px) y centrado, en vez de separado con espacios: el
       ancho de un espacio depende de la fuente y a los nueve digitos ya
       caian sobre las rayitas.

   Por que no relativo al flujo, como estaba desde 2003: cada rotulo caia
   donde terminaba el anterior, asi que la altura de CUALQUIERA movia a todos
   los que seguian. El motor de IE en que se diseno da 18px por renglon donde
   Chrome da 15, y no hay numero que cierre en los dos. (Se probo tambien con
   position:absolute: en pantalla identico. Se quedo el relativo porque los
   bloques de alto cero fragmentan igual que el flujo normal al imprimir.)

   🛑 LA IMPRESION SE ROMPIA POR OTRA COSA: LA HOJA APAISADA. La planilla mide
   1000px = 10,42"; una carta vertical con margen de 0,25" da 10,5" y entra,
   una apaisada da 8" y NO. Y Chrome recuerda el ultimo Layout usado: si
   alguien imprimio un reporte ancho en Landscape, el CTR siguiente sale
   apaisado solo. Ahi la imagen -- que no se puede partir -- se va entera a
   la hoja siguiente y los 28 valores quedan en la anterior, flotando en
   blanco. Reproducido en el PDF: 3 hojas, la imagen sola en la ultima.
   La pagina del CTR ahora FUERZA vertical (@page size: portrait, inyectado
   desde PopupForm.aspx.cs porque @page no se acota a una clase). La regla de
   abajo es la red por si un navegador ignora eso: apaisado, la planilla se
   achica al 74% (740px) y entra igual, con sus 28 valores encima.
   ========================================================================== */
.ctr-hoja { position: relative; width: 760px; height: 1000px; overflow: hidden; }
.ctr-hoja > div { line-height: 0; margin: 0; padding: 0; }
.ctr-hoja > div > span { display: block; height: 0; }
.ctr-hoja > img { display: block; }
.ctr-hoja .ctr-dig { display: inline-block; width: 21.2px; text-align: center; }
.ctr-hoja label { line-height: 15px; }
@media print and (orientation: landscape) {
    .ctr-hoja { zoom: 0.74; }
}
.ctr-hoja label.h2toolbar {
    line-height: 26px;
    /* y ninguna de las tres cosas que le pone la barra de titulo de los reportes */
    display: inline; padding: 0; border: 0; margin: 0;
}
.ctr-hoja label.headline { line-height: 35px; margin: 0; }

/* EN PAPEL, LA PLANILLA EMPIEZA ARRIBA DE UNA HOJA. Siempre.

   Arriba de ella van la ficha del cliente y una imagen por cheque (280px cada una), asi que
   donde arranca la planilla depende de cuantos cheques tenga el CTR. Con uno arrancaba a media
   hoja y salia PARTIDA EN DOS -- la mitad de la planilla en una carilla y la otra mitad en la
   siguiente. Con varios cheques, en cualquier lado.

   Arrancando en el borde de arriba el calculo cierra y no depende de nada: la hoja carta con
   margen de 0,25" deja 10,5" utiles (1008px) y la planilla mide 1000px. Entra, con ocho pixeles
   de sobra. Ese margen chico es la otra mitad del arreglo y esta puesto en TemplateReport.aspx;
   con los 0,4" que el navegador pone por defecto NO entra.

   El "avoid" de adentro no es repetir lo mismo: cubre el dia que alguien agregue algo entre la
   tabla y la caja, o que el encabezado del navegador coma unos pixeles. */
@media print {
    table.ctr-tabla { page-break-before: always; break-before: page; }
    .ctr-hoja { page-break-inside: avoid; break-inside: avoid; }

    /* LA PLANILLA OCUPA LA HOJA CASI EXACTA: 1000 de los 1008px que deja una carta vertical
       con margen de 0,25". Lo que venga detras se va a una HOJA NUEVA EN BLANCO -- y detras
       venian los 2px de relleno de la celda, los 2px de separacion de la tabla y dos <br>
       que PopupForm agrega al final del cuerpo (1006 + ~36px = 3 hojas, la ultima vacia).
       En papel nada de eso aporta: fuera. Medido en el PDF: de 3 hojas a 2. */
    table.ctr-tabla { border-spacing: 0; }
    table.ctr-tabla > tbody > tr > td { padding: 0; }
    table.ctr-tabla ~ br { display: none; }
}

/* enlaces generales, mas sobrios */
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-strong); text-decoration: underline; }

/* barra de scroll fina y discreta en navegadores modernos */
* { scrollbar-width: thin; scrollbar-color: #c4cfdd transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #c4cfdd; border-radius: 6px; border: 2px solid var(--app-bg); }
::-webkit-scrollbar-thumb:hover { background: #aab8cc; }

/* el textbox oculto de estado no debe verse como campo */
#Selection { display: none !important; }

/* Boton de cerrar del modal: la regla moderna de botones (azul, con !important) se lo comia.
   Aca vuelve a ser un boton de cerrar discreto -- circulo gris, la X se pone roja al pasar. */
button.fcc-modal-close {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 3 !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    line-height: 28px !important;
    text-align: center !important;
    border: none !important;
    border-radius: 50% !important;
    background: rgba(16, 32, 64, .06) !important;
    color: #5b6b7f !important;
    font: 400 19px/28px var(--font) !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background .12s ease, color .12s ease !important;
}
button.fcc-modal-close:hover {
    background: rgba(212, 1, 1, .10) !important;
    color: #d40101 !important;
}


/* ==========================================================================
   PANTALLA DE CRITERIOS DE REPORTE (SelectionForm) -- 04/09/2026
   --------------------------------------------------------------------------
   Tarjetas blancas sobre el fondo de la aplicacion, rotulo arriba de cada
   campo, los botones Go pegados a su campo, y dos calendarios desplegados
   (App_Client_Code/fecha.js). Todo con prefijo sf- / fcc-cal- para no pisar
   nada de las otras pantallas.
   ========================================================================== */
.sf {
    min-height: 100%;
    background: var(--app-bg);
    box-sizing: border-box;
    padding: 22px 28px 40px;
}
.sf-inner { max-width: 1120px; margin: 0 auto; }

.sf-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}
.sf-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
}
.sf-title {
    margin: 0;
    font-family: var(--font) !important;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--brand-strong) !important;
}
.sf-sub { margin: 4px 0 0; font-size: 13px; color: var(--muted); }

input.sf-primary {
    padding: 11px 28px !important;
    font-size: 14px !important;
    border-radius: 999px !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, .28) !important;
    white-space: nowrap;
}

.sf-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.sf-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 18px 20px 20px;
    min-width: 0;
}
.sf-card-title {
    margin: 0 0 14px;
    font-family: var(--font) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted) !important;
}

.sf-field { margin-bottom: 14px; }
.sf-field:last-child { margin-bottom: 0; }
.sf-field-top { margin-top: 14px; }
.sf-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
}
.sf-control, select.sf-control { display: block; width: 100%; }

/* un campo y su boton en la misma linea, a la misma altura */
.sf-inline { display: flex; align-items: stretch; gap: 8px; }
.sf-inline .sf-control { flex: 1 1 auto; min-width: 0; width: auto; }
.sf-inline .sf-op { flex: 0 0 78px; width: 78px; }
.sf-inline .sf-year { flex: 0 0 96px; width: 96px; }
input.sf-go { flex: 0 0 auto !important; padding: 7px 18px !important; }

.sf-checks { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.sf-check, .sf-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
}
.sf-check input, .sf-radio input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand-bright); }
.sf-check label { cursor: pointer; }
.sf-check input:disabled + label { color: #9aa7b6; }
.sf-radios { display: flex; gap: 18px; margin-bottom: 12px; }

/* la lista de items / usuarios que llena el servidor, con su boton Select All */
.sf-list {
    max-height: 300px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 6px 12px 10px;
    background: #fbfcfe;
    font-size: 13px;
    line-height: 1.9;
}
.sf-list:empty { display: none; }
.sf-list label { font-weight: 500 !important; color: var(--ink) !important; margin-left: 6px; }
.sf-list input[type="checkbox"] { accent-color: var(--brand-bright); vertical-align: -2px; }
.sf-list input[type="button"] { padding: 4px 14px !important; font-size: 12px !important; }

.sf-date { margin-bottom: 12px; }
.sf-oculto { display: none !important; }

@media (max-width: 820px) {
    .sf-grid { grid-template-columns: 1fr; }
    .sf-head { flex-direction: column; align-items: flex-start; }
}

/* --- el calendario desplegado (fecha.js) -------------------------------- */
.fcc-cal { user-select: none; }
.fcc-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.fcc-cal-title { font-size: 14px; font-weight: 700; color: var(--brand-strong); }
.fcc-cal-nav { display: flex; gap: 6px; }
.fcc-cal-btn {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--brand-050);
    color: var(--brand);
    font-size: 18px; line-height: 28px; text-align: center;
    cursor: pointer;
    transition: background .12s ease;
}
.fcc-cal-btn:hover, .fcc-cal-btn:focus { background: var(--brand-100); outline: none; }
.fcc-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.fcc-cal-dow {
    text-align: center;
    font-size: 11px; font-weight: 700;
    color: var(--muted);
    text-transform: uppercase; letter-spacing: .04em;
    padding: 4px 0 6px;
}
.fcc-cal-day {
    height: 34px; line-height: 34px;
    text-align: center;
    border-radius: 8px;
    font-size: 13px; font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    transition: background .1s ease;
}
.fcc-cal-day:hover, .fcc-cal-day:focus { background: var(--brand-050); outline: none; }
.fcc-cal-day.otro { color: #b3bcc9; }
.fcc-cal-day.hoy { box-shadow: inset 0 0 0 1px var(--brand-bright); }
.fcc-cal-day.sel, .fcc-cal-day.sel:hover { background: var(--brand-bright); color: #fff; font-weight: 700; }
.fcc-cal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.fcc-cal-sel { font-size: 12px; color: var(--muted); }
.fcc-cal-hoy { font-size: 12px; font-weight: 600; color: var(--brand); cursor: pointer; }
.fcc-cal-hoy:hover, .fcc-cal-hoy:focus { text-decoration: underline; outline: none; }