﻿:root {
	/*
		Las variables -inner- y -computed- son específicas del tema, y no se deben utilizar directamente en las vistas.
		
		Subtipos:			
			-navbar-: barra de navegación 
			-primarytext-: fuente de texto resaltada con color primario
			-primarybackground-: fondo de texto resaltado con color primario
			-button-: botón
			-button-default-: botón por defecto
            -dialogcover-: el fondo que tapa la ventana cuando se muestra un diálogo
		
		Sufijos:
			-c: color de texto
			-bg: color de fondo
			-a: acento (elemento resaltado)
			-d: desacento (elemento atenuado)
			-error: error
			-iconinvert: indica si los iconos negros deben invertir su color
			-shadow: color de las sombras -sobre- este tipo de elemento
			-border: bordes de los elementos -sobre- este tipo de elemento.			

		Clases de uso general:
			WA_NavBar: barra de navegación superior, o inferior de 
			WA_Content: área de contenido
			WA_Button: botón
			WA_RecordTable: tabla de registros
			WA_FieldTable: tabla de campos
			WA_InlineIcon: icono en línea con texto
			WA_BlackIcon: icono negro autoajustable al color de fondo
			WA_InlineBlackIcon: icono en línea con texto, negro ajustable.
	*/
		
				
	/* THEME COLORS (CAN BE USED IN VIEWS) */

	--theme-c: hsl(var(--theme-inner-c-hue),var(--theme-inner-c-saturation),var(--theme-inner-c-lightness));
	--theme-c-d: hsl(var(--theme-inner-c-hue),var(--theme-inner-c-saturation), calc(calc(var(--theme-inner-c-lightness) + var(--theme-inner-bg-lightness)) / 2));
	--theme-c-error: red;
	--theme-bg: hsl(var(--theme-inner-bg-hue),var(--theme-inner-bg-saturation),var(--theme-inner-bg-lightness));
	--theme-bg-a: hsl(var(--theme-inner-bg-hue),var(--theme-inner-bg-saturation),var(--theme-inner-bg-lightness-a));
	--theme-bg-aa: hsl(var(--theme-inner-bg-hue),var(--theme-inner-bg-saturation),var(--theme-inner-bg-lightness-aa));
	--theme-iconinvert: var(--theme-inner-iconinvert);
	--theme-border: hsl(var(--theme-inner-bg-hue),var(--theme-inner-bg-saturation), calc(calc(0.25 * var(--theme-inner-c-lightness)) + calc(0.75 * var(--theme-inner-bg-lightness))));	
	--theme-shadow: rgba(0,0,0,0.25);	

	--theme-primaryc: hsl(var(--theme-inner-primaryc-hue),var(--theme-inner-primaryc-saturation),var(--theme-inner-primaryc-lightness));
	--theme-primaryc-d: hsl(var(--theme-inner-primaryc-hue),var(--theme-inner-primaryc-saturation), calc(calc(var(--theme-inner-primaryc-lightness) + var(--theme-inner-bg-lightness)) / 2));

	--theme-primarybg: hsl(var(--theme-inner-primarybg-hue),var(--theme-inner-primarybg-saturation),var(--theme-inner-primarybg-lightness));	 
	--theme-primarybg-a: hsl(var(--theme-inner-primarybg-hue),var(--theme-inner-primarybg-saturation),var(--theme-inner-primarybg-lightness-a));
	--theme-primarybg-aa: hsl(var(--theme-inner-primarybg-hue),var(--theme-inner-primarybg-saturation),var(--theme-inner-primarybg-lightness-aa));
	--theme-primarybg-c: hsl(var(--theme-inner-primarybg-hue),var(--theme-inner-primarybg-saturation),var(--theme-inner-primarybg-lightness-c));
	--theme-primarybg-iconinvert: var(--theme-inner-primarybg-iconinvert);
		
	/* THEME ELEMENT COLORS (CAN BE USED IN VIEWS) */

	--theme-button-c: var(--theme-c);
	--theme-button-bg: hsl(var(--theme-inner-bg-hue),var(--theme-inner-bg-saturation), calc(calc(0.15 * var(--theme-inner-c-lightness)) + calc(0.85 * var(--theme-inner-bg-lightness))));
	--theme-button-bg-a: hsl(var(--theme-inner-bg-hue),var(--theme-inner-bg-saturation), calc(calc(0.2 * var(--theme-inner-c-lightness)) + calc(0.8 * var(--theme-inner-bg-lightness))));
	--theme-button-iconinvert: var(--theme-iconinvert);
	--theme-button-default-c: var(--theme-primarybg-c);
	--theme-button-default-bg: var(--theme-primarybg);
	--theme-button-default-bg-a: var(--theme-primarybg-a);
	--theme-button-default-iconinvert: var(--theme-primarybg-iconinvert);

	--theme-navbar-c: var(--theme-primarybg-c);
	--theme-navbar-bg: var(--theme-primarybg);
	--theme-navbar-bg-a: var(--theme-primarybg-a);
	--theme-navbar-shadow: var(--theme-shadow);
	--theme-navbar-border: var(--theme-shadow);
	--theme-navbar-iconinvert: var(--theme-primarybg-iconinvert);
	--theme-navbar-button-c: var(--theme-primarybg-c);
	--theme-navbar-button-bg: var(--theme-primarybg-a);
	--theme-navbar-button-bg-a: var(--theme-primarybg-aa);
	--theme-navbar-button-iconinvert: var(--theme-primarybg-iconinvert);
	--theme-navbar-button-default-c: var(--theme-primarybg-c);
	--theme-navbar-button-default-bg: var(--theme-primarybg-aa);
	--theme-navbar-button-default-bg-a: var(--theme-primarybg-aa);
	--theme-navbar-button-default-iconinvert: var(--theme-primarybg-iconinvert);
		
	/* THEME SOURCE COLORS (OVERRIDEN BY SITE CONFIG). SHOULD NOT BE USED DIRECTLY IN VIEWS. */
	
	--theme-inner-c-hue: 0;
	--theme-inner-c-saturation: 0%;
	--theme-inner-c-lightness: 0%;
	--theme-inner-bg-hue: 0;
	--theme-inner-bg-saturation: 0%;
	--theme-inner-bg-lightness: 100%;			/* Debe ser >= 20%, para poder seguir usando sombras. */
	--theme-inner-bg-lightness-a: 90%;			/* Debe ser >= 20%, para poder seguir usando sombras. */
	--theme-inner-bg-lightness-aa: 80%;			/* Debe ser >= 20%, para poder seguir usando sombras. */
	--theme-inner-iconinvert: 0;
	
	--theme-inner-primaryc-hue: 200;
	--theme-inner-primaryc-saturation: 82%;
	--theme-inner-primaryc-lightness: 48%;

	--theme-inner-primarybg-hue: 200;
	--theme-inner-primarybg-saturation: 82%;
	--theme-inner-primarybg-lightness: 48%;			/* Debe ser >= 20%, para poder seguir usando sombras. */	
	--theme-inner-primarybg-lightness-a: 58%;		/* Debe ser >= 20%, para poder seguir usando sombras. */
	--theme-inner-primarybg-lightness-aa: 68%;		/* Debe ser >= 20%, para poder seguir usando sombras. */
	--theme-inner-primarybg-lightness-c: 100%;   
	--theme-inner-primarybg-iconinvert: 1;
	

	/* OBSOLETO, QUITAR */   				
			
	
    --theme-dialogcover-bg: rgba(75,75,75,0.75);
    --theme-dialogcover-shadow: rgba(0,0,0,0.5);

	--theme-computed-button-icon-menu: url('/web/images/icons/menu_inv0.svg');
	--theme-computed-button-default-icon-menu: url('/web/images/icons/menu_inv1.svg');
	--theme-computed-button-icon-rightlink: url('/web/images/icons/rightlink_inv0.svg');
	--theme-computed-button-default-icon-rightlink: url('/web/images/icons/rightlink_inv1.svg');


}

/* En móviles hacemos la fuente un poco más pequeña, para que quepa más información. */
/*MOBILE CSS*/
@media only screen and (max-device-width: 640px) 
/*@media only screen and (max-width: 640px)*/
{
	html { font-size: 3.5vmin; }	
	/*body { background-color: red !important; }*/
}



/* Estilos de color */
body { margin: 1em 1em; background-color: var(--theme-bg); color: var(--theme-c); }
.WA_Content { background-color: var(--theme-bg); }
::placeholder { color: inherit; opacity: 0.5; }

input, 
select, 
textarea,
.WA_HtmlEditor
{ background-color: var(--theme-bg-a); border: 1px solid var(--theme-border); color: var(--theme-c); outline-color: var(--theme-primarybg); }

input:focus,select:focus,textarea:focus
{
	outline: 1px dotted var(--theme-primarybg);
}

.WA_NavBar { color: var(--theme-navbar-c); background-color: var(--theme-navbar-bg); }

.WA_NavBar.App { color: var(--theme-navbar-c); box-shadow: 0 0 0.25em var(--theme-shadow); background-color: var(--theme-navbar-bg); }
.WA_NavBar.App td.WA_NavBar_Button div { border-right-color: var(--theme-navbar-border); }
.WA_NavBar.App td.WA_NavBar_Button:hover { background-color: var(--theme-navbar-bg-a); }
.WA_NavBar.App td.WA_NavBar_Button img { filter:invert(var(--theme-navbar-iconinvert)); }
.WA_NavBar.App td.WA_NavBar_UserButton:hover { background-color: var(--theme-navbar-bg-a) }
.WA_NavBar.App td.WA_NavBar_UserButton:hover img { opacity: 0.8 }
.WA_NavBar.App td.WA_NavBar_UserButton:hover img.WA_BlackIcon, .WA_NavBar.App td.WA_NavBar_UserButton:hover img.WA_InlineBlackIcon { opacity: 1 }
.WA_NavBar.App td.WA_NavBar_UserButton img.WA_BlackIcon, .WA_NavBar.App td.WA_NavBar_UserButton img.WA_InlineBlackIcon { filter:invert(var(--theme-navbar-iconinvert)); }
.WA_NavBar.App td.WA_NavBar_Title { border-right-color: var(--theme-navbar-border); }
.WA_NavBar.App td.WA_NavBar_Title.Pulsable:hover { background-color: var(--theme-navbar-bg-a) }
.WA_NavBar.App td.WA_NavBar_HelpButton { border-right-color: var(--theme-navbar-border); }
.WA_NavBar.App td.WA_NavBar_HelpButton:hover, .WA_ShowHelp .WA_NavBar.App td.WA_NavBar_HelpButton { background-color: var(--theme-navbar-bg-a) }
.WA_NavBar.App td.WA_NavBar_HelpButton img.WA_BlackIcon, .WA_NavBar.App td.WA_NavBar_HelpButton img.WA_InlineBlackIcon { filter:invert(var(--theme-navbar-iconinvert)); }

button.WA_Button, a.WA_Button { color: var(--theme-button-c); background-color: var(--theme-button-bg); box-shadow: 0 0 0.125em var(--theme-shadow); }
button.WA_Button:hover, a.WA_Button:hover { background-color: var(--theme-button-bg-a); }
div.WA_Button:hover { background-color: var(--theme-bg-a); }
button.WA_Button:disabled:hover, a.WA_Button:disabled:hover { background-color: var(--theme-button-bg) }
button.WA_Button.Default, a.WA_Button.Default, button.WA_Button.Default:disabled:hover, a.WA_Button.Default:disabled:hover { color: var(--theme-button-default-c); background-color: var(--theme-button-default-bg); }
button.WA_Button.Default:hover, a.WA_Button.Default:hover { background-color: var(--theme-button-default-bg-a); }

.WA_NavBar button.WA_Button, .WA_NavBar a.WA_Button { color: var(--theme-navbar-button-c); background-color: var(--theme-navbar-button-bg); box-shadow: 0 0 0.125em var(--theme-navbar-shadow); }
.WA_NavBar button.WA_Button:hover, .WA_NavBar a.WA_Button:hover  { background-color: var(--theme-navbar-button-bg-a); }
.WA_NavBar button.WA_Button:disabled:hover, .WA_NavBar a.WA_Button:disabled:hover { background-color: var(--theme-navbar-button-bg) }
.WA_NavBar button.WA_Button.Default, .WA_NavBar a.WA_Button.Default { color: var(--theme-navbar-button-default-c); background-color: var(--theme-navbar-button-default-bg); }
.WA_NavBar button.WA_Button.Default:hover, .WA_NavBar a.WA_Button.Default:hover { background-color: var(--theme-navbar-button-default-bg-a); }

.WA_NavBar button.WA_Button img.WA_InlineBlackIcon { filter:invert(var(--theme-navbar-iconinvert)); }

.WA_TabSelector
{
    display: inline-block;
    border-bottom: 2px solid var(--theme-button-default-bg);
    vertical-align: bottom;
    padding: 0 0.5em;
    /*margin-bottom: 0.5em;*/
	margin-right: 1em;
}

.WA_TabSelector > button.WA_Button {
    margin: 0;
    display: inline-block;
    /*float: left;*/
	vertical-align: bottom;
    border: none;
    /*color: var(--theme-color-dark);*/
    border-radius: 0.25em 0.25em 0 0;
    padding-bottom: 0.125em;
    margin: 0 0.125em;
    text-decoration: none;
	opacity: 0.7;
	font-size: 1em;
}

.WA_TabSelector > button.WA_Button.Default { opacity: 1; font-size: 1.1em; }

h2 { color: var(--theme-primaryc); }
h2 button.WA_Button:hover, h2 a.WA_Button:hover, .WA_FieldTable > tbody > tr > th .WA_Button:hover { background-color: var(--theme-bg-a); }
h2 .WA_Button, .WA_FieldTable > tbody > tr > th .WA_Button { background-color: inherit; color: inherit; }
h2 button.WA_Button:disabled:hover, h2 a.WA_Button:disabled:hover { background-color: inherit; color: inherit; }

a { color: var(--theme-primaryc); }

.WA_FieldTable tr.WA_Button, .WA_FieldTable td.WA_Button { color: var(--theme-c); background-color: var(--theme-bg); }
.WA_FieldTable tr.WA_Button:hover, .WA_FieldTable td.WA_Button:hover { background-color: var(--theme-bg-a); }

div.WA_Pagination div.Link { background-color: var(--theme-button-bg); color: var(--theme-button-c); box-shadow: 0 0 0.125em var(--theme-shadow); }
div.WA_Pagination div.Link:hover { background-color: var(--theme-button-bg-a); }
div.WA_Pagination div.Link.Active { background-color: var(--theme-button-default-bg-a); color: var(--theme-button-default-c); }

.WA_RecordTable > tbody > tr > td { border-color: var(--theme-border); }
.WA_RecordTable > tbody > tr > th { background-color: var(--theme-bg); color: var(--theme-primaryc); border-color: var(--theme-primaryc); }
.WA_RecordTable th.WA_Sort_Text:hover, 
.WA_RecordTable th.WA_Sort_Number:hover, 
.WA_RecordTable th.WA_Sort_Checkbox:hover, 
.WA_RecordTable th.WA_Button:hover { background-color: var(--theme-bg-a); }

.WA_RecordTable > tbody > tr.WA_Button > td.WA_Button { background-color: var(--theme-button-bg); box-shadow: 0 0 0.125em var(--theme-shadow); }
.WA_RecordTable > tbody > tr.WA_Button:hover > td.WA_Button { background-color: var(--theme-button-bg); }
.WA_RecordTable > tbody > tr.WA_Button.WA_NoHover:hover td { background-color: var(--theme-bg); }
.WA_RecordTable > tbody > tr.WA_Button:hover, 
.WA_RecordTable > tbody > tr > td.WA_Button:hover, 
.WA_RecordTable > tbody > tr.WA_Button:hover > td { background-color: var(--theme-bg-a); } 
.WA_RecordTable > tbody > tr.WA_Button > td.WA_Button:hover { background-color: var(--theme-button-bg-a); }


div#__Dialog_Window_Container__ > div:first-child > table.WA_RecordTable { margin: 0 }



.WA_FieldTable > tbody > tr > th, .WA_FieldTable > tbody > tr > td:first-child { color: var(--theme-primaryc); }

img.WA_BlackIcon, img.WA_InlineBlackIcon { filter:invert(var(--theme-iconinvert)); }
button.WA_Button img.WA_BlackIcon, button.WA_Button img.WA_InlineBlackIcon { filter:invert(var(--theme-button-iconinvert)); }
button.WA_Button.Default img.WA_BlackIcon, button.WA_Button.Default img.WA_InlineBlackIcon { filter:invert(var(--theme-button-default-iconinvert)); }

button.WA_Button.WA_Menu { background-image: var(--theme-computed-button-icon-menu); }
button.WA_Button.Default.WA_Menu { background-image: var(--theme-computed-button-default-icon-menu); }
button.WA_Button.WA_Link { background-image: var(--theme-computed-button-icon-rightlink); }
button.WA_Button.Default.WA_Link { background-image: var(--theme-computed-button-default-icon-rightlink); }


div.WA_SelectAction_Title { color: var(--theme-navbar-c); border-color: var(--theme-shadow); background-color: var(--theme-navbar-bg);	}
/*div.WA_SelectAction_Window { background-color: var(--theme-bg); box-shadow: 0px 0px 0.5em var(--theme-shadow); border-color: var(--theme-shadow); }*/
div.WA_SelectAction_Button { border-color: var(--theme-shadow); color: var(--theme-c); background: var(--theme-bg); }
div.WA_SelectAction_Button.Cancel { opacity: 0.6 }
div.WA_SelectAction_Button:hover { background-color: var(--theme-bg-a);  }
.WA_SelectAction_Header { border-color: var(--theme-shadow); background-color: var(--theme-bg); color: var(--theme-c-d); }

.WA_Help { border-left-color: var(--theme-primaryc); padding-left: 1em; }
.WA_Help b { color: var(--theme-primaryc) }

.WA_Disabled { color: var(--theme-c-d) }

.WA_ScoreA, .WA_RecordTable > tbody > tr.WA_Button:hover td.WA_ScoreA { background-color: #89ff89; color: black; }
.WA_ScoreB, .WA_RecordTable > tbody > tr.WA_Button:hover td.WA_ScoreB { background-color: #d2ff7b; color: black; }
.WA_ScoreC, .WA_RecordTable > tbody > tr.WA_Button:hover td.WA_ScoreC { background-color: #fffb84; color: black; }
.WA_ScoreD, .WA_RecordTable > tbody > tr.WA_Button:hover td.WA_ScoreD { background-color: #ffdf84; color: black; }
.WA_ScoreE, .WA_RecordTable > tbody > tr.WA_Button:hover td.WA_ScoreE { background-color: #ff8080; color: black; }

/* Restyling Carmen sep 2023*/

h2 button.WA_Button { color: var(--theme-primaryc); }
button.WA_Button, a.WA_Button { color: var(--theme-c); background-color: var(--theme-bg); box-shadow: 0 0 1px var(--theme-c); /*box-shadow: 0 0 0.2em var(--theme-shadow);*/ }
button.WA_Button:hover, a.WA_Button:hover { background-color: var(--theme-bg-a); }
button.WA_Button:disabled:hover, a.WA_Button:disabled:hover { background-color: var(--theme-bg) }
div.WA_Pagination div.Link { background-color: var(--theme-bg); color: var(--theme-c); box-shadow: 0 0 1px var(--theme-c); /*box-shadow: 0 0 0.2em var(--theme-shadow);*/ }

/*----------------------------------------------------------------------------------------------------------*/
/* Estilos físicos */
/*----------------------------------------------------------------------------------------------------------*/


body, button { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1em; }

.WA_NavBar.App { position: fixed; height: 2.5em; top: 0; left: 0; right: 0; overflow: hidden; z-index: 2; }
.WA_NavBar.App > table { width: 100%; border-collapse: collapse; border: none }
.WA_NavBar.App > table tr { border: none; }
.WA_NavBar.App > table td { border: none; padding: 0; }
.WA_NavBar.App td.WA_NavBar_Button { width: 1px; cursor: pointer }
.WA_NavBar.App td.WA_NavBar_Icon { width: 1px; }
.WA_NavBar.App td.WA_NavBar_Icon img { width: auto; height: 1.85em/*1.5em*/; padding-left: 0.95em; padding-top: 0.2em; }
.WA_NavBar.App td.WA_NavBar_UserButton { width: 2.5em; cursor: pointer; text-align: center; }
.WA_NavBar.App td.WA_NavBar_UserButton div { font-size: 0.6em; margin-top: -0.5em; }
.WA_NavBar.App td.WA_NavBar_Button div { display: block /*inline-block*/; border-right-width: 1px; border-right-style: solid; }
.WA_NavBar.App td.WA_NavBar_Button img { display: block; width: 1.4em; height: 1.4em; padding: 0.6em; }
.WA_NavBar.App td.WA_NavBar_UserButton img { width: 1.5em; height: 1.5em; }
.WA_NavBar.App td.WA_NavBar_Title { max-width: 0; padding: 0 0.8em; height: 2.5em; border-right-width: 1px; border-right-style: solid; }
.WA_NavBar.App td.WA_NavBar_Title.Pulsable:hover { cursor: pointer; }
.WA_NavBar.App td.WA_NavBar_Title > div { font-size: 1.25em; height: 1em; padding-bottom: 0.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.WA_NavBar.App td.WA_NavBar_HelpButton { display: none; width: 2.5em; border-right-width: 1px; border-right-style: solid; border-right-color: var(--theme-navbar-border); text-align: center; cursor: pointer; }
.WA_NavBar.App td.WA_NavBar_HelpButton img { height: 1.5em; opacity: 0.8 }
.WA_ShowHelp .WA_NavBar.App td.WA_NavBar_HelpButton img { opacity: 1 }

.WA_Button { cursor: pointer; }
button.WA_Button, a.WA_Button { display: inline-block; border: none; font-size: 1em; cursor: pointer; padding: 0.25em 0.5em; margin: 0; outline: none; text-decoration: none; line-height: 1.2 }
button.WA_Button:disabled, a.WA_Button.Default:disabled { opacity: 0.5; cursor: default; }

h2 { font-size: 1.25em; }
h2 .WA_Button, .WA_FieldTable > tbody > tr > th .WA_Button { box-shadow: none; vertical-align: inherit; text-decoration: underline; font-size: 0.75em; font-style: italic; font-weight: normal; }
h2 .WA_Button:disabled, .WA_FieldTable > tbody > tr > th .WA_Button:disabled { text-decoration: none;  }
.WA_FieldTable > tbody > tr > th .WA_Button { vertical-align: baseline }

div.WA_Pagination { margin: 1em 0 0.5em 0; font-size: 0.8em; }
div.WA_Pagination div.Link { display: inline-block; cursor: pointer; float: left; clear: none; min-width: 1.5em; text-align: center; padding: 0.25em; margin: 0 0.2em; border-radius: 0.3em; }
div.WA_Pagination span { display: inline-block; float: left; clear: none; }
div.WA_Pagination div.Link.Active { cursor: default; }
div.WA_Pagination div.Total { margin: 0 0.2em 0.5em; }
div.WA_Pagination div.Total > span { opacity: 0.5; float: none; }
div.WA_Pagination div.Total > button { font-size: 0.8em; margin: 0.5em 0.5em 0 0; }
div.WA_Pagination span.Selected { min-width: 1.5em; text-align: center; padding: 0.25em; margin: 0 0.2em; border-radius: 0.3em; opacity: 0.5; }


.WA_RecordTable { border-collapse: collapse; margin-top: 1em; font-size: 0.9em; }
.WA_RecordTable > tbody > tr > td { border-width: 1px; border-style: solid; padding: 0.25em 0.5em; text-align: left; border-left: none; border-right: none; }
.WA_RecordTable > tbody > tr > th { padding: 0.25em 0.5em; text-align: left; font-size: 0.9em; font-weight: bold; border-width: 0; border-style: solid; border-bottom-width: 2px; vertical-align: bottom }
.WA_RecordTable > tbody > tr > td.Center, .WA_RecordTable > tbody > tr > th.Center { text-align: center; }
.WA_RecordTable > tbody > tr > td.Right, .WA_RecordTable > tbody > tr > th.Right { text-align: right; }
.WA_RecordTable > tbody > tr > td.Red, .WA_RecordTable > tbody > tr > th.Red { color: red } /* TODO: QUITAR ESTO */
.WA_RecordTable th.WA_Sort_Text:hover, .WA_RecordTable th.WA_Sort_Number:hover, .WA_RecordTable th.WA_Sort_Checkbox:hover, .WA_RecordTable th.WA_Button:hover { cursor: pointer; }
.WA_RecordTable .NOBR { white-space: nowrap }

.WA_RecordTableContainer { margin-top: 1em; /*max-width: 100%; max-height: 90vh; overflow: auto;*/ }
.WA_RecordTableContainer .WA_RecordTable { margin-top: 0 }
.WA_RecordTableContainer .WA_RecordTable > tbody > tr > td { white-space: nowrap; max-width: 50vw; overflow: hidden; text-overflow: ellipsis; }
@media only screen and (max-width: 640px) { .WA_RecordTableContainer .WA_RecordTable > tbody > tr > td { white-space: inherit; max-width: inherit; overflow: inherit;  } }

div.WA_Pagination+table.WA_RecordTable { margin-top: 0 }
table.WA_RecordTable+div.WA_Pagination { margin-top: 0.5em }

.WA_RecordTable input[type="checkbox"] { margin: 0 0.25em; }

.WA_RecordTable td.WA_Checkbox { border: none; }
.WA_Checkbox > img.WA_Checked { display: none }
.WA_Checkbox > img.WA_Unchecked { display: inline-block; opacity: 0.5; }
.WA_Checkbox[wa_checked="true"] > img.WA_Checked { display: inline-block; }
.WA_Checkbox[wa_checked="true"] > img.WA_Unchecked { display: none; }

.WA_FieldTable { vertical-align: top; border-collapse: collapse; }
.WA_FieldTable > tbody > tr:first-child > th { padding-top: 0 }
.WA_FieldTable > tbody > tr > th { text-align: left; padding-bottom: 0.5em; padding-top: 1em; /*text-decoration: underline;*/ font-size: 1.25em; }
.WA_FieldTable > tbody > tr > td:first-child { text-align: right; padding-right: 1em; font-size: 0.9em; vertical-align: top; padding-top: 0.25em; max-width: 30em; opacity: 0.9 }
.WA_FieldTable > tbody > tr > td { max-width: 50em; }
.WA_FieldTable .NOBR { white-space: nowrap }

img.WA_InlineIcon, img.WA_InlineBlackIcon { height: 1.2em; width: auto; vertical-align: bottom }

button.WA_Button.WA_Menu { background-size: 0.5em; background-repeat: no-repeat; background-position: right 0.25em bottom; padding-right: 1em; }
button.WA_Button.WA_Link { background-size: 0.7em; background-repeat: no-repeat; background-position: right 0.25em center; padding-right: 1.25em; }

.WA_HtmlContainer { white-space: normal; }
.WA_HtmlContainer > :first-child { margin-top: 0 }
.WA_HtmlContainer > :last-child { margin-bottom: 0 }

div.WA_SelectAction_Title { padding: 0.35em 0.5em; font-size: 1.25em; border-width: 1px; border-style: solid; }
/*div.WA_SelectAction_Window { position: relative; display: inline-block; max-width: 90%; overflow: auto; margin-left: auto; margin-right: auto; border-radius: 0.25em; border-width: 0.25em; border-style: solid; }*/
div.WA_SelectAction_Button { padding: 0.35em 1em; /*border-top: 1px solid white; color: #3c3c3c; border-bottom: 1px solid #888; border-left: 1px solid #000; border-right: 1px solid #000;*/ border-width: 1px; border-top-width: 0; border-style: solid; cursor: pointer; }
/*div.WA_SelectAction_Button.Cancel { color: #545454; background-color: rgba(162, 162, 162, 0.25); border-top: 1px solid #efefef; }*/
div.WA_SelectAction_Button.WithImages > img.WA_InlineIcon, div.WA_SelectAction_Button.WithImages > img.WA_InlineBlackIcon { position: absolute; left: 0.75em; }
div.WA_SelectAction_Button.WithImages { padding-left: 2.66em; text-align: left; }
div.WA_SelectAction_Button.WithSubmenus { padding-right: 1.5em; }
.WA_SelectAction_Header { border-bottom-width: 1px; border-bottom-style: solid; padding: 0.75em 0.5em 0.25em 0.5em; font-size: 0.8em; text-align: left; border-left-width: 1px; border-left-style: solid; border-right-width: 1px; border-right-style: solid; }

div.WA_ActionBar { margin: 1em 0 1em 0; line-height: 2 }

input[type="text"] { padding-left: 0.25em; padding-right: 0.25em; box-sizing: border-box; }

.WA_Undefined { font-style:italic; opacity: 0.5;}
.WA_GrayedOut { opacity: 0.5 }

.WA_Help { display: none; max-width: 60em; border-left-style: solid; border-left-width: 0.5em; }
.WA_ShowHelp div.WA_Help { display: block; opacity: 0.9; font-size: 0.9em; animation: fadein09 0.5s; }

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadein09 {
    from { opacity: 0; }
    to   { opacity: 0.9; }
}