:root
{
    --background-color-dialog: #ffffff;
    --background-color-header: #C7CDD1;
    --background-color-input-control: #607D8B;
    --background-color-input-control-light: rgba(102,102,102,0.5);
    --border-color-default: #9EB1BB;
    --border-color-input-control: #435761;
    --border-color-input-control-light: rgba(60,59,55,0.5);
    --color-default: #3C3B37;
    --color-header: #303E45;
    --color-icon: #435761;
    --color-input: #ffffff;
    --color-dark: #729FCF;
    --color-light: #ccc;
    --filter-input-control-active: brightness(90%);
    --filter-input-control-hover: brightness(130%);
    --text-shadow-input: 0px 0px 2px #000;
    --transition-input: filter 0.3s ease-in-out;
}

body, input:not([type="button"]):not([type="submit"]), textarea
{
    color: var(--color-default);
}

a
{
    color: rgb(128, 171, 1);
    transition: filter ease-in-out 0.3s;
}

a:hover
{
    text-decoration: none;
}

a:hover
{
    filter: brightness(170%);
}

dialog a:hover
{
    filter: brightness(130%);
}

code
{
    background-color: var(--color-input);
    border-color: var(--border-color-default);
    border-radius: calc(var(--size-default) / 5);
}

code span
{
    color: #0200FF;
}

kbd
{
    color: #A52A2A;
}

samp
{
    color: #FF00FF;
}

var
{
    color: #6A5ACD;
}

main > form
{
    background: #efefef;
    border-color: rgba(0,0,0,0.5);
    border-style: solid;
    box-shadow: 0 calc(var(--size-default) / 2) calc(var(--size-default) / 2) rgba(0,0,0,0.4);
}

main > form > header, dialog:not(#ui-alert):not(#ui-confirm):not(#ui-progress) > header
{
    background: var(--background-color-header);
    color: var(--color-header);
    border-left-color: var(--color-icon);
    border-left-style: solid;
}

#ui-confirm > header::before, #ui-alert > header::before
{
    color: var(--color-icon);
}

form > footer
{
    border-top-color: var(--border-color-default);
    border-top-style: solid;
}

.ui-info
{
    color: rgba(255,255,255,0.9);
    border-color: rgba(255,255,255,0.1);
    border-style: solid;
    background: #5F84AA;
}

.ui-info a
{
    color: #182D4C;
}

.ui-default
{
    border-color: #77d5f7;
    border-style: solid;
    background: linear-gradient(to bottom, #2e90bd 0%, #2e90bd 50%, #0078ae 50%, #449cc3 75%, #449cc3);
    color: #ffffff;
}

.ui-default a
{
    color: #ffffff;
}

.ui-hover
{
    border-color: #448dae;
    border-style: solid;
    background: linear-gradient(to bottom, #7ecbed, #deecf3);
    color: #026890;
}

.ui-hover a
{
    color: #026890;
}

.ui-active
{
    border-color: #ff8200;
    border-style: solid;
    background: linear-gradient(to bottom, #ffa233 0%, #ffa233 50%, #ff8b00 50%, #ffad4c);
    color: #512100;
}

.ui-active a
{
    color: #512100;
}

.ui-highlight
{
    border-color: #fcd113;
    border-style: solid;
    background: linear-gradient(to bottom, #f8f2d7, #f8eaa8);
    color: #915608;
}

.ui-highlight a
{
    color: #915608;
}

.ui-error
{
    border-color: #f8893f;
    border-style: solid;
    background: linear-gradient(to bottom, #feeed6, #fee4bd);
    color: #592003;
}

.ui-error a
{
    color: #592003;
}

menu[type="list"] hr
{
    border-top-color: var(--border-color-default);
}

dialog
{
    border-color: var(--border-color-default);
    color: var(--color-default);
    box-shadow: 0 calc(var(--size-default) / 2) calc(var(--size-default) / 2) rgba(0,0,0,0.4);
    background: var(--background-color-dialog);
}

dialog > footer
{
    border-top-color: var(--border-color-default);
}

input:-webkit-autofill
{
    -webkit-box-shadow: 0 0 0px 1000px white inset, 1px 1px 1px rgba(0,0,0,0.2) !important;
    -webkit-text-fill-color: var(--color-default) !important;
}

.ui-range
{
    color: var(--color-input);
    text-shadow: var(--text-shadow-input);
}

input[type="button"], input[type="submit"], select:not([size])
{
    color: var(--color-input);
    border-color: var(--border-color-input-control);
    text-shadow: var(--text-shadow-input);
    transition: var(--transition-input);
    border-bottom-width: calc(var(--border-width-default) * 2);
}

input[type="button"], input[type="submit"]
{
    background: var(--background-color-input-control);
}

input[type="button"]:hover, input[type="submit"]:hover, input[type="radio"]:hover, input[type="checkbox"]:hover
{
    filter: var(--filter-input-control-hover);
}

input[type=range]::-webkit-slider-thumb:hover
{
    filter: var(--filter-input-control-hover);
}

input[type=range]::-moz-range-thumb:hover
{
    filter: var(--filter-input-control-hover);
}

input[type="button"]:active, input[type="submit"]:active, input[type="radio"]:active, input[type="checkbox"]:active
{
    filter: var(--filter-input-control-active);
}

input[type="button"]:active, input[type="submit"]:active, select:not([size]):active
{
    border-bottom-width: var(--border-width-default);
    border-top-width: calc(var(--border-width-default) * 2);
}

@supports not (-moz-appearance: none)
{
    /*HACK: Firefox closes the list*/
    select:not([size]):active
    {
        filter: var(--filter-input-control-hover);
    }

    select:not([size]):hover
    {
        filter: var(--filter-input-control-hover);
    }
}

input[type=range]::-webkit-slider-thumb:active
{
    filter: var(--filter-input-control-active);
}

input[type=range]::-moz-range-thumb:active
{
    filter: var(--filter-input-control-active);
}

select[size], textarea, input[type="text"], input[type="search"], input[type="date"], input[type="password"], input[type="email"], input[type="file"], input[type="number"], input[type="url"]
{
    border-color: var(--border-color-default);
    background: no-repeat radial-gradient(rgb(128, 171, 1) 50%, transparent 60%) calc(100% - var(--size-default) / 3) center/var(--size-default) var(--size-default), var(--color-input) !important;
}

select[size]:invalid, textarea:invalid, input[type="text"]:invalid, input[type="search"]:invalid, input[type="date"]:invalid, input[type="password"]:invalid, input[type="email"]:invalid, input[type="file"]:invalid, input[type="number"]:invalid, input[type="url"]:invalid
{
    background: no-repeat radial-gradient(rgba(245,121,0,0.8) 50%, transparent 60%) calc(100% - var(--size-default) / 3) center/var(--size-default) var(--size-default), var(--color-input) !important;
}

select:not([size]):-moz-focusring
{
    text-shadow: 0 0 0 var(--color-input), var(--text-shadow-input);
}

select:not([size])
{
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="70"><polygon points="5,-5 95,-2 50,65" style="fill:rgba(255,255,255,1);stroke:rgba(0,0,0,1);stroke-width:3" /></svg>') no-repeat right calc(var(--size-default) / 2) top calc(var(--size-default) * 0.7)/calc(var(--size-default) * 1.3), var(--background-color-input-control);
}

progress
{
    border-color: var(--border-color-input-control-light);
    background-color: var(--background-color-input-control-light);
}

progress:indeterminate
{
    background-image: linear-gradient(to right, var(--background-color-input-control) 20%, transparent 20%);
}

progress:not(:indeterminate)::-webkit-progress-bar
{
    background-color: var(--background-color-input-control-light);
    border-color: var(--border-color-input-control-light);
}

progress:not(:indeterminate)::-moz-progress-bar
{
    background-color: var(--background-color-input-control);
}

progress::-webkit-progress-value
{
    background-color: var(--background-color-input-control);
}

input[type=range]::-webkit-slider-runnable-track
{
    background: var(--background-color-input-control-light);
    border-color: var(--border-color-input-control-light);
}

input[type=range]::-moz-range-track
{
    background: var(--background-color-input-control-light);
    border-color: var(--border-color-input-control-light);
}

input[type="radio"], input[type="checkbox"]
{
    border-color: var(--border-color-input-control);
    transition: var(--transition-input);
    border-bottom-width: var(--border-width-default);
    background: var(--background-color-input-control);
    text-shadow: var(--text-shadow-input);
}

input[type="radio"]:after, input[type="checkbox"]:after
{
    color: var(--color-input);
}

input[type=range]::-webkit-slider-thumb
{
    border-color: var(--border-color-input-control);
    transition: var(--transition-input);
    background: var(--background-color-input-control);
}

input[type=range]::-moz-range-thumb
{
    border-color: var(--border-color-input-control);
    transition: var(--transition-input);
    background: var(--background-color-input-control);
}