/* Motorola resolution = 480x800;  */

* {
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  -webkit-user-select:text;
  -webkit-overflow-scrolling:touch;
  -webkit-filter:none;
  -webkit-opacity:1;
  box-shadow:none;
  text-rendering:optimizeLegibility;
  margin:0; padding:0; border:0; outline:none;
  font-weight:normal;
}

/* new fullscreen 2025 */
@media only screen and (min-width: 360px) and (max-width: 767px) {
    #ubertainer {margin-top: 100px !important; height: calc(100vh - 90px) !important;}
}

/* prevent scrolling out of range on touch-tablets */
html, body {max-width:100%; max-height:100%; overflow-x:auto}

body {background-color:#3A8DE9; color:#ffffff; font: 13px "Lato","Helvetica Neue", Arial; font-weight:normal; overflow:hidden}

pre {white-space:pre; white-space:pre-wrap; word-wrap:break-word}

input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px #eeeeee inset}

input[type=text], input[type=url], input[type=email], input[type=password], input[type=tel] {-webkit-appearance:none; -moz-appearance:none}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Regular.eot');
    src: url('../fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Lato-Regular.woff') format('woff'),
         url('../fonts/Lato-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Regular.eot');
    src: url('../fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Regular.woff') format('woff'),
         url('../fonts/OpenSans-Regular.ttf') format('truetype'),
         url('../fonts/OpenSans-Regular.svg#OpenSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
  font-family: 'hamburg-regular';
  font-style: normal;
  font-weight: normal;
  src: url('../fonts/Hamburg-Regular.eot');
  src: url('../fonts/Hamburg-Regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/Hamburg-Regular.woff') format('woff'),
       url('../fonts/Hamburg-Regular.ttf')  format('truetype');
}

@font-face {
  font-family: 'hamburg-bold';
  font-style: normal;
  font-weight: normal;
  src: url('../fonts/Hamburg-Bold.eot');
  src: url('../fonts/Hamburg-Bold.eot?#iefix') format('embedded-opentype'),
       url('../fonts/Hamburg-Bold.woff') format('woff'),
       url('../fonts/Hamburg-Bold.ttf')  format('truetype');
}

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

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url(../fonts/Roboto-300.woff2) format('woff2')}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/Roboto-400.woff2) format('woff2')}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/Roboto-700.woff2) format('woff2')}

a {text-decoration:none; outline:0; transition:all 1s; -webkit-transition:all 1s; -moz-transition:all 1s}
a, a:visited {color:#2187e7}

@media all and (orientation: landscape) and (max-device-width:1020px) {
    body {zoom:300%}
    #outerdiv     {position:absolute; left:0px; top:0px; padding-top:50px !important; overflow: visible;
                   overflow-y:scroll !important; overflow-x:scroll !important; -webkit-overflow-scrolling:touch !important}
    #swiperimage  {display:none !important}
}

::-webkit-scrollbar {width:0px}

.notextselection {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    user-select: none;
}

.zoom {
    overflow:scroll   !important ;
    overflow-x:scroll !important ;
    overflow-y:scroll !important ;
    padding-top       :430px     ;
    padding-left      :110px     ;
    -moz-transform    :scale(2)  ;
    -webkit-transform :scale(2)  ;
}

.cursor {cursor:pointer}

#ubertainer {position:absolute; overflow:hidden; top:0px; bottom:0px; width:360px; height:690px; left:0px; right:0px;
             margin-left:auto; margin-right:auto; max-width:100%; max-height:100%; zoom:100%;
             background: url(../img/schappie/backgrounds/mainblueback.jpg) no-repeat; background-size:cover}

/* =============================================================================
   zonder contentcontainer scrollt het topmenu niet mee, dit is een keuze...
   ========================================================================== */

#contentcontainer {position:relative; margin:0px; padding:0px}
#fullworp         {background: url('../img/backgrounds/whiteplaster.jpg') repeat; background-size:290px 430px}

/* =============================================================================
   intro overlay zorgt voor de headerafstand / glow achter de message overlay!
   ========================================================================== */

#introverlay {
   position:absolute;
   overflow:hidden;
   top:26px;
   width:100%;
   height:100%;
   z-index:2}

/* =============================================================================
   startup container
   ========================================================================== */

#message-overlay {
    position:absolute;
    z-index:100;
    top:10px;
    left:0px;
    width:100%;
    text-align:center;
    line-height:35px;
    font-family: 'Lato', Arial, sans-serif;
    font-weight:bold;
    font-size:10px;
    text-transform:uppercase;
    color:#ffffff;
    letter-spacing:2.5px}

#dateandtime {
    position: absolute;
    z-index:100;
    font-size:10px;
    bottom:24px;
    right:20px;
    color:#0b244d;
    width:600px;
    text-align:right;
    opacity:1}

#systeminfo {
    position:absolute;
    z-index:100;
    font-size:10px;
    bottom:14px;
    right:20px;
    color:#0b244d;
    opacity:0.3;
    width:600px;
    text-align:right}

#dibideklogo {
    position: absolute;
    background: url(../img/schappie/logos/frahmework.ah.nl.png) no-repeat;
    background-size:cover;
    z-index:500;
    bottom:38px;
    right:20px;
    width:230px;
    height:52px;
    text-align:right;
    cursor:pointer}

/* =============================================================================
   schappie logo
   ========================================================================== */

#logocontainer {overflow:hidden; max-width:100%; max-height:100%; display:none; margin-left:-10px}

#frahmelogo {
   position:absolute;
   margin-top:12%;
   left:8px;  /* center logo */
   width:320px;
   height:420px;
   -webkit-transform-style: preserve-3d;
   -webkit-transition: 0.5s;
   -moz-transform-style: preserve-3d;
   -moz-transition: 0.5s}

#backfacelogo {
   position: relative;
   margin-left:20px;
   margin-top:130px;
   width:320px;
   height:420px;
   background:url(../img/schappie/logos/schappielogoreverse.png) no-repeat; background-size:cover}

.flipcontainer {
    position:relative;
    z-index:200;
    margin-left:auto;
    margin-right:auto;
    width:320px;
    height:420px;
    cursor:pointer;
    -webkit-perspective: 1000;
    -moz-perspective: 1000}

.face {
   position: absolute;
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   top:0;
   left:0;
   width:100%;
   height:100%}

.front {
    background:url(../img/schappie/logos/schappielogo.png) no-repeat; z-index:5; background-size:cover}

.no-hide .face {
   -webkit-backface-visibility: visible;
   -moz-backface-visibility: visible}

 /* no flipping on MC40  */
@media not screen and (min-device-width:400px) and (max-device-width:600px) {
.flipcontainer:hover #frahmelogo {
   -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg)}
.back {
   -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   background:url(../img/schappie/logos/schappielogoreverse.png) no-repeat; background-size:cover}
.flipcontainer:hover .front {z-index:0}}

/* =============================================================================
   login container
   ========================================================================== */

#logincontainer {
   display:none;
   position:fixed; /* for softkeyboard overlay */
   z-index:200;
   top:0px;
   left:0px;
   right:0px;
   margin-left: auto;
   margin-right: auto;
   margin-top:-10px;
   width:360px;
   height:100%}

#logincontainer input[type=text], input[type=password]{
                font:19px "roboto"; font-weight:400; color:#112244; padding:9px; border: 1px solid #335566;
                width:284px; height:40px; margin-left:30px; background: rgba(255, 255, 255, 0.8); border-radius:5px}

#loginform {width:100%}

#username  {-webkit-user-select:text; margin-left: 30px}
#password  {-webkit-user-select:text; margin-left: 30px; margin-top:-10px;}
#loginbtn  {margin-left:160px; margin-top:0px; height:36px; width:140px; font:16px "Lato"; border:0px}

.btn-primary {
  background-color:#0066cc; color:#ffffff; min-width:82px;
  text-align:center; cursor:pointer; font:14px Arial; border-radius:5px;
  background-image:-webkit-linear-gradient(top, #0066cc, #0044cc);
  border:3px #0044cc #0044cc #002a80;
  border:3px rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25)}

.btn-primary:hover {background-image:-webkit-linear-gradient(top, #0077dd, #0055dd); box-shadow: 0px 0px 1px 1px #54a3f7;
 text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de}

#status   {position:absolute; left:40px; top:110px; width:300px; font-size:16px; color:#ffffff}

.glow { -moz-box-shadow: 0 0 5px #fff; -webkit-box-shadow: 0 0 5px #fff; box-shadow: 0px 0px 5px #fff; }

/* =============================================================================
   welcome container
   ========================================================================== */

#logoutoverlay {
    position: absolute;
    background-size:cover;
    z-index:200;
    width:220px;
    height:220px;
    cursor:pointer}

#photoframe {
    position: absolute;
    z-index:999;
    top:-244px;
    left:70px;
    width:220px;
    height:220px;
    background-size:cover;
    border-radius:50%;
}

#welcometext {
    position: absolute;
    font:44px "BurstMyBubble";
    color:#ffffff;
    font-size:44px;
    z-index:100;
    top:-36px;
    width:360px;
    height:50px;
    overflow:visible;
    text-align:center}

#appframe {
    position:absolute;
    background: url(../img/schappie/backgrounds/appies.png) no-repeat;
    background-size:cover;
    z-index:99;
    top:-620px;
    left:-74px;
    width:460px;
    height:620px;
    overflow:visible;
    text-align:center}

#app1 {z-index:1700; position: absolute; left:114px; top:128px; width:90px; height:90px; cursor:pointer}
#app2 {z-index:1700; position: absolute; left:210px; top:128px; width:90px; height:90px; cursor:pointer}
#app3 {z-index:1700; position: absolute; left:308px; top:128px; width:90px; height:90px; cursor:pointer}
#app4 {z-index:1700; position: absolute; left:114px; top:234px; width:90px; height:90px; cursor:pointer}
#app5 {z-index:1700; position: absolute; left:210px; top:234px; width:90px; height:90px; cursor:pointer}
#app6 {z-index:1700; position: absolute; left:308px; top:234px; width:90px; height:90px; cursor:pointer}

/* =============================================================================
   scan container
   ========================================================================== */

#scancontainer    {position:absolute; overflow:hidden; top:0px; bottom:0px; width:360px; height:auto; left:0px; right:0px; display:none;
                   margin-left:auto; margin-right:auto; background: url(../img/schappie/backgrounds/scanback.jpg)
                   no-repeat; background-size:360px 802px}

#lastscannedproductimage {
  border-radius:50px;
  border:none;
  width:180px;
  height:180px;
  margin-top:205px;
  background: url(../img/schappie/783891.webp) no-repeat;
  background-size:cover;
  background-position: center;
  visibility: hidden;
  cursor:pointer;
  opacity:0;
}

.rotated {
    margin-top:  50px;
    left:       -24px;
    transform: rotate(8deg)}

.rotated3d {
    margin-top:  50px;
    left:       -24px;
    transform:rotate3d(0, 0, 8, 8deg)}

/* =============================================================================
   artikelinfo container
   ========================================================================== */

.papershadow{
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);}

#schapmenu   {position:absolute; width:360px; height:50px; background-color:#3b5998;
              background:url(../img/schappie/backgrounds/nextmenu.png) no-repeat; background-size:cover}

.scrollable   {height:103%; overflow-x:auto; overflow-y:auto; -webkit-overflow-scrolling:touch}
.scrollablex  {height:100%; overflow-x:auto; overflow-y:none; -webkit-overflow-scrolling:touch}
.scrollabley  {height:100%; overflow-x:none; overflow-y:auto; -webkit-overflow-scrolling:touch}

#tickettothetop  {width:350px; margin-top:50px}
#tickettothetop2 {height:50px}
.jumper          {height:4px}

table       {width:96%; background:#ffffff; color:#1786d3; font:19px 'Arial'; padding-top:10px;
            left:0px; right:0px; margin-left:auto; margin-right:auto}
tr          {}

.def        {font:20px "hamburg-regular" !important; color:#1786d3 !important}
.nr         {font:21px "hamburg-regular" !important; height:24px; line-height:24px !important;
             padding-top:4px !important; padding-right:8px !important; width:160px;}
.oms        {font:20px "hamburg-regular"; text-transform:uppercase; color:#3B5A98 !important; padding-left:2px}
.assgrp     {margin-top:-8px; margin-bottom:2px; font-weight:300; padding-left:1px}
.ass        {font-size:16px !important; text-transform:uppercase; color:#3B5A98 !important}
.pos        {font:20px "hamburg-bold"; text-transform:uppercase; color:#3B5A98 !important}
.pricetag   {text-align:right; width:100px; font:46px 'hamburg-bold'; font-weight:900}
.bold       {font-weight:900 !important}

#nasean     {}

.higherpricetag   {margin-top:-76px;margin-right:4px}

#addicon    {z-index:100; float:right; margin-right:10px; margin-top:10px; width:50px; height:50px; cursor:pointer}

.pictureframe  {background:#ffffff; text-align:center; margin-bottom:10px; margin-top:-74px;
                zoom:90%; min-height:80px; cursor:pointer}
.max200        {max-width:200px; max-height:200px}

.tdfixedheight {height:28px; line-height:28px; vertical-align:middle}

.trspacer   {height:5px !important}
.td0        {min-width:28px; background:#FFFFFF}
.td1        {min-width:28px; background:#F8F8F8; border-radius:3px}
.td2        {min-width:28px; background:#1786d3 !important; color:#FFFFFF; padding:2px; border-radius:3px; padding-right:4px}
.td3        {min-width:28px; background:#F8F8F8; border-radius:3px; font-size:17px; text-align:right; padding-right:4px}
.td4        {background:#F8F8F8; border-radius:3px; font-size:17px; text-align:right; padding-right:4px}
.tdbonus    {background:#FF5511; color:#FFFFFF; margin-right:4px;
             padding:10px; border-radius:7px; font:15px "hamburg-regular"; overflow:auto}
.tdblue     {background:#118ECA; color:#FFFFFF; padding:10; border-radius:6 6 0 0; text-align:center; font:16px 'Arial'}

.bordeaux        {background-color:#5F021F; height:24px; line-height:24px}
.givemesomespace {width:100%; height:4px;}
.wijnleft   {float:left; font:15px "Arial"; background-color:#5F021F; color:#FFFFFF; text-transform:lowercase;
             line-height:18px; text-align:left; padding-left:7px; padding-bottom:4px; padding-top:4px;}
.wijnright  {float:right; font:15px "Arial"; background-color:#5F021F; color:#FFFFFF; text-transform:lowercase;
             line-height:18px; padding-bottom:4px; padding-top:4px;
             text-align:right; padding-right:7px; width:260px; height:auto; word-wrap:break-word;
             white-space:pre; white-space:pre-wrap}

.wijntop    {background-color:#5F021F; border-radius: 0px}
.wijnmid    {background-color:#5F021F; border-radius: 0px}
.wijnbottom {background-color:#5F021F; border-radius: 0px}

.smalltext   {font:16px 'Arial'; color:#3B5A98 !important}

.bonusclass  {border-bottom:4px solid #FF5511 !important; margin-bottom:-4px}

#positiemelding {font-size:18px; text-align:center; font-weight:700}

/* =============================================================================
   artikelinfo worp en fullworp NIEUW!
   ========================================================================== */

#worpinfo  {position:absolute; background-color:#FFFFFF; height:520px; width:352px; margin-top:-260px;
            border:1px solid #DCE8F1; overflow:hidden;} /* is meterworp  */
#fullworp  {background-color:#FFFFFF; height:100%; overflow-y:auto; overflow-x:auto; -webkit-overflow-scrolling:touch}

/* =============================================================================
   inside worp
   ========================================================================== */

#pinchcontainer {background-color:#FFFFFF; height:520px}
#outerdiv       {float:left; margin-top:0px; height:520px; min-width:360px; padding:3px}
#worpmenu       {position:absolute; top:0px; left:0px; width:360px; height:50px; z-index:20; overflow:hidden;
                 background:url(../img/schappie/backgrounds/worpmenu.png) no-repeat; background-size:360px 50px}

#swiperimage {position:absolute; margin-bottom:0px; bottom:0px; left:0px; height:84px; width:360px; background-color:#3b5998;
             background-image: url(../img/schappie/backgrounds/swiperback.png);
             background-size:360px 84px; background-repeat:repeat-x; overflow:visible}

.scrollable {height:100%; overflow-x:auto; overflow-y:auto; -webkit-overflow-scrolling:touch}

/* =============================================================================
   promotiemateriaal
   ========================================================================== */

.shelf   {position:absolute; background-repeat:no-repeat; background-position:bottom; cursor:pointer}

.barker  {position:absolute; bottom:-1px; background:url(../img/schappie/interface/barker.jpg); background-size:cover;
          background-repeat:repeat-x; background-position:bottom; height:0px; margin-left:0px;
          box-shadow: 0px 3px 10px 0px rgba(50, 50, 50, 0.2)} /* angle - distance - blur - rgb - opacity */

.sticker {position:absolute; bottom:-4px; margin-left:0px; z-index:50; width:13px; height:7px; background-color:#FFFFFF;
          border:0.5px solid #777777 !important; border-radius:1px; overflow:hidden; padding-right:3px; padding-top:2px;
          font:5px "hamburg-regular"; color:#000000; word-wrap:break-word; text-transform: uppercase; text-align:right;
          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26)}

.srp     {position:absolute; bottom:-5px; background-position:bottom;
          height:6px; margin-left:0px; border-top:6px solid #FFFF00; border-bottom:6px solid #FFFF00;}

.card  {position:absolute; bottom:-15px; margin-left:1px; z-index:60; width:21px; height:25px;
        border-radius:1px; overflow:hidden; padding-left:3px; padding-top:3px;
        color:#FFFFFF; word-wrap:break-word; text-transform: uppercase}

.bonuscard  {background-color:#FF5511; border:1px solid #FFFFFF !important; font:4.5px "hamburg-regular"; }
.searchcard {background-color:#1786d3; border:1px solid #FFFFFF !important; font:7px   "hamburg-regular"; }
.biocard    {background-color:#44AA44; background:url(../img/wap/biocard.png) no-repeat; background-size:cover; font:7px "hamburg-regular"; }
.tuscard    {background-color:#19487D; border:1px solid #FFFFFF !important; font:7px   "hamburg-regular"; }

/* =============================================================================
   artikelinfo bonusblok
   ========================================================================== */

#bonusswitch {background-color:#FF5511; color:#ffffff; cursor:pointer; padding:10px; border-radius:6px 6px 0px 0px; font:17px "hamburg-regular"}
.bonusregels {font:16px "hamburg-regular"}

/* =============================================================================
   artikelinfo voorraadblok
   ========================================================================== */

#voorraadswitch {height:30px; font:20px 'Arial'; background-color:#1786d3; color:#ffffff; cursor:pointer; padding:10px; border-radius:6px 6px 0px 0px}
#voorraadblok   {height:0px;  font:36px 'Arial'; font-weight:900; width:100%; overflow:hidden; background:#1786d3; border-radius:0px 0px 3px 3px; text-align:center}
#voorraadtext   {float:left; line-height:30px}
#voorraadwaarde {float:right; font:30px 'Arial'; line-height:30px; min-width:140px; text-align:right; padding-right:5px; font-weight:900}
.voorraadfull   {height:340px !important}
.voorraadrow1   {height:80px; line-height:55px; padding-top:4px; border-top: 0px solid #111111}
.voorraadrow2   {height:80px; line-height:55px}
.voorraadrow3   {height:80px; line-height:55px}
.voorraadrow4   {height:80px; line-height:55px; padding-bottom:14px}

.numericbutton {
    display:inline-block; background-color:rgba(0,0,0,0.6); border:2px solid rgba(0,0,0,0.1);
    box-shadow: 20 20 20 20px #000000; color:#ffffff; border-radius:10px;
    height:55px; width:55px; margin:12px auto; margin-right:8px; cursor:pointer; padding:1px}

.numericclean {
    display:inline-block; border:2px solid rgba(0,0,0,0);
    height:55px; width:55px; margin:12px auto; margin-right:8px; cursor:pointer; padding:1px}

 .numericbuttonxwidth {
    display:inline-block; border:2px solid rgba(0,0,0,0); color:#ffffff; border-radius:10px;
    height:55px; width:124px; margin:12px auto; margin-right:8px; cursor:pointer; padding:1px}

.numericbutton:hover {
    color:#ffffff !important; box-shadow: 0px 0px 5px rgba(81, 203, 238, 1);
    border-color: #999999; border:2px solid rgba(81, 203, 238, 1)}

.numericbuttonxwidth:hover {
    color:#ffffff !important; box-shadow: 0px 0px 5px rgba(81, 203, 238, 1);
    border-color: #999999; border:2px solid rgba(81, 203, 238, 1)}

.center  {line-height:26px}

#Nbackspace {background:url(../img/schappie/interface/backspace.png) no-repeat; background-size:contain}
#Vcheck     {background:url(../img/schappie/interface/vcheck.png) no-repeat; background-size:contain}
#Xcheck     {background:url(../img/schappie/interface/xcheck.png) no-repeat; background-size:contain}

/* =============================================================================
   artikelinfo leveringen verkoop mutaties blok
   ========================================================================== */

#lvmswitch  {height:30px; font:20px 'Arial'; background-color:#00AAAA; color:#ffffff; cursor:pointer; padding:10px; border-radius:6px 6px 0px 0px}
#lvmblok    {height:0px; font:17px 'Arial'; font-weight:200; background:#006666; overflow:hidden; border-radius:0px 0px 3px 3px;
             text-align:left; margin-bottom:6px; color:#77CC00}
#lvmresultshereplease::-webkit-scrollbar {width:0px}
#lvmresultshereplease {clear:both; height:352px; overflow:auto}

#leveringen {line-height:30px}
#verkoop    {line-height:30px}
#mutaties   {line-height:30px}

.lvmrow {height:12px; line-height:6px; background-color:#006666; color:#FFFFFF; font:13px 'Arial';
         border-bottom: solid 1px #004040; padding:10px; cursor:pointer}

.datum   {font:12px"Arial"; opacity:0.9; top:-2.25px; }
.tijd    {font:12px"Arial"; opacity:0.9; top:-2.25px; }
.soort   {font:12px"Arial"; opacity:0.9}
.aantal  {font:12px"Arial"; opacity:0.9}
.medw    {font:12px"Arial"; opacity:0.3}

.left     {float:left}
.right    {float:right}
.middle   {line-height:25px; vertical-align:middle}
.A        {width:60%}
.B        {width:22%}

/* =============================================================================
   artikelinfo footer, avatar, date, week
   ========================================================================== */

#footerswitch {height:30px; font:18px 'Arial'; background-color:#118ECA; color:#ffffff; cursor:pointer; padding:10px;
               border-radius:6px 6px 0px 0px; padding-top:16px;}
#avatar       {width:60px; height:60px; border-radius: 6px}
.footertext   {text-align:right; font:14px 'Arial'; color:#333333}
.meerruimte   {padding:10px}

/* =============================================================================
   tagthismenu
   ========================================================================== */

#tagthismenu {position:absolute; width:360px; height:50px; background-color:#3b5998;
              background:url(../img/schappie/backgrounds/tagthismenu.png) no-repeat; background-size:cover}

/* =============================================================================
   search container
   ========================================================================== */

#searchcontainer  {position:absolute; overflow:hidden; top:0px; bottom:0px; width:100%; height:auto; left:0px; right:0px; display:none;
                   margin-left:auto; margin-right:auto; background: url(../img/schappie/backgrounds/watsukiback-lessglow.jpg)
                   no-repeat; background-size:360px 802px}

#inputarea {padding-left:13px; padding-top:2px; resize:none; text-transform:lowercase; padding-left:60px; border:0px; font-weight:700;
            width:100%; height:52px; font:20px 'Open Sans'; color:#ffffff; background-color:transparent !important}

/* =============================================================================
   worp container
   ========================================================================== */

#worpvinder {position:absolute; overflow:hidden; top:0px; bottom:0px; width:360px; height:auto; left:0px; right:0px;
             margin-left:auto; margin-right:auto; background: url(../img/schappie/backgrounds/worpvinderback.jpg)
             no-repeat; background-size:360px 802px}

/* =============================================================================
/* assgroep container
   ========================================================================== */

.assgroupframe      {margin-left:2px; margin-top:-10px;}
.assgroup-items     {margin-top:4px; margin-left:2px}
.assgroup-items li  {display:block; float:left; margin-left:1px; margin-right:5px; margin-top:6px; width:83px; height:83px;
                     background-size:cover; border-radius:6px; cursor:pointer}

.unused     {display:none;}
.emptycell  {}

#asg1   {background-image: url(../img/schappie/assgroepimages/aardappelen.jpg)}
#asg2   {background-image: url(../img/schappie/assgroepimages/aardappelpastarijst.jpg)}
#asg3   {background-image: url(../img/schappie/assgroepimages/kookgemak.jpg)}
#asg4   {background-image: url(../img/schappie/assgroepimages/maaltijdgemak.jpg)}
#asg5   {background-image: url(../img/schappie/assgroepimages/groentenwand.jpg)}
#asg6   {background-image: url(../img/schappie/assgroepimages/fruitwand.jpg)}
#asg7   {background-image: url(../img/schappie/assgroepimages/groentenenfruittafel.jpg)}
#asg8   {background-image: url(../img/schappie/assgroepimages/vruchtenconserven.jpg)}
#asg9   {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg10  {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg11  {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg12  {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}

#asg21  {background-image: url(../img/schappie/assgroepimages/vleesvega.jpg)}
#asg22  {background-image: url(../img/schappie/assgroepimages/gevogelte.jpg)}
#asg23  {background-image: url(../img/schappie/assgroepimages/versevis.jpg)}
#asg24  {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg25  {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg26  {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg27  {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg28  {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg29  {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg30  {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg31  {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg32  {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}

#asg41  {background-image: url(../img/schappie/assgroepimages/kaaszb.jpg)}
#asg42  {background-image: url(../img/schappie/assgroepimages/vleeswarenzb.jpg)}
#asg43  {background-image: url(../img/schappie/assgroepimages/kaasvitrine.jpg)}
#asg44  {background-image: url(../img/schappie/assgroepimages/vleeswarenbediening.jpg)}
#asg45  {background-image: url(../img/schappie/assgroepimages/delidrogeworst.jpg)}
#asg46  {background-image: url(../img/schappie/assgroepimages/salade.jpg)}
#asg47  {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg48  {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg49  {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg50  {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg51  {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg52  {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}

#asg61  {background-image: url(../img/schappie/assgroepimages/drinkzuivel.jpg)}
#asg62  {background-image: url(../img/schappie/assgroepimages/eetzuivel.jpg)}
#asg63  {background-image: url(../img/schappie/assgroepimages/gesteriliseerdemelk.jpg)}
#asg64  {background-image: url(../img/schappie/assgroepimages/houdbarezuivel.jpg)}
#asg65  {background-image: url(../img/schappie/assgroepimages/eieren.jpg)}
#asg66  {background-image: url(../img/schappie/assgroepimages/boter.jpg)}
#asg67  {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg68  {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg69  {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg70  {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg71  {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg72  {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}

#asg81  {background-image: url(../img/schappie/assgroepimages/witbrood.jpg)}
#asg82  {background-image: url(../img/schappie/assgroepimages/bruinbrood.jpg)}
#asg83  {background-image: url(../img/schappie/assgroepimages/volkorenbrood.jpg)}
#asg84  {background-image: url(../img/schappie/assgroepimages/kleinbrood.jpg)}
#asg85  {background-image: url(../img/schappie/assgroepimages/bakeoffstokbrood.jpg)}
#asg86  {background-image: url(../img/schappie/assgroepimages/bakeoffkleinbrood.jpg)}
#asg87  {background-image: url(../img/schappie/assgroepimages/bakeoffhartig.jpg)}
#asg88  {background-image: url(../img/schappie/assgroepimages/bakeoffzoet.jpg)}
#asg89  {background-image: url(../img/schappie/assgroepimages/korthoudbaarbrood.jpg)}
#asg90  {background-image: url(../img/schappie/assgroepimages/gevuldbrood.jpg)}
#asg91  {background-image: url(../img/schappie/assgroepimages/gekoeldbroodzoet.jpg)}
#asg92  {background-image: url(../img/schappie/assgroepimages/gekoeldbroodhartig.jpg)}

#asg101 {background-image: url(../img/schappie/assgroepimages/cereals.jpg)}
#asg102 {background-image: url(../img/schappie/assgroepimages/broodvervangers.jpg)}
#asg103 {background-image: url(../img/schappie/assgroepimages/broodbeleg.jpg)}
#asg104 {background-image: url(../img/schappie/assgroepimages/tussendoortjes.jpg)}
#asg105 {background-image: url(../img/schappie/assgroepimages/bakproducten.jpg)}
#asg106 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg107 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg108 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg109 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg110 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg111 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg112 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}

#asg121 {background-image: url(../img/schappie/assgroepimages/koffie.jpg)}
#asg122 {background-image: url(../img/schappie/assgroepimages/koek.jpg)}
#asg123 {background-image: url(../img/schappie/assgroepimages/koffiemelk.jpg)}
#asg124 {background-image: url(../img/schappie/assgroepimages/suiker.jpg)}
#asg125 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg126 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg127 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg128 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg129 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg130 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg131 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg132 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}

#asg141 {background-image: url(../img/schappie/assgroepimages/versesappen.jpg)}
#asg142 {background-image: url(../img/schappie/assgroepimages/sappen.jpg)}
#asg143 {background-image: url(../img/schappie/assgroepimages/frisdranken.jpg)}
#asg144 {background-image: url(../img/schappie/assgroepimages/cola.jpg)}
#asg145 {background-image: url(../img/schappie/assgroepimages/water.jpg)}
#asg146 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg147 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg148 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg149 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg150 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg151 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg152 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}

#asg161 {background-image: url(../img/schappie/assgroepimages/rodewijn.jpg)}
#asg162 {background-image: url(../img/schappie/assgroepimages/wittewijn.jpg)}
#asg163 {background-image: url(../img/schappie/assgroepimages/bier.jpg)}
#asg164 {background-image: url(../img/schappie/assgroepimages/speciaalbier.jpg)}
#asg165 {background-image: url(../img/schappie/assgroepimages/aperitievenmixdrank.jpg)}
#asg166 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg167 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg168 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg169 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg170 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg171 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg172 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}

#asg181 {background-image: url(../img/schappie/assgroepimages/groenteconserven.jpg)}
#asg182 {background-image: url(../img/schappie/assgroepimages/soepen.jpg)}
#asg183 {background-image: url(../img/schappie/assgroepimages/warmtussendoor.jpg)}
#asg184 {background-image: url(../img/schappie/assgroepimages/visconserven.jpg)}
#asg185 {background-image: url(../img/schappie/assgroepimages/vleesconserven.jpg)}
#asg186 {background-image: url(../img/schappie/assgroepimages/rookworst.jpg)}
#asg187 {background-image: url(../img/schappie/assgroepimages/drogeworst.jpg)}
#asg188 {background-image: url(../img/schappie/assgroepimages/specerijen.jpg)}
#asg189 {background-image: url(../img/schappie/assgroepimages/olieenazijn.jpg)}
#asg190 {background-image: url(../img/schappie/assgroepimages/zuren.jpg)}
#asg191 {background-image: url(../img/schappie/assgroepimages/snacksauzen.jpg)}
#asg192 {background-image: url(../img/schappie/assgroepimages/groentevleessauzen.jpg)}

#asg201 {background-image: url(../img/schappie/assgroepimages/pasta.jpg)}
#asg202 {background-image: url(../img/schappie/assgroepimages/mediterraan.jpg)}
#asg203 {background-image: url(../img/schappie/assgroepimages/basisinternationaal.jpg)}
#asg204 {background-image: url(../img/schappie/assgroepimages/wereldkeuken.jpg)}
#asg205 {background-image: url(../img/schappie/assgroepimages/rijst.jpg)}
#asg206 {background-image: url(../img/schappie/assgroepimages/oosters.jpg)}
#asg207 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg208 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg209 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg210 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg211 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg212 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}

#asg221 {background-image: url(../img/schappie/assgroepimages/dvaardappelproducten.jpg)}
#asg222 {background-image: url(../img/schappie/assgroepimages/dvmaaltijdcomponenten.jpg)}
#asg223 {background-image: url(../img/schappie/assgroepimages/dvpizza.jpg)}
#asg224 {background-image: url(../img/schappie/assgroepimages/dvsnacks.jpg)}
#asg225 {background-image: url(../img/schappie/assgroepimages/dvijsgebak.jpg)}
#asg226 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg227 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg228 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg229 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg230 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg231 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg232 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}

#asg241 {background-image: url(../img/schappie/assgroepimages/suikerwerk.jpg)}
#asg242 {background-image: url(../img/schappie/assgroepimages/chocolade.jpg)}
#asg243 {background-image: url(../img/schappie/assgroepimages/chips.jpg)}
#asg244 {background-image: url(../img/schappie/assgroepimages/versenoten.jpg)}
#asg245 {background-image: url(../img/schappie/assgroepimages/toast.jpg)}
#asg246 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg247 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg248 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg249 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg250 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg251 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg252 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}

#asg261 {background-image: url(../img/schappie/assgroepimages/vrijvan.jpg)}
#asg262 {background-image: url(../img/schappie/assgroepimages/wholefoods.jpg)}
#asg263 {background-image: url(../img/schappie/assgroepimages/gezondheid.jpg)}
#asg264 {background-image: url(../img/schappie/assgroepimages/babyvoeding.jpg)}
#asg265 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg266 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg267 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg268 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg269 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg270 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg271 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg272 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}

#asg281 {background-image: url(../img/schappie/assgroepimages/baddouchezeep.jpg)}
#asg282 {background-image: url(../img/schappie/assgroepimages/huidenoverig.jpg)}
#asg283 {background-image: url(../img/schappie/assgroepimages/shampoo.jpg)}
#asg284 {background-image: url(../img/schappie/assgroepimages/styling.jpg)}
#asg285 {background-image: url(../img/schappie/assgroepimages/deodorant.jpg)}
#asg286 {background-image: url(../img/schappie/assgroepimages/scheren.jpg)}
#asg287 {background-image: url(../img/schappie/assgroepimages/mondhygiene.jpg)}
#asg288 {background-image: url(../img/schappie/assgroepimages/papierwaren.jpg)}
#asg289 {background-image: url(../img/schappie/assgroepimages/babyverzorging.jpg)}
#asg290 {background-image: url(../img/schappie/assgroepimages/periodeverzorging.jpg)}
#asg291 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg292 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}

#asg301 {background-image: url(../img/schappie/assgroepimages/wasmiddelen.jpg)}
#asg302 {background-image: url(../img/schappie/assgroepimages/schoonmaakartikelen.jpg)}
#asg303 {background-image: url(../img/schappie/assgroepimages/schoonmaakbenodigdheden.jpg)}
#asg304 {background-image: url(../img/schappie/assgroepimages/toiletartikelen.jpg)}
#asg305 {background-image: url(../img/schappie/assgroepimages/dierenvoedingkat.jpg)}
#asg306 {background-image: url(../img/schappie/assgroepimages/dierenvoedinghond.jpg)}
#asg307 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg308 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg309 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg310 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg311 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg312 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}

#asg321 {background-image: url(../img/schappie/assgroepimages/basisnonfood.jpg)}
#asg322 {background-image: url(../img/schappie/assgroepimages/kokentafelenseizoen.jpg)}
#asg323 {background-image: url(../img/schappie/assgroepimages/kantoor.jpg)}
#asg324 {background-image: url(../img/schappie/assgroepimages/feestartikelen.jpg)}
#asg325 {background-image: url(../img/schappie/assgroepimages/spelen.jpg)}
#asg326 {background-image: url(../img/schappie/assgroepimages/kokenentafelen.jpg)}
#asg327 {background-image: url(../img/schappie/assgroepimages/bloemen.jpg)}
#asg328 {background-image: url(../img/schappie/assgroepimages/beenmode.jpg)}
#asg329 {background-image: url(../img/schappie/assgroepimages/cadeaukaarten.jpg)}
#asg330 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg331 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}
#asg332 {background-image: url(../img/schappie/assgroepimages/leeg.jpg)}

/* =============================================================================
   keyboard container
   ========================================================================== */

#letterframe {position:absolute; width:360px; height:600px; margin-left:2px; top:64px; overflow:hidden}

.keyboard-items {margin-top:4px; margin-left:2px}

.keyboard-items a.tappable-active {}

.keyboard-items li {display:block; position:relative; margin-right:3px; margin-top:6px; float:left; width:68px; height:66px; cursor:pointer}

.watsuki {width:278px !important}
.wats999 {width:72px  !important}

.nostyle {list-style-type:none}

/* =============================================================================
   checkie
   ========================================================================== */

#scantagmenu {position:absolute; overflow:hidden; top:0px; bottom:0px; width:360px; height:auto; left:0px; right:0px;
              margin-left:auto; margin-right:auto; background: url(../img/schappie/backgrounds/checkieback.jpg)
              no-repeat; background-size:360px 802px}

#meerbutton1 {width:100%; height:52px; cursor:pointer; margin-top:60px; opacity:1;
              background: url(../img/schappie/interface/checkmark50.png) no-repeat; background-size:30px 30px; background-position: 12px -3px}
#meerbutton2 {width:100%; height:51px; cursor:pointer; opacity:0;
              background: url(../img/schappie/interface/checkmark50.png) no-repeat; background-size:30px 30px; background-position: 12px -3px}
#meerbutton3 {width:100%; height:51px; cursor:pointer; opacity:0;
              background: url(../img/schappie/interface/checkmark50.png) no-repeat; background-size:30px 30px; background-position: 12px -3px}

#speedcheckresultdiv1 {width:100%; height:30px;  padding-top:10px; color:#ffffff; font:24px "hamburg-regular";
                       font-weight: 700; text-align:center; cursor:pointer}
#speedcheckresultdiv2 {width:100%; height:150px; padding-top:15px; color:#ffffff; font:100px "Lato";
                       font-weight: 700; text-align:center; cursor:pointer}
#tagbuttonrow         {margin-left:0px; margin-right:0px; margin-top:55px; width:360px; height:65px;
                       background: url(../img/schappie/backgrounds/lijsticonsround.png) no-repeat; background-size:contain}

.smaller              {font:64px "Lato"}

/* =============================================================================
   taglists (niet vergeten lijsten)
   ========================================================================== */

#lijssiemenu {position:absolute; width:360px; height:50px; background-color:#3b5998;
              background:url(../img/schappie/backgrounds/lijssiemenu.png) no-repeat; background-size:cover}

.lijstcontainer   {height:123px}
#morespace        {height:4px} /* alleen bij full list */
#TaggedItemsList  {height:478px; overflow-y:auto; overflow-x:hidden; margin-left:6px; padding-top:10px;} /* edit 478px for MC40 height */

.displayToDo  {border-radius:0px; height:65px; width:270px; background-color:#ffffff; float:left; padding-left:20px;
               background: no-repeat; background-size:10px 65px; margin-top:1px}

.hidden        {display:none}
.productavatar {float:left; width:60px; height:60px; margin-top:10px; margin-left:10px; background-size:contain; background-repeat:no-repeat}
.lijstpicframe {width:340px; background:#ffffff; text-align:left; margin-bottom:10px}
.lijstpic      {float:left; width:50px; height:60px; margin-top:2px; margin-left:0px;
                background-size:contain; background-repeat:no-repeat; background-position: center}
.rightdiv      {margin-left:70px; padding-top:3px; width:280px; min-height:80px}
.postdate      {float:right; font-size:0.8em; opacity:0.6; margin-top:10px;}
.lijstomschr   {display:inline-block; width:280px; text-align:right; margin-top:2px; font:22px "hamburg-bold"; color:#113355; padding-top:0px}
.lijstinhoud   {display:inline-block; width:280px; text-align:right; margin-top:-4px; font:12px "Lato"; color:#113355}

.artoms        {position:relative; left:14px; width:254px; margin-top:-10px; font:15px "hamburg-bold"; color:#113355}
.artinh        {position:relative; left:14px; width:254px; margin-top:0px;   font:12px "Lato"; color:#113355; height:40px}
.nasanr        {position:relative; left:14px; width:254px; margin-top:-24px; font:16px "Lato"; color:#113355; height:40px; opacity:0.5}
.hoelang       {position:relative; left:14px; width:254px; margin-top:-24px; font:14px "Lato"; color:#113355; height:40px; opacity:0.5}
.deleteicon    {position:relative; top:-80px; left:286px; opacity:0.6; z-index:99;}

#lijsticons    {margin-left:0px; margin-right:0px; margin-top:10px; width:360px; height:65px;
                background: url(../img/schappie/backgrounds/lijsticonsround.png) no-repeat; background-size:cover}
.listbutton    {float:left; width:65px; margin-right:3px; height:65px; cursor:pointer}

#lijsticons2   {margin-left:0px; margin-right:0px; margin-top:10px; width:360px; height:340px}
.nietvergeten  {float:left; width:360px; height:65px; cursor:pointer; background: url(../img/schappie/backgrounds/tag1.png) no-repeat;
                background-size:cover; margin-bottom:10px}
.bestellen     {float:left; width:360px; height:65px; cursor:pointer; background: url(../img/schappie/backgrounds/tag2.png) no-repeat;
                background-size:cover; margin-bottom:10px}
.tagsticker    {float:left; width:360px; height:65px; cursor:pointer; background: url(../img/schappie/backgrounds/tag3.png) no-repeat;
                background-size:cover; margin-bottom:10px}
.promokop      {float:left; width:360px; height:65px; cursor:pointer; background: url(../img/schappie/backgrounds/tag4.png) no-repeat;
                background-size:cover; margin-bottom:10px}
.promoschap    {float:left; width:360px; height:65px; cursor:pointer; background: url(../img/schappie/backgrounds/tag5.png) no-repeat;
                background-size:cover; margin-bottom:10px}
.promoa4       {float:left; width:360px; height:65px; cursor:pointer; background: url(../img/schappie/backgrounds/tag6.png) no-repeat;
                background-size:cover; margin-bottom:10px}

.betweener     {margin-top:-7px; background-color:#BBBBBB!important; height:1px; opacity:0.4}
.todospan      {font-size:22px; padding-right:5px; color:#FFFFFF}
.submitButton  {font-size:20px; height:55px; vertical-align:top}
.headerDiv     {height:auto; width:340px; background:#C15D63; border-radius:0px; padding:10px; margin-top:10px;}

/* =============================================================================
   bonuscontainer
   ========================================================================== */

#fademein      {height:600px !important;}
.bonusscrollx  {height:340px !important}  /* 100% werkt niet */

#bonusvinder {position:absolute; overflow:hidden; top:0px; bottom:0px; width:360px; height:auto; left:0px; right:0px;
              margin-left:auto; margin-right:auto; background: url(../img/schappie/backgrounds/bonusvinderbacknew.jpg)
              no-repeat; background-size:360px 802px}

.bhigher       {margin-top:-28px}

.assgroupblock {background: url('../img/schappie/backgrounds/mainblue.jpg');
                background-size:100% 100%; color:#FFFFFF; font:"Lato"; display:none;
                font:30px "hamburg-bold"; font-weight:bold; cursor:pointer; height:36px;
                border-bottom:solid 1px #FFFFFF; cursor:pointer; text-align:center}

.productblock {clear:both; width:360px; border-bottom:solid 1px #DDDDDD; cursor:pointer}

.imageblock   {float:left; background-color:#FFFFFF; width:100px; cursor:pointer}

.infoblock    {float:left; background-color:#FFFFFF; color:#555555; height:100px; font:16px "hamburg-regular"; padding-top:10px}

.bottomblock  {position:relative; bottom:50px; left:100px; width:240px; height:50px; color:#FF8811; font:16px "hamburg-regular"}

.bonusimage   {float:left; width:70px !important; height:auto !important; padding:9px; cursor:pointer}

.omschrijving {float:left; font-size:150%; line-height:1.1; letter-spacing:-1px; color:#555555}

.inhoud       {float:left; font:13px/1.5 'hamburg-regular'; font-size:60%; line-height:1.5}

.reflect      {-webkit-box-reflect: below -22px -webkit-gradient(linear, left top, left bottom,
              from(transparent), color-stop(30%, transparent), to(rgba(255, 255, 255, 0.4)))}

.promotion {clear:both; width:140px; height:37px; font:16px "hamburg-bold"; padding-top:6px; margin-bottom:-16px;
            text-transform:uppercase; text-align:left; margin-left:-14px;}

.vanprijs  {position:relative; width:266px; right:20px; text-align:right; color:#888888; top:-60px}

.voorprijs {position:relative; width:266px; right:0px; top:-4px; color:#FF8811; text-align:right; font:40px "hamburg-bold"; text-decoration:none;}

.strike    {text-decoration:line-through}

/* =============================================================================
   swiper
   ========================================================================== */

.swiper-container {margin:0 auto; position:relative; overflow:hidden; z-index:1;
  -webkit-backface-visibility:hidden;
  -moz-backface-visibility:hidden;
  backface-visibility:hidden;
}

.swiper-wrapper {
  position:relative;
  width:100%;
  -webkit-transition-property:-webkit-transform, left, top;
  -webkit-transition-duration:0s;
  -webkit-transform:translate3d(0px,0,0);
  -webkit-transition-timing-function:ease;

  -moz-transition-property:-moz-transform, left, top;
  -moz-transition-duration:0s;
  -moz-transform:translate3d(0px,0,0);
  -moz-transition-timing-function:ease;

  transition-property:transform, left, top;
  transition-duration:0s;
  transform:translate3d(0px,0,0);
  transition-timing-function:ease;
}

.swiper-free-mode > .swiper-wrapper {
  -webkit-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  margin: 0 auto;
}

.swiper-slide {float:left}

.swiper-content {
  position: absolute;
  margin-left:auto;
  margin-right:auto;
  left: 0px;
  right:0px;
  top: 274px;
  width: 360px;
  color:#ffffff;
  text-align:center;
  cursor:pointer;
}

.swiper-content .inner {padding:0px}
.swiper-content img {margin-top:0px; width:200px; height:120px; text-align:center;}
.swiper-content h1 {margin: 0 0 15px; font:15px "hamburg-regular"}
.swiper-content .category-pic {height:110px; width:160px}
.swiper-content .category-text {margin-left: 0px}

.swiper-nav {position: absolute; left:0px; right:0px; top:50px; width:360px; height:160px; background:#ddd;
             margin-left:auto; margin-right:auto; box-shadow: 0px 1px 3px rgba(0,0,0,0.5) inset; cursor:pointer}
.swiper-nav .swiper-slide {width:360px; height:160px; text-align:center; position:relative}
.swiper-nav .swiper-slide, .swiper-nav .angle {
  -webkit-transition: 300ms;
  -moz-transition: 300ms;
  transition: 300ms;
}
.swiper-nav .angle {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #fff;
  position: absolute;
  left: 50%;
  margin-left: -3px;
  top: -1px;
  opacity: 0;
}
.swiper-nav .active-nav {background: #ffffff; box-shadow: 0px 1px 3px rgba(0,0,0,0.5) inset}
.swiper-nav .active-nav .angle {opacity: 1}
.swiper-nav .swiper-wrapper {margin: 0 auto}
.swiper-nav img {margin-top:10px; width:200px; height:120px}
.swiper-nav .title {margin:0 5px; position:relative; overflow:hidden;
                    text-overflow:ellipsis; white-space: nowrap; color:#3b5998; font:15px "hamburg-regular"}

.edit  {width:300px !important}

/* =============================================================================
   search results
   ========================================================================== */

section  {margin-top:140px; width:340px; background-color:#002233; padding: 0px 0px 30px 20px} /* main!top right bottom left */

#resultmenu  {position:absolute; width:360px; height:50px; background-color:#3b5998; z-index:500;
              background:url(../img/schappie/backgrounds/resultmenu.png) no-repeat; background-size:cover}

#searchresults {background-color:#002233; font-family:'Open Sans', sans-serif; overflow-x:hidden; color:#678FCE; margin-top:34px}

#filteromschrijving {font-size:20px}

/* ------ MAIN STYLE ----- */
#SandBox .mix .sandboxcontent {
    position: relative; /*  nog andere opties? traag op MC40 */
    background: #FFFFFF;
    border-top: 1px solid #CCCCCC;
    border-radius: 3px;
    margin-left:3px;
    margin-right:3px;
    margin-top:3px;
    height: 130px;
    width: 314px;
}

#SandBox ::-webkit-scrollbar {width:0px}
#SandBox {padding-bottom:0px}
#SandBox .mix, #SandBox .gap {width:100%; max-width:100%; margin-bottom:2%}
/* #SandBox .mix, #SandBox .gap {width:31.5%; max-width:31.5%; margin-bottom:2%}  3 rows */
#results {background-color:#002233}

@-webkit-keyframes kenburns {
  0%   {-webkit-transform: translateX(0%) scale3d(2.0, 2.0, 2.0)}
  100% {-webkit-transform: translateX(0%) scale3d(2.0, 2.0, 2.0)}
}

@-webkit-keyframes kenburnsxxx {
  0%   { opacity:0.0; -webkit-transform: translateX(20%)  scale3d(2.6, 2.6, 2.6)}
  5%   { opacity:0.9; -webkit-transform: translateX(10%)  scale3d(2.0, 2.0, 2.0)}
  20%  { opacity:1.0; -webkit-transform: translateX(0%)   scale3d(1.5, 1.5, 1.5)}
  50%  { opacity:1.0; -webkit-transform: translateX(-20%) scale3d(1.3, 1.3, 1.3)}
  75%  { opacity:0.7; -webkit-transform: translateX(-40%) scale3d(1.1, 1.1, 1.1)}
  100% { opacity:0.0; -webkit-transform: translateX(-60%) scale3d(1.0, 1.0, 1.0)}
}

/* afbeeldingsgrootte bij zoekresultaten */
#SandBox .mix .img_wrapper {
  position:absolute;
  height: 100px;
  width:  200px;
  top:    0;
  left:   0;
  background-position:50%;
  background-repeat:no-repeat;
  border-radius:10px;
  cursor:pointer;
  padding-left:auto;
  padding-right:auto;
}

#SandBox .mix .img_wrapper.kb1  {
    left:50px;
    -webkit-animation-name: kenburns;
    -webkit-animation-duration: 20s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

#SandBox .mix .img_wrapper.kb2  {
    left:50px;
    -webkit-animation-name: kenburns;
    -webkit-animation-duration: 23s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

#SandBox .mix .img_wrapper.kb3  {
    left:50px;
    -webkit-animation-name: kenburns;
    -webkit-animation-duration: 17s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

.sandboxcontent     {overflow:hidden}
.wrapper            {width:100%}

/* ------ GLOBAL CSS3 TRANSITIONS ----- */

.anim150{
  -webkit-transition: all 150ms ease-in-out;
  -moz-transition: all 150ms ease-in-out;
  transition: all 150ms ease-in-out;
}

.ease150{
  -webkit-transition: all 200ms ease-in-out;
  -webkit-transition: all 200ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
  -moz-transition: all 200ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
  transition: all 200ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
}

/* ------ SANDBOX CONTENT ------ */

#SandBox .mix     {display:none; opacity:0}
#SandBox ul       {display:inline-block; width:100%; list-style-type:none; font-size:0.1px; line-height:0}
.bl               {position:absolute; width:310px; bottom:3px; word-wrap:break-word}

#SandBox .mix h5{
  position: absolute;
  margin-left:-1px;
  text-transform: uppercase;
  line-height: 1em;
  z-index: 2;
  bottom: 0px;
  left:   0px;
  right:  0px;
  top:    62%;
  padding-top:    3px;
  padding-bottom: 14px;
  padding-left:   8px;
  padding-right:  8px;
  font:13px "Open Sans";
  letter-spacing: 0.99;
  color:#FFFFFF;
  background-color:rgba(0,0,0,0.6);
  word-wrap:break-word
}

#SandBox .mix .img_wrapper.loaded {opacity:1}

/* =============================================================================
   dropdown
   ========================================================================== */

.wrapper-dropdown { /* filter op assortimentsgroep */
    position: absolute;
    width:298px;
    line-height:30px;
    margin-top:-70px;
    padding:11px;
    color:#ffffff;
    background: #0077FF;
    border-radius:7px;
    cursor:pointer;
    outline:none
}

.wrapper-dropdown .dropdown {  /* assgroepen */
    position: absolute;
    z-index:100;
    top: 66px;
    left: 0;
    right: 0;
    background: white;
    border-radius: inherit;
    border: 1px solid rgba(0,0,0,0.17);
    font-weight: normal;
    list-style: none;
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
    opacity: 0;
    pointer-events: none;
}

/* active state */
.wrapper-dropdown.active .dropdown {opacity:1; pointer-events:auto}

#SandBox .button{
  position:relative;
  display:inline-block;
  list-style-type:none;
  line-height:50px;
  width:152px;
  margin-top:4px;
  margin-bottom:4px;
  margin-left:4px;
  margin-right:4px;
  cursor:pointer;
  vertical-align:top;
  text-align:center;
  background-color:#002233;
  color:#FFFFFF;
  font-weight:400;
  border-radius:5px;
  font-size:16px;
}

#SandBox .button.active {
  background: #0077FF;
  color: #FFFFFF;
  padding-right:0px !important;
}

/* =============================================================================
   alertbox popup
   ========================================================================== */

#alertbox {
  display:none; position:absolute; z-index:5; top:0%; left:0%; width:100%; height:2000px; background:rgba(0,0,0,0.6); cursor:pointer}

#alerttext {
  font:22px"hamburg-regular"; padding:1em; background-color:#ffffff; text-transform:lowercase; margin:0 auto; margin-top:5%;
  text-align:center; width:222px; color:#114488; border-radius:30px; border:solid #FF5522 6pt; z-index:6 }

u {font:20px"hamburg-bold"; line-height:28px; text-decoration:none; color:#4477FF; text-transform:uppercase}
x {font:18px"hamburg-regular"; line-height:22px; text-decoration:none; color:#4477FF; text-transform:lowercase}

/* =============================================================================
   addbox popup
   ========================================================================== */

#addbox {display:none; position:absolute; z-index:100; top:0%; left:0%; width:100%; height:2000px; cursor:pointer; background:#FFFFFF}

/* =============================================================================
   various
   ========================================================================== */

#barcode {position:absolute; z-index:200; left:-2px; top:500px; width:320px; height:40px; display:none;
          line-height:40px; border:0px solid #000000; font:24px "Lato"; text-align:center; color:#ffffff;
          left:0px; right:0px; margin-left:auto; margin-right:auto; background-color:transparent}

.footer {display:none !important}


/* motorola terminal 480 */
@media screen and (min-device-width:400px) and (max-device-width:600px)  {
     body              {overflow:visible;}
     #ubertainer       {zoom:89%; min-height:690px} /* scrolling for mc40  */
     #smokewrapper     {display:none}
     #logocontainer    {margin-top:-20px !important}
     #barcode          {display:visible !important}
}

/* =============================================================================
   zoom fx
   ========================================================================== */

@keyframes zoominout {
0%   { transform:rotate(0deg) scale(0.9) }
100% { transform:rotate(0deg) scale(1.0) }
}

.zoomfx {animation: zoominout 10s ease 0 alternate}


/* =============================================================================
   various nog na te kijken!
   ========================================================================== */

.deepshadow {
  -webkit-box-shadow: 0 25px 55px 0 rgba(0, 0, 0, 0.21);
  box-shadow: 0 25px 55px 0 rgba(0, 0, 0, 0.21);}

.menpos1    {position:absolute; left:0px;   top:0px; width:64px;  height:50px; cursor:pointer}
.menpos2    {position:absolute; left:240px; top:0px; width:52px;  height:50px; cursor:pointer}
.menpos3    {position:absolute; left:294px; top:0px; width:64px;  height:50px; cursor:pointer}
.menposfull {position:absolute; left:0px;   top:0px; width:340px; height:50px; cursor:pointer}

#zoekswitch    {height:30px; font:20px 'Arial'; background-color:#77CC00; color:#ffffff; cursor:pointer; padding:10px; border-radius:6px 6px 0px 0px}
#worpswitch    {height:30px; font:20px 'Arial'; background-color:#3b5998; color:#ffffff; cursor:pointer; padding:10px; border-radius:6px 6px 0px 0px}
#positieswitch {height:30px; font:20px 'Arial'; background-color:#118ECA; color:#ffffff; cursor:pointer; padding:10px;
                border-radius:6px 6px 0px 0px; line-height:30px}

#schapmenu   {position:absolute; width:360px; height:50px; background-color:#3b5998;
              background:url(../img/schappie/backgrounds/nextmenu.png) no-repeat; background-size:cover}

/* =============================================================================
   final edits
   ========================================================================== */

table            {color:#1786d3 !important}
.tdblue          {background:#1786d3 !important}

#positieswitch   {background-color:#1786d3 !important}
#footerswitch    {background-color:#1786d3 !important}

.nogo            {color:#FF0000; font-size:17px}
.noworp          {margin-top:6px; margin-left:-6px; width:354px; height:507px;
                  background:url(../img/schappie/backgrounds/noworp.jpg) no-repeat}
.nosearchresult  {margin-top:6px; margin-left:0px; width:320px; height:260px; border-radius:16px;
                  background:url(../img/schappie/backgrounds/nosearchresult.jpg) no-repeat}

#A {opacity:0; margin-left:0px; margin-top:9px;background:url(../img/schappie/keyboard/A-hover.png) no-repeat; background-size:contain}
#B {opacity:0; margin-left:0px; margin-top:9px;background:url(../img/schappie/keyboard/B-hover.png) no-repeat; background-size:contain}
#C {opacity:0; margin-left:0px; margin-top:9px;background:url(../img/schappie/keyboard/C-hover.png) no-repeat; background-size:contain}
#D {opacity:0; margin-left:0px; margin-top:9px;background:url(../img/schappie/keyboard/D-hover.png) no-repeat; background-size:contain}
#backspace {opacity:0; margin-left:0px; margin-top:9px;background:url(../img/schappie/keyboard/backspace-hover.png) no-repeat; background-size:contain}
#E {opacity:0; margin-left:0px; margin-top:5px;background:url(../img/schappie/keyboard/E-hover.png) no-repeat; background-size:contain}
#F {opacity:0; margin-left:0px; margin-top:5px;background:url(../img/schappie/keyboard/F-hover.png) no-repeat; background-size:contain}
#G {opacity:0; margin-left:0px; margin-top:5px;background:url(../img/schappie/keyboard/G-hover.png) no-repeat; background-size:contain}
#H {opacity:0; margin-left:0px; margin-top:5px;background:url(../img/schappie/keyboard/H-hover.png) no-repeat; background-size:contain}
#I {opacity:0; margin-left:0px; margin-top:5px;background:url(../img/schappie/keyboard/I-hover.png) no-repeat; background-size:contain}
#J {opacity:0; margin-left:0px; margin-top:5px;background:url(../img/schappie/keyboard/J-hover.png) no-repeat; background-size:contain}
#K {opacity:0; margin-left:0px; margin-top:5px;background:url(../img/schappie/keyboard/K-hover.png) no-repeat; background-size:contain}
#L {opacity:0; margin-left:0px; margin-top:5px;background:url(../img/schappie/keyboard/L-hover.png) no-repeat; background-size:contain}
#M {opacity:0; margin-left:0px; margin-top:5px;background:url(../img/schappie/keyboard/M-hover.png) no-repeat; background-size:contain}
#N {opacity:0; margin-left:0px; margin-top:5px;background:url(../img/schappie/keyboard/N-hover.png) no-repeat; background-size:contain}
#O {opacity:0; margin-left:0px; margin-top:5px;background:url(../img/schappie/keyboard/O-hover.png) no-repeat; background-size:contain}
#P {opacity:0; margin-left:0px; margin-top:5px;background:url(../img/schappie/keyboard/P-hover.png) no-repeat; background-size:contain}
#Q {opacity:0; margin-left:0px; margin-top:5px;background:url(../img/schappie/keyboard/Q-hover.png) no-repeat; background-size:contain}
#R {opacity:0; margin-left:0px; margin-top:5px;background:url(../img/schappie/keyboard/R-hover.png) no-repeat; background-size:contain}
#S {opacity:0; margin-left:0px; margin-top:5px;background:url(../img/schappie/keyboard/S-hover.png) no-repeat; background-size:contain}
#T {opacity:0; margin-left:0px; margin-top:5px;background:url(../img/schappie/keyboard/T-hover.png) no-repeat; background-size:contain}
#U {opacity:0; margin-left:0px; margin-top:5px;background:url(../img/schappie/keyboard/U-hover.png) no-repeat; background-size:contain}
#V {opacity:0; margin-left:0px; margin-top:5px;background:url(../img/schappie/keyboard/V-hover.png) no-repeat; background-size:contain}
#W {opacity:0; margin-left:0px; margin-top:5px;background:url(../img/schappie/keyboard/W-hover.png) no-repeat; background-size:contain}
#X {opacity:0; margin-left:0px; margin-top:5px;background:url(../img/schappie/keyboard/X-hover.png) no-repeat; background-size:contain}
#Y {opacity:0; margin-left:0px; margin-top:5px;background:url(../img/schappie/keyboard/Y-hover.png) no-repeat; background-size:contain}
#Z {opacity:0; margin-left:0px; margin-top:5px;background:url(../img/schappie/keyboard/Z-hover.png) no-repeat; background-size:contain}
#space {opacity:0; margin-left:0px; margin-top:5px;background:url(../img/schappie/keyboard/space-hover.png) no-repeat; background-size:contain}

/* =============================================================================
   zoom slider
   ========================================================================== */

.reset{
  height:36px;
  width:60px;
  margin-top:-4px;
  margin-bottom:0px;
  margin-left:4px;
  cursor:pointer;
  text-align:center;
  line-height:36px;
  background-color:#FFFFFF;
  color:#333333;
  font-weight:400;
  font-size:14px;
}

.zoom-range {float:left; width:250px; margin-left:10px}

input[type='range'] {
    -webkit-appearance: none;
    border-radius: 5px;
    box-shadow: inset 0 0 5px #333;
    background-color: #999;
    height: 30px;
    vertical-align: middle
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    border-radius: 0px;
    background-color: #FFF;
    border: 1px solid #999;
    height: 30px;
    width: 50px;
    cursor:pointer
}

.zoombah {
    z-index:999;
    animation:zoom 2s;
    -webkit-animation:zoom 2s;
}

@keyframes zoom {
    0%   { transform:scale(1) }
    100% { top:45%; left:50%; transform:scale(5) }
}

@-webkit-keyframes zoom {
    0%   { -webkit-transform:scale(1) }
    100% { top:45%; left:50%; -webkit-transform:scale(5) }
}

#fademein {height:480px !important;}