/*
Copyright bluedoc GmbH


*/
/* 
    Created on : 06.03.2020, 14:02:04
    Author     : Markus Löffler
*/


/*
sectiontabbackground
sectiontabfont
sectiontabunderline

buttonbackground
buttonfont
buttonhover

closebuttonbackground
closebuttonfont
closebuttonhover

akkordiontitlebackground
akkordiontitlefont

selectmenubackground

multipleselectitembackground
multipleselectitemfont
multipleselectitemfonthover
multipleselectitembackgroundhover
*/

.csszoom {
    overflow:hidden;
}
.csszoom img:hover {
    transform: scale(4);
}
.csszoom img {
  transition: transform 5s ease;
}

.gridrow {
  text-align: left;
}

/* Style the tab */
.pktab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: rgb(var(--accordiontitlebackground));
  border-radius:3px 3px 0px 0px;
}

/* Style the buttons inside the tab */
.pktab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

.pktab button.pktablinks {
    font-size:13px;
    text-transform: uppercase;
    color:#fff;
    font-weight:400;
    padding:15px 7px !important;
}

/* Change background color of buttons on hover */
.pktab button:hover {
  background-color: rgb(var(--akkordiontitlebackground));
  color:rgb(var(--accordiontitlefont));
}

/* Create an active/current tablink class */
.pktab button.active {
  background-color: rgb(var(--accordiontitlebackground));
  color:rgb(var(--accordiontitlefont));
}

/* Style the tab content */
.pktabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  border-radius:0px 0px 3px 3px;
}


/*accordion*/
.pkaccordion {
    box-sizing: border-box;
    display: flex;
    font-family: Arial, Helvetica, sans-serif;
    overflow: hidden;
    width: 100%;
}

.pkaccordion-select {
    cursor: pointer;
    margin: 0;
    opacity: 0;
    z-index: 1;
}

.pkaccordion-title {
    position: relative;
    
}

.pkaccordion-title:not(:nth-last-child(2))::after {
    border: 1px solid transparent;
    bottom: 0;
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.pkaccordion-title span {
    bottom: 0px;
    box-sizing: border-box;
    display: block;
    position: absolute;
    white-space: nowrap;
    width: 100%;
}

.pkaccordion-content {
    box-sizing: border-box;
    overflow: auto;
    position: relative;
    transition: margin 0.3s ease 0.1s;
}

.pkaccordion-select:checked + .pkaccordion-title + .pkaccordion-content {
    margin-bottom: 0;
    margin-right: 0;
}

/* Generated styles starts here */

.pkaccordion {
    border-color: rgb(211, 211, 211);
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    flex-direction: column;
    height: auto;
} 

.pkaccordion-title,
.pkaccordion-select  {
    background-color: rgb(var(--accordiontitlebackground));
    color: rgb(var(--accordiontitlefont));
    width: 100%;
    height: 37px;
    font-size: 15px;
}

.pkaccordion-select {
    margin-bottom: -37px;
    margin-right: -65px;
}

.pkaccordion-title:not(:nth-last-child(2))::after {
    border-bottom-color: rgb(211, 211, 211);
    border-right-color: transparent;
} 

.pkaccordion-select:hover + .pkaccordion-title,
.pkaccordion-select:checked + .pkaccordion-title {
    background-color: rgb(var(--accordiontitlebackgroundhover));
} 

 .pkaccordion-title span  {	
    transform: rotate(0deg);
    -ms-writing-mode: lr-tb;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
    padding-left: 15px;
    padding-right: 15px;
    line-height: 37px;
} 

.pkaccordion-content {
    background-color: #fff;
    color: #7f8787;
    height: 225px;
    margin-bottom: -225px;
    margin-right: 0;
    padding: 15px;
    width: 100%;
} 







.pktoggle {
    height:0px;
    line-height:0px;
}
@media (min-width: 768px) {
    .pktogglelongdescription {
        position:absolute;
        max-width:600px;
        max-height: 600px;
        overflow:scroll;
        hyphens: auto;
        background-color: rgba(235, 235, 235, 0.99);
        padding:20px;
        box-shadow: 10px 10px 25px -6px rgba(0,0,0,0.75);
        z-index:9999;
        border-radius:3px;
    }
}

@media (max-width: 767px) {
    .pktogglelongdescription {
        position:absolute; 
        max-width:600px;
        hyphens: auto;
        background-color: rgba(235, 235, 235, 0.99);
        padding:20px;
        box-shadow: 10px 10px 25px -6px rgba(0,0,0,0.75);
        z-index:9999;
        border-radius:3px;
    }
}

.pkImageCell {
    text-align: left;
    width: 300px;
    margin: 5px 5px 5px 0px;
    padding: 0px;
    vertical-align: top;
    max-height:350px;
    max-width:100%;
}
.pkImageCell video,.pkImageCell img  {
     max-height:350px;
}

#optionen .pkImageCell, #zubehoer .pkImageCell {
    height:150px;
    background-color: rgb(var(--optionsbackground));
    overflow:hidden;
    position: relative;
    border-radius:3px;
}
#optionen .pkImageCell img,#zubehoer .pkImageCell img {
    max-width:90%;
    max-height:90%;
    object-fit: contain;
    position: absolute;
    margin: auto;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    box-shadow: inset 0px 0px 5px 5px rgba(var(--optionsbackground),0.5);
}

.pksBestseller {
    padding:5px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(var(--bestsellerframe));
    border-radius:3px;
    height:400px;
    position: relative;
}
.pksBestseller:before {
    content:"BESTSELLER";
    color: rgb(var(--bestsellerframe));
    position:absolute;
    right:5px;
    top:5px;
}
.pkCellMargin {
    margin-bottom: 50px;
}

.pksStandard {
    padding:5px;
    border-width: 1px;
    border-style: solid;
    border-color: #efefef;
    border-radius:3px;
    height:400px;
    position: relative;
}
.pksHover {
    border-radius:3px;
    position: absolute; 
    width: 100%; 
    height: 100%; 
    bottom: 0;
    left: 0;
    z-index: 2; 
    cursor: pointer; 
}
.pksHover:hover {
    background-color: rgba(0,0,0,0.15); 
    cursor: pointer; /* Add a pointer on hover */
}
.pksHoverCheck:hover {
    background-image: url("images/check-circle-regular.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50px 50px;
}
.pksHoverInfo:hover {
    background-image: url("images/info-circle.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50px 50px;
}
.pksHoverSelected {
    background-image: url("images/check-circle-regular.png");
    background-color: rgba(var(--optionsselected),0.4); 
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50px 50px;
}

.pksButton {
    border-radius:3px;
    margin-right:5px;
    margin-top:5px;
    padding: .6180469716em 1.41575em;
    font-weight: 600;
    font-size:15px;
    border:none;
    background-color: #ddd;
}
.pksButton:hover {
    background-color: #bbb;
}

.pksButtonActive {
    background-color: rgb(var(--buttonbackground));
    border:none;
    color:rgb(var(--buttonfont));
}
.pksButtonActive:hover {
   background-color: rgb(var(--buttonhover));
   color:rgb(var(--buttonfont));
   border:none;
}
.pksButton:active {
    border:none;
}
.pksButtonClose {
    background-color: rgb(var(--closebuttonbackground));
    border:none;
    color:rgb(var(--closebuttonfont));
    float:right;
}
.pksButtonClose:hover {
    background-color: rgb(var(--closebuttonhover));
}

.pksButtonRight{
/*    float:right;*/
}

.pksSpacer {
    width:100%;
    height:30px;
    display:block;
    clear:both;
}
.bittewarten {
    background-image: url("images/loading.gif");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50px 50px;
    position: fixed; /* Sit on top of the page content */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background-color: rgba(0,0,0,0.3);  Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}
a:focus, .button:focus, .button.alt:focus, .button.added_to_cart:focus, .button.wc-forward:focus, button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, input[type="text"]:focus  {
    outline: none; 
}

@media (min-width: 768px) {
    .pkCollectionContainer {
        width:16.6666%;
        padding-top: 16.6666%;
    }
}
@media (max-width: 767px) {
    .pkCollectionContainer {
        width:33.3333%;
        padding-top: 33.3333%;
    }
}
/*.pkCollectionCell img {
    border:0;
}*/
.pkCollectionContainer {
    display:inline-block;
    position: relative;
}
.pkCollectionMatrix {
   line-height:1.5em;
}
.pkCollectionCell {
    top:0;
    left:0;
    height: 100%;
    width: 100%;
    border-radius:3px;
    border: 1px solid #eee;
    position: absolute;
}
.pkCollectionCell img {
   height: 100%;
   width: 100%; 
}

.pkCollectionBestseller {
    border: 1px solid rgb(var(--bestsellerframe)) !important;
}
.pkCollectionBestseller:before {
    content:"BESTSELLER";
    color: rgb(var(--bestsellerframe));
    background-color:#fff;
    padding:3px;
    border-radius:3px;
    position:absolute;
    right:5px;
    top:5px;
}

.pkCollectionIcons {
    position:absolute;
    bottom:5px;
    left:5px;
    width:95%;
}
.pkCollectionIcons img {
    display:inline-block;
    width:11%;
    
}
.pkCollectionText {
    position:absolute;
    background-color:rgb(255,255,255,0.5);
    color:#000;
    bottom:35px;
    left:5px;
    font-size:12px;
    line-height:12px;
    max-width:95%;
    padding:3px;
    border-radius:3px;
}
.pkCollectionInfo {
    border-radius:3px;
    position:fixed;
    z-index:999999999999999;
    padding:10px 10px 10px 10px;
}
.pkCollectionInfoImage {
    max-height: 700px;
    max-width: 100%;
}
@media (min-width: 1200px) {
    .pkCollectionInfo {
        width:1150px;
        left: 50%;
        margin-left:-575px;
        top: 10%;
        height:87%;
        padding-bottom: 35px;
        box-shadow: 5px 3px 16px 0px rgba(0,0,0,0.75);
        background-color:rgb(235,235,235,0.98);
     }
    .pkCollectionInfoDescription {
        height:87%;
        overflow-y: scroll;
        overflow-x: hidden;
    }
}
@media (min-height: 900px) {
   .pkCollectionInfo {
        height:800px;
   }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .pkCollectionInfo {
        width:90vw;
        left: 5%;
        top: 10%;
        height:87%;
        padding-bottom: 35px;
        box-shadow: 5px 3px 16px 0px rgba(0,0,0,0.75);
        background-color:rgb(235,235,235,0.98);
     }
    .pkCollectionInfoDescription {
        height:87%;
        overflow-y: scroll;
        overflow-x: hidden;
    }
}
@media (max-width: 767px) {
    .pkCollectionInfo {
        background-color:rgb(235,235,235,1);
        width:100vw;
        max-width:100%;
        left:0;
        top:0;
        height:100%;
        box-shadow: none;
        overflow:auto;
        /*padding-top:120px; für enfold mit fixed header*/
    }
    .pkCollectionInfo h2 {
        margin-top:40px;
    }
}
.pkCollectionInfoIcons td img {
    display:inline-block;
    max-width:25px;
    max-height:25px;
    margin-right:5px;
    vertical-align: middle;
}
.pkCollectionInfoIcons td {
    line-height:1em;
    vertical-align: middle;
    padding:3px 0px;
}
.pkCollectionInfoIcons table {
    width:auto;
}
.pkCollectionInfoIcons,.pkCollectionInfoIcons tbody,.pkCollectionInfoIcons tr, .pkCollectionInfoIcons table,.pkCollectionInfoIcons td{
    background:none;
    background-color:transparent !important;
}

.pkCollectionSelected {
    position:relative;
}

.pkCollectionPropertyIcon {
    display:inline-block;
    width:20px;
    position: relative;
    /*bottom: -0.2em;*/
    margin-bottom:3px;
    vertical-align: middle;
}

.select2-selection__choice img {
    margin-bottom:0px;
}
.select2-selection__choice__remove {
    font-size:200%;
    line-height:26px;
    vertical-align: middle;
}
.select2-selection__choice {
    background-color:rgb(var(--multipleselectitembackground)) !important;
    border:0 !important;
    border-radius:3px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    background-color:rgb(var(--multipleselectitembackground)) !important;
}
.select2-container--default .select2-results__option--selected {
    background-color: rgba(var(--multipleselectitembackgroundhover),0.7) !important;
    color:rgb(var(--multipleselectitemfont));
}
.select2-selection__choice__remove,.select2-selection__choice {
    color: rgb(var(--multipleselectitemfont)) !important;
}
.select2-selection__choice__remove:hover,.select2-selection__choice:hover {
    color: rgb(var(--multipleselectitemfonthover)) !important;
    background-color:rgb(var(--multipleselectitembackgroundhover)) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: rgb(var(--multipleselectitembackground)) !important;
    color: rgb(var(--multipleselectitemfont)) !important;
}
.select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option[data-selected=true] {
    background-color: rgb(var(--multipleselectitembackground)) !important;
}

.select2-dropdown.select2-dropdown--below {
    margin-top: 0px;
}

ul.select2-selection__rendered {
  padding-inline-start: 0px;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin: 0px;
}
li.select2-selection__choice {
    margin: 0px;
}

/* Style the search field */
div.pksearch input[type=text] {
  padding: 10px;
  font-size: 17px;
  border: 1px solid #aaa;
  float: left;
  width: calc(100% - 49px);
  background: #f1f1f1;
  border-radius:3px 0px 0px 3px !important;
  height:49px;
  max-height:49px;
}
/*div.pksearch input:focus {
    box-shadow: 0 0 1pt 2pt var(--themecolor1);
}*/

/* Style the submit button */
div.pksearch button {
  float: left;
  width: 49px;
  max-width:49px;
  height:49px;
  max-height:49px;
  padding: 0px 10px 0px 10px;
  background: rgb(var(--buttonbackground));
  color: rgb(var(--buttonfont));
  font-size: 17px;
  border: 1px solid #aaa;
  border-left: none; /* Prevent double borders */
  cursor: pointer;
  border-radius:0px 3px 3px 0px !important;
  margin-right: 0px !important;
  line-height: 1em !important;
  vertical-align:middle;
}

div.pksearch button:hover {
  background: rgb(var(--buttonhover));
}
i.pksearchicon {
    margin-top:3px;
    display:inline-block;
    width:19px;
    height:19px;
    background-image: url("images/search.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 19px 19px;
}

/* Clear floats */
div.pksearch::after {
  content: "";
  clear: both;
  display: table;
}

.pkMessage {
    font-weight:bold;
    width:100%;
    text-align:center;
}


input::-webkit-input-placeholder { /* WebKit browsers */
  text-indent: 3px;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  text-indent: 3px;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
 text-indent: 3px;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
  text-indent: 3px;
}


.pkcTable {
    background: none;
    border:0;
    padding: 0px;
    margin: 0px;
    width:auto !important;
}

.pkcTable td,.pkcTable tbody {
    border:0;
    padding: 2px 35px 2px 0px !important;
    margin: 0px;
    background: none !important;
    width:auto !important;
    line-height:1em;
    vertical-align: bottom;
}
.pkcTable tr th:first-child, .pkcTable tr td:first-child, 
  .pkcTable tr td:nth-child(even), .pkcTable tr td:nth-child(odd), .pkcTable tr td:last-child  {
    border:0;
    padding: 0px;
    margin: 0px;
    color: rgb(145, 145, 145);
}
.pkcTable tr td:nth-child(2) {
    text-align:right;
}


.pkMassInput {
    margin-bottom:3px;
}
.pkMassDescription {
    width:20px;
    display:inline-block;
}
.pkMassInput input {
    width: 80px !important;
    text-align: right !important;
    display: inline !important;
    border: 1px solid #ccc;
    border-radius:3px;
    background-color: rgb(var(--selectmenubackground));
    color:rgb(var(--selectmenufont));
    font-weight:bold;
}
#Breite, #Hoehe {
    width: 45px !important;
    text-align: right !important;
    display: inline !important;
}
.pkMassInputBold {
    font-weight: bold;
}
.pkAbmessungenfehler {
  font-weight:normal;
  padding: 20px;
  background-color: #f44336;
  color: white;
  border-radius:3px;
  line-height:1.2em;
  margin:15px 0px;
  hyphens: auto;
}
.pkMesshinweise {
  font-weight:normal;
  padding: 20px;
  background-color: rgb(var(--selectmenubackground));
  color:rgb(var(--selectmenufont));
  border-radius:3px;
  line-height:1.2em;
  margin:15px 0px;
  hyphens: auto;
  overflow:auto;
 transition: all 1s ease-out;
    overflow:hidden;
}


.pkMesshinweise a {
    display:block;
    background-color: rgb(var(--buttonbackground));
    color:rgb(var(--buttonfont));
    border-radius:3px;
    margin-right:5px;
    margin-top:5px;
    transition: all 0.3s ease-out;
    padding:5px;
    width:100%;
    text-align:center;
    text-decoration: none !important;
}


.pkMesshinweise a:hover {
   background-color: rgb(var(--buttonhover));
}

.pkAbmessungenLimits,.pkAbmessungenLimits tr, .pkAbmessungenLimits td {
    background:none;
    background-color:transparent !important;
}
.pkAbmessungenLimits td {
    padding:5px 0px 0px 0px;
    font-weight:bold;
}

.small {
    height: 50px;
    overflow:hidden;
}
.big {
   
}

.pkContainer {
  text-align:left; 
}    

.pkContainer h2 {
    display:block;
    width:100%;
    border-bottom: 1px solid rgb(var(--sectiontabunderline));
    line-height:25px!important;
    vertical-align: bottom;
}
.pkContainer h2 strong{
    display:inline;
    background-color: rgb(var(--sectiontabbackground));
    font-size:13px;
    font-weight:400;
    text-transform: uppercase;
    padding: 5px 15px;
    color:rgb(var(--sectiontabfont));
    border-radius:3px 3px 0px 0px;
    letter-spacing: 2px;
}


.pkPreisGesamt {
	font-size:2em;
	font-weight:bold;	
	margin-bottom: 10px;
	margin-top: 5px;
}
.pkPreisOption {
	font-size:1.5em;
	font-weight:bold;	
	margin-top: 5px;
}

.pkMWSt {
	font-size:0.6em;
}
.pkPreisAnfrage {
	font-size:1.5em;	
}
.pkPreisAuswahl {
	margin-top: 5px;
	font-size:1.3em;
	font-weight:bold;		
}
.pkPreisContainer {
    background-color: rgb(var(--selectmenubackground));
    border:none;
    color:rgb(var(--selectmenufont));
    padding:15px;
    border-radius:3px;
    width:400px;
    margin-bottom:30px;
}
#pkFormAddToCart input {
    width: 50px !important;
    text-align: right !important;
    display: inline !important;
    border: 1px solid #ccc;
    border-radius:3px;
    font-weight:bold;
    background-color: rgb(var(--selectmenubackground));
    color:rgb(var(--selectmenufont));
}



.pkOptionenText {
    position:absolute;
    background-color:rgb(255,255,255,0.9);
    color:#000;
    bottom:5px;
    left:5px;
    font-size:12px;
    line-height:12px;
    max-width:95%;
    padding:3px;
    border-radius:3px;
    hyphens: auto;
    z-index: 3;
}


.pkDachfensterauswahl {
    margin-bottom:30px;
}

/*jquery.multilineSelectmenu.css*/




.ui-selectmenu-menu-item-image {
    max-height:150px;
    max-width:120px;
    float:left;
    margin-right:20px;
}
.ui-selectmenu-menu-div {
    display:block;
    white-space:normal;
    min-height:150px;
}

.ui-state-focus,.ui-state-hover {
    background:rgb(var(--selectmenubackground)) !important;
    background-image:none !important;
}



.ui-selectmenu-button {
    background:rgb(var(--selectmenubackground)) !important;
    background-image:none !important;
}
.ui-selectmenu-button.ui-button {
    width:100% !important;
}

.ui-selectmenu-button:before {
    content:'';
    width:100%;
    height:100%;    
    position:absolute;
    left:0;
    top:0;
    background:linear-gradient(transparent 135px, white);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 135px, white);
}

.ui-menu-item {
  border-top: 0.5px solid #ccc; 
  border-bottom: 0.5px solid #ccc;
}
.ui-selectmenu-button:focus {
    outline:none;
}

@media (max-width: 767px) {
  .ui-selectmenu-button .ui-selectmenu-menu-div {
    width:100%;
    max-height:150px;
    overflow:hidden;
    hyphens: auto;
    word-wrap: normal;
  }
  .ui-menu-item .ui-selectmenu-menu-div {
    max-width:100%;
   }
  .ui-menu.ui-widget.ui-widget-content {
  
    max-width:95%;
  }
  
  .ui-selectmenu-menu-item-header {
    font-weight:bold;
    font-size:1em;
    display:block;
    hyphens: auto;
    word-wrap: normal;
   }
   .ui-selectmenu-menu-item-content {
       font-size:1em; 
       hyphens: auto;
       word-wrap: normal;
   }
}
@media (min-width: 768px) {
  .ui-selectmenu-button .ui-selectmenu-menu-div {
    max-width:100%;
    max-height:150px;
    overflow:hidden;
    hyphens: auto;
    word-wrap: normal;
  }


  .ui-selectmenu-menu-item-header {
    font-weight:bold;
    font-size:0.8em;
    display:block;
    hyphens: auto;
   }
   .ui-selectmenu-menu-item-content {
     font-size:0.8em; 
     hyphens: auto;
     word-wrap: normal;
   }
}
@media (min-width: 768px) and (max-width: 991px) {
   .ui-menu.ui-widget.ui-widget-content {
    max-width:95%;
  }
   .ui-menu-item .ui-selectmenu-menu-div {
      max-width:100%;
   }
}
@media (min-width:992px) and (max-width: 1279px) {
   .ui-menu.ui-widget.ui-widget-content {
        
       max-width:310px;
  }
   .ui-menu-item .ui-selectmenu-menu-div {
        max-width:100%;
   }
}
@media (min-width:1280px) and (max-width: 1439px) {
   .ui-menu.ui-widget.ui-widget-content {
    max-width:400px;
  }
   .ui-menu-item .ui-selectmenu-menu-div {
        max-width:100%;
   }
}
@media (min-width:1440px) {
   .ui-menu.ui-widget.ui-widget-content {
    max-width:500px;
  }
   .ui-menu-item .ui-selectmenu-menu-div {
        max-width:100%;
   }
}