:root { 
--font: 'Open Sans', sans-serif; 
--font-light: 'Open Sans light', sans-serif; 
--font-title: 'Open Sans', sans-serif; 
--font-console: 'Ubuntu Mono', monospace; 
--animation-fast: .25s; 
--animation-medium: .5s; 
--animation-slow: .75s; 
--animation-super-slow: 1s; 
--surface-1: #d9d9d9; 
--on-surface-1: #000000; 
--surface-2: #cccccc; 
--on-surface-2: #000000; 
--surface-3: #bfbfbf; 
--on-surface-3: #000000; 
--surface-4: #b3b3b3; 
--on-surface-4: #000000; 
--surface-5: #a6a6a6; 
--on-surface-5: #000000; 
--surface-6: #999999; 
--on-surface-6: #000000; 
--background: #e6e6e6; 
--on-background: #000000; 
--primary-color:#4A5C92; 
--on-primary-color: #FFFFFF; 
--primary-container-color:#DBE1FF; 
--on-primary-container-color: #00174B; 
--secondary-color:#585E72; 
--on-secondary-color: #FFFFFF; 
--secondary-container-color:#EEEDF4; 
--on-secondary-container-color: #161B2C; 
--tertiary-color: #745471; 
--on-tertiary-color:#FFFFFF; 
--tertiary-container-color: #E3E2E9; 
--on-tertiary-container-color:#2B122B; 
--error-color:#BA1A1A; 
--on-error-color: #FFFFFF; 
--error-container-color:#FFDAD6; 
--on-error-container-color: #410002; 
margin: 0; 
padding:0; 
overflow-x: hidden; 
-webkit-tap-highlight-color: transparent; 
} 
:root[data-theme=light-you]{ 
--surface-1: #bcd6f5; 
--on-surface-1: #000000; 
--surface-2: #a6c8f2; 
--on-surface-2: #000000; 
--surface-3: #90baef; 
--on-surface-3: #000000; 
--surface-4: #79adec; 
--on-surface-4: #000000; 
--surface-5: #639fe8; 
--on-surface-5: #000000; 
--surface-6: #4d91e5; 
--on-surface-6: #000000; 
--background: #d2e4f9; 
--on-background: #000000 
} 
:root[data-theme=dark-you]{ 
--surface-1: #0a2343; 
--on-surface-1: #ffffff; 
--surface-2: #0d2f59; 
--on-surface-2: #ffffff; 
--surface-3: #103b6f; 
--on-surface-3: #ffffff; 
--surface-4: #134786; 
--on-surface-4: #ffffff; 
--surface-5: #17529c; 
--on-surface-5: #ffffff; 
--surface-6: #1a5eb2; 
--on-surface-6: #ffffff; 
--background: #06182d; 
--on-background: #ffffff; 
} 
:root[data-theme=dark] { 
--surface-1: #262626; 
--on-surface-1: #ffffff; 
--surface-2: #333333; 
--on-surface-2: #ffffff; 
--surface-3: #404040; 
--on-surface-3: #ffffff; 
--surface-4: #4d4d4d; 
--on-surface-4: #ffffff; 
--surface-5: #595959; 
--on-surface-5: #ffffff; 
--surface-6: #666666; 
--on-surface-6: #ffffff; 
--background: #1a1a1a; 
--on-background: #ffffff 
} 
 
@media (prefers-reduced-motion) { 
 
} 
 
html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
margin: 0; 
padding: 0; 
border: 0; 
border: none; 
font-size: 100%; 
font: inherit; 
vertical-align: baseline; 
} 
 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
display: block; 
} 
body { 
line-height: 1; 
} 
ol, ul { 
list-style: none; 
} 
blockquote, q { 
quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
content: ''; 
content: none; 
} 
table { 
border-collapse: collapse; 
border-spacing: 0; 
} 
/** 
*Added by @akrck02 
*/ 
* { 
box-sizing: border-box; 
} 
*:focus { 
outline: var(--default-outline); 
} 
*[disabled]{ 
transition: none; 
animation:none; 
} 
button, input, select, textarea { 
border: none; 
} 
.box-center{ 
display: flex; 
justify-content: center; 
align-items: center; 
} 
.box-x-center{ 
display: flex; 
justify-content: center; 
} 
.box-x-start{ 
display: flex; 
justify-content: flex-start; 
} 
.box-x-end{ 
display: flex; 
justify-content: flex-end; 
} 
.box-x-around{ 
display:flex; 
justify-content: space-around; 
} 
.box-x-between{ 
display: flex; 
justify-content: space-between; 
} 
.box-y-center{ 
display: flex; 
align-items: center; 
} 
.box-y-start{ 
display: flex; 
align-items: flex-start; 
} 
.box-y-end{ 
display: flex; 
align-items: flex-end; 
} 
.box-wrap{ 
display: flex; 
flex-wrap: wrap; 
} 
.box-column{ 
display: flex; 
flex-direction: column; 
} 
.box-column-reverse{ 
display: flex; 
flex-direction: column-reverse; 
} 
.box-row{ 
display: flex; 
flex-direction: row; 
} 
.box-row-reverse{ 
display: flex; 
flex-direction: row-reverse; 
} 
.box-fraction{ 
--n: 1; 
width: calc(100% / var(--n)); 
} 
.primary { 
background: var(--primary-color); 
color: var(--on-primary-color); 
} 
.primary-container { 
border-radius: 1rem; 
background: var(--primary-container-color); 
color: var(--on-primary-container-color); 
} 
.secondary { 
background: var(--secondary-color); 
color: var(--on-secondary-color); 
} 
.secondary-container { 
border-radius: 1rem; 
background: var(--secondary-container-color); 
color: var(--on-secondary-container-color); 
} 
.tertiary { 
background: var(--tertiary-color); 
color: var(--on-tertiary-color); 
} 
.tertiary-container { 
border-radius: 1rem; 
background: var(--tertiary-container-color); 
color: var(--on-tertiary-container-color); 
} 
.error { 
background: var(--error-color); 
color: var(--on-error-color); 
} 
.error-container { 
border-radius: 1rem; 
background: var(--error-container-color); 
color: var(--on-error-container-color); 
} 
.surface-1 { 
background: var(--surface-1); 
color: var(--on-surface-1); 
border-radius: 1rem; 
} 
.surface-2 { 
background: var(--surface-2); 
color: var(--on-surface-3); 
border-radius: 1rem; 
} 
.surface-3 { 
background: var(--surface-3); 
color: var(--on-surface-3); 
border-radius: 1rem; 
} 
.surface-4 { 
background: var(--surface-4); 
color: var(--on-surface-4); 
border-radius: 1rem; 
} 
.surface-5 { 
background: var(--surface-5); 
color: var(--on-surface-5); 
border-radius: 1rem; 
} 
.surface-6 { 
background: var(--surface-6); 
color: var(--on-surface-6); 
border-radius: 1rem; 
} 
.text-left { 
text-align: left; 
} 
.text-right { 
text-align: right; 
} 
.text-center { 
text-align: center; 
} 
.text-justify { 
text-align: justify; 
} 
.bold , b, strong { 
font-weight: bold; 
} 
.italic, i, em { 
font-style: italic; 
} 
.no-copy * { 
-webkit-touch-callout: none; 
-webkit-user-select: none; 
-khtml-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none; 
user-select: none; 
} 
.text-truncate { 
overflow: hidden; 
text-overflow: ellipsis; 
white-space: nowrap; 
min-width: var(--min-width); 
} 
.row { 
display: flex; 
flex-direction: row; 
flex-wrap: wrap; 
width: 100%; 
} 
.column { 
flex-basis: 100%; 
} 
@media screen and (min-width: 800px) { 
.column { 
flex: 1; 
} 
} 
.monochrome { 
--scale : 100; 
filter: grayscale(var(--scale)); 
} 
.blur { 
--scale : 100px; 
filter: blur(var(--scale)); 
} 
.saturate { 
--scale : 1.5; 
filter: saturate(var(--scale)); 
} 
.bright { 
--scale : 1.5; 
filter: brightness(var(--scale)); 
} 
button { 
padding: .65rem 1rem; 
margin: 0.5rem .5rem; 
border-radius: 6rem; 
box-shadow: none; 
cursor: pointer; 
font-size: 1rem; 
height: 3rem; 
min-width: fit-content; 
background: var(--surface-2); 
color: var(--on-surface-2); 
transition: transform var(--animation-fast) ease-in-out, filter var(--animation-fast) ease-in-out; 
} 
button:hover, button:focus { 
filter: brightness(.9); 
} 
:root[data-theme=dark] button:hover, 
:root[data-theme=dark] button:focus { 
filter: brightness(1.2); 
} 
button:active { 
transform: scale(.92); 
} 
a { 
color: var(--primary-color); 
text-decoration: none; 
} 
input { 
border-radius: 1rem; 
padding: .25rem .75rem; 
height: 3rem; 
margin: 0.5rem .5rem; 
background : var(--surface-2); 
color: var(--on-surface-2); 
outline: .15rem solid transparent; 
} 
input[type="checkbox"] { 
margin: 10px; 
} 
input:focus { 
transition: outline-color var(--animation-fast); 
outline: .15rem solid var(--primary-color); 
} 
textarea { 
border-radius: 1rem; 
padding: .75rem .75rem; 
margin: 0.5rem .5rem; 
background : var(--surface-2); 
color: var(--on-surface-2); 
outline: .15rem solid transparent; 
} 
textarea:focus { 
transition: outline-color var(--animation-fast); 
outline: .15rem solid var(--primary-color); 
} 
textarea::placeholder { 
color: var(--on-item-background-color); 
} 
h1 { 
font-size: 2rem; 
margin: 1rem 1rem; 
} 
h2 { 
font-size: 1.8rem; 
margin: 1rem 1rem; 
} 
h3 { 
font-size: 1.6rem; 
margin: 1rem 1rem; 
} 
h4 { 
font-size: 1.4rem; 
margin: 1rem 1rem; 
} 
h5 { 
font-size: 1.2rem; 
margin: 1rem 1rem; 
} 
h6 { 
font-size: 1rem; 
margin: 1rem 1rem; 
} 
html { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
} 
body { 
position: absolute; 
width: 100%; 
height: 100%; 
margin: 0; 
padding: 0; 
background: var(--background); 
color: var(--on-background); 
font-family: var(--font); 
} 
label { 
cursor: pointer; 
} 
notification { 
position: fixed; 
bottom : -5rem; 
right : 1rem; 
width : 20rem; 
height: fit-content; 
background : rgba(255,255,255,.75); 
border-radius: .35rem; 
transition: .5s; 
padding: 1.5rem; 
opacity : 0; 
color: #404040; 
z-index: 1000; 
box-shadow: 0.1em .5rem .1rem rgba(0,0,0,.15); 
} 
notification.show { 
bottom: 1rem; 
opacity: 1; 
transition: .5s; 
} 
notification #nt-bar { 
margin-bottom: .5rem; 
display: flex; 
} 
notification #nt-bar.hidden{ 
display: none; 
} 
notification #nt-bar #nt-title{ 
font-size : 1.25rem; 
} 
notification #nt-content { 
word-break : break-word; 
} 
@media screen and (max-width: 500px) { 
notification { 
position: fixed; 
top : -5rem; 
right : 10%; 
width : 80%; 
} 
notification.show { 
top: 1rem; 
opacity: 1; 
transition: .5s; 
} 
} 
gtdf-select { 
font-size: .9rem; 
} 
gtdf-select #display-box { 
background: #f5f5f5; 
padding: .5rem .7rem; 
border-radius : .35rem; 
border: .1rem solid #eee; 
cursor: pointer; 
} 
gtdf-select #display-box:hover { 
transition: backgrounbd var(--fast); 
background: #f1f1f1; 
} 
gtdf-select #display-box #display-box-icon { 
margin-left: .5rem; 
} 
gtdf-select #selector { 
position: fixed; 
top: 3.5rem; 
visibility: hidden; 
background: #fff; 
box-shadow: .1rem .2rem .2rem rgba(0,0,0,.05); 
border-radius: .35rem; 
width: auto; 
} 
gtdf-select.show #selector { 
visibility: visible; 
} 
gtdf-select #selector .option { 
padding: .5rem .7rem; 
margin-top: .1rem; 
opacity: .8; 
cursor : pointer; 
} 
gtdf-select #selector .option:hover { 
background: #f5f5f5; 
} 
#bottombar{ 
position:fixed; 
width:100%; 
bottom:0; 
left:0; 
min-height:5rem; 
height: 5rem; 
background-color:var(--background); 
color:var(--color-text); 
box-shadow:0 -.4rem .5rem rgba(0,0,0,0.1); 
border-radius:1rem 1rem 0 0; 
} 
#bottombar .primary-button { 
width: 4.5rem; 
height: 4.5rem; 
border-radius: 50%; 
background-color: var(--accent-color); 
color: var(--color-text); 
box-shadow: 0 .25rem .25rem rgba(0,0,0,0.2); 
border: none; 
outline: none; 
position: absolute; 
bottom: 2.5em; 
cursor: pointer; 
transition: all 0.2s; 
} 
#bottombar .primary-button:active { 
transform: scale(0.9); 
} 
#bottombar .primary-button:focus { 
outline: none; 
} 
#bottombar .secondary-button { 
width: 30%; 
height: 4rem; 
border-radius: 1rem; 
background-color: rgba(0,0,0,0); 
position: absolute; 
bottom: 0rem; 
box-shadow: none; 
color: var(--secondary-text-color); 
font-size: .8rem; 
transition: background-color var(--medium) ease-in-out; 
} 
#bottombar .secondary-button.selected { 
background-color: var(--secondary-color); 
} 
#bottombar .secondary-button#income-button { 
left: 1rem; 
} 
#bottombar .secondary-button#outcome-button{ 
right: 1rem; 
} 
view#home { 
width: 100%; 
height: 100vh; 
padding: 1rem; 
font-size: 1.6rem; 
} 
view#home h1, 
p, 
b, 
footer { 
text-align: center; 
} 
view#home h1 { 
font-weight: 400; 
font-size: 2.2rem; 
width: 100%; 
} 
view#home h1#main-title { 
font-size: 2.15rem; 
margin-bottom: 1.25rem; 
text-align: left; 
max-width: 18rem; 
} 
view#home * { 
transition: 0.35s; 
user-select: none; 
} 
view#home.showing { 
opacity: 1; 
} 
view#home #main-frame { 
margin: 0 auto; 
padding: 20px; 
display: flex; 
flex-direction: column; 
justify-content: center; 
align-items: center; 
height: 500px; 
} 
view#home #result { 
text-align: left; 
border-radius: 1rem; 
margin-top: 0.1rem; 
padding: 20px; 
width: 100%; 
max-width: 19rem; 
font-size: 1.2rem; 
} 
view#home div#salary-input-panel { 
margin-bottom: 0.1rem; 
} 
view#home input#salary { 
border-radius: 1rem; 
border: none; 
width: calc(100% - 5.75rem); 
max-width: calc(100% - 4.75rem); 
padding: 0.25rem 0.75rem; 
height: 3rem; 
font-size: 1.05rem; 
} 
view#home button#payment-number { 
border-radius: 3rem; 
width: 3rem; 
height: 3rem; 
box-shadow: none; 
padding: 0.55rem; 
margin: 0 0.35rem; 
min-width: 3rem; 
outline: 0.1rem solid transparent; 
} 
view#home button { 
border-radius: 0.35rem; 
border: none; 
padding: 0.5rem 0.75rem; 
cursor: pointer; 
} 
view#home span.value-data { 
margin-bottom: 0.5rem; 
} 
view#home span.value-data label.label { 
font-size: 1.1rem; 
} 
view#home span.value-data span.value { 
border-radius: 1rem; 
padding: 0.2rem 0.75rem; 
font-size: 1rem; 
margin-left: 0.5rem; 
user-select: none; 
transition: 0.15s; 
} 
view#home #theme-selector { 
display: none; 
} 
view#home #theme-selector.show { 
display: flex; 
} 
view#home .theme-button { 
min-width: 3rem; 
min-height: 3rem; 
border-radius: 0.7rem; 
} 
view#home .theme { 
position: absolute; 
top: 20px; 
right: 20px; 
cursor: pointer; 
} 
view#home footer { 
position: absolute; 
bottom: 1.5rem; 
font-size: 1rem; 
} 
view#home.mobile footer { 
bottom: 4rem; 
font-size: 0.7rem; 
} 
view#home #calc-menu { 
border-radius: 1rem; 
height: 100%; 
width: 20rem; 
min-width: 13rem; 
overflow-y: auto; 
padding: 1rem; 
} 
view#home #calc-frame { 
width: 80%; 
padding: 1rem; 
height: 100%; 
} 
view#home #calc-menu .options-title:first-child { 
margin-top: 0.2rem; 
} 
view#home #calc-menu .options-title { 
font-size: 1.25rem; 
font-weight: bold; 
margin: 1rem 0.4rem; 
width: calc(100% - 2rem); 
} 
view#home.mobile #calc-menu .options-title { 
width: auto; 
} 
view#home:not(.mobile) #calc-menu .button-container { 
justify-content: left; 
flex-wrap: wrap; 
} 
view#home .menu-option { 
margin-bottom: 0.5rem; 
cursor: pointer; 
min-width: 6rem; 
width: calc(60% - 0.5rem); 
margin-left: 0.15%; 
box-shadow: none; 
font-size: 1rem; 
margin: 0.25rem; 
height: 3.5rem; 
border-radius: 5rem; 
padding: 0.5rem 2rem; 
} 
view#home .menu-option.selected { 
width: 97%; 
background: var(--primary-color); 
color: var(--on-primary-color); 
} 
/** 
MOBILE STYLES 
**/ 
view#home.mobile { 
padding: 0; 
} 
view#home:not(.mobile) .settings { 
display: none; 
} 
view#home .settings { 
position: absolute; 
top: 20px; 
left: 20px; 
cursor: pointer; 
} 
view#home.mobile #calc-frame { 
align-items: center; 
justify-content: flex-start; 
} 
view#home.mobile #calc-menu { 
position: fixed; 
border-radius: 2rem 2rem 0 0; 
padding: 3rem 1.5rem 0 1.5rem; 
z-index: 999; 
height: 87%; 
width: 100%; 
top: 95%; 
box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.1); 
transition: top 0.5s ease-out; 
} 
:root[data-theme="light"] view#home.mobile #calc-menu { 
background: var(--background); 
} 
 
view#home.mobile #calc-menu::after { 
content: ""; 
position: absolute; 
top: 1rem; 
left: 50%; 
transform: translateX(-50%); 
width: 4rem; 
height: 0.25rem; 
background: var(--surface-6); 
opacity: 0.2; 
border-radius: 1rem; 
cursor: pointer; 
transition: 0.5s; 
} 
view#home.mobile #calc-menu.show { 
top: 13%; 
} 
view#home.mobile #calc-menu .options-title { 
font-size: 1.15rem; 
} 
view#home.mobile #calc-menu .button-container { 
flex-wrap: wrap; 
} 
view#home.mobile #calc-menu .button-container .menu-option { 
font-size: 1rem; 
margin: 0.25rem; 
height: 3.5rem; 
border-radius: 5rem; 
padding: 0rem; 
} 
view#home.mobile #calc-menu .button-container .region-option { 
min-width: 5rem; 
max-width: 25rem; 
width: 100%; 
} 
view#home.mobile #calc-menu .button-container .year-option, 
view#home.mobile #calc-menu .button-container .lang-option { 
min-width: 5rem; 
max-width: 31%; 
} 
view#home.mobile #calc-frame { 
width: 100%; 
} 
view#error { 
padding: 2rem; 
width: 100%; 
height: 100vh; 
} 
view#error img#error-img { 
width: 20rem; 
margin: 0; 
height: auto; 
} 
view#error h1#error-title { 
margin: 1.5rem 0; 
} 
:root { 
--background-light: #e6e6e6; 
--background-dark: #1a1a1a; 
--background-light-you: #d2e4f9; 
--background-dark-you: #06182d; 
--primary-color : #4a5497 
} 
:root[data-grayscale="true"] body { 
filter: grayscale(1); 
} 
body, view { 
transition: .35s; 
background: var(--background); 
} 
input::-webkit-outer-spin-button, 
input::-webkit-inner-spin-button { 
-webkit-appearance: none; 
margin: 0; 
} 
input[type=number] { 
appearance: textfield; 
-moz-appearance: textfield; 
} 
.text-error { 
color: var(--error-color); 
}