:root {
  --cassiopeia-color-primary: white !important;
  --cassiopeia-color-hover: white !important;
}

a {
	text-decoration: none !important;
}
/*
span { 
    background-color: white; 
}
*/
.mensaje {
	text-align: justify;
	margin: auto;
	width: 50%;
	font-size: medium;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	line-height: 150%;
}
/* =========================================================
   ROMS buttons – unify to HOME style (NO class renames)
   Replaces the old mixed/duplicated definitions.
   ========================================================= */

/* Shared “system” look */
:root{
  --roms-btn-border: #0b1a4a;
  --roms-btn-text:   #0b1a4a;
  --roms-btn-hover-bg:#0b1a4a;
  --roms-btn-hover-text:#ffffff;

  --roms-danger: #b10f2e;
  --roms-lightblue: #5b9fb8;
  --roms-green: #5bb75b;
  --roms-orange: rgba(244,150,16,0.9);
  --roms-yellow: #ffe600;
  --roms-gray: rgb(235,233,233);
}

/* Block helpers (no visual style here) */
.btn-block-ssl,
.btn-block-ssl-sm{
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* ===== BASE STYLE (same visual language as Home) ===== */
.btn-ssl,
.btn-ssl-sm,
.btn-ssl-danger,
.btn-ssl-danger-sm,
.btn-ssl-lightblue,
.btn-roms-sm,
.btn-roms-red-sm,
.btn-roms-green-sm,
.btn-roms-orange-sm,
.btn-roms-lightblue-sm,
.btn-results,
.btn-enquiry{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* Keep your existing “button feel” but modernized */
  padding: 12px 14px !important;
  min-height: 50px;            /* default size */
  line-height: 1 !important;
  white-space: normal;         /* allows wrap if needed */
  text-decoration: none !important;

  border: 2px solid var(--roms-btn-border) !important;
  border-left: 2px solid var(--roms-btn-border) !important; /* remove the old “thick left bar” look */
  border-radius: 12px !important;

  background: #ffffff !important;
  color: var(--roms-btn-text) !important;

  font-family: var(--cassiopeia-font-family-base, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;

  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

/* Hover = Home behavior */
.btn-ssl:hover,
.btn-ssl-sm:hover,
.btn-roms-sm:hover,
.btn-results:hover,
.btn-enquiry:hover{
  background: var(--roms-btn-hover-bg) !important;
  color: var(--roms-btn-hover-text) !important;
  box-shadow: 0 10px 22px rgba(11,26,74,0.18);
  transform: translateY(-1px);
}

/* Smaller buttons: keep same style, just smaller size */
.btn-ssl-sm,
.btn-ssl-danger-sm,
.btn-roms-red-sm,
.btn-roms-green-sm,
.btn-roms-orange-sm,
.btn-roms-lightblue-sm,
.btn-block-ssl-sm{
  padding: 6px 10px !important;
  min-height: 34px;
  font-size: 12px !important;
  letter-spacing: 0.16em !important;
}

/* ===== COLORED VARIANTS (keep their meaning) ===== */

/* DANGER (Logout / destructive) */
.btn-ssl-danger,
.btn-ssl-danger-sm{
  background: var(--roms-danger) !important;
  border-color: var(--roms-danger) !important;
  color: #ffffff !important;
}
.btn-ssl-danger:hover,
.btn-ssl-danger-sm:hover{
  background: var(--roms-danger) !important;
  border-color: var(--roms-danger) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(177,15,46,0.20);
  transform: translateY(-1px);
}

/* LIGHTBLUE */
.btn-ssl-lightblue,
.btn-roms-lightblue-sm{
  background: var(--roms-lightblue) !important;
  border-color: var(--roms-lightblue) !important;
  color: #ffffff !important;
}
.btn-ssl-lightblue:hover,
.btn-roms-lightblue-sm:hover{
  background: var(--roms-lightblue) !important;
  border-color: var(--roms-lightblue) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(91,159,184,0.22);
  transform: translateY(-1px);
}

/* ORANGE (full-size, matches btn-ssl-lightblue sizing) */
.btn-ssl-orange{
  background: var(--roms-orange) !important;
  border-color: rgba(244,150,16,1) !important;
  color: #ffffff !important;
}
.btn-ssl-orange:hover{
  background: var(--roms-orange) !important;
  border-color: rgba(244,150,16,1) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(244,150,16,0.22);
  transform: translateY(-1px);
}

/* GREEN */
.btn-roms-green-sm{
  background: var(--roms-green) !important;
  border-color: var(--roms-green) !important;
  color: #ffffff !important;
}
.btn-roms-green-sm:hover{
  background: var(--roms-green) !important;
  border-color: var(--roms-green) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(91,183,91,0.22);
  transform: translateY(-1px);
}

/* ORANGE */
.btn-roms-orange-sm{
  background: var(--roms-orange) !important;
  border-color: rgba(244,150,16,1) !important;
  color: #ffffff !important;
}
.btn-roms-orange-sm:hover{
  background: var(--roms-orange) !important;
  border-color: rgba(244,150,16,1) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(244,150,16,0.25);
  transform: translateY(-1px);
}

/* RED gradient legacy button: simplify to solid “danger-ish” */
.btn-roms-red-sm{
  background: var(--roms-danger) !important;
  border-color: var(--roms-danger) !important;
  color: #ffffff !important;
}
.btn-roms-red-sm:hover{
  background: var(--roms-danger) !important;
  border-color: var(--roms-danger) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(177,15,46,0.20);
  transform: translateY(-1px);
}

/* RESULTS (yellow) */
.btn-results{
  background: var(--roms-yellow) !important;
  border-color: var(--roms-yellow) !important;
  color: #000000 !important;
  letter-spacing: 0.10em !important; /* yellow usually needs less spacing for readability */
}
.btn-results:hover{
  background: var(--roms-yellow) !important;
  border-color: var(--roms-yellow) !important;
  color: #000000 !important;
  box-shadow: 0 10px 18px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}

/* ENQUIRY (light gray) */
.btn-enquiry{
  background: var(--roms-gray) !important;
  border-color: var(--roms-gray) !important;
  color: #000000 !important;
  letter-spacing: 0.10em !important;
}
.btn-enquiry:hover{
  background: var(--roms-gray) !important;
  border-color: var(--roms-gray) !important;
  color: #000000 !important;
  box-shadow: 0 10px 18px rgba(0,0,0,0.10);
  transform: translateY(-1px);
}

/* Accessibility focus */
.btn-ssl:focus-visible,
.btn-ssl-sm:focus-visible,
.btn-ssl-danger:focus-visible,
.btn-ssl-danger-sm:focus-visible,
.btn-ssl-lightblue:focus-visible,
.btn-ssl-orange:focus-visible,
.btn-roms-sm:focus-visible,
.btn-roms-red-sm:focus-visible,
.btn-roms-green-sm:focus-visible,
.btn-roms-orange-sm:focus-visible,
.btn-roms-lightblue-sm:focus-visible,
.btn-results:focus-visible,
.btn-enquiry:focus-visible{
  outline: 3px solid rgba(11,26,74,0.25);
  outline-offset: 3px;
}

/* =========================================================
   ROMS forms – boton SAVE (Submit) solido navy, distinto del
   Go Back (que se queda con el outline base de arriba).
   Muchos forms de Fabrik usan la misma clase (ej. btn-ssl-sm)
   para AMBOS botones sin diferenciarlos, asi que se apunta por
   el atributo name= que Fabrik siempre pone (name="Submit" /
   name="Goback"), combinado con la clase para ganarle en
   especificidad a la regla base .btn-ssl-sm de arriba.
   Puesto ACA (user.css, se carga en toda pagina, no depende de
   ningun template de Fabrik) para que sobreviva a cualquier
   redibujado AJAX de errores de validacion.
   ========================================================= */
button[name="Submit"].btn-ssl,
button[name="Submit"].btn-ssl-sm,
button[name="Submit"].btn-roms-sm,
input[name="Submit"].btn-ssl,
input[name="Submit"].btn-ssl-sm,
input[name="Submit"].btn-roms-sm{
  background: var(--roms-btn-border) !important;
  border-color: var(--roms-btn-border) !important;
  color: #ffffff !important;
}
button[name="Submit"].btn-ssl:hover,
button[name="Submit"].btn-ssl-sm:hover,
button[name="Submit"].btn-roms-sm:hover,
input[name="Submit"].btn-ssl:hover,
input[name="Submit"].btn-ssl-sm:hover,
input[name="Submit"].btn-roms-sm:hover{
  background: #16255c !important;
  border-color: #16255c !important;
  color: #ffffff !important;
}

/* Centrado + tamano consistente de la barra Save/Go Back de cualquier
   form de Fabrik (por defecto Fabrik la arma con justify-content-between,
   que separa los botones a los extremos en vez de agruparlos al centro).
   Mismo criterio: puesto en user.css para que sobreviva a un redibujado
   AJAX por error de validacion. */
.fabrikActions .btn-toolbar{
  justify-content: center !important;
  gap: 14px !important;
  flex-wrap: wrap;
}
.fabrikActions button[name="Submit"],
.fabrikActions button[name="Goback"],
.fabrikActions input[name="Submit"],
.fabrikActions input[name="Goback"]{
  min-height: 48px !important;
  height: 48px !important;
  min-width: 140px !important;
  padding: 0 24px !important;
  border-radius: 14px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}
/* =========================================================
   ROMS forms – Fileupload (plupload) "Add files" compacto,
   global (cualquier form/template de Fabrik).
   btn-mini es una clase de Bootstrap 2 muerta en Bootstrap 5,
   sin estilo propio, por eso el boton salia como una franja
   celeste enorme en vez de un boton chico.
   ========================================================= */
.plupload_container table{
  width: auto !important;
}
.plupload_container tfoot td{
  padding: 0 !important;
  border: 0 !important;
}
.plupload_container a.btn.btn-mini{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 20px !important;
  border-radius: 14px !important;
  background: var(--roms-btn-border) !important;
  border: 1.5px solid var(--roms-btn-border) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.plupload_container a.btn.btn-mini:hover{
  background: #16255c !important;
  color: #ffffff !important;
}
.plupload_container a.btn.btn-mini .fa{
  margin-right: 6px;
}

.img-container-roms-desktop {
  float: right;
  width: 10%;
  padding: 5px;
}

.img-container-roms-mobile {
  float: right;
  width: 40%;
  padding: 5px;
}

.clearfix-roms::after {
  content: "";
  clear: both;
  display: table;
}

#linkblack { color: black !important; }
#linkwhite { color: white !important; }

@media(min-width: 415px)
    {
        #upay_image
        {
            content:url(home_image.jpg);
            border:1px solid red;
        }

    }
    @media(max-width: 414px)
    {
        #upay_image
        {
            border:1px solid black;
            content:url(iphone.jpg);
        }

    }
.backgroundchange {
    width: 100px;
    height: 100px;
    background: grey;
}
@media screen and (min-width: 1080px) {
    .backgroundchange {
        background-image: url('https://onb.ssl-goldcup.com/images/logos/home_image.jpg');
        background: yellow;
    }
}
@media screen and (min-width: 487px) and (max-width: 1079px) {
    .backgroundchange {
        background-image: url('/images/logos/home_image.jpg');
        background: green;
    }
}
@media screen and (max-width: 487px) {
    .backgroundchange {
        background-image: url('/images/logos/iphone.jpg');
        background: red;
    }
}

.user_card {
	height: 400px;
	width: 300px;
	margin-top: auto;
	margin-bottom: auto;
	background: #B2DBFF;
	position: relative;
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 5px;	
}
.brand_logo_container {
	position: absolute;
	height: 150px;
	width: 150px;
	top: -55px;
	border-radius: 50%;
	background: #fff;
	text-align: center;
	color: #17568C;
  	border: 1px solid #B2DBFF;
}
.brand_logo {
	height: 150px;
	width: 150px;
	border-radius: 50%;
	border: 2px solid white;
}
.form_container {
	margin-top: 100px;
}
.login_btn {
	width: 100%;
	background: #17568C;
	color: white;
}
.login_btn:focus {
	box-shadow: none;
	outline: 0px;
}
.login_container {
	padding: 0 2rem;
}
.input-group-text {
	background: #17568C;
	color: white;
	border: 0;
	border-radius: 0.25rem 0 0 0.25rem;
}
.input_user,
.input_pass:focus {
	box-shadow: none;
	outline: 0px;
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
	background-color: #c0392b;
}

/* Quitar aire superior de Cassiopeia SOLO en home */
body.home .container-component,
body.home .container-content{
  padding-top: 0.5rem;
}

/* ===== ROMS – Footer actions (Fabrik list footer) ===== */
.roms-footer-actions{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 20px auto 10px;
  flex-wrap: wrap;
}

/* Mobile */
@media (max-width: 600px){
  .roms-footer-actions{
    gap: 10px;
  }
}

/* ===== ROMS – Usuario logueado, arriba a la izquierda ===== */
.roms-current-user{
  text-align: left;
  padding: 6px 14px 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--roms-btn-text);
}

/* ===== ROMS – Sign In-Out y familia: estilo "pill" en los botones =====
   Itemid 269 (Sign In-Out, listid=32), Itemid 289 (On the water, listid=36) e
   Itemid 290 (Sign Out Penalties, listid=37) usan plantillas Fabrik core para
   el listado en si (bootstrap / competitors_declaration -esta ultima ademas
   compartida con competitors_register, un form publico, asi que no se toca su
   archivo), asi que el CSS scoped de una plantilla custom no les llega - se
   acota por body class segun el Itemid para no afectar el resto del sitio.
   Las otras 3 paginas de esta familia (History/Not Check-Out/Checked-In) usan
   la plantilla custom history_sign_in_out, exclusiva de esas 3 listas - a esas
   se les aplico el mismo CSS directo en el custom_css.php de esa plantilla.
   Ronda 2: sumados los botones que faltaban (Check OUT-IN Penalties, Create New
   List/Close List, History/On the water/Not Check-Out/Checked-In), borde mas fino
   -y sacado del todo en los de color relleno, para que no se vea "doble contorno"-
   y un poco mas de tamano a pedido del usuario. */
body.itemid-269 .btn-ssl-sm,
body.itemid-269 .btn-ssl-danger-sm,
body.itemid-269 .btn-roms-sm,
body.itemid-269 .btn-roms-red-sm,
body.itemid-269 .btn-roms-green-sm,
body.itemid-289 .btn-ssl-sm,
body.itemid-289 .btn-ssl-danger-sm,
body.itemid-290 .btn-ssl-sm,
body.itemid-290 .btn-ssl-danger-sm{
  border-radius: 999px !important;
  margin: 4px 6px;
  padding: 10px 20px !important;
  min-height: 42px;
  font-size: 13px !important;
}

/* Blancos/outline (Go back, History, On the water, Not Check-Out, Checked-In):
   necesitan el borde para leerse como boton sobre fondo blanco, pero mas fino. */
body.itemid-269 .btn-ssl-sm,
body.itemid-269 .btn-roms-sm,
body.itemid-289 .btn-ssl-sm,
body.itemid-290 .btn-ssl-sm{
  border-width: 1px !important;
}

/* Rellenos de color (Check-OUT|Check-IN, Check OUT-IN Penalties, Create New List,
   Close List, Logout): sin borde, el propio color ya los distingue como boton. */
body.itemid-269 .btn-ssl-danger-sm,
body.itemid-269 .btn-roms-red-sm,
body.itemid-269 .btn-roms-green-sm,
body.itemid-289 .btn-ssl-danger-sm,
body.itemid-290 .btn-ssl-danger-sm{
  border: none !important;
}

/* ===== ROMS – Score Changes (Itemid 218): boton "Add" con el mismo estilo pill
   que Scoring Enquiry (2026-09-03) =====
   List 19 usa la plantilla "scoring_enquiry" (Fabrik, compartida con judges,
   competitors_header/details, translate - NO es roms_lists_template) - por eso
   no traia el CSS "pill" que ya tienen esas otras 4 listas. Se acota por Itemid
   en vez de tocar el custom_css.php de esa plantilla, para no afectar a las
   otras 5 listas que la comparten sin que se haya pedido. */
body.itemid-218 .roms-list-toolbar .btn-ssl-sm,
body.itemid-218 .roms-list-toolbar .dropdown-toggle.groupBy{
  border-radius: 999px !important;
}
body.itemid-218 .roms-list-toolbar .addbutton.addRecord{
  background: var(--roms-green) !important;
  border-color: var(--roms-green) !important;
  color: #ffffff !important;
}
body.itemid-218 .roms-list-toolbar .addbutton.addRecord:hover{
  background: var(--roms-green) !important;
  border-color: var(--roms-green) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(91,183,91,0.22);
  transform: translateY(-1px);
}

/* ===== ROMS – ONB Documents (Itemid 254): mismo estilo pill (2026-09-03) =====
   List 28 usa la plantilla "messages", exclusiva de esta lista - se le agrega
   el mismo pill que Scoring Enquiry/Score Changes. De paso, "Send message"
   (boton extra propio de esta lista, en default_buttons_extra.php) se cambio
   de verde a celeste (.btn-roms-lightblue-sm, color ya existente en el sistema
   de botones, sin crear uno nuevo) para no confundirse con el "Add" verde. */
body.itemid-254 .roms-list-toolbar .btn-ssl-sm,
body.itemid-254 .roms-list-toolbar .dropdown-toggle.groupBy,
body.itemid-254 .roms-list-toolbar .btn-roms-lightblue-sm{
  border-radius: 999px !important;
}
body.itemid-254 .roms-list-toolbar .addbutton.addRecord{
  background: var(--roms-green) !important;
  border-color: var(--roms-green) !important;
  color: #ffffff !important;
}
body.itemid-254 .roms-list-toolbar .addbutton.addRecord:hover{
  background: var(--roms-green) !important;
  border-color: var(--roms-green) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(91,183,91,0.22);
  transform: translateY(-1px);
}

/* ===== ROMS – Communication Parameters (Itemid 216): mismo estilo pill (2026-09-03) =====
   List 21 usa la plantilla "communications", exclusiva de esta lista. "Telegram
   Topics" (boton extra propio, en default_buttons_extra.php) pasado de verde a
   celeste (.btn-roms-lightblue-sm) para no confundirse con "Add", mismo criterio
   que "Send message" en ONB Documents. */
body.itemid-216 .roms-list-toolbar .btn-ssl-sm,
body.itemid-216 .roms-list-toolbar .dropdown-toggle.groupBy,
body.itemid-216 .roms-list-toolbar .btn-roms-lightblue-sm{
  border-radius: 999px !important;
}
body.itemid-216 .roms-list-toolbar .addbutton.addRecord{
  background: var(--roms-green) !important;
  border-color: var(--roms-green) !important;
  color: #ffffff !important;
}
body.itemid-216 .roms-list-toolbar .addbutton.addRecord:hover{
  background: var(--roms-green) !important;
  border-color: var(--roms-green) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(91,183,91,0.22);
  transform: translateY(-1px);
}

/* ===== ROMS – Fabrik inlineedit (plugin migrado de ilca7men2026, 2026-09-04) =====
   El plugin inyecta un <div class="modal"> plano (markup viejo de Fabrik/Bootstrap 3)
   sin las clases .fade/.show ni el JS de Bootstrap 5 que las togglea - Bootstrap 5
   pone display:none por default en .modal y nunca se saca, asi que el editor quedaba
   invisible (se veia "en blanco") aunque el HTML llegaba bien del servidor. Se fuerza
   a mostrarse como modal centrado, sin depender del JS de Bootstrap. El selector
   :not(.fade) evita tocar los modales reales de Bootstrap del sitio (siempre llevan
   class="modal fade") - solo afecta este div plano del plugin. */
td > .modal:not(.fade){
  display: block !important;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2000 !important;
  width: 90% !important;
  max-width: 420px !important;
  height: auto !important;
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.2) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.25) !important;
}
td > .modal:not(.fade) .modal-header{
  padding: 14px 18px !important;
  border-bottom: 1px solid #e8e8e8 !important;
}
td > .modal:not(.fade) .modal-header h3{
  margin: 0 !important;
  font-size: 16px !important;
}
td > .modal:not(.fade) .modal-body{
  padding: 16px 18px !important;
  max-height: 60vh !important;
  overflow-y: auto !important;
}
td > .modal:not(.fade) .modal-footer{
  padding: 12px 18px !important;
  text-align: right !important;
  border-top: 1px solid #e8e8e8 !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

/* AGREGADO 2026-09-27 (corregido el mismo dia): en el calendario de fecha
   (jdate de Fabrik, que delega en el campo calendar NATIVO de Joomla -
   media/system/css/fields/calendar.css, codigo core, no se toca - NO es el
   calendario viejo de Fabrik con class="calendar", ese ni se usa aca) la
   fecha ya cargada quedaba invisible (texto blanco sobre fondo blanco) al
   abrir el desplegable. Causa real (confirmado con getComputedStyle en vivo,
   no por lectura de codigo): ".day.selected"/".day:hover" en el core de
   Joomla usan las variables --btn-primary-color/--btn-primary-bg, y en este
   sitio ambas resuelven a blanco (#fff / white) - probablemente por el propio
   estilo de botones del sitio. Se repone el contraste con colores fijos y
   !important. Afecta a cualquier jdate con valor cargado O al pasar el mouse
   por cualquier fecha, en cualquier form del sitio (confirmado en
   hearing_schedule ademas de Event Generator). */
table.table td.day.selected,
table.table td.day:hover{
  background-color: #000 !important;
  color: #fff !important;
}