/*-------------------------------------------------------------------------
These styles apply to the main working area.  Style specific to the
Survox Console menus, etc are in NavFrame.css

Enghouse branding colors are below to easily find then and cut and paste.
I've just grabbed any properties that have colors since my IDE shows
thumbnails, so the properties don't mean anything
-------------------------------------------------------------------------*/

:root {
    /* Enghouse colors */
    --enghouse-font-main: Calibri;  /* default = sans-serif */
    --enghouse-font-monospace: Consolas; /* default = monospace */
    --enghouse-primary-1: rgb(1, 82, 157); /* this is #01529d -- color from logo, guide says #003591 */
    --enghouse-primary-2: rgb(114, 181, 204); /* #72B5CC */
    --enghouse-secondary-1: black; /* black */
    --enghouse-secondary-2: white; /* white */
    --enghouse-secondary-3: rgb(128, 128, 128); /* grey #808080; */
    --enghouse-accent-1: rgb(240, 65, 95); /* #EF415D */
    --enghouse-accent-2: rgb(0, 165, 182); /* #00A5B6 */
    --enghouse-accent-3: rgb(207, 220, 40); /* #CFDD28 */
    --enghouse-accent-4: rgb(140, 90, 165); /* #8C5CA4 */
    --enghouse-accent-5: rgb(240, 93, 42); /* #F15D2A */
    --enghouse-accent-6: rgb(0, 21, 57); /* #001539 */

    /* Survox Console */
    --logo-url: url(images/SurvoxInsights.png);

    --background-color: white;
    --primary-color: rgb(1, 82, 157);
    --secondary-color: rgb(114, 181, 204);

    --font-main: Calibri;  /* default = sans-serif */
    --font-monospace: Consolas; /* default = monospace */
    --font-color: #414141;
    --font-color-dark: rgb(0, 21, 57);

    --accent-1: rgb(240, 65, 95);
    --accent-2: rgb(0, 165, 182);
    --accent-3: rgb(207, 220, 40);
    --accent-4: rgb(140, 90, 165);
    --accent-5: rgb(240, 93, 42);

    --color-font-priority: rgb(204,0,0);

    --color-background-2: #dcecf2;
    --color-background-2a: rgb(114, 181, 204, 0.075);
    --color-background-2b: rgb(0, 165, 182,  0.04);
    --color-background-3: rgb(240, 65, 95, 0.15);
    --color-background-4: rgb(140, 90, 165, 0.08);
    --color-background-5: rgb(207, 220, 40, 0.1);
    --color-background-grey: #eeeeee;

    --highlight-error: #FFBBBB;

    --color-grey-1: #ebebeb;
    --color-grey-2: #d9d9d9;
    --color-grey-3: #cccccc;
    --color-grey-4: #bfbfbf;
    --color-grey-5: #808080;


    --color-active: rgb(240, 93, 42);

    --font-color-warn: #F88115;
    --font-color-warn2: #9A4D00;;
    --font-color-error: #DC143C;

    --background-highlight: rgb(114, 181, 204, 0.075);
    --background-warn: rgb(240, 65, 95, 0.075);

    --background-modal: rgb(0 0 0 / 50%);

}

.accent_1 {
    color: var(--accent-1);
}

.accent_2 {
    color: var(--accent-2);
}

.accent_5 {
    color: var(--accent-5);
}


/*-------------------------------------------------------------------------
`XHTML, HTML4, HTML5 Reset
Some browsers have different default values for some settings.  The following rules
make them behave the same
-------------------------------------------------------------------------*/
html {
    height: 100%;
    min-width: 100%;
    min-height: 100%;
}

body {
    min-width: 960px;
    height: 100%;
    line-height: 1.5;
    font-family: var(--font-main), sans-serif;
    background-color: var(--background-color);
    color: var(--font-color);
}



/* Reset margins, etc */
/*a, abbr, acronym, address, applet, article, aside, audio, b, blockquote, body, canvas, caption, center, cite,*/
/*code, del, details, dfn, div, em, embed, figcaption, figure, footer, form,*/
/*header, hr, html, i, iframe, img, ins, kbd, label, li, mark, menu, meter,*/
/*nav, object, ol, output, p, pre, progress, q, rp, rt, ruby, s, samp, section, small, span, strong, sub,*/
/*summary, sup, table, thead, tfoot, tbody, td, th, time, tr, u, ul, var, video {*/
/*    margin: 0;*/
/*    padding: 0;*/
/*    font-size: 100%;*/
/*}*/

/* Override the default (display: inline) for browsers that do not recognize HTML5 tags.  */
article, aside, details, figcaption, figure, footer, header, menu, nav, section {
    display: block;
}


/* =========================================================================================
default styling for specific tags
========================================================================================= */
a:link,
a:visited {
    color: var(--secondary-color);
    text-decoration: none;
}

a:focus {
    color: var(--color-active);
    outline: thin solid var(--font-color);
    outline-offset: 2px;
}

a:link:hover,
a:active {
    color: var(--color-active);
    text-decoration: underline;
    cursor: pointer;
}

/* for now, a.button means a material ui icon, and a.button2 means make the link look like a button */
a.button,
a.button:link,
a.button:visited {
    color: inherit;
    border: thin solid transparent;
    text-decoration: none;
    cursor: pointer;
    border-radius: 0.2em;
}

a.button:hover,
a.button:focus {
    color: inherit;
    border: thin solid var(--font-color);
    outline: none;
}

a.button2,
a.button2:link,
a.button2:visited {
    color: var(--background-color);
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    padding: 0.3em 0.5em;
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
}

a.button2:hover:not(:disabled),
a.button2:focus:not(:disabled) {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

a.button2:disabled,
a.button2:link:disabled,
a.button2:visited:disabled {
    cursor: not-allowed;
    background-color: var(--color-grey-3);
    border-color: var(--color-grey-3);
}

h2.titleBar {
    font-size: 1.1em;
    font-weight: bold;
    background-color: var(--background-color);
    color: var(--primary-color);
    padding-left: 0;
    margin-left: 0;
    border-bottom: thin solid var(--secondary-color);
    margin-bottom: 1em;
}

mark {
    color: var(--primary-color);
    background-color: var(--color-background-2);
    border: thin solid var(--color-grey-3);
}

em {
    font: var(--font-monospace), monospace;
    font-style: italic;
    font-variant: small-caps;
}

/*em:before, em:after {*/
/*    content: "'";*/
/*}*/

caption {
    caption-side: top;
    font-weight: bold;
    font-size: 1.2em;
    color: var(--primary-color);
    text-decoration: underline solid var(--secondary-color) thin;
    text-align: left;
    padding: 0.5em 0;
}


/* =========================================================================================
new classes for simple material icons
========================================================================================= */

dialog {
    box-sizing: border-box;
    min-width: 60%;
    max-width: 85vw;
    max-height: 85vh;
    margin-top: 5em;
    overflow: auto;
    padding: 1rem;
    border-radius: 0.5rem;
}

dialog::backdrop {
    background-color: var(--background-modal);
}

section > header {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--primary-color);
    border-bottom: thin solid var(--secondary-color);
    margin-block-start: 1.4rem;
    margin-block-end: 1.0rem;
}

section.dialogBox {
    margin-top: 0.5em;
    margin-bottom: 1em;
    box-sizing: border-box;
}

.dialogBox > h2,
section.dialogBox > header {
    color: var(--primary-color);
    background-color: var(--color-background-2);
    border: thin solid var(--color-grey-3);
    font-weight: bold;
    font-size: 1.2rem;
    padding: 0.5em;
    margin-top: 0;
    margin-bottom: 0;
}

.dialogBox > .content {
    font-weight: normal;
    width: 100%;
    /* no border-top, so we don't get a double-border */
    border-right: thin solid var(--color-grey-3);
    border-left: thin solid var(--color-grey-3);
    border-bottom: thin solid var(--color-grey-3);
    padding: 0.5rem;
    clear: both;
    box-sizing: border-box;
}

.dialogBox > .content > h3 {
    color: var(--primary-color);
    background-color: var(--color-background-2);
    border: thin solid var(--color-grey-3);
    font-weight: bold;
    font-size: 1.2rem;
    padding: 0.5em;
    margin-top: 0.5em;
    margin-bottom: 0;
}

.dialogBox > div, .dialogBox > p {
    width: 100%;
    box-sizing: border-box;
}

/* ------------------------------------------------------------------------------------------------------
Form Element Defaults
----------------------------------------------------------------------------------------------------*/
input, textarea, button {
    font-family: var(--font-main), sans-serif;
    font-size: 100%;
    background-color: var(--background-color);
    color: var(--font-color);
}

input[type='submit'],
input[type='image'],
input[type='button'],
input[type='radio'],
input[type='checkbox'],
input[type='file'],
label[for],
select,
button {
    cursor: pointer;
}

input[type='text'],
input[type='email'],
input[type='password'],
select {
    vertical-align: middle;
}

input[type='checkbox'] {
    vertical-align: middle;
}

input[type='text'],
input[type='number'],
input[type='date'],
input[type='time'],
input[type='datetime-local'],
input[type='email'],
input[type='password'],
input[type='file'],
select
{
    border: thin solid var(--color-grey-5);
}

select[multiple] {
    height: 7em;
}

textarea {
    overflow: auto;
}

input[type='text']:read-only,
input[type='number']:read-only,
input[type='date']:read-only,
input[type='time']:read-only,
input[type='datetime-local']:read-only,
input[type='email']:read-only,
input[type='password']:read-only,
input[type='checkbox'].readonly,
input[type='radio'].readonly {
    border: thin solid transparent; /* so it lines up with any other inputs */
    cursor: default;
}


input[type='text']:required,
input[type='number']:required,
input[type='date']:required,
input[type='time']:required,
input[type='datetime-local']:required,
input[type='email']:required,
input[type='password']:required,
input[type='file']:required,
select:required,
.input_required,
.textBox_req {
    border: thin solid var(--secondary-color);
    background-color: var(--color-background-2a); /* 2b? */
}

input:focus,
button:focus {
    outline: thin solid var(--font-color);
    outline-offset: 2px;
}

input[type='text']:focus,
input[type='number']:focus,
input[type='date']:focus,
input[type='time']:focus,
input[type='datetime-local']:focus,
input[type='email']:focus,
input[type='password']:focus,
input[type='file']:focus,
textarea:focus,
select:focus /* remove default focussed input styling */
{
    outline: none;
}

input[type='text']:focus,
input[type='number']:focus,
input[type='email']:focus,
input[type='date']:focus,
input[type='time']:focus,
input[type='datetime-local']:focus,
input[type='password']:focus,
input[type='file']:focus,
select:not([multiple]):focus
{
    border-left-width: 4px;
    border-color: var(--font-color);
}

input[type='text'].error,
input[type='number'].error,
input[type='date'].error,
input[type='time'].error,
input[type='datetime-local'].error,
input[type='email'].error,
input[type='password'].error,
input[type='file'].error,
select.error,
input[type='text']:invalid,
input[type='number']:invalid,
input[type='date']:invalid,
input[type='time']:invalid,
input[type='datetime-local']:invalid,
input[type='email']:invalid,
input[type='password']:invalid,
input[type='file']:invalid,
select:invalid {
    color: var(--font-color-dark);
    border: thin solid var(--accent-1);
    background-color: var(--background-warn);
}

input[type='text'].error:focus,
input[type='number'].error:focus,
input[type='date'].error:focus,
input[type='time'].error:focus,
input[type='datetime-local'].error:focus,
input[type='email'].error:focus,
input[type='password'].error:focus,
input[type='file'].error:focus,
select.error:focus {
    border-color: var(--accent-1);
}

/* Disabled styles */
input:disabled, input[aria-disabled=true],
textarea:disabled, textarea[aria-disabled=true],
select:disabled, select[aria-disabled=true],
.disabled, .readonly {
    background-color: var(--color-grey-1);
    cursor: default;
}

input[type='submit']:disabled {
    background-color: var(--color-grey-1);
    cursor: not-allowed;
}

option:disabled {
    background-color: var(--color-grey-1);
}

/* ------------------------------------------------------------------------------------------------------
buttons
 */

input[type='submit'],
input[type='button'],
button
{
    color: var(--background-color);
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    padding: 0.3em 0.5em;
    border-radius: 0;
    cursor: pointer;
}

input[type='submit']:hover:not(:disabled),
input[type='button']:hover:not(:disabled),
button:hover:not(:disabled)
{
    background-color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
}

input[type='submit']:disabled,
input[type='button']:disabled,
button:disabled {
    cursor: not-allowed;
}

input[type='button'].cancel,
button.cancel {
    color: var(--background-color);
    background-color: var(--color-grey-5);
    border: 1px solid var(--color-grey-5);
}

input[type='button'].cancel:hover:not(:disabled),
button.cancel:hover:not(:disabled) {
    background-color: var(--secondary-color);
    border: 1px solid var(--color-grey-4);
}


/* style a button like a link */
button.link {
    font: inherit;
    color: var(--secondary-color);
    background-color: inherit;
    border: none;
    padding: 0;
    cursor: default;
}

button.link:hover {
    color: var(--color-active);
    background-color: inherit;
    text-decoration: underline;
    border: none;
}

button.link:disabled {
    cursor: not-allowed;
}

button.link:hover:not(:disabled) {
    text-decoration: underline;
    cursor: pointer;
}

input[type='submit'].lite,
input[type='button'].lite,
button.lite
{
    color: var(--primary-color);
    background-color: transparent;
    border: 1px solid var(--secondary-color);
    padding: 0.3em 0.5em;
    border-radius: 0;
    cursor: pointer;
}

input[type='submit'].lite:hover:not(:disabled),
input[type='button'].lite:hover:not(:disabled),
button.lite:hover:not(:disabled)
{
    color: var(--background-color);
    background-color: var(--secondary-color);
}


/* ------------------------------------------------------------------------------------------------------
custom buttons buttons
 */

button.load-next {
    display: inline-block;
    color: var(--background-color);
    background-color: var(--primary-color);
    border: thin solid var(--primary-color);
    /*height: 1.4em;*/
    /*width: 1.8em;*/
    margin-left: 1em;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    padding: 0.2em 0.4em;
}

button.load-next:disabled {
    background-color: var(--color-grey-3);
    cursor: not-allowed;
}

/* form element styles */
input[type='text'].textBox-sm, .textBox-sm {
    width: 3em;
}

input[type='text'].textBox-med, .textBox-med {
    width: 5em;
}

.textBox-lg,
input[type='text'].textBox-lg,
input[type='password'].textBox-lg {
    width: 10em;
}

.text-wide,
input[type='text'].text-wide,
input[type='password'].text-wide {
    width: 20em;
}

.text-widest,
input[type='text'].text-widest,
input[type='password'].text-widest {
    width: 30em;
}

input[type='checkbox'].left {
    margin-right: 0.75em;
}



/* ------------------------------------------------------------------------------------------------------
toggle checkboxes, just add class="toggle" to checkbox input
these classes use pixels since fractional proportions get rounded funny
*/

/* this is the track */
input[type='checkbox'].toggle {
    appearance: none;
    position: relative;
    display: inline-block;
    background-color: var(--color-grey-3);
    height: 20px;
    width: 40px;
    vertical-align: middle;
    border-radius: 20px;
    transition: 200ms transform;
    margin-left: 0.5em;
    margin-right: 0.25em;
}

/* this is the circle */
input[type='checkbox'].toggle::before {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    background-color: var(--background-color);
    border: thin solid transparent;
    border-radius: 14px;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: 200ms transform;
    transform: translateX(0px);
}

/* checked */
input[type='checkbox'].toggle:checked {
    background-color: var(--secondary-color);
}

/* checked, so move the circle */
input[type='checkbox'].toggle:checked::before {
    transform: translateX(20px);
}

/* show it's active */
input[type='checkbox'].toggle:active,
input[type='checkbox'].toggle:focus,
input[type='checkbox'].toggle:focus-visible
{
    outline: thin solid var(--font-color);
    outline-offset: 2px;
}

input::placeholder {
    color: var(--color-grey-4);
    font-style: italic;
    font-weight: lighter;
}


/* =========================================================================================
new classes for simple material icons
========================================================================================= */
.material-icons.sc-icon,
.material-icons.sc-icon-inverse,
.material-icons.sc-icon-spacer {
    font-size: 1em;
    vertical-align: text-bottom;
    padding: 0;
    margin: 0;
}

.material-icons.sc-icon {
    color: var(--font-color);
    background-color: var(--background-color);
    border: thin solid var(--primary-color);
}

.material-icons.sc-icon-inverse {
    color: var(--background-color);
    background-color: var(--primary-color);
    border: thin solid var(--primary-color);
}

button.sc-icon,
button.sc-icon-inverse,
button.sc-symbol
{
    border: thin solid transparent;
    border-radius: 0.2em;
    padding: 0;
    color: currentColor;
    background-color: transparent;
    vertical-align: middle;
}

.material-icons.sc-icon:hover {
    border-color: var(--accent-2);
}

button.sc-icon-inverse:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.material-icons.sc-symbol,
.material-icons.sc-symbol-spacer {
    vertical-align: middle;
    margin-right: 0.25em;
}

button.material-icons.sc-symbol:hover {
    background-color: transparent;
    border-color: transparent;
    outline: thin solid var(--font-color);
    outline-offset: 0;
}

.material-icons.bold {
    font-weight: bolder;
}

.material-icons.boldest {
    font-weight: bold;
}

.material-icons.caution {
    color: var(--color-font-priority);
}

.material-icons.accent_2 {
    color: var(--accent-2);
}

.material-icons.accent_5 {
    color: var(--accent-5);
}

.material-icons.sc-icon-spacer,
.material-icons.sc-symbol-spacer {
    color: transparent;
    background-color: transparent;
    cursor: inherit;
}

.material-icons.caution:disabled,
.material-icons.accent_2:disabled,
.material-icons.accent_5:disabled {
    color: var(--color-grey-2);
    cursor: default;
}

.material-icons.noborder {
    border: thin solid transparent;
}

/* ------------------------------------------------------------------------------------------------------
page layout classes
*/
.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-expander {
    flex-grow: 1;
}

.justify-left {
    text-align: left;
}

div.justify-left, span.justify-left {
    float: left;
}

.justify-right {
    text-align: right;
}

div.justify-right,
span.justify-right,
button.justify-right {
    float: right;
}

.float_r {
    float: right;
}

.clear {
    clear: both;
    display: block;
    width: 0;
    height: 0;
}



/* Helper classes
----------------------------------------------------------------------------------------------------*/

.hidden {
    display: none;
}

/* use this class to hide items that want to be present for screen readers but not show up visually (like some labels) */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.full_width {
    width: 100%;
    box-sizing: border-box;
}

.half_width {
    width: 50%;
    box-sizing: border-box;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.center {
    text-align: center;
    margin-right: auto;
    margin-left: auto;
}

.indent1 {
    margin-left: 1rem;
}

.indent2 {
    margin-left: 2rem;
}

.indent5 {
    margin-left: 5rem;
}

.indent_10 {
    margin-left: 10px;
}

.indent_20 {
    margin-left: 20px;
}

.indent_30 {
    margin-left: 30px;
}

.indent_40 {
    margin-left: 40px;
}

.indent_50 {
    margin-left: 50px;
}

.indent_60 {
    margin-left: 60px;
}

/* font classes
----------------------------------------------------------------------------------------------------*/

.bold,
.strong {
    font-weight: bold;
}

.unbold {
    font-weight: lighter;
}

.smaller {
    font-size: smaller;
}

.smaller2 {
    font-size: 0.7em;
}

.larger {
    font-size: larger;
}


.center {
    text-align: center;
}

.normal {
    color: var(--font-color);
    font-weight: normal;
    font-size: 1rem;
}

.monospace {
    font-family: var(--font-monospace), monospace;
}

/* ============================================================
styles used by sc_ui_message() and sc_ui_block()
 */
.result_block,
.result_msg {
    padding-top: 0.5em;
    padding-right: 1.5em;
    padding-left: 0.5em;
    margin: 1em 0;
    display: inline-block;
}

.result_msg {
    margin: 0;
}

.result_block > h2,
.result_msg > h2 {
    padding-right: 1.5em;
    margin: 0;
    border: 0;
    display: inline-flex;
    align-items: center; /* Align symbol and text vertically */
}

span.valign {
    display: inline-flex;
    align-items: center; /* Align symbol and text vertically */
}

.result_block.pass {
    border-top: thin solid var(--secondary-color);
    border-bottom: thin solid var(--secondary-color);
}



.result_block.pass > h2,
.result_msg.pass > h2 {
    color: var(--primary-color);
}

.result_block h2 em,
.result_msg h2 em {
    margin-left: 0.3rem;
    margin-right: 0.3rem;
}

.result_block.fail {
    border-top: thin solid var(--font-color-error);
    border-bottom: thin solid var(--font-color-error);
}

.result_block.fail > h2,
.result_msg.fail > h2 {
    color: var(--font-color-error);
}

.result_block.warning {
    border-top: thin solid var(--font-color-warn);
    border-bottom: thin solid var(--font-color-warn);
}

.result_block.warning > h2,
.result_msg.warning > h2 {
    color: var(--font-color-warn);
}

.result_block.info {
    border-top: thin solid var(--secondary-color);
    border-bottom: thin solid var(--secondary-color);
}

.result_block.info > h2,
.result_msg.info > h2 {
    color: var(--secondary-color);
}

.result_block.sc-note {
    border: thin solid var(--color-grey-3);
    background-color: var(--color-background-4);
    padding: 1em;
}

.result_block.sc-note > h2 {
    color: var(--primary-color);
}

.result_block.sc-note2 {
    border: thin solid var(--color-grey-3);
    background-color: var(--color-grey-1);
    padding: 1em;
}

.result_block.sc-note2 > h2 {
    color: var(--font-color);
}

span.footnote {
    color: var(--font-color);
    border: thin solid var(--color-grey-3);
    background-color: var(--color-grey-1);
    padding: 0.5em;
    margin: 0.75em;
}

/* aside.note styled similar to .result-block.sc-note */

aside.note {
    box-sizing: border-box;
    min-width: 30%;
    margin: 1rem;
    padding: 0.5rem 1rem 1rem;
    border: thin solid var(--color-grey-3);
    /*background-color: var(--color-grey-1);*/
    background-color: var(--color-background-4);
}

div.note {
    box-sizing: border-box;
    display: inline-block;
    min-width: 30%;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 0.5rem 1rem 1rem;
    border: thin solid var(--color-grey-3);
    background-color: var(--color-grey-1);
}

div.note::before,
aside.note::before {
    content: "Note";
    display: block;
    font-size: larger;
    font-weight: bold;
    text-decoration: underline solid var(--secondary-color);
    color: var(--primary-color);
    margin-bottom: 0.25rem;
}

span.note {
    box-sizing: border-box;
    display: inline-block;
    min-width: 30%;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding-top: 1rem;
    padding-right: 1rem;
    padding-left: 1rem;
    padding-bottom: 1rem;
    background-color: var(--color-grey-1);
}


span.note::before {
    content: "Note:";
    font-size: larger;
    font-weight: bold;
    text-decoration: underline solid var(--secondary-color);
    color: var(--primary-color);
    margin-bottom: 0.25rem;
}

.composer_note {
    margin: 1em 0 0.5em;
    padding: 1em;
    color: var(--font-color-dark);
}

.note.accent,
.note_block.accent {
    background: var(--color-background-4);
}


/*-------------------------------------------------------------------------
various ways to style a block of text for showing instructions, notes, etc.
-------------------------------------------------------------------------*/
.cautionBox {
    width: 80%;
    padding: 20px;
    margin: 12px 0 12px 0;
    border: thin solid var(--color-grey-1);
    color: var(--accent-1); /*-- sitewide default error color --*/
}

.info_block {
    font-weight: bolder;
    padding: 1.0em;
    margin: 1em 0;
    border: thin solid var(--secondary-color);
    background-color: var(--color-background-2);
}

.note_block,
.note_right {
    box-sizing: border-box;
    min-width: 30%;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border: thin solid var(--color-grey-3);
    background-color: var(--color-grey-1);
}


.note_block > h2 {
    margin-top: 0;
    margin-bottom: 0.5em;
    border-bottom-color: var(--color-grey-4);
}

.note_block div.note_head,
.note_block span.note_head
{
    margin-right: 0.5em;
    font-weight: bolder;
    font-size: larger;
    color: var(--primary-color);
    text-decoration: underline solid var(--secondary-color);
}

.note_block > div.note_head {
    margin-bottom: 0.25em;
}



.warning_block {
    padding: 1.0em;
    margin: 1em 0;
    border: thin solid var(--accent-1);
    background-color: var(--background-warn);
}

.note_right {
    width: 200px;
    position: relative;
    float: right;
}


/* ------------------------------------------------------------------------------------------------------
 generic font styles
 */

.green,
.success {
    color: green;
}

.color2 {
    color: var(--secondary-color);
}


.warning, .warn {
    /*color: var(--font-color-warn);*/
    color: var(--font-color-warn2);
}

.error {
    color: var(--accent-1);
}

.danger {
    color: var(--accent-1);
}

.error-outline {
    border: thin solid var(--accent-1);
}

.highlight-error {
    background-color: var(--highlight-error);
}


.error-box {
    border: 1px solid var(--accent-1);
    background-color: var(--color-background-3);
    color: var(--font-color-dark);
    margin-bottom: 1rem;
}


.status-good {
    background-color: green;
    color: white;
}

.status-bad {
    background-color: var(--accent-1);
    color: white;
}

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

.ajaxLoading {
    width: 80%;
    min-height: 20px;
    min-width: 32px;
    background: url(../images/ajax-loader.gif) no-repeat center;
}

/*
 UI Grouping Constructs
  */

/*-------------------------------------------------------------------------
accordion content
 add the same name="xxx" to all details and when one opens the previous closes
<details class="sectional">
   <summary>Shown when closed</summary>
   <div class="specifics">
      [html content]
   </div>
<details>
-------------------------------------------------------------------------*/
details.sectional {
    border: thin solid var(--color-grey-3);
    border-radius: 0.25em;
    padding: 0.5em 0.5em 0;
    margin-bottom: 0.25em;
}

details.sectional summary {
    color: var(--primary-color);
    background-color: var(--background-color);
    font-weight: bold;
    margin: -0.5em -0.5em 0;
    padding: 0.5em;
    border-radius: 0.25em;
    cursor: pointer;
}

details.sectional[open] {
    padding: 0.5em;
}

details.sectional[open] summary {
    margin-bottom: 0.5em;
    border-bottom: thin solid var(--color-grey-3);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

details.sectional .specifics {
    /*font-size: smaller;*/
}

h3.sectional {
    color: var(--primary-color);
    background-color: var(--color-background-2);
    border: thin solid var(--color-grey-3);
    font-weight: bold;
    font-size: 1.1em;
    padding: 0.5em;
    margin-top: 1em;
    margin-bottom: 0.25em;
}

section.card {
    border: thin solid var(--color-grey-3);
    border-radius: 0.25em;
    padding: 0.5em;
    margin-bottom: 0.25em;
}

/*-------------------------------------------------------------------------
Content cards in the composer
<div class='sectionBox'>
    <h2>Copy Study</h2>
    <div class='content'>
        [html content]
    </div>
</div>
-------------------------------------------------------------------------*/
.sectionBox {
    display: grid;
    margin-right: 0.3rem;
    margin-left: 0.3rem;
    margin-bottom: 0.5rem
}

.sectionBox > h2 {
    color: var(--primary-color);
    background-color: var(--color-background-2);
    /*min-width: 10rem;*/
    border-top: 1px solid var(--color-grey-4);
    border-right: 1px solid var(--color-grey-4);
    border-left: 1px solid var(--color-grey-4);
    font-weight: bold;
    font-size: 1.2rem;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-bottom: 0;
}

.sectionBox > .content {
    font-weight: normal;
    width: 100%;
    border: 1px solid var(--color-grey-3);
    padding: 0.3rem;
    clear: both;
    box-sizing: border-box;
}

.sectionBox > div, .sectionBox > p {
    width: 100%;
    box-sizing: border-box;
}



/* hidden note revealed by matching clickText, which is bad for accessibility */
.clickText {
    color: var(--secondary-color); /*-- sitewide default link color --*/
    cursor: pointer;
}

.clickText:hover {
    color: var(--color-grey-5); /*-- sitewide default link hover / "lighter" text color --*/
}


.InfoText {
    min-width: 30%;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    padding: 1rem 2rem 1rem 4rem;
    background: var(--color-grey-1) url(../images/note.png) no-repeat;
    display: none;
}



/*-------------------------------------------------------------------------
-------------------------------------------------------------------------*/
fieldset {
    border: thin solid var(--color-grey-2);
}

fieldset legend {
    font-family: var(--font-monospace), monospace;
    color: var(--secondary-color);
    padding-left: 0.5em;
    padding-right: 0.5em;
}

fieldset.inline {
    display: inline-block;
}

fieldset.inline.hidden {
    display: none;
}

fieldset.row > span {
    display: flex;
    flex-flow: row wrap;
    gap: 1.5em;
}

fieldset.column > span {
    display: flex;
    flex-flow: column wrap;
    gap: 0.25em;
}

fieldset.row > span label > input,
fieldset.column > span label > input
{
    margin-left: 0.5em;
}


/* display a set of checkboxes as buttons which are in a "checked" state or no */
.checkbox-buttons {
    /*display: flex;*/
    /*gap: 0.5rem;*/
    /*box-sizing: border-box;*/
}

.checkbox-buttons input[type="checkbox"] {
    display: none;
}

.checkbox-buttons label {
    padding: 0.25rem 0.5rem;
    background-color: var(--color-grey-1);
    border: thin solid var(--color-grey-5);
    /*border-radius: 5px;*/
    cursor: pointer;
    transition: background-color 0.1s, color 0.1s;
}

.checkbox-buttons input[type="checkbox"]:checked + label {
    background-color: var(--secondary-color);
    color: #fff;
}


div.debug {
    background-color: var(--color-background-3);
    border: 1px solid var(--accent-2);
    padding: 0.25rem;
    margin: 0.25rem;
    max-width: 50rem;
    overflow-x: scroll;
}