/***** AnkerWebApp Author Lukas Wagner 2024 *************************************************************
 *	This is a Web-Applikation that uses the AnkerChainCalculator Code provided by Dr. Mathias Wagner    *
 *	used in his App for Apple-Appstore and GooglePlay. This is a rewrite of the Web-Applikation from    *
 *  2020.                                                                                               *
*********************************************************************************************************/

/***
 * root: global variables
 **/
:root
{
    --gen-color:  #2C528C; /*Apple YlnMn Blue*/
    --bg-color: #78C5EF; /*Apple Maya Blue*/
    --bg-color-trans: transparent;
    --bg-color-enabled: white;
    --bg-color-disabled: #52B0E2;
    --bg-color-blue: blue;
    --bg-color-red: red;
    --bg-color-yellow: yellow;
    --bg-color-magenta: magenta;
    --bg-color-black: black;
    --bg-color-info: #D6FF99;
    --bg-color-messageBox: #FFEEED;
    --bg-color-disclaimer: #FFFD8D;
    
    --error-font-sz: 10px;
    
    --font-family: /**/Helvetica, /**/sans-serif/**/;
    --z-index-front: 5;
    --z-index-mid: 3;
    --z-index-back: 1;
}

/***
 * Screen specific global variables
 * Base values in last media entry due to css cascade
 **/
@media (min-width: 1500px)
{
    body
    {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
    }
}

@media (max-width: 1500px)
{
    body
    {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
    }
}

/***
 * Set all base values
 **/
:root
{
    --border-width: 10px;
    --border-radius: 15px;
    --border-width-info: 5px;
    --border-radius-info: 10px;
    --padding--info: 5px;
    --border-width-disclaimer: 5px;
    --border-radius-disclaimer: 10px;
    --padding--disclaimer: 5px;
    --body-width: calc(100% - var(--border-width)*2);
    --margin: 25px;

    --large-font-sz: 64px;
    --small-font-sz: 42px;
	--dpmenu-font-sz: 32px;
	--version-font-sz: 48px;
	--optSpan-font-sz: 16px;
    --debug-font-sz: 24px;

    --margin-messageButton: 25px;
}

div
{
    margin-top: 20px;
}

/***
 * garantied desktop media.
 * Set all base values
 **/
@media (hover: hover) and (pointer: fine)
{
    :root
    {
        --body-width: 660px;
        --margin: 55px;
		
		--large-font-sz: 32px;
		--small-font-sz: 24px;
		--dpmenu-font-sz: 16px;
		--version-font-sz: 24px;
		--optSpan-font-sz: 8px;
        --debug-font-sz: 12px;

        --margin-message-button: 10px;
	}

    div
    {
        margin-top: 10px;
    }
}

/** debug outline **
* {
  outline: 1px solid red;
}
/**/

/***
 * html: rules for the entire document
 **/
html
{
    background-color: white;
}

/***
 * main: visual app centered on screen
 **/
main
{
    display: flow-root;
    max-width: calc(var(--body-width) + var(--border-width)*2);
}

/***
 * aside: info- and debug messages
 **/
aside
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/***
 * header: 'Anchor Chain Calculator' text
 *          also used for calculate button
 **/
header, .calculate, .appCalculateBox
{
    background-color: var(--bg-color-trans);
    margin: auto;
    width: inherit;
    color: black;
    text-align: center;
    font-family: var(--font-family);
    font-style: normal;
    font-weight: bold;
    font-size: var(--large-font-sz);
}

/***
 * div: contains a row inside main
 */
div
{
    width: 100%;
    float: left;
}

/***
 * border: visual app centered on screen
 **/
.border
{
    background-color: var(--bg-color);
    margin: 0;
    margin-top: 10px;
    width: var(--body-width);
    min-height: 10px;
    border: solid;
    border-width: var(--border-width);
    border-radius: var(--border-radius);
}

/***
 * subdiv: override div rules
 **/
.subdiv
{
    margin-top: 0px;
}

/***
 * format: default text formating
 */
.format
{
    color: black;
    font-family: var(--font-family);
    font-style: normal;
    font-weight: bold;
    font-size: var(--small-font-sz);
    line-height: 150%;
}

/***
 * left: float an element left
 **/
.left
{
    float: left;
}

/***
 * right: float an element right
 **/
.right
{
    float: right;
}

/***
 * margin: combinded with left if a margin is needed
 **/
.margin.left
{
    margin-left: var(--margin);
}

/***
 * margin: combinded with right if a margin is needed
 **/
.margin.right
{
    margin-right: var(--margin);
}

/***
 * button: default button formating
 **/
.button
{
    cursor: pointer;
    font-weight: normal;
    font-size: var(--version-font-sz);
    border: none;
    border-radius: 5px;
    padding-left: 16px;
    padding-right: 16px;
}
.button:disabled
{
    background-color:var(--bg-color-enabled);
    cursor: default;
}
.button:enabled
{
    background-color:var(--bg-color-disabled);
}

/***
 * ModeBox: default ModeBox formating
 **/
.appModeBox
{
    background-color:var(--bg-color-trans);
    margin: auto;
    padding: 2px;
    z-index: var(--z-index-front);
}

/***
 * InputBox: default formating for user input fields
 * OutputBox: default formating for calculation output fields
 **/
.appInputBox, .appOutputBox
{
    background-color:var(--bg-color-trans);
    margin: auto;
    z-index: var(--z-index-mid);
}

.appOutputBox
{
    margin-bottom: 15px;
}

input, option, select
{
    margin-left: 10px;
    margin-right: 10px;
    border: none;
    border-radius: 5px;
}

input[type="text"]
{
    color: black;
    text-align: center;
    font-family: var(--font-family);
    font-style: normal;
    font-weight: normal;
    font-size: var(--small-font-sz);
}

input[disabled]
{
    background-color: var(--bg-color-disabled);
    color: black;
    opacity: 1;
    -webkit-text-fill-color: black;
;
}

select
{
    cursor: pointer;
    padding: 5px;
}

/***
 * calculate: formating for calculate button
 **/
.calculate
{
    cursor: pointer;
    width: auto;
    border: none;
    padding: 6px;
    margin-top: 5px;
    margin-bottom: 5px;
}

/***
 * missing or invalid input message
 **/
.messageBox
{
    overflow: hidden;
    background-color:var(--bg-color-messageBox);
    position: absolute;
    float: left;
    width: calc(var(--body-width) * 3/4);
    margin-top: calc(var(--body-width) * 1/4);
    margin-left: calc(var(--body-width) * 1/8);
    border: solid;
    border-width: calc(var(--border-width) / 2);
    border-radius: calc(var(--border-width) / 2);
    
    text-align: center;
    font-family: var(--font-family);
    font-style: normal;
    font-weight: normal;
    font-size: var(--small-font-sz);
    z-index: var(--z-index-front);
}
 
.messageButton
{
    margin-top: var(--margin-messageButton);
    margin-bottom: var(--margin-messageButton);
    text-align: center;
    font-family: var(--font-family);
    font-style: normal;
    font-weight: normal;
    font-size: var(--small-font-sz);
    z-index: var(--z-index-front);
}

/***
 * disclaimer: default formating
 **/
.disclaimer
{
	width: var(--body-width);
    justify-content: center;
    border: solid;
    border-width: var(--border-width-disclaimer);
    border-radius: var(--border-radius-disclaimer);
    padding: var(--padding--disclaimer);
    color: red;
    background-color:var(--bg-color-disclaimer);
    color: red;
    text-align: center;
    font-family: var(--font-family);
    font-style: normal;
    font-weight: normal;
    font-size: var(--small-font-sz);
    z-index: var(--z-index-front);
}

/***
 * debug: default formating
 **/
.debug
{
    background-color:var(--bg-color-red);
    width: 90%;
    color: black;
    text-align: center;
    font-family: var(--font-family);
    font-style: normal;
    font-weight: normal;
    font-size: var(--debug-font-sz);
    z-index: var(--z-index-front);
}

/***
 * infoBox: default formating
 **/
.infoBox
{
    background-color:var(--bg-color-info);
    width: 75%;
    border: solid;
    border-width: var(--border-width-info);
    border-radius: var(--border-radius-info);
    padding: var(--padding--info);
    color: black;
    text-align: center;
    font-family: var(--font-family);
    font-style: normal;
    font-weight: normal;
    font-size: var(--small-font-sz);
    z-index: var(--z-index-front);
}

/**
 *
 **/
.counter
{
    width: auto;
}