/* ONLY UNIVERSAL CSS THAT COULD BE USED EVERYWHERE */

.recentlyAdded { background:#d8f5d7; animation: recentAddition 1s ease 0s 1 forwards; transform: scale(1,1); }
.recentlyRemoved { background:#f1bebe; animation: recentRemoval .5s ease 0s 1 forwards; transform: scale(0,0); }

.slideUp { animation: slideUp 1s ease 0s 1 forwards; }
.slideDown { animation: slideDown 1s ease 0s 1 forwards; }
.fillMeIn { animation: fillMeIn .5s linear 0s 1 alternate; }

.hidden { display:none !important; height:0px; width:0px; overflow:hidden; opacity:0; }
.floatLeft { float:left; }
.floatRight { float:right; }
.clear { clear:both; }

[empty-hide=""], [empty-hide="null"] { display:none !important; }
[empty-show=""], [empty-show="null"] { display:block !important; }
[empty-inline=""], [empty-inline="null"] { display:inline-block !important; }
[contentEditable="true"] { white-space: pre-wrap; display:inline-block; word-wrap: break-word; }
[contentEditable="true"]:empty:before { content:attr(placeholder); font-weight:300; font-size:12px; color:#999; opacity:.8; }
[contenteditable]:focus { outline: 0px solid transparent; }
::placeholder, ::-webkit-input-placeholder { color:#999; opacity:.8; }


.leftDottedLine { border-left:1px dotted #ccc !important; padding-left:5px !important; }
.inputNameWidth { width: calc(50% - 23px) !important; }
.inputCityWidth { width: calc(100% - 139px) !important; }
.inputLotWidth, .inputStateWidth, .inputZipWidth { width:45px !important; }
.inputStreetWidth { width: calc(100% - 94px) !important; }
.inputWithPrefix { width: calc(100% - 40px) !important; }


@keyframes fillMeIn
{
	0% { transform: rotate(0deg) scale(1.3); background:#ff9595; }
	20% { transform: rotate(5deg); }
	40% { transform: rotate(-5deg); }
	60% { transform: rotate(2deg) scale(.9); }
	80% { transform: rotate(-2deg); }
	100% { transform: rotate(0deg) scale(1); background:#fff; }
}
@keyframes recentAddition
{
    0% { background-color:#d8f5d7; transform: scale(0,0); }
    50% { background-color:#d8f5d7; transform: scale(1,1); }
	100% { background-color:#fff; transform: scale(1,1); }
}
@keyframes recentRemoval
{
    0% { background-color:#fff; transform: scale(1,1) translate(0px,0px); }
    100% { background-color:#f1bebe; transform: scale(.10,.10) translate(0px,-225px); }
}
@keyframes slideUp
{
	0% { max-height:500px; opacity:1; }
	100% { max-height:0px; opacity:0; }
}
@keyframes slideDown
{
	0% { max-height:0px;}
	100% { max-height:500px; }
}

/* LOGGED IN FORMATTING */
loggedIn { position:sticky; top:0; display:block; background:#f1f1f1; padding:5px; font-family:'Open Sans', sans-serif; margin-top:5px; white-space:nowrap; text-align:right; }
loggedIn .loggedInAsBox { display:inline-block; vertical-align:top; font-size:13px; line-height:13px; color:#3271c1; line-height:16px; padding-left:10px; }
loggedIn .loggedInAsBox strong { display:inline-block; vertical-align:top; overflow:hidden; text-overflow:ellipsis; }
loggedIn .loggedInAsBox span { display:inline-block; vertical-align:top; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
customer, invoice { position:relative; display:inline-block; vertical-align:top; font-size:0px; text-align:left; }
help-text, text, loggedIn strong { position:relative; display:inline-block; vertical-align:top; text-align:left; color:#000; font-weight:700; line-height:24px; font-size:13px; }
selection { position:relative; cursor:default; display:inline-block; vertical-align:top; text-align:left; border:1px solid transparent; border-radius:3px; padding:0px 16px 0px 0px; background:transparent; background-size:14px; font-size:12px; line-height:24px; color:#000; }
selection[popover] { border-color:#ccc; background:#fff url(/Images/site-templates/svg/dropdown-arrows.svg) no-repeat right 2px center; background-size:14px; padding:0px 16px 0px 7px; color:#3271c1; cursor:pointer; }
selection-link { position:relative; display:inline-block; vertical-align:top; line-height:24px; font-size:13px; cursor:pointer; padding:0px 5px; }
account[identifier=""] { display:none; }
customer[identifier=""] .loggedInAsBox selection[popover="select"][value="customer"] { color:#999; }
settings { float:left; display:inline-block; vertical-align:top; cursor:pointer;  }
settings:hover bubble { background:#3271c1; color:#fff; }
settings bubble { position:relative; display:inline-block; font-size:20px; height:28px; text-align:center; line-height:28px; background:#fff; border:2px solid #fff; border-radius:3px; color:#3271c1; transition:all .5s ease; padding:0px 5px; }
settings name { position:relative; font-size:16px; font-weight:400; line-height:28px; display:inline-block; vertical-align:top; }

.selectedDefault, .selectedUnique { display:none; }
.selectedDefault.active, .selectedUnique.active { display:block; }


/* DEFAULT TAG FORMATTING */
html, body { margin:0px; font-family: 'Open Sans', sans-serif; }
a { text-decoration:none; }
button { cursor:pointer; }
select::-ms-expand { display: none; }

[input-select] { cursor:pointer; display:inline-block; vertical-align:top; border:1px solid #ccc; font-family:inherit; padding:0px 15px 0px 5px; line-height:24px; height:26px; text-overflow:ellipsis; -webkit-appearance: none; -moz-appearance: none; outline:medium none; background:transparent; background:#fff url('/Images/site-templates/svg/dropdown-arrows.svg') no-repeat right 2px center; background-size:14px; box-shadow:1px 1px 2px #fff inset; display:inline-block; vertical-align:top; border-radius:3px; color:#3271c1; }
[required]::before, required::before, .required { position:relative; font-family:FontAwesome; top:-7px; left:2px; content:"\f005"; color:#c00; font-size:5px; z-index:100; }

password-toggle { position:absolute; display:inline-block; font-family:FontAwesome; line-height:30px; vertical-align:top; right:0px; font-size:16px; cursor:pointer; width:25px; height:20px; color:#999; background-color: rgba(255,255,255,.7); transition: all .5s ease; }
password-toggle:hover { color:#3271c1; }
password-toggle::before { content:"\f070";  }
password-toggle[show]::before { content:"\f06e"; }


required { position:absolute; }
switch { display:inline-block; vertical-align:top; white-space:nowrap; display: -webkit-inline-flex; display: inline-flex; background:#fff; font-size:0px; }
	switch button { color:#666; background:#fff; height:24px; font-weight:700; line-height:22px; border:1px solid #ccc; text-align:center; webkit-flex: 1; -ms-flex: 1; flex: 1; transition: all .5s ease; border-radius:0px; font-size:14px; margin-left:-1px; }
	switch button:first-child { border-radius:3px 0px 0px 3px; }
	switch button:last-child { border-radius:0px 3px 3px 0px; }
	switch button[status="active"] { background:#fff; color:#3271c1; border:1px solid #3271c1; font-weight:700; box-shadow:0px 0px 2px #3271c1 inset; z-index:100; }
	
input[disabled], input-group[disabled], select[disabled], button[disabled] { background:#f1f1f1; cursor:not-allowed; border:1px solid #ddd; border-radius:0px; box-shadow:none; color:#666; }
switch button[disabled][status="active"] { background:#f1f1f1; }

input-group { position:relative; display:inline-block; vertical-align:top; border:1px solid #ccc; text-align:left; white-space:nowrap; background:#fff; }
	input-group input:first-child { padding-left:5px; }
	input-group input:last-child { padding-right:5px; }
	input-group input:only-child { width:100%; }
	input-group input { border:0px !important; padding:0px; background:transparent; text-overflow:ellipsis; }
	input-group suffix, input-group prefix { position:relative; display:inline-block; vertical-align:top; line-height:24px; color:#000; min-width:15px; text-align:center;padding:0px 2px; }

	input-group select:first-child { padding-left:5px; }
	input-group select:only-child { width:100%; }
	input-group select { cursor:pointer; height:24px; border:0px !important; padding-right:15px; background:transparent; font-family:inherit; text-overflow:ellipsis; -webkit-appearance: none; -moz-appearance: none; outline:medium none; background:transparent; background:#fff url('/Images/site-templates/svg/dropdown-arrows.svg') no-repeat right 2px center; background-size:14px; box-shadow:1px 1px 2px #fff inset; display:inline-block; vertical-align:top; border-radius:3px; }

	/*select { display:inline-block; vertical-align:top; border:1px solid #ccc;  padding:0px 15px 0px 5px; line-height:24px; height:26px;    color:#3271c1; }*/
	input-group suffix, input-group prefix { position:relative; display:inline-block; vertical-align:top; line-height:24px; color:#000; min-width:15px; text-align:center;padding:0px 2px; }
	input-group spinner { position:relative; display:inline-block; vertical-align:top; line-height:24px; color:#999; width:24px; text-align:center; font-size:14px; }
subtitle { position:relative; display:block; color:#000; }
padding { position:relative; display:block; padding:20px; }
sub-padding { position:relative; display:block; padding:10px; }

toggle { position:relative; display:block; transition:all .5s linear; }
	toggle[status="hide"] { max-height:0px; overflow:hidden; }
	toggle[status="show"] { max-height:initial; overflow:inherit; }

error-message { position:relative; display:block; transition:all .5s linear; color:#c00; font-size:12px; }
error-message[status="hide"] { display:none; }
error-message[status="show"] { display:block; }
error-message[status="show"]::before { position:relative; font-family:FontAwesome; top:-5px; left:2px; content:"\f005"; color:#c00; font-size:5px; z-index:100; padding-right:5px; }

checkbox { position:relative; display:inline-block; vertical-align:top; border-radius:3px; border:1px solid #ccc; background:#fff; color:#3271c1; min-height:20px; min-width:20px; text-align:center; cursor:pointer; transition:all .5s ease; }
checkbox:hover { background:#f1f1f1; }
checkbox[checked]::before { font-family:'FontAwesome'; top:0px; left:10px; content:"\f00c"; }

/* POPUP FORMATTING */
.transPopup { font-size:16px; }

/* UNIVERSAL CLASSES */
.noPaddingTop { padding-top:0px; }
.noPaddingLeft { padding-left:0px; }
.noPaddingRight { padding-right:0px; }
.noPaddingBottom { padding-bottom:0px; }

/* PRINT FORMATTING */
.print-only { display:none; }

@media print
{
	body * { visibility: hidden; }
	.section-to-print, .section-to-print * { visibility: visible; max-width:1000px; }
	.section-to-print { position: absolute; left: 0; top: 0; }
	.compareMoreDetails { display:block !important; }
	.dontprintme { display:none; }
	.print-only { display:block; }
}

@keyframes selected
{
    0% { box-shadow:0px 0px 0px #fff inset; }
    100% { box-shadow:0px 0px 10px #fff inset; }
}
@media (max-width:700px)
{
	loggedIn { text-align:center; }
	help-text { display:none; }
}
@media (max-width:600px)
{
	loggedIn .loggedInAsBox { font-size:12px; }
	loggedIn .loggedInAsBox b { display:none; }
	settings name { display:none; }
	settings bubble { border-radius:50%; width:28px; padding:0px; }
	help-text { display:none; }
	.loggedInAsBox text, .loggedInAsBox selection-link { font-size:10px; }
}
@media (max-width:500px)
{
	loggedIn .loggedInAsBox { padding-left:5px; }
	.loggedInAsBox span, .loggedInAsBox strong { max-width:70px; font-size:10px; }
	invoice selection { max-width:50px; overflow:hidden; text-overflow:ellipsis; }
}