/* basic css and common that can be found on both manager and ocs side */

.m0.m0 {
	margin: 0
}
.m1.m1 {
	margin: 1em
}
.m2.m2 {
	margin: 2em
}
.m3.m3 {
	margin: 3em
}
.mr0.mr0 {
	margin-right: 0
}
.mr1.mr1 {
	margin-right: 1em
}
.mr2.mr2 {
	margin-right: 2em
}
.mr3.mr3 {
	margin-right: 3em
}
.mrh.mrh {
	margin-right: .5em;
}
.mth.mth {
	margin-top: .5em;
}
.mtq.mtq {
	margin-top: .25em;
}
.mt0.mt0 {
	margin-top: 0
}
.mt1.mt1 {
	margin-top: 1em
}
.mt2.mt2 {
	margin-top: 2em
}
.mt3.mt3 {
    margin-top: 3em
}
.mt4.mt4 {
    margin-top: 4em
}
.mt5.mt5 {
    margin-top: 5em
}
.mbh.mbh {
	margin-bottom: .5em;
}
.mbq.mbq {
	margin-bottom: .25em;
}
.mb0.mb0 {
	margin-bottom: 0
}
.mb1.mb1 {
	margin-bottom: 1em
}
.mb2.mb2 {
	margin-bottom: 2em
}
.ml0.ml0 {
	margin-left: 0
}
.ml1.ml1 {
	margin-left: 1em
}
.ml2.ml2 {
	margin-left: 2em
}
.ml3.ml3 {
	margin-left: 3em
}
.mlh.mlh {
	margin-left: .5em;
}

.mr-icon {
	margin-right: 8px;
}

.p0.p0 {
	padding: 0
}
.p1.p1 {
	padding: 1em
}
.p2.p2 {
	padding: 2em
}
.pr0.pr0 {
	padding-right: 0
}
.pr1.pr1 {
	padding-right: 1em
}
.pr2.pr2 {
	padding-right: 2em
}
.pt0.pt0 {
	padding-top: 0
}
.pt1.pt1 {
	padding-top: 1em
}
.pt2.pt2 {
	padding-top: 2em
}
.pb0.pb0 {
	padding-bottom: 0
}
.pb1.pb1 {
	padding-bottom: 1em
}
.pb2.pb2 {
	padding-bottom: 2em
}
.pl0.pl0 {
	padding-left: 0
}
.pl1.pl1 {
	padding-left: 1em
}
.pl2.pl2 {
	padding-left: 2em
}

/* cursors */
.altCursor, .pointer {
    cursor: pointer;
}
.normCursor {
	cursor: default;
}

/* see https://accessibilitytips.com/2008/03/04/positioning-content-offscreen/ */
.offscreen {
    position: absolute;
    left: -999em;
}

/*fix from selecting text while dandd*/
.noselect {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

ul.nostyle {margin:0; padding:0;}
ul.nostyle > li {list-style-type: none; padding: 0.2em;}

.nowrap, td.nowrap {
	white-space: nowrap;
}
.wrappable.wrappable, td.wrappable {
	white-space: normal;
}
.left, td.left, table td.left, th.left, table th.left {
	text-align:left;
}
.right, td.right, table td.right, th.right, table th.right{
	text-align:right;
}
.center, td.center, table td.center, th.center, table th.center {
	text-align:center;
}
table td.v-center {
	vertical-align: middle;
}
input[type='time'] {
	font-weight: 600;
}
td.shrink, th.shrink {
	/* 1px should shrink it as small as possible */
	width: 1px;
}

.wide {
	box-sizing: border-box; /* useful for inputs */
	width: 100%;
}

.normal {
    font-weight:normal;
}
.bold {
	font-weight:bold;
}
.lighter {
    font-weight:lighter;
}
.italic {
	font-style:italic;
}
.fleft {
	float:left;
}
.fright {
    float:right;
}
.hide, .hidden, .fa.hide {
	display:none;
}
.invisible {
	visibility: hidden;
}
.uppercase {
    text-transform: uppercase;
}
.lowercase {
    text-transform: lowercase;
}
.capitalize {
    text-transform: capitalize;
}
.underline {
	text-decoration: underline;
}
.nodecoration {
	text-decoration: none;
}
.indented {
	margin-left:20px
}

a.disabled{
	/*
		TODO: come up with a cross-browser solution to this:
		pointer-events: none !important;
	*/
	pointer-events: none !important;
	cursor: default !important;
}

/* temporary style fix for chrome table border display bug:
	where hidden cells make border of table = 0.
 */
table.separate {
	border-collapse: separate !important;
}

/* css caret styles: <span class="caret-xxx"></span> */
.caret-up, .caret-right, .caret-down, .caret-left{
	display: inline-block;
	width: 0;
	height: 0;
	vertical-align: middle;
	margin-left: 0.3em;
}

.caret-up {
	border-right: 0.3em solid transparent;
	border-bottom: 0.3em solid;
	border-left: 0.3em solid transparent;
}
.caret-right {
	border-top: 0.3em solid transparent;
	border-bottom: 0.3em solid transparent;
	border-left: 0.3em solid;
}
.caret-down {
	border-top: 0.3em solid;
	border-right: 0.3em solid transparent;
	border-left: 0.3em solid transparent;
}
.caret-left {
	border-top: 0.3em solid transparent;
	border-right: 0.3em solid;
	border-bottom: 0.3em solid transparent;
}

.dflex {
	display: flex;
}

.flex-r {
	flex-direction: row;
}

.flex-c {
	flex-direction: column;
}

.flex-jc-sb {
	justify-content: space-between;
}

/*-----
 font-awesome and line-awesome additions:
 */
/* line-awesome icons are slightly smaller, this ups their relative size a bit: */
.la:before,
.las:before,
.lar:before,
.lal:before,
.lad:before,
.lab:before {
  font-size: 1.14285em;
  line-height: 0.875em;
  vertical-align: -.07142em; }
  

/* trash is always RED */
.fa-trash, .fa-trash-alt, .fa .red, .fa-ban {
  color: red;
}

/* button plus circle for time-clock
/*
.fa-plus-circle {
	color: green;
}
*/

.fa-trash:hover, .fa-trash-alt:hover, .fa:hover .red {
  color: darkred;
}

a.fa:hover, a.fa:focus, a.fa:active, a.fa:visited, a.fa:link{
    text-decoration: none;
}

/* colors */

.red, .warn {
	color:red;
}
.green, .note {
	color:green;
}

.redLink {
    color:red;
    text-decoration:underline;
}
.redLink:hover {
    color:darkred;
}

.greenLink {
    color:green;
    text-decoration:underline;
}
.greenLink:hover {
    color:darkgreen;
}

a.whiteLink, a.whiteLink:hover{
	color: #fff;
}

.hoverHighlightGreen {
	background-color:#ccffcc;
	background-color:rgba(26,255,26,.2) !important;
}

/* common UI other/misc: */

.dlg-wrap,
.dlg-wrap-max{
	max-width: 23em;  /* matches a width of 35 character search field */
}
.dlg-wrap,
.dlg-wrap-min{
	min-width: 15em; /* still fits on phone, not too big */
}

.drop-shadow
{
		/* now also a box shadow...*/
	-moz-box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.5);
	box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.5);
}


/* sizing

 xx-small   60%
  x-small   75%
    small   90%
   medium  100%
    large  125%
  x-large  150%
 xx-large  200%
xxx-large  300%

*/

.xsmaller{
	font-size:75%;
}
.smaller, a.smaller {
	font-size:90%;
}

.larger{
	font-size:125%
}
.xlarger{
	font-size:150%;
}

.ellipsis-anim:after {
    content: '\00a0\00a0\00a0';
    animation: progress-ellipsis 1.25s infinite;
}

@keyframes progress-ellipsis {
    0% {
        content: '\00a0\00a0\00a0';
    }
    30% {
        content: '.\00a0\00a0';
    }
    60% {
        content: '..\00a0';
    }
    90% {
        content: '...';
    }
}


/* the tokenizer iFrame */
iframe.tokenFrame {
	border: 0;
	overflow: hidden;
	width: 100%;
	height: 1.8em;
	margin: 0;
}

/* override some styles on certain browsers: */

/* remove up down arrows in <input type="number"> */
input[type=number] {
    -moz-appearance:textfield;
}
/* Remove controls from Safari and Chrome */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0; /* Removes leftover margin */
}

/* components */

#environmentBox {
	display:none;
	border:5px solid red;
	color:red;
	background-color:white;
	padding:10px;
	position:fixed;
	top:3px;
	left:90px;
	z-index:99999;
	font-weight:bold
}
#environmentBox.env-development{
	border:5px solid #f900ff;
	color:#f900ff;
}
#broadcast-announcement {
  display:none;
  border:4px solid #333;
  color:#333;
  background-color:white;
  cursor:pointer;
  background:#eaeaea;
  position:fixed;
  top:5px;
  left:5px;
  padding:10px;
  min-height:100px;
  width:90%;
  z-index:9999999;
}
#build-profile-footer{
	background-color:red;
	color:white;
	left: 0;
    position: fixed;
    right: 0;
    width: 100%;
    z-index: 2000;
    bottom: -1px;
    bottom-padding: 1px;
    font-weight:bold;
    cursor: pointer;
    padding: .75em;
    opacity: .75;
    text-align: center;
}
#build-profile-footer.env-development{
	background-image: linear-gradient(45deg, #ff0000 25%, #a229ff 25%, #a229ff 50%, #ff0000 50%, #ff0000 75%, #a229ff 75%, #a229ff 100%);
	background-size: 40.00px 40.00px;
}
.build-profile-warning {
	cursor: pointer;
}

/* override silly stripe in background overlay, lets just make it dark */
.ui-widget-overlay {
	background: #000;
	opacity: .7;
	-moz-opacity: 0.7;
	filter: alpha(opacity=70);
}

/* first used so we can try and pre-measure an elements style that we use as template */
.see-through {
	opacity: 0;
	-moz-opacity: 0;
	filter: alpha(opacity=0);
}

/* Gift Card Code - font, so we can see difference between 0,O,1,L,l */
.gc-code {
	font-family: Consolas, monaco, monospace;
}

.selectedImage {
	border: solid 1px red;
	box-shadow: 0px 12px 22px 1px #333;
}

.stockImage:hover {
	cursor: pointer;
	border: solid 1px red;
	box-shadow: 0px 12px 22px 1px #333;
}

/* style for unsaved changes */
.alert-warning {
    color: #664d03;
    background-color: #fff3cd;
    border-color: #ffecb5;
}

.alert {
	font-size: 0.75em;
	font-weight: normal;
    position: relative;
	padding: 4px 4px;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}

/* style for tagline */
textarea[name=tagline] {
	resize: none;
}