/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 1.10.2020, 9:54:10
    Author     : maguth
*/


body, html {
    height: auto;
    width: 100%;    
    font-family: 'Titillium Web'!important;   
    margin:0px;
}


    
select, input, .ui-widget {font-family: 'Titillium Web'!important;    }

a{text-decoration: none;}

div{float:left;}
div.reset{clear:both;width:100%;height:1px;display:block;float:none;}

h3{color:#8b231d;font-size: 1.1em;margin-top:10px;margin-bottom:10px;}
h4{color:#666;font-size: 1.0em;margin-top:10px;margin-bottom:10px;}
h2{color:#555;font-size: 1.0em}

div#preload{display:none;}
.hidden {display:none;}

/*
input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}
*/

div.div-main {float:left;}
div#main {height:100%;width:100%;background-color: #eee;padding:0px; }
div#left-main {height:100%;width:20%;/*min-width: 260px;*/background-color: #e9e9e9;}
div#right-main {width:80%;}

div#left-menu {width:100%;min-height: 900px;margin-top: 20px;}
div#top-menu {height:105px;background-color:#eee;width:100%;}

@media only screen and (max-width: 700px) {
    div#left-main { width:100%;float:none; }
    div#right-main { width:100%; float:none; }
    div#left-menu {min-height:min-content;}
}

@media only screen and (max-width: 675px) {   
    div#top-menu{
        height: auto;
    }
}


div#logo img{
    margin: 20px 20px 10px 20px;
    width: 75%;
    max-width: 250px;}

div#logo .titul{margin-left:20px;font-weight:bold;}

div#canvas-main{height:100%;width:100%;clear:both; }

//div#dvere-otvor{margin-left:200px;margin-top:100px;  }
div#tab-svg{width:100%;height:100%;}
div#dvere-svg, div#ostenie-svg{position:absolute;float:none;mix-blend-mode:normal;z-index:99;left:50%;}
/*
div#dvere-spaleta{position:absolute;float:none;background-color:#999;mix-blend-mode:multiply;z-index:1;left:50%;}
div#dvere-spaleta-w{position:absolute;float:none;background-color:#fff;mix-blend-mode: normal; z-index:2;left:50%;}
*/
.ostenie {background-size: cover;position:absolute;float:none;left:50%;mix-blend-mode:multiply;}
#ostenie-left{background-image: url(../images/pozadia/ostenie_left.png);}


div.dvere-pozadie{background-size:1600px;background-repeat: no-repeat; background-position-x:center;background-position-y:-120px;width:100%; background-color: #eeeeee;position:relative;}
div.dvere-pozadie#dvere-svg-wrapper{position:absolute;}

div#dvere-wrapper{position: relative;
    width: 100%;}


.close-window{background-image: url(../images/close1.png);width:15px;height:15px; background-size: cover;float:right;margin:20px;}
.close-window:hover{background-image: url(../images/close2.png);}


.item-button{border:#fff solid 3px;}
.item-button.selected, .item-button:hover{border-color:#8b231d;border-style:solid;}
.item-button.button-farba{height:90px;width:90px;float:left;clear:right;padding:5px;margin:1px;font-weight: bold;color:white;font-size:0.8em;}
.item-button.button-sklo{height:100px;width:90%;float:left;clear:right;padding:5px;margin-top:10px;font-weight: bold;color:white;}
.item-button.button-typ{border-color:#e9e9e9;}
.item-button.button-typ:hover, .item-button.button-typ.selected{border-color:#8b231d;}

.slide-div{overflow: auto;}


div.left-submenu{width:90%;margin-left:5%}
#vyber-doplnky-ext,#vyber-doplnky-int,#wrapper-modely{width:90%;}
div.wrapper-filter-doplnky, div.wrapper-filter-farby{width:90%;}

/*div#menu-farby,div#menu-farby2{height:400px;overflow: auto;}*/


div.top-submenu{padding:20px;}
div.top-submenu a {display: block; float:left;height:100%;width:100%;}

div.tabs-menu-wrapper{
    position: absolute;
    left:20%;
    top:20px;
    /*margin-top:15px!important;*/
}

@media only screen and (max-width: 700px) {
    div.tabs-menu-wrapper{ left: 5%;top: 131px;width: 90%;}
    div.tabs-menu-wrapper li{width:100%;}
    div#top-space{height:210px;float:none;}
}


.ui-tabs .ui-tabs-nav {
    margin: 0px!important;
    padding: 0px!important;
    clear:none;
}

.ui-tabs-nav.ui-widget-header {
     border: none;
     background: none; 
     border-bottom: 1px #c5c5c5 solid;
    /* color: #333333; */
    /* font-weight: bold;*/ 
    }


div#dvere-modely{width:80%;position:absolute;background-color:rgba(255,255,255,1);z-index:100;height:850px;}

@media only screen and (max-width: 700px) {
    div#dvere-modely { width:100%;}
}

div#dvere-modely div.button-model{opacity:1;}
div#dvere-doplnky, div#dvere-farby{width:270px;position:absolute;background-color:rgba(255,255,255,1);z-index:100;height:850px;}
div#dvere-doplnky-polozky,div#dvere-modely-polozky,div#dvere-farby-polozky{padding:20px;}

div.button-model{padding:10px;float:left;margin:10px;display:block;padding-bottom:0px;}
div.button-model img{float:left;display:block;clear:none;} 


div.model-nazov{clear:both;float:none;width:100%;text-align:center;text-decoration:none;}

input#model-filter-text{width:90%;}


#tab-typy, #tab-farby, #tab-doplnky, #tab-filter, #tab-skla {padding:0px;width:100%;}
div.button-typ{padding:10px;float:left;width:90px}
div.button-typ-nazov{clear:both;float:none;}
li.ui-tabs-active{background:#8b231d!important;border-color:#a75e00!important;}




//DOPLNKY
div.button-doplnok{padding:10px;float:left;width:120px}
div.doplnok-nazov{clear:both;float:none;margin-bottom:5px;font-weight: bold;font-size:0.8em;}
div.doplnok-variacie{font-size:0.8em;}


div#menu-klucky div.button-doplnky{background-color:transparent;width:100%;}
div#menu-klucky div.button-doplnky.active-button{background-color:#8b231d;}
div.doplnok-vyber{width:135px;}

div#dvere-doplnky div.button-doplnky{height:210px;padding:10px;float:left;width:100px}

div.doplnok-nahlad{height:150px;width:100px;background-position: center;background-size: 50%;background-repeat:no-repeat;}
div#menu-klucky div.doplnok-nahlad{height:200px;width:150px;}
div.klucka-nahlad{background-size: 100%;}
div.rozeta-nahlad{background-size: 100%;}

div.button-klucka-nazov{clear:both;float:none;}
div.klucka-nahlad img{margin-left:auto; margin-right:auto;display:block;}


div.farba-nahlad{padding:5px;height:200px;;width:90%;max-width:200px;background-position: center;background-size:cover;background-repeat:no-repeat;}

div.farba-nahlad .farba-nazov{margin:auto;color:white;font-weight: bold;/*text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;*/}

@media only screen and (max-width: 700px) {
    /*div.farba-nahlad{max-width:200px;width:90%}  */
}



div.rozmery-input span.rozmery-label{width:40px;display:block;float: left;text-align: right;margin-right: 5px;}

//div#rozmery-otvor,div#rozmery-dvere{height:130px;}



img.typ-image{height:80px;}
img.typ-image.kluckaP{display:none}






select#farba-fasada {height:36px;}
select#farba-fasada option{text-indent: 5px;height: 1.5em;padding:10px 0px;}


div[role=dialog]{z-index:999;}
div[role=dialog].ui-dialog-content{float:none;}
div[role=dialog] div{float:none;}


/*LOADER*/
div#main{display:none;}

.loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 120px;
  height: 120px;
  margin: -76px 0 0 -76px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #8b231d;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

.loader#loader-model {display:none;}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/*95x122*/


/*112x240*/
div.svetla{position: absolute;}
@media only screen and (max-width: 950px) {
    div.svetla{display:none;}  
}

@media only screen {
    /*div.svetla{display:none;}  */
}


div#svetlo-l{width:50px;height:107px;background-image: url(../images/pozadia/svetlo1.png);background-size: cover; left:50%;}
div#svetlo-p{width:50px;height:107px;background-image: url(../images/pozadia/svetlo1.png);background-size: cover; left:50%;}
div#schranka{width:95px;height:122px;position: absolute;background-image: url(../images/pozadia/schranka.png);background-size: cover; left:50%;}


div.button-filter-modely{margin-left:10px;padding:0px; height:190px; width:40px;background-image: url(../images/butt1.png); background-repeat: no-repeat;background-position-y: 45px;background-size: 50%;}
/*div.button-filter-doplnky.active-button, div.button-filter-modely.active-button{background-image: url(../images/butt1_active.png);background-color:transparent;}*/
div.button-filter-modely{height:400px; width:40px;background-image: url(../images/butt1.png); background-repeat: no-repeat;background-position-y: 140px;background-size: 50%;}

/*tlacitka - sipky*/
.arrow {
    cursor: pointer;
    display: inline-block;
    height: 30px;
    width: 90%;    
    position: relative;
    line-height: 1.9em;
    padding-left: 1em;
    /*padding-right: 2em;*/
    background: white;
    color: black;
    font-weight: bold;
    z-index: 101;
}

.arrow.button-filter-modely{margin-top: 0px;}
.arrow{margin-top: 5px;}

.arrow:after {
  border-left: 20px solid white;
}

.arrow:after {
  content: "";
  position: absolute;
  border-bottom: 15px solid transparent;
  border-top: 15px solid transparent;
  height: 0px;
  width: 0px;
  margin-right: -20px;
  right: 0;
}

.arrow:hover, .arrow.active-button {
  background: #8b231d;
  color: white;
}
.arrow:hover:after, .arrow.active-button:after {
  border-left: 20px solid #8b231d;
}

a.arrow:visited, a.arrow:link {
  /*color: #F93;*/
}






div.active-button{background-color:#8b231d;}
//div.button-model :hover, div.button-doplnok :hover{background-color:#b5d6ff;}

/*
#dvere-modely div.button-model img:hover, div.button-doplnok div.doplnok-nahlad:hover, div.button-farba:hover, div.button-sklo:hover, div.button-typ:hover{
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
transition: 0.5s ease;
}
*/

div#model-vyber img{    
    max-width: 150px;
    height: auto;
    width: 90%;}
div#model-vyber-wrapper{margin-top:0px;}

@media only screen and (max-width: 700px) {
    div#model-vyber-wrapper{display:none;}
}




.ui-dialog-titlebar-close{display:none!important;}
.ui-widget-overlay{
  opacity: 0.8 !important; /* Make sure to change both of these, as IE only sees the second one */
  filter: Alpha(Opacity=80) !important;
  /*background: #b5d6ff !important; This will make it darker */
}

/*
label.button-filter {padding:10px;}
label.button-filter.subfilter {padding-left:30px;}
label.button-filter span {margin-left:30px;}
*/

/* Customize the label (the container) */
.checkbox-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 1em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox-container.subfilter{margin-left:20px;}

/* Hide the browser's default checkbox */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}



/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #fff;
}

/* On mouse-over, add a grey background color */
.checkbox-container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked ~ .checkmark {
  background-color: #8b231d;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}







/* VARS */
/* MIXINS */
/* STYLE THE HTML ELEMENTS (INCLUDES RESETS FOR THE DEFAULT FIELDSET AND LEGEND STYLES) */

/*
 fieldset {
	 margin: 0;
	 padding: 2rem;
	 box-sizing: border-box;
	 display: block;
	 border: none;
	 border: solid 1px #ccc;
	 min-width: 0;
	 background-color: #fff;
}
*/

fieldset{
    float:left;
    border:none;
}
fieldset legend{float:left;margin-top: 8px;}

#fieldset-fasada, #fieldset-pohlad{    
    margin-top: 55px;
}
#fieldset-kridlo{margin-top:62px;margin-left: -150px;}

@media only screen and (max-width: 675px) {
    #top-menu fieldset
    {
        margin-top:0px;
    }  
}




/* TOGGLE STYLING */

.toggle#toggle-pohlad{margin-top:5px;}
 .toggle {
	 margin: 0 0 0rem;
	 box-sizing: border-box;
	 font-size: 0;
	 display: flex;
	 flex-flow: row nowrap;
	 justify-content: flex-start;
	 align-items: stretch;
}
 .toggle input {
	 width: 0;
	 height: 0;
	 position: absolute;
	 left: -9999px;
}
 .toggle input + label {
	 margin: 0;
	 padding: 0.2em 0rem;
         width:93px;
	 box-sizing: border-box;
	 position: relative;
	 display: inline-block;
	 border: solid 1px #ddd;
	 background-color: #fff;
	 font-size: 0.9rem;
	 /*line-height: 140%;*/
	 font-weight: bold;
	 text-align: center;
	 box-shadow: 0 0 0 rgba(255, 255, 255, 0);
	 transition: border-color 0.15s ease-out, color 0.25s ease-out, background-color 0.15s ease-out, box-shadow 0.15s ease-out;
	/* ADD THESE PROPERTIES TO SWITCH FROM AUTO WIDTH TO FULL WIDTH */
	/*flex: 0 0 50%;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	*/
	/* ----- */
}

#fieldset-orientacia,#fieldset-otvaranie{   
    padding-inline-start: 0px;
    margin-inline-start: 0px;
}
/*
#fieldset-orientacia .toggle input + label {	 
	 padding: 0.5em 0rem;
         width:50px;
}
*/

 .toggle input + label:first-of-type {
	 border-radius: 8px 0 0 8px;
	 border-right: none;
}
 .toggle input + label:last-of-type {
	 border-radius: 0 8px 8px 0;
	 border-left: none;
}

/*

oranz - 8b231d
tm. oranz - a75e00
*/

 .toggle input:hover + label {
	 border-color: #a75e00;
}
 .toggle input:checked + label {
	 background-color: #8b231d;
	 color: #fff;
	 box-shadow: 0 0 10px rgba(140, 35, 30, .5);
	 border-color: #a75e00;
	 z-index: 1;
}
 .toggle input:focus + label {
	 outline: dotted 1px #ccc;
	 outline-offset: 0.45rem;
}
 @media (max-width: 800px) {
	 .toggle input + label {
		 padding: 0.25rem;
		 flex: 0 0 50%;
		 display: flex;
		 justify-content: center;
		 align-items: center;
                 z-index:1;
	}
}
/* STYLING FOR THE STATUS HELPER TEXT FOR THE DEMO */
 .status {
	 margin: 0;
	 font-size: 1rem;
	 font-weight: 400;
}
 .status span {
	 font-weight: 600;
	 color: #b6985a;
}
 .status span:first-of-type {
	 display: inline;
}
 .status span:last-of-type {
	 display: none;
}
 @media (max-width: 800px) {
	 .status span:first-of-type {
		 display: none;
	}
	 .status span:last-of-type {
		 display: inline;
	}
}
 


/*DOPYT*/
#dopyt-div{display:none;}
#dopyt-form label{}
#dopyt-form #dopyt-fieldset{width: 80%;}
#dopyt-form input[type=text]{width: 100%;}
#dopyt-form textarea{width: 100%;}

@media only screen and (max-width: 700px) {
    #dopyt-left, #dopyt-right {width:100%;float:none;}
}

#dopyt-form #dopyt-fieldset-novostavba{
    padding-inline-start: 0px;
}


#lang-buttons{
    position:unset;
    margin-top: 30px;
    margin-left: 30px;    
}    

#lang-buttons a{margin-left:5px;}

#dopyt-button, #print-button, .version-button{
    position:absolute;
    top:5px;
    /*font-style: italic;*/
    padding-left:50px;
    color:#8b231d;
    background-color:#FFF;
    font-weight: bold;;
    /*margin:2px 0px 0px 30px;*/
    border-radius: 8px;    
    height:46px;
    float: right;
}

.version-button {
    right:130px;
    top:20px;
    /*background-image: url(../images/print2.png); background-repeat: no-repeat;*/
    background-position-y: 4px;
    background-position-x: 6px;
    background-size: 80%;    
    line-height: 1.4em;
    text-align: center;
    padding: 0px 15px;
    border: 1px solid #c5c5c5;
    cursor: pointer;
    
    
    background-color:#ffd966;
   
}

.version-button:hover {
    color:#FFF;
    background-color:#8b231d;
}


#print-button {
    right:40px;
    top:20px;
    background-image: url(../images/print2.png); background-repeat: no-repeat;
    background-position-y: 4px;
    background-position-x: 6px;
    background-size: 80%;
}

#print-button:hover{    
    background-color:#8b231d;color:white;    
    background-image: url(../images/print1.png);
}




@media only screen and (max-width: 1150px) {
    #dopyt-button, #print-button{
        top:120px;
    }  
}

@media only screen and (max-width: 700px) {
    #dopyt-button, #print-button{
        top:97%;
    }  
}

@media only screen and (hover: none) and (pointer: coarse){
    #print-button{
        display:none;
    }  
}



#dopyt-button {
    right:20px;
    background-image: url(../images/dopyt22.png); background-repeat: no-repeat;
    background-position-y: 5px;
    background-position-x: 3px;
    background-size: 20%;
}

#dopyt-button:hover{    
    background-color:#8b231d;color:white;    
    background-image: url(../images/dopyt11.png);
}

/* Change autocomplete styles in WebKit */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #eee inset;
}


input:focus, textarea:focus {
    outline: none !important;
    border:1px solid #8b231d;
    box-shadow: 0 0 5px #ffc57c;
}
::selection {
    color: white;  
    background-color: #8b231d;
}

img.lang-button{
    height:20px;
    width:40px;
    background-color:inherit;color:white; 
}



#dvere-dopyt{float: left;}

div.dopyt-wrapper{float:left!important;width:50%;}

button.submit-button{background-color:#8b231d!important;color:white;}

label.error{color:red;}


div#footer{text-align: center;width: 100%;margin-top: 20px;font-size: 0.8em;line-height: 1.5;}


#dvere-info{margin-left: 5%;
    width: 80%;
    background-color: white;
    padding: 5px;
    text-align: center;
    display: none;
}