/*
Copyright (c) 2022 EARCE.NET

Author: d.idei@earce.net
Description: CSS to apply "Simple Wireframe"
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* -------------------------------------------------- */
body
{
    background-color  : #ffffff;
}

/* -------------------------------------------------- */
.header
{
    padding-left  : 10px;
    padding-right : 10px;
    height        : 30px;
    text-align    : left;
    background    : #16160e;
    color         : white;
}

/* -------------------------------------------------- */
.flex_menubar
{
    background-color  : #2b2b2b;
}

.flex_menubar a
{
    font-weight     : bold;
    color           : white;
    padding         : 8px 20px;
    text-decoration : none;
    text-align      : center;
}

.flex_menubar a:hover
{
    background-color: #dddddd;
    color           : #ee7800;
}

/* -------------------------------------------------- */
.submenubar li
{
    padding         : 5px 0px;
    font-weight     : bold;
    white-space     : nowrap;
}

.submenubar li a
{
    text-decoration : none;
    text-align      : center;
    color           : #2b2b2b;
}

.submenubar li a:hover
{
    color           : #ee7800;
}

/* -------------------------------------------------- */
.item_group
{
    font-size       : 14pt;
    border          : 1px #c3c3c3 ridge;
    border-radius   : 8px;
    padding         : 10px 10px;
    min-width       : 480px;
    background-color: #ffffff;
}

.item_group h5,
.item_group h4,
.item_group h3
{
    white-space     : nowrap;
}

.item_title
{
    margin          : 0px;
    padding         : 5px 10px;
    display         : flex;
}

.item_title h5,
.item_title h4,
.item_title h3
{
    margin          : 0px;
}

.item_title .title
{
    font-size       : 18pt; 
    font-weight     : bold;
}

.alert {
    font-size       : 14pt;
    font-weight     : bold;
    margin          : auto 2em;
    padding         : 0.1em 1em;
    color           : #d22222;
    border          : 3px #ec6d71 solid;
    border-radius   : 4px;
}

.alert_item {
    background-color: #ffbc7a;
    border-radius   : 8px;
}

.alert_item::placeholder
{
    color           : #8d8d8d;
}



.item_data
{
    margin          : 0px;
    padding         : 5px 10px;
}

.item_data label
{
    font-size       : 10pt;
}

.item_data input[type="text"]
{
    width           : 100%;
}

::placeholder
{
    color           : #adadad;
    font-size       : 0.8em;
}

input, 
select,
button
{
    font-size       : 14pt;
    height          : 2em;
    border          : 1px solid #d5d5d5;
    border-radius   : 10px;
    padding         : 2px 10px;  
}

.item_data input[type="checkbox"],
.item_data input[type="radio"]
{
    width           : 30px;
    vertical-align  : middle;
}

.item_data input[type="checkbox"] + label,
.item_data input[type="radio"] + label
{
    font-size       : 14pt;
    vertical-align  : middle;
    margin-right    : 1em;
}

input[type="button"],
button
{
    height          : 40px;
    width           : 8em;
    padding         : 2px 30px;
}

input[type="button"]:hover,
button:hover
{
    color           : #2b2b2b;
    background-color: #ffa500;
    border          : 1px solid #2b2b2b;
}

.cancel_button
{
    color           : #2b2b2b;
    background-color: #ffffff;
    border          : 1px solid #2b2b2b;
}

.entry_button
{
    color           : #ffffff;
    background-color: #187FF5;
    border          : 1px solid #187FF5;
}

.warning_button
{
    color           : #ffffff;
    background-color: #5a4498;
    border          : 1px solid #5a4498;
}

.caution_button
{
    color           : #ffffff;
    background-color: #d22222;
    border          : 1px solid #d22222;
}

.item_action
{
    text-align      : center;
}  

/* -------------------------------------------------- */
input[type="checkbox"].toggle {
    height          : auto;
    display         : none;
    vertical-align  : middle;
}

input[type="checkbox"].toggle + .toggleGroup {
    vertical-align  : bottom;
}

input[type="checkbox"].toggle + .toggleGroup .toggleOn {
    vertical-align  : bottom;
    display         : none;
}

input[type="checkbox"].toggle + .toggleGroup .toggleOff {
    vertical-align  : bottom;
    display         : inline;
}

input[type="checkbox"].toggle:checked + .toggleGroup .toggleOn {
    display         : inline;
}

input[type="checkbox"].toggle:checked + .toggleGroup .toggleOff {
    display         : none;
}



/* -------------------------------------------------- */
.wizard {
    font-size       : 14pt;
    border          : 1px #c3c3c3 ridge;
    border-radius   : 8px;
    padding         : 10px 10px;
    min-width       : 400px;
    background-color: #ffffff;
}