*, *:before, *:after {box-sizing: border-box; font-family: 'Quicksand', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, "Open Sans", "sans-serif"; font-size: 13px; z-index: 10;}

html, body {margin: 0 auto;}

html {background-color: #9ae7e1a2; /* background-image: url(../img/taust.png) */}



h1 {font-size: 15px; display: none;}

h3 {font-size: 14px; clear:both}

h4 {margin-bottom: 0px}

#container {margin:0 auto; width: 1330px; background-color: #e1dbcd; height: 100%; /* background-image: url(../img/taust.png) */}

#container:after {clear: both; content: ""; display: table; position: relative;}

.sisendandmed {list-style: none;}

#sisend {float: left; width: 375px; text-align: left; padding-top: 211px;/* border-right: solid black 1px; */ padding-bottom: 1em;min-width: 250px; clear: both; min-height: 645px; padding-left: 5px}

#joonisMoodud {z-index: 0; margin-left: 380px; position: fixed; width: 950px;}

#wrapper {position: relative;}

#joonisYmbris {/*  background-color: white; */ margin-right: 5px; margin-bottom: 5px; min-height: 500px; }

#moodud { display: block;}

#joonis {margin-left: 15px; width: 500px;  height: auto; float: left}

#jooniseInfo {min-width: 400px; margin-left: 505px; padding-top: 30px}

#detailInfo { height: auto; overflow: hidden;}

#joonisMoodud {background-image: url(../img/grid2.png); background-color: rgba(255, 255, 255, .9); height: 645px; background-repeat: no-repeat; background-position-x: center; background-position-y: 2px; background-size: 940px}

.majaInfo {display: none;}

input[type=number] { margin-left: 1em; width: 100px;}

input[type=button] {font-size: 13px; color: white; background-color: #2d6870;border: none;border-radius: 10px; width: 125px; margin: 7px 0; min-height: 40px;white-space: normal;cursor: pointer; padding:0;}

input[type=button]:hover {background-color: transparent; border: 2px solid #2d6870; color: #2d6870}

ul.sisendandmed  label {width: 86.69px; display: inline-block; text-align: center; font-size: 13px}

ul.sisendandmed  input[type=number] {width: 86.69px; display: inline-block; position: relative; margin: 0 auto; text-align: center; margin-top: 50px; border-radius: 5px; border: 2px solid #2d6870}



.placeHolderPilt1 {width: 375px; height: 211px; background-color: #e1dbcd; display: table; position: fixed; top: 0; z-index: 14; /* background-image: url(../kalkull/img/1.algus2.png), url(../img/2.viil2.png);*/ background-size: 375px 211px }

.placeHolderPilt1 p.tekstKeskel {display: table-cell; width: 100%; text-align: center; vertical-align: middle;}

.modal-body label {width: 115px; display: inline-block;} 

ul.sisendandmed  li { padding: 0 10px; float: left;}

ul.sisendandmed {width: 100%; text-align: center; margin-bottom: 5px}

canvas {margin: 0 auto; position: relative; /*border: 1px solid black;*/}

#canvas {display: block; margin: 0 auto; text-align: center;}

#blank {overflow: hidden;}

#arvutuseTulemused {overflow: hidden; height: 0; transition: heigth 2s; clear: both;}

#usteInfo, #pikemadLauadInfo, #aknadInfo, #vundamentInfo, #porandInfo, #katusInfo, #parlinInfo  {overflow: hidden; height: 0; transition: heigth 2s;clear: both;padding-right: 1em;}

#tapsemadSeaded {overflow: hidden; height: 0; transition: heigth 2s;clear: both; margin-bottom: 1em;}

#arvutuseTulemused:hover {transition: height 2s;}

.avatud { height: 200px; transition: height 2s !important;}

input[type=button].poolNuppu {width: 100px;}

.modal-body input[type=button].poolNuppu {width: 45%; clear:both;margin-left: 1em; position: absolute; bottom: 0; left: 0;}

input[type=button].eemalda {margin: 0 auto; background-color: #2d6870; width: 17px; border-radius: 17px; float: right; font-size: 13px; line-height: 13px; padding: 0; min-height: 17px; }

input[type=button].eemaldaMitu {margin: 0 auto; background-color: #2d6870; width: 30px; border-radius: 30px; min-height:30px; float: right; margin: 0; position: absolute; right:0; top: 50%; transform: translateY(-50%);-ms-transform: translateY(-50%)}

input[type=button].eemalda:hover + li {background-color: rgba(255,0,4,0.50); border-radius: 0 30px 30px 0;}

input[type=button].eemaldaMitu:hover ~ li:first-of-type {background-color: rgba(255,0,4,0.50); border-radius: 0 30px 0 0; }

input[type=button].eemaldaMitu:hover ~ li {background-color: rgba(255,0,4,0.50); border-radius: 0 0 0 0;}

input[type=button].eemaldaMitu ~ li {margin-bottom: 0px !important; padding-right: 35px}

input[type=button].eemaldaMitu:hover ~ li:last-of-type {background-color: rgba(255,0,4,0.50); border-radius: 0 0 30px 0; }

input[type=button].eemalda:hover {background-color: black; color: white;}

input[type=button].eemaldaMitu:hover {background-color: black; color: white;}

input[type=button].poolNuppu:nth-of-type(2) {margin-left: 10%}

input[type=button].ajutine {background-color: gray;}

input[type=button].ilmaFunktsioonita {background-color: white; color: black; border: 1px solid black;}

input[type=button]#lisaKatusPea {display: block;}

input[type=button]#lisaVundamentPea {display: block;}

input[type=button]#lisaPorandPea {display: block;}

input[type=button]#lisaParlinPea {display: block;}

#arvutuseTulemused input[type=button].poolNuppu {float: none;}

#katus, #vundament, #porand, #parlin {display: none;}

.suunaInfo{color: red; font-weight: bold;}

#jooniseInfo ul {margin-top: -10px}

#jooniseInfo h1 {margin-left: 39px;}

#jooniseInfo li {list-style: none;}

h1.summaKokku {margin-left: 0px !important}



.clear {clear: both; content: ""; display: table}

.summaKokku {float: left; width: 398px; margin-left: 0px}

.infoks a {color: white; text-decoration: none;}





ul#ustenimekiri li, ul#akendenimekiri li, ul#pikemateLaudadeNimekiri li, ul#vundamentNimekiri li, ul#porandNimekiri li, ul#katusNimekiri li, ul#parlinNimekiri li {padding: 2px 30px 2px 10px; margin-bottom: 2px}

ul#ustenimekiri, ul#akendenimekiri, ul#pikemateLaudadeNimekiri, ul#vundamentNimekiri, ul#porandNimekiri, ul#katusNimekiri , ul#parlinNimekiri, ul#raastaNimekiri {float: right; width: 270px;}

ul {position: relative;}

#uksed, #pikemadLauad, #aknad, #katus, #vundament, #porand, #katus, #parlin {clear: both;}

/* #lisaPikemLaudPea {margin-top: 2em;} */

#detailInfo {height: 0px; transition: height 2s;}

#detailInfo li{list-style: none;}

.infoks {color:white; font-size: 10; background-color: black; text-align: center; margin-top: 0px;}

sup {font-size:9px}

img#abiJoonis {max-height: 250px;}

.tekstiOsa {float: left; width: 60%;}

#abiJoonisDiv {float: right; width: 40%;}

.tapsemadSeaded {position: absolute; bottom: 0; right: 5px; cursor: pointer; font-size:16px;}

.taisLaius {width: 100%; }

.esimenePool {display: inline-block; width: 135px;}

.teinePool {display: inline-block; width: 75px; text-align: right;}

.kolmasPool {display: inline-block; width: 129.5px; text-align: right}

.hinnad {width: 50%;}

.hinnad.valik {float: right; margin-top: 50px; text-align: center; display: none;}

.hinnad.valik select {width: 70%; text-align: center;}

.hinnad > span {margin-bottom: 20px; display: table;}

.hinnad > span > input {text-align: center; vertical-align: middle}

.hinnad label {width:  225px}

.hinnad p {position: absolute; bottom: 45px}

#hind {position: fixed; bottom:10px; right: 10px; cursor: pointer;}

#detailne {position: fixed; bottom: 25px; right: 10px; cursor: pointer;display: none;}

#majadeNimekiri {position: fixed; bottom: 40px; right: 10px; cursor: pointer;}

input[type=button].detailInfoNupp {width: auto;}

h1.summaKokku > span.esimenePool {font-size: 14px; width: 50%; text-align: right}

h1.summaKokku > span.teinePool {width: 150px; position: relative; right: -45px;}

h3.raast {float: right; width: 340px}

.hover {background-color: rgba(255, 0, 4, 0.50); border-radius: 0 30px 30px 0; }

input[type=number]::-webkit-inner-spin-button, 

input[type=number]::-webkit-outer-spin-button { 

      -webkit-appearance: none; 

      margin: 0;

}

input[type=number] {

  -moz-appearance: textfield;

      appearance: textfield;

      margin: 0

}



/*! siit on ikoonide info */

.sisendandmed li {width: 86.7px; height: 112.1px; margin-left: 35.7px}

.sisendandmed li:first-of-type {margin-left: 15px}



div.cab_width, div.cab_depth, div.cab_height_fb, div.cab_height_side, div.cab_roofHeight, div.palgiKorgus, div.palgiPaksus  { width: 86.69px; background-size: 100px; background-position-y: -17px; background-position-x: center; background-repeat: no-repeat;}

div.cab_width {background-image: url(../img/width.svg);}

div.cab_depth{background-image: url(../img/length.svg);}

div.cab_height_fb {background-image: url(../img/backwall_height.svg);}

div.cab_height_side{background-image: url(../img/sidewall_height.svg)}

div.cab_roofHeight{background-image: url(../img/roof_height.svg)}

div.palgiPaksus {background-image: url(../img/log_width.svg);}

div.palgiKorgus {background-image: url(../img/log_height.svg);}



/*! siit on ikoonide info */



#container.demo video {max-width: 1900px; width: 50%; height: auto; text-align: center; margin: 100px 0px}

#container.demo p {margin-bottom: 25px;}

a.demo{font-size: 20px; text-decoration: none; font-weight: 400; color: white; border: #2d6870 1px solid; 

  padding: 10px; line-height: 20px; border-radius: 30px; background-color: #2d6870; margin: 10px}



#demo {position: fixed; bottom: 10px; left: 10px; cursor: pointer; font-size: 20px; text-decoration: none; font-weight: 400; color: white; border: #2d6870 1px solid; 

  padding: 10px; line-height: 20px; border-radius: 30px; background-color: #2d6870}

#demo a {text-decoration: none; font-size: 20px; color: white; display: block}

#demo:hover {background-color: transparent; color: #2d6870}

#demo:hover a {color:#2d6870}



/* @media screen and (max-width: 1340px){

  #joonisMoodud {position: relative;}

  .placeHolderPilt1 {position: relative;}

  #sisend {padding-top: 0px}

} */

/* #### Desktops #### */

/* 

@media screen and (max-width: 1600px){

  .tekstiOsa {float: none; width: 100%;}

  #abiJoonisDiv {float: none; width: 100%;}

}



@media screen and (max-width: 1520px){

  .tekstiOsa {float: none; width: 100%;}

  #abiJoonisDiv {float: none; width: 100%;}

  .modal-body >  span {display: block; width: 100%; margin-top: 1em;}

  .modal-body >  span > label {float: left; width: 40%}

  .modal-body > #tapsemadSeaded > .ymbris > span {display: block; width: 100%; margin-top: 1em;}

  .modal-body > #tapsemadSeaded > .ymbris > span > label {float: left; width: 40%}

  .modal-body > #tapsemadSeaded > .ymbris > p > span >  label  {float: left; width: 40%}







}

@media screen and (max-width: 990px){

  .tekstiOsa {float: none; width: 100%;}

  #abiJoonisDiv {float: none; width: 100%;}

  .modal-body > .tekstiOsa > span {display: block; width: 100%; margin-top: 1em;}

  .modal-body > .tekstiOsa > span > label {float: left; width: 40%}

  .modal-body > #tapsemadSeaded > .ymbris > span {display: block; width: 100%; margin-top: 1em;}

  .modal-body > #tapsemadSeaded > .ymbris > span > label {float: left; width: 40%}

  .modal-body > #tapsemadSeaded > .ymbris > p > span >  label {float: left; width: 40%}

  .modal-body >  span {display: block; width: 100%; margin-top: 1em;}

  .modal-body >  span > label {float: left; width: 40%}



}

@media screen and (max-width: 625px){

  .tekstiOsa {float: none; width: 100%;}

  #abiJoonisDiv {float: none; width: 100%;}

  .modal-body > .tekstiOsa > span {display: block; width: 100%; margin-top: 1em;}

  .modal-body > .tekstiOsa > span > label { width: 100%}

  .modal-body > #tapsemadSeaded > .ymbris > span {display: block; width: 100%; margin-top: 1em;}

  .modal-body > #tapsemadSeaded > .ymbris > span > label { width: 100%}

  .modal-body > #tapsemadSeaded > .ymbris > p > span >  label { width: 100%}

  .modal-body >  span {display: block; width: 100%; margin-top: 1em;}

  .modal-body >  span > label { width: 100%}

}







@media (max-device-width: 1024px), (max-width: 1045px) {

    #sisend {float: left; width: 40%; text-align: left; padding-right: 1em; min-height: auto !important}

    #joonis {margin-left: 40%; width: 60%; padding: 1em;} 

    #detailInfo {margin-left: 40%; width: 60%;} 

    

}



@media (max-device-width: 600px), (max-width: 600px) {

    #sisend {float: left; width: 40%; text-align: left; padding-right: 1em; min-height: auto !important}

    #joonis {margin-left: 40%; width: 80%; padding: 1em;

    

    }   

    .modal-content {width: 95%;}

}

@media only screen and (max-device-width: 480px) {

	#sisend {float: none; width: 100%;margin: 0 auto;border-right: none; min-height: auto !important}

	#joonis {float: none; width: 100%;margin:0 auto;}

    #detailInfo {float: none; width: 100%; margin: 0 auto;}

    .modal-content {width: 95% !important}

    .modal-body > .tekstiOsa > span {display: block; width: 100%; margin-top: 1em;}

    .modal-body > .tekstiOsa > span > label {float: left; width: 40%}

    .modal-body > #tapsemadSeaded > .ymbris > span {display: block; width: 100%; margin-top: 1em;}

    .modal-body > #tapsemadSeaded > .ymbris > span > label {float: left; width: 40%}

    .modal-body > #tapsemadSeaded > .ymbris > p > span >  label  {float: left; width: 40%}

    .modal-body >  span {display: block; width: 100%; margin-top: 1em;}

    .modal-body >  span > label {float: left; width: 40%}



    }

 */



/* The Modal (background) */

.modal {

  display: none; /* Hidden by default */

  position: fixed; /* Stay in place */

  z-index: 15; /* Sit on top */

  padding-top: 100px; /* Location of the box */

  left: 0;

  top: 0;

  width: 100%; /* Full width */

  height: 100%; /* Full height */

  overflow: auto; /* Enable scroll if needed */

  background-color: rgb(0,0,0); /* Fallback color */

  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}



/* Modal Content */

.modal-content {

  position: relative;

  background-color: #fefefe;

  min-height: 100px;

  margin: auto;

  padding: 0;

  /* border: 1px solid #888; */

  width: 940px;

  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);

  -webkit-animation-name: animatetop;

  -webkit-animation-duration: 0.4s;

  animation-name: animatetop;

  animation-duration: 0.4s

}



/* Add Animation */

@-webkit-keyframes animatetop {

  from {top:-300px; opacity:0} 

  to {top:0; opacity:1}

}



@keyframes animatetop {

  from {top:-300px; opacity:0}

  to {top:0; opacity:1}

}



/* The Close Button */

.close {

  color: white;

  float: right;

  font-size: 23px;

  font-weight: bold;

}



.close:hover,

.close:focus {

  color: #000;

  text-decoration: none;

  cursor: pointer;

}



.modal-header {

  padding: 2px 16px;

  background-color: #2d6870;

  color: white;

}

.modal-header > h2 {font-size: 1.3em}



.modal-body {padding: 2px 16px; position: relative; overflow: hidden; padding-bottom: 4em;  }



.modal-footer {

  padding: 2px 16px;

  background-color: #5cb85c;

  color: white;

}

.modal span {margin-left: 1em;}

span.info {margin-bottom: 5px;float:left; clear: both; color: white; background-color: #707070; padding: 3px; width: 97%; padding-left: 1em !important }

#modal-body * {clear: none;}

/* span.info ~ p {clear: both;} */

#prindi {position: absolute; right: 0px; top: 0px; cursor: pointer; display: block;}

#prindi img {width: 50px}

#menu {position: relative; width: 100%; background-color: #e1dbcd; text-align: center; top:0; padding: 2px 0}

#menu li, #menu a {display: inline-block;}

#menu li {min-width: 100px; text-align: center; background-color: #2d6870; border: 1px solid #2d6870; margin: 0 0.7em; padding: 0.2em; border-radius: 10px;}

#menu li:hover {background: none; }

li.kontakt {position: absolute; right: 30px;}

#menu a {color: white; text-decoration: none; width: 100%; font-weight: 400;}

#menu ul {margin-top: 0; margin-bottom: 0;}

#menu a:hover {color: #2d6870}

#menu li.aktiivne {background: none;}

#menu a.aktiivne {color:#2d6870}

.info {text-align: left; background-color: hsla(0, 0%, 100%, 0.87); width: 70%; margin: 0 auto; padding: 2em; border-radius: 0 0 20px 20px; border: 2px solid #2d6870; }

#container.kysitlus {padding: 0 0 2em 0; /* margin-top: 10px; margin-bottom: 10px */}

#container.kysitlus #menu {padding: 5px 0}

#container.kysitlus h1 {display: block; color: #2d6870; font-size: 20px}

#container.kysitlus h2 {display: block; color: #2d6870; font-size: 16px; /* border: 3px solid #2d6870; border-top: none; border-right: none; */ width: 70%; /* padding-left: 1em */}

.info p {font-size: 14px; /* background-color: hsla(187, 43%, 31%, 0.3); padding: 1em; border-radius: 0px 20px 20px 0px; font-weight: bold; */}

.icon {margin-right: 5px;}

.info li {list-style-type: none; width: 100%;}

.info li, .info a, .info span {font-size: 14px}

.info li > a { position: absolute; left: 90px;}

.info a {text-decoration: none; color: #2d6870; cursor: pointer;}

.info a.link {left: 0; border-top: 1px solid #2d6870; font-size: 20px; font-weight: bold; display: block; width: 90%; margin: 0 auto; padding-top: 10px; margin-top: 50px;}

div.pilt {width: 80px; height: 80px; float: left;  border-radius: 50px;}

.isik {display: table; min-height: 80px;}

.isik ul {padding-left: 15px; display: table-cell; vertical-align: middle; position: relative; width: 100%;}

.kristjan {background-image: url("../img/linkedin/0.jpg"); background-size: 80px 80px}

.raiko {background-image: url("../img/linkedin/0\ \(1\).jpg"); background-size: 80px 80px;}

#testversioon, #testversioon span {color: red; font-weight: bold; font-size: 30px; position: fixed; left: 10px; bottom: 10px;}

#testversioon span {cursor: pointer; position: relative; left: 0; bottom: 0;}

input[type=button].yhekaldne, input[type=button].viilkatus {width: 200px;}

#lisaInfo{display: none;}



@media print {

  @page {size: landscape;}

  div {display: none;}

  #container, #joonisMoodud, #moodud, #joonisYmbris, #joonis, #canvas, #jooniseInfo {display: block; background: none}

  #joonisMoodud {page-break-after: always;}

  #joonisMoodud, #container {margin: 0 auto; width: 950px; position: relative; height: 100%; }

  ul.sisendandmed  div {display: table; /* margin-left: auto; margin-right: auto; */}

  #jooniseInfo div {display: block;}

  #jooniseInfo {margin-left: 520px;}

  .summaKokku {width: 417px;}

  ul.sisendandmed li {float: none; display: inline-block;}

  ul.sisendandmed {padding-inline-start: 0; margin-inline-start: 0;}

  .sisendandmed li:first-of-type {margin-left: 0px;}

  #joonisMoodud {background-image: none;}

  html, #joonisYmbris {background-color: transparent;}

  html, body {width: 279.4mm}

  canvas {width: 100%;}

  #joonis {width: 475px;}

  #prindiPilt {display: block;}

  #prindiPilt img { width: 475px;}

  #prindi img {display: none;}

  #detailne {display: none !important;}

  div#lisaInfo, #lisaInfo div {display: block; position: relative !important; top:0px; margin: 0 auto;}

  h1, h2, h3, h4 {font-weight:normal}

  .yksKalle {display: none !important;}



  

}

.keskele {width: 100%; text-align: center !important; display: block;}

.keskele.tyyp {padding-top: 4em;}

.yksKalle {display: none;}

.salvestame { display: flex;  align-items:  center ;  justify-content: center ;  height: 70px ;  padding: 0px ;  font-weight: bold;  font-size: 200%;}

.salvestame p {  font-size: 100%;  margin: 0 auto; }



.lisaMaja {  position: relative; top: 4em; margin-left: 20px !important; }

.lisaMaja:first-of-type {margin-left: 0;}

ul.majadeNimekiri li {width: 90%; list-style-type: none; padding: 0.1rem .5rem;}

ul.majadeNimekiri li:nth-of-type(2n) {background-color: rgba(194, 194, 194, 0.3);}

ul.majadeNimekiri li:hover {background-color: rgba(194, 194, 194,.6);}

ul.majadeNimekiri > li > span:first-of-type { float: right}

ul.majadeNimekiri span.kasuta {cursor: pointer; color: rgb(40, 167, 69)}

ul.majadeNimekiri span.muuda {cursor: pointer; color: rgb(255, 193, 7)}

ul.majadeNimekiri span.kustuta {cursor: pointer; color: rgb(220, 53, 69)}

#nupud .lisaMaja {top: 0; color: black}

#nupud > .lisaMaja.kustuta {background: rgb(220, 53, 69);}

#nupud > .lisaMaja.muuda {background: rgb(255,193,7);}

#nupud {position: relative; left: 60px}



.hinnad > .lisaMaja.kasuta {background: rgb(40, 167, 69);}



.IE {height: 100vh !important; display: flex; justify-content: center; align-items: center; }

.IE div {color: rgb(220, 53, 69); font-weight: bold; font-size: 16px; text-align: center; padding: 2em; border-radius: 10px; border: 1px solid rgb(187, 187, 187); background-color: rgba(187, 187, 187,0.7); box-shadow: 5px 5px 5px black; box-shadow: 3px 3px 15px 0px rgba(50, 50, 50, 0.35);}

.IE div p {color: rgb(40, 167, 69)}

#container.IE {background-color: transparent;}

.lisaks {float: none !important; font-size: 10px; font-style: italic; cursor: default !important; color: black !important;}



@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

  .cab_height_side, .cab_height_fb, .cab_roofHeight, .palgiPaksus, .palgiKorgus {background-position-y: -27px !important;}

  #prindi img {height: 50px !important; width: auto !important;}

  #prindi {width: 50px !important;}

  body {background-color: hsla(175, 62%, 75%, 0.635); }

}