/* CSS reminders 

https://www.w3schools.com/css/

<element> - all elements, e.g. <p>
.<class> - all elements of this class, e.g. .footer
<element>.<class> - only elements with this class, e.g. p.footer
can have multiple classes <p class="center large">.....
* - universal selector, all html elements on the page
<elem1>, <elem2>, <elem3> { ... } - group of selectors
#id - element with the specified id (one only)

<parent elem> <contained elem> - descendant selector matches all elements that are descendants of a specified element, e.g. <div> <p>
selector:pseudo-class - pseudo-class is used to define a special state of an element, e.g. a:link, unvisited link
selector::pseudo-element - pseudo-element is used to style specified parts of an element, e.g. ::after pseudo-element can be used to insert some content after the content of an element
[attribute] - selector is used to select elements with a specified attribute, e.g. a[target]

Simple selectors (select elements based on name, id, class)
Combinator selectors (select elements based on a specific relationship between them)
Pseudo-class selectors (select elements based on a certain state)
Pseudo-elements selectors (select and style a part of an element)
Attribute selectors (select elements based on an attribute or attribute value)

*/

.name 
{
    text-transform: capitalize;
}

.error 
{
    color: red;
}

.message {
    color: orangered;
    height: 1rem;
    display: none;
    margin-top: 10px;
}

/* indication of success */
.success {
    color: green;
}

/* indication of failure */
.failure {
    color: red;
}

/* indication of warning */
.warning {
    color: goldenrod
}

h1 {
    color: goldenrod;
}
h2 {
    color: green;
}
body {
    text-align: center;
}

p {
    /* font:14px Verdana; */
    font-size: 1rem;
    text-align: center;
}

ul {
    list-style-position: inside;
}

li {
    text-align: center;
}

th, td {
    /* font:14px Verdana; */
    font-size: .9rem;
}
table, th, td 
{
    border: solid 1px #DDD;
    border-collapse: collapse;
    padding: 2px 3px;
    text-align: left;
    table-layout: auto;
    width: auto;
    align-self: center;
    margin-left: auto;
    margin-right: auto;
    border-spacing: 5 px;       /* added by JT on 05/21/23 */
}
th {
    font-weight:bold;
}

/* images inside of table cells */
td img {
    display: block;
    margin-left: auto;
    margin-right: auto;}

img {
    max-width: 100%;
}
input {
    font-size: 0.9rem;
    border: solid 1px;
    width: 100;
    /* resize: none;  */
}

/* input:read-only {
    background-color: lightsteelblue;
} */

textarea {
    font-size: .9rem;
    /* resize: initial; */
    /* word-wrap: normal; */
}
/* Section for columns on data pages - start */

/* textarea:read-only {
    background-color: lightsteelblue;
} */

label {
    font-size: 1rem;
    padding-right: 5px;
}

select {
    font-size: .9rem;
    padding: 2px 5px;
}

/* select:read-only {
    background-color: lightsteelblue;
} */

/* page footer */
.footer {
    border-top: double;
}

/* query results section */
.results {
    border-top: double;
}

* {
    font-family: Verdana;
    box-sizing: border-box;
}

/* Create three equal columns that floats next to each other */
.column {
    float: left;
    width: 33.33%;
    padding: 10px;
    /* height: 300px; /* Should be removed. Only for demonstration */
}

/* inner column - within another column */
/* .innercolumn {
    float: left;
    /* width: 80px;
    padding: 5px;
} */ 

/* align left */
/* .alignleft {
    text-align: left; 
    float: left;
} */

/* align right */
/* .alignright {
    text-align: right;
    float: right;
} */

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
    width: 100%;
    }
}
/* Section for columns on data pages - end */

/* Section for the side navigation menu - start */
.sidebar {
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}

  /* Sidebar links */
.sidebar a {
    display: block;
    color: black;
    padding: 16px;
    text-decoration: none;
}

  /* Active/current link */
.sidebar a.active {
    /* background-color: #4CAF50; */
    background-color: #c4177c;
    color: white;
}

  /* Links on mouse-over */
.sidebar a:hover:not(.active) {
    background-color: #555;
    color: white;
}

  /* Page content. The value of the margin-left property should match the value of the sidebar's width property */
div.content {
    margin-left: 200px;
    padding: 1px 16px;
    height: 1000px;
}

  /* On screens that are less than 700px wide, make the sidebar into a topbar */
@media screen and (max-width: 700px) {
    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
    }
    .sidebar a {float: left;}
        div.content {margin-left: 0;}
}

/* On screens that are less than 400px, display the bar vertically, instead of horizontally */
@media screen and (max-width: 400px) {
    .sidebar a {
        text-align: center;
        float: none;
    }
}
/* Section for the side navigation menu - end */

/* Section for setting up a two-column grid div - start */
/*    Left column (label) right aligned and the right column left-aligned */
/* Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout */
div.grid {
    display:grid;
    /* grid-template-columns: max-content max-content; */
    grid-template-columns: 1fr 1fr;
    /* grid-template-rows: auto; */
    grid-gap:5px;
}
div.grid label       { text-align:right; }
div.grid label:after { content: ":"; }

/* Section for setting up a two-column grid div - end */

/*  Section for setting up a table inside a div - start */
div.grid-table {
    display:grid;

    grid-template-columns: 1fr ;


}

/*  Section for setting up a table inside a div - end */


/* table inside another table */
/* options for different "cell" border styles */
/* 1. no inner cell borders - option a enabled, option b disabled */
/* 2. only bottom border - option a disabled, option b enabled */
/* 3. borders around all inner elements - option a disabled, option b disabled */
/* Note: * selector below forces style on all child elements. */
.innerTable * {
    font-size: .75rem;       /* smaller text to take up less screen space */
    font-weight: normal;    /* remove th bold */
    
    /* option a - no inner cell borders */
    /* border: none;            */
    
    /* option b - bottom border only */
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
    border-bottom-style: solid 1px;
} 

/* Documentation class for documentation pages */
table.doc {
    width: 80%;     /* standard width for all tables */
}

h3.doc {    
    padding-top: 15px;      /* add space above the header to separate the sections for readability */
}

/* #tblEmailIdentificationCriteria {
    /* table-layout: auto; */
    /* width: 100%; */
    /* display: inline; */
    /* border-collapse: collapse; */
/* } 
*/ 

/* for inputs internal to a table */
input.internal {
    
    width:100%;
}