@charset "UTF-8";

::-webkit-input-placeholder {
   /* Chrome/Opera/Safari */
   /* color: black; */
   opacity: 0.6;
}

::-moz-placeholder {
   /* Firefox 19+ */
   /* color: black; */
   opacity: 0.4;
}

:-ms-input-placeholder {
   /* IE 10+ */
   /* color: black; */
   opacity: 0.4;
}

:-moz-placeholder {
   /* Firefox 18- */
   /* color: black; */
   opacity: 0.4;
}

/* wrapper app styles */
#app {
   min-height: 100vh;
}

#app.loading {
   opacity: 0.3;
   pointer-events: none;
   transition: opacity 0.2s ease;
}

#app.loading::before {
   content: "Loading...";
   display: block;
   text-align: center;
   padding: 20px;
}
/* wrapper app styles end */

h4 {
   display: block;
   font-weight: bold;
   margin-top: 3px;
   margin-bottom: 3px;
   font-size: 13px;
}

ol {
   display: block;
   list-style-type: decimal;
   -webkit-margin-before: 1em;
   -webkit-margin-after: 1em;
   -webkit-margin-start: 0px;
   -webkit-margin-end: 0px;
   -webkit-padding-start: 16px;
}

.first_block {
   margin-right: 0px;
   margin-left: 0px;
}

.main_block {
   background-color: white;
   min-height: 100px;
   border: 0px solid #ffffff;
   margin: 0px;
   padding: 0px;
}

.possible_line {
   margin-top: 0px;
}

.logo {
   display: block;
   margin-left: 8px;
   margin-right: auto;
}

body {
   background-color: #FFCC00;
   font-family: Helvetica, Arial, Verdana, Georgia;
   font: normal 13px;
   color: #6f6f6f;
}

.content {
   white-space: pre-wrap;
   /* css-3 */
   white-space: -moz-pre-wrap;
   /* Mozilla, since 1999 */
   white-space: -pre-wrap;
   /* Opera 4-6 */
   white-space: -o-pre-wrap;
   /* Opera 7 */
   word-wrap: break-word;
   /* Internet Explorer 5.5+ */
   word-break: normal;
   display: block;
   margin: 0 0 10px;
   /* font-size:13px; */
   padding-left: 9px;
   padding-right: 9px;
   border-top: 1px solid #d7d7d7;
   border-bottom: 1px solid #f1f1f1;
   border-left: 0px solid;
   border-right: 0px solid;
   border-radius: 0px;
   line-height: 1.42857143;
   font-family: Helvetica, Arial, Verdana, Georgia;
   color: #6f6f6f;
   background-color: #ffffff;
   font-size: 14px;
}

.content_form {
   white-space: normal;
   /* css-3 */
   white-space: -moz-pre-wrap;
   /* Mozilla, since 1999 */
   white-space: -pre-wrap;
   /* Opera 4-6 */
   white-space: -o-pre-wrap;
   /* Opera 7 */
   word-wrap: break-word;
   /* Internet Explorer 5.5+ */
   word-break: normal;
   display: block;
   margin: 0 0 10px;
   /* font-size:13px; */
   padding-left: 9px;
   padding-right: 9px;
   border-top: 0px solid #d7d7d7;
   border-bottom: 0px solid #f1f1f1;
   border-left: 0px solid;
   border-right: 0px solid;
   border-radius: 0px;
   line-height: 1.42857143;
   font-family: Helvetica, Arial, Verdana, Georgia;
   color: #6f6f6f;
   background-color: #ffffff;
   font-size: 14px;
}

.freetext {
   margin: 5px 5px;
}

input[type="radio"] {
   margin-left: 5px;
}

input[type="checkbox"] {
   margin-left: 5px;
}

label {
   margin-bottom: 3px;
}

.dropzone {
   background: rgb(245, 245, 245);
   border-radius: 10px;
   border: 2px dashed rgb(0, 135, 247);
   border-image: none;
   max-width: 500px;
   margin-left: auto;
   margin-right: auto;
}

/* Change dropzone error mark color red. Can see better.. */
.dz-error-mark svg g g {
   fill: #c00;
}

/* move error buble a bit lower and left, so remove link can see better. */
.dropzone .dz-preview .dz-image img {
   margin: auto;
}

.dropzone .dz-preview .dz-error-message {
   top: 140px;
}

.dropzone .dz-preview .dz-error-message:after {
   left: 30px;
   top: -18px;
   border-bottom-width: 18px;
}

.dropzone .dz-preview .dz-remove {
   margin-top: 4px;
   font-size: 11px;
}

/* end - move buble. */

.body-nest {
   float: left;
}

.option_button_group {
   width: 100%;
   margin-left: 15px;
   margin-right: 15px;
   position: relative;
   display: inline-block;
   vertical-align: middle;
   margin-bottom: 20px;
}

/*
 *  strong blue: rgb(0,163,218)
 *   rgb(0,176,222)
 *    rgb(77,192,227)
 *     rgb(143,210,233)
 *      */
.option_button {
   font: normal 13px;
   font-family: Helvetica, Arial, Verdana, Georgia;
   border-color: #ffffff;
   border: 0px solid #ffffff;
   border-radius: 4px;
   color: #ffffff;
   background: #0d1973;
   background-image: none;
   text-shadow: 0px 0px 0px #e0e0e0;
   padding: 6px 8px;
   margin-right: 13px;
   margin-bottom: 13px;
   outline: -webkit-focus-ring-color auto 0px;
}

.option_button:hover {
   font: normal 13px;
   font-family: Helvetica, Arial, Verdana, Georgia;
   border-color: #ffffff;
   border: 0px solid #ffffff;
   border-radius: 4px;
   color: #ffffff;
   background: #747474;
   background-image: none;
   text-shadow: 0px 0px 0px #e0e0e0;
   padding: 6px 8px;
   margin-right: 13px;
   margin-bottom: 13px;
}

.option_button_focus {
   font: normal 13px;
   font-family: Helvetica, Arial, Verdana, Georgia;
   border-color: #ffffff;
   border: 0px solid #ffffff;
   border-radius: 4px;
   color: #ffffff;
   background: #747474;
   background-image: none;
   text-shadow: 0px 0px 0px #e0e0e0;
   padding: 6px 8px;
   margin-right: 13px;
   margin-bottom: 13px;
   outline: -webkit-focus-ring-color auto 0px;
}

.option_button_focus:focus {
   font: normal 13px;
   font-family: Helvetica, Arial, Verdana, Georgia;
   border-color: #ffffff;
   border: 0px solid #ffffff;
   border-radius: 4px;
   color: #ffffff;
   background: #747474;
   background-image: none;
   text-shadow: 0px 0px 0px #e0e0e0;
   padding: 6px 8px;
   margin-right: 13px;
   margin-bottom: 13px;
   outline: -webkit-focus-ring-color auto 0px;
}

.options {
   font: normal 12px;
   font-family: Helvetica, Arial, Verdana, Georgia;
   margin: 5px 5px;
}

.float_right {
   margin: 5px 15px;
   float: right;
   clear: both;
}

.float_left {
   margin: 5px 15px;
   float: left;
   clear: both;
}

.link_disabled {
   cursor: default;
   pointer-events: none;
   opacity: 0.6;
   text-decoration: none;
   font-weight: 700;
   color: #000000;
}

.link_enabled {
   cursor: pointer;
   font-weight: 400;
   opacity: 1.0;
   text-decoration: none;
   color: #1b88e0;
}

.explanation {
   float: right;
   clear: both;
   margin: 5px 15px;
   font-size: 11px;
}

.afterexplanation {
   clear: both;
   display: block;
}

.option_input[type=radio] {
   font: normal 13px;
   font-family: Helvetica, Arial, Verdana, Georgia;
   margin-top: 4px;
   margin-bottom: 4px;
   margin-left: 10px;
   margin-right: 0px;
}

.option {
   font: normal 13px;
   font-family: Helvetica, Arial, Verdana, Georgia;
}

.modal {
   display: block;
   position: fixed;
   z-index: 1000;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   background: rgba(255, 255, 255, .7) url('../img/circle.gif') 50% 50% no-repeat;
}

.dropzonerequired {
   display: none;
   margin-left: 20px;
   font-size: 15px;
   color: red;
}


/* (Valinnainen) Aseta keltaisen footer-kaistan kääre ankkuriksi, 
   jotta absoluuttinen sijoittelu kiinnittyy siihen eikä koko näkymään. */
.footer-band {
   position: relative;
   white-space: normal;
}

/* Vastaa: style="position:absolute; right:10px; white-space:nowrap; padding-left:10px;" */
.footer-copy {
   position: absolute;
   right: 10px;
   padding-left: 10px;
   white-space: normal;
   /* mahdollistaa rivin katkaisun palikoiden välistä */
   text-align: right;
   /* pitää tekstin oikeassa reunassa myös rivityksessä */
}

/* Vastaa: style="position:absolute; right:4px; white-space:nowrap;" */
.footer-powered {
   position: absolute;
   right: 4px;
   white-space: nowrap;
}

/* vahva kontrasti keltaisella taustalla: */
.footer-band,
.footer-band * {
   color: #000 !important;
}

.footer-band .footer-copy,
.footer-band .footer-powered {
   font-size: 14px !important;
   line-height: 1.35 !important;
}


@media (max-width: 380px) {
   /* koettaa välttää copyright rivittymistä */

   .footer-band .footer-copy,
   .footer-band .footer-powered {
      font-size: 12px !important;
      line-height: 1.30 !important;
   }
}


.nowrap-block {
   display: inline-block;
   white-space: nowrap;
}