a, a:active {
    color: #000;
}

a:hover, a:focus {
    color: #83b719;
}

a.deactivated {
    color: #c0c0c0;
    pointer-events: none;
}

:focus:not(:focus-visible) {
    color: #000;
    outline: 0;
    box-shadow: none;
}

html, body
{
    height:100%;
    width:100%;
    overflow:auto;
}

@media screen and (min-width: 1900px) {
    .grid-container {
        max-width: 1600px;
    }
}
@media screen and (max-width: 1899px) {
    .grid-container {
        max-width: 1400px;
    }
}

hr {
    background-color: #000;
    border: 0 none;
    color: #000;
    height: 2px;
}

.tablet-fixed {
    display: block;
    position: sticky;
    top: 0;
}

.menu a {
    padding: 5px 8px;
}

#picture-export {
    background-color: #ffffff;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 999997;
}

#part-window {
    background-color: rgba(0,0,0,0.7);
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 999997;
}

#list-container {
    display: block;
    position: relative;
    background-color: #ffffff;
    border: 1px solid #c0c0c0;
    margin: 40px 50px 20px;
    padding: 20px;
}

#picture-overlay {
    background-color: rgba(255,255,255,0.90);
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 999998;
}

#picture-container {
    background-color: transparent;
    display: block;
    position: relative;
    margin: 75px auto 0;
    padding: 50px;
}

#png-picture {
    background-color: transparent;
    display: block;
    position: relative;
    margin: -100px auto 0;
}

a.disabled {
    pointer-events: none;
    cursor: default;
}

#picture-preloader {
    background-color: transparent;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 999999;
}

.preloader {
    background-color: transparent;
    display: block;
    position: relative;
    margin: 250px auto 0;
}

#close-export {
    display: block;
    position: absolute;
    top: 20px;
    right: 30px;
    z-index: 999999;
}

#picture-nav {
    display: block;
    position: absolute;
    top: 15px;
    left: 0; 
    right: 0; 
    margin-inline: auto; 
    width: fit-content;
    z-index: 999999;
}

.category-block {
    display: block;
    float: left;
    margin: 0 0 20px 10px;
    width: auto;
}

.category-block-center {
    display: block;
    float: left;
    margin: 0 0 20px 10px;
    width: auto;
    text-align: center;
}

.category-name {
    background-color: #5b7953;
    color: #ffffff;
    display: block;
    font-size: 10px;
    margin: 0 0 10px 0;
    padding: 2px 3px;
    text-align: center;
}

.pattern-btn {
    display: inline-block;
    position: relative;
    border: 1px solid #c0c0c0;
    border-radius: 50px;
    margin: 0 7px 5px;
    width: 50px;
    height: 50px;
}

.placeholder {
    display: block;
    height: 115px;
    position: relative;
    width: 115px;
}

.placeholder-ap {
    display: block;
    height: 115px;
    position: relative;
    width: 115px;
}

.configurator-ui-boxes-bottom {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-color: #c0c0c0;
    border-width: 1px;
    box-shadow: 3px 3px 5px #333333;
}

.configurator-ui-boxes-top {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-color: #c0c0c0;
    border-width: 1px;
    box-shadow: 3px 3px 5px #333333;
}

.ui-no-border {
    border: 0;
}

#accMenu .ui-accordion-header {
    background-color: #ccc;
    border-color: #000;
    border-bottom: 1px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    margin: 0px;
    padding: 10px 15px;
}

#accMenu .ui-accordion-content {
    width: 100%;
    background-color: #f3f3f3;
    color: #777;
    font-size: 14px;
    height: 100%;
    overflow: auto;
    padding: 15px;
}

#ap-selector {
    display: block;
    position: relative;
}

#thewall {
    display: block;
    position: relative;
    background-image: url("../images/raufaser.png");
    background-size: 5%;
    background-repeat: repeat;
    padding: 0;
    margin: 0 auto;
}

#h-measurement {
    margin: 0 auto;
}

.thewallrow {
    display: block;
    position: relative;
}

.pl-padding {
    padding: 0 90px 0 0;
}

#thegrid {
    display: block;
    margin: 0 auto;
    padding: 0;
    overflow: visible;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

#wallwidth, #wallheight {
    font-weight: bold;
    font-size: 14px;
    padding: 0 15px;
}

#tools {
    background-color: #fff;
    border: 1px solid #c0c0c0;
}

#tools .separator {
    border-right: 1px solid #c0c0c0;
}

.grid-hoover {
    background: rgba(200,200,200,0.75);
}

#ap-options {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999;
}

.apo1027 {
    height: 200%;
    width: 100%;
}

.apoq1027 {
    height: 100%;
    width: 200%;
}

.apo507 {
    height: 100%;
    width: 100%;
}

.apoq507 {
    height: 100%;
    width: 100%;
}

#ap-marker {
    display: block;
    outline: 2px dashed #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999;
}

.apm1040 {
    height: 200%;
    width: 100%;
}

.apmq1040 {
    height: 100%;
    width: 200%;
}

.apm520 {
    height: 100%;
    width: 100%;
}

.apmq520 {
    height: 100%;
    width: 100%;
}

.rotated180 {
    transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}

.rotated90 {
    transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}

.rotated270 {
    transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -o-transform: rotate(270deg);
}

.btn-ap-cn-top {
    cursor: crosshair;
    display: block;
    height: auto;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.btn-ap-cn-bottom {
    cursor: crosshair;
    display: block;
    height: auto;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}

.btn-ap-cn-left {
    cursor: crosshair;
    display: block;
    height: 100%;
    width: auto;
    position: absolute;
    top: 0;
    left: 0;
}

.btn-ap-cn-right {
    cursor: crosshair;
    display: block;
    height: 100%;
    width: auto;
    position: absolute;
    top: 0;
    right: 0;
}

.primary.callout {
    background-color: #ededed;
    font-size: 12px;
}

.secondary.callout {
    background-color: #83b719;
    color: #fff;
    font-size: 12px;
    text-align: center;
}

.button.success, .button.success:focus {
    background-color: #83b719;
    color: #000;
}

.button.success:hover {
    background-color: #73a115;
    color: #000;
}

#messages {
    font-size: 14px;
}

.fi {
    font-size: 24px;
    vertical-align: middle;
    padding: 2px 0;
}

.drag-div {
    display: block;
    position: relative;
    padding: 5px;
}

.drag-ap {
    width: 100%;
    height: auto;
    z-index: 9999;
}

.dropped-ap {
    position: relative;
}

.hq520 {
    margin: 0;
}

.h1027 {
    margin-top: 100%;
}

.q1027 {
    margin-left: 100%;
}

.h1040 {
    margin-top: 100%;
}

.q1040 {
    margin-left: 100%;
}

.drag-grid {
    align-items: center;
    display: flex;
    justify-content: center;
}

.apcol {
    float: left;
    outline: 1px solid #c0c0c0;
    outline-color: rgba(0,0,0,0.1);
    overflow: visible;
    position: relative;
}

.move-ap {
    z-index: 10009 !important;
}

.bg-green {
    background-color: #008000;
}

.align-right {
    float: right;
}

.clear {
    clear: both;
}

.spacer10 {
    margin-top: 10px;
}

.spacer30 {
    margin-top: 30px;
}

#colors {
    display: block;
    padding: 10px 0;
    position: relative;
}

#patterns {
    display: block;
    padding: 10px 0;
    position: relative;
}

.color-btn {
    display: block;
    float: left;
    position: relative;
    border: 1px solid #c0c0c0;
    border-radius: 40px;
    margin: 0 5px 5px 0;
    width: 40px;
    height: 40px;
}

.moos {
    background-image: url("../images/c_moos.png");
}

.flora {
    background-image: url("../images/c_design_flora.png");
}

.nflora {
    background-image: url("../images/c_nature_design_flora.png");
}

.davert-oak {
    background-image: url("../images/c_davert_oak.png");
}

.fanal-oak {
    background-image: url("../images/c_fanal_oak.png");
}

.letea-oak {
    background-image: url("../images/c_letea_oak.png");
}

.oulanka-oak {
    background-image: url("../images/c_oulanka_oak.png");
}

.nature-oak {
    background-image: url("../images/c_nature_oak.png");
}

.walnut {
    background-image: url("../images/c_walnut.png");
}

.teak {
    background-image: url("../images/c_teak.png");
}

.green {
    color: #008000;
}

.raufaser {
    background-image: url("../images/raufaser.png");
}

.beere-lila {
    background-color: rgba(135,73,98,1);
}

.pink-lila {
    background-color: rgba(185,72,126,1);
}

.violett-lila {
    background-color: rgba(145,109,145,1);
}

.vanille-beige {
    background-color: rgba(247,240,224,1);
}

.havanna-beige {
    background-color: rgba(230,215,192,1);
}

.creme-beige {
    background-color: rgba(250,232,208,1);
}

.weiss-beige {
    background-color: rgba(238,231,225,1);
}

.white {
    background-color: rgba(255,255,255,1);
}

.braun-ocker {
    background-color: rgba(196,140,117,1);
}

.aprikose-braun {
    background-color: rgba(247,204,153,1);
}

.gelb-beige {
    background-color: rgba(249,219,157,1);
}

.c-gelb {
    background-color: rgba(238,198,77,1);
}

.orange-gelb {
    background-color: rgba(255,178,62,1);
}

.dunkel-rot {
    background-color: rgba(175,60,53,1);
}

.hell-braun {
    background-color: rgba(176,142,115,1);
}

.erd-braun {
    background-color: rgba(122,104,94,1);
}

.dunkel-grau {
    background-color: rgba(93,90,85,1);
}

.hell-grau {
    background-color: rgba(219,218,223,1);
}

.grau {
    background-color: rgba(198,195,190,1);
}

.apfel-gruen {
    background-color: rgba(202,231,151,1);
}

.gelb-gruen {
    background-color: rgba(222,231,112,1);
}

.limette-gruen {
    background-color: rgba(142,197,103,1);
}

.dunkel-gruen {
    background-color: rgba(161,175,142,1);
}

.hell-blau {
    background-color: rgba(165,224,222,1);
}

.petrol-blau {
    background-color: rgba(0,130,152,1);
}

.schwarz {
    background-color: rgba(0,0,0,1);
}

.ico-arrow-down {
    background-image: url("../images/ico-arrow-down.png");
    display: block;
    float: left;
    height: 15px;
    margin-right: 10px;
    position: relative;
    width: 15px;
}

.ico-arrow-right {
    background-image: url("../images/ico-arrow-right.png");
    display: block;
    float: left;
    height: 15px;
    margin-right: 10px;
    position: relative;
    width: 15px;
}

.logo {
    display: block;
    position: relative;
    margin: 5px auto 10px;
}

.title {
    color: #a3a3a3;
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1.875rem;
    margin: 15px 0;
    text-transform: uppercase;
}


@media screen and (max-width: 780px) {
    .cookie-window {
        width: 85%;
    }
    .menu li {
        font-size: 10px;
    }
    .menu a,
    .menu .button {
        padding: 0.7rem 0.7rem;
    }
}

@media screen and (min-width: 781px) {
    .cookie-window {
        width: 60%;
    }
}

#cookie-overlay {
    background-color: rgba(200,200,200,0.5);
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.cookie-window {
    background: #fff;
    box-shadow: 10px 10px 5px #c0c0c0;
    display: block;
    margin: 85px auto 0;
    position: relative;
}

.cookie-info {
    display: inline-block;
    position: relative;
    margin: 45px;
}

.rotate2vert {
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

#wallheight {
    display: block;
    position: absolute;
    white-space: nowrap;
    left: -22px;
    top: 48%;
}

.wallhmeasure {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
}

.measure-top {
    display: block;
    position: absolute;
    top: 0;
    height: 40%;
}

.measure-bottom {
    display: block;
    position: absolute;
    bottom: 0;
    height: 40%;
}

.measure-bottom-end {
    display: block;
    position: absolute;
    bottom: 0;
    height: 16px;
    margin: 0;
    padding: 0;
}

.z17, .z18, .z19, .z20, .z21, .z22, .z23, .z24, .z25, .z26, .z27, .z28, .z29, .z30, .z31, .z32, .z33, .z34 {
    z-index: 10001;
}

.z35, .z36, .z37, .z38, .z39, .z40, .z41, .z42, .z43, .z44, .z45, .z46, .z47, .z48, .z49, .z50, .z51, .z52 {
    z-index: 10002;
}

.z1, .z2, .z3, .z4, .z5, .z6, .z7, .z8, .z9, .z10, .z11, .z12, .z13, .z14, .z15, .z16 {
    z-index: 10003;
}

.z53, .z54, .z55, .z56, .z57, .z58, .z60, .z64, .z65 {
    z-index: 10004;
}

.z59, .z61, .z62, .z63, .z67, .z68, .z69, .z74 {
    z-index: 10005;
}

.z66, .z70, .z71, .z72, .z73, .z75, .z76 {
    z-index: 10006;
}

.z75 {
    margin-left: 11px;
    margin-top: 25px;
}

.black-back {
    background-color: #000000;
}

.apcol-pe {
    background-color: transparent;
    float: left;
    overflow: visible;
    position: relative;
}

.apcol-background {
    background-color: #000;
}

.pe-as-block {
    position: relative;
    display: block;
}

.part-h520, .part-h507 {
    height: auto;
    width: 260px;
    z-index: 20001;
}

.part-q1027, .part-q1040 {
    height: 260px;
    width: auto;
    margin-left: 100%;
    z-index: 20001;
}

.part-q507 {
    height: 260px;
    width: auto;
    z-index: 20001;
}

.part-h1027, .part-h1040 {
    height: auto;
    width: 260px;
    margin-top: 100%;
    z-index: 20001;
}

.iid-30 {
    height: auto;
    width: 259px;
    z-index: 20003;
}

.iid-53, .iid-54, .iid-55, .iid-56 {
    height: auto;
    width: 270px;
    margin-left: -2px;
    margin-top: -2px;
    z-index: 20005;
}

.iid-59, .iid-60, .iid-61 {
    height: auto;
    width: 278px;
    z-index: 20006;
}

.iid-57 {
    height: auto;
    width: 282px;
    z-index: 20006;
}

.iid-58 {
    height: auto;
    width: 275px;
    margin-left: -8px;
    z-index: 20006;
}

.iid-60 {
    height: auto;
    width: 288px;
    margin-top: -2px;
    z-index: 20006;
}

.iid-62 {
    height: auto;
    width: 312px;
    margin-left: -4px;
    margin-top: -3px;
    z-index: 20005;
}

.iid-63 {
    height: auto;
    width: 298px;
    margin-left: -4px;
    margin-top: -4px;
    z-index: 20005;
}

.iid-64, .iid-65 {
    height: auto;
    width: 275px;
    margin-left: -4px;
    margin-top: -2px;
    z-index: 20004;
}

.iid-66 {
    height: auto;
    width: 314px;
    margin-top: -4px;
    z-index: 20007;
}

.iid-67 {
    height: auto;
    width: 287px;
    margin-left: -2px;
    z-index: 20005;
}

.iid-68 {
    height: auto;
    width: 287px;
    margin-left: -5px;
    margin-top: -8px;
    z-index: 20005;
}

.iid-69 {
    height: auto;
    width: 292px;
    margin-left: -2px;
    margin-top: 1px;
    z-index: 20005;
}

.iid-70 {
    height: auto;
    width: 316px;
    margin-left: -10px;
    margin-top: -8px;
    z-index: 20008;
}

.iid-71 {
    height: auto;
    width: 326px;
    margin-left: -8px;
    margin-top: -6px;
    z-index: 20009;
}

.iid-72 {
    height: auto;
    width: 316px;
    margin-top: -8px;
    z-index: 20007;
}

.iid-73 {
    height: auto;
    width: 332px;
    margin-top: -3px;
    z-index: 20008;
}

.iid-74 {
    height: auto;
    width: 292px;
    margin-left: -5px;
    margin-top: -3px;
    z-index: 20005;
}

.iid-75 {
    height: auto;
    width: 324px;
    margin-left: 18px;
    margin-top: 43px;
    z-index: 20010;
}

.iid-76 {
    height: auto;
    width: 337px;
    margin-left: -22px;
    margin-top: -1px;
    z-index: 20008;
}

.connector-top {
    border-top: 7px solid #000;
    border-bottom: none;
    border-left: none;
    border-right: none;
}
.connector-bottom {
    border-bottom: 7px solid #000;
    border-top: none;
    border-left: none;
    border-right: none;
}

.connector-left {
    border-left: 7px solid #000;
    border-bottom: none;
    border-top: none;
    border-right: none;
}

.connector-right {
    border-right: 7px solid #000;
    border-bottom: none;
    border-left: none;
    border-top: none;
}