/* html */
html {overflow: -moz-scrollbars-vertical; margin: 0; padding: 0;}
* {font-family: Arial, Helvetica, sans-serif; font-size:14px; box-sizing:border-box; }
select{
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIzMiIgaWQ9InRyaWFuZ2xlLWRvd24iIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik00IDggSDI4IEwxNiAyNiB6Ii8+PC9zdmc+) no-repeat 98% 50%;
	background-size:8px 8px;
	-moz-appearance: none; 
	-webkit-appearance: none; 
	appearance: none;
	padding-right:15px !important;
}
option{
	-moz-appearance: none; 
	-webkit-appearance: none; 
	appearance: none;
	padding:5px !important;
}

body {margin: 0px; padding: 0px; text-align: center; background-color:#fff;}
form {padding: 0; margin: 0; display: inline;}
input, textarea, select, .button {margin: 3px 0px; background-color:#f6f6f6;  padding:5px; border:1px inset #ddd;}
option{padding:3px;}
input[type="button"], input[type="submit"], input[type="reset"], .button  { border:0px; background-color:#009EDF; color:#fff; font-weight:bold; padding:8px 10px; cursor:pointer; text-decoration:none; white-space:nowrap; display:inline-block; text-align:center;}
.wide{width:100%;}
input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, .button:hover { background-color:#0080B0; text-decoration:none;} 
input + .button, input + input[type="button"], input + input[type="submit"], .button + .button {margin-left:10px;} 
input[type="file"] {border:0px;  background-color:transparent; display:inline-block;}
input[type="text"]:disabled { opacity:0.4;}
input[type="text"].active {border:2px solid #f00;}
input[type="color"] {padding:0; vertical-align:top; border-width:0; height:32px;}
input[type="checkbox"] {margin:0 8px; transform:scale(1.4); vertical-align:middle;}
*[disabled="disabled"], *[disabled] {opacity:0.4;}
#rules_matrix input {width:100%;}
.small { padding:4px 7px; font-size:10px;}
.lblbutton { display:inline-block; padding:3px 10px; background-color:#f6f6f6; border-radius:1000px; cursor:pointer;}
.lblbutton.checked { background-color:#777; color:#fff;} 
a{color: #1B57A3; text-decoration: underline; cursor: pointer;}
a:hover {text-decoration: none;}
a img {border: none;}
h1 { font-size:2.8em; color:#009EDF; text-shadow:1px 1px 3px #ccc;}
h2 { font-size:1.2em; background-color:#ddd; padding:10px 5px; color:#333; margin-bottom:0;}
h3 {margin:0 0 15px 0; font-size:1.5em; }
hr { border-width:0px; height:1px; background-color:#ccc; margin:20px 0; clear:both;}
fieldset{border-radius:5px; padding:20px; margin:20px 0; border:2px solid #009EDF;}
fieldset legend { font-size:2em;}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */  color: #aaa; opacity: 1; /* Firefox */}
:-ms-input-placeholder { /* Internet Explorer 10-11 */  color: #aaa;}
::-ms-input-placeholder { /* Microsoft Edge */  color: #aaa;}

/* generic */
#page_loading {width:100%; height:100%; display:none; z-index:100; position:absolute; text-align:center; opacity:0.5; filter:alpha(opacity=50); background: #FFFFFF url('../img/loading_xl.gif') no-repeat center center;}
.loading {background:  url('../img/loading_xl.gif') no-repeat center center; background-size:22px 22px; width:22px; height:22px; display:inline-block; vertical-align:middle; border-radius:100px; margin:0 5px;}
.date, .datetime {background-image:url(../img/calendar.png); background-repeat:no-repeat; background-position: top right; }
.inline { width:auto !important;}
.overlay { width:100%; height:100%; position:fixed; top:0; left:0; background-color:#fff; opacity:0.9;}
.edit { text-decoration: underline dotted #f00;}
.hide {display:none !important;}
.cols2,.cols3 {display:table; border-spacing:10px; width:100%;}
.cols2>div{width:50%; display:table-cell; vertical-align:top;}
.cols3>div{width:33%; display:table-cell; text-align:center;}
.clear{ clear:both;}
.clearL{clear:left;}
.error{ border:1px solid #f00; background-color: #fee; padding:5px; margin-bottom:3px; color:#f00;  text-align: center;}
.error2 {border:1px solid #f00; box-shadow:0 0 5px #f00}
.notification{ border:1px solid #009edf; background-color: #eef6ff; padding:5px; margin-bottom:3px; text-align: center;}
.warning{ border:1px solid #FFCC33; background-color: #FFFF99; padding:5px; margin-bottom:3px; text-align: center;}
.success, .success2{border:1px solid #A5BD71; background-color: #E4F1C9; padding:5px; margin-bottom:3px; color: #006600; text-align: center;}
.success2 {background:#090; color:#fff;}
.error>span, .warning>span, .success>span {float:right; cursor:pointer; width:18px; height:18px; border-radius:100px; display:inline-block; background: rgba(130,130,130,0.2);}
.required{ color:#FF0000;}
.nicetbl{ border:1px solid #ddd; border-collapse: collapse; width:100%; }
.nicetbl th { border:1px solid #ddd; padding:5px; background-color:#666; color:#fff;  white-space:nowrap; text-align:center;}
.nicetbl td { border:1px solid #ddd; padding:5px;}
.nicetbl tr:hover { background-color:#e6e6e6;}
.bigdata td>div {max-height:80px; overflow:auto; width:100%;}
.list td:last-child{ white-space:nowrap; text-align:center;}
.filters { background-color:#ffc;}
.filters input, .filters select {width:100%;}
.has-filter {border: 2px solid #f00;}
.sort { padding:2px 4px; border-radius:100px; text-decoration:none; background-color:#777; margin:0 2px; color:#fff; font-size: 11px;}
.sort:hover { color:#444;}
.sort.selected { background-color:#000;}
.left{text-align:left !important;}
.right{text-align:right !important;}
.center{text-align:center !important;}
.pagination { margin:20px 0px; text-align:center;}
.pagination strong, .pagination a { display:inline-block; padding:6px 10px; background-color:#ccc; text-decoration:none; color:#fff; border-radius:3px; }
.pagination a:hover {color:#444;}
.pagination strong { background-color:#000;}
.buttons { padding:8px 10px; text-align:center; }
.icon { display:inline-block; text-align:center; background-color:#ccc; line-height: 1em; padding:8px; color:#fff;}
.icon-round {text-decoration:none; font-size:11px;border-radius:1000px; padding:2px 5px; color:#fff;}
.red { background-color:#f00}
.green{ background-color:#090}
.yellow{ background-color:#ff0}
.blue {background-color:#06a;}
.help {font-size:11px; color:#aaa;}
.badge {display:inline-block; text-shadow:1px 1px 0 #000;border-radius:100px; padding:3px 10px; text-align:center; margin:0 3px;}
.star {opacity:0.2; cursor:pointer; font-size:2em;}
.star:hover {opacity:1;}
.star.green {opacity:1; color:#d90; background-color:transparent;}
.header-fixed>thead {  position: fixed; top: 0; left:0;	width:100%; border-right:1px solid #ccc; z-index:10; box-shadow:0 0 4px #555;}
.header-fixed>thead th, .header-fixed>thead td { border-width:0px; border-bottom-width:1px;}
.header-fixed>thead tr.filters:first-child td{ padding-top:45px} 
.list>div{ padding:10px;}
.list>div:nth-child(odd){ background-color:#e6e6e6;}
.list>div:hover {background-color:#cee;}
.list>div>span { float:right; padding:3px 10px; border-radius:1000px; background-color:#009EDF; font-weight:bold; color:#fff; cursor:pointer;}
.list>div>span:hover {color:#333;}
.w5{width:5% !important;}
.w10{width:10% !important;}
.w15{width:15% !important;}
.w20{width:20% !important;}
.w25{width:25% !important;}
.w33{width:33.33% !important;}
.w50{width:50% !important;}
.w66{width:66.66% !important;}
.w75{width:75% !important;}
.w100{width:100% !important;}
.upload-info * {font-size:11px;}
.upload-info {border:1px solid #ccc; border-radius:3px; padding:2px; font-size:11px; margin:2px; display:inline-block;}
.upload-pending {color:#999;}
.upload-inprocess {color:#f90;}
.upload-error {color:#f00;}
.upload-success {color:#0a0;}
.btn-print {opacity:0.6; background: #ccc url(../img/print.png) no-repeat left center; cursor:pointer; border:2px solid #ccc; background-size:16px; display:inline-block; padding:3px 3px 3px 20px; margin:0 3px; vertical-align:middle; font-size:10px !important;} 
.btn-print:hover {opacity:1;}
.mobile {display:none;}


/* header */
#nav { color:#ddf;  text-align:center; padding:10px;  background-color:#555; box-shadow:0 0 5px #000; min-height: 36px;}

#menu { text-align:left; }
#menu ul, #menu li {list-style-type:none; margin:0; padding:0;}
#menu li {display:inline-block; border-right:1px solid rgba(255,255,255,0.2); padding: 0 5px;}
#menu a { color:#fff;  font-weight:bold; text-decoration:none; }
#menu a:hover { text-decoration:underline;}
#menu a.selected { color:#ff0;}

#tools { float:right; color:#fff; margin-top:-5px; position:relative;}
#reportPanel { position:fixed; top:0; right: -600px; z-index:1000; padding:10px; max-width:500px; height:100vh; overflow:auto; background-color:#fff; color:#000; text-align:left; box-shadow:0px 0px 5px #000; transition:all 0.3s ease-in}
#reportPanel.open {right:0;}
#reportPanelResult>div>div {margin:3px 0;}

/* layout */
#header {   color:#fff; width:100%; position:fixed; top:0; z-index: 1000;}
#apptitle { background-color: #009edf; font-weight: bold; padding: 5px;}
#container { margin: 70px auto 2px auto; text-align: left; width:98%;}
#footer { padding:20px 0 40px 0; text-align:center; }

/* tabs */
.tabs {width: 100%; height: 31px; margin-bottom: 0px;}
.tabs a {float: left; display: block; padding: 6px 15px 7px 15px; margin-right: 2px; border: 1px solid #ddd; border-bottom-width: 0px; background-color: #ddd; color: #000; font-weight: bold; font-size: 13px; text-decoration: none; z-index: 1; position: relative; top: 1px; }
.tabs a.selected {background-color: #fff; border-bottom-width: 0px; padding-bottom: 10px; z-index: 3; }
.tab_page {border: 1px solid #ddd; background: #fff; padding: 8px; display: block; z-index: 2; margin-bottom: 10px; }

/* mass tools panel */
#masstools { position:fixed;  bottom:0; left:-320px; width:320px; box-shadow:0 0 5px #000; background-color:#fff; padding:10px; transition:left 0.3s ease; z-index:50;}
.masstools_opened #masstools {left:0; }
#masstools_title { cursor: pointer;
    background-color: #fff;
    padding: 10px;
    font-weight: bold;
    position: absolute;
    right: -112px;
    transform: rotate(90deg) translate(0, 0);
    bottom: 90px;
		box-shadow: 0px -5px 5px rgba(0,0,0,0.4);}
#masstools_wrapper { padding:10px; max-height:80vh; overflow:auto;} 
#masstools_wrapper > div {padding:10px 0; border-bottom:1px solid #ddd;}

/* my products fields */
.fieldlist:after {content:" "; display:block; clear:both;}
.fieldlist>div {width:100%; padding:5px; margin-bottom:10px;float:left;}
.fieldlist>div>label {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width:100%; display:inline-block;  border-left:4px solid #eee; padding-left:5px;}
.fieldlist>div:hover>label{ border-left:4px solid #009EDF}
.fieldlist>div>div {padding-top:5px;}
.fieldlist input[type="number"],
	.fieldlist input[type="text"], 
	.fieldlist select, 
	.fieldlist textarea {width:100%;}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 12px;
  text-align: left;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  background-clip: padding-box; 
}
.dropdown-menu>li {display:block;}
.dropdown-menu>li>a {display:block; padding:5px; text-decoration:none;}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a.focus  {background:#009EDF; color:#fff;}

/* css for timepicker */
#ui-datepicker-div { min-width:320px;}
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { float: left; margin:0; width:15%; text-align:right; padding:1%; padding-top:8px;}
.ui-timepicker-div dl dd { float: left; margin: 0; padding:0;width:16%}
.ui_tpicker_time {padding-top:8px !important;}
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
.ui-timepicker-rtl dl dd { margin: 0 45% 10px 10px; }

/*blinker*/
.live { background-color:#ff0; color:#000; border-radius:1000px}
.demo { background-color:#f00;  border-radius:1000px}

.blink_me {
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;

    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@-moz-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
		100% { opacity: 1.0; }
}

/* CASES MODULE */
#cases.nicetbl th {white-space:normal;  padding:3px;}
#cases.nicetbl td { padding:3px;}
#need_update {position:fixed; width:100%; left:0; bottom:0; z-index:10; margin-bottom:0; font-size:2em;}
.case_items ul {margin-top:0; margin-bottom:0; }
.case_items strong { background: #009EDF; padding: 3px; border-radius: 100px; width: 22px; display: inline-block; text-align: center; color: #fff;}
.case_items div {white-space:nowrap;}
.case_items * {font-size:12px; }

/* INVOICES (IMEIS) + STOCK MODULE */
#items.nicetbl td:last-child {white-space: nowrap}
.new, .pending, .completed {text-transform: capitalize; padding: 10px 30px; font-weight: bold; color: #fff; text-align: center}
.new {background-color: #aaa}
.pending {background-color: #f80;}
.completed {background-color: #0a0;}

#invoice_items {position:relative;}
	#barcode_wrapper {position:sticky; top:30px; background:#fff; box-shadow:0 0 5px #666; padding:20px; margin-bottom:20px; z-index:1;}
		#barcode {font-size: 40px; width: calc(100% - 150px);}		
		#barcode_wrapper button {font-size:36px; vertical-align:top; margin-left:5px;}

	#items_wrapper {}
		#items strong {white-space:normal;}
		#items tr th, #items tr td, #items tr th *, #items tr td *{vertical-align: top; text-align: center; font-size:18px;}
		#items tr th:last-child, #items tr td:last-child, #items tr td div {text-align: left;}
		#items .eans {white-space:nowrap;} 
		#items .serials>div { display: inline-block;  float:left; background:#e6e6e6; border:1px solid #fff; border-radius:100px; margin:7px 1%; width:30%; padding:5px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
		#items .serials>div.serial_warning {background:#fc0;}
		#items .serials>div button {border-radius: 100%; background-color: transparent; box-shadow: none; color: #999; border: 1px solid #999; cursor: pointer; vertical-align:middle; margin-right:10px; }
		#items .serials>div:hover button {border-color:#222; color:#222;}
		#items .serials>div button:hover{background-color: #f00; border-color:transparent; color:#fff;}
		#items .items_completed {background-color: #090; color:#fff;}
		#items .items_overflow {background-color: #f00;  color:#fff;}
		#items .items_incomplete {background-color: #fcc;}
		#items .item-active {background-color: #009EDF !important}
		.eans.multiple {max-height:60px; overflow:hidden; transition:max-height 0.5s ease; position:relative; cursor:pointer; }		
		.eans.multiple:after {content:'+'; font-size:20px; text-align:center; color:#000; display:block; background-color:#e6e6e6;  position:absolute; width:100%; bottom:0;left:0; opacity:0.9}
		.eans.multiple.expanded{max-height:500px;} 
		.eans.multiple.expanded:after{display:none;}		
	#final-result {display: inline-block; position:sticky; right:0; top:190px; float:right; z-index:1;}
	#final-result>div:first-child {margin: 0 20px; text-align: center; font-size: 4em; background-color: #f00; color: #fff; padding: 20px;}
		.order_completed {background-color: #090 !important;}
		.message_stack { margin:20px;}
		.message_stack>div {font-size:2em; position:relative;}
		.message_stack>div * {font-size:1em;}
		.message_stack>div a {position:absolute; right:5px; top:5px; text-decoration:none; font-weight:bold; line-height:14px; font-size:14px; font-weight:bold; color:#fff; background:#000; opacity:0.5; border-radius:100px; padding:2px 5px;}
		
/* stock module specific */
#items .serials>div.has_case {background:#6cf;}
#final-result>div.stock_completed{background-color:#090;}
#items .stock_completed{background:#090; color:#fff;}
#items .stock_incomplete{background:#f00; color:#fff;}

@media (min-width: 1001px){
	.myproducts thead {position:sticky; top:56px; z-index:1;}
}

@media (max-width: 1000px){
	.desktop { display:none !important;}
	.mobile {display:inherit}
	
	#nav {padding:5px;}
	#menu {position:fixed; z-index:900; top:60px; bottom:0; left:-150px; width:130px; overflow:auto; box-shadow:0 10px 10px rgba(0,0,0,0.3); background:#009edf; transition:left 0.3s ease;}
	.menu-opened #menu {left:0;}
	#menu li {display:block; border-right-width:0; padding:10px;}
	#tools {margin-top:0 !important;}
	
	.nicetbl .filters {display:block;}
	.nicetbl thead {background-color:#ffc; position:fixed; bottom:0;top:62px;left:-300px; width:300px; z-index:100; transition:left 0.3s ease; padding:10px; display:block; box-shadow:0 0 10px rgba(0,0,0,0.4); overflow:auto;}
	.filters-opened .nicetbl thead  {left:0;}
	.nicetbl thead td {display:block; width:100%; padding:5px 0; border-width:0;}
	.nicetbl thead td .inline {width:100% !important;}
	.nicetbl thead div {float:none !important;}
	.nicetbl thead input[type="text"], .nicetbl thead select {width:280px !important;}
		
	.nicetbl, .nicetbl tbody td, .nicetbl  tbody tr, .nicetbl tbody{ width:100% !important; display:block; border-width:0;}
	.nicetbl tbody td { border-width:0; padding:0px; word-wrap:break-word; }
	.nicetbl tbody td.center {text-align:left !important;}
	.nicetbl tbody tr{margin:10px 0; padding:10px 0; border-bottom:2px solid #ddd; overflow:hidden; } 
	.nicetbl tbody tr:hover {background-color:#fff;}
	input[type="text"], select {width:100%;}
	
	#cases.nicetbl td {padding:0;}
	
	.nicetbl-cell {display:table; width:100%; border-top:1px dashed #ddd;}
	.nicetbl-cell > div {display:table-cell;}
	.nicetbl-cell > div:first-child {width:100px; } 
	.nicetbl-cell > div:first-child > span  { color:#666; font-size:10px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; width:100px;}
	
	#items .serials>div {width:100%; float:none;}
	#final-result, #items_wrapper {float:none; width:100% !important;}
	#final-result >div {margin:0 0 !important; font-size:12px !important; padding:3px !important; }
	
	h1 {font-size:20px;}
	h3 {font-size:18px;}
	
	.cols2, .cols3, .cols2 > div, .cols3 > div, .w20, .w25 {display:block; float:none; width:100% !important;}
}