/**
 * CSS for Simplist
 */

 
/* HTML, body */
html, body {
	background: rgb(235,235,235);
	overflow-x: hidden;
    font-size: 15px;
}

/* GLOBAL: fonts */
* {
	font-family: Roboto, Droid Sans, Calibri, Arial;
    outline-width: 0 !important; /* prevent webkit click border bs */
}
    
/* connection/auth status icon */
i.conn-auth-stat {
    position: fixed;
    width: 20px;
    text-align: center;
    z-index: 10;
    bottom: 3px;
    right: 3px;
    font-size: 1.5em;
}
    i.conn-auth-stat.connected.authed {
        color: rgba(0,0,150,.65);
    }
    
    i.conn-auth-stat.authed:not(.connected) {
        color: rgba(0,0,0,.25);
    }
    
    i.conn-auth-stat.connected:not(.authed) {
        color: rgba(255,0,0,1);
    }
    
    i.conn-auth-stat:not(.connected):not(.authed) {
        color: rgba(255,0,0,.25);
    }


/* GLOBAL: hide main blocks until auth'd */
header, main, footer {
    display: none;
}
    /* show when auth'd */
    header.authed, main.authed, footer.authed {
        display: block;
    }

	/* header */
	header.authed {
		display: block;
		position: fixed;
		z-index: 4;
		left: 0px;
		top: 0px;
		width: calc( 100% - 16px );
		height: 16px;
		padding: 10px 8px 10px 8px;
		
		font-family: Roboto, Droid Sans, Calibri, Arial;
		color: rgba(255,255,255,.75);
		text-shadow: 1px 1px 0px rgba(0,0,0,.5);
		background: rgb(0,137,176);
	}
	
		/* header title */
		header.authed > h1 {
			display: inline-block;
			position: relative;
			width: 65%;
			
			text-align: left;
			font-size: 16px;
			font-weight: bold;
			
			overflow: hidden;
			text-overflow: ellipsis;
		}
		
		/* "next shopping day" */
		header.authed > #NextShoppingDay {
			display: block;
			position: fixed;
			top: 12px;
    		right: 8px;
			
			text-align: right;
			font-size: 11px;
			color: white;
			text-decoration: none;
		}
		
			header.authed > #NextShoppingDay.set {
				top: 5px;
				line-height: 1.2;
			}


/* GLOBAL: buttons */
button {
	display: inline-block;
	width: 40px;
	height: 38px;
	margin: 2px 5px 0px 0px;
	
	text-align: center;
	vertical-align: middle;
	
	font-size: 1.5em;
	color: white;
	
	border-radius: 1px;
	
	box-shadow: 2px 2px 0px rgba(0,0,0,.15);
	background-color: rgb(50,80,150);
	border: 0px;
	
	cursor: pointer;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

	/* GLOBAL: button pressed */
	button:active {
		box-shadow: none;
		background-color: rgb(99,130,203);
	}
	
	/* GLOBAL: button with text */
	button.text {
		border-radius: 2px;
	}
		
		
		
/* GLOBAL: jquery UI customizations */

/* autocomplete container */
ul.ui-autocomplete {
	position: absolute;
	display: block;
	width: 90vw;
	height: 45vh;
	overflow-y: scroll;
	overflow-x: hidden;
    z-index: 299;
}
	/* autocomplete item */
	ul.ui-autocomplete > li.ui-menu-item {
		width: calc( 90vw - 20px );
		font-size: 1.25em;
		padding: 10px;
	}
		ul.ui-autocomplete > li.ui-menu-item:last-of-type {
			border-bottom: none;
		}
 
/* add item */
form {
	display: block;
    width: 90vw;
	z-index: 2;
    
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

	/* text boxes */
	form:not([submitroute]) > input:not([type="button"],[type="radio"],[type="checkbox"]) {
	/* input[type="text"],
	form:not([submitroute]) > input[type="date"],
	form:not([submitroute]) > input[type="time"],
	form:not([submitroute]) > input[type="datetime-local"],
	form:not([submitroute]) > input[type="number"] { */
		display: block;
		padding: 5px 35px 5px 5px;
		width: calc( 90vw - 40px );
		
		font-size: 1.25em;
		font-weight: bold;
		
		border: 0px;
		border-bottom: 1px solid rgba(0,0,0,.35);
		background-color: white;
		
		margin-bottom: 5px;
	}
	
	/* textarea */
	form:not([submitroute]) >  textarea {
		display: block;
		position: relative;
		width: calc( 100% - 23px );
		min-height: 50px;
		padding: 10px;
	}
	
	/* number input adjustment */
	form:not([submitroute]) > input[type="number"][name="MaxPrice"] {
		display: inline-block;
		width: 150px;
		padding-right: 0px;
		vertical-align: top;
	}
	
	/* autocomplete buttons */
	form:not([submitroute]) > button[role="autocomplete"] {
		position: absolute;
		width: auto;
		height: auto;
		right: 0px;
		
        font-family: FontAwesome;
		font-size: 2em !important;
		color: rgb(50,80,150);
		
		background-color: transparent;
		border: 0px;
		border-radius: 0px;
		box-shadow: none;
	}
    
        /* icon when menu open */
        form:not([submitroute]) > button[role="autocomplete"].fa-sort-asc {
            margin: 5px 0px 0px 0px !important;
        }
    
        /* icon when menu closed */
        form:not([submitroute]) > button[role="autocomplete"].fa-sort-desc {
            margin: -6px 0px 0px 0px !important;
        }
		
		form:not([submitroute]) > :is(input[type="text"],input[type="number"],textarea) {
			color: rgba(0,0,0,.85);
		}
    
    /* checkbox labels */
    form:not([submitroute]) > label {
        display: inline-block;
        position: relative;
        padding: 5px;
        margin: 5px 0px 15px 0px;
		vertical-align: top;
        
        color: rgb(50,80,150);
        
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
        /* hide checkbox */
        form:not([submitroute]) >  label > input[type="checkbox"] {
            display: none;
        }
        
        form:not([submitroute]) >  label:not(.checked) {
            opacity: .5;
        }
        
        /* when checked */
        form:not([submitroute]) >  label.checked {
            opacity: 1;
        }

	/* cancel/add buttons */
	form:not([submitroute]) > div#buttons {
		text-align: center;
	}
		form:not([submitroute]) > div#buttons > button:not([role="autocomplete"]) {
			display: inline-block;
			margin-bottom: 5px !important;
	        font-family: FontAwesome;        
	        
	        overflow: hidden;
	        text-overflow: ellipsis;
	        white-space: nowrap;
		}
    
/* context menu items when opened for edit form */
div#libui-widgets-contextMenu.edit-item > label.delete {
    margin-top: 10px;
    
    text-align: center;
    color: rgba(255,0,0,.75);
    font-weight: bold;
    background-color: rgba(255,0,0,.1);
    border: 1px solid rgba(255,0,0,.35);
}
    div#libui-widgets-contextMenu.edit-item > label.delete > .fa {
        margin-right: 0px;
        color: rgba(255,0,0,.75);
    }
	
/* context menu when opened for changelog */
div#libui-widgets-contextMenu.changelog {
	overflow-y: scroll;
	white-space: pre-wrap;
	font-family: courier new;
	font-size: 11px;
	padding: 5px !important;
}

	div#libui-widgets-contextMenu.changelog table#ItemsArchive {
		
	}
	
		div#libui-widgets-contextMenu.changelog table#ItemsArchive tr > th {
			padding: 20px 0px 10px 0px;
			text-align: left;
			font-size: 18px;
			font-weight: bold;
		}
		
		div#libui-widgets-contextMenu.changelog table#ItemsArchive tr > td {
			padding-bottom: 3px;
		}

/* context menu opened for item notes */
div#libui-widgets-contextMenu.Notes {
	
}
	/* textarea */
	div#libui-widgets-contextMenu.Notes > form:not([submitroute]) > textarea {
		display: block;
		position: relative;
		width: calc( 100% - 23px );
		height: 105px;
		padding: 10px;
	}
		
		/* textarea */
		div#libui-widgets-contextMenu.Notes > form[name="Notes"] > textarea {
			color: rgba(0,0,0,.85);
		}
		
/* context menu for app menu */
div#libui-widgets-contextMenu.appmenu {
	
}
	/* auth-switcher account menu items */
	div#libui-widgets-contextMenu.appmenu > label.auth-switcher {
		color: rgba(0,0,175,.65);
		font-weight: bold;
	}


/* main */
main {
	height: calc( 100% - 65px - 41px );
	margin-top: 41px;
	margin-bottom: 65px;
	background: rgb(235,235,235);
}

	/* items list */
	main > div#list {
		
	}
		
		/* hide clone containers by default */
		main > div#list div.cloneme {
			display: none !important;
			height: 0px;
			visibility: hidden;
			padding: 0px;
			margin: 0px;
		}
		
			/* category name */
			main > div#list > div.category {
				display: block;
				padding: 2px;
                margin: 20px 2px 8px 2px;
				text-align: left;
				
				font-size: 1.2em;
				color: rgba(0,0,25,.75);
				font-weight: bold;
                white-space: nowrap;
                text-overflow: ellipsis;
				
				border: 2px solid transparent;
			}
			
				/* category when item being dragged into */
				main > div#list > div.category.dragOver:not(.hide) {
					border: 2px dashed rgba(0,0,100,.65) !important;
				}
		
				/* categories when hidden */
				main > div#list > div.category.hide {
					display: none;
				}
			
				/* name container */
				main > div#list > div.category > [role="Category"] {
					display: inline-block;
					padding: 4px 4px 4px 6px;
					overflow: hidden;
					position: relative;
					width: calc( 100% - 175px );
					
					line-height: 1.1;
					text-overflow: ellipsis;
				}
					main.is-desktop > div#list > div.category > [role="Category"]:hover {
						cursor: default;
						opacity: .75;
					}
				
					/* hide in rename-mode */
					main > div#list > div.category.rename-mode > [role="Category"] {
						display: none;
					}
				
				/* category rename input */
				main > div#list > div.category > input[role="rename"] {
					/* position: absolute; */
					
					display: none;
					padding: 5px 5px 3px 2px;
					width: calc( 100% - 175px );
					margin: -3px 0px -1px 4px;
					
					font-size: 1em;
					font-weight: bold;
					
					background: white;
					border: 0px;
					border-bottom: 1px solid black;
					
					opacity: 0;
				}
					/* show in rename-mode */
					main > div#list > div.category.rename-mode > input[role="rename"] {
						position: relative;
						display: inline-block;
						z-index: 100; /* #libui-widgets-cover */
						opacity: 1;
						
						transition: opacity 0.35s ease 0s;
					}
			
				/* category item count */
				main > div#list > div.category > div[role="count"] {
					float: right;
					text-align: right;
                    margin: 8px 5px 0px 0px;
					width: 150px;
                    
                    font-size: 0.7em;
                    font-weight: normal;
                    color: rgba(0,0,0,.75);
                    letter-spacing: 0.65;
					text-transform: uppercase;
				}
			
		/* item output */
		main > div#list > div.category > div.item:not(.cloneme) {
            margin: 3px;
			display: block;
            
            background-color: white;
            border: 1px solid rgba(0,0,0,.35);
            border-radius: 1px;
            box-shadow: 1px 1px 0px rgba(0,0,0,.15);
			
			/* -moz-user-select: none;
		    -khtml-user-select: none;
		    -webkit-user-select: none; */
			
			cursor: move; /* fallback if grab cursor is unsupported */
			cursor: grab;
			cursor: -moz-grab;
			cursor: -webkit-grab;
		}
		
			/* drag handle for mobile */
			main > div#list > div.category > div.item:not(.cloneme) .mobile-drag-handle {
				display: inline-block;
			    float: left;
			    width: 20px;
				height: 18px;
			    padding: 9px 20px 9px 5px;
				margin-right: -10px;
				
			    text-align: center;
				color: rgba(0,0,0,.5);
				
			    background-image: -webkit-linear-gradient(left, rgba(0,0,0,.15) 0px, rgba(0,0,0,.15) 30px, white 30px, white);
			}
				
				/* hide mobile drag handle on desktop */
				main:not(.is-mobile) > div#list > div.category > div.item:not(.cloneme) .mobile-drag-handle {
					display: none;
					visibility: hidden;
					opacity: 0;
					z-index: -999;
				}
		
			/* item while dragging */
			main > div#list > div.category > div.item:not(.cloneme).dragStart {
				cursor: move; /* fallback if grab cursor is unsupported */
				cursor: grabbing;
				cursor: -moz-grabbing;
				cursor: -webkit-grabbing;
				
				background-color: rgba(0,0,150,.15);
				opacity: 0.65;
			}
        
            /* "mouse press" animation */
            /* main > div#list > div.category > div.item.press-animation {
                background-color: rgba(0,0,150,.2);
                transition: background-color .25s linear 0s;
            } */
		
			/* item text container */
			main > div#list > div.category > div.item > span[role="Item"] {
				display: block;
				padding: 10px 10px 10px 10px;

				font-family: Calibri, Arial;
				font-size: .9em;
				font-weight: bold;
				white-space: nowrap;
				
				overflow-x: auto;
				overflow-y: hidden;
				
				/* cursor: default; */
                background-color: transparent;
			}
			
				/* mobile offset because of float/font-awesome buggeryness */
				main.is-mobile > div#list > div.category > div.item > span[role="Item"] {
					padding-left: 0px;
				}
				
				/* show when toggled */
				main > div#list > div.category > div.item.checked.hide {
					display: none;
				}
				
				/* item text when checked */
				main > div#list > div.category > div.item.checked {
					font-weight: normal;
					opacity: .5;
				}
                
                main.is-desktop > div#list > div.item:hover {
                    background-color: rgba(0,0,100,.05);
                }
		
            /* "in cart" checkbox */
            main > div#list > div.category > div.item > input[type="checkbox"][role="Checked"] {
                float: right;
                z-index: 3;
                margin: 9px 10px 0px 7px;
                transform: scale(1.4);
            }
			
				/* chrome desktop */
				main:not(.is-mobile).is-browser-chrome > div#list > div.category > div.item > input[type="checkbox"][role="Checked"] {
					margin: 12px 13px 0px 15px;
					transform: scale(1.7);
				}
				
				/* chrome mobile */
				main.is-mobile.is-browser-chrome > div#list > div.category > div.item > input[type="checkbox"][role="Checked"] {
					margin: 9px 10px 0px 7px;
	                transform: scale(1.4);
				}
				
				/* ff mobile */
				main.is-mobile.is-browser-mozilla > div#list > div.category > div.item > input[type="checkbox"][role="Checked"] {
					margin: 12px 13px 0px 7px;
					transform: scale(1.5);
				}
		
            /* "on sale" flag */
            main > div#list > div.category > div.item > [role="OnSaleFlag"] {
                display: none;
                float: right;
                z-index: 3;
                margin: 6px 5px 0px 5px;
                
                font-size: 1.31em;
                color: rgb(50,80,150);
                transform: scaleX(-1) rotate(90deg);
                opacity: .9;
            }
                main > div#list > div.category > div.item.sale > [role="OnSaleFlag"] {
                    display: inline-block;
                }
		
            /* "on points" flag */
            main > div#list > div.category > div.item > [role="OnPointsFlag"] {
                display: none;
                float: right;
                z-index: 3;
                margin: 6px 5px 0px 5px;
                
                font-size: 1.3em;
                color: rgb(50,80,150);
                transform: scaleX(-1) rotate(90deg);
                opacity: .9;
            }
                main > div#list > div.category > div.item.points > [role="OnPointsFlag"] {
                    display: inline-block;
                }
				
			/* max price indicator container */
			main > div#list > div.category > div.item > span[role="MaxPrice"] {
				display: none;
				float: right;
				z-index: 3;
				width: 65px;
				padding: 5px 2px 4px 2px;
				margin: 5px 7px 0px 5px;
				
				text-align: center;
				
				font-size: 0.65em;
				color: white;
				font-weight: normal;
				
				background-color: rgba(255,0,0,.65);
				border-radius: 2px;
				border: 1px solid white;
				box-shadow: 1px 1px 1px rgba(255,0,0,.4);
			}
				main > div#list > div.category > div.item > span[role="MaxPrice"].show {
					display: block;
				}
					
					
			
				
			/* "notes" icon */
			main > div#list > div.category > div.item > i.fa[role="Notes"] {
				float: right;
				z-index: 3;
				width: 25px;
				margin: 8px 5px 0px 5px;
				
				font-size: 1.15em;
				color: rgb(50,180,80);
				opacity: .75;
				cursor: pointer;
			}
				main.is-desktop > div#list > div.item > [role="Notes"]:hover {
					opacity: 1;
				}
				
			/* notes container */
			main > div#list > div.category > div.item > div[role="Notes"] {
				display: none;
				clear: both;
				
				font-size: .65em;
				font-weight: normal;
				line-height: 1.15;
				color: rgba(0,0,0,.75);
				white-space: normal;
			}
				main > div#list > div.category > div.item > div[role="Notes"]:not(:empty) {
					padding: 7px 10px 5px 10px;
				}
				main > div#list > div.category > div.item > div[role="Notes"].show{
					display: block;
				}
                        
                        
                        

/* footer */
footer {
	display: block;
	position: fixed;
	width: calc( 100% - 20px );
	height: 40px;
	padding: 10px;
	bottom: 0px;
	right: 0px;
	text-align: center;
	
	background: rgb(200,225,235);
	border-top: 1px solid rgba(0,0,0,.35);
	
	/* font-size: 0px; */ /* collapse spacing */
    
    z-index: 4;
}

	footer > #version {
		position: fixed;
		left: 5px;
		bottom: 5px;
		
		font-family: Roboto, Droid Sans, Calibri, Arial;
		font-size: 10px;
		color: rgba(0,0,0,.45);
	}

	/* buttons */
	footer > button {
		margin: auto 5vw auto 5vw !important;
        font-size: 1.35em !important;
	}
	
		/* buttons when disabled to act as dummy spacers */
		footer > button.hidden {
			opacity: 0 !important;
			cursor: default;
		}
		
		/* buttons when disabled to act as dummy spacers */
		footer > button.disabled {
			opacity: 0.15 !important;
			cursor: default;
		}
	
	/* cart button is a toggle */
	footer > button.cart {
		opacity: .65;
	}
	
	/* cart button is a toggle */
	footer > button.cart.show {
		opacity: 1;
	}
		
		/* cart counter */
		footer > button.cart > data[role="counter"] {
            position: absolute;
            margin: -15px 0px 0px -3px;
            z-index: 2;
            padding: 9px 7px 7px 7px;
            width: 15px;
            height: 13px;
            
            text-align: center;            
            font-size: 0.6em !important;
            color: black;
            font-weight: bold;
            background-color: white;
            
            border-radius: 20px;
            opacity: .9;
		}