@charset "UTF-8";

/*
## -----------------------------------------------------------------------------
##
##
##  STYLE SHEET
##                                             
##        Style-Sheet-Definitionen | KONFIGURATOR
##                                                                          
##        SCHEME:      __konfigurator__scheme__                                                
##        AUTHOR:      Carsten Zandecki, mediaMinds internet services
##        URL:         http://www.mediaminds.de
##            
*/


@font-face { font-family: 'OpenSans';
	     src: url('../fonts/opensans/OpenSans-Light-webfont.eot');
	     src: url('../fonts/opensans/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
	          url('../fonts/opensans/OpenSans-Light-webfont.woff') format('woff'),
	          url('../fonts/opensans/OpenSans-Light-webfont.ttf') format('truetype'),
	          url('../fonts/opensans/OpenSans-Light-webfont.svg#webfont') format('svg');
           }

@font-face { font-family: 'OpenSansRegular';
	     src: url('../fonts/opensans/OpenSans-Regular-webfont.eot');
	     src: url('../fonts/opensans/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
	          url('../fonts/opensans/OpenSans-Regular-webfont.woff') format('woff'),
	          url('../fonts/opensans/OpenSans-Regular-webfont.ttf') format('truetype'),
	          url('../fonts/opensans/OpenSans-Regular-webfont.svg#webfont') format('svg');
           }


@font-face { font-family: 'PTSansBold';
	     src: url('../fonts/ptsans_bold/PTS75F-webfont.eot');
	     src: url('../fonts/ptsans_bold/PTS75F-webfont.eot?#iefix') format('embedded-opentype'),
	          url('../fonts/ptsans_bold/PTS75F-webfont.woff') format('woff'),
	          url('../fonts/ptsans_bold/PTS75F-webfont.ttf') format('truetype');
           }

@font-face { font-family: 'PTSans';
	     src: url('../fonts/ptsans_regular/PTS55F-webfont.eot');
	     src: url('../fonts/ptsans_regular/PTS55F-webfont.eot?#iefix') format('embedded-opentype'),
	          url('../fonts/ptsans_regular/PTS55F-webfont.woff') format('woff'),
	          url('../fonts/ptsans_regular/PTS55F-webfont.ttf') format('truetype');
           }

@font-face { font-family: 'PTSansCaptionBold';
	     src: url('../fonts/ptsanscaption_bold/PTC75F-webfont.eot');
	     src: url('../fonts/ptsanscaption_bold/PTC75F-webfont.eot?#iefix') format('embedded-opentype'),
	          url('../fonts/ptsanscaption_bold/PTC75F-webfont.woff') format('woff'),
	          url('../fonts/ptsanscaption_bold/PTC75F-webfont.ttf') format('truetype');
           }

@font-face { font-family: 'PTSansCaption';
	     src: url('../fonts/ptsanscaption_regular/PTC55F-webfont.eot');
	     src: url('../fonts/ptsanscaption_regular/PTC55F-webfont.eot?#iefix') format('embedded-opentype'),
	          url('../fonts/ptsanscaption_regular/PTC55F-webfont.woff') format('woff'),
	          url('../fonts/ptsanscaption_regular/PTC55F-webfont.ttf') format('truetype');
           }



/*******************************************************************************
##
##  LOAD KONFIGURATOR RELEVANT FONTS
##
*/

@font-face { font-family: 'Bank Gothic';
	     src: url('../xkonf/fonts/bankgothic-md-bt-medium-webfont.eot');
	     src: url('../xkonf/fonts/bankgothic-md-bt-medium-webfont.eot?#iefix') format('embedded-opentype'),
	          url('../xkonf/fonts/bankgothic-md-bt-medium-webfont.woff') format('woff'),
	          url('../xkonf/fonts/bankgothic-md-bt-medium.ttf') format('truetype'),
	          url('../xkonf/fonts/bankgothic-md-bt-medium-webfont.svg#webfont') format('svg');
           }

@font-face { font-family: 'Bauhaus Medium';
	     src: url('../xkonf/fonts/bauhaus-medium-webfont.eot');
	     src: url('../xkonf/fonts/bauhaus-medium-webfont.eot?#iefix') format('embedded-opentype'),
	          url('../xkonf/fonts/bauhaus-medium-webfont.woff') format('woff'),
	          url('../xkonf/fonts/bauhaus-medium.ttf') format('truetype'),
	          url('../xkonf/fonts/bauhaus-medium-webfont.svg#webfont') format('svg');
           }

@font-face { font-family: 'Cinzel';
	     src: url('../xkonf/fonts/cinzel-regular-webfont.eot');
	     src: url('../xkonf/fonts/cinzel-regular-webfont.eot?#iefix') format('embedded-opentype'),
	          url('../xkonf/fonts/cinzel-regular-webfont.woff') format('woff'),
	          url('../xkonf/fonts/cinzel-regular.ttf') format('truetype'),
	          url('../xkonf/fonts/cinzel-regular-webfont.svg#webfont') format('svg');
           }

@font-face { font-family: 'Daniel';
	     src: url('../xkonf/fonts/daniel-webfont.eot');
	     src: url('../xkonf/fonts/daniel-webfont.eot?#iefix') format('embedded-opentype'),
	          url('../xkonf/fonts/daniel-webfont.woff') format('woff'),
	          url('../xkonf/fonts/daniel.ttf') format('truetype'),
	          url('../xkonf/fonts/daniel-webfont.svg#webfont') format('svg');
           }


@font-face { font-family: 'DIN Regular';
	     src: url('../xkonf/fonts/din-regular-webfont.eot');
	     src: url('../xkonf/fonts/din-regular-webfont.eot?#iefix') format('embedded-opentype'),
	          url('../xkonf/fonts/din-regular-webfont.woff') format('woff'),
	          url('../xkonf/fonts/din-regular.ttf') format('truetype'),
	          url('../xkonf/fonts/din-regular-webfont.svg#webfont') format('svg');
           }

@font-face { font-family: 'Elemental End';
	     src: url('../xkonf/fonts/elemental-end-webfont.eot');
	     src: url('../xkonf/fonts/elemental-end-webfont.eot?#iefix') format('embedded-opentype'),
	          url('../xkonf/fonts/elemental-end-webfont.woff') format('woff'),
	          url('../xkonf/fonts/elemental-end.ttf') format('truetype'),
	          url('../xkonf/fonts/elemental-end-webfont.svg#webfont') format('svg');
           }

@font-face { font-family: 'Existence Light';
	     src: url('../xkonf/fonts/existence-light-regular-webfont.eot');
	     src: url('../xkonf/fonts/existence-light-webfont.eot?#iefix') format('embedded-opentype'),
	          url('../xkonf/fonts/existence-light-webfont.woff') format('woff'),
	          url('../xkonf/fonts/existence-light.ttf') format('truetype'),
	          url('../xkonf/fonts/existence-light-webfont.svg#webfont') format('svg');
           }

@font-face { font-family: 'Exmouth';
	     src: url('../xkonf/fonts/exmouth-webfont.eot');
	     src: url('../xkonf/fonts/exmouth-webfont.eot?#iefix') format('embedded-opentype'),
	          url('../xkonf/fonts/exmouth-webfont.woff') format('woff'),
	          url('../xkonf/fonts/exmouth.ttf') format('truetype'),
	          url('../xkonf/fonts/exmouth-webfont.svg#webfont') format('svg');
           }

@font-face { font-family: 'Fibel Nord Kontur';
	     src: url('../xkonf/fonts/fibel_nord_kontur-webfont.eot');
	     src: url('../xkonf/fonts/fibel_nord_kontur-webfont.eot?#iefix') format('embedded-opentype'),
	          url('../xkonf/fonts/fibel_nord_kontur-webfont.woff') format('woff'),
	          url('../xkonf/fonts/fibel_nord_kontur.ttf') format('truetype'),
	          url('../xkonf/fonts/fibel_nord_kontur-webfont.svg#webfont') format('svg');
           }

@font-face { font-family: 'Flex Display Thin';
	     src: url('../xkonf/fonts/flex-display-thin-webfont.eot');
	     src: url('../xkonf/fonts/flex-display-thin-webfont.eot?#iefix') format('embedded-opentype'),
	          url('../xkonf/fonts/flex-display-thin-webfont.woff') format('woff'),
	          url('../xkonf/fonts/flex-display-thin.otf') format('truetype'),
	          url('../xkonf/fonts/flex-display-thin-webfont.svg#webfont') format('svg');
           }

@font-face { font-family: 'Monopoly';
	     src: url('../xkonf/fonts/monopoly-webfont.eot');
	     src: url('../xkonf/fonts/monopoly-webfont.eot?#iefix') format('embedded-opentype'),
	          url('../xkonf/fonts/monopoly-webfont.woff') format('woff'),
	          url('../xkonf/fonts/monopoly.ttf') format('truetype'),
	          url('../xkonf/fonts/monopoly-webfont.svg#webfont') format('svg');
           }

@font-face { font-family: 'Old London';
	     src: url('../xkonf/fonts/oldlondon-webfont.eot');
	     src: url('../xkonf/fonts/oldlondon-webfont.eot?#iefix') format('embedded-opentype'),
	          url('../xkonf/fonts/oldlondon-webfont.woff') format('woff'),
	          url('../xkonf/fonts/oldlondon.ttf') format('truetype'),
	          url('../xkonf/fonts/oldlondon-webfont.svg#webfont') format('svg');
           }

/*******************************************************************************
##
##  LOAD KONFIGURATOR VECTORIZABLE FONTS
##
*/

@font-face { /*font-display: swap;*/ font-family: 'SST_BlackOpsOne'; font-style: normal; font-weight: normal; src: url('../xkonf/fonts/Black Ops One/Black-Ops-One-Regular.woff2') format('woff2'), url('../xkonf/fonts/Black Ops One/Black-Ops-One-Regular.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_Bungee'; font-style: normal; font-weight: normal; src: url('../xkonf/fonts/Bungee/Bungee-Regular.woff2') format('woff2'), url('../xkonf/fonts/Bungee/Bungee-Regular.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_CinzelDecorative'; font-style: normal; font-weight: normal; src: url('../xkonf/fonts/Cinzel Decorative/Cinzel-Decorative-Regular.woff2') format('woff2'), url('../xkonf/fonts/Cinzel Decorative/Cinzel-Decorative-Regular.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_CinzelDecorativeBold'; font-style: normal; font-weight: bold; src: url('../xkonf/fonts/Cinzel Decorative/Cinzel-Decorative-Bold.woff2') format('woff2'), url('../xkonf/fonts/Cinzel Decorative/Cinzel-Decorative-Bold.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_CourierPrime'; font-style: normal; font-weight: normal; src: url('../xkonf/fonts/Courier Prime/Courier-Prime-Regular.woff2') format('woff2'), url('../xkonf/fonts/Courier Prime/Courier-Prime-Regular.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_CourierPrimeItalic'; font-style: italic; font-weight: normal; src: url('../xkonf/fonts/Courier Prime/Courier-Prime-Italic.woff2') format('woff2'), url('../xkonf/fonts/Courier Prime/Courier-Prime-Italic.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_CourierPrimeBold'; font-style: normal; font-weight: bold; src: url('../xkonf/fonts/Courier Prime/Courier-Prime-Bold.woff2') format('woff2'), url('../xkonf/fonts/Courier Prime/Courier-Prime-Bold.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_CourierPrimeBoldItalic'; font-style: italic; font-weight: bold; src: url('../xkonf/fonts/Courier Prime/Courier-Prime-BoldItalic.woff2') format('woff2'), url('../xkonf/fonts/Courier Prime/Courier-Prime-BoldItalic.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_DancingScript'; font-style: normal; font-weight: normal; src: url('../xkonf/fonts/Dancing Script/Dancing-Script-Regular.woff2') format('woff2'), url('../xkonf/fonts/Dancing Script/Dancing-Script-Regular.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_DancingScriptBold'; font-style: normal; font-weight: bold; src: url('../xkonf/fonts/Dancing Script/Dancing-Script-Bold.woff2') format('woff2'), url('../xkonf/fonts/Dancing Script/Dancing-Script-Bold.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_ElementalEnd'; font-style: normal; font-weight: normal; src: url('../xkonf/fonts/Elemental End/Elemental-End-Regular.woff2') format('woff2'), url('../xkonf/fonts/Elemental End/Elemental-End-Regular.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_ElementalEndItalic'; font-style: italic; font-weight: normal; src: url('../xkonf/fonts/Elemental End/Elemental-End-Italic.woff2') format('woff2'), url('../xkonf/fonts/Elemental End/Elemental-End-Italic.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_LindenHill'; font-style: normal; font-weight: normal; src: url('../xkonf/fonts/Linden Hill/Linden-Hill-Regular.woff2') format('woff2'), url('../xkonf/fonts/Linden Hill/Linden-Hill-Regular.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_LindenHillItalic'; font-style: italic; font-weight: normal; src: url('../xkonf/fonts/Linden Hill/Linden-Hill-Italic.woff2') format('woff2'), url('../xkonf/fonts/Linden Hill/Linden-Hill-Italic.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_Montserrat'; font-style: normal; font-weight: normal; src: url('../xkonf/fonts/Montserrat/Montserrat-Regular.woff2') format('woff2'), url('../xkonf/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_MontserratItalic'; font-style: italic; font-weight: normal; src: url('../xkonf/fonts/Montserrat/Montserrat-Italic.woff2') format('woff2'), url('../xkonf/fonts/Montserrat/Montserrat-Italic.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_MontserratBold'; font-style: normal; font-weight: bold; src: url('../xkonf/fonts/Montserrat/Montserrat-Bold.woff2') format('woff2'), url('../xkonf/fonts/Montserrat/Montserrat-Bold.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_MontserratBoldItalic'; font-style: italic; font-weight: bold; src: url('../xkonf/fonts/Montserrat/Montserrat-BoldItalic.woff2') format('woff2'), url('../xkonf/fonts/Montserrat/Montserrat-BoldItalic.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_ProtestGuerrilla'; font-style: normal; font-weight: normal; src: url('../xkonf/fonts/Protest Guerrilla/Protest-Guerrilla-Regular.woff2') format('woff2'), url('../xkonf/fonts/Protest Guerrilla/Protest-Guerrilla-Regular.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_SairaStencilOne'; font-style: normal; font-weight: normal; src: url('../xkonf/fonts/Saira Stencil One/Saira-Stencil-One-Regular.woff2') format('woff2'), url('../xkonf/fonts/Saira Stencil One/Saira-Stencil-One-Regular.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_Sansita'; font-style: normal; font-weight: normal; src: url('../xkonf/fonts/Sansita/Sansita-Regular.woff2') format('woff2'), url('../xkonf/fonts/Sansita/Sansita-Regular.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_SansitaItalic'; font-style: italic; font-weight: normal; src: url('../xkonf/fonts/Sansita/Sansita-Italic.woff2') format('woff2'), url('../xkonf/fonts/Sansita/Sansita-Italic.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_SansitaBold'; font-style: normal; font-weight: bold; src: url('../xkonf/fonts/Sansita/Sansita-Bold.woff2') format('woff2'), url('../xkonf/fonts/Sansita/Sansita-Bold.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_SansitaBoldItalic'; font-style: italic; font-weight: bold; src: url('../xkonf/fonts/Sansita/Sansita-BoldItalic.woff2') format('woff2'), url('../xkonf/fonts/Sansita/Sansita-BoldItalic.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_Satisfy'; font-style: normal; font-weight: normal; src: url('../xkonf/fonts/Satisfy/Satisfy-Regular.woff2') format('woff2'), url('../xkonf/fonts/Satisfy/Satisfy-Regular.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_SpaceMono'; font-style: normal; font-weight: normal; src: url('../xkonf/fonts/Space Mono/Space-Mono-Regular.woff2') format('woff2'), url('../xkonf/fonts/Space Mono/Space-Mono-Regular.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_SpaceMonoItalic'; font-style: italic; font-weight: normal; src: url('../xkonf/fonts/Space Mono/Space-Mono-Italic.woff2') format('woff2'), url('../xkonf/fonts/Space Mono/Space-Mono-Italic.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_SpaceMonoBold'; font-style: normal; font-weight: bold; src: url('../xkonf/fonts/Space Mono/Space-Mono-Bold.woff2') format('woff2'), url('../xkonf/fonts/Space Mono/Space-Mono-Bold.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_SpaceMonoBoldItalic'; font-style: italic; font-weight: bold; src: url('../xkonf/fonts/Space Mono/Space-Mono-BoldItalic.woff2') format('woff2'), url('../xkonf/fonts/Space Mono/Space-Mono-BoldItalic.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_Stick'; font-style: normal; font-weight: normal; src: url('../xkonf/fonts/Stick/Stick-Regular.woff2') format('woff2'), url('../xkonf/fonts/Stick/Stick-Regular.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_Tillana'; font-style: normal; font-weight: normal; src: url('../xkonf/fonts/Tillana/Tillana-Regular.woff2') format('woff2'), url('../xkonf/fonts/Tillana/Tillana-Regular.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_TillanaBold'; font-style: normal; font-weight: bold; src: url('../xkonf/fonts/Tillana/Tillana-Bold.woff2') format('woff2'), url('../xkonf/fonts/Tillana/Tillana-Bold.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_Ubuntu'; font-style: normal; font-weight: normal; src: url('../xkonf/fonts/Ubuntu/Ubuntu-Regular.woff2') format('woff2'), url('../xkonf/fonts/Ubuntu/Ubuntu-Regular.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_UbuntuItalic'; font-style: italic; font-weight: normal; src: url('../xkonf/fonts/Ubuntu/Ubuntu-Italic.woff2') format('woff2'), url('../xkonf/fonts/Ubuntu/Ubuntu-Italic.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_UbuntuBold'; font-style: normal; font-weight: bold; src: url('../xkonf/fonts/Ubuntu/Ubuntu-Bold.woff2') format('woff2'), url('../xkonf/fonts/Ubuntu/Ubuntu-Bold.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_UbuntuBoldItalic'; font-style: italic; font-weight: bold; src: url('../xkonf/fonts/Ubuntu/Ubuntu-BoldItalic.woff2') format('woff2'), url('../xkonf/fonts/Ubuntu/Ubuntu-BoldItalic.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_VollkornSC'; font-style: normal; font-weight: normal; src: url('../xkonf/fonts/Vollkorn SC/Vollkorn-SC-Regular.woff2') format('woff2'), url('../xkonf/fonts/Vollkorn SC/Vollkorn-SC-Regular.ttf') format('truetype'); }
@font-face { /*font-display: swap;*/ font-family: 'SST_VollkornSCBold'; font-style: normal; font-weight: bold; src: url('../xkonf/fonts/Vollkorn SC/Vollkorn-SC-Bold.woff2') format('woff2'), url('../xkonf/fonts/Vollkorn SC/Vollkorn-SC-Bold.ttf') format('truetype'); }


/*******************************************************************************
##
##  STYLES KONFIGURATOR
##
*/


:root {
    --gralax-gold: #3260AB; /*#CBB16E*/;
    --gralax-gray:#3b3c3c;
    --gralax-black:#1b1c2c;
    --gralax-white:#F2F5FC;
    --gralax-blue:#3260AB;
    --gralax-angle-menu:skewX(-9deg);
    --gralax-angle-content:skewX(-2deg);
    --gralax-shadowbox: .1rem .3rem .6rem var(--gralax-white), -.1rem -.1rem 0.3rem var(--gralax-blue);
    --gralax-shadowhead: 0 .5rem .5rem var(--gralax-black);
    --gralax-radius:0.25rem;
    --gralax-line-height: 1.3rem; /* no definition in main theme so use this on custom styles */
    --gralax-font-awesome:normal normal normal 1rem/1 FontAwesome;
    --gralax-mainmenu-height: 1rem;

    --gralax-bg-transparent: rgba(242,245,252,.8);

    --gralax-logo: url('../xkonf/logos/schilderstyle_logo.png');
 }


/* body, p, ul, li {} */


body { padding:0; margin:0; }

#mmkcon    { /*width:980px;*/ width:1140px; background:#fff; font-family: OpenSans; font-size: 16px; color: #555555; padding:20px 0 20px 0; margin:0 auto; text-align:left; }

/*
## -----------------------------------------------------------------------------
##
##  GENERAL ELEMENT/FORM CLASSES
##                                             
*/


#mmkcon ul, #mmkcon li { /*display:block;*/ list-style-type:none; line-height:1.4em;  }
#mmkcon li             { padding-left:0; }

#mmkcon form           { height:100%; }

/*
   #mmkcon  input { font-family: OpenSans; font-size:1em; border: 1px solid #aaa; padding:5px; color:var(--gralax-black); margin-top:5px; border-radius: 3px; font-family: OpenSans; outline:none; } 

*/

#mmkcon input        { font-family: OpenSans; font-size:1em; border: 1px solid #AAAAAA; padding:5px; color:#555555; margin-top:5px; border-radius: 3px; font-family: OpenSans; outline:none; }
#mmkcon input:focus  { background-color: #fff; border: 1px solid #0093DB; outline: none; box-shadow: 0 0 5px rgba(0,0,0,0.2); }
#mmkcon input[type="file"] { display: none; }

#mmkcon select         { font-family: OpenSans; font-size:1em; border: 1px solid #AAAAAA; padding:4px; color:#555555; margin-top:5px; border-radius: 3px; font-family: OpenSans; outline:none; }
#mmkcon select:focus   { background-color: #fff; border: 1px solid #0093DB; outline: none; box-shadow: 0 0 5px rgba(0,0,0,0.2); }

#mmkcon textarea       { font-family: OpenSans; font-size:1em; border: 1px solid #AAAAAA; padding:5px; border-radius: 3px; color:#555555; margin-top:5px; }
#mmkcon textarea:focus { background-color: #fff; border: 1px solid #0093DB; outline: none; box-shadow: 0 0 5px rgba(0,0,0,0.2); }

#mmkcon .inputInactive { background-color: #ddd; }
#mmkcon .inputInactive:focus { background-color: #ddd; }

/*
#mmkcon .noborder    { border:0px; }
#mmkcon .sndbutton   { font-size:0.938em; border:0px; background: #076633; color: #fff; width:120px; height:46px; font-weight:bold; }
#mmkcon .formspacer  { clear:both; padding:1%; }
#mmkcon .osndButton  { display:block; font-size:0.938em; border:0px; background: #076633; color: #fff; height:26px; padding: 14px 10px 6px 10px; font-weight:bold; }
#mmkcon a.osndButton { text-decoration:none; color:#fff; }
#mmkcon #emailError  { background: #aa0000; padding:2%; color:#fff; }
#mmkcon #emailOk     { background: #2fac66; padding:2%; color:#fff; }
#mmkcon .elemTitle   { float:left; display:inline; margin-right:15px; font-weight:bold; width:90px; }
#mmkcon .elem        { float:left; display:inline; margin-right:0; }
#mmkcon .elem2       { float:left; display:inline; margin-left:15px; }
*/
 
#textFontList   { position:absolute; z-index:99; padding:3px; overflow-y:scroll; width:200px; height:150px; border:1px solid #ccc; border-radius:3px; background:#fff; }
#textFontList a.fontSelList  { text-decoration:none; display:block; background:#fff; color:  #555555;  font-size:1.125em; padding:4px; }
#textFontList a.fontSelList:hover { text-decoration:none; background: #0093DB; color: #fff; }
#textFontListClose  { float:right; font-weight:bold; font-size:1.125em; cursor:pointer; border-radius:50%; background: #0093DB; color:#fff; width:22px; height:24px; text-align:center; margin-top:8px; }


#mmkcon .sm          { margin-top:0px; font-size:0.875em; text-align:center; }
#mmkcon .sm          { display:inline-block; margin-top:4px; /*font-family:Arial;*/ font-size:0.875em; text-align:center; line-height:14px; }

#mmkcon .smprice     { margin-top:0px; font-size:0.875em; }

#mmkcon small        { margin-top:0px; font-size:0.875em; }

#schild      { border-radius: 0; }

#mmkcon .fixInput { width:40px; font-size:1em; padding:4px; margin-left:5px; }


/*
################################################################################
##
##  BUTTONS IN FORMULAREN  // SUCHFELDER DIMENSIONEN // SPECIAL CLASSES
##
*/


#mmkcon .apbutton, .apbutton:visited { cursor: pointer; display: inline-block; position: relative; border-radius:3px; text-decoration: none; border:0px; }

/* SIZES */

#mmkcon      .small.apbutton        { font-size: 11px; }
#mmkcon      .medium.apbutton       { font-size: 13px; padding:7px;  border-radius:50%; }
#mmkcon      .mediumicon.apbutton   { font-size: 13px; padding:3px; box-shadow: none; border:none; }

#mmkcon      .large.apbutton        { font-size: 14px; font-family:OpenSansRegular; border-radius:3px; padding: 6px; position:relative; top:0px;}


/* NAV BUTTONS + FUNCTIONS */

#mmkcon #sideNav { padding:0 0 0 0; float:left; width:auto; margin:0 30px 0 0; }

#mmkcon      .large.apbutton:hover  { background: #0093DB; color:#fff; }

#mmkcon      .orange.apbutton.niForms  { background: #0093DB url('../icons/nav_forms.png') 7px 9px no-repeat; color:#fff; padding: 7px 0 8px 34px; border:1px solid #0093DB; width:143px; margin-bottom:5px; }
#mmkcon      .gray.apbutton.niForms    { background: #f0f0f0 url('../icons/nav_forms.png') 7px -50px no-repeat; padding: 7px 0 8px 34px; color:#777; border:1px solid #ccc; width:143px; margin-bottom:5px; }
#mmkcon      .orange.apbutton.niColors { background: #0093DB url('../icons/nav_colors.png') 7px 9px no-repeat; color:#fff; padding: 7px 0 8px 34px; border:1px solid #0093DB; width:143px; margin-bottom:5px; }
#mmkcon      .gray.apbutton.niColors   { background: #f0f0f0 url('../icons/nav_colors.png') 7px -50px no-repeat; padding: 7px 0 8px 34px; color:#777; border:1px solid #ccc; width:143px; margin-bottom:5px; }
#mmkcon      .orange.apbutton.niText   { background: #0093DB url('../icons/nav_text.png') 7px 9px no-repeat; color:#fff; padding: 7px 0 8px 34px; border:1px solid #0093DB; width:143px; margin-bottom:5px; }
#mmkcon      .gray.apbutton.niText     { background: #f0f0f0 url('../icons/nav_text.png') 7px -50px no-repeat; padding: 7px 0 8px 34px; color:#777; border:1px solid #ccc; width:143px; margin-bottom:5px; }
#mmkcon      .orange.apbutton.niImages { background: #0093DB url('../icons/nav_images.png') 7px 9px no-repeat; color:#fff; padding: 7px 0 8px 34px; border:1px solid #0093DB; width:143px; margin-bottom:5px; }
#mmkcon      .gray.apbutton.niImages   { background: #f0f0f0 url('../icons/nav_images.png') 7px -50px no-repeat; padding: 7px 0 8px 34px; color:#777; border:1px solid #ccc; width:143px; margin-bottom:5px; }
#mmkcon      .orange.apbutton.niCutforms { background: #0093DB url('../icons/nav_cutforms.png') 7px 9px no-repeat; color:#fff; padding: 7px 0 8px 34px; border:1px solid #0093DB; width:143px; margin-bottom:5px; }
#mmkcon      .gray.apbutton.niCutforms   { background: #f0f0f0 url('../icons/nav_cutforms.png') 7px -50px no-repeat; padding: 7px 0 8px 34px; color:#777; border:1px solid #ccc; width:143px; margin-bottom:5px; }
#mmkcon      .orange.apbutton.niFixations { background: #0093DB url('../icons/nav_fixations.png') 7px 9px no-repeat; color:#fff; padding: 7px 0 8px 34px; border:1px solid #0093DB; width:143px; margin-bottom:5px; }
#mmkcon      .gray.apbutton.niFixations   { background: #f0f0f0 url('../icons/nav_fixations.png') 7px -50px no-repeat; padding: 7px 0 8px 34px; color:#777; border:1px solid #ccc; width:143px; margin-bottom:5px; }
#mmkcon      .orange.apbutton.niComponents { background: #0093DB url('../icons/nav_components.png') 7px 9px no-repeat; color:#fff; padding: 7px 0 8px 34px; border:1px solid #0093DB; width:143px; margin-bottom:5px; }
#mmkcon      .gray.apbutton.niComponents   { background: #f0f0f0 url('../icons/nav_components.png') 7px -50px no-repeat; padding: 7px 0 8px 34px; color:#777; border:1px solid #ccc; width:143px; margin-bottom:5px; }

#mmkcon      .orange.apbutton.niMaterials { padding: 7px 6px 7px 6px; margin-right:5px; }
#mmkcon      .gray.apbutton.niMaterials {  padding: 7px 6px 7px 6px; margin-right:5px; }


#mmkcon      .btsize.apbutton         { width:26px; height:26px; padding:0; margin:0;  }
#mmkcon      .large_btsize.apbutton   { width:50px; height:50px; padding:0; margin:0; margin-bottom:3px;  }
#mmkcon      .large_clsize.apbutton   { width:68px; height:64px; padding:0 0 0 0; margin:0 0 5px 0; }
#mmkcon      .center_btsize.apbutton  { /*width:44px; height:44px;*/ margin:0; /*margin-bottom:3px;*/ padding:1px; }


#mmkcon      .large_partsize.apbutton { width:68px; height:68px; padding:0; margin:0; margin-bottom:3px;  }

/* BUTTON IMAGE POSITON */

#mmkcon      .funcicon             { position:relative; top:2px; margin:0 auto; }
#mmkcon      .large_funcicon       { position:relative; top:2px; margin:0 auto; }


/* COLORS */

#mmkcon      .orange.apbutton { background: #0093DB; color:#fff; border:1px solid #0093DB; }
#mmkcon      .gray.apbutton { background: #f0f0f0; /* opacity:0.5;*/ color:#777; border:1px solid #ccc; }

#mmkcon      .imgKat.apbutton { width:80px; height:30px; }

#mmkcon      .grad.apbutton       { background: linear-gradient(0deg, #dddddd,#ffffff); border:1px solid #ccc; }
#mmkcon      .gradSelect.apbutton { background: linear-gradient(0deg, #dddddd,#ffffff); border:2px solid #0093DB; }

#mmkcon      .part.apbutton       { background: transparent; border:1px solid #ccc; }
#mmkcon      .partSelect.apbutton { background: transparent; border:2px solid #0093DB; }


/*#mmkcon      .strengthbg { border-top:1px solid #ccc; position:relative; top:4px; height:19px; padding:0 2px 2px 2px; z-index:99; background:rgba(255,255,255,0.9); color:#333; }*/
#mmkcon      .strengthbg { position:relative; top:5px; height:19px; padding:0 2px 2px 2px; z-index:99; text-align:center; width:100%; font-size:14px; font-weight:bold; }

/* FORMS  */

#mmkcon       .round.apbutton  { border-radius:10%; }

/*
## -----------------------------------------------------------------------------
##
##  KONFIGURATOR STYLES
##
##
*/

#mmkcon .konfpanel  { float:left; /*width:763px;*/ width:923px; height:283px; padding:10px; text-align:left; border:1px solid #e1e1e1; border-radius:3px; font-size:0.875em; }

#mmkcon .panelTitle { font-weight:bold; padding:0px 0 7px 0; margin:0 0 10px 0; border-bottom: 1px solid #DDDDDD; }
#mmkcon h1.panelTitle { font-size:1.125em; font-weight:bold; padding:0px 0 7px 0; margin:0 0 10px 0; color: #0093DB; border-bottom: 1px solid #DDDDDD; }

#mmkcon .ptSecond   { padding:5px 0 7px 0; }

#mmkcon .selBox     { display:table-cell; text-align:center; vertical-align:middle; width:60px; height:60px; padding:5px; margin:4px; border-radius:3px; border:1px solid #fff; }
#mmkcon .selBox a   { display:block; text-decoration:none; font-size:0.75em; }
#mmkcon .selActive  { border:2px solid #0093DB; padding:5px;  }

#mmkcon .objEdit      { position:absolute; background: #fff; width:159px; padding:10px; height:560px; margin:-20px 0 0 -120px; z-index:40; text-align:center; box-shadow: 0 0 15px rgba(100,100,100,0.2); text-align:left; display:none; }
#mmkcon .objEditTitle { margin:20px 0 10px 0; font-weight:bold; }

#mmkcon .objListLayersEdit      { position:absolute; background: #fff; width:159px; padding:10px; height:560px; margin:-20px 0 0 -120px; z-index:41; text-align:center; box-shadow: 0 0 15px rgba(100,100,100,0.2); text-align:left; display:none; }
#mmkcon .objListLayersEditTitle { margin:20px 0 10px 0; font-weight:bold; }


#mmkcon #infobar    { clear:both; display: block; font-size:14px; color:#555555; padding:10px; background: #ef8419; border-radius:3px; border: 1px solid #DDDDDD; user-select:none; }


/* BUTTON NAV STYLES */

#mmkcon .leftNav        { float:left; width:30px; padding-top:15px; }
#mmkcon .rightNav       { float:left; width:32px; padding-top:15px; text-align:right; }
#mmkcon .leftImgNav     { float:left; width:30px; padding-top:64px; }
#mmkcon .rightImgNav    { float:left; width:32px; padding-top:64px; text-align:right; }

#mmkcon .leftColorNav   { float:left; width:30px; padding-top:92px; }
#mmkcon .rightColorNav  { float:left; width:32px; padding-top:92px; text-align:right; }


#mmkcon .leftPartNav    { float:left; width:30px; padding-top:36px; }
#mmkcon .rightPartNav   { float:left; width:32px; padding-top:36px; text-align:right; }
#mmkcon .leftImgKatNav  { float:left; width:30px; padding-top:5px; }
#mmkcon .rightImgKatNav { float:left; width:32px; padding-top:5px; text-align:right; }

/* SLIDER FIX CONTAINERS */

#mmkcon .formBorderBox  { float:left; display:block; margin-left:2px; /*width:364px;*/ width:87.7%; }
#mmkcon .colorBox       { float:left; display:block; margin-left:2px; /*width:485px;*/ width:90%; height:210px; }
#mmkcon .imageNavBox    { float:left; display:block; margin-left:2px; /*width:485px;*/ width:90%; height:50px;  }
#mmkcon .imageBox       { float:left; display:block; margin-left:2px; /*width:485px;*/ width:90%; height:160px; }
#mmkcon .cutBox         { float:left; display:block; margin-left:2px; /*width:485px;*/ width:90%; height:210px; }
#mmkcon .fixationBox    { float:left; display:block; margin-left:2px; /*width:685px;*/ width:90%; height:210px; }
#mmkcon .componentsBox { float:left; display:block; margin-left:2px; /*width:685px;*/ width:90%; height:210px; }

#mmkcon .clipNav        { width:50px; height:73px; margin-right:6px; text-align:center; }
#mmkcon .clipColNav     { width:70px; margin-right:4px; text-align:center; height:210px; }
#mmkcon .clipImgNavKat  { width:80px; margin:3px 6px 0 0; text-align:center; height:60px; }
#mmkcon .clipImgNav     { width:68px; margin-right: 6px; text-align:center; height:150px; }
#mmkcon .clipCutNav     { width:50px; margin-right:6px; text-align:center; height: 160px; }
#mmkcon .clipFX         { float:left; width:68px; margin-right:7px; height:106px; text-align:center; }
#mmkcon .clipFXBlock    { /* width:685px; */ width:645px; height:210px; } 
#mmkcon .clipCP         { float:left; width:68px; margin-right:7px; height:106px; text-align:center; }
#mmkcon .clipCPBlock    { /* width:685px; */ width:645px; height:210px; } 

#mmkcon .propTable     { line-height:1.3em; font-size:0.875em; padding:0; border-spacing:0; margin-top:5px; }
#mmkcon .zubehoerDesc  { display:none; }

/* #mmkcon .clipPartNav { width:92px; text-align:center; } */
/* #mmkcon .clipPartNav { width:68px; text-align:center; } */


/* TEXT TMP */

#mmkcon .sym            { font-size:32px; }
#mmkcon .symdesc        { display:block; height:36px; margin-top:0px; }
#symtable td            { background: #fff; padding:2px; }
#symtable td:hover      { background: #e5e5e5; cursor:pointer; }

/* COLORS */

#mmkcon .coltext { font-family:Arial, no-serif; line-height:1.0em; font-size:0.875em; }

/* VORLAGEN */

#mmkcon .loadSignLink{ display:none; background: #0093DB; 
                       position:relative; z-index:99; top: -60px; padding-top:20px; cursor:pointer; width:100%; text-align:center; height:40px; margin-bottom:-80px; border-radius: 3px;
}

#mmkcon .loadSignBlock { float:left; border:1px solid #ddd; border-radius:5px; }
#mmkcon .loadSignBlock:hover .loadSignLink{ display : block; }

#mmkcon .loadSignBlock a { color:#fff; text-decoration:none; font-weight:bold; }


/*
## -----------------------------------------------------------------------------
##
##  KUNDENKONTO SITE STYLES
##
##
*/

#mmkcon .kknav         { float:left; width:165px; margin-right:30px; font-size:0.875em; color:#0093DB; line-height:1.4em; }

#mmkcon .kknav p       { margin:0 0 15px 0; padding:0; }
#mmkcon .kknav a       { color: #555555; text-decoration:none;  } 
#mmkcon .kknav a:hover { font-weight:bold; }
#mmkcon .kknav ul      { text-align:left; margin:0 10px 25px 15px; padding:0; list-style-type: none; }
#mmkcon .kknav li      { display:block; padding:5px 0 5px 0px; text-align:left; }
#mmkcon .nblock        { padding:10px; }
#mmkcon .tblock        { border-radius:3px; background:#fff; border: 1px solid #ddd; padding:15px; font-size:1em;  }
#mmkcon .tline         { border-top:1px solid #dddddd; }
#mmkcon .bline         { border-bottom:1px solid #dddddd; }
#mmkcon .customerno    { position:relative; top:-20px; width:950px; color: #aaaaaa; text-align:right; font-size:0.875em; }
	
#mmkcon .kkcon         { float:left; /*width:783px;*/ width:943px; font-size: 0.875em; line-height:1.4em; color:#555555;}
#mmkcon .kkcon h1      { font-size: 1.250em; color:#0093DB; font-weight:bold; margin:0 0 10px 0; padding:0; }
#mmkcon .kkcon h2      { font-size: 1.250em; color: #555555; font-weight:bold; margin:0 0 10px 0; padding:0; }
#mmkcon .block         { width: 95%; border-radius: 3px; margin-top:20px; border: 1px solid #dddddd; background: #f9f9f9; padding: 2%; text-align:left; }

#mmkcon .kkcon a       { color: #0093DB; text-decoration:none; }
#mmkcon .kkcon a:after { content: " » "; font-size:1.375em; }

#mmkcon .btIcon        { position:relative; top:1px; left:2px; font-size:1.75em; line-height:10px; margin-right:2px; }
#mmkcon .btIconNoText  { position:relative; top:1px; left:0; font-size:1.75em; line-height:10px; }

#mmkcon .formTitle     { width:250px; height:35px; text-align:right; padding-right:20px; }
#mmkcon .formTitleNorm { width:90px; height:35px; padding-right:20px; }
#mmkcon .formData      { height:35px; }

#mmkcon hr             { border:0; margin:0; padding:0; height:1px; background:#dddddd; }


/* ADMIN TABLE STYLES */

#mmkcon table.admin                     { border-collapse:collapse; }
#mmkcon table.admin, th.admin, td.admin { border: 1px solid #ddd; }
#mmkcon th.admin, td.admin              { padding: 8px; }
#mmkcon th.admin                        { color:#fff; background: #0093DB; }
#mmkcon tr.admin:nth-child(even)        { background-color: #fff }

#mmkcon table.admin a       { color: #0093DB; text-decoration:none; }
#mmkcon table.admin a:after { content: ""; font-size:1.375em; }

#mmkcon .adcolor       { float:left; display:block; width:20px; height:20px; border:1px solid #ddd; border-radius:3px; margin-right:2px; }


/* }  */



/*
## -----------------------------------------------------------------------------
##
##  WARENKORB STYLES
##
##
*/

#mmkcon .kkfull         { /*width:980px;*/ width:1140px; font-size:0.875em; }
/* #mmkcon .kkfull.block   { font-size:14px; } */

#mmkcon .kkfull h2      { font-size: 1.250em; color: #555555; font-weight:bold; margin:0 0 20px 0; padding:0; }

#mmkcon .kkfull a       { color: #0093DB; text-decoration:none; }
#mmkcon .kkfull a:after { content: " » "; font-size:1.375em; }

#mmkcon .wktab ul { text-align:left; display:inline; margin: 0 10px 0 0; padding:0; list-style-type:none;}
#mmkcon .wktab li { display:inline; font-family:OpenSansRegular; font-size: 14px; padding:6px; margin:0;  }
#mmkcon .wktab li.active { display:inline; background: #0093DB; color: #fff; border-radius:3px 3px 0 0; border: 1px solid #0093DB; }


/*
############################################################################
###                                                                         
###  SYSTEM MESSAGES                                                   
###                                                                           
*/

#mmkcon .panel    { background: #fff; font-size:13px; border-radius: 5px; box-shadow: 0 0 8px 0 #ccc; 
                    float: left; height: auto; margin:0 0 20px 0; text-align:left; 
                  }

#mmkcon .panel100 { width: 100%; padding: 12px; }

#mmkcon .msg      { display:block; padding-left:54px; }
#mmkcon .msgOk    { clear:both; display: block; font-size:14px; color:#fff; background: #95b122 /*#a5c425*/ url('../icons/msgOk_w.svg') no-repeat; background-size: 42px 42px; background-position: 12px 12px; min-height:42px; }
#mmkcon .msgError { clear:both; display: block; font-size:14px; color:#fff; background: #bb0000 url('../icons/msgError_w.svg') no-repeat; background-size: 42px 42px; background-position: 12px 12px; min-height:42px; }
#mmkcon .msgWarn  { clear:both; display: block; font-size:14px; color:#fff; background: #ef8419 /*ffbb00*/ url('../icons/msgWarn_w.svg') no-repeat; background-size: 42px 42px; background-position: 12px 12px; min-height:42px; }

#mmkcon .msgErrorSmall { clear:both; /*width:935px;*/ width:1096px; border-radius:3px; display: block; padding:10px 5px 5px 40px;  margin: 15px 0 5px 0; font-size:0.875em; color:#fff; background: #bb0000 url('../icons/msgError_w.svg') no-repeat; background-size: 24px 24px; background-position: 8px 8px; min-height:24px; }
/* #mmkcon .infobar  { width:968px; padding:5px 5px 5px 5px;  margin: 10px 0 15px 0; border:1px solid #ddd; border-radius:3px; background:#ffe984; font-size:0.875em; } */

#mmkcon .infobar  { /*width:968px;*/ width:1129px; padding:5px 5px 5px 5px;  margin: 10px 0 15px 0; border:1px solid #ddd; border-radius:3px; color:#fff; background: #95b122; font-size:0.875em; user-select:none; }

#mmkcon .serientextbar  { clear:both; /*width:935px;*/ width:1096px; border-radius:3px; display: block; padding:10px 5px 5px 40px;  margin: 10px 0 5px 0; font-size:0.875em; color:#fff; background: #673086 url('../icons/msgSerientext_w.svg') no-repeat; background-size: 19px 19px; background-position: 11px 10px; min-height:24px; }


#mmkcon .tooltip { position: relative; z-index:99; display: inline-block; border-bottom: 1px dotted  #0093DB; }
#mmkcon .tooltip .tooltiptext { cursor:pointer; font-size: 14px; visibility: hidden; width: 400px; background-color: #0093DB; color: #fff; text-align: center; border-radius: 3px; padding: 8px; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -207px; box-shadow:0 0 10px rgba(0,0,0,0.4); }
#mmkcon .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 99%;
    left: 50%;
    margin-left: -10px;
    margin-top:  -2px;
    border-width: 10px;

    border-style: solid;
    border-color: #0093DB transparent transparent transparent;
}

#mmkcon .tooltip:hover .tooltiptext {
    visibility: visible;
}


/* -------------------------------------------------------------------------- */


#topline     { display:block; width:100%; height:4px; background: #4265ae; }
#headline    { position:relative; z-index:99; width:100%; height:140px; margin:0 auto; background: #fff; box-shadow: 0 0 22px rgba(106,106,106,.5) /*shadow*/ }

#headarea    { width:940px; height:110px; padding:11px 40px 11px 0; margin:0 auto; /*background: #3acccf;*/ text-align:right; }

#logo        { float: left; position: relative; z-index: 5; top: -6px; }
#logoxy      { width:314px; height:122px; }

#menuarea       { float:left; width: 626px; }
#menuarea:after { clear:both; }



/*
############################################################################
###                                                                         
###  SYSTEM WINDOWS
###                                                                           
*/

.sysWin { width:460px; font-family: OpenSans; font-size: 16px; color: #555555; padding:20px 0 20px 0; margin:0 auto; text-align:left; font-size: 0.875em; }
.sysWin h1 { font-size:1.125em; font-weight:bold; padding:0px 0 7px 0; margin:0 0 10px 0; color: #0093DB; border-bottom: 1px solid #DDDDDD; }
.sysWin button  { font-size: 14px; font-family:OpenSansRegular; border-radius:3px; padding: 6px; position:relative; top:0px; background: #0093DB; color:#fff; border:1px solid #0093DB;}
.sysWin a       { text-decoration:none; font-size: 14px; font-family:OpenSansRegular; border-radius:3px; padding: 6px; position:relative; top:0px; background: #0093DB; color:#fff; border:1px solid #0093DB;}
.sysWinBlock    { width: 95%; border-radius: 3px; margin-top:20px; border: 1px solid #dddddd; background: #f9f9f9; padding: 2%; text-align:left; }
.sysWin small   { font-size: 0.875em; }

.sysWin input        { font-family: OpenSans; font-size:1em; border: 1px solid #AAAAAA; padding:5px; color:#555555; margin-top:5px; border-radius: 3px; font-family: OpenSans; outline:none; }
.sysWin input:focus  { background-color: #fff; border: 1px solid #0093DB; outline: none; box-shadow: 0 0 5px rgba(0,0,0,0.2); }
.sysWin input[type="file"] { display: none; }

.sysWin label { font-size: 14px; font-family:OpenSansRegular; border-radius:3px; padding: 6px; position:relative; top:0px; background: #0093DB; color:#fff; border:1px solid #0093DB;}

.sysWin select         { font-family: OpenSans; font-size:1em; border: 1px solid #AAAAAA; padding:4px; color:#555555; margin-top:5px; border-radius: 3px; font-family: OpenSans; outline:none; }
.sysWin select:focus   { background-color: #fff; border: 1px solid #0093DB; outline: none; box-shadow: 0 0 5px rgba(0,0,0,0.2); }

.sysWin textarea       { font-family: OpenSans; font-size:1em; border: 1px solid #AAAAAA; padding:5px; border-radius: 3px; color:#555555; margin-top:5px; }
.sysWin textarea:focus { background-color: #fff; border: 1px solid #0093DB; outline: none; box-shadow: 0 0 5px rgba(0,0,0,0.2); }

.txtZeile  { width:104px; }
.loaderError { color: #cc0000; }

.sysWintooltip { position: relative; z-index:99; display: inline-block; border-bottom: 1px dotted #0093DB; }
.sysWintooltip .tooltiptext { cursor:pointer; font-size: 13px; visibility: hidden; width: 400px; background-color: var(--gralax-white); color: var(--gralax-black); 
                text-align: left; border-radius: 3px; padding: 12px; position: absolute; z-index: 1; bottom: 150%; left: 95%; margin-left: -390px; box-shadow:0 0 10px rgba(0,0,0,0.4); 
                }
.sysWintooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: 170px;
  border-width: 10px;
  border-style: solid;
  border-color: var(--gralax-white) transparent transparent transparent;

}

.sysWintooltip:hover .tooltiptext {
    visibility: visible;
}

/*
############################################################################
###                                                                         
###  PAYPAL PAYEMENT STYLES
###                                                                           
*/

.paypal-mark { padding: 8px 8px!important; line-height:1.3em!important; border-radius: 0!important; margin: 0!important; border-width: 0px 0px 1px 0px!important; border-color: #ccc; width: 100%; height: 75px!important; cursor: pointer; }
.paypal-mark img { height: 53px!important; display: inline-block!important; vertical-align: middle!important; border: 2px solid #ccc; padding: 14px 10px; border-radius: 7px;  margin-left: 7px; }
.paypal-mark:hover { background-color: #f9f9f9; }
.paypalCheckMark { background-image: url("https://www.paypalobjects.com/webstatic/ppplus/icons/checkmark.png"); background-repeat: no-repeat; background-position: right; height: 50px; width: 25px; position: relative; top: -50px; }
.paypalText { display:inline-block; position: relative; left: 36px; top:9px; font-size: 14px; font-family: PTSans; }
.paypal-logo-card { width:89px; }
.checkPayPal { float:right; margin: -3px 8px 0 0; }


/*
############################################################################
###                                                                         
###  KLARNA PAYEMENT STYLES
###                                                                           
*/

#mmkbackend .pmKlarnaRow       { position:relative; /*top:-28px;*/ padding: 8px 16px; font-size:14px; font-family:PTSans; color: #000; overflow: hidden; background-color: #fff; cursor: pointer; border-bottom: 1px solid #dfdfdf; }
#mmkbackend .pmKlarnaInnerRow  { margin: 25px 0 0 125px; }
#mmkbackend .pmKlarnaRow:hover { background-color: #f9f9f9; }

#mmkbackend .pmKlarnaIcon      { display:table-cell; vertical-align:middle; width: 125px; padding-right:45px; }
#mmkbackend .pmKlarnaImage     { display:block; max-width:150px; max-height:45px; width:100%; }
#mmkbackend .pmKlarnaName      { display:table-cell; vertical-align:middle; }
#mmkbackend .pmKlarnaCheckMark { background-image: url("https://www.paypalobjects.com/webstatic/ppplus/icons/checkmark.png"); background-repeat: no-repeat; background-position: right; height: 50px; width: 25px; position: relative; top: -50px; }

#mmkbackend #klarna-pay-now-main  { min-width:200px; }




#scrollbar1
{
    height: 100vh;
    width:100%;
    margin:20px auto 20px;
    position: relative;
}

#scrollbar1 .viewport
{
    height: 100vh;
    overflow:hidden;
    position:relative;
    top: 0;
    /*margin-bottom:130px;*/
    /*background: #dedede;*/
}

#scrollbar1 .overview
{
    list-style:none;
    position:absolute;
    left:0;
    top: 0px;
    margin:0 0 0;
    padding: 0 0 180px 0;
}

#scrollbar1 .scrollbar
{
    background: #777;  /*url(../icons/bg-scrollbar-track-y.png) no-repeat 0 0; */
    border-radius:4px;
    position:absolute;
    background-position:0 0;
    right: -15px;
    top: 0px;
    width: 10px;
}

#scrollbar1 .track
{
    background:transparent; /* url(../icons/bg-scrollbar-trackend-y.png) no-repeat 0 100%; */
    height:100%;
    width:10px;
    position:relative;
    padding:0 1px;
}

#scrollbar1 .thumb
{
    background: transparent url(../icons/bg-scrollbar-thumb-y.png) no-repeat 50% 100%;
    height:20px;
    width:10px;
    cursor:pointer;
    overflow:hidden;
    position:absolute;
    top:0;
    left: 0px;
}

#scrollbar1 .thumb .end
{
    background: #777 url(../icons/bg-scrollbar-thumb-y.png) no-repeat 50% 0;
    overflow:hidden;
    height:5px;
    width: 10px;
}

#scrollbar1 .disable
{
    display:none;
}

.noSelect
{
    user-select:none;
    -o-user-select:none;
    -moz-user-select:none;
    -khtml-user-select:none;
    -webkit-user-select:none;
}



/*
############################################################################
###                                                                         
###  USERMENU NAV STYLES
###                                                                           
*/


#mmkmenu               { /*background: #c0f;*/ font-family: PTSans; box-sizing:border-box; right: 20px;  position: absolute; }

#mmkmenu .wkBlock      { float:left; display:block; /*background:#fff;*/ width:145px; text-align:left; }
#mmkmenu .wkIcon       { display:block; position:relative; margin:0 10px 0 0; float:left; width:45px; height:45px; transform: var(--gralax-angle-menu); border-radius: var(--gralax-radius); /*50%*/; background: url(https://schilderstyle.de/konfigurator/icons/backend_basket.svg) no-repeat center/contain; background-color: var(--gralax-gold); background-size:60%; }
#mmkmenu .wkTextPanel  { font-family: PTSans; position:relative; font-size: 15px; font-weight:bold; color: var(--gralax-white); /*var(--gralax-gold);*/ letter-spacing:1px;  margin:14px 0 0 0; }
#mmkmenu .wkCircle     { box-sizing: border-box; font-family: PTSans; position: absolute; font-size:15px; font-weight:bold; background: #f00; border-radius: 50%; top: -8px;left: 29px; width: 24px; height: 24px; padding: 2px 2px; text-align: center; color: #fff; } 

#mmkmenu .usIcon       { display:block; margin:0 10px 0 0; float:left; width:45px; height:45px; transform: var(--gralax-angle-menu); border-radius: var(--gralax-radius); /*50%;*/ background: url(https://schilderstyle.de/konfigurator/icons/backend_user.svg) no-repeat center/contain; background-color: var(--gralax-gold); background-size:60%; }
#mmkmenu .usLoggedText { font-family: PTSans; color: var(--gralax-white); /*var(--gralax-gold);*/ min-width:120px; max-width:200px; margin:10px 20px 0 0; white-space: nowrap; overflow:hidden; font-size:15px; letter-spacing:1px; line-height:1.0em; text-align:left;}
#mmkmenu .usText       { font-family: PTSans; color: var(--gralax-white); /*var(--gralax-gold);*/ max-width:120px; margin:14px 15px 0 0; white-space: nowrap; overflow:hidden; letter-spacing:1px; font-size:15px; text-align:left; }

.homeIcon     { display:block; margin:12px 16px 0 0; float:left; width:45px; height:45px; transform: var(--gralax-angle-menu); border-radius: var(--gralax-radius); /*50%;*/ background: url(https://schilderstyle.de/konfigurator/icons/home.svg) no-repeat center/contain; background-color: var(--gralax-gold); background-size:60%; }

#mmkmenu .userPanel             { box-sizing: border-box; display: none; border:3px solid var(--gralax-white)/*#fff*/; /*transform: var(--gralax-angle-menu);*/ border-radius: 0 0 4px 4px; position: absolute; top: 58px; left:0px/*-25px*/; z-index: 997; background: var(--gralax-white); box-shadow: 0 12px 10px rgba(0,0,0,0.5); width:240px; } 
#mmkmenu .userPanelContent      { padding: 12px 0 0 0; text-align:left; border-top:1px solid #aaa; }
#mmkmenu .userPanelLoggedContent{ font-family:PTSans; padding: 12px; text-align:left; font-size:15px; }

#mmkmenu .showUserLoggedPanel, #mmkmenu .showUserPanel { cursor:pointer; float:left; /*background:#fff;*/ position:relative }

#mmkmenu .userPanelRegLink a        { font-family:PTSans; display:block; padding:10px 0 10px 42px; text-align:left; border-top:1px solid #AAAAAA; color: var(--gralax-blue); text-decoration:none; background: url('../icons/user_reg.png') 8px 11px no-repeat; }
#mmkmenu .userPanelRegLink a:hover  { color:var(--gralax-white); background: var(--gralax-blue) url('../icons/user_reg_w.png') 8px 11px no-repeat; }
#mmkmenu .userPanelLostPW a         { font-family:PTSans; display:block; padding:10px 0 10px 42px; text-align:left; border-top:1px solid #AAAAAA; color: var(--gralax-blue); text-decoration:none; background: url('../icons/user_lpw.png') 9px 11px no-repeat; }
#mmkmenu .userPanelLostPW a:hover   { color:var(--gralax-white); background: var(--gralax-blue) url('../icons/user_lpw_w.png') 9px 11px no-repeat; }

#mmkmenu .userPanelKontoLink a       { font-family:PTSans; display:block; padding:10px 0 10px 42px; text-align:left; border-top:1px solid #AAAAAA; color: var(--gralax-blue); text-decoration:none; background: url('../icons/konto.png') 9px 11px no-repeat; }
#mmkmenu .userPanelKontoLink a:hover { color:var(--gralax-white); background: var(--gralax-blue) url('../icons/konto_w.png') 9px 11px no-repeat; }

#mmkmenu .userPanelOrdersLink a       { font-family:PTSans; display:block; padding:10px 0 10px 42px; text-align:left; border-top:1px solid #AAAAAA; color: var(--gralax-blue); text-decoration:none; background: url('../icons/orders.png') 9px 11px no-repeat; }
#mmkmenu .userPanelOrdersLink a:hover { color:var(--gralax-white); background: var(--gralax-blue) url('../icons/orders_w.png') 9px 11px no-repeat; }

#mmkmenu .userPanelLogoutLink a       { font-family:PTSans; display:block; padding:10px 0 10px 42px; text-align:left; border-top:1px solid #AAAAAA; color: var(--gralax-blue); text-decoration:none; background: url('../icons/logout.png') 9px 11px no-repeat; }
#mmkmenu .userPanelLogoutLink a:hover { color:var(--gralax-white); background: var(--gralax-blue) url('../icons/logout_w.png') 9px 11px no-repeat; }

#mmkmenu .loginLoader { box-sizing:border-box; font-family: PTSans; float:left; display:none; color:#cc0000; padding:14px 10px 10px 10px; }
#mmkmenu .loginInfo   { box-sizing:border-box; font-family: PTSans; position:relative; font-size:15px; background:url('https://schilderstyle.de/konfigurator/icons/ajax-loader.gif') 4px 0 no-repeat; background-size:18px; padding-left:30px; color: var(--gralax-black); }
#mmkmenu .loginFailed { font-family: PTSans; font-size:15px; color:#cc0000; display:none; }

#mmkmenu input { box-sizing: border-box; padding: 8px; font-size: 15px; font-family: PTSans; border-radius: 3px; border: 1px solid #888; }
#mmkmenu .loginButton { float:right; margin:4px 8px 15px 0; color: var(--gralax-white); outline:none; width:auto; cursor: pointer; display: inline-block; letter-spacing:0px; position: relative; font-size: 15px; font-family: PTSansCaption; padding: 8px 16px; border-radius: 3px; text-decoration: none; transform: var(--gralax-angle-menu); background-color: var(--gralax-blue); border: 1px solid var(--gralax-blue); }

#mmkmenu .sm { font-size:12px; }

/*
############################################################################
###                                                                         
###  BACKEND STYLES
###                                                                           
*/

/* LAYOUT */

#mmkbackend { box-sizing:border-box;  }
/**
#mmkbackend #navHeader { display:block; position:fixed; z-index:105; font-family:PTSans; font-size:14px; height:70px; width:100%; background: #fff; color: var(--gralax-black); box-shadow:0 0 15px rgba(0,0,0,0.7); user-select: none; }
*/
#mmkbackend #navHeader { display:block; position:fixed; z-index:105; font-family:PTSans; font-size:14px; height:70px; width:100%; max-width:100vw; background: var(--gralax-black); /*#fff*/; color: var(--gralax-black); box-shadow:0 0 15px rgba(0,0,0,0.7); user-select: none; }
#mmkbackend #navHeader .sm { font-size:12px; }
#mmkbackend #navHeader .topButton { display:inline-block; position:relative; padding:20px 8px 16px 0; }
#mmkbackend #navHeader .subMenu { display:none; position:absolute; z-index:99; left:-18px; /*top:63px;*/ top:60px; min-width:180px; /* border-radius:4px;*/ transform: var(--gralax-angle-menu); background:transparent; /*var(--gralax-gold);*/ padding:0; }
#mmkbackend #navHeader .subMenu a { color: var(--gralax-blue); text-decoration:none; }
#mmkbackend #navHeader .subMenu .menuItem { padding:8px 8px; margin-bottom:3px; background: var(--gralax-white); }
/** #mmkbackend #navHeader .subMenu .menuItem:hover { background-color: var(--gralax-blue); color: var(--gralax-white); } **/

#mmkbackend #navHeader .topButton:hover > .subMenu { display:block; } 
#mmkbackend #navHeader .gralaxButton { background: var(--gralax-black)!important; color: var(--gralax-white)!important; transform: var(--gralax-angle-menu)!important; 
  margin: 0 6px 0 6px; padding:4px 10px; box-shadow: var(--gralax-shadowbox); font-size:15px; font-weight:bold; letter-spacing:0.1em; 
}

#mmkbackend #navHeader .gralaxButton:hover { margin: 0 6px 0 6px!important; border-right:2px solid var(--gralax-black)!important; border-bottom:2px solid var(--gralax-black)!important; padding:4px 10px!important; box-shadow: .1rem .3rem .6rem var(--gralax-black), -.1rem -.1rem 0.3rem var(--gralax-black); color: var(--gralax-blue)!important; border:0; }

#mmkbackend #backlogo     { float:left; width:250px; width:20%; height: 60px; background: var(--gralax-logo) no-repeat; background-size: 84%; background-position: 20px 16px; }
#mmkbackend #backlogo a   { text-decoration:none; }
#mmkbackend .slogan       { text-align:left; color: var(--gralax-white); position: relative; left: 20px; top: -30px; font-size: 14px; border:none; }
#mmkbackend .slogan:hover { text-decoration:none; }
#mmkbackend .headerlogo { display:block; height:70px; }
#mmkbackend #topnav     { float:left; display:block; width:50%; margin:0 auto; padding-left:15px; }
#mmkbackend #usernav    { float:right; display:block; width:30%; position:relative; }
#mmkbackend .mobilenav  { }

  /* MOBILE NAVI */

  #mmkbackend #mobilebox { position:absolute; z-index:99;  right:20px; /*width:100%;*/ text-align:right; }
  #mmkbackend .mobilebutton { background: url('../icons/mobilemenu_white.png') 0 0 no-repeat; width:45px; height:45px; background-size: 60%; background-position: center; border-radius: var(--gralax-radius); transform: var(--gralax-angle-menu); background-color: var(--gralax-blue); margin-top:12px; display:block; float:right;}

  #mmkbackend #mobilemenu { display:none; position:absolute; z-index:99; top: 70px; width:50%; margin-left:50%; padding-top: 0px; overflow-y: auto; background-color: var(--gralax-white); border-radius: 0 0 8px 8px; box-shadow: 0 0 20px rgba(0,0,0,0.5); max-height: calc(100vh - 158px); max-height: calc(100dvh - 158px); max-height: -webkit-calc(100vh - 158px); } 
/*  #mmkbackend #mobilemenu      { display:none; font-size:18px; position:absolute; width:50%; top:70px; right:0; height:auto; background:#fff; left:0px;color:#fff; border-top:2px solid var(--gralax-blue);  border-bottom:2px solid var(--gralax-blue); } */
  #mmkbackend #mobilemenu a    { font-family: PTSans; font-weight:normal; width:100%; padding:12px 18px; display:block; color: var(--gralax-blue); text-align:left; border-bottom:1px solid var(--gralax-blue); text-decoration:none; }
  #mmkbackend #mobilemenu a:hover { color: var(--gralax-white); background: var(--gralax-blue); }
  #mmkbackend #mobilemenu .sep { font-family:OpenSans; font-weight:bold; display:block; background:#04200f; color:#fffbc1; padding:4%; text-align:center; }


#mmkbackend #navTools  { display:block; position:fixed; z-index:98; width:80px; background: var(--gralax-gray); color: var(--gralax-white); /*#30383d;*/ height:100vh; height:100dvh; top:0; padding-top:100px; font-size:12px; font-family:PTSans; }

#mmkbackend #navTools a { font-size:12px; color:#fff; }

#mmkbackend #sellspace { display:block; letter-spacing:1px; color: var(--gralax-black); font-family:PTSans; font-size:15px; position:relative; box-sizing: border-box; margin:0 auto; padding-top:109px; }

#mmkbackend #workspace { display:block; letter-spacing:1px;  position:relative; box-sizing: border-box; width:auto; line-height:1.4em; /*height:100vh;*/ padding: 94px 25px 0 125px; background: var(--gralax-white); /*rgba(255,255,255,1);*/ /*background: #0c0;*/ overflow:hidden; color: var(--gralax-black); font-family:PTSans; font-size:16px;  }
/** #mmkbackend #workspace .sm { font-size:12px; } **/

#mmkbackend .sm { font-size:13px; }

#mmkbackend #workspace ul { padding-top:5px; }
#mmkbackend #workspace li { padding: 0 0 7px 0; }
#mmkbackend #workspace .listsm { font-size:13px; padding-left: 10px; letter-spacing:0.4pt; }


#mmkbackend h1 { color: var(--gralax-blue); font-family:PTSans; font-size:28px; line-height:1.2em; }
#mmkbackend h2 { color: var(--gralax-black); font-family:PTSans; font-size:22px; margin-top:5px; line-height:1.2em; }
#mmkbackend h3 { color: var(--gralax-black); font-family:PTSans; font-size:20px; line-height:1.2em; }
#mmkbackend p  { color: var(--gralax-black); font-family:PTSans; font-size:16px; margin-bottom:25px; line-height:1.5em; }
#mmkbackend a  { color: var(--gralax-blue); font-family:PTSans; font-size:16px; }
#mmkbackend a:hover  { text-decoration:none; }

#mmkbackend .trennlinie { height:1px; background: #aaa; margin: 20px 0 20px 0; border:0; }

#mmkbackend .customerPanel { background-color: var(--gralax-white); /*#fff;*/ box-shadow: 0 0 5px rgba(0,0,0,0.3); border-radius:4px; padding:20px 25px; min-height:440px; margin-bottom:25px!important; }
#mmkbackend .basketPanel { background-color: var(--gralax-white); /*#fff;*/ box-shadow: 0 0 5px rgba(0,0,0,0.3); border-radius:4px; padding:20px 25px; margin-bottom:25px!important; }
#mmkbackend .basketAddressPanel { background-color: var(--gralax-white); /*#fff;*/ box-shadow: 0 0 5px rgba(0,0,0,0.3); border-radius:4px; padding:20px 25px; min-height:720px; margin-bottom:25px!important; }
#mmkbackend .searchblock { clear:both; display: block;  padding: 20px; margin: 25px 0; background:#fafafa; border-radius:4px; border:1px solid #ddd; }
#mmkbackend .searchblockAddress { clear:both; display: block;  padding: 20px; margin: 25px 0 5px; background:#fafafa; border-radius:4px; border:1px solid #ddd; }
#mmkbackend .block { display: block;  padding: 20px; margin: 25px 0; }
#mmkbackend .fspace { width:100%; margin:8px 0 15px; }
#mmkbackend .flabel { padding:16px 0; }
#mmkbackend .fspaceWK { width:100%; margin:4px 0 4px; }
#mmkbackend .flabelWK { padding:14px 0 8px; }

#mmkbackend .priceBlock { display:inline-block; margin-left:20px; width:100px; }
#mmkbackend .sumRow { padding:15px 5px; }
#mmkbackend .priceCell{ float:right; }


#mmkbackend .footer, #mmkback .footer { position:relative; margin-top:50px; z-index:999; padding: 5px 15px; bottom:0px; background: var(--gralax-gray); text-align:left; color:#fff; font-family:PTSans; font-size:14px; }
#mmkbackend .footer a, #mmkback .footer a { text-decoration:none; color: var(--gralax-white); font-size:14px; }

/* BASKET STUFF */

#mmkbackend .wkStepBar  { width:96%; height:5px; position:absolute; z-index:99; top:165px; margin:0 auto; left:2% }
#mmkbackend .wkState0   { background: linear-gradient(to left,  #ccc 100%, #a5c425 0%); }
#mmkbackend .wkState25  { background: linear-gradient(to left,  #ccc 69.75%, #a5c425 31.25%); }
#mmkbackend .wkState50  { background: linear-gradient(to left,  #ccc 43%, #a5c425 57%); }
#mmkbackend .wkState75  { background: linear-gradient(to left,  #ccc 25%, #a5c425 75%); }
#mmkbackend .wkState100 { background: #a5c425; }

#mmkbackend .wkStepContainer { width:96%; position:absolute; top:119px; z-index:100; font-size:13px; left:2%; }
#mmkbackend .wkStep  { float:left; width:25%; text-align:center;  }

#mmkbackend .wkStep a  { text-decoration:none; color: var(--gralax-black); font-size:13px; font-weight:bold;}
#mmkbackend .wkStep a:hover  { text-decoration:underline; }

#mmkbackend .wkStepBlock { width:80px; height:80px; }
#mmkbackend .wkStepBlockLast { float:right; width:80px; height:80px;}

#mmkbackend .wkStep1 { background: url('../icons/wkStep1Inavtive.png') no-repeat; }
#mmkbackend .wkStep1Active { background: url('../icons/wkStep1Active.png') no-repeat; }
#mmkbackend .wkStep2 { background: url('../icons/wkStep2Inactive.png') no-repeat; margin-left:12.5%;  }
#mmkbackend .wkStep2Reached { background: url('../icons/wkStep2Reached.png') no-repeat; }
#mmkbackend .wkStep2Active { background: url('../icons/wkStepActive.png') no-repeat; }
#mmkbackend .wkStep3 { background: url('../icons/wkStep3Inactive.png') no-repeat; margin-left:25%; }
#mmkbackend .wkStep3Reached { background: url('../icons/wkStep3Reached.png') no-repeat; }
#mmkbackend .wkStep3Active { background: url('../icons/wkStepActive.png') no-repeat; }
#mmkbackend .wkStep4 { background: url('../icons/wkStep4Inactive.png') no-repeat; }
#mmkbackend .wkStep4Reached { background: url('../icons/wkStep4Reached.png') no-repeat; }

#mmkbackend .supplierItemBlock { min-height:112px; border-radius:4px; margin:0 10px 10px 0!important; border:1px solid #c5c5c5; padding:10px; background-color:#fff;  }

/**
#mmkbackend .wktab { text-align:left; margin: 0 0 0 0; padding:0; list-style-type:none;}
#mmkbackend .wktab li { display:inline; font-family:PTSans; font-size: 16px; padding: 0px 10px 0 10px; margin:0;  }
#mmkbackend .wktab .active { display:inline; background: var(--gralax-blue); color: var(--gralax-white); border-radius: 4px; border: 1px solid var(--gralax-blue); padding:8px 12px; }
**/

#mmkbackend .wkStepDone { font-weight:bold; }


/* JBOX MODAL OVERWRITES */

#mmkback .sysModal { display:block; max-width: 420px; }
#mmkback .sysWin   { font-family: PTSans; font-size: 16px; color: var(--gralax-black); text-align: left; margin: 15px 10px; padding:0; letter-spacing:1px;}
#mmkback .sysWin .panelFull.apbutton { float:right; width:auto; background-color:var(--gralax-blue); border:1px solid var(--gralax-blue); font-size: 15px; font-family: PTSansCaption; padding: 8px 16px; outline:none; letter-spacing:1px; margin-bottom:5px; text-align:left; border-radius:4px; cursor:pointer; } 
#mmkback .sysWin .panelFull.apbutton.iconButton { padding:8px 10px; outline:none; margin-bottom:0; } 

#mmkback .sysTitle {  font-weight: bold; color: var(--gralax-blue); padding-bottom: 10px; border-bottom: 1px solid #ccc; }

#mmkback #jBox-overlay { background: rgba(0,0,0,0.4); }
#mmkback .jBox-closeButton-box .jBox-closeButton { top: -8px; right: -10px; width: 36px; height: 36px; background: #fff; border-radius: 50%; }
#mmkback .jBox-closeButton-box .jBox-closeButton svg {  width: 14px;  height: 14px;  margin-top: -7px;  margin-right: -7px; }
#mmkback .jBox-hasTitle.jBox-Modal.jBox-closeButton-box .jBox-closeButton { background: #fafafa; }


/* BUTTONS */


#mmkbackend .apbutton { color: #fff; cursor: pointer; display: inline-block; letter-spacing:0px; position: relative; font-size: 15px; font-family: PTSansCaption; padding: 8px; border-radius: 3px; text-decoration: none; }
#mmkbackend .apbutton.active { background-color:var(--gralax-blue); border:1px solid var(--gralax-blue); }

#mmkbackend .nTitle { font-size:11px; font-family: PTSans; margin-bottom:5px; }

#mmkbackend .panelFull.apbutton { width:100%; background: transparent; border:1px solid #aaa; letter-spacing:1px; margin-bottom:5px; text-align:left; } 
#mmkbackend .panelFull.apbutton:hover { background: var(--gralax-blue); border:1px solid var(--gralax-blue); }
#mmkbackend .panelFull.apbutton.active { background-color:var(--gralax-blue); border:1px solid var(--gralax-blue); }
#mmkbackend .panelFull.apbutton.linkstyle { display:block; width:100%; text-decoration:none; font-size:15px; }
#mmkbackend .panelFull.apbutton.linkfree { display:block; text-decoration:none; text-align:center; }

#mmkbackend .buttonTopSpacer { margin-top:5px; }
#mmkbackend .buttonAligner { float:left; width:auto!important; margin-left:10px; }

#mmkbackend .panelFull.apbutton.stdButton { width:auto; padding: 8px 16px; outline:none; margin-bottom:0; }
#mmkbackend .panelFull.apbutton.funcButton { float:right; width:auto; padding: 8px 16px; outline:none; margin-bottom:0; }

#mmkbackend .panelFull.apbutton.closeButton { position:relative; outline:none; top:-4px; border-radius:50%; width:24px; height:23px; padding:0; text-align:center; font-weight:bold; background: url('../icons/close_bt.png') 6px 5px no-repeat; background-size:10px; }
#mmkbackend .panelFull.apbutton.closeButton:hover { background: var(--gralax-blue) url('../icons/close_bt.png') 6px 5px no-repeat; background-size:10px; }

#mmkbackend .panelFull.apbutton.menuCloseButton { position:relative; outline:none; top:-4px; border:1px solid var(--gralax-blue); border-radius:50%; width:24px; height:23px; padding:0; text-align:center; font-weight:bold; background: var(--gralax-blue) url('../icons/close_bt.png') 6px 5px no-repeat; background-size:10px; }
#mmkbackend .panelFull.apbutton.menuSubCloseButton { position:relative; outline:none; top:-4px; border:1px solid var(--gralax-blue); border-radius:50%; width:24px; height:23px; padding:0; text-align:center; font-weight:bold; background: var(--gralax-blue) url('../icons/close_bt.png') 6px 5px no-repeat; background-size:10px; }

#mmkbackend .menuNextPanel { clear:both; display:block; height:40px; position:relative; bottom:50px; margin:0 auto; padding-top:20px; text-align:center; }
#mmkbackend .menuNextPanelAlt { clear:both; display:block; width:100%; height:70px; position:absolute; bottom:0px; margin:0 auto; padding-top:20px; text-align:center; }
#mmkbackend .menuNextPanelLvl3 { clear:both; display:block; width:100%; height:60px; bottom:0px; margin:0 auto; padding:20px 0 0; text-align:center; }

#mmkbackend .menuNextButton, #mmkbackend .menuCloseOkButton, #mmkbackend .menuNextSubButton { max-width:50%; text-align:center!important; }
#mmkbackend .menuSubCloseOkButton { max-width:200px; text-align:center!important; }

#mmkbackend .menuSuccessBtnLeft { float:left; width:50%; padding-right:25px; text-align:right; }
#mmkbackend .menuSuccessBtnRight { float:left; width:50%; text-align:left; }

/* TABS */

#mmkbackend .tabButton.apbutton { width:auto; float:left; margin-right:5px; outline:none; }
#mmkbackend .tabActive.apbutton { background: var(--gralax-blue); color:var(--gralax-white); border:1px solid var(--gralax-blue); outline:none; }
#mmkbackend .tabGray.apbutton { background: #f0f0f0; /* opacity:0.5;*/ color:#777; border:1px solid #ccc; outline:none; }
#mmkbackend .tabGray.apbutton:hover { color: #fff; }

#mmkbackend .tabContent {}
#mmkbackend .tabContentActive { display:block; }
#mmkbackend .tabContentInactive { display:none; }

#mmkbackend .amazonLoginButton { float:right; position:relative; margin-right:10px; top:-2px; }


/* TABLE STYLES */

#mmkbackend .admin, .adminL, .adminR        { border-collapse:collapse; border: 1px solid #ddd;  }

#mmkbackend th.admin, td.admin              { padding: 8px; text-align:center; }
#mmkbackend th.adminTop, td.adminTop        { padding: 0; text-align:left; vertical-align:top; }
#mmkbackend th.adminL, td.adminL            { padding: 8px; text-align:left; }
#mmkbackend th.adminR, td.adminR            { padding: 8px; text-align:right; }
#mmkbackend th.admin, th.adminL, th.adminR  { color: var(--gralax-white); background: var(--gralax-blue); /*#0093DB;*/ }
#mmkbackend tr.admin:nth-child(even)        { background-color: #fff }

#mmkbackend .checkcol { display:flex; }

#mmkbackend table.admin a       { color: #0093DB; text-decoration:none; }
#mmkbackend table.admin a:after { content: ""; font-size:1.375em; }

#mmkbackend .adcolor       { float:left; display:block; width:20px; height:20px; border:1px solid #ddd; border-radius:3px; margin-right:2px; }


/* COLS */

#mmkbackend .colMax { max-width:1140px; }

#mmkbackend .col100 { float:left; margin:0; width:100%; }
#mmkbackend .col75  { float:left; margin:0; display:block; width:72.083333333%; }
#mmkbackend .col50  { float:left; margin:0; display:block; width:47.083333333%; }
#mmkbackend .col66  { float:left; margin:0; display:block; width:63.7499999934%; }
#mmkbackend .col33  { float:left; margin:0; display:block; width:30.41666666634%; }
#mmkbackend .gold12 { float:left; margin:0; display:block; width:35.2799344590105125%; }
#mmkbackend .gold21 { float:left; margin:0; display:block; width:58.8867322089894833%; }
#mmkbackend .col25  { float:left; margin:0; display:block; width:22.0833333335%; }
#mmkbackend .col20  { float:left; margin:0; display:block; width:17.916666666%; }
#mmkbackend .col16  { float:left; margin:0; display:block; width:14.583333326666%; }
#mmkbackend .col13  { float:left; margin:0; display:block; width:13%; }


#mmkbackend .space2 { float:left; display:block; margin-right: 5.833333333333%; }
#mmkbackend .space3 { float:left; display:block; margin-right: 4.37500000049%; }
#mmkbackend .space4 { float:left; display:block; margin-right: 3.88888888866%; }
#mmkbackend .space5 { float:left; display:block; margin-right: 2.6041666666%; }
#mmkbackend .space6 { float:left; display:block; margin-right: 2.5%; }
#mmkbackend .space7 { float:left; display:block; margin-right: 1.5%; }

.col100 { float:left; width:100%; }
.col50  { float:left; width:47.5%;  }
.col60  { float:left; width:54%;  }
.col40  { float:left; width:40%;  }
.col33  { float:left; width:30.5%; }
.col25  { float:left; width:22.5%;  }

.space50 { margin-left:5%; }
.space40 { margin-left:6%; }
.space33 { margin-left:4.5%; }
.space25 { margin-left:3.33333333333333%; }

.right { text-align:right; }



   /*
   ##
   ##  BACKEND OBJEKTE ICON NAVIGATION (LINKS)
   ##
   */


@-o-keyframes fadeIt {
  0%   { background-color: rgba(32,47,108,0.0); }
  50%  { background-color: rgba(32,47,108,0.5); }
  100% { background-color: #202f6c; }
}

@keyframes fadeIt {
  0%   { background-color: rgba(32,47,108,0.0); }
  50%  { background-color: rgba(32,47,108,0.5); }
  100% { background-color: #202f6c; }
}



/**    #eyecon .objNaviSpace { height:20px; } **/

    #mmkbackend .navPanel      { user-select: none; display:none; position:absolute; z-index:98; font-size:14px; left:80px; top:0px; padding:74px 20px 20px 20px; height:100vh; height:100dvh; width:280px;  background:var(--gralax-black); letter-spacing:1px; }
    #mmkbackend #navTools .navPanel a {font-size:15px; }       
    #mmkbackend #navTools .menuLink { text-decoration:none; } 
    #mmkbackend #navTools .menuLinkActive { background: var(--gralax-black); }  

    #mmkbackend .navPanelTitle    { padding:20px 0 0 0; font-family: PTSansCaption; font-size:14px; text-transform: uppercase; text-align:left; font-weight:normal; }
    #mmkbackend .navPanelSubTitle { padding:20px 0 0 0; font-family: PTSansCaption; font-size:13px; text-align:left; }
    #mmkbackend .noTopSpacer     { padding:0; margin-top:5px!important; }
    
    #mmkbackend .navPanelBlock { margin-top:20px; /*background:#202629;*/ }
    #mmkbackend .dotted { border-radius:3px; border:2px dashed #3a444a; }
    /** #eyecon .lightbg { background: #30383d; } **/

    #mmkbackend .navPanelSeparator  { margin-top:20px; height:5px; background: url('../icons/backend_separator.png') repeat-x; }

    #mmkbackend .navButton { margin: 0 auto; cursor:pointer; /*height:54px;*/ /*background:rgba(34,37,49,0.4);*/ padding:10px 0; text-align:center; user-select: none; }
    #mmkbackend .navButton img { width:40px; height:40px; display:block; margin:0 auto 7px auto; }
    #mmkbackend .navButton.active  { background: var(--gralax-black); }
    #mmkbackend .navButton:hover { cursor:pointer; background-color: var(--gralax-black); /*#202f6c;*/ /*background:rgba(0,0,0,0.6); */

    /** background-image:none !important; 
         -o-animation: fadeIt 500ms ease-in; 
            animation: fadeIt 500ms ease-in; 
     **/

}

#mmkbackend .buttonGroup { display:table-row; width:100%; text-align:left; }

/* LOADER */

#mmkLoad     { position:relative; width:210px; height:25px; margin:auto; }
.mmkLoadInfo { width:100%; color: #ccc; font-size:12px; margin-top:25px; text-align:left; }
.mmkLoad     { position:absolute; top:0; background-color: var(--gralax-blue); width:20px;	height:20px; 
               animation-name:bounce_mmkLoad; -o-animation-name:bounce_mmkLoad;	-ms-animation-name:bounce_mmkLoad; -webkit-animation-name:bounce_mmkLoad; -moz-animation-name:bounce_mmkLoad;
  	       animation-duration:1.5s;	-o-animation-duration:1.5s; -ms-animation-duration:1.5s; -webkit-animation-duration:1.5s; -moz-animation-duration:1.5s; 
               animation-iteration-count:infinite; -o-animation-iteration-count:infinite; -ms-animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite;		-moz-animation-iteration-count:infinite;
	       animation-direction:normal; -o-animation-direction:normal; -ms-animation-direction:normal; -webkit-animation-direction:normal; -moz-animation-direction:normal;
	       transform:scale(.3); -o-transform:scale(.3); -ms-transform:scale(.3); -webkit-transform:scale(.3); -moz-transform:scale(.3); 
               border-radius:13px; -o-border-radius:13px; -ms-border-radius:13px; -webkit-border-radius:13px;-moz-border-radius:13px;
}

#mmkLoad_1 { left:0; animation-delay:0.6s; -o-animation-delay:0.6s; -ms-animation-delay:0.6s; -webkit-animation-delay:0.6s; -moz-animation-delay:0.6s; }
#mmkLoad_2 { left:26px;	animation-delay:0.75s; -o-animation-delay:0.75s; -ms-animation-delay:0.75s; -webkit-animation-delay:0.75s; -moz-animation-delay:0.75s; }
#mmkLoad_3 { left:52px;	animation-delay:0.9s; -o-animation-delay:0.9s; -ms-animation-delay:0.9s; -webkit-animation-delay:0.9s; -moz-animation-delay:0.9s; }
#mmkLoad_4 { left:79px;	animation-delay:1.05s; -o-animation-delay:1.05s; -ms-animation-delay:1.05s; -webkit-animation-delay:1.05s; -moz-animation-delay:1.05s; }
#mmkLoad_5 { left:105px; animation-delay:1.2s; -o-animation-delay:1.2s;	-ms-animation-delay:1.2s; -webkit-animation-delay:1.2s; -moz-animation-delay:1.2s; }
#mmkLoad_6 { left:131px; animation-delay:1.35s; -o-animation-delay:1.35s; -ms-animation-delay:1.35s; -webkit-animation-delay:1.35s; -moz-animation-delay:1.35s; }
#mmkLoad_7 { left:157px; animation-delay:1.5s; -o-animation-delay:1.5s;	-ms-animation-delay:1.5s; -webkit-animation-delay:1.5s;	-moz-animation-delay:1.5s; }
#mmkLoad_8 { left:184px; animation-delay:1.64s;	-o-animation-delay:1.64s; -ms-animation-delay:1.64s; -webkit-animation-delay:1.64s; -moz-animation-delay:1.64s; }

@keyframes bounce_mmkLoad{
	0%{
	transform:scale(1);
		background-color: var(--gralax-blue);
	}

	100%{
	transform:scale(.3);
		background-color:rgb(255,255,255);
	}
}

@-o-keyframes bounce_mmkLoad{
	0%{
	-o-transform:scale(1);
		background-color: var(--gralax-blue);
	}

	100%{
	-o-transform:scale(.3);
		background-color:rgb(255,255,255);
	}
}

@-ms-keyframes bounce_mmkLoad{
	0%{
	-ms-transform:scale(1);
		background-color: var(--gralax-blue);
	}

	100%{
	-ms-transform:scale(.3);
		background-color:rgb(255,255,255);
	}
}

@-webkit-keyframes bounce_mmkLoad{
	0%{
	-webkit-transform:scale(1);
		background-color: var(--gralax-blue);
	}

	100%{
	-webkit-transform:scale(.3);
		background-color:rgb(255,255,255);
	}
}

@-moz-keyframes bounce_mmkLoad{
	0%{
	-moz-transform:scale(1);
		background-color: var(--gralax-blue);
	}

	100%{
	-moz-transform:scale(.3);
		background-color:rgb(255,255,255);
	}
}



/* FORMS */

  /* */


#mmkbackend input    { box-sizing: border-box; padding:8px; font-size:15px; font-family:PTSans; border-radius:3px; border:1px solid #888; }
#mmkbackend select   { box-sizing: border-box; padding:8px; font-size:15px; font-family:PTSans; border-radius:3px; border:1px solid #888; }
#mmkbackend textarea { box-sizing: border-box; padding:8px; font-size:15px; font-family:PTSans; border-radius:3px; border:1px solid #888; }

#mmkbackend input::-webkit-outer-spin-button,
            input::-webkit-inner-spin-button {
                   -webkit-appearance: none;
                    margin: 0;
            }
  
#mmkbackend input[type=number] {
            -moz-appearance: textfield;
            }

 .sysModal input    { box-sizing: border-box; padding:8px; font-size:15px; font-family:PTSans; border-radius:3px; border:1px solid #888; color:#000; margin:15px 0; }
 .sysModal input:focus { border:1px solid #000; box-shadow:none; }
 .sysModal select   { box-sizing: border-box; padding:8px; font-size:15px; font-family:PTSans; border-radius:3px; border:1px solid #888; color:#000; margin:15px 0; }
 .sysModal select:focus { border:1px solid #000; box-shadow:none; }
 .sysModal textarea { box-sizing: border-box; padding:8px; font-size:15px; font-family:PTSans; border-radius:3px; border:1px solid #888; color:#000; margin:15px 0; }
 .sysModal textarea:focus { border:1px solid #000; box-shadow:none; }

 .sysWin .txtZeile { margin:2px 0; }

/* Customize checkbox */

#mmkbackend .container { display: block; position: relative; padding-left: 30px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; line-height:1.3em; }
#mmkbackend .container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
#mmkbackend .checkmark { position: absolute; top: 0; left: 0; height: 24px; width: 22px; background-color: #fff; border-radius:3px;  border:1px solid #888; }
#mmkbackend .container:hover input ~ .checkmark { background-color: #fff; }
#mmkbackend .container input:checked ~ .checkmark { background-color: var(--gralax-blue); border:1px solid var(--gralax-blue); }
#mmkbackend .checkmark:after { content: ""; position: absolute; display: none; }
#mmkbackend .container input:checked ~ .checkmark:after { display: block; }
#mmkbackend .container .checkmark:after { left: 7px; top: 4px; width: 7px; height: 12px; border: solid white; border-width: 0 3px 3px 0;  -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

/* Customize radiobox */
#mmkbackend .bulletmark { position: absolute; top: 2px; left: 0; height: 21px; width: 21px; background-color: #fff; border-radius: 50%; border:1px solid #888; }
#mmkbackend .container:hover input ~ .bulletkmark { background-color: #fff; border:1px solid #888; }
#mmkbackend .container input:checked ~ .bulletmark { background-color: var(--gralax-blue); }
#mmkbackend .bulletmark:after { content: ""; position: absolute; display: none; }
#mmkbackend .container input:checked ~ .bulletmark:after { display: block; }
#mmkbackend .container .bulletmark:after { top: 5px; left: 5px; width: 9px; height: 9px; border-radius: 50%; background: white; }

#mmkbackend .checkContainerForm { top:14px; padding:2px 0 0 35px; }
#mmkbackend .checkContainer { top:-11px; padding-left:0px; }

/**
#mmkbackend .buttonLayer { display:block; margin-top:40px; float:right; width:100%; }
**/



  /*BEZEICHNER*/

#mmkbackend .optMM::after { content: 'mm'; position:absolute; margin: 15px -35px 0; }
#mmkbackend .optEUR::after { content: '\20AC'; position:absolute; margin: 15px -18px 0; }
#mmkbackend .optEURTABLE::after { content: '\20AC'; position:absolute; margin: 8px -18px 0; }
#mmkbackend .optKG::after { content: 'kg'; position:absolute; margin: 15px -25px 0; }
#mmkbackend .optKGTABLE::after { content: 'kg'; position:absolute; margin: 8px -25px 0; }
#mmkbackend .optPROZ::after { content: '%'; position:absolute; margin: 15px -21px 0; }
#mmkbackend .optPROZTABLE::after { content: '%'; position:absolute; margin: 8px -21px 0; }
#mmkbackend .optPX::after { content: 'px'; position:absolute; margin: 15px -26px 0; }


/* ERROR MESSAGES */

#mmkbackend .panel    { box-sizing: border-box; background: #fff; font-size:13px; border-radius: 5px; box-shadow: 0 0 8px 0 #ccc; float: left; height: auto; margin:0 0 20px 0; text-align:left; }
#mmkbackend .panel100 { width: 100%; padding: 12px; }

#mmkbackend .msg      { display:block; padding-left:54px; }
#mmkbackend .msgOk    { clear:both; display: block; font-size:16px; color:#fff; background: #95b122 /*#a5c425*/ url('../icons/msgOk_w.svg') no-repeat; background-size: 42px 42px; background-position: 12px 12px; min-height:42px; }
#mmkbackend .msgError { clear:both; display: block; font-size:16px; color:#fff; background: #bb0000 url('../icons/msgError_w.svg') no-repeat; background-size: 42px 42px; background-position: 12px 12px; min-height:42px; }
#mmkbackend .msgWarn  { clear:both; display: block; font-size:16px; color:#fff; background: #ef8419 /*ffbb00*/ url('../icons/msgWarn_w.svg') no-repeat; background-size: 42px 42px; background-position: 12px 12px; min-height:42px; }


#mmkbackend .messagearea    { display:inline-block; user-select:none; position:absolute; z-index:110; width:100%; top:75px; text-align:center; max-width:768px; left: 50%; transform: translate(-50%, 0); }
#mmkbackend .msgErrorSmall  { clear:both; width:auto; text-align:left; font-family: PTSansCaption; font-size:14px; position: relative; z-index:99; margin:0 auto; /*left:50%; top:5px; transform: translate(-50%,0);*/ border-radius:5px; display: inline-block; padding:10px 10px 10px 40px;  margin: 5px 0 5px 0; color:#fff; background: #bb0000 url('../icons/msgError_w.svg') no-repeat; background-size: 24px 24px; background-position: 8px 8px; min-height:24px; }
#mmkbackend .msgWarnSmall   { clear:both; width:auto; text-align:left; font-family: PTSansCaption; font-size:14px; position: relative; z-index:99; margin:0 auto; /*left:50%; top:5px; transform: translate(-50%,0);*/ border-radius:5px; display: block; padding:10px 10px 10px 40px;  margin: 5px 0 5px 0; color:#fff; background: #ef8419 url('../icons/msgWarn_w.svg') no-repeat; background-size: 24px 24px; background-position: 8px 8px; min-height:24px; }
#mmkbackend .serientextbar  { clear:both; width:auto; text-align:left; font-family: PTSansCaption; font-size:14px; position: relative; z-index:99; margin:0 auto; border-radius:5px; display: inline-block; padding:10px 10px 10px 40px;  margin: 5px 0 5px 0; color:#fff; background: #673086 url('../icons/msgSerientext_w.svg') no-repeat; background-size: 18px 18px; background-position: 10px 10px; min-height:24px; }

.serienTextAddButton { position:relative; top:2px!important; padding: 5px 11px 6px!important; }
.serienTextDelButton { position:relative; top:2px!important; padding:8px!important; }

/* #mmkcon .infobar  { width:968px; padding:5px 5px 5px 5px;  margin: 10px 0 15px 0; border:1px solid #ddd; border-radius:3px; background:#ffe984; font-size:0.875em; } */
/* #mmkbackend .infobar  { width:1129px; padding:5px 5px 5px 5px;  margin: 10px 0 15px 0; border:1px solid #ddd; border-radius:3px; color:#fff; background: #95b122; font-size:0.875em; user-select:none; } */

#mmkbackend .formError { border:2px solid #f00; }


#mmkbackend .prodStateCircle0 { margin-top:2px; width:14px; height:14px; border-radius:50%; background-color: #999; }
#mmkbackend .prodStateCircle1 { margin-top:2px; width:14px; height:14px; border-radius:50%; background-color: #00dd00; }
#mmkbackend .prodStateCircle2 { margin-top:2px; width:14px; height:14px; border-radius:50%; background-color: #ffc94f; }

#mmkbackend .tooltip { position: relative; z-index:99; display: inline-block; border-bottom: 1px dotted  #0093DB; }
#mmkbackend .tooltip .tooltiptext { cursor:pointer; font-size: 13px; visibility: hidden; width: 400px; background-color: var(--gralax-white); color: var(--gralax-black); text-align: center; border-radius: 3px; padding: 12px; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -207px; box-shadow:0 0 10px rgba(0,0,0,0.4); }
#mmkbackend .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 99%;
    left: 50%;
    margin-left: -10px;
    margin-top:  -2px;
    border-width: 10px;

    border-style: solid;
    border-color: #0093DB transparent transparent transparent;

    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 15px solid rgba(255, 255, 255, .8);
}

#mmkbackend .tooltip:hover .tooltiptext {
    visibility: visible;
}


/* LISTS */

#mmkbackend #orderpanel       { display:block; position:absolute; z-index:97; top:0px; padding:93px 20px 20px 20px; box-sizing:border-box; left:80px; width:280px; background: #f5f5f5; height:100vh; height:100dvh; font-size:14px; overflow-y:auto;}
#mmkbackend .orderblock       { border:1px solid #888; border-radius:5px; padding:10px; margin-bottom:7px; }

#mmkbackend .materialrow      { padding:10px; border-radius:5px; border:1px solid #aaa; background:#fafafa; }
#mmkbackend .articlerow       { border-radius:5px; padding:10px; }
#mmkbackend .articlerow:hover { cursor:pointer; background:#f0f0f0; }
#mmkbackend .articledetails   { border-top:1px solid #aaa; margin-top:5px; font-weight:normal; padding-top:15px; }
#mmkbackend .articleactive    { background:#f0f0f0; font-weight:bold; border:1px solid #aaa; }

#mmkbackend .previewImg       { display: none; /*position:relative; top:-40px; left: -120px; z-index:99; */ }
/** #mmkbackend a:hover + .previewImg { display: block; } **/

/*
############################################################################
###                                                                         
###  CREATE STYLES
###                                                                           
*/

#create { padding-top:70px; }

#create input[type="file"] { display: none; }

#mmkback .jBox-container { border-radius:20px!important; }


#createTools  { display:block; position:fixed; z-index:100; width:280px; color: #fff; height:100vh; height:100dvh; top:0; padding-top:100px; font-size:12px; font-family:PTSans; }
#createTools a { font-size:12px; color:#fff; }

#createTools .grad { background: #fff; padding:4px 6px 2px; border:1px solid #888; }
#createTools .gradSelect { border:2px solid var(--gralax-blue); }



.createLoaderToolsButton { display:none; }
.createLoaderTools { display:block; user-select:none; margin-bottom:15px; }
.createBGSet { cursor: pointer; float:left; margin-right:4px; border:1px solid #222; width:24px; height:24px; border-radius:50%; }

#createInfobar { user-select:none; display:block; position:fixed; right:0px; z-index:99; width:280px; color: #fff; height:100vh; height:100dvh; top:0; padding-top:100px; font-size:12px; font-family:PTSans; }

#mmkbackend #priceCalc { position:absolute; background:#fff; top: 87px; padding:10px; left: -45px; width:250px; max-height:280px; overflow-y:scroll; display:none; }

/** margin-top: 10px; width: 240px; height: 230px; border-radius: 3px; border: 1px solid rgb(136, 136, 136); display: block; **/


#mmkbackend #textFontList, #mmkbackend #textCutFontList   { position:absolute; z-index:99; padding:3px; overflow-y:scroll; width:200px; height:150px; border:1px solid #ccc; border-radius:3px; background:#fff; }
#mmkbackend #textFontList a.fontSelList, #mmkbackend #textCutFontList a.fontSelList  { text-decoration:none; display:block; background:#fff; color: var(--gralax-black); font-size:1.125em; padding:4px; }
#mmkbackend #textFontList a.fontSelList:hover, #mmkbackend #textCutFontList a.fontSelList:hover { text-decoration:none; background: var(--gralax-blue); color: var(--gralax-white); }
#mmkbackend #textFontListClose, #mmkbackend #textCutFontListClose  { float:right; font-weight:bold; font-size:1.125em; cursor:pointer; border-radius:50%; background: var(--gralax-blue); color:var(--gralax-white); width:22px; height:24px; text-align:center; margin-top:8px; }

#mmkbackend .textFontList, #mmkbackend .textCutFontList   { position:absolute; z-index:99; padding:3px; overflow-y:scroll; top: -167px; width:160px; height:200px; border:1px solid #ccc; border-radius:3px; background:#fff; }
#mmkbackend .textFontList a, #mmkbackend .textCutFontList a { color:var(--gralax-black); }
#mmkbackend .textFontList a.fontSelList, #mmkbackend .textCutFontList a.fontSelList  { text-decoration:none; display:block; background:#fff; color: var(--gralax-black);  font-size:1.125em; padding:4px; }
#mmkbackend .textFontList a.fontSelList:hover, #mmkbackend .textCutFontList a.fontSelList:hover { text-decoration:none; background: var(--gralax-blue); color: var(--gralax-white); }
#mmkbackend .textFontListClose, #mmkbackend .textCutFontListClose  { float:right; font-weight:bold; font-size:1.125em; cursor:pointer; border-radius:50%; background: var(--gralax-blue); color:var(--gralax-white); width:22px; height:24px; text-align:center; margin-top:8px; }


/** #canvasBox { position:fixed; display:block; padding:0px 0px 148px 0px; width:100%; height:100vh; } **/
#canvasBox { position:fixed; display:block; padding:0; width:100vw; height:calc(100vh - 98px); height:calc(100dvh - 98px);  top: 70px; }

#objectEdit { display:none; user-select: none; position:fixed; z-index:98; width:auto; bottom:30px; left: 50%; transform: translate(-50%, 0);}
#objectEdit.objEdit { color:var(--gralax-black); font-family: PTSans; font-size:14px; background:rgba(255,255,255,0.8)!important; }
#objectEdit .objEditTitle { font-size:15px; margin:0 0 8px 0; display:block; min-height:18px; }

#objectEdit .objEditBlock { float:left; display: inline-block; margin-right:6px; }
#objectEdit .objEditRow   { height:38px; }

#objectEdit .stdInput  { width:55px; margin-left:5px; }
#objectEdit .stdInputHeight { width:55px; margin-left:10px; }

#objectEdit .respEditDim   { float:left; display:inline-block; }
#objectEdit .respEditPos   { float:left; display:inline-block; }
#objectEdit .respEditColor { float:left; display:inline-block; }
#objectEdit .objEditColorRow { float:none; }

#objectEdit input  { padding:5px 8px; }
#objectEdit select { padding:5px 8px; max-width:190px; }
#objectEdit .objEditButton { padding:3px 2px; border:1px solid #888; background: #fff; cursor:pointer; height:32px; background:#fff; border-radius:3px; }
#objectEdit .objEditButtonSpace { margin-left:2px; }

#objectEdit .grad { background: #fff; padding:4px 6px 2px; border:1px solid #888; }
#objectEdit .gradSelect { border:2px solid var(--gralax-blue); }

/** BW CONTROL */
              
#create .blackWhiteControl { position:absolute; display:none; top:120px; left:150px; width: 180px; background: #fff; z-index: 98; padding: 10px 10px 0 10px; border-radius: 6px; color: var(--gralax-black); font-size:12px; font-weight: bold; font-family: 'PTSansCaption'; border: 1px solid #888; }

/** RANGE SLIDER */

#create input[type=range] { -webkit-appearance: none; width: 98%; background-color: transparent; border:none; padding: 7px 0; margin-bottom:5px; }
#create input[type=range]:focus { outline: none; }
#create input[type=range]::-webkit-slider-runnable-track { width: 98%; height:3px; cursor: pointer; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; border-radius: 5px; background: var(--gralax-blue); margin-top:6px; border: 0px solid #000101; }
#create input[type=range]::-webkit-slider-thumb { box-shadow: 0px 0px 0px var(--gralax-blue), 0px 0px 0px #0d0d0d; border: 0px solid var(--gralax-blue); height: 20px; width: 20px; border-radius: 50%; background: var(--gralax-blue); cursor: pointer; -webkit-appearance: none; margin-top: -9px; }
#create input[type=range]:focus::-webkit-slider-runnable-track { background: var(--gralax-blue); }
#create input[type=range]::-moz-range-track { width: 98%; height:3px; cursor: pointer; box-shadow: 0px 0px 0px var(--gralax-blue), 0px 0px 0px #0d0d0d; background: var(--gralax-blue); border-radius: 25px; border: 0px solid #000101; }
#create input[type=range]::-moz-range-thumb { box-shadow: 0px 0px 0px var(--gralax-blue), 0px 0px 0px #0d0d0d; border: 0px solid var(--gralax-blue); height: 20px; width:20px; border-radius: 50%; background: #000; cursor: pointer; }
#create input[type=range]::-ms-track { width: 98%; height: 12.8px; cursor: pointer; background: transparent; border-color: transparent; border-width: 39px 0; color: transparent; }
#create input[type=range]::-ms-fill-lower { background: #ac51b5; border: 0px solid #000101; border-radius: 50px; box-shadow: 0px 0px 0px var(--gralax-blue), 0px 0px 0px #0d0d0d; }
#create input[type=range]::-ms-fill-upper { background: #ac51b5; border: 0px solid #000101; border-radius: 50px; box-shadow: 0px 0px 0px var(--gralax-blue), 0px 0px 0px #0d0d0d; }
#create input[type=range]::-ms-thumb { box-shadow: 0px 0px 0px var(--gralax-blue), 0px 0px 0px #0d0d0d; border: 0px solid var(--gralax-blue); height: 20px; width: 39px; border-radius: 7px; background: var(--gralax-blue); cursor: pointer; }
#create input[type=range]:focus::-ms-fill-lower { background: #ac51b5; }
#create input[type=range]:focus::-ms-fill-upper { background: #ac51b5; }



#create .respObjEditCloseButton { position:absolute; right:20px; outline:none; top:15px; border:1px solid var(--gralax-blue)!important; border-radius:50%; width:24px; height:23px; padding:0; text-align:center; font-weight:bold; background: var(--gralax-blue) url('../icons/close_bt.png') 6px 5px no-repeat; background-size:10px; display:none; } 

#create .navBox        { margin: 0px 15px 10px; padding:7px 15px; border-radius:20px; color: var(--gralax-black); background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.5); }
#create .navBoxNMLeft  { margin: 0 30px 0 0; padding:15px; border-radius:0 20px 20px 0; color: var(--gralax-black); background: var(--gralax-white); box-shadow: 0 0 10px rgba(0,0,0,0.5); }
#create .navBoxNMRight { margin: 0 0 0 30px; padding:15px; border-radius:20px 0 0 20px; color: var(--gralax-black); background: var(--gralax-white); box-shadow: 0 0 10px rgba(0,0,0,0.5); }

#create .crtNavPanel   { user-select: none; display:none; position:absolute; z-index:98; font-size:14px; left:260px; top:-40px; padding:0px 20px 20px 20px; color: var(--gralax-black); width:calc(100vw - 570px); width: -webkit-calc(100vw - 570px); height: calc(100vh - 158px); height: calc(100dvh - 158px); height: -webkit-calc(100vh - 158px); /*min-height:550px;*/ background: var(--gralax-bg-transparent); /*rgba(255,255,255,.8);*/ letter-spacing:1px; box-shadow: 0 0 10px rgba(0,0,0,0.5); border-radius:20px;  }
#create .crtNavPanelArrow { position: absolute; left: 0;  margin-left: -15px; height:auto; top: 56px; width: 0; height: 0; content:''; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-right: 15px solid rgba(255,255,255,.8); /*#fff;*/ }
#create .crtNavPanelResized { width:364px!important; }

#create .crtNavPanel a { font-size:15px; }       
#create .crtMenuLink { text-decoration:none; } 
#create .crtMenuLinkActive { background: rgba(255,255,255,0.8); /*#f5f5f5;*/ border-radius:5px; }  

.scrollMaterial { height:170px; display:flex; flex-direction: row; flex-shrink: 0; overflow-y: hidden; overflow-x:auto; padding-top:7px; margin-right:30px; }
.scrollMaterial::-webkit-scrollbar { height: 10px; }
.scrollMaterial::-webkit-scrollbar-track { border-radius: 8px; background: #e5e5e5; }
.scrollMaterial::-webkit-scrollbar-thumb { border-radius: 8px; background: var(--gralax-blue); }
.scrollMaterial { scrollbar-width: thin; scrollbar-color: var(--gralax-blue) #e5e5e5; }

.scrollAreaLvl2 { width: 100%; height: calc(100% - 100px); display:flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; padding-top:7px; }
.scrollAreaLvl2::-webkit-scrollbar { display:inherit; overflow:scroll }
.scrollAreaLvl2::-webkit-scrollbar { width: 10px; }
.scrollAreaLvl2::-webkit-scrollbar-track { border-radius: 8px; background: #e5e5e5; }
.scrollAreaLvl2::-webkit-scrollbar-thumb { border-radius: 8px; background: var(--gralax-blue); }
.scrollAreaLvl2 { scrollbar-width: thin; scrollbar-color: var(--gralax-blue) #e5e5e5; }

.scrollAreaLvl3 { width: 100%; height: 100%; /*calc(100% - 100px);*/ max-height:310px;  display:flex; flex-direction: row; overflow-y: auto; overflow-x: hidden;  padding-top:7px; }
.scrollAreaLvl3::-webkit-scrollbar { display:inherit; overflow:scroll }
.scrollAreaLvl3::-webkit-scrollbar { width: 10px; }
.scrollAreaLvl3::-webkit-scrollbar-track { border-radius: 8px; background: #e5e5e5; }
.scrollAreaLvl3::-webkit-scrollbar-thumb { border-radius: 8px; background: var(--gralax-blue); }
.scrollAreaLvl3 { scrollbar-width: thin; scrollbar-color: var(--gralax-blue) #e5e5e5; }

#create .crtNavPanelChild          { user-select: none; display:none; width:280px; max-width:280px; height:auto!important; position:absolute; z-index:98; font-size:14px; padding:0px 20px 20px 20px; color: var(--gralax-black); background:#fff; letter-spacing:1px; box-shadow: 0 0 10px rgba(0,0,0,0.5); border-radius:20px;  }
#create .crtNavPanelChildFixations { user-select: none; display:none; width:470px; max-width:470px; height:auto!important; position:absolute; z-index:98; font-size:14px; padding:0px 20px 20px 20px; color: var(--gralax-black); background:#fff; letter-spacing:1px; box-shadow: 0 0 10px rgba(0,0,0,0.5); border-radius:20px;  }

#create .fxLvl3LeftBlock { float:left; width:200px; margin-right:30px; }
#create .fxLvl3RightBlock { float:left; width:200px; }

#create .crtMenuLinkSubChild       { position:absolute; max-width:280px; z-index:100; background:#fff; }
#create .crtMenuLinkSubChildComponents { }

#create .bgWallpaper { position:absolute; z-index:99; top:/*120px;*/ 168px; right:2px; float:right; }

#mmkbackend .sysMessage { font-size:15px; color: var(--gralax-black); }
/** #create .sysMessage { font-size:15px; color: var(--gralax-black); } **/
#mmkback .createSysWin { font-size:15px; color: var(--gralax-black); width:780px; }
#mmkback .createSysWinVorlage { font-size:15px; color: var(--gralax-black); width:995px; }

#createTools .crtNavButton { padding:10px 0; background-size:32px; background-position:3px 13px; background-repeat:no-repeat; cursor:pointer; user-select:none; }

#createTools .crtMenuTitle { /*color: var(--gralax-black);*/ font-size:15px; font-family: PTSansCaption; font-weight:bold; margin-left:45px; margin-bottom:2px; }  
#createTools .crtMenuDesc  { /*color: var(--gralax-black);*/ margin-left:45px }  
#createTools .crtSmallTitle { display:none; padding:20px 0 0 0; font-family: PTSansCaption; font-size:12px; font-weight:bold; text-align:center; font-weight:normal; color: var(--gralax-black); }

#createTools .iconButton { border-radius:50%; padding:5px 7px; margin-bottom:2px; }
#createTools .iconButtonGroup { float:left; margin-right:8px; text-align:center; }

#createTools .crtPanelTitle     { padding:20px 0 0 0; margin-bottom:15px; font-family: PTSansCaption; font-size:14px; font-weight:bold; text-transform: uppercase; text-align:left; font-weight:normal; color: var(--gralax-blue); }
#createTools .crtPanelSubTitle  { padding:0 0 8px 0; font-family: PTSans; font-size:14px; text-align:left; }
#createTools .crtPanelDesc      { font-family: PTSansCaption; font-size:14px; text-align:left; color:var(--gralax-black); font-weight:bold; letter-spacing:0; }

#createTools .crtPanelFunctionBlock { width:300px; }

#createTools .subImage { margin-bottom:10px; }

 .crtPanelSeparator { margin-top:10px; height:5px; border-bottom: 1px solid #d5d5d5; }


/* PARTS SELECTOR */

#createTools .fixations  { float:left; width:316px; height:100px; margin:0 8px 8px 0; }
#createTools .components { float:left; width:316px; height:100px; margin:0 8px 8px 0; }
#createTools .zubehoerDesc  { display:none; }

#createTools .crtMenuSubLink { font-size:13px; display:inline; margin-top:3px; background-color: transparent; color:var(--gralax-blue); padding:2px; cursor:pointer;}
#createTools .crtMenuSubLinkFixations { font-size:13px; display:inline;  margin-top:3px; background-color: transparent; color:var(--gralax-blue); padding:2px; cursor:pointer;}
#createTools .crtMenuSubLinkComponents { font-size:13px; display:inline;  margin-top:3px; background-color: transparent; color:var(--gralax-blue); padding:2px; cursor:pointer;}

#createTools .itemImage     { float:left; margin:5px 0;}
#createTools .itemDesc      { float:left; color:var(--gralax-black); margin:22px 0 0 15px; font-size:14px; line-height:1.4em; max-width:190px; overflow:hidden; white-space:nowrap; }
#createTools .itemDescTitle { float:left; margin: 5px 0; color:var(--gralax-black); font-size:14px; line-height:1.4em; text-align:center; }
#createTools .itemDesc a    { color: var(--gralax-blue); font-size:13px; text-decoration:none; }


#createTools .panelThird { float: left; margin: 0 8px 8px 0; border: 2px solid #e5e5e5; width: 100px; height: 100px; background: #fff; border-radius: 5px; }
#createTools .panelThirdClose { float: left; /* margin: 0 0 8px 0; */ margin: 0 8px 8px 0; border: 2px solid #e5e5e5;  width: 100px; height: 100px; background: #fff; border-radius: 5px;  }
#createTools .panelThird .sm, #createTools .panelThirdClose .sm { display: block;  margin-top: 2px; font-family: PTSans; font-size: 12px; }

#createTools .colorThird { float: left; margin: 0 8px 8px 0; border: 2px solid #e5e5e5; width: 100px; height: 100px; background: #fff; border-radius: 5px; }
#createTools .colorThirdClose { float: left; /* margin: 0 0 8px 0; */ margin: 0 8px 8px 0; border: 2px solid #e5e5e5;  width: 100px; height: 100px; background: #fff; border-radius: 5px;  }
#createTools .colorThird .sm, #createTools .colorThirdClose .sm { display: block;  margin-top: 2px; font-family: PTSans; font-size: 12px; }

#createTools .panelMaterial { float:left; position:relative; flex-shrink: 0; padding:0; margin: 0 8px 8px 0; border: 2px solid #e5e5e5; width: 130px; height: 130px; background: #fff; border-radius: 5px; cursor:pointer; }
#createTools .panelMaterialImage { display:inline-block; width:100%; height:108px; padding:0; background-position:center; background-size:cover; }
#createTools .panelMaterialName { display:block; position:absolute; top:98px; overflow:hidden; width:100%; margin:0 auto; text-align:center; padding-top:5px; font-weight:bold; height:25px; background: #fff; color: var(--gralax-black); }

#createTools .activeItem { border:3px solid var(--gralax-blue); }

/* #createTools .grad       { border:1px solid #aaa; } */
#createTools .gradSelect { border:3px solid var(--gralax-blue); }

#createTools .panelMaterial.gradSelect:after { content: '\2714'; font-family:PTSans; font-size:14px; font-weight:bold; text-align:center; color:#fff; width:24px; height:24px; position:absolute; border-radius: 50%; top: -7px; right:-7px; background: var(--gralax-blue); padding-top:2px; }
#SLIDERFORMS .gradSelect:after, #SLIDERBORDERS .gradSelect:after, #SLIDERCOLORS .gradSelect:after  { content: '\2714'; font-family:PTSans; font-size:14px; font-weight:bold; text-align:center; color:#fff; width:24px; height:24px; position:absolute; border-radius: 50%; top: -7px; right:-7px; background: var(--gralax-blue); padding-top:2px; }

#createTools .part       { cursor:pointer; position:relative; border:1px solid #e5e5e5; background: #fff; margin-bottom:10px; border-radius:5px; padding:6px 8px 5px 10px; }
#createTools .partSelect { cursor:pointer; position:relative; border:2px solid var(--gralax-blue); background: #f5f5f5;  margin-bottom:10px; border-radius:5px; padding:6px 8px 5px 10px; }
#createTools .partSelect:after { content: '\2714'; font-family:PTSans; font-size:14px; font-weight:bold; text-align:center; color:var(--gralax-white); width:24px; height:24px; position:absolute; border-radius: 50%; top: -7px; right:-7px; background: var(--gralax-blue); padding-top:2px; }
#createTools .partImage  { width:74px; height:74px; border:3px solid #fff; border-radius:5px; }

#createTools .components.part:hover::after { content: '\FF0B'; font-family:PTSans; font-size:23px; line-height:16px; font-weight:bold; text-align:center; color:var(--gralax-white); width:24px; height:24px; position:absolute; border-radius: 50%; top: -7px; right:-7px; background: var(--gralax-blue); padding-top:3px; } 

#createTools .codeBG { background-size:65%; background-repeat:no-repeat; }
#createTools .panelCodeMode { float:left; position:relative; flex-shrink: 0; padding:8px 12px; margin: 0 8px 8px 0; border: 2px solid #e5e5e5; width: 96px; height: 40px; background: #fff; border-radius: 5px; cursor:pointer; font-weight:bold; }
#createTools .panelCodeMode.gradSelect:after { content: '\2714'; font-family:PTSans; font-size:14px; font-weight:bold; text-align:center; color:#fff; width:24px; height:24px; position:absolute; border-radius: 50%; top: -7px; right:-7px; background: var(--gralax-blue); padding-top:2px; }
#createTools .previewCodesContainer { width:200px; height:200px; border:1px solid #f5f5f5; background:#fff; padding:20px; }
#createTools .codeErrBlock { padding:10px 0; font-weight:bold; color:#d00; display:none; }

#CUTFORMDISPLAY .panelThird:hover::after { content: '\FF0B'; font-family:PTSans; font-size:23px; line-height:16px; font-weight:bold; text-align:center; color:var(--gralax-white); width:24px; height:24px; position:absolute; border-radius: 50%; top: -7px; right:-7px; background: var(--gralax-blue); padding-top:3px; } 
#SIMAGEDATABASE .panelThird:hover::after { content: '\FF0B'; font-family:PTSans; font-size:23px; line-height:16px; font-weight:bold; text-align:center; color:var(--gralax-white); width:24px; height:24px; position:absolute; border-radius: 50%; top: -7px; right:-7px; background: var(--gralax-blue); padding-top:3px; } 

#createTools .matColor { font-size: 12px; }

#createInfobar .materialName { margin-bottom:5px; font-size:18px;  }
#createInfobar .materialPropertiesValues { float:left; line-height:1.5em; max-width:128px; /*140px*/ overflow:hidden; white-space:nowrap;}

#createInfobar .wkEngraveDiv { float:left; width:70%; }
#createInfobar .wkAmountDiv  { float:left; width:28%; }

#createInfobar .wkAmountLabel { margin: 8px 0px; font-size:15px; }

#createInfobar .wkButtonDiv { float:left; width:100%; }
#createInfobar .wkButtonGreen { width:100%; background: #95b122!important; color:#fff; border:1px solid #95b122!important; text-align:center!important;  }
#createInfobar .wkButton { width:100%; text-align:center; }
#createInfobar .wkButton.inactive { background: #aaa!important; }
#createInfobar .wkButton.inactive:hover { background: var(--gralax-blue)!important; }

#createInfobar .schildObjList { height:284px; overflow-y:auto; }
#createInfobar .schildObjListSmall { height:154px; }  /* because of hidden MiniView */
#createInfobar .schildObjLayer { display:block; cursor:pointer; background-color:#f5f5f5; font-size:11pt; border:1px solid #cccccc; border-radius:6px; margin-bottom:5px; padding: 8px 8px 8px 36px; }
#createInfobar .schildObjLayer.grad { border:2px solid #aaa; }
#createInfobar .schildObjLayer.gradSelect { border:2px solid var(--gralax-blue); }
#createInfobar .schildNoObjects { display:block; text-align:center; padding:8px 12px; font-weight:bold; }

#createInfobar .layerImg          { background-position:4px 7px; background-size: 22px 22px; background-repeat:no-repeat;}
#createInfobar .layerImgText      { background-image: url('../icons/create_text.svg');  }
#createInfobar .layerImgCutform   { background-image: url('../icons/create_cutforms.svg'); }
#createInfobar .layerImgImage     { background-image: url('../icons/create_images.svg'); }
#createInfobar .layerImgComponent { background-image: url('../icons/create_components.svg');  }
#createInfobar .layerImgCodes     { background-image: url('../icons/create_qrcode.svg');  }

#createInfobar #wkPriceJS { font-size:26px; color: var(--gralax-black); font-weight:bold; line-height:0.75em; }

#createInfobar .priceBox { text-align:right; margin:15px 20px 5px 0; }

#createInfobar .wkRespButtonBar { display:none; }
#createInfobar .wkRespPrice { display:none; }
#createInfobar .wkMengeWidth { width:50px; }

#createInfobar .clearDiv { clear:both; margin-bottom:10px; }

#create .infobar { font-size:14px; }

#create #navLeft  { display:none; }
#create #navRight { display:none; }
#create .responsiveNavBox { position:relative; left:0px; }

#mmkback .respActionButtonMargin { margin-right:10px; }

/**

#scrollbar2             { margin:0px auto 0px; position:relative; }
#scrollbar2 .viewport   { height:100%; overflow:hidden; position:relative; top: 0;  }
#scrollbar2 .overview   { list-style:none; position:relative; left:0; top: 0px; margin:0; padding: 7px 0; }
#scrollbar2 .scrollbar  { background: #e5e5e5; border-radius:4px; position:absolute; background-position:0 0; right: -10px; top: 0px; width: 10px; }
#scrollbar2 .track      { background: transparent; width:10px; position:relative; padding:0 1px; }
#scrollbar2 .thumb      { background: #e5e5e5 url(../icons/bg-scrollbar-thumb-y-blue.png) no-repeat 50% 100%; height:20px; width:10px; cursor:pointer; overflow:hidden; position:absolute; top:0; left: 0px; }
#scrollbar2 .thumb .end { background: #e5e5e5 url(../icons/bg-scrollbar-thumb-y-blue.png) no-repeat 50% 0; overflow:hidden; height:5px; width: 10px; }
#scrollbar2 .disable    { display:none; }

#scrollbar3             { margin:0px auto 0px; position:relative; }
#scrollbar3 .viewport   { height:100%; overflow:hidden; position:relative; top: 0;  }
#scrollbar3 .overview   { list-style:none; position:relative; left:0; top: 0px; margin:0; padding: 7px 0; }
#scrollbar3 .scrollbar  { background: #e5e5e5; border-radius:4px; position:absolute; background-position:0 0; right: -10px; top: 0px; width: 10px; }
#scrollbar3 .track      { background: transparent; height:100%; width:10px; position:relative; padding:0 1px; }
#scrollbar3 .thumb      { background: #e5e5e5 url(../icons/bg-scrollbar-thumb-y-blue.png) no-repeat 50% 100%; height:20px; width:10px; cursor:pointer;  overflow:hidden; position:absolute; top:0; left: 0px; }
#scrollbar3 .thumb .end { background: #e5e5e5 url(../icons/bg-scrollbar-thumb-y-blue.png) no-repeat 50% 0; overflow:hidden; height:5px; width: 10px; }
#scrollbar3 .disable    { display:none; }

#scrollbar4             { margin:0px auto 0px; position:relative; }
#scrollbar4 .viewport   { height:100%; overflow:hidden; position:relative; top: 0;  }
#scrollbar4 .overview   { list-style:none; position:relative; left:0; top: 0px; margin:0; padding: 7px 0; }
#scrollbar4 .scrollbar  { background: #e5e5e5; border-radius:4px; position:absolute; background-position:0 0; right: -10px; top: 0px; width: 10px; }
#scrollbar4 .track      { background: transparent; height:100%; width:10px; position:relative; padding:0 1px; }
#scrollbar4 .thumb      { background: #e5e5e5 url(../icons/bg-scrollbar-thumb-y-blue.png) no-repeat 50% 100%; height:20px; width:10px;  cursor:pointer;  overflow:hidden; position:absolute; top:0; left: 0px; }
#scrollbar4 .thumb .end { background: #e5e5e5 url(../icons/bg-scrollbar-thumb-y-blue.png) no-repeat 50% 0; overflow:hidden; height:5px; width: 10px; }
#scrollbar4 .disable    { display:none; }

#scrollbar5             { margin:0px auto 0px; position:relative; }
#scrollbar5 .viewport   { height:100%; overflow:hidden; position:relative; top: 0;  }
#scrollbar5 .overview   { list-style:none; position:relative; left:0; top: 0px; margin:0; padding: 7px 0; }
#scrollbar5 .scrollbar  { background: #e5e5e5; border-radius:4px; position:absolute; background-position:0 0; right: -10px; top: 0px; width: 10px; }
#scrollbar5 .track      { background: transparent; height:100%; width:10px; position:relative; padding:0 1px; }
#scrollbar5 .thumb      { background: #e5e5e5 url(../icons/bg-scrollbar-thumb-y-blue.png) no-repeat 50% 100%; height:20px; width:10px; cursor:pointer;  overflow:hidden; position:absolute; top:0; left: 0px; }
#scrollbar5 .thumb .end { background: #e5e5e5 url(../icons/bg-scrollbar-thumb-y-blue.png) no-repeat 50% 0; overflow:hidden; height:5px; width: 10px; }
#scrollbar5 .disable    { display:none; }

#scrollbar6             { margin:0px auto 0px; position:relative; }
#scrollbar6 .viewport   { height: 100%; overflow:hidden; position:relative; top: 0;  }
#scrollbar6 .overview   { list-style:none; position:relative; left:0; top: 0px; margin:0; padding: 7px 0; }
#scrollbar6 .scrollbar  { background: #e5e5e5; border-radius:4px; position:absolute; background-position:0 0; right: -10px; top: 0px; width: 10px; }
#scrollbar6 .track      { background: transparent; height:100%; width:10px; position:relative; padding:0 1px; }
#scrollbar6 .thumb      { background: #e5e5e5 url(../icons/bg-scrollbar-thumb-y-blue.png) no-repeat 50% 100%; height:20px; width:10px; cursor:pointer;  overflow:hidden; position:absolute; top:0; left: 0px; }
#scrollbar6 .thumb .end { background: #e5e5e5 url(../icons/bg-scrollbar-thumb-y-blue.png) no-repeat 50% 0; overflow:hidden; height:5px; width: 10px; }
#scrollbar6 .disable    { display:none; }

#scrollbar7             { margin:0px auto 0px; position:relative; }
#scrollbar7 .viewport   { height: 100%; overflow:hidden; position:relative; top: 0;  }
#scrollbar7 .overview   { list-style:none; position:relative; left:0; top: 0px; margin: 0; padding: 7px 0; }
#scrollbar7 .scrollbar  { background: #e5e5e5; border-radius:4px; position:absolute; background-position:0 0; right: -10px; top: 0px; width: 10px; }
#scrollbar7 .track      { background: transparent; height:100%; width:10px; position:relative; padding:0 1px; }
#scrollbar7 .thumb      { background: #e5e5e5 url(../icons/bg-scrollbar-thumb-y-blue.png) no-repeat 50% 100%; height:20px; width:10px; cursor:pointer;  overflow:hidden; position:absolute; top:0; left: 0px; }
#scrollbar7 .thumb .end { background: #e5e5e5 url(../icons/bg-scrollbar-thumb-y-blue.png) no-repeat 50% 0; overflow:hidden; height:5px; width: 10px; }
#scrollbar7 .disable    { display:none; }

#scrollbar8             { margin:0px auto 0px; position:relative; }
#scrollbar8 .viewport   { height: 100%; overflow:hidden; position:relative; top: 0;  }
#scrollbar8 .overview   { list-style:none; position:relative; left:0; top: 0px; margin:0; padding: 7px 0; }
#scrollbar8 .scrollbar  { background: #e5e5e5; border-radius:4px; position:absolute; background-position:0 0; right: -10px; top: 0px; width: 10px; }
#scrollbar8 .track      { background: transparent; height:100%; width:10px; position:relative; padding:0 1px; }
#scrollbar8 .thumb      { background: #e5e5e5 url(../icons/bg-scrollbar-thumb-y-blue.png) no-repeat 50% 100%; height:20px; width:10px; cursor:pointer;  overflow:hidden; position:absolute; top:0; left: 0px; }
#scrollbar8 .thumb .end { background: #e5e5e5 url(../icons/bg-scrollbar-thumb-y-blue.png) no-repeat 50% 0; overflow:hidden; height:5px; width: 10px; }
#scrollbar8 .disable    { display:none; }

#scrollbar9             { margin:0px auto 0px; position:relative; }
#scrollbar9 .viewport   { height:100%; overflow:hidden; position:relative; top: 0;  }
#scrollbar9 .overview   { list-style:none; position:relative; left:0; top: 0px; margin:0; padding: 7px 0; }
#scrollbar9 .scrollbar  { background: #e5e5e5; border-radius:4px; position:absolute; background-position:0 0; right: -10px; top: 0px; width: 10px; }
#scrollbar9 .track      { background: transparent; height:100%; width:10px; position:relative; padding:0 1px; }
#scrollbar9 .thumb      { background: #e5e5e5 url(../icons/bg-scrollbar-thumb-y-blue.png) no-repeat 50% 100%; height:20px; width:10px; cursor:pointer;  overflow:hidden; position:absolute; top:0; left: 0px; }
#scrollbar9 .thumb .end { background: #e5e5e5 url(../icons/bg-scrollbar-thumb-y-blue.png) no-repeat 50% 0; overflow:hidden; height:5px; width: 10px; }
#scrollbar9 .disable    { display:none; }

#scrollbar10             { margin:0px auto 0px; position:relative; }
#scrollbar10 .viewport   { height:100%; overflow:hidden; position:relative; top: 0;  }
#scrollbar10 .overview   { list-style:none; position:relative; left:0; top: 0px; margin:0; padding: 7px 0; }
#scrollbar10 .scrollbar  { background: #e5e5e5; border-radius:4px; position:absolute; background-position:0 0; right: -10px; top: 0px; width: 10px; }
#scrollbar10 .track      { background: transparent; height:100%; width:10px; position:relative; padding:0 1px; }
#scrollbar10 .thumb      { background: #e5e5e5 url(../icons/bg-scrollbar-thumb-y-blue.png) no-repeat 50% 100%; height:20px; width:10px; cursor:pointer;  overflow:hidden; position:absolute; top:0; left: 0px; }
#scrollbar10 .thumb .end { background: #e5e5e5 url(../icons/bg-scrollbar-thumb-y-blue.png) no-repeat 50% 0; overflow:hidden; height:5px; width: 10px; }
#scrollbar10 .disable    { display:none; }

#scrollbar11             { margin:0px auto 0px; position:relative; }
#scrollbar11 .viewport   { height:100%; overflow-x:hidden; overflow-y:auto; position:relative; top: 0;  }
#scrollbar11 .overview   { list-style:none; position:relative; left:0; top: 0px; margin:0; padding: 7px 0; }
#scrollbar11 .scrollbar  { background: #e5e5e5; border-radius:4px; position:absolute; background-position:0 0; right: -10px; top: 0px; width: 10px; }
#scrollbar11 .track      { background: transparent; height:100%; width:10px; position:relative; padding:0 1px; }
#scrollbar11 .thumb      { background: #e5e5e5 url(../icons/bg-scrollbar-thumb-y-blue.png) no-repeat 50% 100%; height:20px; width:10px; cursor:pointer;  overflow:hidden; position:absolute; top:0; left: 0px; }
#scrollbar11 .thumb .end { background: #e5e5e5 url(../icons/bg-scrollbar-thumb-y-blue.png) no-repeat 50% 0; overflow:hidden; height:5px; width: 10px; }
#scrollbar11 .disable    { display:none; }

**/


/** border-radius:10px; border:1px solid #ccc; width:100%; height:130px; margin:7px 0; display:table; padding:3px; */

#miniViewPanel { position:relative; float:left; width:100%; height:130px; text-align:center; margin:7px 0; /*border:1px solid #3a444a;*/ /*#fff;*/ padding:10px; border-radius:3px; }
#miniView { width:162px; height:98px; /*width:100%; height:100%; background: rgba(255,0,0,0.1);*/ }
#shownarea { display:none; position:absolute; cursor:move; display:block; width:162px; height:98px; /*border:2px solid #0891d1;*/ top:10px; left:10px; }


/** TEMPLATES */

#mmkback .loadSignLink{ display:none; background: var(--gralax-blue); color:var(--gralax-white); position:relative; z-index:99; top: -60px; padding:10px; cursor:pointer; width:100%; text-align:center; height:60px; margin-bottom:-60px; border-radius: 0 0 5px 5px; }
#mmkback .loadSignTemplate { float:left; border:1px solid #ddd; border-radius:5px; }
#mmkback .loadSignTemplate:hover .loadSignLink { display: block; }
#mmkback .loadSignTemplate a { color:#fff; text-decoration:none; font-weight:bold; }

#mmkback .signRowImage  { float:left; float:left; padding:5px; margin-right:20px; width:140px; height:80px; background-origin: content-box; border:1px solid #aaa; border-radius:4px;  background-size:contain; background-repeat:no-repeat; background-position:center; }
#mmkback .signRowItem   { float:left; padding:20px 20px 0 0; }
#mmkback .signRowButton { float:right; padding:20px 20px 0 0; }

#mmkbackend .navPanelBlock { margin-top:20px; /*background:#202629;*/ }

#mmkbackend .navButton { margin: 0 auto; cursor:pointer; /*height:54px;*/ /*background:rgba(34,37,49,0.4);*/ padding:10px 0; text-align:center; user-select: none; }
#mmkbackend .navButton img { width:40px; height:40px; display:block; margin:0 auto 7px auto; }
#mmkbackend .navButton.active  { background: var(--gralax-black); }
#mmkbackend .navButton:hover { cursor:pointer; background-color: var(--gralax-black); }

#mmkbackend .buttonGroup { display:table-row; width:100%; text-align:left; }


/* JBOX OVERWRITES */

.jBox-container { background: var(--gralax-white)!important; }
.jBox-closeButton { background: var(--gralax-white)!important; }


/* RESPONSIVE */

@media only screen 
and (max-width : 480px) 
{
     #mmkmenu { position:relative; right:auto;}

     #mmkbackend #topnav { display:none; }
       
  /* NAVIGATION */
 
     #mmkbackend #backlogo { width: 180px; background-size:90%; background-position:10px 22px; }
     #mmkbackend .headerlogo { height: 40px; }

     #mmkbackend .slogan {  left: 10px; top: 0; }

     #mmkbackend #navTools { position: relative; width: 100%; height: 103px; top: 40px; /*padding-top: 100px;*/ float:left; }

     #mmkbackend #navTools .menuLink { text-decoration: none; width:62px; }
     #mmkbackend #navTools .menuDesc { display:none; }

     #mmkbackend .navPanel { width:100%; min-width:218px; top:95px; left:0px; height:auto; padding:10px 25px 25px 25px; }

     #mmkbackend .navButton img { width:32px; height:32px; display:block; margin:0 auto 7px auto; }
     #mmkbackend .navButton { padding: 16px 0 8px; top: -68px; position: relative; float:left; width:50px; }

     #mmkbackend #usernav   { margin-right: 64px; width:auto;}

     #mmkmenu .userPanel    { left:-90px; }
     #mmkmenu .wkBlock      { width:auto; }
     #mmkmenu .wkTextPanel  { display:none; }

     #mmkmenu .usText       { display:none; }
     #mmkmenu .usLoggedText { display:none; }

     #mmkbackend #mobilebox { width:auto; right:10px; }
     #mmkbackend .mobilebutton { /*width: 36px; height: 36px; background-size: 36px 36px; margin-top: 18px;*/ }

     /*
     #mmkbackend #mobilemenu { display:none; position:absolute; z-index:99; top: 70px; width:50%; margin-left:50%; padding-top: 0px; overflow-y: auto; background-color: var(--gralax-white);  }
     #mmkbackend #mobilemenu a { color: var(--gralax-blue); }
     #mmkbackend #mobilemenu a:hover { background-color: var(--gralax-blue); color: var(--gralax-white); }
     */

  /* FORMS */

     #mmkbackend .flabel { padding:4px 0; }

  /* MODAL */

     #mmkback .sysModal { display: block;  width:auto; max-width: 250px; }

  /* CONTENT */

     #mmkbackend h1 { font-size:26px; }
     #mmkbackend #workspace { padding:50px 15px 15px 15px; }
     #mmkbackend .block { padding:0; }
     #mmkbackend .workFilesArea { display:none; }

     #mmkbackend .amazonLoginButton { float:right; position:relative; margin:10px 0 0 0; }


  /* SPECIAL DESIGN CLASSES SM */

     #mmkbackend .kkEditButton { text-align:left; margin-top:25px; }
     #mmkbackend .kkForceLeft { text-align:left; }
     #mmkbackend .marginTopSM { margin-top:15px; }


  /* TABLE HIDERS */

     #mmkbackend .hideSM { display:none; }
     #mmkbackend .tableScrollX { overflow-y:scroll; padding-bottom:35px; }
     #mmkbackend .classicTable { display:none; } 
     

  /* COLS */

     #mmkbackend .colMax  { padding: 4%; width:100%; }
     #mmkbackend .col75   { width:100%; }
     #mmkbackend .col66   { width:100%; }
     #mmkbackend .col50   { width:100%; }
     #mmkbackend .col33   { width:100%; }
     #mmkbackend .col25   { width:100%; }
     #mmkbackend .col20   { width:100%; }

  /* BASKET */

     #mmkbackend .pmKlarnaInnerRow  { margin: 25px 0 0 0; }
     #mmkbackend .wkDataTab { display:none; }
     #mmkbackend .schildDatenBlock1 { display:block; }
     #mmkbackend .schildDatenBlock2 { display:none; }

  /* CREATE */
  
     #create .crtNavPanelChildFixations { max-width:300px; }

}

@media only screen 
and (min-width : 481px) and (max-width : 768px)
{
     #mmkmenu { position:relative; right:auto;}
     #mmkbackend #topnav { display:none; }

  /* NAVIGATION */

     #mmkbackend #backlogo { width:50%; background-size:80%; background-position:20px 13px; }

     #mmkbackend .slogan {  left: 20px; top: -30px; }
 
     #mmkbackend .navPanel { width:auto; min-width:218px; }
     /** #mmkbackend #mobilemenu { display:none; position:absolute; z-index:99; top: 70px; padding-top: 0px; overflow-y:scroll; backg } **/

     #mmkbackend #navTools { position: relative; width: 100%; height: 125px; top: 40px; /*padding-top: 100px;*/ float:left; }
     #mmkbackend .navPanel { width:100%; min-width:218px; top:125px; left:0px; height:auto; padding:10px 25px 25px 25px; }

     #mmkbackend .navButton { padding: 16px 0 16px; top: -69px; position: relative; float:left; width:80px; }

     #mmkbackend #usernav   { margin-right: 64px; width:auto;}

     #mmkmenu .userPanel    { left:-90px; }
     #mmkmenu .wkBlock      { width:auto; }
     #mmkmenu .wkTextPanel  { display:none; }

     #mmkmenu .usText       { display:none; }
     #mmkmenu .usLoggedText { display:none; }

     #mmkbackend #mobilebox { /*width:auto; right:10px;*/ }
     #mmkbackend .mobilebutton { /*width: 36px; height: 36px; background-size: 36px 36px; margin-top: 18px;*/ }
     
     /**
     #mmkbackend #mobilemenu { display:none; position:absolute; z-index:99; top: 70px; width:50%; margin-left:50%; padding-top: 0px; overflow-y: auto; background-color: var(--gralax-white);  }
     #mmkbackend #mobilemenu a { color: var(--gralax-blue); }
     #mmkbackend #mobilemenu a:hover { background-color: var(--gralax-blue); color: var(--gralax-white); }
     **/

  /* FORMS */

     #mmkbackend .flabel { padding:4px 0; }

  /* MODAL */

     #mmkback .sysModal { display: block;  width:auto; max-width: 320px; }


  /* CONTENT */

     #mmkbackend h1 { font-size:26px; }
     #mmkbackend #workspace { padding:50px 15px 15px 15px; }

     #mmkbackend .block { padding:0; }
     #mmkbackend .workFilesArea { display:none; }


  /* SPECIAL DESIGN CLASSES SM */

     #mmkbackend .kkEditButton { text-align:left; margin-top:25px; }
     #mmkbackend .kkForceLeft { text-align:left; }
     #mmkbackend .marginTopSM { margin-top:15px; }

  /* TABLE HIDERS */

     #mmkbackend .hideSM { display:none; }
     #mmkbackend .tableScrollX { overflow-y:scroll; margin-bottom:25px; }
     #mmkbackend .classicTable { display:none; } 


  /* COLS */

     #mmkbackend .colMax  { padding: 2.5%; width:100%; }
     #mmkbackend .col75   { width:100%; }
     #mmkbackend .col66   { width:100%; }
     #mmkbackend .col50   { width:100%; }
     #mmkbackend .col33   { width:100%; } 
     #mmkbackend .col25   { width:100%; }
     #mmkbackend .col20   { width:100%; }

  /* BASKET */

     #mmkbackend .pmKlarnaInnerRow  { margin: 25px 0 0 0; }
     #mmkbackend .wkDataTab { display:none; }
     #mmkbackend .schildDatenBlock1 { display:block; }
     #mmkbackend .schildDatenBlock2 { display:none; }

  /* CREATE */
  
     #create .crtNavPanelChildFixations { max-width:400px; }
 

}

@media only screen 
and (min-width : 600px) and (max-width : 768px)
{

     #mmkbackend #topnav { display:none; }

  /* NAVIGATION */
 
     #mmkbackend .navPanel { width:50%; min-width:218px; }

     #mmkbackend #mobilebox  { }
     #mmkbackend #mobilemenu { display:none; position:absolute; z-index:99; top: 70px; padding-top: 0px; }

}

/* 768 */

/**
@media only screen 
and (min-width: 1024px and min-height: 600px; ) 
{
  #create .crtNavPanel { min-height:450px; }
}
**/

@media only screen 
and (max-width : 1023px) 
{
     body { overscroll-behavior: contain; }  /* no pull refresh on browser scroll ?*/

     #create { min-width:360px; visibility:hidden; }

  /* KONFIGURATOR */

     /* #mmkback { min-width:360px; } */

     #canvasBox  { min-width:360px; height:calc(100vh - 296px); height:calc(100dvh - 296px); top: 140px; } /* +136px wkbar + 28px footer*/

     /** #create .navBox { width:100%; margin:0; border-radius:0; padding:0px; } **/

#create #navLeft  { position:absolute!important; display:block; z-index:102; left:0; top: 70px; border-radius:0; font-size:46px; height:70px; width:35px!important; line-height: 0.2em; }
#create #navRight { position:absolute!important; display:block; z-index:102; top:70px; right:0; border-radius:0; font-size:46px!important; height:70px; width:35px!important; line-height: 0.2em; }

     #create .responsiveNavBox { position:relative; left:35px; }

     .createLoaderToolsButton { float:left; width:50px; }
     .createLoaderTools { display:none; }
     .createBGSet { display:none; }

     /** LEFT NAVI */

       #createTools { width: 1024px; min-width:360px; display:block; border: none; padding-top:70px; background:#fff; height:140px; }
       #create .navBoxNMLeft { margin: 0; padding: 0; border-radius: 0; box-shadow:none; }
       #createTools .navBox { height:70px; width:100%; border-radius:0; display:block; padding:0px; margin:0 0 0 35px; } 
       #create .crtMenuLinkActive { border-radius:0; } 

       #createTools .crtNavButton { float:left; display:inline-block; width: 70px; height:70px; background-position: 18px 10px; border-right:1px solid #aaa; }
       #createTools .crtMenuTitle { display:none; }
       #createTools .crtMenuDesc { display:none; }
 
       #createTools .crtSmallTitle { position:relative; top: 15px; display:block; font-size:10px; }


#create .crtNavPanel {
    display: none;
    position: absolute;
    z-index: 98;
    font-size: 14px;
    left: -35px;
    top: 70px; /* -40px; */
    padding: 0px 20px 20px 20px;
    color: var(--gralax-black);
    width: 100vw;
    min-width:360px; 
    /*min-height:450px;*/
    background: #fff; 
    letter-spacing: 1px;
    box-shadow: 0 10px 10px rgba(0,0,0,0.5); 
    border-radius: 0px;
    border-top: 1px solid #888;
}     
    #create .scrollAreaLvl3 { display:block; }
    /** #create .crtNavPanelChildFixations { max-width:300px; } */
    #create .fxLvl3LeftBlock  { float:none; display:block; flex-direction:row; width:250px; }
    #create .fxLvl3RightBlock { float:none; display:block; flex-direction:row; width:250px; }
    
    #create .crtNavPanelArrow { display:none; }

     .scrollAreaLvl2 { width: 100%; height: calc(100% - 170px); display:flex; overflow-y: auto; overflow-x: hidden; padding-top:7px; }
     #mmkbackend .menuNextPanelAlt {
    /* clear: both; */
    display: block;
    width: 100%;
    /* height: 70px */
    position: absolute;
    bottom: 55px;
    margin: 0 auto;
    padding-right:40px;
    /* padding-top: 20px; */
    text-align: center;
}

     #createInfobar { position:absolute; min-width:360px; left:0; font-size:13px; width:100%; bottom:20px!important; top:inherit; height:auto; padding-top:0; }

     #create .navBoxNMRight { margin:0; padding:10px; border-radius:0; box-shadow:none; }

     #createInfobar .navBox { margin:0; border-radius:0px; box-shadow:none; border-top:1px solid var(--gralax-black); padding:10px; }
     
     #miniViewPanel { display:none; }
     #createInfobar .zoomFunctions { display:none; }

     #createInfobar .materialInfo { border-bottom:1px solid #ccc; }
     #createInfobar .materialName { float:left; font-size:13px; }
     #createInfobar .materialProperties { display:none; }
     #createInfobar .materialPropertiesValues { float:right; text-align:right; line-height:1.5em; }
     #createInfobar .adminFunctions { display:none; }

     #createInfobar .priceBox { display:none; }

     #mmkbackend .textFontList   {  top: 155px; width:160px; height:140px; }

     #createInfobar #wkPriceJS    { font-size:16px; color: var(--gralax-black); font-weight:bold; line-height:1.0em; }
     #createInfobar #wkPriceNetto { display:none; }

     #createInfobar .wkRespButtonBar { display:block; width:100%; position:absolute; z-index:200; bottom: 120px; left:0; padding: 0 7px; }
     #createInfobar .wkRespPrice { display:block; padding:5px 0; text-align:right; }

     #createInfobar select { font-size:13px; padding:5px; }
     #createInfobar input { font-size:13px; padding:5px 5px 7px 5px; }

     #create .respObjEditCloseButton { display:block; }
     
/** WINDOW STUFF */

     #mmkback .respActionButton { width:100%!important; display:block; text-align:center!important; }
     #mmkback .respActionButtonMargin { width:100%!important; display:block; text-align:center!important; margin-right:0px; }

     #mmkback .createSysWin        { font-size:15px; color: var(--gralax-black); width:280px; overflow-x:hidden; overflow-y:auto; }
     #mmkback .createSysWinVorlage { font-size:15px; color: var(--gralax-black); width:320px; overflow-x:hidden; overflow-y:auto; }

     #mmkback .col33 { float:none; display:block; width:100%; }
     #mmkback .templateNav { height:124px; }
     .loadSignTemplate {width:100%; }
     #mmkback .space2 { float:none; display:block; }
     #mmkback .space25 { float:none; display:block; }
     #mmkback .col66 { float:none; display:block; width:100%; }

     .col60  { float:left; width:100%;  }
     .col40  { float:left; width:100%;  }
     .space40  { float:left; margin-left:0%;  }


     #createInfobar .respWkView    { float:right; }

     #createInfobar .wkEngraveDiv { float:left; width:auto; margin-right:5px; }
     #createInfobar .wkAmountDiv  { float:left; width:auto; }

     #createInfobar .wkMengeWidth { width:40px; }

     #createInfobar .wkButtonDiv { float:left; width:auto; padding: 20px 0 0 6px;  }
     #createInfobar .wkButtonGreen { width:auto; background: #95b122!important; padding: 8px 4px; color:#fff; font-size:13px; border:1px solid #95b122!important; text-align:center!important;  }
     #createInfobar .wkButton {  width:auto; text-align:center; font-size:13px; padding: 8px 4px;  }

     #createInfobar .wkAmountLabel { font-size:13px; margin: 4px 0; }

     #createInfobar .crtPanelSeparator { display:none; }
     #createInfobar .hideResp { display:none; }

     #createInfobar .wkDataTab { display:none; }

     #createInfobar .clearDiv {  clear:none; float:left; }
     /**#createInfobar .clearDiv { clear:both; margin-bottom:10px;  } **/


     #mmkbackend .messagearea { z-index:98; width:90%; top:140px; max-width:768px; }
     #mmkbackend .msgErrorSmall { font-size:12px; }
     #mmkbackend .msgWarnSmall { font-size:12px; }

     #create .roundRespButton { float:left; margin-right:7px; padding:0; border:0px; background: var(--gralax-blue); border-radius:50%; cursor:pointer; width:42px; height:42px;}

     #respObjectEditButton { display:none; }

     #objectEdit { display:none; top: 142px; width: 100%; max-width:360px; height: calc(100vh - 298px); height: calc(100dvh - 298px); left: 0;  transform: translate(0, 0); box-shadow:0 0 15px 0 rgba(0,0,0,0.8)!important; resize:none; }

     #objectEdit.objEdit.navBox { padding:10px; position: absolute; /*height: 100%;*/ border-radius:0; margin:0; box-shadow: none; background: rgba(255,255,255,1)!important; resize:none; }
 
     /**#objectEdit .objEditTitle  { display:none; } **/

    #objectEdit .respSpacer { margin-left:13px!important; }

     #objectEdit .stdInput  { width:55px; margin-left:5px; }
     #objectEdit .stdInputHeight { width:55px; margin-left:5px; }

     #objectEdit .hideResp { display:none; }

     #objectEdit .respEditDim { width:100%; margin-top:8px; padding:0; }
     #objectEdit .respEditPos { width:100%; margin-top:8px; padding:0; }
     #objectEdit .respEditColor { width:100%; margin-top:8px; padding:0; }
     #objectEdit .objEditColorRow { float:left; }

}     

@media only screen 
and (min-width : 769px) and (max-width : 1023px)
{
     /** #mmkbackend #topnav { width:50%;} **/
     #mmkbackend #topnav { display:none; }

     #mmkmenu { position:relative; right:auto; }

  /* NAVIGATION */
 
     #mmkbackend #backlogo { width: 220px; background-size:80%; background-position:20px 15px;  }
     #mmkbackend .headerlogo { height: 33px; margin: 8px 0 0 10px; }

     #mmkbackend .slogan { top:0; }

     #mmkbackend #usernav   { margin-right: 64px; width:auto;}

     #mmkmenu .userPanel    { left:-130px; }
     #mmkmenu .wkBlock      { width:auto; }

     #mmkmenu .wkTextPanel  { display:none; }

     #mmkmenu .usText       { display:none; }
     #mmkmenu .usLoggedText { display:none; }

  /* CONTENT */

     #mmkbackend .respTable { display:none; } 
     #mmkbackend .workFilesArea { display:none; }

  /* SPECIAL DESIGN CLASSES SM */

     #mmkbackend .kkEditButton { text-align:left; margin-top:25px; }
     #mmkbackend .marginTopSM { margin-top:15px; }

  /* TABLE HIDERS */

     #mmkbackend .hideL { display:none; }


  /* COLS */

     #mmkbackend .col75   { width:100%; }
     #mmkbackend .col50LSpace { width: 52.5%; margin-right:2.5%; }
     #mmkbackend .col50L   { width:45%; margin:0; text-align:left; }
     #mmkbackend .col50SpecL { width: 100%; }
     #mmkbackend .col25L { width:45%; }

  /* HIDE ELEMENTS  */ 
    
     /** #mmkbackend #mobilebox  { display:none; }
         #mmkbackend #mobilemenu { display:none; position:absolute; left: -9999px; }
     **/
    
}

@media only screen 
and (min-width : 1024px) and (max-width : 1279px)
{

  /* NAVIGATION */

     #mmkbackend #backlogo { /*width: 240px;*/ width:23%; background-size:80%; background-position:20px 12px; }
     /** #mmkbackend .headerlogo { margin: 4px 0 0 10px; width:280px; height:30px;} **/

     /** #mmkbackend #topnav  { width:38%;  } **/
     #mmkbackend #topnav { display:none; }
     #mmkbackend #usernav { width:38%; margin-right:64px; }

     #mmkmenu .userPanel    { left:-50px; }

     #mmkmenu .wkBlock      { width:auto; }
     #mmkmenu .wkTextPanel  { display:none; } 

  /* CONTENT */

     #mmkbackend .respTable { display:none; } 
     #mmkbackend .respWorkfiles { display:none; }

  /* KONFIGURATOR */

     #objectEdit .hideResp { display:none; }

  /* TABLE HIDERS */

     #mmkbackend .hideXL { display:none; }


  /* COLS */

     #mmkbackend .col75   { width:100%; }
     #mmkbackend .col50SpecL { width: 100%; }
     #mmkbackend .col50LSpace { width: 52.5%; margin-right:2.5%; }



  /* HIDE ELEMENTS  */ 
    
     /** #mobilebox  { display:none; }
         #mobilemenu { display:none; position:absolute; left: -9999px; } 
    */
     

}

@media only screen 
and (min-width : 1280px) and (max-width : 1439px)
{

  #mmkbackend #topnav { display:none; }
  #mmkbackend #usernav   { margin-right: 64px; width:50%;}

  /* COLS */

     #mmkbackend .col50SpecL { width: 100%; }
     #mmkbackend .col50LSpace { width: 52.5%; margin-right:2.5%; }
     #mmkbackend .col50L   { width:45%; margin:0; text-align:left; }

  /* HIDE ELEMENTS  */ 
    
     /* #mobilebox  { display:none; }
        #mobilemenu { display:none; position:absolute; left: -9999px; }
     */
     
     #mmkbackend .respTable    { display:none; } 
     #mmkbackend .respWorkfiles { display:none; }

}

@media only screen 
and (min-width : 1440px)
{
 
  /* HIDE ELEMENTS  */ 
    
     #mmkbackend #mobilebox  { display:none; }
     #mmkbackend #mobilemenu { display:none; position:absolute; left: -9999px; }

     #mmkbackend .respTable    { display:none; } 
     #mmkbackend .respWorkfiles { display:none; }

}

/*
############################################################################
###                                                                         
###  SPINNER
###                                                                           
*/

/*

.spinner {
  height: 60px;
  width: 60px;
  margin: 94px auto 0 auto;
  position: relative;
  -webkit-animation: rotation .8s infinite linear;
  -moz-animation: rotation .8s infinite linear;
  -o-animation: rotation .8s infinite linear;
  animation: rotation .8s infinite linear;
  border-left: 6px solid rgba(0, 174, 239, .15);
  border-right: 6px solid rgba(0, 174, 239, .15);
  border-bottom: 6px solid rgba(0, 174, 239, .15);
  border-top: 6px solid rgba(0, 174, 239, .8);
  border-radius: 100%;
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}

@-moz-keyframes rotation {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(359deg);
  }
}

@-o-keyframes rotation {
  from {
    -o-transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(359deg);
  }
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

*/

/*
############################################################################
###                                                                         
###  SPINNER2
###                                                                           
*/


.loader2 {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.loader2 div {
  position: absolute;
  top: 27px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #0093DB;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.loader2 div:nth-child(1) {
  left: 6px;
  animation: lds-ellipsis1 0.6s infinite;
}
.loader2 div:nth-child(2) {
  left: 6px;
  animation: lds-ellipsis2 0.6s infinite;
}
.loader2 div:nth-child(3) {
  left: 26px;
  animation: lds-ellipsis2 0.6s infinite;
}
.loader2 div:nth-child(4) {
  left: 45px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(19px, 0);
  }
}

/** INLINE BUTTON LOADER **/

.loader3 {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 0px;
}
.loader3 div {
  position: absolute;
  top: -10px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.loader3 div:nth-child(1) {
  left: 6px;
  animation: lds-ellipsis1 0.6s infinite;
}
.loader3 div:nth-child(2) {
  left: 6px;
  animation: lds-ellipsis2 0.6s infinite;
}
.loader3 div:nth-child(3) {
  left: 26px;
  animation: lds-ellipsis2 0.6s infinite;
}
.loader3 div:nth-child(4) {
  left: 45px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(19px, 0);
  }
}



/*
## -----------------------------------------------------------------------------
##
##  CLEAR STYLES
##                                             
*/
 
    .clear        { clear:both; }
    .group:after  { content: ""; display: table; clear: both; }