/* roboto-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/roboto-v30-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-100italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100;
  src: url('../fonts/roboto-v30-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v30-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/roboto-v30-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/roboto-v30-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/roboto-v30-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/roboto-v30-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v30-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/roboto-v30-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/roboto-v30-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-900italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/roboto-v30-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.clear {
  clear: both;
  height:0px;
  font-size:0px;
  line-height:0px;
  margin:0px;
  padding:0px;
}

body {
	font-family:roboto;
	font-size:16px;
	line-height: 1.20em;
}

.container {
	width:100%;
	max-width:800px;
	margin:0 auto;
	padding:1.0em;
}

.header {
	text-align:left;
	margin:0.5em 0 2.5em;
	display:flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
}
.header img#img-outokumpu {
	width:200px;
	max-width:40%;
	/*float:left;*/
	margin-top:0.7em;
}
.header img#img-bjoe {
	max-width:25%;
	/*float:right;*/
}

.footer {
	text-align:center;
	margin:2.5em 0 2.5em;
}
.footer img {
	max-width:100%;
}

.form-field .formType-wrapper {
	background-color:#009FE3;
	color:#fff;
	font-weight:700;
	padding:1.0em;
	margin: 0.5em 0;
}	

.form-field .formType-wrapper select {
	background-color:#fff;
	padding:0.5em;
}

#form-wrapper {
	display:block;
	margin-top:3.0em;
}

h1#header-formType-1, h1#header-formType-2, div#palkkio_maksu_formType-1, div#palkkio_maksu_formType-2, span#tyosuhteen_kesto_formtype_1, span#tyosuhteen_kesto_formtype_2, #suostumus_1, #suostumus_2, #palkkatukipaatos-text-1 {
	display:block;
}

#suostumus_1, #suostumus_2 {
	margin:3px 0;
}

#formName h2 {
	margin-top:2.5em;
	margin-bottom:1.5em;
	font-size:1.3em;
	line-height:1.4em;
}

a.info {
	display:inline-block;
	font-weight:500;
	border:1px solid rgba(0,0,0,0.5);
	padding:0.5em 1.0em;
	margin-right:1.0em;
	margin-bottom:1.5em;
}

.form-field {
	position:relative;
	margin:1.0em 0 1.2em;
	line-height:1.3em;
}	

.form-field p {
	margin-top:1px;
	margin-bottom:2px;
}

.form-field .error {
	/*display:block;*/
	color:#cc0000;
	/*margin:0.6em 0em;*/
}
.form-field label.error {
	display:none;
	margin-top:0.6em;
}

input:focus, textarea:focus, select:focus {
    background-color: rgba(0,159,227,0.15);
    border-bottom: 2px solid #009FE3;
}

input, textarea, select {
    width: 100%;
    padding: 0.5em;
    background-color: rgba(0,0,0,0.1);
    color: rgba(0,0,0,0.8);
    font-family: Roboto;
    font-size: 1.1em;
    font-weight: bold;
    line-height: 21px;
    border: none;
    border-bottom: 2px solid rgba(0,0,0,0.5);
    margin-top: 0.4em;
    outline: none;
					   
}
 
textarea {
	height:100px;
}	
 
input[type='checkbox'], input[type='radio'] {
	width:auto;
	margin-right:1.0em;
}

input[type='checkbox'] {
	float:left;
	width:5%;
}

.form-field input[type='file'].error {
	color:#000 !important;
}

input[type='file'] {
	/*float:left;*/
	width:92%;
	margin-right:5%;
}
.field-wrapper {
	position:relative;
}

a.file-reset {
	position:absolute;
	display:inline-block;
	width:8%;
	top:0;
	right:0;
	background-color:#ccc;
	color:#000;
	font-size:18px;
	font-weight:700;
	text-align:center;
	padding:0.68em 0;
	margin-top: 0.4em;
	text-decoration:none;
	border-bottom: 2px solid rgba(0,0,0,0.5);
}

div.float-text {
	float:left;
	width:90%;
}

input.submit {
    display: inline-block;
    padding: 0.7em 2.6em 0.5em;
    margin-bottom: 1.8em;
    background-color: #009FE3;
    box-shadow: 0 2px #000000;
    color: #FFFFFF;
    font-family: Roboto;
    font-size: 0.9em;
    text-transform: uppercase;
    font-weight: 900;
    line-height: 1.4em;
    text-align: center;
    text-decoration: none;
	text-shadow: 1px 1px 2px #000;
	/*text-shadow: 1px 1px 2px #006FA3;*/
}
#btn-sendForm {
	cursor: pointer;
}

.question_limit {
	text-align:right;
}
span.queryInfo {
    position: absolute;
	top:0em;
	right:0.2em;
    padding: 0.15em 0.6em;
    font-size: 14px;
    line-height: 16px;
    font-weight: 900;
    color: #fff;
    background: #ea0575;
    border-radius: 1.0em;
    margin: 0em 0.5em 0.3em;
    /*float: right;*/
}

.qtip .qtip-content {
	font-size:14px;
	font-family: Roboto;
	line-height:17px;
}
ul li{
	margin:0.5em 0;
}

#verovelka-maksusuunnitelma-wrap, #tyonantaja_yritys, #tyonantaja_henkilo, #kotitalousvahennys_wrap, #verovelka-wrap, #verovelkatodistus-wrap, #tyosuhde-maaraaikainen-wrap, #tyosuhde-toistaiseksi-wrap, #tyollisyyspalvelut_esittelija, #kuntalisapalkkion_kayttotarkoitus_muu_area {
	display:none;
}
.show {
	display:block !important;
}

.hide {
	display:none !important;
}

.form-field-wrap {
    position: relative;
    padding-bottom: 3.0em;
}

.form-field-group {
    margin-bottom: 2.5em;
    border: 1px solid #eee;
    padding: 0.5em 1.5em 1.0em 1.5em;
    margin-left: -1.5em;
    margin-right: -1.5em;
}

.form-field-group .form-field-short {
    width: 49%;
    float: left;
    margin-right: 1%;
}

.form-field-group .form-field-short input {
    height: 40px;
}

.form-field-wrap #tukiAdd {
    position: absolute;
    bottom: 1.0em;
    left: 0em;
}

a.btn-action {
    position: relative;
    padding: 0.5em 0 0.5em 2.0em;
    display: inline-block;
    color: #009FE3;
    font-weight: 700;
    font-size: 1.0em;
    text-decoration: none;
}

#container-deminimis, #group2, #group3, #group4, #group5, #group6, #group7, #group8, #group9, #group10, #group11, #group12, #group13, #group14, #group15, #group16, #group17, #group18, #group19, #group20, #group21, #group22, #group23, #group24, #group25, #group26, #group27, #group28, #group29, #group30 {
	display:none;
}

#container-deminimis.show, #group2.show, #group3.show, #group4.show, #group5.show, #group6.show, #group7.show, #group8.show, #group9.show, #group10.show, #group11.show, #group12.show, #group13.show, #group14.show, #group15.show, #group16.show, #group17.show, #group18.show, #group19.show, #group20.show, #group21.show, #group22.show, #group23.show, #group24.show, #group25.show, #group26.show, #group27.show, #group28.show, #group29.show, #group30.show {
	display:block;
}

/* dosign overlay */

#container-main {
	position:relative;
}

#loading-overlay {
	position:absolute;
	z-index:9999;
	display:none;
	width:100%;
	height:100%;
	background-color:#fff;
	opacity:0.8;
	margin:auto;
	top:0;
	left:0;
/*
	margin:-2em -4em -4em;
	padding-left:25%;
	padding-right:25%;
	padding-top:25%;
*/
}
.loading #loading-overlay {
	display:block;
}
#loading-overlay .lds-ring {
  display: block;
  position: relative;
  width: 250px;
  height: 250px;
  margin-left:auto;
  margin-right:auto;
  bottom:-25%;
}
#loading-overlay .lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 250px;
  height: 250px;
  margin: 8px;
  border: 18px solid #666;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #666 transparent transparent transparent;
  margin-left:auto;
  margin-right:auto;
}
#loading-overlay .lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
#loading-overlay .lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
#loading-overlay .lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
	transform: rotate(0deg);
  }
  100% {
	transform: rotate(360deg);
  }
}

/* dosign overlay */
/* salassapitosopimus autentikointitavan valinta */
#auth_method_container {
	text-align:center;
}	
#auth_method_container p {
	text-align:center;
}	
form#auth_method {
	
}
form#auth_method button {
	margin: 15px;
    vertical-align: middle;
    border: 0;
    background: transparent;
    cursor: pointer;
}

form#auth_method button:active { 
    border:3px solid red; 
}

form#auth_method img {
	object-fit: cover;
	overflow-clip-margin: content-box;
    overflow: clip;
}
form#auth_method img:hover {
	opacity:0.6;
}
/* salassapitosopimus autentikointitavan valinta */



/* Päivämääräkentät: näkyvä arvo pp.kk.vvvv + selaimen natiivi kalenterivalinta. */
.date-fi-picker {
	display: inline-block;
	position: relative;
	width: 2.25rem;
	height: 2.25rem;
	margin-left: 0.35rem;
	vertical-align: middle;
	border: 1px solid #777;
	border-radius: 3px;
	background: #fff;
	box-sizing: border-box;
}

.date-fi-picker-icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.05rem;
	line-height: 1;
	pointer-events: none;
}

.date-fi-native {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
}

.date-fi-picker:focus-within {
	outline: 2px solid #1b5e8a;
	outline-offset: 2px;
}

/* Yksityisessä tallennuksessa olevan hakemus-PDF:n avaava POST-painike linkin näköisenä. */
.link-button {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}