body,html{
		margin:0;
		width:100%;
}

body{
	font-family:"verdana";
	font-size:16px;
	background:#fff;
}

.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform: -webkit-translate(-50%, -50%);
    transform: -moz-translate(-50%, -50%);
    transform: -ms-translate(-50%, -50%);
}

#custTable{
	border-collapse:collapse;
	font-size:.8em;
	border:1pt solid #ccc;	
	width:85%;
}
#custTable th{
	background:#f2f2f2;
	text-align:left;
	padding:3px;
}
#custTable td{
	padding:3px;
}
#custTable tbody#ctBody tr:nth-child(even) {
    background-color: #f2f2f2;
}
#custTable tr:hover{
	background:#ffff00;
}

#loginDiv{
    width: 300px;
    border: 1pt solid #ccc;
    border-radius: 3px;
    padding: 8px;
    background: #f8f8f8;	
}

.invDot{
	width:12px;
}

#wrapper{
	padding:20px;
}

.lbl{
	width:100px;
	display:inline-block;
	text-align:right;
	padding-right:5px;
}
.lbl150{
	width:150px;
	display:inline-block;
	text-align:right;
	padding-right:5px;
}

.ib{
		display:inline-block;
}

.hideMe{
		display:none;
}

.btn{
		width:100px;
		color:#000;
		background:#eee;
		height:30px;
		border:1pt solid #999;
		border-radius:3px;	
		line-height:28px;
		text-align:center;
		display:inline-block;	
		z-index:10;
}

.btn:hover{
		cursor:pointer;
		background:#333;
		color:#fff;
}

.webOrder{	
	color:#0075ff;
	font-weight:bold;
	align-items: center;
}

.downOpen{
	width:15px;
}
.downOpen:hover{
	cursor:pointer;
}

#bulkComplete{
	display:none;
}

#controls{
	height:33px;
}	

.oNotes{
	position:absolute;
	background:#f2f2f2;
	padding:5px;
	border:1pt solid #ccc;
	border-radius:3px;
}
.ooNotes{
	width:250px;
	height:100px;
	background:#f7f7c2;
}

.smBtn{
		width:60px;
		color:#000;
		background:#eee;
		height:20px;
		border:1pt solid #999;
		border-radius:3px;	
		line-height:18px;
		text-align:center;
		display:inline-block;	
		z-index:10;
}

.smBtn:hover{
		cursor:pointer;
		background:#333;
		color:#fff;
}

.searchControlsContainer {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
}

.controlContainer {
    display: flex;
    flex-wrap: wrap;
    min-width: min-content;
    align-items: center;
    background-color: rgb(230 235 255);
    padding: 6px;
    margin: 0px 1% 16px 0;
    /* box-shadow: 0px 0px 8px -2px rgba(0, 0, 0, .75); */
    z-index: 0;
}

.controlLabel {
    white-space: nowrap;
}

.control {
    margin: 0px 0px 0px 12px;
}

.customInput {
    width: 288px;
    height: 12px;
    font-size: 12px;
    line-height: 12px;
    float: inline-start;
}


.controlContainer .btn {
    margin: 0;
    height: 24px;
    line-height:20px;
    width: 96px;
    padding: 0;
}


.bigQueryContainer {
    width: 100%;
    height: 100%;    
    padding: 32px 12px;
    box-sizing: border-box;
    max-width:1200px;
    margin:auto;
    margin-bottom:100px;
}


.eventRow {
    display: flex;
}

.bigQueryitem {
    margin: 20px 0;
    border-color: rgb(0, 0, 0, .2);
    padding: 12px;
    /* transition: box-shadow 3s cubic-bezier(0.27, 0.13, 0, 0.92);; */
    /* box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, .75); */
    background-color: rgb(220 220 220);
    position: relative;
}

.bigQueryitem.included {
	background-color: rgb(230 235 255);
}


.dateContainer {
    font-size: 2em;
}

.user {
    margin: 4px;
    background-color: rgb(0, 0, 0, .1);
}

.userNameContainer {
    font-size: 1.25em;
}

.userEventsContainer {
    font-size: .8em;
}

.eventRow {
    display: flex;
    padding: 1px;
    border-style: solid;
    border-width: 0px 0 1px 0;
    justify-content: space-between;
}

.eventRow:nth-child(odd) {
	background-color: rgb(255, 255, 255, .4);
}

.eventRow:hover {
    background-color: rgb(230, 245, 255);
    border-color: rgb(255, 255, 255);
}

.eventRow:hover *{
    color: rgb(0, 0, 0, 1) !important;
}

.eventTime {
    padding: 0px 2px 0 0;
    border-style: solid;
    border-width: 0 1px 0 0;
    color: rgb(0, 0, 0, 1);
}

.eventPage {
    padding: 0 8px;
    color: rgb(0, 0, 0, .5);
}

.eventName {
    padding: 0px 0px 0 2px;
    border-style: solid;
    border-width: 0 0 0px 1px;
    min-width: 120px;
    color: rgb(0, 0, 0, .5);
    text-align: end;
}

.hoverMe:hover{
	cursor:pointer;
}


.ctr{
		text-align:center;
}

.clr{
		clear:both;
}

.clr5{
		clear:both;
		height:5px;
}	

.clr10{
		clear:both;
		height:10px;
}	

.clr20{
		clear:both;
		height:20px;
}	

.clr40{
		clear:both;
		height:40px;
}	


.clr200{
		clear:both;
		height:200px;
}	

.clr100{
		clear:both;
		height:100px;
}	

[class^="alertify"] {
	z-index:1001;
}

.modal {
	    display:    none;
	    position:   fixed;
	    z-index:    1000;
	    top:        0;
	    left:       0;
	    height:     100%;
	    width:      100%;
	    background: rgba( 211, 211, 211, .8 ) 
	                url('../images/loading.gif') 
	                50% 50% 
	                no-repeat;
	    background-size:40px;            
}

#irOrder{
	width:80px;
}

#custID{
	color:#ccc;
	font-size:.8em;
}

#menuWrapper{
    width: 300px;
    height: 100vh;
    background: #d6dbef;
    padding: 20px;
    position:fixed;
    z-index:10;
    left:-340px;
    top:0;
    transition: left .5s ease;
}    	

#menuWrapper.active {
	left:0px;
}

#handle{
	position:absolute;
	left:340px;
	top:10px;
	z-index:10;
}

.menuItem{
	padding:3px;
}

#orderTable{
	width:100%;
	font-size:.8em;
	border-collapse:collapse;
	border-spacing:5px;	
}

#otBody tr:hover{
	background:#ffff00;
}

#orderTable th,td{
	padding:3px;
	text-align:left;
}

#orderTable td:nth-child(1),
#orderTable td:nth-child(2),
#orderTable td:nth-child(3),
#orderTable td:nth-child(5),
#orderTable td:nth-child(6),
#orderTable td:nth-child(7),
#orderTable td:nth-child(8){
    width: calc(58 / 7 );
}

#orderTable td:nth-child(4){
   width: 17%;	
}

#orderTable td:nth-child(9) {
    width: 25%;
}

#content{
	padding-left:100px;
}

#otHead{
	background:#f2f2f2;
	border:1pt solid #88a80d;
	padding:5px;
}

#xmlShow{
	height:100px;
	overflow:auto;
	font-size:.8em;
}

.currentPage {
	display: inline-block;
}

.totalPages {
	display: inline-block;
}

.smallInput {
	width: 60px;
}

.webOrder.missingData {
   background-image: linear-gradient(45deg, rgb(255, 171, 13, 1) 45%, rgb(255, 255, 255, 1) 50%, rgb(255, 171, 13, 1) 55%);
    background-clip: text;
    color: rgba(0, 0, 0, 0);
    background-size: 200% 100%;
    background-position: 0% 0%;
}

#otBody tr:hover .webOrder.missingData {
	animation: shimmer .5s linear reverse;
}

@keyframes shimmer {
	0% {
		background-position: 0% 0%;
	}
	80% {
		background-position: 100% 0%;
		font-size: 1.2em;
	}
	100% {
		background-position: 0% 0%;
		font-size: 1em;
	}
}


.SKUContainer {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    width:80%;
    max-width:800px;
    font-size:.7em;
}

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color: rgb(0, 0, 0, 0);
    align-items: center;
    transition: background-color .5s cubic-bezier(0, 0.2, 1, 1), width .25s linear, padding .25s linear, margin .25s linear;
    padding: 8px;
    width: 100%;
    height: 24px;
}

.row:hover {
	background-color: rgb(255, 255, 0);
	transition: background-color .75s cubic-bezier(0, 1, 1, 1), width .25s linear, padding .25s linear, margin .25s linear;
}

.row.odd {
    background-color: rgb(242, 242, 242);
}

.row.odd.selected {
    background-color: rgb(172, 182, 222);
}

.row.selected {
    background-color: rgb(192, 202, 242);
}

.row.delete {
	background-color: rgb(255, 100, 100) !important;
}

.tableHead{
	font-size:1.3em;
}

.tableHead .row {
	background-color: rgb(200, 200, 200);
}

.column {
    width: 265px;
    padding: 0px 0px 0 8px;
    margin: 0px 0px 0 8px;
    border-style: solid;
    border-width: 0px 0px 0px 2px;
    overflow: hidden;
    transition: width .25s linear, padding .25s linear, margin .25s linear;
    flex-wrap: nowrap;
    display: flex;
}

.column input {
    padding: 2px;
    font-size: 1.15em;
}

.selectCheckBox {
    width: 15px;
    height: 15px;
    background-color: rgb(255, 255, 255);
    border-style: solid;
    border-width: 1px;
    border-radius: 15px;
    box-sizing: border-box;
    transition: background-color 1s cubic-bezier(0, 1, 1, 1);
    overflow: hidden;
    position: relative;
}

.selectCheckBox::after {
    content: "";
    display: block;
    background-color: rgb(255, 255, 255, .5);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    transition: left .5s ease, top .5s ease;
    left: 105%;
    top: 105%;
}


.selectCheckBox.active {
	  background-color: rgb(0, 201, 255);
}

.selectCheckBox.active::after {
    left: calc(50% - 5px) !important;
    top: calc(50% - 5px) !important;
}

.btn.disabled {
    color: rgb(0, 0, 0, 0);
    text-shadow: 0px 0px 4px rgb(0, 0, 0);
    background: #eee;
    cursor: default;
}

.controls {
	padding: 8px;
}

.hidden {
    width: 0px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    border-style: none;
}

.userContainer {
	align-items: center;
  display: flex;
  flex-wrap: wrap;
  white-space: nowrap;
}

.userName {
	font-size: 1.25em;
  padding: 4px;
}

.userInfo {
	font-size: .75em;
  padding: 4px;
}

.userInfo a {
	color: rgb(0, 0, 0, .5) ;
	text-decoration: none;
	cursor: pointer;
}

.userInfo:hover a {
	color: rgb(0, 0, 0, 1);
}

.includeInPrint {
    width: 24px;
    height: 24px;
}

.checkBoxContainer {
    position: absolute;
    right: 0;
    top: 0;
}

.printBtn {
	width: 24px;
	height: 24px;
	cursor: pointer;
}


/*  tickets css   */
.topWrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    font-size: min(max(1.3vw, 12px), 24px);
    padding-left:50px;
}

.CAIWrapper {
    min-width: 256px;
}

#stubWrapper{
		padding-left:100px;
}

.issueControlsWrapper {
    display: flex;
    flex-wrap: wrap;
    width: 30vw;
    justify-content: center;
}

.issueControlsWrapper .customInput {
	width: unset;
}

.issuesWrapper {
    min-height: 320px;
    max-height: 640px;
    overflow-y: scroll;
    /* scrollbar-color: rgb(0, 0, 0, .5) rgb(0, 0, 0, 0); */
    border-style: solid;
    border-color: rgb(0, 0, 0, .5);
    /* box-shadow: inset 0px 0px 12px rgb(0, 0, 0, .5); */
}

.issueRow {
    position: relative;
    height: min(max(8vw, 72px), 160px);
    background-color: rgb(230 235 255);
    margin: 10px;
    /* box-shadow: 0px 0px 8px -2px rgba(0, 0, 0, .75); */
    cursor: pointer;
}

.issueRow:nth-child(odd) {
	background-color: rgb(240 245 255);
}



.rowTitle {
    font-size: 1.1em;
    font-weight: 600;
    position: absolute;
    top: 4px;
    left: 4px;
    max-width: 80%;
    line-height: 1.1em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rowDesc {
    position: absolute;
    bottom: 4px;
    left: 4px;
    max-width: 65%;
    max-height: 2em;
    overflow: hidden;
    line-height: 1em;
    color: rgb(0, 0, 0, .5);
    font-size: .7em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rowDate {
    position: absolute;
    top: 36px;
    right: 4px;
    color: rgb(0, 0, 0, .5);
    font-size: .7em;
    max-width: 30%;
    text-align: right;
}


.rowControls {
	position: absolute;
	bottom: 4px;
	left: 4px;
	max-width: 90%;
}

.rowCheckBtn {
    background-color: rgb(255, 255, 255);
    position: absolute;
    top: 4px;
    right: 4px;
    width: 1em;
    height: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 8px -2px rgba(0, 0, 0, .75);
    transition: background-color .15s linear, color .15s linear;
}

.rowCheckBtn:hover {
    color: rgb(255, 255, 255);
    background-color: rgb(51, 51, 51);
}

.rowTicket {
    position: absolute;
    bottom: 4px;
    right: 4px;
    font-size: .8em;
    background-image: linear-gradient(30deg, rgb(0, 50, 50), rgb(0, 200, 255));
    color: rgb(0, 0, 0, 0);
    background-clip: text;
}




.issueRow.resolved {
	background-color: rgb(200, 200, 200);
	
	.rowTitle {
		color: rgb(0, 0, 0, .5);
	}
	
	.rowDesc {
		color: rgb(0, 0, 0, .35);
	}
	
	.rowDate {
		color: rgb(0, 0, 0, .35);
	}
	
	.rowCheckBtn {
		color: rgb(255, 255, 255);
    background-color: rgb(51, 51, 51);
	}
	
	.rowCheckBtn:hover {
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
	}
	
	.rowTicket {
		background-image: linear-gradient(30deg, rgb(0, 50, 150), rgb(0, 255, 255));
	}
	
}

.issueRow.new {
    background-color: rgb(87, 133, 181);
    
    .btn {
    	padding: 0;
    	width: 6em;
    	font-size: .9em;
    	height: 1.4em;
    	line-height: unset;
    }
    
}

.issueRow.new input {
	border-style: none;
  outline: none;
  height: 32px;
  font-size: 1em;
}


.noTicketMessage {
	width: 100%;
	box-sizing: border-box;
	font-size: 1.15em;
	padding: 8px;
	text-align: center;
}



/*.rowTags {
    position: absolute;
    bottom: 4px;
    right: 4px;
    max-width: 30%;
    color: rgb(0, 0, 100, .5);
    font-size: .7em;
    text-align: right;
}*/

.ticketsWrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    opacity: 0;
    overflow: hidden;
}

.ticketsWrapper.active {
	opacity: unset;
}





.issueTitle {
    font-size: 1.25em;
    border-style: none;
	  outline: none;
	  field-sizing: content;
	  resize: vertical;
}


.issueDescription {
    width: min(max(50vw, 300px), 640px);
    min-height: 96px;
    overflow: auto;
    border-style: solid;
    border-color: rgb(0, 0, 0, .5);
    padding: 8px;
    background-color: rgb(230 235 255);
    white-space: break-spaces;
    /* scrollbar-color: rgb(0, 0, 0, .5) rgb(0, 0, 0, 0); */
    /* box-shadow: inset 0px 0px 12px rgb(0, 0, 0, .5); */
    box-sizing: border-box;
    margin: 1em 0;
    field-sizing: content;
	  resize: vertical;
}


.attachmentsContainer {
    width: min(max(50vw, 300px), 640px);
    max-height: 256px;
    overflow: auto;
    padding: 8px;
    display: flex;
    box-sizing: border-box;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    /* scrollbar-color: rgb(0, 0, 0, .5) rgb(0, 0, 0, 0); */
    font-size: .6em;
}

.attachmentsContainer .controlContainer:nth-child(odd) {
	background-color: rgb(240 245 255);
}

.attachment {
    color: rgb(0, 0, 0);
    text-decoration: none;
    font-style: oblique;
    max-width: 160px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.ticketControlsContainer {
	display: flex;
  width: min(max(50vw, 300px), 512px);
  flex-wrap: wrap;
}


.recordsContainer {
    width: min(max(50vw, 300px), 576px);
    max-height: 512px;
    box-sizing: border-box;
    overflow-y: auto;
    scrollbar-color: rgb(0, 0, 0, .5) rgb(0, 0, 0, 0);
}

.recordRow {
    min-height: 64px;
    background-color: rgb(230 235 255);
    margin: 8px;
    /* box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, .75); */
}

.recordRow:nth-child(odd) {
	background-color: rgb(240 245 255);
}

.recordRow.owned {
	background-color: rgb(255 220 153);
}

.recordHead {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 4px;
}


.recordOwner {
	font-size: 1.4em;
}

.recordDate {
	color: rgb(0, 0, 0, .5);
	font-size: .6em;
}


.recordBody {
	padding: 2em;
}

.recordContent {
	color: rgb(0, 0, 0, .75);
	font-size: .6em;
	background-color: rgb(0, 0, 0, 0);
  border-style: none;
  outline: none;
  field-sizing: content;
  resize: vertical;
  width: 100%;
}

.recordFoot {
	display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: .5em;
  padding: .2em;
  color: rgb(0, 0, 0, .5);
}


.contextMenu {
	border-radius: 4px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 0px 16px 0px rgb(0, 0, 0);
  position: absolute;
  z-index: 100;
  padding: 4px;
  display: none;
}

.contextMenu.active {	
  display: block;
}


.sheet{
	width: 480px;
	height: 960px;
	background-color: rgb(200, 200, 200);
	padding: 0;
	margin: 0;
	position: relative;		
	overflow: hidden;	
}

.imageContainer {
	position: absolute;	
}




.image {
	height: 100%;
}






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

@media print {
    
    .bigQueryitem {
    	page-break-inside: avoid;
      break-inside: avoid;
    }
    
    .bigQueryitem .user {
    	page-break-inside: avoid;
      break-inside: avoid;
    }
    
    .checkBoxContainer {
    	display: none;
    }
    
    .searchControlsContainer {
    	display: none;
    }
    
    #content {
    	padding-left: 0px;
		}
    
    #menuWrapper {
    	display: none;
    }
    
    .bigQueryitem:not(.included) {
    	display: none;
    }
    
    
}