/**************************************************************************************************/
/* Reset all tags to a default state, so that all browsers start with the same foundation.        */
/**************************************************************************************************/
* { margin:0; padding:0; border:0; box-sizing:border-box; }

/**************************************************************************************************/
/* Overrides of the standard HTML tags.                                                           */
/**************************************************************************************************/
html, body { height:100%; }
body       { font-family:Verdana, Palatino, Arial, times, serif; font-size:1.0em; color:black; background-color:black; overflow:hidden; }
h1         { font-size:1.6em; margin-bottom:0.2em; padding:0.2em 0; text-align:center; }
h2         { font-size:1.3em; padding:0.2em 0 0.2em 0.3em; text-align:left; color:maroon; }
h3         { font-size:1.1em; padding:0.2em 0 0.2em 0.3em; text-align:left; font-weight:bold; }
p          { padding:0 0.7em 1.5em 0.7em; text-align:justify; font-size:1.0em; line-height:1.3em; }
a          { text-decoration:none; font-weight:bold; color:red; }
a:hover    { text-decoration:underline; }
img        { width:100%; height:auto; margin-bottom:-5px; text-decoration:none; }
ul         { margin:0 0 15px 30px; padding:0; border:0; }
ol         { margin:0 0 15px 35px; padding:0; border:0; }
li         { text-align:justify; margin:0px; padding:3px; text-align:justify; font-size:1.0em; line-height:1.3em; }

/**************************************************************************************************/
/* Core layout of the pages. The idea is that there are filler margins on the left and right, so  */
/* that the scrollable content is in the middle, with a fixed maximum width, so that content      */
/* remains readable on large screens.                                                             */
/**************************************************************************************************/
.pg_container   { width:100%; height:100%; background-color:white; }
    .pg_menu    { background-color:transparent; height:0em; }
    .pg_margin  { float:left; width:calc(50% - 350px); height:100%; }
    .pg_content { float:left; width:100%; margin:5px 0 5px 0; max-width:700px; height:calc(100% - 10px); overflow:hidden; background-color:white; overflow-y:auto; outline:none; }

/**************************************************************************************************/
/* Custom texts                                                                                   */
/**************************************************************************************************/
.dom_color1      { background-color:rgb(221, 61, 49); }
.dom_color2      { background-color:rgb(1, 100, 168); }
p.center         { text-align:center; }
p.right          { text-align:right; }
p.list           { padding-bottom:0.3em }
.menu_btn        { float:left; width:calc((100% - 18px) / 3); margin:5px 1px 5px 1px; padding:6px; font-size:0.8em; text-align:center; border:1px solid black; border-radius:5px; background-color:gold; }
.bdr             { border:1px black solid; }
.shw             { box-shadow:2px 2px 6px black; }
.top             { margin-top:5px; }
.rnd             { border-radius:5px; }
.header_logo     { float:left; width:12%; margin-bottom:11px; padding-top:20px; }
.header_title    { float:left; width:76%; margin-bottom:11px; padding-top:12px; font-size:1.8em; text-align:center; }
.header_nasg     { float:left; width:12%; margin-bottom:11px; padding-top:7px; }
.header_sep      { clear:both; border-bottom:1px solid black; }
.col_l           { float:left; width:45%; }
.col_r           { float:left; width:55%; padding-right:7px; }
.col_time        { float:left; width:15%; }
.col_desc        { float:left; width:85%; }
.small           { font-size:0.9em; }
div.clr          { clear:both; }
div.img_l        { float:left;  display:block; width:25%; margin:7px; }
div.img_c        { clear:both;                            margin:1em; }
div.img_r        { float:right; display:block; width:25%; margin:7px; }
div.img_text     { font-style:italic; font-size:0.7em; text-align:center; }
div.img_text img { margin-bottom:3px; font-style:italic; font-size:0.7em; text-align:center; }
.important       { margin:15px 15px 25px 15px; font-size:1.1em; text-align:justify; background-color:beige; border:1px solid red; border-radius:10px; box-shadow:6px 6px lightgrey; }

/**************************************************************************************************/
/* Grids.                                                                                         */
/**************************************************************************************************/
.grid_onehalf   { display:grid; grid: auto / 50% 50%; grid-auto-rows:max-content; margin-bottom:1.5em; padding-right:0.3em; }
.grid_onethird  { display:grid; grid: auto / 33% 33% 33%; grid-auto-rows:max-content; margin-bottom:1.5em; padding-right:0.3em; }
.grid_onefourth { display:grid; grid: auto / 25% 25% 25% 25%; grid-auto-rows:max-content; margin-bottom:1.5em; }
.grid_form      { display:grid; grid: auto / 30% 70%; grid-auto-rows:max-content; margin-bottom:0.3em; }
.grid_form2     { display:grid; grid: auto / 30% 35% 35%; grid-auto-rows:max-content; margin-bottom:0.3em; }
.grid_options   { display:grid; grid: auto / 70% 30%; grid-auto-rows:max-content; margin-bottom:1.5em; padding-right:0.3em; }
.grid_8cols     { display:grid; grid: auto / 14% 14% 14% 14% 14% 14% 16%; grid-auto-rows:max-content; margin-bottom:1.5em; padding-right:0.3em; }
.grid_total     { display:grid; grid: auto / 50% 30% 20%; grid-auto-rows:max-content; margin-bottom:1.5em; padding-right:0.3em; }
.grid_summtotal { display:grid; grid: auto / 30% 7% 20% 43%; grid-auto-rows:max-content; margin-bottom:1.5em; padding-right:0.3em; }
.grid_schedule  { display:grid; grid: auto / 38% 38% 12% 12%; grid-auto-rows:max-content; margin-bottom:1.5em; padding-right:0.3em; }

/**************************************************************************************************/
/* Forms.                                                                                         */
/**************************************************************************************************/
form p               { padding-top:7px; }
input, textarea      { font-family:inherit; font-size: inherit; }
input[type=text]     { width:100%; margin:0.3em 0; padding:0.2em; border:1px solid black; border-radius:10px; }
input[type=password] { width:100%; margin:0.3em 0; padding:0.2em; border:1px solid black; border-radius:10px; }
input[type=url]      { width:100%; margin:0.3em 0; padding:0.2em; border:1px solid black; border-radius:10px; }
input[type=file]     { width:100%; margin:0.3em 0; padding:0.2em; border:1px solid black; border-radius:10px; }
input[type=image]    { width:100%; margin:0.3em 0; padding:0.2em; }
input[type=submit]   { width:100%; margin:0.3em 0; padding:0.2em; border:1px solid black; border-radius:10px; box-shadow:2px 2px 2px 2px gray; background-color:yellow; color:black; cursor:pointer; }
select               { width:100%; margin:0.3em 0; padding:0.2em; border:1px solid black; border-radius:10px; }
label                { width:100%; margin:0.3em 0; padding:0.2em; }
textarea             { width:100%; height:150px; resize:none; margin:0.3em 0; padding:0.2em; border:1px solid black; border-radius:10px; }
div.formlabel        { display:flex; justify-content:center; padding-left:0.5em; }
div.formedit         { padding-right:0.5em; }
div.formradio        { padding-left:0.5em; text-align:center; }
.ro_amount           { text-align:right; }
.input_error         { background-color:rgb(255, 62, 62); color:yellow; }

/**************************************************************************************************/
/* large-image viewer */
/**************************************************************************************************/
.imageviewer div               { visibility:hidden; position:fixed; top:5%; right:5%; bottom:5%; left:5%; z-index:75; text-align:center; display:flex; justify-content:center; align-items:center; }
.imageviewer div:before        { content:''; position:fixed; top:0; right:0; bottom:0; left:0; z-index:74; background-color:rgba(0, 0, 0, 0); transition:all 0.5s ease-out; }
.imageviewer div img           { position:relative; z-index:77; width:auto; height:auto; max-width:100%; max-height:100%; margin-left:-9999px; opacity:0; transition-property:all, opacity; transition-duration:0.5s, 0.2s; transition-timing-function:ease-in-out, ease-out; }
.imageviewer div:target        { visibility:visible; }
.imageviewer div:target:before { background-color:rgba(0, 0, 0, 0.7); }
.imageviewer div:target img    { margin-left:0; opacity:1; }

/**************************************************************************************************/
/* Overrides for smaller screens.                                                                 */
/**************************************************************************************************/
@media only screen and (max-width:700px)
{
    .pg_margin  { width:0; height:0; display:none; }
    .pg_content { width:100%; }
    .menu_btn   { font-size:0.7em; padding:6px 1px 6px 1px; }
}
@media only screen and (max-width:450px)
{
    body        { font-size:0.8em; }
    h1          { font-size:1.3em; }
    h2          { font-size:1.2em; }
    h3          { font-size:1.1em; }
    p           { font-size:0.8em; }
    a           { font-weight:normal; }
    li          { font-size:0.8em; }
    .pg_margin  { width:0; height:0; display:none; }
    .pg_content { width:100%; }
    .menu_btn   { font-size:0.6em; padding:6px 1px 6px 1px; }
}

/**************************************************************************************************/
/* Overrides for printing the page.                                                               */
/**************************************************************************************************/
@media only print
{
    .pg_margin  { width:0; height:0; display:none; }
    .pg_content { width:100%; height:auto; overflow:auto; background-color:white; }
}

/**************************************************************************************************/