/*
	******************************************************************************************
	******************************************************************************************
					                         MAIN STYLE SHEET
							ELEMENT COLORS ARE CONTROLLED VIA ADDITIONAL STYLE
					SHEETS WHICH ARE CHANGED IN AND OUT BASED ON LOGGED IN STATUS
					                 DO NOT SET COLORS IN THIS SHEET!
	******************************************************************************************
	******************************************************************************************


*/

:root {

  --fontFamily: "Roboto", Sans-Serif;
  --fontFamilyBold: "Roboto Bold";
  --fontFamilyItalic: "Roboto Italic";
  --fontFamilyLight: "Roboto Thin", Sans-Serif;
  --fontFamilySemiBold: "Roboto Medium";
  --fontFamilySemiLight: "Roboto Light", Sans-Serif;
  --fontFamilyMonospace: "Courier New", "Consolas", monospace;

  --maskopacity: 0.65;
  --headerHeight: 25px;
  --fullHeightLessHeader: calc(100% - var(--headerHeight));

  --textStroke:
    -1px -1px 0 rgba(0, 0, 0, .55),
    1px -1px 0 rgba(0, 0, 0, .55),
    1px 1px 0 rgba(0, 0, 0, .55),
    -1px 1px 0 rgba(0, 0, 0, .55);

  --scrolBarWidth: 17px;
  --ncvabackground: hsl(203, 100%, 25%);

  --dialog-title-height: 3.5rem;
  --dialog-title-offset: calc(var(--dialog-title-height) * -1);
  --dialog-full-height: calc(100vh - var(--dialog-title-height));
  --dialog-close-icon-top-offset: -2.25em;
  --dialog-close-icon-right-offset: -1rem;
  --dialog-default-width: 65%;

  --onlinepaymentform-width: 50%;

}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 1em;
  width: 1em;
  border-radius: 50em;
  background: url(/resources/web/images/closeicon.png) no-repeat 50% 50%;
  background-size: contain;
  opacity: 0;
  pointer-events: none;
}

input[type="search"]:focus::-webkit-search-cancel-button {
  opacity: .5;
  pointer-events: all;
}

.dialog.--fullheight {
  --dialog-close-icon-top-offset: -1.75em;
  --dialog-close-icon-right-offset: 0;
}

.dialog.--smalltitle {
  --dialog-title-height: 2.25rem;
  --dialog-title-offset: calc(var(--dialog-title-height) * -1);
  --dialog-close-icon-top-offset: -1.5em;
}

@media screen and (orientation: portrait) {

  .dialog.login div.body {
    padding-top: 20%;
    padding-left: 12.5%;
    padding-right: 12.5%;
  } 

}

html,
body {
  overscroll-behavior: none;
}

* {
  box-sizing: border-box;
}

table {
  border-collapse: separate;
}

html {
  height: 100%;
  overflow: hidden;
}

a {
  text-decoration: none;
}

img {
  image-rendering: auto;
}

legend {
  margin-left: 0.5rem;
  padding: 0 0.125rem;
  font-family: var(--fontFamilyBold);
}

label {
  font-family: var(--fontFamilyBold);
}

.clear.both {
  clear: both;
}

.fadeIn {
  opacity: 1;
}

.fadeOut {
  opacity: 0;
}

label:hover {
  cursor: pointer;
}

.--notextselect .simpleRow {
  -webkit-user-select: none;
  user-select: none;
}

.--hideemptychildren .simpleRow *:empty {
  display: none;
}

.--notextwrap {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.--onlineserver .requiresOnlineServer {
  display: block;
}

.requiresOnlineServer,
.--onlineserver .requiresLocalServer {
  display: none;
}

[data-clickhandler="focuselement"]:hover {
  cursor: pointer;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--fontFamily);
  overflow: hidden;
  height: 100%;
  width: 100%;
}

body .developmentbadge,
.developmentbadge #developmentbadge {
  display: none;
}

body.--development .developmentbadge {
  color: white;
  display: unset;
  margin-right: 1rem;
  margin-top: 0.25rem;
}

body.--development #developmentbadge {
  display: block;
  position: absolute;
  bottom: 0;
  padding-left: 1rem;
  padding-bottom: 1rem;
  left: 0;
  font-size: 5rem;
  opacity: 0.25;
  color: white;
  pointer-events: none;
}

body.maskall #mainPageBackgroundRight,
body.maskall #mainPageBackgroundLeft,
body.maskall #mainmenu,
.filtered {
  display: none;
}



.no_overflow {
  overflow: hidden;
}

body.no_overflow #mainmenu {
  overflow: hidden;
  pointer-events: none;
}

.--aside {
  border: solid 2px black;
  padding-top: 1em;
  padding-bottom: 1em;
  margin: 1em;
}

.dialog.display_payments span.payment_amount,
.dialog.display_payments td.tender_type,
.dialog.downloader_moveimages div.body p.imagestore_title,

.photographerGrid td.photographer_name,

div.dropMenu div.dropMenuItem span.itemText,
div.set_album_active,
#priceGrid tr.specials td,
.largeImageContainer div.elementMarker,
div.imageStore table td.td_data,
div.imageStore .imageStoreTitle,
body.staff .staff_link,

div.simpleRow p.title,
div.simpleRow.simpleListIcon span.text,
div.simpleRow.simpleListIcon span.row_icon,

.processingerror,

h2,
h3,
.link,
.semi_bold,
.--semibold,
.--fontSemiBold,
div.tagContainer span.tag,
div.tag_overlay span.tag,
div.sideBar.userinfo p.USMail,
.selectlist.package_selector div.package_name,
.selectlist.package_selector div.package_price,
div.simpleRow.rowHeader,
.thumbNail div.crop_percent,
#priceGrid thead td,

.dialog.select_useralbum div.body div.dropMenuItem,
.dialog.package_selector_additional_items div.right div.simpleRow,
.dialog.package_selector_additional_items div.left div.simpleRow div.label,
.dialog.order_totals_summary td.label,
.dialog span.material_name,

#cullTools .separator,
#header div {
  font-family: var(--fontFamilySemiBold);
}

p {
  text-indent: 0;
}

.bold,
#orderInvoice td.label,
#orderInvoice div.delivery_times thead,
#orderInvoice div.documentIdentifier,
#orderInvoice div.items div.book div.price p,
#orderInvoice div.items div.imagePackage div.imagepackage_prices p,
#orderInvoice div.items div.collage div.order_invoice_item div.price,
#orderInvoice div.items div.book div.description table thead td {
  font-family: var(--fontFamilyBold);
}

strong {
  font-family: var(--fontFamilyBold); 
}

input,
select,
textarea {
  font-family: var(--fontFamily);
  background: none;
}

h1,
.--fontBold {
  font-family: var(--fontFamilyBold);
}

.--fontNormal {
  font-family: var(--fontFamily);
}

.--fontLight {
  font-family: var(--fontFamilyLight);
}

.--fontSemiBold {
  font-family: var(--fontFamilySemiBold);
}

.--fontSemiLight {
  font-family: var(--fontFamilySemiLight);
}

.ui-spinner input {
  padding: 0;
}

.--block {
  display: block !important;
}

.--inlineblock {
  display: inline-block !important;
}

.--halfwidth {
  width: calc(50% - 2rem) !important;
}

.--thirdwidth {
  width: calc(33% - 2rem) !important;
}

.--left {
  float: left !important;
}

.--right {
  float: right !important;
  margin-right: 1rem;
}

.--aligncenter {
  text-align: center !important;
}

.blur-background {
  filter: grayscale(100%) blur(1px);
}

.--m0 {
  margin: 0 !important;
}

.--ml1rm {
  margin-left: 1rem !important;
}

button.smaller.--mr1rm,
.--mr1rm {
  margin-right: 1rem !important;
}

.--mt1rm {
  margin-top: 1rem !important;
}




.--padding_top_1rem {
  padding-top: 1rem;
}

.--padding_bottom_1rem {
  padding-bottom: 1rem;
}

.--margin_top_1rem {
  margin-top: 1rem;
}

.--margin_bottom_1rem {
  margin-bottom: 1rem;
}

.--border_bottom_faint {
  border-bottom: dotted 1px rgba(255, 255, 255, 0.4);
}

.--borderright {
  border-right: solid 1px rgba(255, 255, 255, .4);
}

.--borderleft {
  border-left: solid 1px rgba(255, 255, 255, .4);
}





/* ************************************************ */
/* ************************************************ */
/* INPUT CONTROL STYLES */
/* FORM STYLES */
/* ************************************************ */
/* ************************************************ */
textarea {
  line-height: 1.5rem;
}

select,
textarea,
span.ui-spinner {
  width: 95%;
  border-style: solid;
  border-width: 1px;
  padding: .25em;
  margin-top: .25em;
  margin-bottom: .25em;
}

textarea,
input:not([type="checkbox"]) {
  width: 95%;
  border-style: solid;
  border-width: 1px;
  padding: 0.5rem;
  margin-top: .25em;
  margin-bottom: .25em;
}

input[type="color"] {
  padding: 0;
  height: 2.5rem;
}


span.ui-spinner,
span.ui-spinner input {
  padding: 0;
}

div.sideBar span.ui-spinner {
  padding: .125em;
}

span.ui-spinner input {
  border: none;
}

.ui-widget td {
  text-align: left;
}


/* MAGIC NUMBER PADDING FOR SELECT ELEMENTS TO MATCH HEIGHT WITH INPUT ELEMENTS */
select {
  width: 95%;
  padding: 0.4125rem; 
  padding-top: calc( 0.4125rem - 1px ); 
}

select option {
  color: black;
}

select:focus {
  outline: none;
}

button,
input[type="button"],
input[type="submit"] {
  background: none;
  background-color: transparent;
  background-color: rgba(255, 255, 255, 0.75);
  font-family: var(--fontFamilySemiBold);
  margin: 0;
  padding: 0;
  padding: .2em .5em;
  margin: auto;
  margin-bottom: 1em;
  border-style: solid;
  border-width: 1px;
  font-size: 1em;
  color: black;
}


button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
  border-style: solid;
  border-width: 1px;
  cursor: pointer;
}

.--saving,
.disabled,
.saving,
.--disabled,
:disabled,
button.disabled,
input.disabled,
select.disabled,
textarea.disabled {
  pointer-events: none;
  filter: grayscale(50%);
  opacity: 0.65;
}

form.--disabled {
  opacity: 0.5;
}

fieldset {
  border-style: solid;
  border-width: 1px;
}

fieldset p {
  margin: 2em;
  margin-top: .5em;
  margin-bottom: .5em;
}

button {
  margin: 1em 1.2em;
  font-size: 1.5em;
}

button.small {
  font-size: 1em;
  margin: 0;
  margin-bottom: 1em;
  margin-left: .1em;
}

button.smaller {
  font-size: .7em;
  margin: 0;
}

button.smaller i {
  margin-top: 0.125rem;
}

button.smallest {
  font-size: .6em;
  margin: 0;
  margin-bottom: .3em;
  margin-left: .075em;
}

button.large {
  font-size: 2em;
  margin: 1em .2em;
}

button.smaller.warning {
  margin-bottom: 0;
}




.opacity1 {
  opacity: 1;
}

.opacity09 {
  opacity: .9;
}

.opacity08 {
  opacity: .8;
}

.opacity07 {
  opacity: .7;
}

.opacity06 {
  opacity: .6;
}

.nottaggable,
.opacity05 {
  opacity: .5;
}

.opacity04 {
  opacity: .4;
}

.opacity03 {
  opacity: .3;
}

.opacity02 {
  opacity: .2;
}

.opacity01 {
  opacity: .1;
}

body.staff .staff_link:hover,
.link:hover {
  text-decoration: underline;
  cursor: pointer;
}




/* ************************************************ */
/* ************************************************ */
		          /* CLUB PHOTO QR CODE  */
/* ************************************************ */
/* ************************************************ */

div.qrcode_print_container {

	position: relative;
	font-size: 1rem;
	font-family: arial, sans-serif;
	overflow: visible;
	cursor: pointer;
	width: 8in;
	margin-left: calc( ( 100% - 8in ) / 2 );
	background-color: white;
	color: black;

	& h1 {
		text-align: center;
		text-transform: uppercase;
	}

	& .close_icon {
		display: none;
	}

	& div.footer{
		/* font-size: 0.75em; */
	}

	& div.header,
	& div.footer {
		font-family: var(--fontFamilyBold);
		text-align: center;
		color: black;
		text-transform: uppercase;
	}

	& div.content_container {
		position: relative;
	}

	& div.page {
		position: relative;
		width: 8in;
		height: 10.5in;
	}

	& div.page_content {
		display: grid;
		grid-column-gap: 1rem;
		grid-row-gap: 1rem;
		grid-template-columns: repeat( var(--columncount ), 1fr );
		grid-template-rows: repeat( var(--rowcount ), 1fr );
		/* overflow: hidden; */
		/* page-break-after: always; */
		/* border-bottom: solid 2px black; */
	}

	& div.content {
		position: relative;
		page-break-inside: avoid;
	}

	& div.content div.body {
		width: 80%;
		overflow: hidden;
    margin-left: 10%;
	}

	& img {
		width: 100%;
		aspect-ratio: 1;
	}

}



body.no_overflow {
	overflow: hidden;
}