* { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } html, body { height: 100%; margin: 0; padding: 0; } body { background-color: #cccccc; } button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0; } /* to be compatible with browsers that don't know
*/ main { display: block; } ::selection { background-color: #28a745; color: #ffffff; } p, h1, h2, input, textarea, select, button, a { font-family: 'Roboto', sans-serif; } h1, h2 { font-weight: 500; } h1 { font-size: 32px; } h1>a:link, h1>a:visited { color: inherit; } h1>a:hover, h1>a:focus { text-decoration: none; } h2, header.small h1 { font-size: 24px; } p, h2 { line-height: 150%; } p { font-weight: 300; font-size: 16px; } img { display: block; } sup, sub { position: relative; font-size: smaller; } sup { vertical-align: top; top: -0.4em; } sub { vertical-align: bottom; bottom: -0.4em; } hr { border: solid #bbbbbb 1px; margin: 10px 0; } .bold { font-weight: 500; } p.small, span.small { font-size: 14px; } .justify { text-align: justify; } .marginTop { margin-top: 10px; } .marginLeft { margin-left: 10px; } .marginBottom { margin-bottom: 10px; } .marginRight { margin-right: 10px; } .center { text-align: center; } .right { text-align: right; } svg.inline, img.inline { display: inline; width: 1em; height: 1em; margin-right: 0.3em; vertical-align: -0.15em; } a:link, a:visited { color: #3b5998; font-weight: 500; text-decoration: none; } a:hover, a:focus { text-decoration: underline; } button, a.button { cursor: pointer; font-size: 16px; font-weight: 500; color: #ffffff; background-color: #5e77aa; padding: 0 15px; height: 35px; border: none; border-radius: 3px; display: inline-block; text-align: center; line-height: 35px; } button.small, div.inputWithButton>button { font-size: 14px; padding: 0 12px; height: 32px; line-height: 32px; } button.small { height: 32px; line-height: 32px; } div.inputWithButton>button { border-radius: 2px; height: 27px; line-height: 27px; width: 75px; margin-left: -79px; vertical-align: 2px; } button:enabled:hover, button:enabled:focus, a.button:hover, a.button:focus { background-color: #29457f; outline: none; text-decoration: none; } button:disabled { cursor: not-allowed; color: #dddddd; opacity: 0.7; } button.fullWidth, a.button.fullWidth { padding: 0; width: 100%; } button.noLeftRadius, a.button.noLeftRadius { border-top-left-radius: 0; border-bottom-left-radius: 0; } button.noRightRadius, a.button.noRightRadius { border-top-right-radius: 0; border-bottom-right-radius: 0; } button.gray, a.button.gray { background-color: #808080; } button.gray:enabled:hover, button.gray:enabled:focus, a.button.gray:hover, a.button.gray:focus { background-color: #555555; } button.red, a.button.red { background-color: #aa5e5e; } button.red:enabled:hover, button.red:enabled:focus, a.button.red:hover, a.button.red:focus { background-color: #7f2929; } button.yellow, a.button.yellow { background-color: #e8a349; } button.yellow:enabled:hover, button.yellow:enabled:focus, a.button.yellow:hover, a.button.yellow:focus { background-color: #c37713; } button.green, a.button.green { background-color: #28a745; } button.green:enabled:hover, button.green:enabled:focus, a.button.green:hover, a.button.green:focus { background-color: #1b7d31; } input, select, textarea { background-color: #f9fafb; border: solid #c8d2e1 1px; border-radius: 2px; box-sizing: border-box; font-size: 15px; font-weight: 300; } input, select { height: 30px; line-height: 30px; padding: 0 5px; } textarea { padding: 5px; resize: none; } input.big, select.big, textarea.big, div.inputWithButton>input { font-size: 18px; } input.big, select.big, div.inputWithButton>input { height: 35px; line-height: 35px; padding: 0 6px; } textarea.big { padding: 6px; } input.fullWidth, select.fullWidth, textarea.fullWidth { display: block; width: 100%; } input:disabled, select:disabled, textarea:disabled { background-color: #dfdfdf; border: solid #dfdfdf 1px; color: #000000; } input:focus, select:focus, textarea:focus { background-color: #ffffff; border: solid #29457f 2px; outline: none; } input:focus, select:focus { padding: 0 4px; } textarea:focus { padding: 4px; } input.big:focus, select.big:focus { padding: 0 5px; } div.inputWithButton>input { width: 100%; padding: 0 83px 0 6px; } div.inputWithButton>input:focus { padding: 0 82px 0 5px; } textarea.big:focus { padding: 5px; } div.modal { position: fixed; background-color: #ffffff; border-radius: 3px; box-sizing: border-box; overflow-y: auto; z-index: 6; visibility: hidden; } #cover { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: #000000; opacity: 0.5; z-index: 5; visibility: hidden; } p.error, p.formError { color: #7f2929; font-weight: 500; } p.formError { display: none; } header { display: grid; grid-template-columns: auto auto; background-color: #333333; height: 50px; line-height: 50px; padding: 0 12px; color: white; } header.small { height: 40px; line-height: 40px; } header>p { line-height: inherit; text-align: right; } header>p>span { padding-left: 6px; } header>p>span>a:link, header>p>span>a:visited { color: inherit; } header>p>span:not(:last-child) { border-right: solid white 1px; padding-right: 6px; } main { background-color: #ffffff; padding: 6px 12px; } main.full { position: relative; width: 100%; height: calc(100% - 40px); padding: 0; } footer { background-color: #444444; padding: 6px 12px; color: white; text-align: center; } footer>p { font-size: 13px; } div.buttonContainer { height: 35px; } div.buttonContainer>button { margin: 0 auto; } #cookiesNotice { position: fixed; left: 0; bottom: 0; right: 0; margin: 20px; background-color: #eeeeee; border: solid #888888 1px; border-radius: 3px; padding: 10px; text-align: center; z-index: 10; } #loading { position: fixed; width: 64px; height: 64px; top: 50%; left: 50%; margin-top: -32px; margin-left: -32px; z-index: 7; visibility: hidden; } div.box { width: 576px; background-color: #eeeeee; border-radius: 3px; margin: 10px auto; padding: 10px; box-sizing: border-box; } .circleControl { position: absolute; bottom: 20px; right: 10px; } .circleControl .controlItem { margin-top: 10px; opacity: 70%; cursor: pointer; } .circleControl .controlItem:hover { opacity: 100%; } .circleControl .controlItem div { position: absolute; } .circleControl .controlBackground { width: 100%; height: 100%; opacity: 50%; } .circleControl .controlIcon { width: 75%; height: 75%; margin: auto; margin-top: 50%; transform: translateY(-50%); -ms-transform: translateY(-50%); } @media screen and (max-width: 599px) { header h1 span { display: none; } footer>p:not(:first-child) { margin-top: 4px; } button, a.button { padding: 0; width: 100%; } button.marginLeft, a.button.marginLeft { margin-left: 0; } button.marginRight, a.button.marginRight { margin-right: 0; } div.modal { left: 20px; right: 20px; padding-left: 15px; padding-right: 15px; } div.box { width: initial; } .circleControl { width: 45px; } .circleControl .controlItem { height: 45px; } } @media screen and (min-width: 600px) { footer>p { display: inline; } footer>p:not(:first-child) { padding-left: 6px; } footer>p:not(:last-child) { border-right: solid white 1px; padding-right: 6px; } div.modal { width: 540px; left: 50%; margin-left: -270px; padding-left: 20px; padding-right: 20px; } .circleControl { width: 60px; } .circleControl .controlItem { height: 60px; } } @media screen and (max-height: 399px) { div.modal { top: 20px; max-height: calc(100% - 40px); padding-top: 10px; padding-bottom: 10px; } } @media screen and (min-height: 400px) and (max-height: 499px) { div.modal { top: 50px; max-height: calc(100% - 100px); padding-top: 15px; padding-bottom: 15px; } } @media screen and (min-height: 500px) { div.modal { top: 75px; max-height: calc(100% - 150px); padding-top: 15px; padding-bottom: 15px; } }