/* @charset "utf-8"; */
@font-face {
    font-family: IBM Plex Sans;
    src: url('../fonts/ibmplexsanslight.ttf');
}

html {
    min-width: 800px;
    min-height: 800px;
    font-size: 15px;
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
    overflow: hidden;
}

body {
    min-width: 800px;
    min-height: 800px;
    font-family: 'Figtree',Helvetica,Arial,Lucida,sans-serif;
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: .02em;
    color: #555555;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: .02em;
}

select, textarea, input[type=text] {
    min-width: 110px; 
    border: 1px solid #9B9B9B;
    color: #000000;
    background-color: #FFF;
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 18px;
}

.hidden {
    visibility: hidden;
}

a {
    color: #000000;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: #000000;
}

.alert .alert-link, .btn, .btn-link, blockquote {
    font-weight: 400;
}

.h1 .small, .h1 small, .h2 .small, .h2 small, .h3 .small, .h3 small, .h4 .small, .h4 small, .h5 .small, .h5 small, .h6 .small, .h6 small, h1 .small, h1 small, h2 .small, h2 small, h3 .small, h3 small, h4 .small, h4 small, h5 .small, h5 small, h6 .small, h6 small {
    line-height: 1;
    color: #000000;
}

.h1, .h2, .h3, h1, h2, h3 {
    margin-top: 20px;
    margin-bottom: 12px;
}

.h1 .small, .h1 small, .h2 .small, .h2 small, .h3 .small, .h3 small, h1 .small, h1 small, h2 .small, h2 small, h3 .small, h3 small {
    font-size: 65%
}

.h4, .h5, .h6, h4, h5, h6 {
    margin-top: 11px;
    margin-bottom: 15px;
}

.h4 .small, .h4 small, .h5 .small, .h5 small, .h6 .small, .h6 small, h4 .small, h4 small, h5 .small, h5 small, h6 .small, h6 small {
    font-size: 75%
}

.h1, h1 {
  font-size: 35px;
}

.h2, h2 {   
    font-size: 31px;
}

.h3, h3 {
    font-size: 27px;
}

.h4, h4 {
    font-size: 23px;
}

.h5, h5 {
    font-size: 19px;
}

.h6, h6 {
    font-size: 15px;
}

p {
    margin: 0 0 20px;
}

.container, .container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left: 8px;
    padding-right: 8px;
}

#configurator_container {
  height: 100vh; 
  display: inline-block; 
  width: calc(100% - 418px);
}

#material_container {
  height: 100vh; 
  display: inline-block; 
  width: 418px; 
  overflow: scroll; 
  padding: 11px; 
  background-color: #F7F8FB;
}

#material {
  width: 100%; 
  min-height: 100%;
  padding-bottom: 40px;
}

@media (min-width: 0px) {
    #material_container {
        height: 50vh;
        width: 100%;
        border-top: 1px solid #E8E8E8;
    }
    #configurator_container {
        height: 50vh;
        width: 100%;
    }
}
@media (min-width: 900px) {
    #material_container {
        height: 100vh;
        width: 420px; 
    }
    #configurator_container {
        height: 100vh;
        width: calc(100% - 420px);
    }
}

.btn {
    display: inline-block;
    margin-bottom: 0;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border-color:transparent;
    white-space: nowrap;
    padding: 8px 22px;
    border-radius: 0;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 16px;
}
.btn:active {
    outline: 0;
    box-shadow: 0;
}
.btn-default:hover {
   color: #FFF;
}
.btn-default {
    color: #fff;
    background-color: #00B2E3;
}
.btn-default:active, .btn-default:focus, .btn-default:hover {
    background-color: #265a88;
    border: 1px solid transparent;
}
.btn-primary {
    color: #fff;
    background-color: #000000;
    border-color: #000000;
}
.btn-primary:active, .btn-primary:focus, .btn-primary:hover {
    /*color: #000000;
    background-color: transparent;*/
}
.btn-accent {
    color: #fff;
    background-color: #22e3e5;
    border-color: #22e3e5;
}
.btn-white {
    color: #555555;
    background-color: #fff;
    border-color: #fff;
}
.btn-white:active, .btn-white:focus, .btn-white:hover {
    color: #fff;
    background-color: transparent;
}
.btn-alt, .btn-alt:focus, .btn-alt:hover {
    background-color: transparent;
}
.btn-default.btn-alt {
    color: #555555;
}
.btn-primary.btn-alt {
    color: #000000;
}
.btn-default:active,
.btn-default.active {
    color: #FFF;
    background-color: #265a88;
    border: 1px solid transparent;
}
.btn-default:active:hover,
.btn-default.active:hover,
.btn-default:active:focus,
.btn-default.active:focus,
.btn-default:active.focus,
.btn-default.active.focus {
    color: #DDD;
    background-color: #265a88;
    border: 1px solid transparent;
}
.btn-accent.btn-alt {
    color: #22e3e5;
}
.btn-white.btn-alt {
    color: #fff;
}
.btn-default.btn-alt:focus, .btn-default.btn-alt:hover {
    background-color: #555555;
    color: #fff;
}
.btn-primary.btn-alt:focus, .btn-primary.btn-alt:hover {
    background-color: #000000;
    color: #fff;
}
.btn-accent.btn-alt:focus, .btn-accent.btn-alt:hover {
    background-color: #22e3e5;
    color: #fff;
}
.btn-white.btn-alt:focus, .btn-white.btn-alt:hover {
    background-color: #fff;
    color: #555555;
}
.btn-link {
    color: #000000;
    border-bottom: 1px solid; 
    border-color: transparent;
}
.btn-link:active, .btn-link:focus, .btn-link:hover {
    border-color: #000000;
    padding-bottom: 7px;
}
.btn, .btn:active {
    background-image: none;
}
.btn:active, .btn:focus, a:focus, a:hover {
    outline: 0;
}
.btn-link, a, a:focus, a:hover {
    text-decoration: none;
}
.btn-lg {
    padding: 14px 36px;
    font-size: 17px;
    border-radius: 0;
}
.btn-sm, .btn-xs {
    border-radius: 0;
}
.btn-sm, .btn-xs, .progress-bar {
    font-size: 14px;
}
.btn-sm {
    padding: 8px 24px;
}
.btn-xs {
    padding: 4px 14px;
    font-size: 13px;
}
.btn-block {
    display: block;
}
.btn-block, input[type=submit].btn-block, input[type=reset].btn-block, input[type=button].btn-block {
    width: 100%
}
.btn-block+.btn-block {
    margin-top: 5px;
}
.alert {
    padding: 15px;
    margin-bottom: 22px;
    border: 1px solid transparent;
    border-radius: 0;
}
.alert h4 {
    margin-top: 0;
    color: inherit;
}
.alert>p, .alert>ul {
    margin-bottom: 0;
}
.alert>p+p {
    margin-top: 5px;
}
.alert-dismissable, .alert-dismissible {
    padding-right: 35px;
}
.alert-dismissable .close, .alert-dismissible .close {
    position: relative;
    top: -2px;
    right: -21px;
    color: inherit;
}
.alert-success {
    color: #1C7540;
    background-color: #93FFBE;
}
.alert-success hr {
    border-top-color: #c9e2b3;
}
.alert-success .alert-link {
    color: #2b542c;
}
.alert-info {
    color: #1C5F75;
    background-color: #93F0FF;
}
.alert-info hr {
    border-top-color: #a6e1ec;
}
.alert-info .alert-link {
    color: #245269;
}
.alert-warning {
    background-color: #FDEEAC;
    color: #8a6d3b;
}
.alert-warning hr {
    border-top-color: #f7e1b5;
}
.alert-warning .alert-link {
    color: #66512c;
}
.alert-danger {
    color: #751C1C;
    background-color: #FF9393;
}
.alert-danger hr {
    border-top-color: #e4b9c0;
}
.alert-danger .alert-link {
    color: #843534;
}
img {
    border:none;
}

a:link {
    text-decoration:underline;
}  

#LanguageBox {
    position: relative;
    right: 0px;
    top: 4px;
    padding: 0px;
}
#Languages a {
    font-size: 18px;
    font-weight: bold;
    color: #687aab;
    text-decoration: none;
}

#LogoSlogan{
    margin-top: 21px;
    height: 37px;
    z-index: 10;
    background-repeat: no-repeat;
    background-position: 6px;
    background-size: 180px 37px;
    background-image: url(../graphics/findoor_logo_vaaka.png);
}

.headline{
    position: relative;
    color: #003366;
    font-size: 23px;
    font-weight: bold;
    margin-top: 9px;
    margin-bottom: 11px;
}

table, th {
    padding: 5px;
}

.btn_submit {
    top: 40px;
}

.table.vertical_middle td {
    vertical-align: middle;
}

.table.ovitaulu {
    background-color: #FFF;
    border-radius: 8px;
    margin-bottom: 30px;
    margin-left: 2px;
    margin-right: 2px;
}

.input_table:not(:first-child) .ovi_headline_tr {
    padding-top: 12px; 
}

.table.ovitaulu .alaotsikko {
    font-weight: bold;
    padding-bottom: 7px;
    padding-top: 13px;
    font-size: 22px;
    color: #000000;
}

.table.ovitaulu td {
    vertical-align: middle;
    border: 0px;
    font-size: 17px;
    padding: 3px 8px;
}

.table.ovitaulu input, .table.ovitaulu select {
    font-size: 18px;
}

.ovitiedot_input {
    width: 100px;
}

.oven_tiedot {
    border-style: solid;
    border-width: 1px 0px 0px 0px;
    border-color: #4f5a6d;
    padding-top: 17px;
}

.valinta-inline {
    display: inline-flex;
    margin-bottom: 7px; 
    margin-right: 7px; 
    padding-left: 0px;
    background-color: #E3E3E3;
    color: #555555;
}

.valinta-inline .valinta-input {
    margin-right: 3px;
}

.valinta-label {
    margin-bottom: 0;
    font-size: 16px;
    font-weight: normal;
    display: flex; 
    flex-direction: column;
}

.switch_to_metric, .switch_to_imperial {
    color: #687aab;
    cursor: pointer;
}

.ovi_slider {
    -webkit-appearance: none;
    width: 100%;
    height: 50px;
    border-radius: 12px;  
    background-color: transparent;
    outline: none;
    opacity: 0.7;
}

.ovi_slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    border-radius: 50%; 
    background-color: #00AEEF;
    border: 5px solid #23408F;
    cursor: pointer;
    margin-top: -8px;
}

.ovi_slider::-webkit-slider-runnable-track {
    background-color: #cacaca;
    height: 12px;
    border-radius: 6px;
}

.ovi_slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #00AEEF;
    border: 5px solid #23408F;
    cursor: pointer;
}

.ovi_slider::-moz-range-track {
    background-color: #cacaca;
    height: 12px;
    border-radius: 6px;
}

.ovi_slider::-ms-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #00AEEF;
    border: 5px solid #23408F;
    cursor: pointer;
    margin-top: 2px;
}

.ovi_slider::-ms-track {
    background-color: #cacaca;
    height: 12px;
    border-radius: 6px;
}

.vari_box {
  border-radius: 8px;
  width: 64px;
  height: 64px;
  border: 2px solid #FFFFFF;
  margin-left: 13px;
}

.vari_box.selected {
  border: 2px solid #000000;
}

.vari_nimi {
  text-align: center;
}

.vari_nimi.selected {
  font-weight: bold;
}

.valinta-ruutu {
  border-radius: 8px;
  border: 1px solid #747474;
  background-color: #FFF;
  text-align: center;
}

.valinta-ruutu.selected {
  border: 1px solid #003366;
  background-color: #003366;
  color: #FFFFFF;
}

.yhteystiedot_otsikko {
  margin-top: 12px;
  font-weight: bold;
  color: #000;
}

.yhteystiedot_input {
  width: 100%;
  font-weight: normal;
}

.dg li:not(.folder) {
  background-color: #EEE;
}