* {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0;} h1 {font-family: Gilroy; font-size: 48px; font-weight: 700; line-height: 64px; letter-spacing: 0em; text-align: left;} h2 {font-family: Gilroy; font-size: 32px; font-weight: 700; line-height: 40px; letter-spacing: 0em; text-align: left;} h3 {font-family: Gilroy; font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: 0em; text-align: left;} html, body {height: 100%; min-height: 100%;} body {position: relative; background-color: #ECF7F9;} body,input,select,textarea,button {font-family: Roboto; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0em; text-align: left;} li {list-style: disc; margin: 0 0 0 0.2em;} span.nowrap {white-space: nowrap;} span.nowrap label {white-space: normal; margin: 0 0 0 1.2em;} input.error,select.error,textarea.error {border: 2px solid #DE4953} span.error {color: #DE4953; font-size: 14px; padding: 0 0 0.5em 0; display: table-row;} .top-bar {background-color: #008EAA; height: 4em;} .bar-content {padding: 0 1em 0 1em;} .sisalto {position: absolute; top: 4em; bottom: 0; left: 0; right: 0;} .main-content, .notification {max-width: 80em;} .centered-container {text-align: center; position: absolute; left: 50%; transform: translate(-50%, -50%);} .hero-image {background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://www.asiakastieto.fi/media/brandikuvat/cache/avaimet-nappaimiston-paalla-1000x1000.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; height: 40%; margin: 0 0 1.5em 0;} @media only screen and (max-width: 1920px) {div.hero-image {height: 60%;}} @media only screen and (min-width: 1920px) {.main-content {margin: 0 25em 0 25em !important;} div.notification {margin: 1em 25em 1em 25em !important;}} @media only screen and (max-width: 980px) {div.hero-image {height: 70%;}} .hero-text {text-align: center; position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%);} .hero-text-container {background-color: white; opacity: 70%; padding: 1em 1em 1em 1em;} .hero-text p {text-align: left; padding: 0.5em 1em 0.5em 1em;} .hero-text h1 {font-weight: bold; color: white; font-size: 3em;} .font-style-italic {font-style: italic;} a {color: #01a4bc; text-decoration: none;} .float-left {float: left;} .hidden {display: none !important;} .logo-asiakastieto {margin-top: 12px; background: url('https://www.asiakastieto.fi/media/asiakastieto_100_white.png') no-repeat; background-size: auto 38px; width: 340px; height: 45px;} .logo-kiinteistotieto {margin-top: 22px; margin-bottom: 3px; background: url('../../img/kayttoluvat/ktp-logo.png') no-repeat; background-size: 340px; width: 340px; height: 35px; text-indent: -999em;} h1 {font-size: 2em; margin: 0.3em 0 0.3em 0;} h2 {font-weight: bold; color: #333; font-size: 1.5em;} h3 {font-weight: bold; color: #333; font-size: 1em; margin: 0 0 1em 0;} .main-content {margin: 0 15em 0 15em; padding: 1em 5em 1em 5em; background-color: white;} div.notification {box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 6px 10px rgba(0, 0, 0, 0.07), 0px 1px 18px rgba(0, 0, 0, 0.06), 0px 3px 5px rgba(0, 0, 0, 0.1); border-radius: 4px; margin: 1em 15em 1em 15em; padding: 1em;} div.notification p {margin: 1em 0 0 0;} div.error {color: #DE4953; background-color: #FBDADD; border-color: #DE4953;} div.fielderror {color: #DE4953; margin: 0.5em 0 0 0;} div.success {color: #333; background-color: #D9F1E4; border-color: #00A04B;} div.info {margin: 1em 0 1em 0;} div.info p {margin: 0.5em 0 0.5em 0;} label {margin: 0 1em 0 0;} label.textinput {font-size: 0.9em; font-weight: bold;} .margin-bottom-1 {margin: 0 0 1em 0;} .margin-right-1 {margin: 0 1em 0 0;} .margin-left-1 {margin: 0 0 0 1em;} textarea,input,select {border-radius: 0.3em;} input,textarea,checkbox,radio {float: left; margin: 0 1em 0 0; border: 1px solid #C0C0C0;} input:focus,textarea:focus,select:focus,input:checked,textarea:checked,select:checked {border: 2px solid #008EAA; outline: none;} select {height: 2em; width: 20em;} textarea {max-width: 30em;} input {margin: 0.3em 0 0.3em 0;} .width-5 {width: 5em;} .width-20 {width: 20em;} input.short {width: 10em;} button {cursor: pointer;} button.primary {width: 10em; height: 3em; border-radius: 0.3em; border: 0px; align-items: center; text-align: center; font-weight: bold; color: white; background-color: #008eaa;} button.secondary {width: 8.5em; height: 2.5em; border-radius: 0.3em; align-items: center; text-align: center; font-weight: bold; color: #333333; background-color: white;} button.poista-kayttaja {margin: 1em 0 0 0;} div.grid-3 {display: grid; align-content: center; justify-content: center; align-items: stretch; grid-template-columns: 1fr 1fr; gap: 3em;} @media only screen and (max-width: 1200px) {div.grid-3 {grid-template-columns: 1fr;}} div.grid-3 h3 {min-height: 3em; margin: 0;} div.card {margin: 2em 0 2em 0; padding: 1em 1em 1em 1em; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.07), 0px 2px 1px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.1); border-radius: 4px; background-color: #FAF7F3; margin: 1em 0 2em 0; max-width: 35em;} div.white-background {background-color: white; box-shadow: none; padding: 0em;} div.chosen {background-color: #F5EBE6;} div.card div, p, h3, input, select, label {display: table; table-layout: fixed;} div.inline-block {display: inline-block !important;} div.inline-block div {display: block;} @keyframes loaderer {0% {transform: rotate(0deg)} 50% {transform: rotate(180deg)} 100% {transform: rotate(360deg)}} div.loaderer div {position: absolute; animation: loaderer 1s linear infinite; width: 1em; height: 1em; top: 0.5em; left: 0.5em; border-radius: 50%; box-shadow: 0 0.1em 0 0 #008eaa; margin: 0;} div.loader {width: 2em; height: 2em; overflow: hidden; background: none; margin: 0;} div.loaderer {width: 100%; height: 100%; position: relative; transform: translateZ(0) scale(1); backface-visibility: hidden; transform-origin: 0 0; margin: 0;} div.loaderer div {box-sizing: content-box; margin: 0;} div.card p {margin: 0.5em 0 0 0;} div.kayttaja {background-color: #F5EBE6;} div.kayttotarkoitus div {margin: 1em 0 0 0;} .cursor-not-allowed, .cursor-not-allowed * {cursor: not-allowed;} .width-100 {width: 100%;}