body{ font-family:Roboto Condensed; overflow-x:hidden;} 
img[ bn-lazy-src ] {
            background-image: url( "https://api.motra.co/image/checkered.png" ) ;
        }
.xbutts > .menubutton:nth-of-type(3){
    float:right !important; 
    width:calc(100% - 100px)/2 !important;
    
}
.confirmdial{
    position:fixed; background:rgba(0,0,0,0.2); left:0; width:100%; top:0px; height:100%; z-index:1000;
}
#pos_placeholder img[alt]{
    font-size:20px; line-height:110px; display:block; font-weight:bold;
}

#pos_placeholder.nodisplay .menubutton{ height:80px; border:1px solid #999; background:rgba(0,0,0,0.02); }
#pos_placeholder.nodisplay .menubutton img{ display:none; }
.confirmdial .confirmdial-bod{
    background:#FFF; padding:10px; text-align:center; box-shadow:0 0 5px #999; width:500px; max-width:100vw; margin:10vh auto;
}
#settings .csync{ color:red; border:1px solid red;}
#settings .csync.success{ color:green; border:1px solid green;}
.datepick{ max-width:360px; display:inline-block; }
.inputdiscount *{ background:transparent !important; border:none !important; color:#FFF; }        
.inputdiscount input{ font-size:35px; text-align:center;}
.inputdiscount input:focus{ font-size:38px; box-shadow:none; border-bottom:1px solid #e9e9e9;}
.inputdiscount .input-group-btn{ margin:auto 10px;}
.btn-group.join{max-width:100%; overflow:auto; white-space:nowrap;}     
.btn-group.join .btn{ float:none; }
.btn-group.join .btn.opselected{ opacity:0.65; cursor:pointer !important;}
.sale.focusbtn:focus{ background:#1654af;}
.consume.focusbtn:focus{ background:#999;}
.btn{ min-height:30px;}     
.unselectable{
     -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
	.offline nav.navbar-default{ background:#CCC !important; }
	.offline .btn-showbasket{ background:#CCC; }
	.offline .posmodalwrapper .toolbar{ box-shadow:0 -10px 50px 1px #ccc inset; }
div.itemlist::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #fff; /* or add it to the track */
}
/* Add a thumb */
div.itemlist::-webkit-scrollbar-thumb {
    background: #999; 
}
*::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #fff; /* or add it to the track */
}
/* Add a thumb */
*::-webkit-scrollbar-thumb {
    background: #999; 
}

.itemlist .menubutton{
    height:145px;
    box-shadow:none;
    border:none;
    background:transparent;
}

.btnname{
	white-space:nowrap;
    background-color:transparent; color:#000; font-size:15px; position:relative; width:100%; bottom:0;
}
.x150p .btnname, .x150p .table{
    font-size:24px !important;
}
.x150p .itemlist .menubutton{
    height:175px;
    box-shadow:none;
    border:none;
}
.x200p .btnname, .x200p .table{
    font-size:30px !important;
}
.x200p .itemlist .menubutton{
    height:195px;
    box-shadow:none;
    border:none;
}
.mmmmmainblk.menubutton:nth-child(2){ width:100vh !important;}
.menubutton img:after {  
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #e9e9e9;
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2;  
  text-align: center;
  content: attr(alt);
}
.menubutton{
 	width:48%;
 	border-radius:0 !important;
 max-width:185px;
 min-width:100px;
 height:110px;
 position:relative;
 vertical-align:middle;
 padding:0px 0; 
 font-size:13px;
 margin:0;
 word-wrap:break-word; white-space:normal !important;
 background-image:none;
text-shadow:none;
 background-size:cover !important;
 overflow:hidden;
 }
 .pprice{display:none;}
.pricepromo .price{ text-decoration:line-through; color:red;}
.pricepromo .pprice{ display:inline-block;}

 .addtype .customerlist input{ border:none; border-bottom:1px solid #999; box-shadow:none; background:transparent; color:#FFF;}
 .customerlist input:focus{ box-shadow:none; }
 
.form-control{ border:none; border-bottom:1px solid #999; box-shadow:none; background:#f9f9f9;}
.input-group .input-group-addon{ border:none; border-bottom:1px solid #ccc; box-shadow:none; background:#f9f9f9; }
 .addtype .menubutton{ color: #FFF;}
 .addtype{ padding:4% 10%; position:fixed; top:0; left:0; z-index:2000; background:rgba(0,0,0,0.8); width:100vw; height:100vh; }
 .addtype h3, .addtype label{ color:#e9e9e9;}
 .addtype .modal-body{ width:100%; max-height:100%; }
 .customeroptions{
 background:rgba(0,0,0,0.3);
 position:absolute; width:180px; height:100%; overflow:auto; right:0; top:0%;
 }
 
 .posmodalwrapper{
 z-index:50; position:fixed; bottom:0px; left:0px; padding-left:50px; box-shadow:0 0 7px #999; background:#FFF; width:100%; height:100vh;
 }
 .modal-content{ border-radius:3px;}
 .modal-footer h3{ font-size:110%;}
.pos .menubutton img{ opacity:0.5; }
.pos .menubutton, #modules .menubutton, #reporting .menubutton{
 margin:3px; float:left; z-index:5;
 border:none;
 position:relative;
background:#f9f9f9; box-shadow:0 7px 7px #999; border-radius:1px; 
}
 .menuxbutton >div{ font-size:80%;}
 .itemlist .menubutton{ float:left; position:relative;}
 .selection_menu .menubutton{

 border-radius:0;
 float:none;
 background: #f9f9f9;

 }
 .modal-dialog { margin-bottom:5px; overflow:hidden;}
 .hoverred:hover{ background:red; color:#FFF; text-shadow:none;}
 .expressco{
 left:1vw; bottom:10px;
 border:1px solid #e9e9e9; color:#e9e9e9; position:absolute;
 border-radius:5px; padding:5px; background-color:transparent;
 }
 .pos_set .itemselect{
     position:absolute; bottom:-50px; max-height:100px; overflow:auto; width:100%; background:#999; user-select:none; left:0px; padding:5px; z-index:10; padding-bottom:10px;  opacity:0.5;
 }
 .cornerbtn.pos_rent{
 position:absolute; border:none; border-radius:0; box-shadow:0 -2px 10px #999; min-width:300px; max-width:350px; width:50%; bottom:0px; z-index:1000; right:6px;
 }
 .posbox{
 padding:4px; border-radius:none;
 position: fixed; min-width: 300px; 
 bottom: 0px; right: 6px; width: 50%; z-index: 90; 
 max-width: 350px; margin: 0px auto; height: 72%; min-height: 100px; overflow: auto; 
      overflow-x:hidden;
 border:none;
 box-shadow:-1px -1px 3px 1px #999;
 border-bottom: 1px solid transparent; background-color:#f9f9f9;
 }
 .posbox .table{ background:#e9e9e9;}
 .rentports{ z-index:100; position:relative; background:#f9f9f9; height:80%; overflow:auto; overflow-x:hidden;}
 .rentrates>td, .rentrates>th{
 width:15%;
 }
 .rentrates>td:nth-child(1), .rentrates>th:nth-child(1){
 width:40%;
 }
 .rentrates>td:nth-child(n+4), .rentrates>th:nth-child(n+4){
 width:15%;
 }
.selection_menu{ padding-top:10vmin; }
 .rentrates input{ width:100%; min-width:20px; max-width:80px; }
 .occupied{ border-right:5px solid #541b66 !important; }
 .lean-left .occupied{ border-right:1px dotted #CCC !important; border-bottom:3px solid #541b66 !important; }
 .void{ text-decoration:line-through; color:#CCC;}
 *[ng-model=cpass]{ display:none;}
 h4.warehouse{
 cursor:pointer;
 padding:2px; margin:0; width:100%; background-color:#999; color:#FFF;
 }
 h4.warehouse span{
 font-size:12px;
 }
 h4.warehouse:hover{
 opacity:0.5;
 }
 .shadow{
 opacity:0.5;
 pointer-events:none; position:absolute; right:10px; bottom:5px; z-index:3;
 }
 .form-control{
 background-repeat: no-repeat;
 background-size: contain;
 background-position: right center; 
 
 }
 .modal-title{ padding:5px;}
 .chartport{
     background:#f9f9f9;
     box-shadow:0 0 2px #666;
     padding:1vmin;
width:100%;
border-radius:2px;
 display:inline-block;
 margin:26px 0; display:inline-block;
 position:relative;
 }
 .xchartport canvas{ width:auto !important; height:auto !important; }
 .chartport:hover  .ctitle{
 	color:blue;
 }
 .chartport .ctitle{ position:absolute; top:-24px; left:5px; background-color:rgba(255,255,255,0.8); font-size:120%;}
 .btn-white{ border:1px solid #ccc; background:#f9f9f9;}
 .positive{ background-color:#d3ffe5;}
 .negative{ background-color:#fcccd5;}
 .admin{ background-color:#d4edf7;}
 .superadmin{ background-color:#74caed !important; }
 .unique{ border-bottom:1px outset #CCC; box-shadow:2px 0 2px #999;}
.qtymark{
    padding-top:2px;
 position:absolute; right:15px; width:20px; font-size:12px; height:20px; border-radius:10px; z-index:4;  bottom:32px; color:#FFF; background:#666;   
}
 
.qtymark.red{ background:red; }
.status1{ }
.status-1{ color:#999; border:2px solid #999; }
.status0{  }
.status2{ border:2px solid green; }
.overlay{ width:100%; min-height:100%; overflow:auto; position:fixed; background:rgba(255,255,255,0.9); top:0; left:0; z-index:1000;}
.overlay .closeoverlay{ bottom:5px; right:5px; position:absolute;}
.menubutton .sale-count{ position:absolute; font-weight:bold; right:15px; width:18px; font-size:10px; padding-top:2px; height:18px; border-radius:9px; z-index:4;  bottom:32px; color:#FFF; background:#666; }
.menubutton.feepending{ border-bottom:5px solid #666;}
.qtymarku{ background-color:#439967;}
.modal-footer{ position:relative; z-index:101;}
 .modal-sm{ max-width:500px; margin:auto; }
 .modal-sm .modal-body{ padding:15px; } 
 .modal-sm .modal-footer{ padding:4px;}
 .redeembtn{  width:45%; margin:1%; height:80px; display:inline-block;  color:#FFF; position:relative; cursor:pointer;}
 .ent_name{ width:60%; display:inline-block;}
 .ent_count{ width:100%; height:100%; text-align:center; font-size:58px; color:#000; background:#FFF; opacity:0.3; top:0; position:absolute; ;}
 .popupmsg{ text-align:center; padding:30px 15px; display:block;}
 .menubutton[cat=sale] .colorcode{ background:linear-gradient(#72baf9,rgba(255,255,255,0)); }
 .menubutton[cat=rent] .colorcode{ background:linear-gradient(#FFBC3B,rgba(255,255,255,0)); }
 .menubutton[cat=job] .colorcode{ background:linear-gradient(#FFED3D,rgba(255,255,255,0)); }
 .menubutton[cat=tradein] .colorcode{ background:linear-gradient(#f7714c,rgba(255,255,255,0)); }
 .menubutton[cat=service] .colorcode{ background:linear-gradient(#A2EC3A,rgba(255,255,255,0)); }
 .menubutton[cat=schedule] .colorcode{ background:linear-gradient(#eaa3ed,rgba(255,255,255,0)); }
 .menubutton[cat=package] .colorcode{ background:linear-gradient(#3AE9CD,rgba(255,255,255,0)); }
.menubutton[cat=voucher] .colorcode{ background:linear-gradient(#97efe2,rgba(255,255,255,0)); }
.menubutton[cat=consume] .colorcode{ background:linear-gradient(#3AE9CD,rgba(255,255,255,0)); }

.packserv tr:hover{ opacity:1; }
.right-align{ text-align:right;}
.left-align{ text-align:left;}
 *:disabled{ opacity:1 !important; background-color:#e0e0e0;} 
 .menubutton:disabled .colorcode{ background:#CCC; }
.jumbotron{ padding:2px; margin:2px; }
.manager .navbar-default .navbar-nav>li>a { color:#FFF; }
.manager .navbar li a.selected { background-color:#bebee0; color:#000;}

 #inventory .form-control, #inventory .input-group{ max-width:400px;}
 #manager #inventory .data h1{ border-radius:4px; background-color:#e9e9e9; font-size:90%; display:block; padding:4px;}
 #manager .select.shops{ border-radius:0px; background-color:#FFF;}
 #manager .menubutton{
 height:85px;
 }
 .seeall{ margin-top:25px;
 width:calc(100% - 100px); position:absolute; box-shadow: 0 0 30px 10px; height:90%; top:0; overflow:auto; background-color:rgba(255,255,255,0.95); z-index:1200; padding:5px 20px; padding-bottom:25px;
 }
 .shoplist{ background-color:#FFF; box-shadow:0 0 30px 6px #666; border-radius:5px; min-height:300px;}
 .shoplist a.btn{ display:block;}
 .btn-close{
 	position:absolute;
top:0px; right:10px; z-index:999; float:right; border-top:none;
 background-color:transparent; color:#999; text-shadow:none; padding:2px 12px;
 }
 .btn-hide{
top:0px; right:10px; z-index:999; float:right; 
 background-color:transparent; color:#999; text-shadow:1px 1px #fff; padding:2px 12px;
 }
 .btn:hover{ background-position:0 0 !important; opacity:0.9; }
 .btn-close:hover{
 background-color:#9b1212; color:#FFF;
 	
 }
 .btn-2, .btn-3, .btn-4{ width:100%; } 
 .btn-4 .btn{ width:25%; text-shadow:none; }
 .btn-3 .btn{ width:33%; }
 .btn-2 .btn{ width:50%; }
 .rotate{
 -moz-transform: rotate(-90.0deg); /* FF3.5+ */
 -o-transform: rotate(-90.0deg); /* Opera 10.5 */
 -webkit-transform: rotate(-90.0deg); /* Saf3.1+, Chrome */
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6,IE7 */
 -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
}
.rotate h1{ color:#FFF; width:500px;}
 listlabel{
 font-weight:bold;
 display:block;
 background-color:#e9e9e9;
 position:relative;
 padding-right:8%;
 }
 .invspecs .image{
 height:200px !important;
 background-size:contain;
 background-position:center;
 background-repeat:no-repeat;
 } 
 div[cat=components]{
 float:left;
 width:100%;
 border-bottom:1px solid #ccc;
 }
 #staff th:nth-of-type(1), #staff td:nth-of-type(1), #customerinfo th:nth-of-type(1), #customerinfo td:nth-of-type(1){
 display:none;
 }
 .hidescroll{overflow:hidden; }
 .hidescroll .butts{ display:none !important;}
 
 .modal-body{
     max-height:70vh;
 -webkit-overflow-scrolling: touch;
 }
 #customerinfo .tablecontent table thead th:nth-child(n+7){
 display:none;
 }
 #customerinfo .tablecontent table tbody td:nth-child(n+7){
 display:none;
 }
 .lean-left{ float:left; }
 .componentsmenu{
 box-shadow:0 0 3px #333;
 position:absolute; overflow-y:auto;
 z-index:9; color:#999; bottom:52px; 
 right:20px; padding:5px; border-radius:14px 14px 14px 0; background-color:#FFF; height:200px; width:250px;
 }
 .customcomponent{
 box-shadow:0 0 3px #333;
 position:absolute; overflow-y:auto;
 z-index:9; color:#999; bottom:52px; 
 right:30px; padding:5px; border-radius:14px 14px 14px 0; background-color:#FFF; max-height:200px; width:250px;
 }
 list items{ display:block; 
 height:200px; overflow:auto; }
 #app .name, #app .units, #app .price{ overflow-x:hidden; height:25px; overflow-y:hidden;}
 .posmodalwrapper .modal-body{
       max-height: calc(100vh - 160px);
 }
 summary .name{ display:inline-block; width:50%; padding:2px;} 
 summary .units{ display:inline-block; width:20%; padding:2px 5px;}
 summary .price{ display:inline-block; width:25%; padding:2px 5px;}
 listlabel div{ padding:2px 5px !important;}
 list items .item{
 display:block;
 }
 .backgroundimage, items .item:hover{ opacity:0.7; background-color:#FFF; cursor:pointer; }
 .alertmodal, .wow, .modal-content .menubutton, .actionmenu, .imeimenu, .keywordmenu{
 -webkit-transform: translatez(0);
 -moz-transform: translatez(0);
 -ms-transform: translatez(0);
 -o-transform: translatez(0);
 transform: translatez(0);
}

 #about ul{ list-style:none; opacity:0.5; font-weight:bold;}
 #about ul:hover{ opacity:1;}
 .btn-pressed{ 
 background-image:none;
 background-color: #e0e0e0;
 border-color: #dbdbdb;
 }
 #app .menubutton >span, #manager .menubutton >span{ 
 background-color:rgba(255,255,255,0.8); 
 font-weight:bold; display:block;}
 table tr:hover{ opacity:0.5;}
 .selection_menu{ text-align:center;}
#moreserv, #storeinfo, #inventory, #customerinfo, #staff,#modules,#reporting{ padding:15px 5px;}
 #home .pos{ padding:0 0px; }
 #storeinfo .table{ margin-bottom:0px;} 
 #storeinfo{ background:#EEE; min-height:100vh;}
 #storeinfo .btn-default{ max-width:550px; min-width:300px; overflow:hidden; position:relative; background:#f9f9f9; box-shadow:0 4px 7px #999; border-radius:0; }
 #storeinfo .btn-default:hover{ box-shadow:none; opacity:0.9; }
 #storeinfo .panel{ max-width:550px; min-width:310px; box-shadow:0 4px 7px #999; border-radius:0; }
 #storeinfo .panel-heading{ border:none; box-shadow:0 4px 5px #999; background:#7BC7E8; color:#FFF; border-radius:0; font-weight:bold; }
 #storeinfo .btnlist{ width:calc( 100% - 550px); max-width:650px; }
 #storeinfo .table .moreinfo{ text-align:right; padding-top:10px;}
 .storesummary .table{ background-color:#FFF; border-radius:3px; color:#333; }
 .otherbal .table{ font-size:150%; }
 .otherbal tr *{ padding:15px;}
 table .invvoid{ color:#ff0000; }
 table .increase{ color:#00ff61; } table .decrease{ color:#ff0000; }
 .invbtn{
 margin:0;
 border-radius:0 !important; height:200px;	width:48%;
 max-width:185px;
 min-width:100px;
 height:100px;
 font-size:15px;
 box-shadow:none;
 padding-top:30px; 
 background:#e9e9e9; border:none; white-space:normal; }
 .invbtn:hover{ transition: padding-top 0.2s ease-in, color 0.2s ease-in, font 0.2s ease-in; 
padding-top:20px; font-weight:bold; 
 font-size:20px; }
 .menubuttoxn:hover, #storeinfo .btn-default:hover, .btn-showbasket:hover{ box-shadow:none; opacity:1; transition: opacity 0.1s ease-in-out; opacity:0.2; }
 .menubuttoxn:active, #storeinfo .btn-default:active, .btn-showbasket:active{ opacity: 1;  opacity:1; transition: opacity 0.1s ease-in-out; }
.toolbar select option{ background-color:#000;}
 .posmodalwrapper > .btn-close{color:#FFF; box-shadow:none; border:1px solid #fff; border-top:none;}
 .pos_rent .btn-primary, .pos_rent.btn-primary, .pos_rent .selection_menu .menubutton, .pos_rent.toolbar{ color:#fff; text-shadow:none; background-image:none; border:none; background:#e8a11e;}
 .pos_sale .btn-primary, .pos_sale.toolbar{ color:#fff; text-shadow:none; background-image:none; border:none; background:#1654af;}
 .pos_consume .btn-primary, .pos_consume.toolbar{ color:#fff; text-shadow:none; background-image:none; border:none; background:#666;}
 .pos_service .btn-primary, .pos_service.toolbar{ color:#fff; text-shadow:none; background-image:none; border:none; background:#507a11;}
 .pos_set .btn-primary, .pos_set.toolbar{ color:#fff; text-shadow:none; background-image:none; border:none; background:#ba4c6f;}

 .pos_voucher .btn-primary, .pos_voucher.toolbar{ color:#fff; text-shadow:none; background-image:none; border:none; background:#821010;}
 .pos_tradein .btn-primary, .pos_tradein.toolbar, .pos_tradein .btnfour{ color:#fff; text-shadow:none; background-image:none; border:none; background:#ba3210;}
 .pos_schedule .btn-primary, .pos_schedule.toolbar{ color:#fff; text-shadow:none; background-image:none; border:none; background:#541b66;}
 .pos_package .btn-primary, .pos_package .selection_menu .menubutton, .pos_package.toolbar{ color:#fff; text-shadow:none; background-image:none; border:none; background:#05594b;}
 .pos_job .btn-primary, .pos_job .selection_menu .menubutton, .pos_job.toolbar, .pos_job .btnfour{ color:#fff; text-shadow:none; background-image:none; border:none; background:#a1a32a;}
 .modal-body .btn-group.btnfour .btn{ border:none; border-bottom:2px solid #CCC; border-radius:0; background:#e9e9e9; color:#666;}
 .pos_schedule.modal-body{ height:calc( 100% - 185px);}
 .pos_tradein.modal-body{ min-height:65vh;}
 .pos_rent .btn-primary:hover{ color:#fff; background:#507a11;}
 .pos_sale .btn-primary:hover{ color:#fff; background:#1654af;}
 .pos_service .btn-primary:hover{ color:#fff; background:#e8a11e; opacity:0.5;}
 .pos_set .btn-primary:hover{ color:#fff; background:#ba4c6f; opacity:0.5;}
 .modal-body input.form-control:focus{ height:40px; font-size:30px; }
.customerlist{ position:relative;}
.modal-header .btn-primary{ background:transparent; color:#999; border:1px solid #999; text-shadow:none;}
.customerlist a.btn.btn-block{ background:#bdfcc0; color:#666; border:none; border-radius:0 !important; margin:0 !important;}

.inventory_addinventory_list .btn,.selectid .btn-primary{ background:#FFF; text-shadow:none; padding:8px; color:#999; border:none; text-align:center; border-radius:0 !important; margin:0 !important;}
.inventory_addinventory_list .btn:hover, .selectid .btn-primary:hover{ background:#265a88; color:#FFF; }

.scrollfloat{
    width:60px; padding:1px 3px; background:#e9e9e9; box-shadow:0 0 3px #999; border-radius:4px; position:absolute; right:5px; margin-top:30px; z-index:10;
}
.scrollfloat >div{ width:50%; border-radius:4px; text-align:center;}
.scrollfloat >div:hover{ background:#666; color:#fff;}

.uib-day button, .uib-month button, .uib-year button{ border-radius:0; }
 border:none; box-shadow:none; }
 #app .modal-content >div{ overflow-y:auto; }
 #app #home h3{
 padding:5px;
 border:1px solid #999;
 border-radius:4px;
 color:#666; 
 background:#e9e9e9;
 }
 #app #home #products .menubutton:nth-of-type(1){ background:url('image/phones.jpg');}
 #app #home #products .menubutton:nth-of-type(2){ background:url('image/electronics.jpg');}
 #app #home #products .menubutton:nth-of-type(3){ background:url('image/accessories.jpg');}
 #app #home #products .menubutton:nth-of-type(4){ background:url('image/others.jpg');}
 
 #app #home #services .menubutton:nth-of-type(1){ background:url('image/trade.jpg');}
 #app #home #services .menubutton:nth-of-type(2){ background:url('image/repair.jpg');} 
 #app .modal .menubutton[goto=newrepair]{ background:url('image/repair.jpg');}
 #app .modal .menubutton[goto=updaterepair]{ background:url('image/repair-update.jpg');} 
 #app .modal .menubutton[goto=releaserepair]{ background:url('image/repair-release.jpg');} 
 extra{ display:none;}
 #app #storeinfo .menubutton:nth-of-type(1){ background:url('image/add-expense.jpg');}
 #app #storeinfo .menubutton:nth-of-type(2){ background:url('image/cash-out.jpg');} 
 #app #storeinfo .menubutton:nth-of-type(3){ background:url('image/cash-topup.jpg');} 
 #app #storeinfo .menubutton:nth-of-type(4){ background:url('image/void.jpg');} 
 .keywordmenu{ position:absolute; z-index:100;
 top:65px; right:5px; width:50%; min-width:300px; height:60vh; background-color:#ccc; padding:3px; border-radius:3px; display:none;}
 #app .mainmenu{
 position:fixed;
 right:10px;
 bottom:10px;
 	 z-index:4;
 }
 #settings .btn .selectedfield{
 background-color:#26ABE3;
 color:#FFF;
 }
#settings{ max-height:65vh; }
 #settings .container div{ margin:5px 0;}
 #settings .btn{ border:1px solid #e9e9e9; 
 min-width:50px; max-width:240px; border-radius:2px; margin:5px;}

 #settings h4, #opening h4{ padding:15px 0px; border-bottom:1px solid #999;}
 .summary{
 position:fixed;
 top:60px; right:5px;
 	 z-index:3;
 	 text-align:right;
 }
 .summary >*{ text-align:left; margin:2px; }
 .summary .btn{ top:5px; right:5px; z-index:4;}
 .summary summary{ 
 box-shadow:0 0 4px 1px #999;
 z-index:3; 
 width:300px; min-height:300px; 
 border:1px solid #999; border-radius:4px;
 background-color:rgba(255,255,255,0.9);
 padding:5px; 
 }
 .slip .imgport{ z-index:20;
 width:90%; max-width:400px; display:none; position:fixed; bottom:20vh; background-color:#FFF;
 }
 .slip .imgport img{ width:100%; }
 .slip .imgport:hover{
 opacity:0.8;
 
 }
 .slip{
 position:relative;
 border:1px solid #999; padding:10px; min-height:60vh; max-height:80vh; overflow-y:auto; overflow-x:hidden; width:100%; max-width:800px; border-radius:4px; margin:0 auto; background-color:#FFF; color:#000;
 }
 .salesslip tr:first-child *{
 border-top:none;
 }
 .saleslip tr[key=Customer]{
 max-height:20px;
 }
 .summary summary list{
 display:block;
 overflow-y:auto;
 background-color:rgba(193,193,193,0.3);
 padding:0 3px;
 }
 
#basket{
 right:0; opacity:1;
 position:fixed; box-shadow:0 0 5px #999;  
 max-width:500px; min-width:320px; z-index:800; height:100%; width:100%;
 top:0; box-shadow:0 0 9px 3px #999; background:#FFF;
 border-radius:0 0 0 8px;
}
 #basket.ng-hide-remove{ 
 	animation: 0.5s ease-in slidein; }
 #basket.ng-hide-add.ng-hide-animate{  
     box-shadow:none;
display:block !important; animation: 0.5s ease-out slideout; }
 
 
 #basket.ng-hide-add.ng-hide-animate{ 
display:block !important; animation: 0.5s ease-out slideout; }
 
 #modalzone{} #modalzone{} #modalzone{} #modalzone{}
 .modal .selection_menu{ text-align:center; width:100%; }
 .serviceoptions{ padding:15px; margin:0; margin-left:100px; width:calc(100% - 101px); } 
 .modal-content .servicebuttons, .modal-content .tradeinbuttons{
 position:fixed; bottom:0px; right:0px;
 }
 .total{ display:block; float:left; width:100%; text-align:left; font-size:150%; padding:3px;}
 total{ font-size:150%; padding:3px; padding-top:10px;}
 .adjustments{ float:right; text-align:right;}
 
 .adjustments discount, .adjustments tax{ font-size:40%; font-weight:bold; color:#FFF; padding:2px; display:block; border-radius:3px; }
 discount{ background-color:#3cdd13; }
 tax{ background-color:#ff0033; }
 .summary summary .btn-lg{ margin:0; border-radius:0; width:50%; }
 .summary summary action .btn-group{ width:100%; margin:3px 0;}
 .summary summary action .btn{ width:20%; left:0;}
 .summary summary action .btn:nth-of-type(0){ border-radius:4px 0 0 0;}
.navbar li:hover{ background:none; background-color:#e9e9e9 !important;}
 .navbar li a.selected{ background:none; background-color:#e9e9e9 !important;}
.topbutton{
position:fixed;
top:60px; right:10px;
 }
 toggle.invasset div.toggle{ width:100% !important; }
 .toggleopening{
 	border-radius:0px; box-shadow:0 7px 8px #999; 
 	background-color:#e9e9e9;
 	
 	padding:4px;
 }
 .btn{
 box-shadow: inset 0 0 3px #e9e9e9;
 border-radius:2px;
 }
.btn-default{
 background: #f9f9f9;
 }
 .form-control{
 border-radius:2px;
 }
 .toggleopening .btn-default:disabled{
 background:#CCC;
 }
.imgbg-img:before{
 content: "\f03e"; 
 font-family: FontAwesome;
 font-style: normal;
 font-weight: normal;
 text-decoration: inherit;
/*--adjust as necessary--*/
 color: #999;
 font-size: 450%;
 padding: 0;
 top:0;
 position: absolute;
 width: 100%;
 left: 0px;
 z-index:0;
}
.imgbg-add:before{
 content:"\f067";
 font-family: FontAwesome;
 font-style: normal;
 font-weight: normal;
 text-decoration: inherit;
/*--adjust as necessary--*/
 color: #999;
 font-size: 450%;
 padding: 0;
 top:0;
 position: absolute;
 width: 100%;
 left: 0px;
 z-index:0;
}
.inline-block{ 
	display:inline-block; 
	margin:3px 0; 
	vertical-align:bottom; 
	position:relative; width:48%;
	overflow-y:hidden;
	height:100px;
	
}
.invert{
	transform: rotateY(180deg);
 -webkit-transform:rotateY(180deg);
 -moz-transform:rotateY(180deg); /* Firefox */
}
.img-btn{
 position:relative;
 vertical-align:middle;
 padding:0;
 width:50%;
 font-size:15px;
 margin:3px 0px;
 word-wrap:break-word; white-space:normal !important;
 background-image:none;
 background-size:cover !important;
 overflow:hidden;
	width:50%; height:120px;
}
.btn-showbasket{
 background-color:#55b6e3;
 position:fixed;
 z-index:1040;
 right:20px;
 bottom:20px;
 width:50px; height:50px;
 border-radius:25px;
 border:none;
 color:#FFF; text-shadow:none;
 box-shadow:0px 4px 6px #999;
}

.btn-addcustom{
position:fixed; z-index:10; right:20px; bottom:20px; width:50px; height:50px; border-radius:25px;
}
.btn-showbasket:hover, .btn-showbasket:focus {
 background:#7BC7E8; box-shadow:none; opacity:0.8;
}
.btn-mini{
	position:relative;
 vertical-align:middle;
 padding:0px 0;
 font-size:20px;
 margin:3px 1px;
 word-wrap:break-word; white-space:normal !important;
 background-image:none;
 background-size:cover !important;
 overflow:hidden;
	width:90px; font-size:5px; height:60px;
}
 .toggleopening.open{
 	
 	
 	background-color:#7BC7E8;
 }
 .pad75{ clear:both; position:relative; visibility:hidden; height:80px; }
 content >div{
 	z-index:2;
 	margin-left:50px;
 padding:0px;
 
 }
 content #home, 
 content #reporting,
 content #modules, 
 content #moreserv{
 margin-left:40px;
min-width:calc(100% - 40px);     
 }
.modal .input-group{ max-width:500px; vertical-align:top;}
 .modal .form-control{ max-width:500px; vertical-align:top;}
 .modal-body .form-control{ margin:5px auto; }
 .modal-body #settings .form-control{ }
 .pos{
 
 	margin:5px;
 }
 div{ outline: 1px solid transparent; }
 a, button{outline:0 !important; } button{ background:#CCC;}
 .uib-weeks .btn-sm{ background:#e9e9e9; }
 .uib-weeks .btn-sm .text-muted{ color:#999 ;}
 .timelog{ margin-left:3px;}
 /*POS modules after here*/
 .datebtn{ background-color:#FFF; 
 box-shadow:inset 2px 0 1px #666;
 border-radius:0; text-align:left; width:180px; border:1px dotted #ccc; border-bottom:3px solid #CCC;}
 .dateday{ white-space:normal; display:inline-block; width:300px;}
 .dateday.lean-left{ text-align:center; display:block; min-width:180px; width:19%; max-width:250px;}
 .lean-left .datebtn{ width:100%; margin-left:0; border:1px dotted #ccc; border-bottom:3px solid #CCC;}
 .lean-left .datebtn sub{ top:0; left:0;}
 .lean-left .datebtn.selected{ color:#000; border-bottom:3px solid #FFF; border-top:1px solid transparent;}
 .datebtn.selected{ color:#000; box-shadow:none; border-top:1px solid transparent; }
 .datebtn{ width:70%; margin-left:23%; 
 box-shadow:none; padding:0px;
 border-radius:0; text-align:left; border:1px dotted #ccc; border-top:1px solid #666;
 border-right:3px solid #CCC;
 }
 .datebtn sub{ top:-14px; left:-22%;}
 .datebtn.selected{ border-left:0px; border-right:0px; box-shadow:none;}
 /*POS modules before here*/
 .posmodal .modal-body{  height: calc(100vh - 100px); }
 
 .modal-body{ overflow-x:hidden; padding-bottom:45px; overflow-y:auto; }
 .modal-dialog{ width:auto; }
 .modal-dialog .modal-content{ border:none; overflow:hidden;}
 .modal-dialog{ overflow:hidden; max-width:1200px;}
 .modal-dialog.modal-sm{ max-width:500px;}
 canvas.invcapture{
 background-size:contain;
 background-repeat:no-repeat;
 background-position:center;
 }
 [ng-drag].drag-over{
 border:solid 1px red;
 }
 [ng-drop].drag-enter{
 border:solid 5px red;
 } 
 #shopbox [ng-drop].drag-enter{
 border:none;
 background:#999;
 opacity:0.8; font-size:20px;
 } 
 #manager content >div{
 	z-index:2; 
 height:100vh;
 overflow:hidden;
 padding:0px 0px;
 }
.manager content .mainframe{
 padding:10px;
 	overflow-x:hidden;
 }
 #manager content #home .mainframe>div{ 
 height:40vh; margin:15px 0; 
 }
 #manager content #home .mainframe>div canvas{ 
 width:100%; height:90%;
 }
 #manager content .mainframe .data{
 	padding-top:40px;
 	max-width:100vw; overflow-x:auto;
 }
 #manager content .sidebar{
 	 height:100%; min-height:100vh; padding-top:80vh; background-color:#999; vertical-align:bottom; color:#FFF; overflow:visible;
 }

 .manager .shopselect{position:fixed; z-index:1000; bottom:10px; right:10px; text-align:right; }
 .shopselect ul{ padding-left:0; list-style:none; background-color:#f9f9f9; border:1px solid #999; border-radius:2px; max-height:500px; overflow:auto; }
 .shopselect li{ width:100%; text-align:left;}
 .shopselect li a{ padding:4px 8px; width:100%; min-width:150px; display:block;}
 .shopselect li a:hover{ text-decoration:none; background-color:#e3ecfc;}
 .bootstrap-datetimepicker-widget{ position:absolute; z-index: 9999 !important;}
 #app .panel-heading{ font-weight:bold;}
 .searchoptions .btn{ border:1px solid #999; padding:2px 4px;}
 .selected{ background:#57B7E0 !important; color:#FFF;}
 #customerinfo h4{ padding:1vh 0vw;}
 .searchbar{ padding:0; margin:0;}
 .searchbar >a {
 position: absolute;
 right: 25px;
 top: 5px;
 font-size: 140%;
 color: #000;
}
.searchoptions .btn{ margin:4px; border-radius:0; border:none; border-bottom:1px dotted #999;}
.searchoptions .multiple .btn{ font-size:11px; padding:4px 8px; border-radius:2px;}

#customerinfo .searchoptions .multiple{ padding:5px; margin:10px; border-radius:4px; border:1px solid #ccc; border-radius:0 16px 16px 16px;}
 #app .tab-content{ padding:10px;}
 #app .imeimenu{ display:none; z-index:101; width:200px; position:absolute; padding:5px; }
 #app .imeimenu .btn{ margin:0; padding:15px;}
 #app .imeimenu .close{ padding:2px 8px; top:0; opacity:0.6; border-radius:4px; left:0; background-color:#333; position:absolute; font-size:25px;}
 #app .actionmenuwrapper{ position:absolute; 
 border-radius:4px 4px 0 0; background-color:#ccc; 
 display:none; width:280px; overflow:hidden; height:200px; left:12px; border:1px solid #999; bottom:140px; }
 #app .actionmenu{ 
 display:block;
 position:absolute; left:-1px; top:-1px; width:296px; height:200px; overflow-y:auto; 
 position:absolute; 
 }
 #app .actionmenu textarea{
 text-align:left;
 height:90%;
 
 }
 
 #app .actionmenu > .input-group{ width:280px;} 
 #app .actionmenu > .input-group span{ font-weight:bold; padding:6px 20px; font-size:24px;}
 #app .actionmenu .form-control{ border-radius:0; text-align:left;}
 #app .actionmenu .btn{ 
 display:block;
 height:40px;
 font-size:20px;
 border-radius:0;
 background-color:#FFF;
 border:1px solid #999;
 }
 #app .actionmenu .btn:hover{
 background-color:#f9f9f9; color:#999;
 }
 #app .actionmenu .btn:active{
 background-color:#4285f4; color:#fff;
 }
 #app .actionmenu .btn.selectedfield{ background-color:#74c8ed; color:#FFF;}
 #top, #myCarousel{
 z-index:10;
 height:90vh;
 padding:0;
 background-color:rgba(0,0,0,0.5);
 }
 #main .navbar-default .navbar-toggle .icon-bar{
 	background-color:#015C8C;
 }
 .carousel-caption{
 	
 padding:10vmin;
 text-align:left;
 }

 #pricetable{ text-align:center;} 
 a[href=login]{
 background-color:#4f87a3;
 }
 section{ padding:20px 0; z-index:1; background-color:#FFF; min-height:90vh;}
 div[data=imagehere]{
 	background-color:#e9e9e9;
 	margin:10px;
 	height:100px;
 	border-radius:3px;
 }
 div[data=imagehere] brands{
 	text-align:center; width:100%; display:block;
 }
 div[data=imagehere] img{
 	display:inline-block;
 	height:30px; width:auto;
 	
 }
 #pricing{
 background-color:rgba(233,233,233,0.6);
 }
 #pricing hr{ border-color:#ccc;}
 .sub{ text-align:center; background-color:rgba(233,233,233,0.3); padding:3px; border-radius:3px; }
 #main .navbar-default .navbar-nav>li>a { color:#e9e9e9;}
 #main .navbar-brand{ padding:0; margin-left:10px;}
 #main .navbar-brand img{height:38px; padding-top:10px;}
 #features{ text-align:center;}
 #main .navbar-default{
 background-image:none;
 background-color:#61A1C1;
 color:#e9e9e9;
 border:0px;
 }
 input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
 -webkit-appearance: none;
 margin: 0;
}
 .supplierlist{
 	
 overflow:auto;
 color:#000;
 }
 .supplierlist .panel-body{ max-height:80vh; overflow-y:auto;}
 .supplierlist .panel-body a{ display:block; font-size:130%; }
 .supplierlist .panel-body a:hover{ text-decoration:none; background-color:#e9e9e9;}
 .updatesupplierinfo{
 height:80vh;
 }
 .backgroundimage{ 
 	position:fixed; 
 	top:0;
 	left:0;
 	height:100%; width:100%; 	
		background:url('http://motra.sol59.com/assets/img3.jpg');
		background-size:cover;
 	z-index:0;
 }
 .downloadfiles{margin:30px 10px;} 
 .downloadfiles .btn{ padding:10px; margin:10px;}
 .videobutton{
 position:absolute; bottom:5vh; width:100%; z-index:100; 
 }
 .videobutton div{
 margin:0 auto; width:50vmax; text-align:center;
 }
 section .btn-primary{
 	background-image:none;
 	background-color:#61A1C1;
 }
 .videobutton .btn{
 	background-color:#61A1C1;
 }
 section h2{
 padding:50px 0 ;
 text-align:center;
 }
 #login{ 
 height:100%;
 width:100%;
 background-color:#3D97C9;
 background: radial-gradient(#3D97C9 30%, #0d6696); 
 }
 #login .btn{
 	background-color:#424244; color:#FFF;
 }
 #login .btn:hover{
 	background-color:#e9e9e9; color:#666;
 }
 .main{ 
 padding-top:20vh;
 height:100%;
 background: radial-gradient(#3D97C9 30%, #0d6696); 
 text-align:center;
 background-size: cover;
 }
 .position{
 text-align:center;
 font-size:150%;
 text-decoration:underline;
 }
 a{ color:#035F8E; }
 .main input, .main .btn{ margin:0; margin-top:10px; border-radius:0; }
 #main .btn{ margin:10px 0 0 0; color:#FFF; border:none;}
 .main div{ padding:0px; margin:0;}
 .main img{ width:70%; margin-bottom:30px; 	}
 #footer{
 	z-index:1;
 	height:50px;
 background-color: rgb(255,255,255,0.1);
 }
 #main #footer{
 	background-color:#FFF;
 }
 
 .half-remove{

transform-origin: top left;
/**animation: 0.5s ease-in halfre !important;**/
display:block !important; 
 } .half-add{
     transform-origin: top left;
animation: 0.5s ease-in half !important; display:block !important; 
 }
 
 .half-remove-active .modal-body, .half-add-active .modal-body{ opacity:0.5;  }

 .half{ 
 width:calc( 100% - 505px ) !important;
 min-width:500px;
 }

 #footer img{ height:50%;}
 #login-main .btn{
 margin: 0;
 background-color: #424244;
 color: #FFF;
 border: none;
 }
 #swap{
 color:#FFF;
 }
 #pricetable >div{ margin-top:10px;}
 #pricetable >div:nth-of-type(2){ box-shadow:0 0 13px 3px #999; margin:0; padding:0;}
 #pricetable >div:nth-of-type(2) .feature{ padding:15px;}
 #pricetable h3.type{ border-radius:3px 3px 0 0; padding:5px; }
 #pricetable h3.price{ border-bottom:2px solid #999; font-size:40px; color:#FFF; vertical-align:middle;}
 #pricetable h3{ background-color:#61A1C1; color:#e9e9e9; padding:5px; margin:0; }
 #pricetable .desc{ background-color:#c9c9c9; margin:0; font-size:100%; font-weight:bold; color:#666; padding:5px; text-align:left;}
 #pricetable .feature{ background-color:#fff; margin:0; padding:3px; border:1px solid #ccc; color:#666; border-radius: 0 0 3px 3px; }
 #pricetable yes{ color:#666;}
 #pricetable no{ text-decoration:line-through; color:#999;}
 #pricetable hr{ margin:5px;}

 label{ margin:3px 0;} .input-group-btn .btn{ margin:0;}
 #main input.form-control, #main .btn{ border-radius:0;}
 .socialmedia{
 z-index:2;
 position:fixed;
 right:3vmin;
 bottom:3vmin;

 }
 .invform{ overflow-y:visible !important;}
 .invform >*{ margin:2px 0;}
 .fullheight{ margin:10px;} .fullheight .btn{ padding:65px 0; min-width:250px; font-size:200%;}

 #inventory .tab-content .menubutton, #inventory .data .menubutton{ background-color:#FFF; font-size:16px; position:relative; display:inline-block;}
 .modal-content .menubutton{ 
 font-size:16px; position:relative; display:inline-block;}
 .menubutton .low{ position:absolute; bottom:20px; width:100%;}
 .menubutton .count{ 
 	font-size:60%; 
 	display:inline-block; 
 	color:#FFF; text-shadow:none; padding:3px 5px; border-radius:3px; position:absolute; right:0; }
 .menubutton .list{ position:absolute; left:0;
 width:100%;
 	background-color:#ccc; font-size:80%; display:inline-block; color:#000; padding:3px 5px; border-radius:3px;
 	
 }
#reporting .modreport .menubutton{
    background:#f9f9f9; 
}
#modules .menubutton{
    background:#f9f9f9; 
 border:1px solid #fff;
}
#reporting .menubutton{
    border:1px solid #fff;
}

#reporting .report .menubutton h4{
	margin-top:0;
}

#reporting .menubutton, #modules .menubutton{
padding-top:6px;
    
}
#reporting .colorcode, #modules .colorcode{
    top:0;
    position:absolute; width:100%; height:100%; z-index:-1;
}
.gradient{ background:linear-gradient(#ccc,#FFF); opacity: 0.3; position:absolute; width:100%; top:0; z-index: 0; height:100%; }
#modules .delmod{
    visibility:hidden;
    position:absolute; background:#a32222; border-radius:3px; height:62px; box-shadow: inset 0 0 6px 1px #999; transform: rotate(45deg); border:1px solid #FFF; -webkit-transform: rotate(45deg); margin:0 auto; width:62px; bottom:-36px; left:-36px;
}
#modules .menubutton:hover .delmod, #modules .menubutton:hover .deletemod{
    visibility:visible;
}

#modules .deletemod{
    visibility:hidden;
	position:absolute; border:none; box-shadow:none; left:0; bottom:0; background:transparent; color:#FFF;
}

 .menubutton .action{ position:absolute; right:0;
 	background-color:#999; font-size:60%; display:inline-block; color:#FFF; padding:3px 5px; border-radius:3px;
 	
 }
 .menubutton[status="2nd-hand"] .count{ background-color:#666;}
 .menubutton[status=new] .count{ background-color:#2ddd2a; }
 
 .socialmedia .btn-default{
 background-image:none;
 background-color:#4f87a3;
 }
 .external .menubutton{ margin:1px 0px;}
.btn-group.btnfour{ width:100%; }
 .btn-group.btnfour .btn{ width:25% !important; }
 .customerdetails, .userdetails{
 padding:5px;
 margin:15px;
 background-color:rgba(255,255,255,0.7);
 color:#000;
 border-radius:3px;
 }
 .customerdetails >div{
 line-height:30px;
 height:35px;
 }
 .userdetails >div{
 line-height:30px;
 margin:10px 0;
 border-bottom:1px dotted #999;
 }
 .form-control, .input-group, .searchbar{ max-width:500px;}
 .userdetails .select .btn{ color:#FFF;} .userdetails .select .btn.selectedfield{ color:#000; }
 .mysignature, .invoicesign{
 overflow:hidden;
 text-align:center;
 }
 .tradeinbuttons{
 position:relative;
 bottom:-20px;
 }
 .modal div.invspecs .specs{
		height:480px;
 }
 .modal div.invspecs> div{
 border-radius:5px; 
 padding:5px;
 margin:5px;
 background-color:#fff;

 overflow-y:auto;
 overflow-x:hidden;
 
 }
 .specsitem{ height:60px;}
 .specsitem div:nth-of-type(1){ font-weight:bold;}
 .specsitem:hover{ background-color:#ccc;}
	.modal div.invspecs .code{
		max-height:250px;
		width:110%;
		overflow-x:hidden;
	}
	.code a.btn{
	 display:block;
	}
 .modal .videostillcontainer{
 padding:0;
 }
 .input-group, .form-control{ margin:5px 0; }
 .input-group .form-control{ margin:0px 0; }
 .modal div.invspecs >div *{
 color:#000;
 }
 .modal-content .item{
 overflow-y:hidden;
 }
 .modal-content .item{
 overflow-y:hidden;
 }
 .modal .listall{
 background-color:#FFF;
 color:#000;
 }
 .partsmenu{ height:65vh; overflow:auto;}

/*MANAGER SECTION*/
#manager nav.navbar-default, #manager nav .dropdown-menu{
 background-image:none;
 background-color:#00002d;
 border:0px;
 }
#manager .navbar-default a{
 
 color:#fff;
 border:0px;
 }

.fa-alipay{
 width:35px; height:35px;
background-position:center;
/* background-image:url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR5eYYsBVJTGmiHNhQEkiUEXWsn_wZ4KxSOGIzns7d6yaT5t_sH');
*/}
.history{
 width:100%; z-index:200; padding:5px; background:#e9e9e9;
}

.confirmation .content *{ text-align:center;}
 @keyframes slidein {
 from {
 -webkit-transform:translate(400px,0);
 transform:translate(400px,0);
 } to {
 -webkit-transform:translate(0px,0);
 transform:translate(0px,0);
}
}
@keyframes slideout {
 from {
 -webkit-transform:translate(0px,0);
 transform:translate(0px,0);
 } to {
 -webkit-transform:translate(600px,0);
 transform:translate(600px,0);
 }
}
 @keyframes half {
 from { 
 width:100%;
 } to {

 -webkit-transform:scale(0,0); 
 transform:scale(0,0);
 }
}
@keyframes zipup {
 from { 
 -webkit-transform:scale(0,100px); 
 transform:scale(0,100px);
 } to {

 -webkit-transform:translate(0,0); 
 transform:translate(0,0);
 }
}

@keyframes fadein {
 from {
 opacity: 0;
 } to {
 opacity: 1;
 }
}

@keyframes faderight {
 from {
 -webkit-transform:translate(-400px,0);
 transform:translate(-400px,0);
 } to {
 -webkit-transform:translate(0,0);
 transform:translate(0,0);
 
 }
}
@keyframes half {
 from {
 -webkit-transform:scale(1,1);
 transform:scale(1,1);
 } to {
 -webkit-transform:scale(1,1);
 transform:scale(1,1);
 
 }
}
@keyframes halfre {
 from {
 -webkit-transform:scale(0.8,1);
 transform:scale(0.8,1);
 } to {
 -webkit-transform:scale(1,1);
 transform:scale(1,1);
 
 }
}
@keyframes faderightre {
 from {
 -webkit-transform:translate(0,0px);
 transform:translate(0,0px);
 } to {
 -webkit-transform:translate(-100%,0);
 transform:translate(-100%,0);
 
 }
}

@keyframes fadeupad {
 from {
 -webkit-transform:translate(0,400px);
 transform:translate(0,400px);
 } to {
 -webkit-transform:translate(0,0);
 transform:translate(0,0);
 
 }
}
@keyframes fadeupre {
 from {
 -webkit-transform:translate(0,60px);
 transform:translate(0,0px);
 } to {
 -webkit-transform:translate(0,400px);
 transform:translate(0,600px);
 }
}

@keyframes fadedownad {
 from {
 -webkit-transform:translate(0,-400px);
 transform:translate(0,-400px);
 opacity:0.5;
 } to {
 -webkit-transform:translate(0,0);
 transform:translate(0,0); 
 opacity:1;
 }
}
@keyframes fadedownre {
 from {
 -webkit-transform:translate(0,0px);
 transform:translate(0,0px);
 opacity:1;
 } to {
 -webkit-transform:translate(0,-400px);
 transform:translate(0,-400px);
 opacity:0.5;
}
}
@keyframes reduce500 {
 from {
 width: auto;
 } to {
 width: 500px;
 }
}
@keyframes reduce500 {
 from {
 opacity: 0;
 } to {
 opacity: 1;
 }
}
@keyframes shrink {
 from {
 opacity: 1;
 } to {
 opacity: 0;
 }
}
@keyframes fadeout {
 from {
 opacity: 1;
 } to {
 opacity: 0;
 }
}

.fadepos.ng-animate .modal-body .menubutton{ opacity:0.3; pointer-events:none;  }
 .fadepos.ng-hide-remove{ 
animation: 0.5s ease-in faderight !important; display:block !important; }
 .fadepos.ng-hide-add{
animation: 0.5s ease-out faderightre !important; display:block !important; }
 

 .fadeup.ng-hide-remove{ 
animation: 0.5s fadeupad !important; display:block !important; }
 .fadeup.ng-hide-add{
transform: translate3d(0,0,0);
animation: 0.5s fadeupre !important; display:block !important; }
 
 
 .fadedown.ng-hide-remove{ 
animation: 0.5s fadedownad !important; display:block !important; }
 .fadedown.ng-hide-add{ 
transform: translate3d(0,0,0);
animation: 0.5s fadedownre !important; display:block !important; }
 
 .fadein.ng-hide-remove{ animation: 0.5s fadein; }
 tr.ng-hide-add{ animation: 0.5s fadeout; }
 .fadein.ng-enter {
 -webkit-transition: 1s;
 transition: 1s;
 opacity: 0;
}
.fadein.ng-enter-active {
 opacity: 1;
}
 #inventory .menubutton.ng-hide-add{ animation: 0.5s shrink; }
 	.container-fluid{ padding:0; text-align:center; padding-left:0; padding-right:0;}
 .navbar>.container-fluid .navbar-brand {
 margin-left:0;

 }

 /* Extra Small Devices, Phones */ 
 @media only screen and (min-width : 480px) {

 }

 /* Small Devices, Tablets */
 @media only screen and (min-width : 768px) {

 }

 /* Medium Devices, Desktops */
 @media only screen and (min-width : 992px) {

 }

 /* Large Devices, Wide Screens */
 @media only screen and (min-width : 1200px) {

 }



 /*========== Non-Mobile First Method ==========*/

 /* Large Devices, Wide Screens */
 @media only screen and (max-width : 1200px) {

 }

 /* Medium Devices, Desktops */
 @media only screen and (max-width : 992px) {

 }

 /* Small Devices, Tablets */
 @media only screen and (max-width : 768px) {
     .datepick{ max-width:500px; }
 	ul.nav.navbar-nav{ width:100%; }
 	.half .modal-body .menubutton{ opacity:0.3; pointer-events:none;}
 	.navbar{ margin-bottom:0px; }
 	#navbar{ padding:0;}
 	.inline.visible-xs{ display:inline-block !important;}
text{ display:block; font-size:12px;}
hide{ display:none; }

 .addtype{ padding:35px 2vmin; }
nav ul{ display:inline-block;}
.nav ul{ display:inline-block;}
.navbar-header{ margin:0 !important; }


#navbar{ display:inline-block; padding:0; margin:0; width:100%; }
.navbar-nav { margin:0 3px; }



.navbar-fixed-top{ bottom:0; top:auto;}
.topbutton{
position:fixed;
bottom:70px; top:auto; right:10px; z-index:1030;}
 content >div{
 	z-index:2;
 padding:0px;
 padding-bottom:125px;
 
 }
 .selection_menu .menubutton{
 float:none;
 min-width:100%;
 margin:3px 0;
 background: #f9f9f9;
 box-shadow: none;

 }

 #inventory .form-control, #inventory .input-group{ max-width:220px;}
 #customerinfo .tablecontent table thead th:nth-child(n+4){
 display:none;
 }
 #customerinfo .tablecontent table tbody td:nth-child(n+4){
 display:none;
 }
 .storesum.inv.table thead th:nth-child(2), 
 .storesum.inv.table thead th:last-child{
 display:none;
 }
 .storesum.inv.table tbody td:nth-child(2), 
 .storesum.inv.table tbody td:last-child{
 display:none;
 }
 .storesum.cf.table thead th:nth-child(2), 
 .storesum.cf.table thead th:nth-child(3){
 display:none;
 }
 .storesum.cf.table tbody td:nth-child(2), 
 .storesum.cf.table tbody td:nth-child(3){
 display:none;
 }

 #staff table thead th:nth-child(n+4){
 display:none;
 }
 #staff table tbody td:nth-child(n+4){
 display:none;
 }
.chartport{
 left:0px; 
 xmin-height:35vh;
 }
 .report.modal-body{ padding:0; }
 .report .col-xs-12{ padding:5px; }
.rentunit{
 display:block;
}
nav{ box-shadow:0 0 3px #999; }
 .nav>li>a{ padding:10px 0;}
.navbar-brand{ float:right;}
.topbutton{ left:10px; right:auto; } 
 .timelog{ float:right;}
 }
.navbar-nav{ margin-left:7.5px -15px;}
nav.navbar-default{ overflow:hidden; width:50px; height:100vh; z-index:500; box-shadow:0 0 9px #999; text-align:center;}
nav text{ display:block; font-size:12px;}
nav li{ width:100%; }
nav a.selected{ color:#000; }
nav .navbar-right{ float:none; left:0; bottom:10px; width:100%; position:absolute;}
 .visible-xs{ display:none !important;}	
 
 	.navbar-brand img{ width:100%; height:auto;}
 /* Extra Small Devices, Phones */ 
 @media only screen and (max-width : 480px) {
.pos_set .itemselect{
     position:absolute; bottom:-50px; max-height:100px; overflow:auto; width:100%; background:#999; user-select:none; left:0px; padding:5px; z-index:10; padding-bottom:140px;  opacity:0.5;
 }     
     #basket .table td .btn-group{ display:none; }
      content #home, 
 content #reporting,
 content #modules, 
 content #moreserv{
 max-width:100vw;
 margin-left:0px !important;
}
 .serviceoptions{ margin:0; margin-bottom:80px; width:100%; } 
     #pos_placeholder .body-modal{
         height:calc(100% - 80px);
     }
 	#navbar{ min-width:300px; text-align:center; white-space:nowrap; }
 	.nav-parent{ max-width:100%; overflow-x:auto; }
 	
 .dateday{ white-space:normal; display:inline-block; width:100%;}
 .seeall{ width:100%; }
 .chartport{
 	position:relative;
 }
 .chartport canvas{ width:100% !important; }
 	.btn-showbasket{ 
 left:10px; right:auto; bottom:50px;}
 .btn-addcustom{
bottom:80px;
}
.btn-showbasket.consume{
    left:auto; right:10px; bottom:70px;
}
#storeinfo .btn-default{ min-width:10px;}
#storeinfo .panel{ min-width:100%;}
 .manager .shopselect{ position:fixed; bottom:80px; right:10px; max-width:400px; }
 	.navbar-brand img{ height:20px; width:auto;}
 	ul.nav.navbar-nav{ width:auto;}
 	.navbar li{ display:inline-block; width:22vw; text-align:center; }
 	.navbar-header *{ margin:0 10px; vertical-align:middle; display:inline-block; height:20px; padding:2px;}
.navbar-header img{ height:15px;}
 .visible-xs{ display:block !important;}	
nav ul{ display:inline-block; }
nav .navbar-right{ width:auto; position:relative; top:0;} 	
nav.navbar-default{ width:100vw; height:75px;}
 .manager .navbar li{ display:inline-block; font-size:20px; width:42px !important; text-align:center; }
 .manager .navbar text{ display:none;}
 content >div{
 	z-index:2;
 	margin-left:0px;
 padding:0px;
 
 }
 .modal-body{ max-height:70vh; padding:4px; }
 #manager .reportsummary{ max-width:200px;} 
.modal-dialog{ margin:0; padding:0;}
 .rentrates>td:nth-child(2), .rentrates>th:nth-child(2){
 display:none;
 }
 .posbox, .cornerbtn.pos_rent{
 margin-bottom:72px;
 }
 input.form-control, div.input-group{ max-width:none;}
 .dateday.lean-left{ width:100%; max-width:none;}
 .occupied{ border-right:3px solid #541b66 !important; }
 .lean-left .datebtn{ width:100%; margin-left:0;}
 .lean-left .datebtn sub{ top:0; left:0;}
 .dateday{ width:100vw;}
 
 .lean-left{ float:none; }
.rentrates>td, .rentrates>th{
width:25%;
 
}
.half{ min-width:auto; width:100% !important;}
.selection_menu{ padding-top:5vmin; }
 .rentrates>td:nth-child(1), .rentrates>th:nth-child(1){
 width:50%;
 }
 .rentrates>td:nth-child(n+4), .rentrates>th:nth-child(n+4){
width:25%;
 }
 .pos_schedule.modal-body{ height:60vh; height:calc(100vh - 308px); overflow:auto; }
 
 .posmodalwrapper{
 z-index:50; position:fixed; bottom:0px; left:0px; 
 padding-left:0px; box-shadow:0 0 3px #999;
 background:#FFF; width:100%; height:100vh;
     transform-origin: top left;

 }
  }

 /* Custom, iPhone Retina */ 
 @media only screen and (max-width : 320px) {
 
 }
 
@media screen and (orientation:portrait) {
/* Portrait styles */
#basket{
	max-width:none !important;
}
}
 @media print {
     ody *{ font-family:monospace; max-width:500px;}
     body{ height:auto; }
     body .modal, body .modal *{ height:auto; overflow:visible; max-height:none; position:relative;} 
     #loading, .addtype, .confirmation{ display:none;}
     #basket, #cornermsg{display:none !important; }
 nav, content, .topbutton{ display:none !important; }
 .modal{ width:100vw !important;}
 .hidedetails{ height:100% !important; background:#FFF !important; }
 .hidedetails div{ height:100% important; }
 #printdialog{ display:none !important; }
 #printdialog.s80 .rbody{ width:270px !important;}
 #printdialog.s58 .rbody{ width:270px !important;}
 #printdialog.s80{ padding:0 !important; max-width:325px; font-size:10px !important; letter-spacing: 0px !important;  }
 
 #printdialog.s58{ padding:0 !important; max-width:225px; font-size:10px !important; letter-spacing: 0px !important;  }
 #printdialog div{ padding:0 !important; border:none !important; }

}