/* DEFAULT COLLAGE STYLES NEEDED ALWAYS */


.collagePreview {
  overflow: hidden;
}

.collagePreview div.image {
  overflow: hidden;
  margin: 0;
  padding: 0;
  backface-visibility: hidden;
}

.collagePreview div.image img.image {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: content-box;
  margin: 0;
  padding: 0;
  z-index: 1;
  backface-visibility: hidden;
}

.collagePreview .draggable {
  cursor: grab;
}

.collagePreview div.cropStatus,
.collagePreview div.guideElement {
  display: none;
}

.collagePreview:hover div.guideElement {
  display: block;
}




/* **********************************************************************
                             DOCUMENT SUMMARY LINE HEADER.
************************************************************************ */

.documentSummary.--saving,
.documentSummzary.saving {
  opacity: 1;
  filter: grayscale(100%);
  pointer-events: auto;
}

.documentSummary.--saving>*,
.documentSummary.saving>* {
  opacity: 0.85;
  pointer-events: none;
}

.documentSummary button.--marginright {
  margin-right: 0.5rem;
}

.summarylineheader .sort_icon {
  display: none;
}

.summarylineheader .header.sorted.ascending .ascending {
  display: inline;
}

.summarylineheader .header.sorted.descending .descending {
  display: inline;
}



.header_control .refresh,
.close,
.closeicon,
.closeButton {
  cursor: pointer;
}


#mainPageBackgroundRight,
#mainPageBackgroundLeft {
  position: fixed;
  bottom: 0;
  height: var(--fullHeightLessHeader);
  width: auto;
  opacity: .25;
  filter: grayscale(100%);
  transition: opacity 0.25s ease-in-out;
}

#mainPageBackgroundRight {
  right: 0;
}

#mainPageBackgroundLeft {
  left: 0;
}

#portraitorientation-overlay {
  display: none;
}


/* ************************************************ */
/* ************************************************ */
/* NAVIGATION & HEADER CONTAINER STYLES */
/* ************************************************ */
/* ************************************************ */

/* HEADER STYLES */
#header {
  width: 100%;
  height: var(--headerHeight);
  position: absolute;
  top: 0;
  left: 0;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  margin: 0;
  padding: 0;
  z-index: 203;
  font-size: .7em;
}

#header-mask {
  width: 100%;
  height: 50%;
  position: absolute;
  left: 0;
  top: -50%;
  z-index: 201;
}

#header-mask h1 {
  margin-top: 1.5em;
  text-align: center;
}



#header-status {
  position: absolute;

}

#header a {
  text-decoration: none;
  cursor: pointer;
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
}

#logo {
  position: absolute;
  left: 0;
  top: -195px;
  z-index: 202;
  cursor: pointer;
}


/* BODY STYLES */


#logo-bottom {
  position: absolute;
  left: 15px;
  bottom: 15px;
  z-index: 215;
  pointer-events: none;
}


.background-mask,
#big_message_mask,
#background-mask,
#message-mask,
.mask {
  opacity: 0;
  position: absolute;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}

#big_message_mask.show,
.background-mask.show,
#background-mask.show {
  opacity: var(--maskopacity);
  pointer-events: auto;
  z-index: 100000;
}

#big_message_mask.remove,
.background-mask.remove,
#bigmessage.remove,
#background-mask.remove {
  pointer-events: none;
}


#bigmessage {
  opacity: 0;
  pointer-events: none;
  z-index: 100001;
}

#bigmessage.show {
  opacity: 1;
}


.background-mask.show,
#background-mask.show,
#bigmessage.show,
#body-mask {
  pointer-events: auto;
}

.big_message__statusbars {
  display: block;
  width: 100%;
}

.big_message__statusbars__status {
  margin: 1rem 0;
  width: 80%;
  margin-left: 10%;
}


.dialog_mask {
  opacity: 0;
  position: absolute;
  inset: 0;
  display: block;
}


#message-mask,
.mask {
  display: none;
  pointer-events: auto;
}


p.tableMessage {
  padding: .75em;
}



/* ************************************************ */
/* ************************************************ */
/* HEADER NAVIGATION CONTROLS */
/* ************************************************ */
/* ************************************************ */

#navigation-left {
  position: absolute;
  bottom: 0;
  left: 5%;
  height: 100%;
  z-index: 101;
  overflow: hidden;
}


#navigation-right {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  z-index: 101;
  overflow: hidden;
}

#navigation-left>*,
#navigation-right>* {
  float: left;
}

#navigation-left>div,
#navigation-right>div {
  text-align: center;
  height: 100%;
  border-left-style: solid;
  border-left-width: 1px;
  border-right-style: solid;
  border-right-width: 1px;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

#navigation-left>div.go_back {
  display: none;
  border: none;
  font-size: 2em;
  vertical-align: middle;
}

#navigation-left>div.go_back p {
  width: auto;
  padding: 0 .25em;
  bottom: .20em;
}


#navigation-left>div.go_back i {
  color: white;
}

body.nav_stack #navigation-left>div.go_back {
  display: block;
}

#navigation-right>div span.favorites_count {
  display: inline;
}


#navigation-left div p,
#navigation-right div p {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-indent: 0;
  padding: 0;
  margin: 0;
  text-align: center;
  cursor: pointer;
  padding-top: .3em;
  padding-right: 1em;
  padding-left: 1em;
}

#navigation-left>div span {
  display: inline;
}

#navtab-right,
#navtab-left {
  position: absolute;
  top: 30%;
  z-index: 102;
  width: 45px;
  height: 40%;
  opacity: .15;
  border-radius: 8px;
  border-style: solid;
  border-width: 1px;
}

/* MENU BUTTON FOR DISPLAYING NAV CONTROLS */
.navigation-tab {
  position: absolute;
  border-radius: 3px;
  margin: 0;
  padding: 0 .5em;
  z-index: 100;
  height: 1.75em;
}

#navigation-menu-right {
  right: 20px;
  bottom: -18px;
}

.navigation-tab:hover {
  cursor: pointer;
}

body.staff #navigation-left div.login,
body.user #navigation-left div.login,
#navigation-left div.logout,
#navigation-left div.logout {
  display: none;
}

body.staff #navigation-left div.logout,
body.user #navigation-left div.logout {
  display: block;
}

#navigation-right [data-navigationevent="slideshow_show"],
#navigation-right [data-navigationevent="products_show_menu"],
#navigation-right [data-navigationevent="view_schedules"] {
  display: none;
}

body.--slideshow #navigation-right [data-navigationevent="slideshow_show"],
body.--products #navigation-right [data-navigationevent="products_show_menu"],
body.--schedules #navigation-right [data-navigationevent="view_schedules"] {
  display: inline;
}



.accordion {
  border-top-style: solid;
  border-top-width: 1px;
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0);
  cursor: pointer;
  font-family: var(--fontFamilyBold);
  font-size: 1.25em;
  margin: 0;
  padding: .25em;
  padding-left: 1em;
}

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
}

.accordion__panel>* {
  overflow: hidden;
}

[data-accordionautoheight="0"] .accordion__panel>* {
  overflow: auto;
}


h1.accordion {
  padding: 0.25rem 1rem !important;
  border-width: 1px;
  border-bottom-width: 0;
  font-family: var(--fontFamilySemiBold);
}



/* ************************************************ */
/* ************************************************ */
/* POP UP CONTENT CONTAINER */
/* ************************************************ */
/* ************************************************ */
div.dialog {
  width: var(--dialog-default-width);
  min-width: 400px;
  max-width: 750px;
  border-radius: 0;
  position: absolute;
  left: -1000px;
  top: -1000px;
  z-index: 201;
  margin: 0;
  padding: 0;
  overscroll-behavior: none;
}

div.dialog div.title {
  position: relative;
  left: -1px;
  width: calc(100% + 2px);
  overflow: hidden;
  height: var(--dialog-title-height);
  line-height: normal;
}

div.dialog div.title h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 2.5%;
  width: 95%;
  height: 100%;
}

div.dialog.--smalltitle div.title h2 {
  margin: 0;
  padding: 0.125rem 0;
  font-size: 1.25rem;
}

div.dialog div.body {
  overscroll-behavior: none;
}


div.dialog div.body h3:first-child {
  margin-top: 0;
}

.dialog.height_short {
  height: 25em;
}


.dialog table td {
  text-align: left;
}

.dialog table td.--alignright {
  text-align: right;
}

.dialog .pad_top,
.dialog .--pad_top {
  padding-top: 1em;
}

.dialog .--pad_bottom {
  padding-bottom: 1em;
}


.dialog_tools {
  position: absolute;
  right: -40px;
  top: 1.5em;
  font-size: 1.3em;
  width: 2em;
  border-radius: 3px;
  z-index: 100;
  text-align: center;
  padding: 0.5rem;
}

.dialog_tools span {
  display: block;
	width: 100%;
	margin: 0;
	text-align: center;
}

.--toolsleft .dialog_tools {
  right: auto;
  left: -40px;
}

.dialog.dialog.simple_select {
  width: 350px;
  height: 400px;
}

.--staffvisibletablerow,
body.staff .--staffnotvisible,
div.dialog_tools span.--staffvisible,
div.dialog_tools span.staffVisible {
  display: none;
}

body.staff div.dialog_tools span.staffVisible,
body.staff div.dialog_tools span.--staffvisible {
  display: block;
}

body.staff .--staffvisibletablerow {
  display: table-row;
}



div.dialog_tools span:hover {
  cursor: pointer;
}

div.dialog_tools span:hover i {
  color: yellow;
}

div.dialog_tools span.tool_break {
  margin: 0.25rem auto;
  padding: 0;
  height: .25em;
  width: 75%;
}






.dialog.error,
.dialog.message,
.dialog.message_width {
  width: 550px;
  height: 300px;
}

.dialog.error,
.dialog.height,
.dialog.message_width {
  min-width: 0;
  width: 450px;
}

.dialog.simplesortdialog.--wide {
  width: 50vw;
}


.dialog.error div.body>p:first-child,
.dialog.message div.body>p:first-child {
  margin-top: 1rem;
}



.dialog.small_message {
  height: 200px;
}


/* WHEN THE DIALOG CONTAINS A PATH CONTROL ...*/
.dialog.pathControl {
  width: 450px;
  height: 500px;
}

div.pathControl div.directoryList {
  border-style: solid;
  border-width: 1px;
}

.dialog p,
#selectlist p {
  margin: 0 0 .5em 1em;
}

.dialog div.dialog-badge {
  position: absolute;
  left: -65px;
  top: -55px;
  font-size: 5em;
}


.dialog div.body {
  padding-top: 1em;
  position: relative;
  overflow: auto;
  height: calc(100% - 3.5rem);
  width: calc(100% - 2rem);
  margin-left: 1rem;
}


.dialog.--noButtons div.body {
  height: calc( 100% - 1rem );
}

.dialog div.body .section {
  width: 100%;
  height: 155px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  padding-bottom: 1em;
}

.dialog div.body img.section-badge {
  float: right;
}

.dialog.ui-draggable div.title:hover,
#selectlist.ui-draggable div.title:hover,
#message.ui-draggable div.title:hover {
  cursor: move;
}

.dialog span.icon.close_dialog,
#selectlist span.icon.close_dialog,
#message span.icon.close_dialog {
  position: absolute;
  font-size: 2em;
  top: var(--dialog-close-icon-top-offset);
  right: var(--dialog-close-icon-right-offset);
  z-index: 100;
}

.dialog[data-dialogposition="upperright"] span.icon.close_dialog,
.dialog[data-dialogposition="lowerright"] span.icon.close_dialog {
  right: auto;
  left: -15px;
}

.dialog.--fullscreen span.icon.close_dialog {
  right: 0;
  top: -1.75em;
}

.dialog.--fullscreen.--notitle span.icon.close_dialog {
  right: 1rem;
  top: 1rem;
  font-size: 3rem;
}

.dialog span.icon:hover,
#selectlist span.icon:hover,
#message span.icon:hover {
  cursor: pointer;
}


#simplelist div.title,
.dialog div.title {
  position: relative;
  font-size: 1em;
  margin: 0;
  padding: 0;
  width: 100%;
  margin-top: var(--dialog-title-offset);
  text-align: center;
}

.dialog div.buttons {
  width: 100%;
  height: 3em;
  padding-top: .5em;
  padding-right: 1rem;
  bottom: 0;
  text-align: right;
}

.dialog.login button,
.dialog div.buttons button {
  padding: 0.5rem;
}

#simplelist div.buttons {
  width: 98%;
  height: 3em;
  padding-top: .5em;
  bottom: 0;
}

.dialog input[type="button"],
.dialog button {
  font-size: 1rem;
}

.dialog button.small {
  font-size: 0.75rem;
}

.dialog button.smaller {
  font-size: .7rem;
}

.dialog button.smallest {
  font-size: .6rem;
}

.dialog button.large {
  font-size: 2rem;
}




.dialog div.buttons button {
  float: right;
  margin: 0 0 1em 0;
}

.dialog.--marginLeftCancel div.buttons button.close {
  margin-left: 1em;
}

.dialog.confirmation {
  width: 500px;
  min-width: 0;
  height: 300px;
}



/* WHEN THE DIALOG CONTAINS A SELECT IMAGE FROM DISK CONTROL ...*/
.dialog.selectImageControl {
  width: 900px;
}

.dialog.selectImageControl div.body div.left,
.dialog.selectImageControl div.body div.right {
  position: absolute;
  width: 50%;
  height: 100%;
  overflow: auto;
}

.dialog.selectImageControl div.body div.left {
  left: 0;
}

.dialog.selectImageControl div.body div.right {
  left: 50%;
  border: none;

  & .pathControl {
    display: grid;
    grid-template-rows: min-content min-content 1fr;
  }

}

.dialog.selectImageControl div.body div.right div.directory {
  text-align: center;
}

.dialog.selectImageControl div.body div.right div.directory div.directoryRow span.pathName {
  text-align: left;
}

.dialog.selectImageControl div.body {
  overflow: hidden;
}

.dialog.selectImageControl div.body div.left input {
  width: 90%
}

.dialog.selectImageControl div.directory img {
  max-height: 150px;
  max-width: 98%;
  width: auto;
}

.dialog.select_useralbum {
  max-height: 75%;
}

.dialog.select_useralbum div.buttons {
  height: 2em;
}

.dialog.select_useralbum div.body span.refreshIcon {
  position: absolute;
  right: 1em;
  top: 0;
}

.dialog.select_useralbum div.body div.set_album_active {
  position: relative;
  width: 100%;
  height: 245px;
  padding-top: 1em;
  padding-bottom: 1em;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  overflow: hidden;
}

.dialog.select_useralbum div.body div.set_album_active:last-child {
  border-bottom: none;
}


.dialog.select_useralbum div.body div.set_album_active span.itemText {
  margin-left: 1em;
}

.dialog.select_useralbum div.body div.set_album_active div.preview {
  margin-top: .5em;
  text-align: center;
}


.dialog.select_useralbum div.ratings {
  display: block;
  position: relative;
  margin-top: .5em;
  text-align: center;
  height: 1.5em;
}

.dialog.select_useralbum div.ratingsControl {
  display: block;
  position: relative;
  width: 15%;
  margin-left: 42.5%;
  margin-right: auto;
}

.dialog.select_useralbum div.ratingsItem {
  position: relative;
}

.dialog.select_useralbum div.body div.set_album_active .image_preview {
  position: relative;
  display: inline-block;
  margin-left: .5em;
  border-style: solid;
  border-width: 2px;
  overflow: hidden;
}

.dialog.select_useralbum div.body {
  overflow: hidden;
  height: calc(75vh - 3.5rem);
}

.dialog.select_useralbum div.body div.description {
  margin-bottom: 1em;
}

.dialog.select_useralbum div.body div.album_list {
  border-style: solid;
  border-width: 1px;
  overflow: auto;
  height: 90%;
}



/* ************************************************ */
/* ************************************************ */
/* BUTTON ROW */
/* ************************************************ */
/* ************************************************ */

span.buttonRow {
  display: block;
  width: 100%;
  text-align: center;
}

span.buttonRow input[type="button"],
span.buttonRow button {
  border-radius: 0;
  margin: 0;
  /* margin-right: -0.3rem; */
}

span.buttonRow input[type="button"]:first-child {
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}

span.buttonRow input[type="button"]:last-child {
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}

span.buttonRow input[type="button"].first,
span.buttonRow button.first {
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}

span.buttonRow input[type="button"].only,
span.buttonRow button.only {
  border-radius: 3px;
}

span.buttonRow input[type="button"].last,
span.buttonRow button.last {
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}

span.clickableSpan {
  font-family: var(--fontFamilySemiBold);
  cursor: pointer;
}

.clickable:hover,
.clickableSpan:hover {
  text-decoration: underline;
}






/* ************************************************ */
/* ************************************************ */
/* BODY CONTENT STYLES */
/* ************************************************ */
/* ************************************************ */

#bodycontents {
  position: absolute;
  left: 0;
  top: var(--headerHeight);
  overflow: hidden;
  width: 100%;
  height: 100%;
  z-index: 50;
}

#maincontents {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}

#reviewAndProcess .header .leftContent,
#reviewAndProcess .header .middleContent,
#reviewAndProcess .header .rightContent,
#downloadImageStore .header .leftContent,
#downloadImageStore .header .middleContent,
#downloadImageStore .header .rightContent,
.documentSummary .header .leftContent,
.documentSummary .header .middleContent,
.documentSummary .header .rightContent {
  position: absolute;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.documentSummary .header .leftContent {
  padding-left: 1rem;
}

.documentSummary .header .rightContent {
  padding-right: 1rem;
}



.header p {
  margin: 0;
}

.header h1 {
  font-size: 1.3em;
  margin: 0;
}

.header h3 {
  font-size: .8em;
  margin: 0;
}

.header .leftContent {
  left: 0;
  width: 20%;
}

.header .rightContent {
  width: 20%;
  left: 80%;
}

.header .middleContent {
  left: 20%;
  width: 60%;
  font-size: 1em;
  text-align: center;
}

.header .leftContent button {
  float: left;
  height: 100%;
  font-size: 1.2em;
  border: none;
  border-radius: 0;
  padding: 0 1em;
  box-shadow: none;
  border-right-style: solid;
  border-right-width: 1px;
}







/* ************************************************ */
/* ************************************************ */
/* MAIN MENU STYLES */
/* ************************************************ */
/* ************************************************ */
#mainmenu {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 50;
}

#mainmenu.no_overflow {
  overflow: hidden;
}

#mainmenu div.mainmenu-break {
  border-top: solid 1px rgba(255, 255, 255, 0.4);
}

#mainmenu div.mainmenu-majorItem:last-child {
  margin-bottom: 2em;
}

div.mainmenu-majorItem.accepting_requests {
  display: none
}

body.accepting_requests div.mainmenu-majorItem.accepting_requests {
  display: block;
}

.mainmenu-headingItem .logo {
  position: fixed;
  left: 0;
  top: 0;
  width: 200px;
  height: 165px;
  background: url(/resources/web/images/mhp-logo.png) center center no-repeat;
}

.mainmenu-majorItem,
.mainmenu-headingItem {
  margin-left: 4em;
  margin-bottom: 2em;
  width: 90%;
  opacity: 1;
}

.ui-effects-wrapper .mainmenu-majorItem,
.mainmenu-majorItem {
  width: 40%;
  margin-left: 33%;
}

@media screen and (orientation: portrait) {

  .ui-effects-wrapper .mainmenu-majorItem,
  .mainmenu-majorItem {
    width: 80%;
    margin-left: 10%;
  }

}


.mainmenu-majorItem:hover p {
  text-decoration: none;
}

.mainmenu-majorItem h1 {
  font-size: 3em;
  margin-bottom: 0;
}

.mainmenu-majorItem p {
  font-size: 1em;
  margin: 0;
}

.mainmenu-majorItem p span {
  display: inline-block;
  padding: .25em;
}

.mainmenu-headingItem {
  opacity: 1;
  text-align: right;
  margin: 0;
  padding: 0;
  width: 70%;
}

#mainmenu.loggedIn .mainmenu-headingItem {
  opacity: .7;
}

.mainmenu-headingItem h1 {
  font-size: 3em;
  margin: 0;
  padding: 0;
}

.mainmenu-headingItem p {
  font-size: 1em;
  position: relative;
  top: -1em;
}

#mainmenu .mainPageBackgroundLimited,
.mainPageBackgroundLimited {
  width: 75%;
}

#mainmenu .mainmenu-subItem {
  text-align: center;
}

div.mainmenu-majorItem[data-eventname="view_schedules"],
div.mainmenu-majorItem.products-menu,
div.mainmenu-majorItem.products-books,
div.mainmenu-majorItem.products-menu span.products_books,
div.mainmenu-majorItem.products-collages,
div.mainmenu-majorItem.products-menu span.products_collages,
div.mainmenu-majorItem.products-imagepackages,
div.mainmenu-majorItem.products-menu span.products_imagepackages,
div.mainmenu-majorItem.products-enlargements,
div.mainmenu-majorItem.products-menu span.products_enlargements,
div.mainmenu-majorItem.products-specials,
div.mainmenu-majorItem.products-menu span.products_specials {
  display: none;
}


body.--books div.mainmenu-majorItem.products-menu span.products_books,
body.--collages div.mainmenu-majorItem.products-menu span.products_collages,
body.--imagePackages div.mainmenu-majorItem.products-menu span.products_imagepackages,
body.--singlePrints div.mainmenu-majorItem.products-enlargements,
body.--singlePrints div.mainmenu-majorItem.products-menu span.products_enlargements,
body.--packages div.mainmenu-majorItem.products-specials,
body.--packages div.mainmenu-majorItem.products-menu span.products_specials {
  display: inline;
}

body.--schedules div.mainmenu-majorItem[data-eventname="view_schedules"],
body.--books div.mainmenu-majorItem.products-books,
body.--collages div.mainmenu-majorItem.products-collages,
body.--products div.mainmenu-majorItem.products-menu,
body.--singlePrints div.mainmenu-majorItem.products-enlargements {
  display: block;
}


body.--requests div.mainmenu-majorItem span.enableRequests,
div.mainmenu-majorItem span.disableRequests {
  display: none;
}

div.mainmenu-majorItem span.enableRequests,
body.--requests div.mainmenu-majorItem span.disableRequests {
  display: inline;
}



/* ************************************************ */
/* ************************************************ */
/* LARGE IMAGE STYLES */
/* ************************************************ */
/* ************************************************ */
#largeImageContainer {
  --opacity: opacity 250ms ease-in;
  position: absolute;
  left: 0;
  top: var(--headerHeight);
  width: 100%;
  height: calc( 100% - var(--headerHeight));
  transition: width 400ms var(--defaulteasing);
  z-index: 198;
}

#largeImageContainer.--fullscreen {
  height: 100%;
  top: 0;
}

#largeImageContainer.--ordertools {
  width: min( 75vw, calc( 100vw - 375px ) );
}

#largeImageContainer.--closing {
  --opacity: opacity 100ms ease-in;
}

#largeImageContainer div.largeImageWrapper {
  border-width: 8px;
  border-style: solid;
  margin: 0;
  padding: 0;
  position: relative;
  height: 90%;
  z-index: 5;
  overflow: hidden;
  box-sizing: content-box;
  transition: var(--opacity);
}

#largeImageContainer img.largeImage {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

div.largeImageWrapper.cropping:hover {
  cursor: move;
}

#largeImageContainer div.largeImageWrapper.cropping {
  border: none;
}

#largeImageContainer div.largeImageWrapper.cropping img {
  transform-origin: center;
}

#largeImageContainer div.watermarkBackground {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-position: top left;
  background-size: 25%;
  opacity: .25;
}

#largeImageContainer div.watermarkForeground {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 100;
  opacity: 0.40;
  background-repeat: repeat;
  background-position: center center;
  pointer-events: none;
}

#largeImageContainer div.overlayImage {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 101;
  background-position: center center;
  background-size: 100%;
  pointer-events: none;
  background-image: var(--overlayimage);
}


.largeImageContainer .image_badges {
  display: none;
  position: absolute;
  font-size: 5rem;
  top: 2rem;
  left: 5rem;
  overflow: hidden;
  height: auto;
  width: 6rem;
}

.largeImageContainer .image_badge {
  display: none;
  opacity: 0.04;
  float: right;
  line-height: 1em;
}


.largeImageContainer .image_badges i {
  padding: 0 0.125rem;
}


.largeImageContainer.order_image .image_badges,
.largeImageContainer.maximum_print_size .image_badges,
.largeImageContainer.album_image .image_badges,
.largeImageContainer.soft .image_badges,
.largeImageContainer.soft .image_badges .image_badge.soft,
.largeImageContainer.order_image .image_badges .image_badge.order_image,
.largeImageContainer.album_image .image_badges .image_badge.album_image,
.largeImageContainer.sample .image_badges .image_badge.sample,
.largeImageContainer.video .image_badges,
.largeImageContainer.video .image_badges .image_badge.video,
.largeImageContainer.maximum_print_size .image_badges .image_badge.maximum_print_size {
  display: block;
}


/* HIDE WATERMARK WHEN LOGGED IN AS STAFF */
body.staff #largeImageContainer div.watermarkForeground {
  opacity: 0;
}


#largeImageContainer div.buttonContainer {
  position: fixed;
  height: 3em;
  top: calc( 100% - 3rem );
  box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, .5);
  z-index: 700;
  padding-right: .5em;
  padding-left: .5em;
  width: inherit;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1.5fr 1fr;
}

#largeImageContainer.--ordertools div.buttonContainer {
  pointer-events: none;
  opacity: 0.5;
  filter: grayscale(50%);
}

#largeImageContainer div.close {
  position: absolute;
  right: 1rem;
  top: 1rem;
  font-size: 3rem;
  z-index: 10;
}

#largeImageContainer.--ordertools div.close {
  right: 3rem;
}

div.highResolutionPreviewContainer .close {
  position: absolute;
  right: -20px;
  top: -20px;
  font-size: 1.85em;
}

#largeImageContainer div.buttonContainer div.ratings {
  font-size: 1.5em;
  display: flex;
  justify-content: right;
  width: 100%;
}

#largeImageContainer div.buttonContainer div.tools{
  text-align: center;
}

#largeImageContainer div.buttonContainer button {
  font-size: 1em;
  margin: 0;
  margin-top: .35em;
  margin-bottom: .35em;
  border-radius: 2px;
  height: 2.5em;
  display: inline-block;
}

#largeImageContainer div.buttonContainer button.download,
#largeImageContainer div.buttonContainer button.tag {
  display: none;
  pointer-events: none;
}

.staff #largeImageContainer div.buttonContainer button.download,
.staff #largeImageContainer div.buttonContainer button.tag,
#largeImageContainer div.buttonContainer.--allowdownload button.download,
#largeImageContainer div.buttonContainer.--allowtag button.tag {
  display: inline-block;
  pointer-events: auto;
}


#largeImageContainer.--ordertools div.buttonContainer div.tools button:not(.order) {
  display: none;
}

#largeImageContainer div.buttonContainer button i:nth-child(1) {
  margin-right: .35em;
}

#largeImageContainer div.buttonContainer button.next i {
  margin-left: .35em;
}

#largeImageContainer div.buttonContainer button.play {
  margin-left: 2em;
}



#largeImageContainer div.bulletContainer {
  width: 3em;
  height: 24em;
  border-radius: 3px;
  position: fixed;
  top: 50%;
  margin-top: -12em;
  right: 0;
  box-shadow: -4px 0 6px 0 rgba(0, 0, 0, .7);
  overflow: hidden;
}

#largeImageContainer div.bulletContainer ul {
  margin: 0;
  margin-left: 2.25em;
  margin-top: 2em;
  margin-bottom: 2em;
  padding: 0;
  padding-left: .65em;
}

#largeImageContainer div.bulletContainer ul li {
  margin: 0;
  padding: 0;
  list-style-type: disc;
  font-size: 2em;
  line-height: 1em;
  opacity: .5;
}

#largeImageContainer div.bulletContainer ul li:hover {
  opacity: 1;
  cursor: pointer;
}

#largeImageContainer div.bulletContainer ul li.selected {
  opacity: 1;
}

div.highResolutionPreviewContainer {

  position: fixed;

  width: 350px;
  height: 350px;

  z-index: 10;

  box-shadow: 0 0 15px rgba(0, 0, 0, .5);
  border-style: solid;
  border-width: 8px;
  border-radius: 50%;

  margin: 0;
  padding: 0;
  overflow: hidden;

}

div.highResolutionPreview {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

div.highResolutionPreview img.highResolutionImage {
  position: absolute;
  display: none;
}

div.highResolutionPreview img.highResolutionImage:hover {

  cursor: move;
}

.largeImageContainer div.elementMarker {
  position: absolute;
  font-size: 25em;
  top: -.25em;
  opacity: .3;
  left: .1em;
  pointer-events: none;
}




div.highResolutionPreviewContainer div.reticle {
  position: absolute;
  left: 172px;
  top: 172px;
  width: 6px;
  height: 6px;
  opacity: .8;
  display: none;
}


.ruleOfThirdsContainer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 99;
  opacity: .7;
}

.ruleOfThirdsContainer span {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}

.ruleOfThirdsContainer span.leftThird {
  width: 33%;
  height: 100%;
}

.ruleOfThirdsContainer span.rightThird {
  width: 66%;
  height: 100%
}

.ruleOfThirdsContainer span.topThird {
  width: 100%;
  height: 33%;
}

.ruleOfThirdsContainer span.bottomThird {
  width: 100%;
  height: 66%;
}

.ruleOfThirdsContainer span.safeZone {
  width: 96%;
  height: 96%;
  left: 2%;
  top: 2%;
}







/* ************************************************ */
/* ************************************************ */
/* IMAGE TAGGING STYLES */
/* ************************************************ */
/* ************************************************ */
div.imageTagContainer {

  position: absolute;
  right: 0;
  width: 395px;
  top: calc(10% - 2em);
  height: 90%;
  z-index: 100;
  margin: 0;

  border-style: solid;
  border-width: 1px;
  border-radius: 4px 0 0 4px;

  padding: 1em;
  padding-top: 0;

  box-shadow: 0 0 6px 0 rgba(0, 0, 0, .4);
  z-index: 700;

}

div.imageTagContainer.--hidden {
  transform: translateX(400px);
  opacity: 0;
}

div.imageTagContainer.--noActiveImage div.header,
div.imageTagContainer.--noActiveImage div.body,
div.imageTagContainer.--noActiveImage div.footer {
  pointer-events: none;
  opacity: 0.7;
}

div.imageTagContainer:hover>div {
  opacity: 1;
}

div.imageTagContainer>img.close {
  position: absolute;
  left: -10px;
  top: -10px;
  z-index: 101;
}

div.imageTagContainer>div.header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 10%;
  border-top-right-radius: 4px;
}

div.imageTagContainer>div.header button {
  position: absolute;
  left: 2px;
  top: -25px;
}

div.imageTagContainer>div.header h2 {
  text-align: center;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  padding-top: .25em;
}

div.imageTagContainer>div.body {
  overflow: auto;
  position: absolute;
  left: 0;
  top: 10%;
  height: 80%;
  width: 100%;
}

div.imageTagContainer>div.footer {
  border-top-style: solid;
  border-top-width: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 10%;
  width: 100%;
  border-bottom-right-radius: 4px;
  font-size: .8em;
}

div.imageTagContainer>div.footer button {
  float: right;
  margin: 0;
  margin-top: .5em;
  font-size: 1em;
}

div.imageTagContainer>div.footer button.clear {
  float: left;
  margin-left: .5em;
}

div.imageTagContainer>div.footer button.copy {
  margin-right: .5em;
}

div.imageTagContainer div.tagContainer {
  width: 100%;
  float: left;
  border-top-style: solid;
  border-top-width: 1px;
}

div.imageTagContainer div.tagContainer .tags {
  padding: 0 0.5rem;
  display: flex;
  flex-wrap: wrap;
}


div.imageTagContainer>div.footer button.--marginRightSmall {
  margin-right: 1rem;
}




div.imageTagContainer div.tagContainer h2.title {
  margin: 0;
  margin-left: .5rem;
}

div.imageTagContainer div.tagContainer h2.title,
div.imageTagContainer div.tagContainer i.toggle {
  cursor: pointer;
}

div.imageTagContainer div.tagContainer div.inputTag {
  width: 90%;
  clear: both;
  text-align: center;
  left: 5%;
  margin-bottom: .75rem;
}

span.tag {
  display: block;
  padding: 0.125rem 0.4rem;
  margin: .25rem;
  margin-top: 1rem;
  border-style: solid;
  border-width: 1px;
}

.dropMenuItem span.tag {
  margin: .25em;
}

div.imageTagContainer div.tagContainer span.showremainder,
div.imageTagContainer div.tagContainer span.hideremainder {
  clear: both;
  display: block;
  width: 98%;
  text-align: right;
}

div.imageTagContainer div.tagContainer span.showremainder:hover,
div.imageTagContainer div.tagContainer span.hideremainder:hover {
  text-decoration: underline;
  cursor: pointer;
}

div.imageTagContainer div.tagContainer div.subset,
div.imageTagContainer div.tagContainer div.remainder {
  min-width: 90%;
}

div.imageTagContainer div.tagContainer span.tag:hover,
div.dropMenuItem div.tagContainer span.tag:hover {
  cursor: pointer;
}

div.imageTagContainer div.tagContainer input {
  width: 50%;
}

div.dropMenuItem button.userEditable.source {
  display: none;
}

div.dropMenuItem.source_filtersource button.userEditable.source {
  display: inline-block;
}

div.dropMenuItem.--imagegroups {
  display: none;
}

.imagegroups div.dropMenuItem.--imagegroups {
  display: block;
}


/* ************************************************ */
/* ************************************************ */
/* UI.gallery */
/* ************************************************ */
/* ************************************************ */
.dialog.panorama {
  width: 102%;
  height: 550px;
  max-width: none;
}

.dialog.panorama div.body {
  height: calc(100% - 3em);
  width: 98%;
  overflow: hidden;
  overflow-x: auto;
  padding: 1rem;
}

.dialog.panorama span.close_dialog {
  right: 1.5rem;
}

.dialog.gallery div.sample_images {
  height: 100%;
  width: max-content;
  overflow: hidden;
}

.dialog.gallery img.sample_image:not(:first-child) {
  margin-lefT: 1rem;
}

.dialog.gallery img.sample_image {
  height: 100%;
  width: auto;
  float: left;
  border: solid 5px white;
  box-shadow: 0 0 6px rgba(0, 0, 0, .5);
}

.dialog.gallery img.sample_image {
  border: none;
  cursor: pointer;
}

.dialog.gallery div.sample_images:hover img.sample_image {
  filter: grayscale(100%);
}

.dialog.gallery div.sample_images img.sample_image:hover {
  filter: none;
  opacity: 1;
}

.gallery_image_overlay:hover {
  cursor: pointer;
}

.gallery_image_overlay figure {
  position: absolute;
  object-fit: contain;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  display: grid;
  grid-template-rows: 1fr min-content;
  place-items: center;
  overflow: hidden;
}

.gallery_image_overlay figcaption {
  text-align: center;
  font-family: var(--fontFamilyBold);
  margin: 1rem auto;
  width: max( 75%, min( 72ch, 100% ) );
  background-color: rgb( 255 255 255 / 0.75);
  color: black;
  z-index: 100;
  padding: 1rem;
  overflow: hidden;
}

.gallery_image_overlay figcaption:empty {
  display: none;
}
 

.gallery_image_overlay span.close {
  position: absolute;
  right: 3px;
  top: 3px;
  font-size: 2em;
  opacity: 1;
  z-index: 10;
}

div.gallery_image_overlay {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}



/* ********************************************************
               SKU EDITING - PACKAGES AND BOOKS
    ******************************************************** */
div.sideBar.packageViewItems div.content p,
div.sideBar.packageViewItems h2,
div.sideBar.packageViewItems div.packageItemContainer {
  width: 80%;
  margin-left: 10%;
}

div.packageViewItems h2 {
  text-align: center;
}

div.sideBar div.sideBarItemContainer {
  height: 25em;
  overflow: hidden;
  margin-bottom: 3em;
  border-radius: 4px;
  font-size: 1.1em;
}

div.sideBar div.sideBarItemContainer td {
  font-size: 1em;
}

div.sideBar div.sideBarItemContainer div.header {
  position: relative;
  width: 100%;
  height: 2em;
  font-family: var(--fontFamilyBold);
}

div.sideBar div.sideBarItemContainer div.header h3 {
  font-family: inherit;
  font-size: 1.3em;
  text-align: center;
}

div.sideBar div.sideBarItemContainer div.body {
  width: 100%;
  height: 20.5em;
  overflow: auto;
}

div.sideBar div.sideBarItemContainer div.footer {
  width: 100%;
  height: 2.5em;
}

div.sideBar div.sideBarItemContainer div.footer button {
  float: right;
  margin-right: 1em;
  margin-top: .6em;
}



div.sideBar div.sideBarItemContainer div.itemRow,
div.sideBar div.sideBarItemContainer div.itemRow table {
  width: 100%;
}


div.sideBar div.sideBarItemContainer div.itemRow table td {
  text-align: center;
  vertical-align: top;
}




/* CUSTOM CELL SIZING FOR PACKAGE ITEMS */
div.sideBar div.sideBarItemContainer div.itemRow.collage table td {
  width: 25%;
}

div.sideBar div.sideBarItemContainer div.itemRow.singleprint table td {
  width: 20%;
}


div.sideBar div.sideBarItemContainer div.itemRow.imagepackage table td.price,
div.sideBar div.sideBarItemContainer div.itemRow.imagepackage table td.quantity {
  width: 12.5%;
}

div.sideBar div.sideBarItemContainer div.itemRow.imagepackage table td.finishing {
  width: 17.5%;
}

div.sideBar div.sideBarItemContainer div.itemRow.imagepackage table td.imagesource {
  width: 20%;
}

div.sideBar div.sideBarItemContainer div.itemRow.imagepackage table td.sku {
  width: 40%;
}


/* CUSTOM CELL SIZING FOR BOOK CONTENTS */
div.sideBar div.sideBarItemContainer div.itemRow.size table td.id {
  width: 25%;
}

div.sideBar div.sideBarItemContainer div.itemRow.size table td.size {
  width: 25%;
}

div.sideBar div.sideBarItemContainer div.itemRow.size table td.name {
  width: 50%;
}






div.sideBar div.sideBarItemContainer div.itemRow table td.header {
  text-align: center !important;
  font-family: var(--fontFamilyBold);
}

div.sideBar div.sideBarItemContainer div.itemRow td.rowLabel {
  padding: 0 0 .5em 0;
  margin-bottom: 1em;
  text-align: center;
}

div.sideBar div.sideBarItemContainer div.itemRow td {
  vertical-align: middle;
}

div.sideBar div.sideBarItemContainer div.itemRow tr.itemData td {
  padding: 0 0 1em 0;
}

div.sideBar div.sideBarItemContainer div.itemRow tr.itemData td.header {
  padding: .5em 0 0 0;
}


div.sideBar div.sideBarItemContainer div.itemRow thead tr.rowHeaders td {
  padding: .5em 0 0 0;
}


div.sideBar div.sideBarItemContainer div.itemRow td.buttonRow {
  overflow: hidden;
  padding-right: 1em;
  text-align: left;
  padding-top: .25em;
}

div.sideBar div.sideBarItemContainer div.itemRow td.buttonRow button {
  float: right;
}

div.sideBar div.sideBarItemContainer div.itemRow td.buttonRow button.delete {
  margin-left: 1.5em;
}

div.sideBar div.sideBarItemContainer div.itemRow table.collageprint td.buttonRow button {
  float: none;
  margin-left: 0;
}

div.sideBar div.sideBarItemContainer div.itemRow table.collageprint td.buttonRow,
div.sideBar div.sideBarItemContainer div.itemRow table.size td.buttonRow {
  text-align: center;
}

div.sideBar div.sideBarItemContainer table.coverType td.id,
div.sideBar div.sideBarItemContainer table.extras td.id,
div.sideBar div.sideBarItemContainer table.pageType td.id {
  width: 25%;
}

div.sideBar div.sideBarItemContainer table.coverType td.name,
div.sideBar div.sideBarItemContainer table.extras td.name,
div.sideBar div.sideBarItemContainer table.pageType td.name {
  width: 75%;
}



div.sideBar div.sideBarItemContainer div.itemRow td.buttonRow button.smaller.editcollage {
  margin-left: 3em !important;
}

div.sideBar div.sideBarItemContainer div.itemRow div.buttonRow div.reset {
  width: 100%;
  height: 100%;
  position: relative;
}

div.sideBar div.sideBarItemContainer div.itemRow.book table td {
  width: 33%;
}



/* ************************************************ */
/* ************************************************ */
/* SELECT PACKAGE STYLES */
/* ************************************************ */
/* ************************************************ */


div.simpleRow span.icon {
  position: relative !important;
  top: 0 !important;
  padding-right: .5em;
}

div.addPackage td.packageFee.fixedprice select {
  width: 55%;
}


div.addPackage td.packageFee.fixedprice span.ui-spinner,
div.addPackage td.packageFee.fixedprice input {
  width: 30%;
}

div.addPackage td.packageFee.fixedprice span.ui-spinner {
  margin-bottom: .5em;
}

div.addPackage td.packageFee.fixedprice span.fixedpricecontainer {
  margin-left: 1em;
}










/* ************************************************ */
/* ************************************************ */
/* SIDE BAR STYLES */
/* ************************************************ */
/* ************************************************ */
.sideBarMask {
  position: absolute;
  left: 0;
  top: var(--headerHeight);
  width: 100%;
  height: var(--fullHeightLessHeader);
  z-index: 199;
  opacity: 0;
}

.sideBar {
  position: absolute;
  top: var(--headerHeight);
  width: 60%;
  height: var(--fullHeightLessHeader);
  border-right-style: solid;
  border-right-width: 2px;
  border-left-style: solid;
  border-left-width: 2px;
  z-index: 200;
}

.sideBarMask.fullHeight,
.sideBar.fullHeight {
  height: 100%;
  top: 0;
}


.sideBar .header {
  opacity: .8;
  width: 90%;
}

.sideBar p.headingText {
  margin: 0;
  font-size: 1em;
}

.sideBar .closeButton {
  position: absolute;
  top: -0.125em;
  z-index: 201;
  font-size: 2em;
}

.sideBar .content {
  position: absolute;
  width: 96%;
  height: 93%;
  left: 2%;
  top: 3.5%;
  overflow: auto;
  z-index: 10;
}

.sideBar .infoTab [data-bookmarkname] {
  font-family: var(--fontFamilySemiLight);
}

div.titleTab,
.sideBar div.infoTab {
  position: absolute;
  right: -310px;
  top: 57px;
  width: 315px;

  border-radius: 3px;
  border-style: solid;
  border-width: 2px;

  padding: 1em 0 1em 1em;

}

.sideBar div.infoTab {
  z-index: 0;
}

div.titleTab {
  right: -245px;
  padding-top: 0;
  text-align: center;
  width: 250px;
}

div.titleTab h1 {
  font-size: 1.2em;
  margin-bottom: 0;
}

div.titleTab p {
  margin-top: 0;
  padding: 0 1em;
}

#leftSideBar {
  left: 0;
}

#leftSideBar.closed {
  transform: translateX(-10%);
  opacity: 0;
}

#leftSideBar .header .headingText {
  text-align: left;
}

#leftSideBar .closeButton {
  right: -0.5em;
}

#rightSideBar {
  right: 0;
}

#rightSideBar.closed {
  transform: translateX(10%);
  opacity: 0;
}

#rightSideBar .header {
  text-align: left;
  margin-right: 2em;
}

#rightSideBar .header .headingText {
  text-align: left;
}

#rightSideBar .closeButton {
  left: -0.5em;
}

#rightSideBar div.infoTab {
  left: -310px;
}














/* ************************************************ */
/* ************************************************ */
/* PEEP MESSAGE STYLES */
/* ************************************************ */
/* ************************************************ */
div.peep {
  border-style: solid;
  border-width: 1px;
  position: absolute;
  min-height: 25px;
  min-width: 25%;
  max-width: 50%;
  border-radius: 4px;
  font-size: 1em;
  display: none;
  z-index: 250;
  padding: 1em;
}

div.peep div.body {
  width: 100%;
  max-height: 350px;
  overflow: none;
  overflow-y: auto;
}

div.peep div.body>div {
  border-bottom: 1px solid white;
}

div.peep div.body>div:last-child {
  border: none;
}

div.peep table {
  font-size: .9em;
  width: 100%;
  position: relative;
  margin: 0;
}

div.peep table td.title {
  text-align: center;
}

div.peep table td {
  padding: .5em;
  text-align: left;
  vertical-align: text-top;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

div.peep p {
  margin: 0.5rem 0;
}

div.peep button.--w50 {
  width: calc(50% - 1rem);
  margin: 0 auto;
  margin-left: calc( 25% - 0.5rem );
}

#peep_bottomRight {
  right: 5px;
  bottom: -150px;
  box-shadow: -3px 0 4px 0 rgba(0, 0, 0, .5);
}

#peep_bottomLeft {
  left: 5px;
  bottom: -150px;
  box-shadow: -3px 0 4px 0 rgba(0, 0, 0, .5);
}

#peep_topRight {
  right: 5px;
  top: -150px;
  box-shadow: 3px 0 4px 0 rgba(0, 0, 0, .5);
}

#peep_topLeft {
  left: 5px;
  top: -150px;
  box-shadow: 3px 0 4px 0 rgba(0, 0, 0, .5);
}

div.peep .close {
  color: white;
  font-size: 1.5em;
  position: absolute;
}

#peep_bottomRight .close {
  left: -0.5em;
  top: -0.75em;
}

#peep_bottomLeft .close {
  right: -0.5em;
  top: -0.75em;
}

#peep_topRight .close {
  left: -0.5em;
  bottom: -0.75em;
}

#peep_topLeft .close {
  right: -0.5em;
  bottom: -0.75em;
}





















/* ************************************************ */
/* ************************************************ */
/* CONTENT CONTAINER DISPLAY CONTAINER */
/* ************************************************ */
/* ************************************************ */

div.contentContainer {
  position: absolute;
  top: var(--headerHeight);
  left: -125%;
  width: 100%;
  height: var(--fullHeightLessHeader);
  border-bottom-style: solid;
  z-index: 55;
}

div.contentContainer>div.header {
  float: left;
  width: 100%;
  height: 5em;
  overflow: hidden;
}

div.contentContainer>.close {
  display: inline-block;
  position: absolute;
  right: -.85em;
  top: -.125em;
  font-size: 2em;
  z-index: 101;
}

div.contentContainer>div.body {
  padding: 0;
  margin: 0;
  float: left;
  width: 100%;
}

div.contentContainer>div.footer {
  float: left;
  width: 100%;
  height: 5%;
  overflow: hidden;
}

.bodyMessage {
  font-size: 4em;
  font-family: var(--fontFamilySemiBold);
  text-shadow: -1px -1px 2px rgba(0, 0, 0, .5), 1px 1px 2px rgba(255, 255, 255, .3);
  width: 75%;
  margin-left: 12.5%;
  text-align: center;
}

div.contentContainer .header_control {
  display: inline-block;
  position: relative;
  margin: 0;
}

div.contentContainer .header_control.margin_left {
  margin-left: .25em;
}











/* ************************************************ */
/* ************************************************ */
/* DOCUMENT SUMMARY CONTAINER  */
/* ************************************************ */
/* ************************************************ */

div.contentContainer {
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-20%);
  width: 100%;
  height: var(--fullHeightLessHeader);
}


/* START STYLE OVERRIDES FOR MAIN DOCUMENT SUMMARY CONTAINER */
div.documentSummary {
  --summaryHeaderHeight: 7em;
  --summaryFooterHeight: 3em;
  --summaryBodyHeight: calc(100% - var(--summaryHeaderHeight) - var(--summaryFooterHeight) );
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--fullHeightLessHeader);
  border-bottom-style: solid;
  overflow: hidden;
  z-index: 55;
}

div.documentSummary > div.header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--summaryHeaderHeight);
  overflow: hidden;
  display: grid;
  grid-template-rows: min-content min-content;
  grid-template-columns: 1fr;
  row-gap: 0.5rem;
  padding-top: 0.35em;
}

div.documentSummary div.header div.titleRow {
  height: 3em;
  width: 100%;
  text-align: center;
}

div.documentSummary .filterStatus {
  margin-right: 0.5rem;
}


div.documentSummary div.header .controlRow {
  position: relative;
  width: 100%;
  height: 2.5rem;
}

div.contentContainer div.header h1 img.close,
div.contentContainer div.header h1 img.refresh,
div.contentContainer div.header h1 img.options,
div.documentSummary div.header div.titleRow h1 img.close,
div.documentSummary div.header div.titleRow h1 img.refresh,
div.documentSummary div.header div.titleRow h1 img.options {
  position: relative;
  top: -5px;
  width: 20px;
}

div.documentSummary div.header span.header_control:hover,
div.documentSummary div.header div.titleRow h1 img.close:hover,
div.documentSummary div.header div.titleRow h1 img.refresh:hover,
div.documentSummary div.header div.titleRow h1 img.options:hover {
  cursor: pointer;
}

#orderSummaryContainer div.header div.titleRow p,
div.documentSummary div.header div.titleRow h3 {
  font-weight: normal;
  font-family: var(--fontFamilySemiLight);
}

div.documentSummary div.header .simpleSearch {
  margin-right: 0.5em;
  width: 100%;
  display: inline-block;
}

div.documentSummary div.header div.leftContent select {
  margin-left: 0.5em;
  width: 100%;
  display: inline-block;
}

div.documentSummary div.header div.rightContent select {
  margin: 0 1.5em;
}

div.documentSummary div.header div.middleContent button.small {
  font-size: .75em;
}

div.documentSummary>div.body {
  position: absolute;
  left: 0;
  top: var(--summaryHeaderHeight);
  width: 100%;
  height: var(--summaryBodyHeight);
  overflow: auto;
}

div.documentSummary>div.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: var(--summaryFooterHeight);
  overflow: hidden;
}

.summarylineheader,
div.summaryLine {
  mask-image: linear-gradient(0.25turn, transparent 0%, black 2%, black 98%, transparent);  
  font-size: 0.8rem;
  cursor: pointer;
}

div.summaryLine {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

div.documentSummary div.summaryLine:first-child {
  border-top-width: 1px;
  border-top-style: solid;
}

div.summaryLine:not(.summarylineheader) ~ div.summaryLine:hover,
div.summaryLine:not(.summarylineheader):hover {
  mask-image: none;
}

div.documentSummary div.summaryLine:not(.summarylineheader):has( + :hover ) {
  border-bottom: none;
}

div.documentSummary div.summarylineheader + div.summaryLine,
div.documentSummary div.summaryLine:not(.summarylineheader):hover {
  border-top-style: solid;
  border-top-width: 1px;
}


div.summaryLine>span {
  display: inline-block;
}

div.documentSummary [data-propertyname="name"] {
  font-family: var(--fontFamilySemiBold);
}

div.documentSummary div.rowheader td:last-child {
  padding-right: 1em;
}

div.documentSummary div.rowheader table {
  width: 100%;
}







/* END STYLE OVERRIDES FOR MAIN DOCUMENT SUMMARY CONTAINER */

.dialog.tools {
  height: 500px;
}

.dialog.tools .toolslist {
  height: 100%;
  width: 100%;
}



/* START STYLE OVERRIDES FOR PAYMENT SUMMARY */
#orderSummaryContainer div.header div.leftContent {
  width: 20%;
}

#orderSummaryContainer div.header div.middleContent {
  width: 60%;
  display: block;
}


div.documentSummary.paymentSummary div.header div.leftContent {
  width: 33%;
}

#orderSummaryContainer div.header div.middleContent,
div.documentSummary.paymentSummary div.header div.middleContent {
  position: absolute;
  text-align: center;
  left: 33%;
  width: 34%;
  height: 50%;
}


/* END STYLE OVERRIDES FOR PAYMENT SUMMARY */










/* ************************************************ */
/* ************************************************ */
/* SUMMARY CONTAINER  */
/* ************************************************ */
/* ************************************************ */

.summaryRows .summaryLine,
.orderSummary-orderline,
.packageSummary-packageline {
  position: relative;
  width: 100%;
  min-height: 3em;
  padding: 1rem 2rem .75rem 2rem;
  overflow: hidden;
}

.summarylineheader { 
  padding: 0.35rem 2rem;
  height: 1.75rem;
}



.requestPaymentSummaryLine.unpaid {
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

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


.summaryLine .badges,
.orderSummary-orderline .badges {
  position: absolute;
  right: 0;
  top: 0;
  width: 5em;
  font-size: 1.5em;
  opacity: .5;
  padding-right: .25em;
}

.summaryLine .badges span,
.orderSummary-orderline .badges span {
  display: none;
  width: 1em;
  float: right;
}

.orderSummary-orderline.compiled .badges .compiled,
.orderSummary-orderline.notes .badges .notes {
  display: block;
}

.summaryLine button,
.orderSummary-orderline button {
  font-size: 1em;
}

.orderSummary-orderline:hover {
  cursor: default;
}


.packageSummary-packageline .id {
  float: left;
  width: 5%;
  margin-left: 2em;
}

.packageSummary-packageline .name {
  float: left;
  width: 45%;
}

.packageSummary-packageline .controls {
  float: left;
  width: 45%;
  margin-right: 1em;
  text-align: right;
}

.packageSummary-packageline .controls {
  float: right;
  width: 25%;
}

.packageSummary-packageline .packageType {
  float: left;
  width: 10%;
}

.summaryContainer .summaryLine .controls button {
  float: right;
}

.documentSummary .footer button {
  float: right;
  margin-right: 1em;
  margin-top: .6em;
}



/* ************************************************

		            ORDER SUMMARY

   ************************************************ */


#orderSummaryContainer {
  left: 0;
}

#orderSummaryContainer div.summaryLine>div.name:hover {
  text-decoration: underline;
}

#orderSummaryContainer div.body {
  overflow: hidden;
}


#orderSummaryRows {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}

div.orderSummary-orderlineheader,
#orderSummaryRows div.summaryLine {
  display: flex;
  flex-wrap: wrap;
}

#orderSummaryRows div.orderSummaryHeader,
#orderSummaryRows div.summaryLine {
  width: 75%;
  margin-left: 12.5%;
}

/* .orderSummary-orderlinefooter > div,
.orderSummary-orderlineheader > div,
.orderSummary-orderline > div {
 font-size: 0.85em;
} */


.summaryContainer .summaryLine.orderSummary-orderline .controls button {
  float: none;
}

.--large_preview__transitionout .orderSummary-orderlinefooter .id,
.--large_preview__transitionout .orderSummary-orderlineheader .id,
.--large_preview__transitionout .orderSummary-orderline .id,
.orderSummary-orderlinefooter .id,
.orderSummary-orderlineheader .id,
.orderSummary-orderline .id {
  width: 15%;
}

.--large_preview__transitionout .orderSummary-orderlinefooter .name,
.--large_preview__transitionout .orderSummary-orderlineheader .name,
.--large_preview__transitionout .orderSummary-orderline .name,
.orderSummary-orderlinefooter .name,
.orderSummary-orderlineheader .name,
.orderSummary-orderline .name {
  width: 28%;
}

.orderSummary-orderlinefooter>div,
.orderSummary-orderlineheader>div,
.orderSummary-orderline>div:not(.production_row) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-bottom: .75em;
}


.--large_preview__transitionin .orderSummary-orderlinefooter .name,
.--large_preview__transitionin .orderSummary-orderlineheader .name,
.--large_preview__transitionin .orderSummary-orderline .name,
.--large_preview__transitionin .orderSummary-orderlinefooter .id,
.--large_preview__transitionin .orderSummary-orderlineheader .id,
.--large_preview__transitionin .orderSummary-orderline .id,
.--large_preview__transitionin .orderSummary-orderlinefooter div.order_total,
.--large_preview__transitionin .orderSummary-orderlineheader div.order_total,
.--large_preview__transitionin .orderSummary-orderline div.order_total,

.--large_preview .orderSummary-orderlinefooter .name,
.--large_preview .orderSummary-orderlineheader .name,
.--large_preview .orderSummary-orderline .name,
.--large_preview .orderSummary-orderlinefooter .id,
.--large_preview .orderSummary-orderlineheader .id,
.--large_preview .orderSummary-orderline .id,
.--large_preview .orderSummary-orderlinefooter div.order_total,
.--large_preview .orderSummary-orderlineheader div.order_total,
.--large_preview .orderSummary-orderline div.order_total {
  width: 32%;
}

.--large_preview__transitionout .orderSummary-orderlinefooter div.order_total,
.--large_preview__transitionout .orderSummary-orderlineheader div.order_total,
.--large_preview__transitionout .orderSummary-orderline div.order_total,
.--large_preview__transitionout .orderSummary-orderlinefooter div.balance_due,
.--large_preview__transitionout .orderSummary-orderlineheader div.balance_due,
.--large_preview__transitionout .orderSummary-orderline div.balance_due,

.orderSummary-orderlineheader div.order_total,
.orderSummary-orderlinefooter div.order_total,
.orderSummary-orderline div.order_total,
.orderSummary-orderlineheader div.balance_due,
.orderSummary-orderlinefooter div.balance_due,
.orderSummary-orderline div.balance_due {
  /* KEEP display: inline-block even though it is inherited from another rule. Without it here, with transitions don't work */
  display: inline-block;
  width: 12%;
  opacity: 1;
}

.--large_preview__transitionin .orderSummary-orderlinefooter div.balance_due,
.--large_preview__transitionin .orderSummary-orderlineheader div.balance_due,
.--large_preview__transitionin .orderSummary-orderline div.balance_due,
.--large_preview__transitionin .orderSummary-orderlinefooter div.collection_name,
.--large_preview__transitionin .orderSummary-orderlineheader div.collection_name,
.--large_preview__transitionin .orderSummary-orderline div.collection_name,

.--large_preview .orderSummary-orderlinefooter div.balance_due,
.--large_preview .orderSummary-orderlineheader div.balance_due,
.--large_preview .orderSummary-orderline div.balance_due,
.--large_preview .orderSummary-orderlinefooter div.collection_name,
.--large_preview .orderSummary-orderlineheader div.collection_name,
.--large_preview .orderSummary-orderline div.collection_name {
  opacity: 0;
  width: 0;
}

.--large_preview__transitionout .orderSummary-orderlinefooter div.collection_name,
.--large_preview__transitionout .orderSummary-orderlineheader div.collection_name,
.--large_preview__transitionout .orderSummary-orderline div.collection_name,
.orderSummary-orderlinefooter div.collection_name,
.orderSummary-orderlineheader div.collection_name,
.orderSummary-orderline div.collection_name {
  /* KEEP display: inline-block even though it is inherited from another rule. Without it here, with transitions dont' work */
  display: inline-block;
  opacity: 1;
  width: 31%;
}

#orderSummaryContainer div.orderSummary-orderline div.controls {
  width: 100%;
  margin: .75em 0;
  text-align: center;
  padding-right: 1em;
}


#orderSummaryContainer div.header div.leftContent select {
  margin: 0;
  margin-left: 0.5em;
}













/* SUMMARY REPORT - $/IMAGE SUMMARY*/
.dialog.photographer_income_summary_report {
  height: 70%;
  max-width: 750px;
  width: 55%;
}

.dialog.photographer_income_summary_report table {
  width: 97%;
}

/* PRODUCTION REPORT - IMAGES SOLD SUMMARY */
.dialog.photographer_summary_report {
  height: 70%;
}

.dialog.photographer_summary_report table {
  margin-left: 1px;
  width: 97%;
}

.dialog.photographer_summary_report tbody {
  border: solid 1px black;
}

.dialog.photographer_summary_report h2 {
  margin: 0;
}


.dialog.photographer_summary_report td {
  width: 25%;
  font-family: var(--fontFamilySemiLight);
  padding: 0.25em 1em;
}

.dialog.photographer_summary_report td:nth-child(1) {
  width: 50%;
  font-family: var(--fontFamilySemiBold);
}

.dialog.photographer_summary_report td.photographer_name {
  padding-top: 1.5em;
  text-align: center;
}

table.photographersummary_section {
  margin-bottom: 2rem;
}


.dialog.photographer_summary_report tr.column_headers td {
  font-family: var(--fontFamilyBold);
}

.dialog.photographer_summary_report h2.product_header,
.dialog.photographer_summary_report h2.photographer_header {
  text-align: center;
}

.dialog.photographer_summary_report p {
  margin: 1em 0;
  text-indent: 1em;
  font-family: var(--fontFamilySemiLight);
}


/* COLLAGE STYLES EDITOR DIALOG */
.collagestyleseditor {
  height: 750px;
}

.collagestyleseditor .--column {
  height: calc(100% - 8em);
}

.collagestyleseditor .--halfwidth {
  width: calc(50% - 1rem);
}

input.collagestyleseditor__propertiesfilter.--halfwidth {
  margin-left: 0.5rem;
}


.collagestyleseditor__styleslist {
  height: 94%;
  border: solid 1px rgba(255, 255, 255, 0.5);
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  overflow: auto;
}

input.collagestyleseditor__addcontrolsinput {
  width: 80%;
}

.collagestyleseditor__elementslist {
  height: 100%;
  border: solid 1px rgba(255, 255, 255, 0.5);
  border-radius: 3px;
  overflow: auto;
}

.collagestyleseditor .--header {
  width: 100%;
  height: 3em;
}

.collagestyleseditor .--indented {
  text-indent: 1.25em;
}

.collagestyleseditor .element_name {
  font-family: var(--fontFamilyBold);
}






/* ORDER ADD TRACKING NUMBERS */

.dialog.savetracking {
  width: 500px;
  height: 450px;
}

.savetracking_row {
  width: 100%;
  height: 2.5rem;
}

.savetracking_row.--halfwidth {
  width: 49%;
}

.savetracking_row.--left {
  margin-right: 0.5%;
}

.savetracking_row.--right {
  margin: 0;
}

.savetracking_row .add_tracking_number {
  float: right;
}

.savetracking_list {
  width: 100%;
  height: calc(100% - 13rem);
  margin-top: 0.5rem;
  border-radius: 3px;
}

.savetracking_row p {
  margin: 1rem 0;
}

.dialog.displaytracking {
  width: 600px;
  height: 650px;
}


.displaytracking_row {
  position: relative;
  float: left;
  width: calc(100% - 3em);
}

.displaytracking_row.--borderbottom {
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
}

.displaytracking_row.--borderbottom:last-child {
  border: none;
}

.displaytracking_row_header:first-child {
  margin-top: 1rem;
}

.displaytracking_row_header {
  width: 100%;
  float: left;
  margin-top: 2.5rem;
}

.displaytrackingrow_faultcontainer {
  margin: 0;
  margin-top: 1em;
  padding-bottom: 1em;
  width: calc(100% - 1em);
  background-color: rgba(255, 0, 0, 0.25);
  float: left;
}

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

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

div.summaryLine table td {
  text-align: left;
}

.userSummary-userline td.display_name {
  padding-left: 1rem;
}

#userSummaryRows div.summarylineheader>div {
  float: none;
  width: 17.5%;
  height: 100%;
  background: none;
  display: inline-block;
}

#userSummaryRows div.summarylineheader>div.button_container {
  width: 45%;
}

#userSummaryRows div.summaryLine div.rowheader td {
  width: 15%;
}

#userSummaryRows div.summarylineheader>div.sequenceID,
#userSummaryRows div.summaryLine div.rowheader td.sequenceID {
  width: 3rem;
}

#userSummaryRows div.summarylineheader>div:first-child {
  padding-left: 1em;
}

#userSummaryRows div.summaryLine div.rowheader td.button_container {
  width: calc(50% - 1rem);
  text-align: right;
}

#userSummaryRows div.summaryLine button {
  margin: 0;
  margin-left: -3px;
}

#userSummaryContainer [data-clickhandler="header.lists.sort"],
#userSummaryContainer button.delete_userlist {
  display: none;
}

#userSummaryContainer.searchbylist [data-clickhandler="header.lists.sort"],
#userSummaryContainer.searchbylist button.delete_userlist {
  display: inline;
}


#userSummaryRows div.summaryLine button.groupStart {
  margin-left: 1em;
}

#userSummaryRows div.summaryLine div.rowbody>table td.shipping {
  width: 35%;
}

#userSummaryRows div.summaryLine div.rowbody>table td.contact,
#userSummaryRows div.summaryLine div.rowbody>table td.order_history {
  width: 30%;
}

#userSummaryRows div.summaryLine div.rowbody>table thead td {
  text-align: center;
}

#userSummaryRows div.summaryLine div.rowbody>table tbody td {
  vertical-align: top;
}

#userSummaryRows div.summaryLine table {
  width: 100%;
}

#userSummaryRows div.summaryLine div.rowbody {
  padding: 1em;
}


#userSummaryRows div.summaryLine div.rowheader>table,
#userSummaryRows div.summaryLine div.rowbody>table {
  margin-bottom: 0.5em;
}

#collectionSummaryRows div.summaryLine:hover,
#collectionSummaryRows div.summaryLine div.rowheader:hover {
  cursor: default;
}

#collectionSummaryRows div.summaryLine td {
  width: 14%;
  padding-left: 1rem;
}

#collectionSummaryRows {
  --collectionNameWidth: 30%;
  --collectionIDWidth: 6%;
  --buttonContainerWidth: 50%;
}

#collectionSummaryRows div.summaryLine td.collection_id {
  width: var(--collectionIDWidth);
}

#collectionSummaryRows div.summaryLine td.collection_name {
  width: var(--collectionNameWidth);
}

#collectionSummaryRows div.summaryLine td.button_container {
  width: var(--buttonContainerWidth);
  text-align: right;
}

#collectionSummaryRows div.summaryLine button.set_active i.fa-dot-circle,
#collectionSummaryRows div.summaryLine.active_server_collection button.set_active i.fa-circle {
  display: none;
}

#collectionSummaryRows div.summaryLine.active_server_collection button.set_active i.fa-dot-circle,
#collectionSummaryRows div.summaryLine button.set_active i.fa-circle {
  display: inline-block;
}

@media (max-width: 1500px) {

  #collectionSummaryRows {
    --collectionNameWidth: 20%;
    --collectionIDWidth: 8%;
    --startDateWidth: 15%;
    --venueWidth: 13%;
    --buttonContainerWidth: 30%;
  }

  #collectionSummaryRows div.summaryLine td.collection_id {
    display: none;
  }

}

@media (max-width: 1650px) {

  #collectionSummaryRows div.summaryLine td.start_date {
    display: none;
  }

}

@media (max-width: 1900px) {

  #collectionSummaryRows div.summaryLine td.venue {
    display: none;
  }

}



.summaryLine button {
  margin: 0;
  margin-left: -3px;
}

.summaryLine button.margin_left {
  margin-left: .5em;
}


div.sideBar.addCollage table,
div.sideBar.editCollageSizes table,
div.sideBar.addElement table,
div.sideBar.editCollage table {
  width: 100%;
}

div.sideBar.addCollage fieldset,
div.sideBar.editCollageSizes fieldset,
div.sideBar.addElement fieldset,
div.sideBar.editCollage fieldset {
  padding: 1em;
}

div.sideBar.addCollage button,
div.sideBar.editCollageSizes button,
div.sideBar.addElement button,
div.sideBar.editCollage button {
  font-size: .9em;
}

div.sideBar.editPackage thead td,
div.sideBar.addCollage thead td,
div.sideBar.editCollage thead td {
  padding-bottom: 1em;
}

div.sideBar.addCollage td,
div.sideBar.editCollageSizes td,
div.sideBar.addElement td,
div.sideBar.editLook td,
div.sideBar.editCollage td {
  text-align: left;
  padding-left: 2em;
}

div.sideBar td.alignCenter {
  text-align: center;
}

div.sideBar td.productButton,
div.sideBar td.bookButton,
div.sideBar td.packageButton,
div.sideBar td.collageButton {
  text-align: right;
  padding-top: 1em;
  padding-right: 1.5%;
}

div.sideBar td.collageButton.fullWidth {
  padding-right: 1em;
}

div.sideBar.addCollage td.collageName,
div.sideBar.editCollage td.collageName {
  width: 100%;
}

div.sideBar.addCollage td.retouched,
div.sideBar.editCollage td.retouched {
  padding-top: .5em;
  padding-bottom: .5em;
}

div.sideBar.addCollage td.productList select,
div.sideBar.addCollage td.collageName input,
div.sideBar.addCollage td.collageImageCount input,
div.sideBar.addCollage td.collageTextCount input,
div.sideBar.editCollage td.productList select,
div.sideBar.editCollage input.resourceImageList,
div.sideBar.editCollage td.collageDescription textarea,
div.sideBar.editCollage td.collageSampleImage input,
div.sideBar.editCollage td.collageName input,
div.sideBar.editCollage td.productList input,
div.sideBar.addElement td select,
div.sideBar.addElement td.elementName input {
  width: 97%;
}

div.sideBar.addCollage td.collageImageCount input,
div.sideBar.addCollage td.collageTextCount input {
  width: 100%;

}

div.sideBar.addCollage td span.ui-spinner input {
  padding: 0 .25em;
}

div.sideBar.editCollageSizes td {
  width: 25%;
}

div.sideBar.editCollageSizes td.collageButton {
  padding-right: 2.5%;
}

div.sideBar.editCollageSizes td button {
  margin: 0;
}


div.sideBar.addCollage td input,
div.sideBar.editCollage td.collageImageCount input {
  margin: 0;
}

div.sideBar.addCollage td.collageImageCount,
div.sideBar.addCollage td.collageAspectRatio,
div.sideBar.editCollage td.language,
div.sideBar.editCollage td.mode,
div.sideBar.editCollage td.productList,
div.sideBar.editCollage td.defaultLook,
div.sideBar.editCollage td.displayName,
div.sideBar.editCollageSizes td.toPrice,
div.sideBar.editCollageSizes td.fromPrice,
div.sideBar.editCollageSizes td.toDesc,
div.sideBar.editCollageSizes td.fromDesc,
div.sideBar.editCollage td.collageImageCount,
div.sideBar.editCollage td.collageAspectRatio {
  width: 50%;
}

div.sideBar.editCollageSizes select.editPrice {
  float: right;
  width: 40%;
}

div.sideBar.editCollageSizes span.finishingType {
  display: inline-block;
  width: 33%;
}




div.sideBar.editCollageSizes form.editCollageSize tr.sizeRow td {
  padding-top: 1em;
}

div.sideBar.editCollageSizes form.editCollageSize tr.finishesRow td {
  padding-bottom: 1em;
  border-width: 1px;
  border-bottom-style: solid;
}

div.sideBar.userinfo div.content h2,
div.sideBar.userinfo div.content p {
  width: 90%;
  margin-left: 5%;
}

div.sideBar.userinfo div.content p {
  font-size: 1.25em;
}

div.sideBar.userinfo p.USMail {
  text-align: center;
  font-size: 1.5em;
}

div.sideBar.userinfo p.USMail input[type=checkbox] {
  margin-right: .5em;
}



















/* COLLAGE OPTIONS DIALOGS */
.dialog.collageOptions.borderwidth {
  width: 300px;
  min-width: 0;
}

.dialog.collageOptions.borderwidth div {
  margin-bottom: .25em;
}


.dialog.collageOptions.borderwidth span {
  display: inline-block;
}

.dialog.collageOptions.borderwidth span.label {
  width: 30%;
}

.dialog.collageOptions.borderwidth span.input {
  text-align: right;
  width: 68%
}

.dialog.collageOptions.borderwidth input[type="text"] {
  width: 100%;
}

.dialog.collageOptions.borderwidth div.applytoallimages,
.dialog.collageOptions.borderwidth div.applytoall {
  text-align: right;
  margin-bottom: .5em;
  margin-right: .5em;
}

.dialog.collageOptions.borderwidth div.applytoallimages span.input,
.dialog.collageOptions.borderwidth div.applytoall span.input {
  display: inline;
}

.dialog.collageOptions.borderwidth button.reset {

  float: right;
}

.dialog div.body span.icon {
  font-size: 1em;
}

.dialog.copy_collage_element {
  width: 350px;
}

.dialog.borderColor {
  height: 500px;
  width: 550px;
}

.dialog.borderColor .ui-colorpicker table {
  width: 95%;
}

.dialog .ui-colorpicker input[type="text"] {
  width: 79%;
}


.dialog.generate-gradient {
  height: 500px;
  width: 825px;
  max-width: none;
}

.dialog.generate-gradient div.generate-gradient-container {
  width: 100%;
  height: 100%;
}

.dialog.generate-gradient div.preview_container,
.dialog.generate-gradient div.controls {
  width: 100%;
  height: 48%;
}

.dialog.generate-gradient div.preview {
  width: 100%;
  height: 100%;
}

.dialog.generate-gradient div.left,
.dialog.generate-gradient div.right {
  float: left;
  height: 95%;
}

.dialog.generate-gradient div.left {
  width: calc(38% - 1em);
  margin-right: 1em;
}

.dialog.generate-gradient div.right {
  width: 58%;
}


.dialog.borderColor div.left,
.dialog.borderColor div.right {
  display: inline-block;
  width: 48%;
}


.dialog.borderColor div.controls {
  margin-bottom: 1em;
}


.dialog.borderColor input[type="text"] {
  width: 40%;
}

.dialog.borderColor {
  text-align: center;
}

.dialog.generate-gradient div.ui-dialog,
dialog.borderColor div.ui-dialog {
  margin-top: 10px;
}


#selectlist.selectcomponent {
  width: 350px;
}

#selectlist.copybookresource {
  width: 650px;
}


#selectlist.selectcomponent div.body span,
#selectlist.copybookresource div.body span {
  display: inline-block;
  width: 50%;
  overflow: hidden;
}

#selectlist.copybookresource span.cover_name {
  margin-left: 1em;
  width: 45%;
}




span.imageCrumb:hover {
  cursor: pointer;
}

div.sideBar .list {
  margin-top: 2%;
  height: 67%;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
}

div.imageResourceSelect div.imageResourceSelectRow,
div.sideBar .list div.lookRow {
  padding: .25em 0 .25em 1em;
  cursor: pointer;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

div.imageResourceSelect div.imageResourceSelectRow {
  text-align: center;
}

div.imageResourceSelect div.imageResourceSelectRow.imageList {
  text-align: left;
}

div.imageResourceSelect div.top div.list,
div.imageResourceSelect div.bottom div.list {
  border-radius: 2px;
}

div.imageResourceSelect div.imageResourceSelectRow:last-child,
div.sideBar .list div.lookRow:last-child {
  box-shadow: 0 4px 2px 0 rgba(0, 0, 0, .1);
}


div.backgroundBlur {
  filter: url(/resources/web/html/svgResources.svg#svgBlur6);
}

.thumbNail .body .cropTools {
  position: absolute;
  height: 1.75em;
  margin: .25em;
  border-style: solid;
  border-width: 1px;
  padding: 0 .5em .125em .5em;
  border-radius: 4px;
  font-size: .75em;
  z-index: 10;
}

.thumbNail .body .cropTools {
  width: 1.75em;
  height: auto;
  top: 2em;
  text-align: center;
  padding: 0;
}

.thumbNail .body .cropTools span.scale {
  font-family: var(--fontFamilySemiBold);
  font-size: .7em;
}



#collageEditor div.elementControls div.userInputText>.--staffvisible.--inline #collageEditor div.elementControls div.userInputText>.--staffvisible.--inline-block,
#collageEditor div.elementControls div.userInputText>.--staffvisible,
#collageEditor div.elementControls div.userInputText>.staffVisible.inline #collageEditor div.elementControls div.userInputText>.staffVisible.inline-block,
#collageEditor div.elementControls div.userInputText>.staffVisible {
  display: none;
}


.thumbNail .body .cropTools,
#collageEditor div.image div.tools.vertical,
#collageEditor div.image div.tools {
  position: absolute;
  height: 1.75em;
  margin: .25em;
  border-style: solid;
  border-width: 1px;
  padding: 0 .5em .125em .5em;
  border-radius: 4px;
  font-size: .75em;
  z-index: 10;
}

div.collage_tools {
  width: 250px;
  height: 400px;
}

.thumbNail .body .cropTools,
#collageEditor div.image div.tools.vertical {
  width: 1.75em;
  height: auto;
  top: 2em;
  text-align: center;
  padding: 0;
}

div.cropArea {
  border-style: dotted;
  border-width: 1px;
  z-index: 51;
  pointer-events: none;
}

i.fa.--staffvisible.--inline,
i.fa.--staffvisible.--inlineblock,
i.fa.--staffvisible.--inline,
i.fa.staffVisible.inline,
i.fa.staffVisible.inlineblock,
i.fa.staffVisible-inline {
  display: none;
}







/* ************************************************ */
/* ************************************************ */
/* COLLAGE NAVIGATION CONTROLS */
/* ************************************************ */
/* ************************************************ */
div.collage_navigation_controls {
  position: absolute;
}

div.collage_navigation_controls.visible span.hide_container {
  display: inline-block;
}

div.collage_navigation_controls span.hide_container,
div.collage_navigation_controls.visible span.show_container {
  display: none;
}

div.collage_navigation_controls div.visibility_controls span {
  position: absolute;
  font-size: 1.3em;
  right: -.5em;
  cursor: pointer;
}


div.collage_navigation_controls.vertical {
  left: 0;
  top: 7.5%;
  height: 90%;
  width: 250px;
  border-radius: 6px;
  border-style: solid;
  border-width: 1px;
  z-index: 100;
  transform: translateX(-235px);
}

div.collage_navigation_controls.vertical.visible {
  transform: none;
}

div.collage_navigation_controls.horizontal.visible {
  transform: none;
}


div.collage_navigation_controls.horizontal {
  bottom: 0;
  left: 5%;
  width: 75%;
  height: 175px;
  border-radius: 6px;
  border-style: solid;
  border-width: 1px;
  z-index: 100;
}


div.collage_navigation_controls div.collages {
  position: absolute;
  width: 100%;
  height: 95%;
  top: 2.5%;
  overflow: auto;
}

div.collage_navigation_controls div.controls {
  display: none;
}








/* ONLY SHOW THE ADD/DELETE LAYOUT CONTROLS IN BOOK_EDITOR MODE */
div.collage_navigation_controls.vertical.book_editor div.collages {
  height: 90%;

}

div.collage_navigation_controls.vertical.book_editor div.controls {
  position: absolute;
  bottom: 0;
  display: block;
  text-align: center;
  width: 100%;
  height: 5%;
}


div.collage_navigation_controls div.collages div.thumbnail {
  margin-top: 1em;
  width: 100%;
  height: 250px;
}

div.collage_navigation_controls div.collages div.thumbnail div.preview {
  position: relative;
  width: 95%;
  height: 95%;
}

div.collage_navigation_controls div.collagePreview {
  cursor: pointer;
}


div.collage_navigation_controls.horizontal div.collages div.thumbnail {
  margin: 0;
  height: 100%;
  width: 250px;
}

div.collage_navigation_controls div.thumbnail.package_item span.package_item {
  display: none;
}

div.collage_navigation_controls div.thumbnail.package_item span.package_item {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  height: 100%;
  width: 8px;
}


/* ************************************************ */
/* ************************************************ */
/* SELECT PACKAGE ADDITION ITEMS STYLES */
/* ************************************************ */
/* ************************************************ */
.dialog.package_selector_additional_items {
  max-height: none;
  max-width: none;
  width: 75%;
  height: 65%;
}

.dialog.package_selector_additional_items div.body {
  height: calc(95% - 3.5em);
  margin-top: .5em;
}

.dialog.package_selector_additional_items div.body>div {
  width: 100%;
  height: 100%;
}


.dialog.package_selector_additional_items p {
  font-size: 1em;
  text-align: center;
}

.dialog.package_selector_additional_items h3 {
  height: 2em;
  margin: .25em 0 0 0;
  text-align: center;
}


.dialog.package_selector_additional_items div.left,
.dialog.package_selector_additional_items div.right {
  margin-left: 1em;
  width: calc(50% - 2em);
  height: 85%;
  float: left;
}


.dialog.package_selector_additional_items div.list {
  height: calc(100% - 2.75em);
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  overflow: auto;
}

.dialog.package_selector_additional_items div.list div.simpleRow:first-child {
  border-radius: 4px 4px 0 0;
}

.dialog.package_selector_additional_items div.left div.simpleRow {
  padding-right: .5em;
}

.dialog.package_selector_additional_items div.right div.simpleListIcon span.row_icon,
.dialog.package_selector_additional_items div.right div.simpleListIcon span.text {
  float: none;
}


.dialog.package_selector_additional_items div.left div.simpleRow div.label {
  position: relative;
  float: left;
  width: 30%;
}

.dialog.package_selector_additional_items div.left div.simpleRow div.data {
  position: relative;
  width: 60%;
  margin-left: 35%;
  margin-bottom: .5em;
}

.dialog.package_selector_additional_items div.collage_icon {
  position: absolute;
  left: -195px;
  top: calc(50% - 375px);
  height: 250px;
  width: 250px;
}

.dialog.package_selector_additional_items div.collage_icon div.collagePreview {
  pointer-events: none;
  border-style: solid;
  border-width: 2px;
}


.dialog.package_selector_additional_items div.body {
  overflow: hidden;
}

.dialog.package_selector_additional_items div.simpleRow {
  float: left;
  width: 100%;
}

.dialog.package_selector_additional_items div.simpleRow.simpleListIcon span.row_icon img {
  height: auto;
  width: 100%;
}


.dialog.package_selector_additional_items div.simpleRow.simpleListIcon span.row_icon {
  width: 175px;
  overflow: hidden;
  float: left;
}

.dialog.package_selector_additional_items div.simpleRow.simpleListIcon span.text {
  float: left;
  margin-top: .45em;
  width: calc(100% - 175px);
  font-size: 1.5em;
  text-align: center;
}

.dialog.package_selector_additional_items {
  font-size: .8em;
}

div.simpleRow.simpleListIcon span.row_icon img {
  height: 90px;
  width: auto;
}

div.simpleRow span.item_name {
  display: inline-block;
  /* min-height: 1.4rem; */
  width: calc(100% - 1rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}













.dialog.shadow_editor div.left,
.dialog.shadow_editor div.right {
  float: left;
  width: 58%;
  overflow: hidden;
}

.dialog.shadow_editor div.left {
  width: 40%;
}

.dialog.shadow_editor td:only-child select,
.dialog.shadow_editor td:only-child input[type="text"] {
  width: auto;
}

.dialog.shadow_editor {
  width: 865px;
  max-width: none;
}

.dialog.shadow_editor div.buttons {
  height: 3em;
}

.dialog.shadow_editor span.label,
.dialog.shadow_editor span.input {
  display: inline-block;
  width: 45%;
}

.dialog.shadow_editor span.input.spinner {
  display: inline-block;
  width: 47%;
}

.dialog.shadow_editor span.input.color {
  width: 94%;
}

.dialog.shadow_editor span.label.full {
  width: 95%;
}

.dialog.shadow_editor span.label.margin_top {
  margin-top: 1em;
}

.dialog.shadow_editor span.label.full.centered {
  text-align: center;
}


/* ************************************************ */
/* ************************************************ */
/* PACKAGE SELECTIONCONTROLS */
/* ************************************************ */
/* ************************************************ */
.dialog.selectlist.package_selector {
  max-height: none;
  max-width: none;
  width: 70%;
  height: 85%;
}

.selectlist.package_selector div.body {
  overflow: hidden;
}

.selectlist.package_selector div.packageselector_packagelist {
  overflow: auto;
  height: 94%;
  border: solid 1px black;
  background-color: rgba(0, 0, 0, 0.3);
}

.selectlist.package_selector div.simpleRow {
  font-size: 1em;
}

.selectlist.package_selector input.package_filter {
  float: right;
  width: 25%;
}

.selectlist.package_selector select.package_group_filter {
  float: left;
  width: 25%;
}

.selectlist.package_selector div.packageselector_packagescontainer {
  width: calc(100% - 4rem);
  height: 100%;
  margin: 0 2rem;
}

.selectlist.package_selector div.packageselector_header {
  width: 100%;
  height: 2em;
}

.selectlist.package_selector div.packageselector_groupcontainer h2 {
  padding-left: .5em;
  font-family: var(--fontFamilyBold);
}

.selectlist.package_selector div.packageselector_packagelist {
  width: 100%;
}

.selectlist.package_selector div.package_name {
  font-size: 1.2em;
  font-family: var(--fontFamilyBold);
  width: 85%;
  display: inline-block;
  margin-top: .5em;
}

.selectlist.package_selector div.package_price {
  font-size: 1.2em;
  padding-right: .5em;
  width: calc(15% - 0.5em);
  text-align: right;
  display: inline-block;
  margin-top: .5em;
}

.dialog.selectlist.package_selector .simpleList {
  border: none;
}

.selectlist.package_selector div.packageselector_packagerow {
  padding-bottom: 1em;
  border-bottom: solid 1px rgba(83, 83, 83, 0.9);

}

.dialog.selectlist.package_selector input[type="text"] {
  width: 50%;
}

.selectlist.package_selector .short_description,
.selectlist.package_selector .long_description {
  font-family: var(--fontFamilySemiLight);
}










/* ************************************************ */
/* ************************************************ */
/* BOOK ADD PAGE LAYOUT CONTROLS */
/* ************************************************ */
/* ************************************************ */
div.dialog.addcollage,
.dialog.addlayout {
  max-height: none;
  max-width: none;
  width: 70%;
  height: 70%;
}

div.dialog.addcollage div.add_collage_row,
.dialog.addlayout div.add_page_row {
  height: 50%;
  width: calc(100% - 2em);
  margin-top: 1em;
  margin-left: 1em;
  float: left;
  padding-bottom: 1em;
  border-bottom-style: solid;
  border-bottom-width: 2px;
}

div.dialog.addcollage div.add_collage_row:last-child,
.dialog.addlayout div.add_page_row:last-child {
  border: none;
}

div.dialog.addcollage div.add_collage_row h1,
.dialog.addlayout div.add_page_row h1 {
  font-size: 1.75em;
  text-align: center;
  margin: 0;
}

div.dialog.addcollage div.simpleRow img,
.dialog.addlayout div.simpleRow img {
  height: 175px;
  width: auto;
  box-shadow: 0 0 3px rgba(0, 0, 0, .7);
}

div.dialog.addcollage div.simpleRow,
.dialog.addlayout div.simpleRow {
  float: left;
  padding: 2em;
  margin: .25em;
  border-radius: 3px;
}


.dialog.distribute_axis,
.dialog.alignment_side {
  width: 350px;
  min-width: 0;
}




/* ************************************************ */
/* ************************************************ */
/* SIMPLE LIST */
/* ************************************************ */
/* ************************************************ */
/* 
div.simpleList {
  overscroll-behavior: none;
} */

div.simpleRow.noSelect {
  cursor: default;
}

div.simpleRow {
  padding: 0.5rem 1rem;
  cursor: pointer;
  overflow: hidden;
  line-height: normal;
}

div.simpleRow {
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

div.simpleRow i {
  display: inline-block;
}

div.simpleRow i:hover {
  cursor: pointer;
}

div.simpleRow.center {
  text-align: center;
}

div.simpleRow.right {
  text-align: right;
}

div.simpleRow.simpleListIcon {
  min-height: 105px;
}

div.simpleRow.simpleListIcon span.text,
div.simpleRow.simpleListIcon span.row_icon {
  width: calc(100% - .9em);
  display: inline-block;
  text-align: center;
  font-size: .8em;
  margin: .45em;
}

div.simpleRow.simpleListIcon span.row_icon img {
  height: 90px;
  width: auto;
}

div.simpleRow.__withedit,
div.simpleRow.--withdelete {
  display: flex;
  align-items: center;
}

div.simpleRow.--withdelete.--withvisibility {
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  grid-column-gap: 0.33rem;
}

div.simpleRow.--withdelete.--withvisibility > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

div.simpleRow.simpleRow__withedit button.edit_item,
div.simpleRow.simpleRow__withedit button.edit_save,
div.simpleRow.simpleRow__withedit button.edit_cancel,
div.simpleRow.simpleRow__withdelete button.delete_item {
  float: right;
  display: flex;
}

div.simpleRow.simpleRow__withedit button.edit_item i,
div.simpleRow.simpleRow__withedit button.edit_save i,
div.simpleRow.simpleRow__withedit button.edit_cancel i,
div.simpleRow.simpleRow__withdelete button.delete_item i {
  margin: 0;
  padding: 0;
  position: relative;
}

.simpleRow button.smaller.warning {
  display: inline;
  vertical-align: top;
}

div.simpleRow.simpleRow__withdelete.simpleRow__withedit span.item_name {
  width: calc(100% - 3rem);
}

div.simpleRow.simpleRow__withedit button.editsave,
div.simpleRow.simpleRow__withedit button.editcancel {
  display: none;
}

div.simpleRow.simpleRow__withedit.--editing button.edit_item,
div.simpleRow.simpleRow__withedit.--editing button.delete_item {
  display: none;
}

div.simpleRow.simpleRow__withedit.--editing button.edit_save,
div.simpleRow.simpleRow__withedit.--editing button.edit_cancel {
  display: flex;
}



/* ************************************************ */
/* ************************************************ */
/* REQUEST SUMMARY */
/* ************************************************ */
/* ************************************************ */

#requestSummaryContainer.paymentSummary,
#requestSummaryContainer.assignmentSummary {
  left: 0;
}


#requestSummaryContainer div.body {
  font-size: 1em;
}

#requestSummaryContainer div.body div.left {
  position: absolute;
  left: 0;
  top: 0;
  width: 20%;
  height: 100%;
  overflow: hidden;
}

#requestSummaryContainer .filterBar {

  position: absolute;
  left: 0;
  top: 0;
  height: 7.5%;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;

  border-radius: 4px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;

}

#requestSummaryContainer .left .requestList {
  position: absolute;
  left: 0;
  top: 7.5%;
  width: 100%;
  height: 92.5%;
  overflow-y: scroll;
  margin: 0;
  padding: 0;
}

#requestSummaryContainer .left button.athlete {
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}


#requestSummaryContainer .right button.schedule {
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}

#requestSummaryContainer .filterBar span button {
  margin-top: .5em;
  margin-left: -0.35em;
}

#requestSummaryContainer div.right {
  position: absolute;

  left: 20%;
  top: 0;
  width: 80%;
  height: 100%;
  overflow-y: scroll;
  box-shadow: inset 3px 4px 4px rgba(0, 0, 0, .5);
}


.matchSearch,
#conflictingRequests.assignedSearch,
.requestAssignmentSummaryLine.assignedSearch,
.requestAssignmentSummaryLine.simpleSearch {
  display: none;
}

.requestAssignmentSummaryLine.simpleSearchFade {
  opacity: .25;
}

.requestAssignmentSummaryLine .rowbody table {
  margin: 1rem 0;
}

.requestAssignmentSummaryLine .rowheader {
  padding-left: 0.5rem;
  padding-bottom: 0.5rem;
}

.scheduleRowContainer .requestAssignmentSummaryLine .rowheader {
  padding-left: 0.5rem;
  padding-bottom: 0.25rem;
}

.photographerFade {
  opacity: .1;
}

#requestSummaryContainer .footer {
  text-align: right;
}

#requestSummaryContainer .footer p {
  padding: 0;
  margin: 0 .5em 0 0;
}

#requestPaymentSummaryFooter {
  float: right;
  margin-right: 1em;
}

table.imageStoreAssignments {
  width: 100%;
}

.sideBar td.lineheader {
  font-family: var(--fontFamilySemiBold);
}


div.orderSummaryLegend,
div.paymentSummaryLegend {
  position: absolute;
  width: 55%;
  left: 22.5%;
  height: 100%;
  text-align: center;
  font-size: 1em;
}

div.orderSummaryLegend {
  position: relative;
  height: 1.5em;
}

div.legend {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 1%;
  cursor: pointer;
}

.scheduleRowContainer {
  float: left;
  width: 100%;
}


.photographerSchedule {
  width: 24%;
  float: left;
  overflow: hidden;
  margin: .25em;
  margin-top: .5em;
  margin-bottom: .5em;

  border-style: solid;
  border-width: 1px;
  border-radius: 4px;

  box-shadow: 0 0 4px rgba(0, 0, 0, .3);

}

.photographerSchedule .photographerName {

  display: block;
  width: 100%;
  cursor: pointer;
  margin: 0;
  padding: 0.25em 0;
  text-align: center;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .4);
}

.photographerSchedule .currentLocation,
.photographerSchedule .name {
  display: inline-block;
  font-family: var(--fontFamilySemiBold);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
  margin-left: 0.25em;
}

.photographerSchedule .photographerName button {
  float: right;
  margin: 0;
}

.photographerSchedule .photographerName button:first-of-type {
  margin-right: 1em;
}

.schedulePlaceHolder {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  margin-top: .25em;
  margin-bottom: .25em;
  font-size: .8em;
}

.--matchend {
  margin-bottom: .5em;
}


.photographerSchedule-print {
  position: relative;
  width: 100%;
  height: 100%;
}

.photographerSchedule:last-child {
  border: none;
}

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

.right .requestAssignmentSummaryLine .rowheader {
  position: relative;
  overflow: hidden;
}

.right .requestAssignmentSummaryLine .rowheader tr:nth-child(2) td {
  padding-top: .25em;
}


.requestAssignmentSummaryLine .rowbody {
  height: 0;
  overflow: hidden;
}

.requestAssignmentSummaryLine.open .rowbody {
  overflow-y: auto;
}


.requestAssignmentSummaryLine.open .rowbody {
  padding-top: 1em;
  height: 19em;
}

.requestAssignmentSummaryLine .rowheader span.schedule span {
  margin-right: .3em;
}

.requestAssignmentSummaryLine td {
  vertical-align: text-top;
}

.requestPaymentSummaryLine .rowbody,
.requestAssignmentSummaryLine .rowbody,
.photographerSchedule .rowbody {
  font-size: 1em;
}

.requestPaymentSummaryLine .rowbody td {
  padding: 0.5em;
}

.requestPaymentSummaryLine table,
.requestAssignmentSummaryLine table,
.photographerSchedule table {
  width: 100%;
}

.requestPaymentSummaryLine .rowbody tr:last-child,
.requestAssignmentSummaryLine .rowbody tr:last-child,
.photographerSchedule .rowbody tr:last-child {
  border: none;
}

.requestPaymentSummaryLine td,
.requestAssignmentSummaryLine td,
.photographerSchedule td {
  text-align: left;
  padding-left: 0.5em;
  padding-top: 0;
  padding-bottom: 0;
  width: 20%;
  font-size: 1em;
  border-collapse: collapse;
}

.requestPaymentSummaryLine.unpaid td {
  padding-top: 0.5em;
}

.requestPaymentSummaryLine .schedulerow td.dayWave {
  width: 20%
}

.requestPaymentSummaryLine .schedulerow td.schedule {
  width: 30%
}

.requestPaymentSummaryLine .schedulerow td.fulfillmentnotes {
  width: 50%
}

.requestAssignmentSummaryLine td {
  width: 50%;
}

.requestAssignmentSummaryLine td.needswants {
  padding-top: 0.5em;
}

.requestAssignmentSummaryLine .needswants_tag,
.requestAssignmentSummaryLine .status_tag,
.requestPaymentSummaryLine .needswants_tag,
.requestPaymentSummaryLine .status_tag {
  display: inline-block;
  margin: 0.25em;
  padding: 0.25em 0.5em;
}



.photographerSchedule td.alignRight {
  text-align: right;
}

.right .requestAssignmentSummaryLine .rowheader td:nth-child(1) {
  width: 15%;
}

.right .requestAssignmentSummaryLine .rowheader td:nth-child(2) {
  width: 50%;
}

.right .requestAssignmentSummaryLine span.athlete {
  white-space: nowrap;
  text-overflow: ellipsis;
}


.right .requestAssignmentSummaryLine .rowheader td:nth-child(3) {
  width: 35%;
}


div.requestAssignmentSummaryLine div.rowheader td:last-child {
  padding-right: 0.5em;
}

.requestPaymentSummaryLine td {
  padding-top: 0.5em;
}

.requestPaymentSummaryLine tr:last-child td,
.requestAssignmentSummaryLine tr:last-child td,
.photographerSchedule tr:last-child td {
  padding-bottom: .5em;
}

.requestAssignmentSummaryLine td.left {
  width: 30%;
}

.requestAssignmentSummaryLine td.right {
  width: 70%;
}

.requestAssignmentSummaryLine .requestnotes.rowlabel td,
.requestAssignmentSummaryLine .staffnotes.rowlabel td {
  border-top: solid 1px rgba(255, 255, 255, 0.35);
  padding-top: 0.5em;
}

.requestAssignmentSummaryLine .rowbody td {
  padding-top: 0.25em;
  padding-bottom: 0.25em;
}

.requestPaymentSummaryLine tr.scheduleHeader {
  font-size: 1.2em;
}

.requestPaymentSummaryLine td.scheduleLabel {
  text-align: center;
}

.requestPaymentSummaryLine .rowheader td.contact {
  width: 12%;
}

.requestPaymentSummaryLine .rowheader td.subject {
  width: 17.33%;
}

.requestPaymentSummaryLine .rowheader td.requesttype {
  width: 32%;
}

.requestPaymentSummaryLine .rowheader td.payment {
  width: 2%;
}

.requestPaymentSummaryLine .rowheader td.actionReportButtons {
  width: 35.33%;
}

.requestPaymentSummaryLine.simpleSearch,
.requestPaymentSummaryLine.statusFilter,
.requestPaymentSummaryLine.actionableReport,
.requestPaymentSummaryLine button.print {
  display: none;
}


div.requestPaymentSummaryLine div.rowbody {
  font-size: 1.1em;
}

div.requestPaymentSummaryLine div.rowbody .buttonRow {
  font-size: 1em;
}


.requestPaymentSummaryLine.paid button.print {
  display: inline-block;
}

.requestPaymentSummaryLine .actionReportButtons button,
.requestPaymentSummaryLine.paid.cancelled .actionReportButtons button {
  display: none;
}


.requestPaymentSummaryLine.paid .actionReportButtons button {
  padding: 0.25rem;
  display: inline;
  margin: 0;
}


.requestPaymentSummaryLine td button,
.requestAssignmentSummaryLine td button,
.photographerSchedule td button {
  float: right;
  margin: 0;
  margin-top: .5em;
  margin-bottom: .5em;
}

.requestPaymentSummaryLine td button:nth-child(1),
.requestAssignmentSummaryLine td button:nth-child(1),
.photographerSchedule td button:nth-child(1) {
  margin-right: 1em;
}

.requestDataConflict {
  width: 100%;
  margin: 0;
  padding: 0;
}

.requestDataConflict h1, .requestDataConflict p {
  padding-left: .5em;
}

.requestDataConflict h1 {
  font-size: 1.2em;
  margin-bottom: 0;
  padding-bottom: 0;
}

.requestDataConflict p {
  font-size: .9em;
  margin: 0;
  margin-bottom: 1em;
}


/*  */
div.dialog.requestAssignToAllConfirmation {
  height: 400px;
}


.requestAssignmentSummaryLine .fulfilled,
.requestAssignmentSummaryLine .dateConflict,
.requestAssignmentSummaryLine .asterisk,
.requestAssignmentSummaryLine .reshoot,
.requestAssignmentSummaryLine .checked,
.requestAssignmentSummaryLine .time,
.requestAssignmentSummaryLine .heart,
.requestAssignmentSummaryLine .individual,
.requestAssignmentSummaryLine .team,
.requestAssignmentSummaryLine .photographed,
.requestAssignmentSummaryLine .hasnotes,
.requestAssignmentSummaryLine .pickup,
.requestAssignmentSummaryLine .alert {
  display: none;
  font-size: 1em;
  float: right;
  margin-right: .25em;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, .3);
}

.requestAssignmentSummaryLine.fulfilled .fulfilled,
.requestAssignmentSummaryLine.dateConflict .dateConflict,
.requestAssignmentSummaryLine.alert .alert,
.requestAssignmentSummaryLine.asterisk .asterisk,
.requestAssignmentSummaryLine.reshoot .reshoot,
.requestAssignmentSummaryLine.specificTime .time,
.requestAssignmentSummaryLine.photographed .photographed,
.requestAssignmentSummaryLine.preferredSchedule .heart,
.requestAssignmentSummaryLine.photographedreadyforpickup .pickup,
.requestAssignmentSummaryLine.hasnotes .hasnotes,
.requestAssignmentSummaryLine.requestFullIndividual .individual,
.requestAssignmentSummaryLine.requestFullTeam .team {
  padding: 0.25em;
  display: inline-block;
}

.requestAssignmentSummaryLine.highPriority .highPriority {
  text-align: center;
  display: block;
}

.requestAssignmentSummaryLine .matchInfo,
.requestAssignmentSummaryLine .highPriority {
  font-family: var(--fontFamilySemiBold);
  display: none;
  width: 100%;
}

.assignmentSummary .right .matchInfo {
  display: block;
}

.requestAssignmentHelper span.playsspecificset,
.requestAssignmentHelper span.conflictWarning,
.requestAssignmentHelper span.alreadyPhotographed,
.requestAssignmentHelper span.multipleRequests,
.requestAssignmentHelper span.reshoot,
.requestAssignmentHelper span.requestFullIndividual,
.requestAssignmentHelper span.requestFullTeam,
.requestAssignmentHelper span.sameCourt,
.requestAssignmentHelper span.notPreferredDayWave {
  display: none;
}

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

.requestAssignmentHelper.playsspecificset span.playsspecificset,
.requestAssignmentHelper.conflictWarning span.conflictWarning,
.requestAssignmentHelper.photographedWarning span.alreadyPhotographed,
.requestAssignmentHelper.notPreferredDayWaveWarning span.notPreferredDayWave,
.requestAssignmentHelper.reshootWarning span.reshoot,
.requestAssignmentHelper.requestFullIndividual span.requestFullIndividual,
.requestAssignmentHelper.requestFullTeam span.requestFullTeam,
.requestAssignmentHelper.sameCourt span.sameCourt,
.requestAssignmentHelper.multipleRequestsWarning span.multipleRequests {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 1em;
  /*border-bottom: solid 1px white;*/
  padding-bottom: 0.25em;
  margin-bottom: 0.5em;
}


div.dialog.requestTags {
  width: 850px;
  height: 500px;
}

div.dialog.requestTags div.top {
  float: left;
  width: 100%;
  height: 13%;
  text-align: center;
}

div.dialog.requestTags div.left {
  float: left;
  width: 48%;
  height: 80%;
}

div.dialog.requestTags div.needswants_tags {
  height: 76%;
  overflow: auto;
}

div.dialog.requestTags div.right {
  float: right;
  width: 48%;
  height: 84%;
}

div.dialog.requestTags div.needswants_tags,
div.dialog.requestTags div.observation_tags,
div.dialog.requestTags select.dayWave {
  box-sizing: border-box;
  width: 90%;
  margin-left: 5%;
}

div.dialog.requestTags h4 {
  margin-left: 5%;
}

div.dialog.requestTags div.observation_tags {
  height: 63%;
  overflow: auto;
  margin-top: 1em;
}

div.dialog.requestTags p.request_info {
  text-align: center;
}







/* **********************************************************
	COURT MAP STYLES
************************************************************** */

#requestSummaryContainer.courtMap div.header {
  height: 7em;
}

#requestSummaryContainer.courtMap div.body {
  top: 7em;
  height: calc(100% - 10.5em);
}

#courtMapEditor div.header {
  height: 3em;
}

.mapMarker {
  height: 1em;
  padding: 0;
  margin: -.95em 0 0 -.25em;
}

.mapMarker span {
  margin: 0;
}

.mapMarker i {
  margin: 0;
  padding: 0;
}

div.courtMap>div.header {
  height: 2em;
}

div.courtMap>div.body {
  top: 3em;
  height: calc(100% - 6em);
}

.courtMap .space {
  position: absolute;
  overflow: hidden;
}

.courtMap span.selectionmanager_hidden {
  display: none;
}

.courtMap .space.--crosshairsOnHover:hover {
  cursor: crosshair;
}

.courtMap .middleContent select {
  width: 45%;
}

.courtMap .space .court_container {
  position: relative;
  border-style: solid;
  border-width: 1px;
  width: 100%;
  height: calc(100% - 2.75em);
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.dropMenuItem.requiresCopyActive {
  display: none;
}

.--copyActive .dropMenuItem.requiresCopyActive {
  display: block;
}


.courtMap .space h1 {
  margin: 0;
  padding: 0;
  position: relative;
  text-align: center;
}

.courtMap .space .tools {
  position: absolute;
  right: 1em;
  top: 0.5em;
}

.courtMap .footer button {
  margin-top: 1em;
}


.courtMap.edit_configuration .space.has_background.background_hidden .tool.backgroundimageshow,
.courtMap.edit_configuration .space .tool.requires_configuration,
.courtMap .space.has_background .tool.backgroundimagehide,
.courtMap .court.specific_time .tool.specific_time,
.courtMap .court.assigned_before .tool.match_time,
.courtMap .court.assigned_after .tool.match_time,
.courtMap .court.linked .tool.linked,
.courtMap .space .tool {
  display: inline-block;
}

.courtMap .court.assigned_requests .tool.match_time,
.courtMap .court.assigned_before .tool.match_time,
.courtMap .court.assigned_after .tool.match_time {
  display: inline-block;
  font-size: 0.7em;
  text-align: center;
  width: 100%;
}


.courtMap .space.has_background.background_hidden .tool.backgroundimagehide,
.courtMap .space.has_background .tool.backgroundimageshow,
.courtMap .space .court .tools .unassigned_requests,
.courtMap .space .tool.requires_configuration,
.courtMap .space .tool.backgroundimageshow,
.courtMap .space .tool.backgroundimagehide,
.courtMap .requires_configuration {
  display: none;
}

.courtMap .space .tools .deletespaces {
  margin-right: 1em;
}

.courtMap .space .tool:hover {
  cursor: pointer;
}

.courtMap .space h1:hover,
.courtMap .court.ui-draggable:hover {
  cursor: move;
}

#displaySchedules .courtMap .court,
#displaySchedules .courtMap .space h1:hover {
  cursor: default;
}

.courtMap .court {

  font-family: var(--fontFamilyBold);
  position: absolute;
  text-align: center;
  margin: 0;
  padding: 0;

  border-style: solid;
  border-width: 1px;

  overflow: hidden;
  z-index: 1;

}

.courtMap .court .unassigned_overlay {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

.courtMap .space .court .tools {
  position: absolute;
  display: block;
  width: 100%;
  bottom: 0;
  left: 0;
  right: auto;
  top: auto;
}

.courtMap .court .tool {
  display: none;
  font-size: 0.8em;
  padding: 0;
  margin: 0;
}

.courtMap .space .court.unassigned_requests .unassigned_overlay {
  pointer-events: none;
  z-index: 0;
  display: block;
}

.courtMap.edit_schedule .space.has_background.background_hidden .court.assigned_before:hover,
.courtMap.edit_schedule .space.has_background.background_hidden .court.assigned_after:hover,
.courtMap.edit_schedule .space.has_background.background_hidden .court.unassigned_requests,
.courtMap.edit_schedule .space.has_background.background_hidden .court.assigned_requests,
.courtMap.edit_schedule .middleContent.photographer_filter_filtered .photographer.active,
.courtMap.edit_schedule .space.has_background.background_hidden .court.assigned_requests,
.courtMap.edit_schedule .space.has_background.background_hidden .court.highlighted,
.courtMap.edit_schedule .space.has_background.background_hidden .court:hover,
.courtMap.edit_schedule .space .court.unassigned_requests p,
.courtMap.edit_schedule .court.unassigned_requests,
.courtMap.edit_schedule .court:hover p.court_name,
.courtMap.edit_schedule .court.assigned_requests,
.courtMap.edit_configuration .court p.court_name,
.courtMap .court.placeholder {
  opacity: 1;
}

.courtMap .court.placeholder {
  opacity: 1 !important;
}

.courtMap.edit_schedule .space.has_background.background_hidden .court.assigned_before,
.courtMap.edit_schedule .space.has_background.background_hidden .court.assigned_after {
  opacity: .5;
}

.courtMap .court p.court_name {
  opacity: 0.5;
}

.courtMap .middleContent.photographer_filter_filtered .photographer {
  opacity: 0.4;
}

.courtMap.edit_schedule .space.has_background.background_hidden .court {
  opacity: 0.1;
}

.courtMap .court p {
  position: relative;
  z-index: 10;
  font-size: 1.3em;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  pointer-events: none;
}

.courtMap .space.--fontSmall .court p {
  font-size: 0.8em;
}

.courtMap .court.horizontal p {
  margin-top: -0.15em;
}

.courtMap .middleContent.photographer_filter span,
.courtMap.edit_configuration .requires_configuration {
  display: inline-block;
}

.courtMap .middleContent.photographer_filter>div {
  display: inline-block;
  margin-left: 1em;
}

.courtMap .space.medium .court p {
  font-size: 0.7em;
}

.courtMap .space.small .court p {
  font-size: 0.7em;
}

.courtMap .middleContent.photographer_filter .photographer {
  font-size: 0.9em;
}

.colorCode {
  margin: 0;
  padding: 0;
  display: inline-block;
  position: relative;
  width: 1em;
  height: 1em;
  border-width: 1px;
  border-style: solid;
  top: 0.125em;

}










div.sideBar div.content.assignmentSummary div.options fieldset {
  margin: 0;
  padding: 0;
}

div.sideBar div.content.assignmentSummary div.options span.alignCenter {
  display: block;
  width: 100%;
}

div.summaryRows,
#actionableReport,
#paymentSummaryRows {
  position: absolute;
  left: 1rem;
  width: calc( 100% - 2rem );
  padding: 2rem 0;
}

div.summaryRows,
#paymentSummaryRows {
  margin-top: 0;
}

div.summaryRows>div.title,
#actionableReport>div.title,
#paymentSummaryRows>div.title {
  text-align: center;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

div.summaryRows div.summaryLine div.rowheader {
  cursor: pointer;
}

div.summaryRows div.summaryLine div.rowbody {
  cursor: auto;
}

div.summaryRows h1 span.print,
#orderSummaryRows h1 span.print,
#paymentSummaryRows h1 span.print,
#actionableReport h1 span.print {
  display: block;
  float: right;
  cursor: pointer;
  margin-right: 1rem;
}

div.summaryRows h1 span.print {
  display: none;
}

#actionableReport>div>div.rowheader {
  padding: 1em;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5)
}

#actionableReport>div.title h1,
#actionableReport>div.title p {
  margin: 0;
  padding: 0;
}

div.summaryRows>div.title p,
#orderSummaryRows>div.title p,
#actionableReport>div.title p,
#paymentSummaryRows>div.title p {
  font-size: .8em;
  margin-bottom: 1em;
}

div.summaryRows>div.title h1,
#orderSummaryRows>div.title h1,
#actionableReport>div.title h1,
#paymentSummaryRows>div.title h1 {
  font-size: 1.5em;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .4);
  text-align: center;
}

#actionableReport>div>div.rowbody {
  padding-top: 2em;
  padding-bottom: 2em;
  box-shadow: 0 0 12px rgba(0, 0, 0, .7);
}

.production_search_filter,
.type_filter,
.status_filter,
.simple_search_filter,
.summaryLine.simple_search_filter,
.orderSummary-orderline button.set_total,
.orderSummary-orderline.cancelled button.add_payments,
.orderSummary-orderline button.uncancel,
.orderSummary-orderline.cancelled button.cancel,
.orderSummary-orderline.paid button.add_payments {
  display: none;
}

.orderSummary-orderline.unpaid button.set_total,
.orderSummary-orderline.cancelled button.uncancel {
  display: inline-block;
}





/* ************************************************ */
/* ************************************************ */
/* REQUEST INVOICE STYLES  */
/* PRINT STYLES IN PRINT.CSS */
/* ************************************************ */
/* ************************************************ */


#requestInvoice {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0%;
  top: 0%;
  border-style: solid;
  border-width: 1px;
  cursor: pointer;
}

#requestInvoice .header img.printLogo {
  width: 150px;
  height: auto;
  margin-left: 3em;
}

#requestInvoice div.header,
#requestInvoice div.body,
#requestInvoice div.footer {
  position: absolute;
  width: 100%;
  left: 0;
}

#requestInvoice div.header {
  height: 15%;
  top: 0;
  overflow: hidden;
}

#requestInvoice div.documentIdentifier {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 5%;
  text-align: center;
  font-size: .7em;
  padding-right: 2em;
}

#requestInvoice div.header div.left, #requestInvoice div.header div.right {
  position: absolute;
  height: 95%;
  top: 5%;
}

#requestInvoice div.header div.left {
  width: 25%;
  left: 0%;
}

#requestInvoice div.header div.right {
  width: 75%;
  left: 25%;
  text-align: right;
}

#requestInvoice div.header div.right h1, #requestInvoice div.studioAddress {
  margin-right: 5%;
}

#requestInvoice div.header div.right h1 {
  font-size: 1.5em;
  margin-bottom: 0;
}

#requestInvoice div.studioAddress {
  font-size: .8em;
}

#requestInvoice div.studioAddress p {
  margin: 0;
}

#requestInvoice div.body {
  font-size: .8em;
  top: 20%;
}

#requestInvoice div.body table {
  border-style: solid;
  border-width: 1px;
  width: 75%;
  margin-left: 12.5%;
  text-align: left;
}

#requestInvoice div.body table p {
  margin: 0 0 1em 0;
}

#requestInvoice div.body tr.divider {
  border-top-style: solid;
  border-top-width: 1px;
  margin-top: 2em;
}

#requestInvoice div.body td {
  text-align: left;
  padding: .25em;
  vertical-align: text-top;
}

#requestInvoice div.body td.label {
  font-family: var(--fontFamilySemiBold);
  text-align: right;
  width: 35%;
  padding-right: 2em;
}

#requestInvoice div.body td.paymentsTable {
  text-align: center;
  font-size: .8em;
}

#requestInvoice div.body td.reminder, #requestInvoice div.body td.header {
  font-family: var(--fontFamilySemiBold);
  text-align: center;
}

#requestInvoice div.body td.reminder {
  font-size: 1.5em;
}

#requestInvoice div.body td.underlined {
  border-bottom: solid 1px black;
}

#requestInvoice span.label {
  font-family: var(--fontFamilySemiBold);
}

#requestInvoice div.footer {
  height: 5%;
  bottom: 0;
  text-align: center;
  font-size: .9em;
}






/* ************************************************ */
/* ************************************************ */
/* REQUEST SCHEDULE STYLES  */
/* PRINT STYLES IN PRINT.CSS */
/* ************************************************ */
/* ************************************************ */

.raspl__container__close_icon {
  position: absolute;
  right: 15px;
  top: 0;
  font-size: 4em;
}

.raspl__container__close_icon:hover {
  cursor: pointer;
}

#raspl__container {
  position: absolute;
  font-size: .7em;
  font-family: arial, sans-serif;
  overflow: auto;
  width: 8.5in;
  height: 100%;
  margin-left: calc((100% - 8.5in) / 2);
  cursor: pointer;
  background-color: white;
  color: black;
  border: solid 1px black;
}

#raspl__container div.header,
#raspl__container div.footer {
  font-size: 1.5em;
  font-family: var(--fontFamilySemiBold);
  text-align: center;
  margin-bottom: 0.5em;
}

#raspl__container div.footer {
  margin-top: 2em;
  font-size: 1.2em;
}







.raspl__empty {
  width: 100%;
  background-color: rgba(128, 128, 128, 0.2);
  text-align: center;
  font-family: var(--fontFamilySemiBold);
  border-bottom: solid 1px black;
}

.raspl__match {
  border-bottom: solid 1px black;
}

.raspl__match .header,
.raspl__match .body {
  width: 100%;
}

.raspl__header {
  padding: 0.25em 0;
  background-color: rgba(128, 128, 128, 0.5);
  border-bottom: solid 1px black;
}


.raspl__match .header_field {
  font-family: var(--fontFamilySemiBold);
  font-size: 1.1em;
}

.raspl__match .header_field.assigned {
  opacity: 0.7;
  font-weight: normal;
}

.raspl__match .header_field.assigned .assigned,
.raspl__body__row .request_id .mid_segment,
.raspl__match .header_field .match_assigned {
  font-family: var(--fontFamilySemiBold);
}


.raspl__match .header_field.assigned .assigned {
  text-decoration: underline;
  opacity: 1;
}


.raspl__header .header_field,
.raspl__body__row .label,
.raspl__body__row .row_field {
  display: inline-block;
}



.raspl__header .header_field {
  width: 38%;
}

.raspl__header .header_field.subject {
  width: 33%;
}

.raspl__header .header_field.court {
  padding-left: 1em;
  width: 9%;
}

.raspl__header .header_field.schedule {
  width: 17%;
  font-weight: normal;
}

.raspl__body__row {
  width: 90%;
  margin: 0.5em 0;
  margin-top: 0;
  margin-left: 5%;
}

.raspl__body__row .--indent {
  margin-left: 4%;
}

.raspl__body__row:first-child {
  margin-top: 0.5em;
}

.raspl__body__row .row:last-child {
  border-bottom: solid 1px rgba(64, 64, 64, 1);
}

.raspl__body__row:last-child .row {
  border: none;
}


.raspl__body__row .request_id {
  width: 25%;
  text-align: right;
}

.raspl__body__row .play_amount {
  width: 78%;
}

.raspl__body__row .positions_played {
  width: 73%;
}


.raspl__body__row.--entire_team .row_field.athlete,
.raspl__body__row .row_field.entire_team {
  display: none;
}

.raspl__body__row.--entire_team .row_field.entire_team {
  display: inline-block;
}

.raspl__body__row .assigned,
.raspl__body__row .entire_team,
.raspl__body__row .athlete,
.raspl__body__row .positions_played_string,
.raspl__body__row .play_amount_string {
  font-family: var(--fontFamilySemiBold);
}

.raspl__body__row .positions_played,
.raspl__body__row .play_amount {
  color: rgba(0, 0, 0, 0.8);
}

.raspl__body__row .statustags .label,
.raspl__body__row .additional_athletes .label,
.raspl__body__row .notes .label,
.raspl__body__row .staff_notes .label {
  vertical-align: top;
  width: 15%;
}

.raspl__body__row .play_amount .label,
.raspl__body__row .positions_played .label {
  vertical-align: top;
  width: 20.5%;
}

.raspl__body__row .play_amount .label {
  width: 19%;
}

.raspl__body__row .entire_team,
.raspl__body__row .athlete {
  width: 25%;
}

.raspl__body__row .type {
  width: 73%;
  text-align: right;
}

.raspl__body__row .statustags,
.raspl__body__row .additional_athletes,
.raspl__body__row .notes,
.raspl__body__row .staff_notes {
  display: block;
}

.raspl__body__row .statustags_string,
.raspl__body__row .additional_athletes_string,
.raspl__body__row .notes_string,
.raspl__body__row .staff_notes_string {
  width: 75%;
  display: inline-block;
}

.raspl__body__row .request_id .first_segment,
.raspl__body__row .request_id .end_segment {
  color: rgba(0, 0, 0, 0.75);
}

.raspl__body__row.--photographed {
  opacity: 0.5;
}

.raspl__body__row .request_status {
  display: none;
}

.raspl__body__row.--reshoot .request_status {
  display: inline-block;
}

.raspl__body__row .row_field.highpriority,
.raspl__body__row .request_status,
.raspl__body__row .statustags_string {
  font-family: var(--fontFamilyBold);
}

.raspl__body__row .row_field.highpriority,
.raspl__body__row .request_status {
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
  color: white;
  width: 20%;
  text-align: center;
}

.raspl__body__row .row_field.highpriority {
  display: none;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
}

.raspl__body__row.--highpriority .highpriority {
  display: inline-block;
}


.raspl__body__row.--photographed .positions_played .label,
.raspl__body__row.--photographed .positions_played_string,
.raspl__body__row.--photographed .play_amount .label,
.raspl__body__row.--photographed .play_string,
.raspl__body__row.--photographed .athlete,
.raspl__body__row.--photographed .type {
  text-decoration: line-through;
}

.raspl__body__row.--reshoot.--highpriority .play_amount {
  width: 58%;
}







/* ************************************************ */
/* ************************************************ */
/* REQUEST PRINT LIST STYLES  */
/* PRINT STYLES IN PRINT.CSS */
/* ************************************************ */
/* ************************************************ */

#requestListPrint {

  font-size: .8em;
  font-family: arial, sans-serif;
  overflow: visible;
  width: 100%;
  height: 100%;
  cursor: pointer;

}

#requestListPrint div.header {
  text-align: center;
  font-size: 2em;
}

#requestListPrint table {
  width: 100%;
}

#requestListPrint td {
  width: 17.5%;
  padding-top: 1em;
  padding-bottom: 1em;
  vertical-align: text-top;
  text-align: left;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

#requestListPrint td:last-child {
  width: 30%;
}










/* ************************************************ */
/* ************************************************ */
/* TAGS */
/* ************************************************ */
/* ************************************************ */
#tag-addSubjectDialog {
  width: 550px;
  height: 350px;
  position: absolute;
  z-index: 201;
  border-style: solid;
  border-width: 1px;
  padding-top: 2em;
  border-radius: 6px;
  font-size: .8em;
}

#tag-addSubjectDialog img.close {
  position: absolute;
  right: -15px;
  top: -15px;
  cursor: pointer;
}

#tag-addSubjectDialog div.body {

  position: absolute;
  width: 100%;
  height: 90%;
  top: 0;
  left: 0;

}

#tag-addSubjectDialog div.footer {

  position: absolute;
  left: 25%;
  bottom: 0;
  height: 15%;
  width: 75%;

}

#tag-addSubjectDialog div.footer div.footerContainerLeft {
  width: 49%;
  float: left;
}

#tag-addSubjectDialog div.footer div.footerContainerRight {
  width: 49%;
  float: right;
  padding-right: 2.25em;
}

#tag-addSubjectDialog div.footer div.footerContainerRight button {
  float: right;
}

#tag-addSubjectDialog span.note {
  font-size: .7em;
}

#tag-addSubjectDialog div.header {
  text-align: center;
  margin-bottom: 1em;
}










/* ************************************************ */
/* ************************************************ */
/* SEARCH FOOTER CONTAINER */
/* ************************************************ */
/* ************************************************ */
table.searchTable button {
  margin-top: 1em;
}













/* ************************************************ */
/* ************************************************ */
/* THUMBNAIL DISPLAY CONTAINER */
/* ************************************************ */
/* ************************************************ */

#thumbNailContainer {

  border-bottom-style: solid;
  border-right-style: solid;
  border-right-width: 2px;

  z-index: 55;
  box-shadow: 0 4px 9px 0 rgba(0, 0, 0, .6);
  top: 0;
  width: 85%;
}

#thumbNailContainer.--selectimages div.dropMenuButton.selectImages i {
  color: var(--themeaccent);
}

#thumbNailContainer div.dropMenuButton.generateLink {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

#thumbNailContainer.--portrait {
  width: 100%;
}

#thumbNailContainer.--portrait div.titleTab {
  right: 0;
}

#thumbNailContainer.--portrait span.close {
  right: 0;
}


#thumbNailContainer .header .leftContent,
#thumbNailContainer .header .rightContent {
  display: none;
}

#thumbNailContainer .header .middleContent {
  left: 0;
  width: 100%;
  height: 100%;
}


#thumbNailContainer>div.header {
  width: 100%;
  height: 3%;
  position: absolute;
  left: 0;
  top: 0;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .125);
  z-index: 100;
  font-weight: normal;
}


#thumbNailContainer>div.header div.middleContent p {
  margin-top: .3em;
}

#thumbNailContainer>div.body {
  padding: 0;
  position: absolute;
  left: 0;
  top: 3%;
  width: 100%;
  height: 97%;
  overflow: auto;
  z-index: 55;
}

#thumbNailContainer>div.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 5%;
  z-index: 100;

}

#thumbNailContainer>div.footer div.navButtons {
  float: right;
  margin-right: 1em;
  margin-top: .45em;
}

#thumbNailContainer>div.footer div.navButtons button,
#thumbNailContainer>div.footer div.navButtons button.next,
#thumbNailContainer>div.footer div.navButtons button.previous {
  margin: 0;
}

#thumbNailContainer img.close {
  position: absolute;
  right: -15px;
  top: 3%;
  z-index: 101;
  width: 30px;
  height: 30px;
}


#thumbNailContainer>div.header {
  width: 100%;
  height: 3.5em;
}

#thumbNailContainer>div.body {
  padding: 0;
  left: 0;
  top: 3.5em;
  width: 100%;
  height: calc(100% - 6em);
  display: grid;
}

#thumbNailContainer.--noimages div.body {
  display: block;
  grid-template-columns: none;
  grid-auto-rows: none;
}

#thumbNailContainer.--thumbsizelarge div.body,
#thumbNailContainer.--thumbsizefit div.body {
  scroll-behavior: auto;
  scroll-snap-type: y mandatory;
  scroll-snap-stop: always;
  scroll-snap-align: end;
}

#thumbNailContainer>div.footer {
  bottom: 0;
  width: 100%;
  height: 2.5rem;
}

#thumbNailContainer.--thumbsizefit>div.footer,
#thumbNailContainer.--thumbsizefit>div.header {
  display: none;
}

.--thumbsizefit .thumbNail .header,
.--thumbsizefit .thumbNail .footer {
  display: none;
}

.--thumbsizefit .thumbNail .body .cropTools {
  bottom: 2em;
}

#thumbNailContainer.--thumbsizefit>div.body {
  top: 0;
  height: 100%;
}

.--thumbsizefit .thumbNail .body {
  top: 0;
  height: 100%;
}


/*  DEFAULT (SMALL) THUMBNAIL STYLES */
.thumbNail {
  border-style: solid;
  border-width: 1px;
  text-align: center;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, .2);
  scroll-snap-align: end;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.thumbNail .header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1.75rem;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  z-index: 52;
}

.thumbNail .header span.title {
  /* display: none; */
  position: relative;
  display: inline-block;
  width: 100%;
  font-family: var(--fontFamilyBold);
}

.--showimagename .thumbNail .header span.title:after {
  content: attr(data-imagename);
}

.--showoriginalimagename .thumbNail .header span.title:after {
  content: attr(data-originalimagename);

}

.thumbNail .body {
  display: flex;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-width: 1px;
  position: absolute;
  left: 0;
  top: 1.75rem;
  width: 100%;
  height: calc(100% - 3.75rem);
}

.thumbNail .body .thumbNailWrapper {
  position: relative;
  border-style: solid;
  border-width: 3px;
  z-index: 50;
  margin: auto;
  overflow: hidden;
  box-sizing: content-box;
}

.thumbNail .body .thumbNailWrapper.uncropped {
  box-sizing: content-box;
}

.thumbNail .body .thumbNailWrapper.horizontal {
  position: relative;
}

.--thumbsizefit .thumbNail .body .thumbNailWrapper.horizontal {
  top: 0;
}

.thumbNail .body .thumbNailWrapper.uncropped img {
  width: auto;
  height: 100%;
}

.staff #thumbNailContainer [data-watermarkimage="1"] .thumbNail__watermark {
  display: none;
}

#thumbNailContainer [data-watermarkimage="1"] .thumbNail__watermark {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;;
  height: 100%;
  background-image: var(--watermarkimage);
  background-size: 75%;
  opacity: 0.3;
  pointer-events: none;
  z-index: 100;
}

#thumbNailContainer [data-overlayimage="1"] .thumbNail__overlay {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;;
  height: 100%;
  background-image: var(--overlayimage);
  background-size: 100%;
  opacity: 1;
  pointer-events: none;
  z-index: 100;
}


.thumbNail div.body p.printSize {
  position: absolute;
  left: 0;
  top: -.125em;
  font-size: 2em;
  font-family: var(--fontFamilySemiBold);
  opacity: 0.5;
  margin: 0;
  padding: 0;
  text-align: center;
  vertical-align: text-top;
  pointer-events: none;
  z-index: 51;
  width: 100%;
}


div.thumbNail div.icon_container {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  left: .125em;
  top: 0;
  font-size: 1em;
  padding: .25em;
  margin: .125em 0 0 0;
  z-index: 100;
  border-radius: 2px;
}

.thumbNail:not(.--imagegroups):hover div.icon_container {
  opacity: 1;
  pointer-events: auto;
}


.thumbNail img {
  box-sizing: content-box;
  overscroll-behavior: contain;
}

.thumbNail .body .thumbNailWrapper {
  opacity: 0;
}

.thumbNail .body .thmbNailWrapper img {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: auto;
}

.thumbNail .body .thumbNailWrapper.horizontal img {
  width: 100%;
  height: auto;
}

.thumbNail .body .thumbNailWrapper.horizontal {
  width: 300px;
  height: 200px;
}


.thumbNail .body .thumbNailWrapper {
  width: 200px;
  height: 300px;
}


/*  MEDIUM THUMBNAIL STYLES */
.thumbNail.medium .body .thumbNailWrapper {
  height: 500px;
  width: 333px;
}

.thumbNail.medium .body .thumbNailWrapper.horizontal {
  width: 475px;
  height: 317px;
}



/*  LARGE THUMBNAIL STYLES */
.thumbNail.large .body .thumbNailWrapper {
  height: 600px;
  width: 400px;
}

.thumbNail.large .body .thumbNailWrapper.horizontal {
  width: 600px;
  height: 400px;
}

#thumbNailContainer.--thumbsizesmall>div.body {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 33.3%;
}

#thumbNailContainer.--thumbsizemedium>div.body {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 50%;
}

#thumbNailContainer.--thumbsizelarge>div.body {
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 100%;
}

#thumbNailContainer.--thumbsizefit>div.body {
  grid-template-columns: 1fr;
  grid-auto-rows: 100%;
}


.thumbNail,
.thumbNail.small,
.thumbNail.medium,
.thumbNail.large {
  width: 100%;
  height: 100%;
}




.thumbNail div.icon_container div {
  padding: 0;
  margin: 0;
  line-height: 1.2em;
}


.thumbNail div.tag_overlay {
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 0;
  pointer-events: none;
  z-index: 100;
  overflow: hidden;
  box-sizing: content-box;
}

#thumbNailContainer.tag_overlay .thumbNail div.tag_overlay {
  height: 15%;
  bottom: 0;
  border-top-width: 2px;
  border-top-style: solid;
}

.thumbNail div.imagegroup_information {
  position: absolute;
  right: 3rem;
  top: 0;
  height: 1.5rem;
  pointer-events: none;
  z-index: 100;
  text-align: center;
  display: none;
  padding-left: 1rem;
  font-weight: bold;
}

.thumbNail.fit div.imagegroup_information {
  display: block;
}

#thumbNailContainer.filtered_by_tags div.thumbNail div.icon_container div.tag_clear_icon {
  display: block;
}


#thumbNailContainer.filtered_by_tags div.thumbNail div.icon_container div.tag_icon,
div.thumbNail div.icon_container div.tag_clear_icon,
div.thumbNail div.icon_container div.tag_icon {
  display: none;
}

div.thumbNail.tagged div.icon_container div.tag_icon {
  display: block;
}


div.thumbNail.horizontal div.icon_container div {
  float: left;
  margin-left: .5em;
}

div.thumbNail div.icon_container div:first-child {
  margin-left: 0;
}


div.thumbNail div.cropped_icon {
  display: none;
  opacity: .4;
}

div.thumbNail div.icon {
  opacity: 0.7;
}

.thumbNail.culled .thumbNailWrapper,
.largeImageWrapper.culled,
.not_visible {
  filter: grayscale(100%);
}


.thumbNail.culled .thumbNailWrapper img,
.thumbNail.--imagegroupclippedframe .thumbNailWrapper img {
  opacity: 0.5 !important;
}

.not_visible .visibility_icon i {
  opacity: 0.3;
}

div.thumbNail.presentationCrop div.cropped_icon {
  display: block;
}

div.thumbNail div.icon:hover {
  cursor: pointer;
  opacity: 1;
}

div.thumbNail.sample .is_not_sample,
div.thumbNail .is_sample {
  display: none;
}

div.thumbNail.sample .is_sample {
  display: block;
}



/* THUMBNAIL ORDER AND ALBUM IMAGE STATUS BADGES */

.thumbNail .image_badge {
  display: none;
  opacity: 0.5;
  float: right;
  line-height: 1em;
  margin-bottom: 0.25rem;
}

.thumbNail .image_badges i {
  padding: 0 0.125rem;
}

.thumbNail .image_badges {
  position: absolute;
  font-size: 1.5rem;
  top: 2rem;
  right: 0.5rem;
  overflow: hidden;
  height: auto;
  width: 1.75rem;
  display: flex;
  flex-direction: column;
  z-index: 100;
}

.thumbNail.culled .image_badge.culled,
.thumbNail.soft .image_badge.soft,
.thumbNail.order_image .image_badge.order_image,
.thumbNail.--order_singleprint .image_badge.order_image,
.thumbNail.sample .image_badge.sample_image,
.thumbNail.--imagegroupdisplayasindividualimage .image_badge.group_displayindividual,
.thumbNail.--imagegroupthumbnail .image_badge.group_thumbnail,
.thumbNail.--imagegroupsample .image_badge.group_sample,
.thumbNail.--imagegrouptrimmed .image_badge.group_trimmed,
.thumbNail.album_image .image_badge.album_image {
  display: block;
}

.thumbNail.horizontal .image_badges {
  height: 2rem;
  width: auto;
  top: 0.25rem;
  left: 0.5rem;
  right: auto;
  bottom: auto;
  z-index: 100;
}

.--thumbsizesmall .image_badges {
  font-size: 1rem;
  width: 1.25rem;
}

.--thumbsizemedium .image_badges {
  font-size: 1.25rem;
  width: 2rem;
}

.--thumbsizemedium .horizontal .image_badges {
  width: auto;
  height: 4rem;
  left: 1rem;
  bottom: 3rem;
  flex-direction: row;
}

.--thumbsizelarge .image_badges {
  font-size: 1.5rem;
  width: 2.25rem;
}

.--thumbsizelarge .horizontal .image_badges {
  height: 5rem;
  right: 0.5rem;
  top: 2rem;
  left: auto;
  bottom: 1rem;
  width: auto;
}

.--thumbsizefit .image_badges {
  height: 20rem;
  font-size: 3rem;
  width: 5rem;
}

.--thumbsizefit .horizontal .image_badges {
  height: 20rem;
  right: 0.5rem;
  bottom: 1rem;
  width: auto;
  left: auto;
}

/* THUMBNAIL TOOL BUTTONS AND CONTROL PANELS*/
.thumbNail .body .lowerRightControls,
.thumbNail .body .lowerLeftControls,
.thumbNail .body .upperRightControls,
.thumbNail .body .upperLeftControls {
  position: absolute;
}

.thumbNail .body .lowerRightControls,
.thumbNail .body .lowerLeftControls {
  bottom: 0;
}

.thumbNail .body .upperRightControls,
.thumbNail .body .upperLeftControls {
  top: 0;
}

.thumbNail .body .lowerLeftControls,
.thumbNail .body .upperLeftControls {
  left: 0;
}

.thumbNail .body .lowerRightControls,
.thumbNail .body .upperRightControls {
  right: 0;
}

.thumbNail .exif,
.thumbNail .package,
.thumbNail .crop,
.thumbNail .sort {
  border-style: solid;
  border-width: 1px;
  padding: .2em .5em;
  vertical-align: middle;
  font-size: .7em;
}

.thumbNail .body .exif,
.thumbNail .body .crop {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top: none;
}

.thumbNail .body .package,
.thumbNail .body .sort {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom: none;
  float: left;
}

.thumbNail .body .exif,
.thumbNail .body .sort {
  float: right;
}

.thumbNail .body .package,
.thumbNail .body .crop {
  float: left;
}

.thumbNail td {
  text-align: left;
}

.thumbNail .ruleOfThirdsContainer {
  display: none;
}

.thumbNail.active .thumbNailWrapper:hover .ruleOfThirdsContainer {
  display: block;
}

.thumbNail .body .cropTools {
  position: absolute;
  left: 0;
  bottom: 0;
  top: auto;
  font-size: 1em;
  padding: 0;
  box-shadow: 0 0 4px rgba(0, 0, 0, .5);
  z-index: 51;
  display: none;
}

.thumbNail.horizontal .body .cropTools {
  width: auto;
  height: 1.75em;
  padding: 0 .5em .125em .5em;
  display: none;
  z-index: 100;
}

.thumbNail.active .body .cropTools {
  display: block;
}

.thumbNail .body .cropTools span:hover {
  cursor: pointer;
}

.thumbNail.clipboard_active .body .cropTools span.pasteCrop {
  display: inline-block;
}

.thumbNailWrapper.cropping img {
  cursor: move;
}

.thumbNail div.crop_percent {
  display: none;
  position: absolute;
  right: 0;
  bottom: 0;
  margin-right: .25em;
  opacity: .5;
}

.thumbNail.cropping div.crop_percent {
  display: block;
}






/* ************************************************ */
/* ************************************************ */
/* ADD IMAGE STORE STYLES */
/* GENERAL SIZE AND POSITIONING SHARED WITH	
			THUMBCONTAINER ABOVE */
/* ************************************************ */
/* ************************************************ */



div.imageStore td.addSubjectButton button {
  float: right;
}

.dialog.pathControl div.buttons {
  padding-right: 1em;
}

.dialog.pathControl div.buttons button {
  margin: 0;
  float: right;
}

.dialog.pathControl input.pathControl {
  width: 90%
}

.pathControl div.directoryRow button.add,
.pathControl div.directoryRow.downloaded {
  display: none;
}

.pathControl.directory.showAdd div.directoryRow button.add {
  display: inline-block;
}

.pathControl div.directory span.pathName {
  margin-top: .45em;
  width: 80%;
}


.right .pathControl div.directory:not(.goup) {
  /* display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: 1fr; */
}



.pathControl div.directory:hover {
  cursor: pointer;
}

.dialog.selectImageControl div.pathContainer {
  height: 96%;
  overflow: hidden;
}

.dialog div.pathContainer {
  height: 100%;
  overflow: hidden;
  position: relative;
}


.pathControl div.directory {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  padding: .5em;
}


.pathControl div.left div.directoryList {
  width: 98%;
  position: relative;
}


.selectImageControl.pathControl div.directoryList {
  height: 82%;
}

.selectImageControl.pathControl div.right div.directoryList {
  height: 100%;
  width: 100%;
  margin-top: 0.25em;
}

.selectImageControl.pathControl[data-showfilter="0"] div.directoryList {
  height: 91.5;
}

.pathControl div.directoryList {
  overflow-x: hidden;
  overflow-y: auto;
  height: 75%;
}

.dialog.compile_images div.directoryRow span.pathName {
  font-size: .9em;
}

div.directory.pathControl {
  width: 100%;
  padding-left: 3%;
}

.dialog div.directoryRow,
.pathControl div.directoryRow,
.dialog.pathControl div.directoryRow,
#downloadImageStore div.directoryRow {
  margin-bottom: .25em;
}

.pathControl input[data-propertyname="filter"] {
  width: 100%;
}

.pathControl input[data-propertyname="path"] {
  width: 93.25%;
  left: 1%;
}

.pathControl div.directoryRow,
.dialog.pathControl div.directoryRow {
  padding: 0;
  padding-left: 0.25em;
  margin: 0;
}

.dialog.pathControl button.updatePath {
  padding: 0.4rem;
  position: relative;
  bottom: 1px;
}

.pathControl h3,
.dialog.pathControl h3 {
  padding: 0;
  margin: 0;
  font-family: var(--fontFamilySemiBold);
}

div.directoryRow button.small,
.pathControl div.directoryRow button.small,
.dialog div.directoryRow button.small,
.dialog.pathControl div.directoryRow button.small {
  left: 2%;
  margin: 0 0 0 1em;
}

div.directoryRow button.small.view {
  margin: 0;
  margin-right: 1em;
}

.dialog div.directoryRow,
.pathControl div.directoryRow {
  display: block;
  width: 100%;
}

div.directoryRow span.fileContents {
  opacity: 0.7;
}


.dialog div.directoryRow span.fileCount,
.pathControl div.directoryRow span.fileCount,
.dialog.pathControl div.directoryRow span.fileCount {
  display: inline;
}

.dialog div.goup,
.pathControl div.goup,
.dialog.pathControl div.goup {
  text-align: center;
}












/* CROP PANELS */
#cropReview {

  position: absolute;
  right: -350px;
  width: 150px;
  top: 16.5%;
  height: 67%;

  margin: 0;

  border-radius: 4px;
  border-style: solid;
  border-width: 2px;
  box-shadow: -4px 0 4px rgba(0, 0, 0, .3);

  font-size: 1em;
  text-shadow: 0 0 3px rgba(0, 0, 0, .6);

  padding: .5em;

  opacity: .5;
  z-index: 700;

  overflow: hidden;

}

#cropReview:hover {
  opacity: 1;
}

#cropReview div.progressContainer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3em;
}

#cropReview div.progressContainer p {
  text-align: center;
  font-family: var(--fontFamilySemiBold);
  margin: 0;
  padding: 0;
}

#cropReview div.progressContainer div.progressBar {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1em;
}

#cropReview div.progressContainer div.progressBar span.progressIndicator {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  display: inline-block;
}

#cropReview span.collageIcon {
  display: block;
}

#cropReview span.collageIcon img {
  position: relative;
  margin-left: 5%;
  margin-top: 1em;
  width: 90%;
  border-style: solid;
  border-width: 2px;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, .4);
}






/* ************************************************ */
/* ************************************************ */
/* TIME PICKER OVERRIDE STYLES	
/* ************************************************ */
/* ************************************************ */
#ui-timepicker-div {
  font-size: .7em;
  box-shadow: 0 0 4px rgba(0, 0, 0, .3);
  padding: 1rem;
  background-color: #888;
}

#ui-timepicker-div table {
  width: 100%;
  border: none;
}

#ui-timepicker-div td {
  font-size: 1.1em;
  padding: .25em;
  text-align: center;
}

#ui-timepicker-div td a {
  display: block;
  padding: 0.2em 0.3em 0.2em 0.5em
}







/* IMAGESTORE EDIT STYLES */
div.sideBar.imageStore input.inputFrameRate,
div.sideBar.imageStore input.outputFrameRate {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(100%);
}

div.sideBar.imageStore.--outputasvideo input.inputFrameRate,
div.sideBar.imageStore.--outputasvideo input.outputFrameRate {
  opacity: 1;
  pointer-events: auto;
  filter: none;
}

div.sideBar div.imageStore td {
  text-align: left;
  padding: 0 1.5em;
}

div.sideBar div.imageStore td.outputAsVideo {
  text-align: center;
  padding-bottom: 1rem;
}

.sideBar .imageStore input:not(input[type="checkbox"]),
.sideBar .imageStore select,
.sideBar .imageStore textarea {
  width: 100%;
}

.sideBar .imageStore button.save {
  float: right;
}

.sideBar .imageStore tr td.add,
.sideBar .imageStore tr td.remove {
  width: 10%;
}

.sideBar .imageStore fieldset table {
  width: 100%;
}

.sideBar .imageStore tbody.subjectContainer tr td.remove {
  width: 15%;
}

.sideBar .imageStore td.subjectTagID {
  opacity: .3;
}

.sideBar .imageStore fieldset.collection button,
.sideBar .imageStore fieldset.request button {
  margin: 0;
  display: block;
}

.sideBar .imageStore table.saverow {
  width: 100%;
}

.sideBar .imageStore table.saverow,
.sideBar .imageStore table.saverow tr,
.sideBar .imageStore table.saverow td {
  padding: 0;
  margin: 0;
}

.sideBar tr.addCollection td {
  padding-top: 2em;
}

tr.addCollection .year-add {
  width: 15%;
}


/* THUMBNAIL EXIF PANE STYLES */
.exifPane {
  position: absolute;
  bottom: 100%;
  text-align: left;
  font-family: var(--fontFamilyBold);
  z-index: 51;
  display: block;
  margin-top: 2.5%;
}

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

.exifPane table {
  margin-top: .25em;
  margin-left: .3em;
}

.exifPane table thead td {
  text-align: center;
}

.exifPane td {
  font-size: .55rem;
  padding: .125rem;
}

.thumbNail.medium .exifPane td {
  font-size: 0.7rem;
  padding: .25rem;
}

.thumbNail.large .exifPane td {
  font-size: 1.2rem;
  padding: 1rem;
}

.thumbNail.fit .exifPane td {
  font-size: 2rem;
  padding: 1rem;
}


.exifValue {
  text-align: right;
  font-weight: normal;
}


/* THUMBNAIL FOOTER STYLES */
.thumbNail .footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2rem;
  border-top-style: solid;
  border-top-width: 1px;
  margin: 0;
  padding: 0;
  z-index: 52;
}

.thumbNail .footer .order, .thumbNail .footer .addToPackage {
  float: left;
  height: 100%;
  text-align: left;
}

.thumbNail .footer .order {
  width: 20%;
}

.thumbNail .footer .addToPackage {
  width: 40%;
}

.thumbNail .footer .order button,
.thumbNail .footer .addToPackage button {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: .125em .5em;
}

.thumbNail .footer .right {
  position: absolute;
  right: 0;
  left: auto;
}

.thumbNail .footer .left {
  position: absolute;
  left: 0;
  right: auto;
}


.thumbNail .footer .ratings {
  width: 37%;
  height: 100%;
}

.thumbNail .footer .crop_percent {
  margin-left: 0.25em;
  margin-bottom: 0.25em;
}

.ratingsControl {
  position: relative;
  width: 100%;
  height: 100%;
  top: 0;
  vertical-align: middle;
}

#thumbHeaderTools.left .ratingsControl {
  width: 6em;
  position: absolute;
  right: 4em;
  margin-top: .5em;
}

div.buttonContainer .ratingsControl {
  top: .3em;
  text-align: right;
}

.ratingsControl:hover {
  opacity: 1;
}

.ratingsItem {
  font-size: 1em;
  cursor: pointer;
  margin-right: .125em;
  display: inline-block;
}

#thumbHeaderTools.left {
  position: absolute;
  left: 1%;
  height: calc(100% - 0.4rem);
  width: calc(100% - 1em - 1%);
  margin-top: .2em;
  margin-bottom: .2em;
  margin-left: 1em;
}

#thumbHeaderTools .dropMenuContainer {
  width: 100%;
  height: 100%;
}

#thumbHeaderTools .dropMenuButton {
  padding: .1em .5em .4em .5em;
  border-style: solid;
  border-width: 1px;
  float: left;
  z-index: 100;
  text-align: center;
  height: 100%;
  border-radius: 50%;
}

#thumbHeaderTools .dropMenuButton.tagImages {
  padding-bottom: 0.35em;
}


#thumbHeaderTools .dropMenuButton.marginLeft {
  margin-left: 0.5rem;
}

#thumbHeaderTools .dropMenuButton:hover,
#thumbHeaderTools .dropMenuButton.showing {
  cursor: pointer;
}

#thumbHeaderTools .dropMenuButton i {
  font-size: 1.5em;
  position: relative;
  margin-top: 28%;
  z-index: 100;
}

.thumbnail_dropmenu.imagegroups .requires_imagestores,
.thumbnail_dropmenu .requires_imagegroups {
  display: none;
}

.thumbnail_dropmenu.imagegroups .requires_imagegroups {
  display: block;
}















/* ************************************************ */
/* ************************************************ */
/* 	            LOGIN CONTROLS      				*/
/* ************************************************ */
/* ************************************************ */
#passwordReset,
#staffLoginPanel,
#loginPanel {
  position: relative;
  margin: 0;
  padding: 0;
}

#passwordReset input,
#passwordReset button,
#staffLoginPanel input,
#staffLoginPanel button,
#loginPanel input,
#loginPanel button {
  float: right;
  margin-right: 0;
}

#passwordReset table,
#staffLoginPanel table,
#loginPanel table {
  width: 80%;
  margin-left: 10%;
}

#loginPanel div.accounttoggle p {
  text-align: center;
}


#passwordReset p,
#staffLoginPanel p,
#loginPanel p {
  margin: 0 1em 1em 1em;
}

#passwordReset td,
#staffLoginPanel td,
#loginPanel td {
  vertical-align: middle;
}

#loginPanel div.additional_info {
  font-size: 1.2em;
  width: 100%;
}

#staffLoginPanel fieldset,
#loginPanel fieldset {
  margin-bottom: 2rem;
}


.dialog.login .additional_info {
  margin: 1em;
  margin-top: 0;
  border-style: solid;
  border-width: 2px;
  border-radius: 4px;
  padding: 0.5rem;
  text-align: center;
}

.dialog.login .additional_info p {
  margin: 0;
  padding: 0;
}

.dialog.production_filter,
.dialog.imagestore_filter {
  height: 550px;
}

#largeWarning {
  position: absolute;
  z-index: 250;
  right: 0;
  bottom: 0;
  width: 250px;
  height: 250px;
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
}






/* ************************************************ */
/* ************************************************ */
/* ALBUM MANAGER STYLES */
/* ************************************************ */
/* ************************************************ */

.albumContainer {
  width: 100%;
  float: left;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  padding-bottom: 2.5%;
  clear: both;
}

.albumContainer .albumPreview {
  width: 95%;
  position: relative;
  margin-left: 2.5%;
  overflow: hidden;
  text-align: center;
}

.albumContainer div.image_preview {
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-style: solid;
  border-width: 2px;
  margin: .5%;
  box-sizing: content-box;
}

.albumContainer h1,
.albumContainer p {
  margin: 0;
  padding-left: 2.5%;
}

.albumContainer h1 {
  font-size: 2em;
}

.albumContainer p {
  margin-top: 0;
  margin-bottom: 2.5%;
}

.albumContainer .albumControls button {
  font-size: .7em;
  float: right;
  margin: 0;
  margin-top: 2.5%;
}

.albumControls {
  margin-right: .5em;
}

div.addAlbumButtonContainer {
  width: 100%;
  text-align: center;
  float: left;
  padding: 0;
  margin: 0;
  margin-top: .5em;
  text-align: center;
  border-style: solid;
  border-width: 1px;
}

div.addAlbumButtonContainer p {
  padding: 0;
  margin: 0;
  font-size: 1.3em;
  display: none;
}

div.addAlbumButtonContainer button {
  position: relative;
  font-size: 1em;
  margin: .5em auto;
  float: none;
}

div.addAlbumButtonContainer select {
  width: 20%;
}

.activeAlbumBadge, .imageCountBadge {
  font-size: 1em;
  font-family: var(--fontFamilySemiBold);
  float: right;
  display: none;
  margin-right: .5em;
}

.imageCountBadge {
  display: block;
  position: relative;
  float: none;
}

.albumContainer button[name="view"] {
  display: none;
}

.albumContainerSubControls {
  float: left;
  width: 100%;
  border-top-style: solid;
  border-top-width: 3px;
  border-bottom-style: solid;
  border-bottom-width: 3px;
  margin-bottom: 2.5%;
  padding-top: 2.5%;
}

.albumContainerSubControls table {
  width: 80%;
  margin-left: 10%;
  font-size: .8em;
  margin-bottom: 1em;
}

.albumContainerSubControls td {
  padding: 0;
}

.albumContainerSubControls td.left {
  width: 30%;
}

.albumContainerSubControls td.right {
  width: 15%;
}

.albumContainerSubControls td.right button {
  margin-top: .9em;
  float: left;
  padding-bottom: .3em;
}

.albumContainer div.alertMessage-inline {
  width: 100%;
}

.content.albumManager {
  height: 85%;
  top: 10%;
}

.albumManager div.addAlbumButtonContainer select.mergetype,
.albumManager div.addAlbumButtonContainer button.cancelmerge,
.albumManager.mergeAlbums div.albumControls,
.albumManager.mergeAlbums div.addAlbumButtonContainer button.addalbum {
  display: none;
}

.albumManager.mergeAlbums div.addAlbumButtonContainer select.mergetype,
.albumManager.mergeAlbums div.addAlbumButtonContainer button.cancelmerge {
  display: inline;
}
















/* ************************************************ */
/* ************************************************ */
/* PRODUCT DISPLAY STYLES */
/* ************************************************ */
/* ************************************************ */
div.sideBar.products div.content h1 {
  background-color: inherit;
  background: none;
  border: none;
  box-shadow: none;
  font-size: 2em;
  font-family: var(--fontFamilySemiBold);
  padding-bottom: .3em;
}

div.sideBar.products div.content h1:hover {
  background-color: inherit;
  background: none;
  cursor: default;
}

div.sideBar.products div.content div.productList {
  padding-bottom: .5em;
  padding-right: 1em;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

div.sideBar.products div.content div.productList div.skuList {
  width: 100%;
}

div.sideBar.products div.content div.productList:nth-child(n+2) {
  border-top-style: solid;
  border-top-width: 1px;
}

div.sideBar.products div.content div.productList:hover {
  cursor: pointer;
}

div.sideBar.products div.content div.productList img.icon {
  height: 90%;
  width: auto;
  float: left;
  margin-right: 1em;
}

div.sideBar.products div.content div.productList img.icon {
  height: 375px;
  width: auto;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, .3);
}

div.sideBar.products div.content div.productList div.productListItem.horizontal img.icon {
  height: auto;
  width: 375px;
}

div.sideBar.products div.content div.productList h2 {
  font-size: 1.75em;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, .5);
}

div.sideBar.products div.content div.productList:nth-child(even) img.icon {
  margin-left: 2em;
}

div.sideBar.products div.content div.productList.products-enlargements img {
  border-style: solid;
  border-width: 5px;
}

div.sideBar.products div.content div.productBody {
  float: left;
  width: 100%;
}

div.sideBar.products div.content div.navigation {
  width: 100%;
  text-align: center;
}

div.sideBar.products div.content div.navigation {
  text-align: right;
}


div.sideBar.products div.content h1,
div.sideBar.products div.content h1:hover {
  border-bottom-style: solid;
  border-bottom-width: 1px;
}


/* PRODUCTLISTITEMS */


div.sideBar.products div.content div.productList span.active,
div.sideBar.products div.content div.productList.active span.inactive {
  display: none;
}


div.sideBar.products div.content div.productList.active span.active,
div.sideBar.products div.content div.productList span.inactive {
  display: inline-block;
}


div.sideBar.products div.content div.productList.active {
  border: none;
}


div.sideBar.products div.skuList {
  float: left;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  padding: 1em;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .4);
}

div.sideBar.products div.productListItem:hover {
  cursor: default;
}

div.sideBar.products div.productListItem {
  float: left;
  width: 100%;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-top-style: solid;
  border-top-width: 1px;
  padding-bottom: 2em;
}

div.sideBar.products div.content div.productList:first-child,
div.sideBar.products div.productListItem:first-child {
  border-top-width: 0;
}

div.sideBar.products div.productListItem div.prices {
  text-align: center;
  margin: 2em 0;
}

div.sideBar.products div.content div.productList:last-child,
div.sideBar.products div.productListItem:last-child {
  border-bottom-width: 0;
}

div.sideBar.products div.productListItem div.body {
  float: left;
  width: 100%;
  height: 75%;
  margin-bottom: 2em;
}

div.sideBar.products div.productListItem.singlePrints h2 {
  text-align: left !important;
}

div.sideBar.products div.productListItem.singlePrints h2 span.display_price {
  float: right;
}

div.sideBar.products div.productListItem.singlePrints ul.finishing_list {
  padding: 0;
  margin: 0;
  text-align: center;
}

div.sideBar.products div.productListItem.singlePrints ul.finishing_list li {
  display: inline;
  margin-left: 1em;
}

div.sideBar.products div.productListItem.singlePrints ul.finishing_list li:hover {
  text-decoration: underline;
  cursor: pointer;
}



div.sideBar.products div.productList {
  font-size: 1.1em;
}

div.sideBar.products button {
  border-radius: 4px;
  margin: 0;
  font-size: 1.5em;
  padding: .25em .5em .5em .5em;
}

div.sideBar.products div.navigation {
  float: left;
  width: 100%;
  height: 4em;
  clear: both;
}


div.sideBar.products div.productList p.description {
  font-size: 1.2rem;
  font-family: var(--fontFamilySemiLight);
  line-height: 1.75rem;
}











/* ************************************************ */
/* ************************************************ */
/* PRICE GRID */
/* ************************************************ */
/* ************************************************ */

#priceGrid {
  z-index: 215;
  position: absolute;
  width: 40%;
  margin-left: 30%;
  margin-top: 12.5%;
  border-radius: 6px;
  opacity: 0;
}

#pricesOverlay {
  opacity: 0;
}

#priceGrid.expand {
  width: 80%;
  margin-left: 10%;
}

#priceGrid span.collageName {
  position: absolute;
  font-family: var(--fontFamilyBold);
  font-size: 1.5em;
  top: -2.5em;
  right: 20px;
}

#priceGrid .close {
  position: absolute;
  right: -10px;
  top: -.70em;
  font-size: 1.5rem;
}

#priceGrid span.expand {
  display: inline-block;
  position: absolute;
  right: 1em;
  top: -.70em;
  font-size: 1.5em;
  cursor: pointer;
}

#priceGrid span.expand i.fa-compress {
  font-size: 1.25em;
  display: none;
}

#priceGrid.expand span.expand i.fa-expand-wide {
  display: none;
}

#priceGrid.expand span.expand i.fa-compress {
  display: inline-block;
}

#priceGrid img.icon {
  position: absolute;
  height: auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, .6);
  max-width: 150px;
  height: auto;
}

#priceGrid td {
  font-size: .8em;
  padding: .5em;
  transition: opacity .4s ease-in;
}

#priceGrid div.gridContainer {
  width: calc(100% - 3em);
  margin: 1.5em;
  overflow: hidden;
}

#priceGrid table {
  width: 100%;
  height: 100%;
  padding-bottom: 2em;
}

#priceGrid td.expand {
  display: none;
  opacity: 0;
}


#priceGrid tr.specials td {
  text-align: center;
  font-size: 1em;
}














/* ************************************************ */
/* ************************************************ */
/* REQUEST STYLES */
/* ************************************************ */
/* ************************************************ */


.controlCheckbox {
  font-size: 1.2rem;
  font-family: var(--fontFamilyBold);
  text-shadow: var(--textStroke);
}

h1.requestForm {
  border-style: solid;
  border-width: 1px;
  border-bottom: none;
}

div.requestForm.container.accordion_open {
  border-style: solid;
  border-width: 1px;
}

div.requestForm table {
  margin-top: .5em;
}

div.requestForm td {
  vertical-align: text-top;
}

.requestForm td p {
  margin: 0;
  margin-bottom: 1rem;
}

.requestForm td.alignLeft select {
  margin: 0;
}

.requestForm td,
td.requestForm {
  padding: 0.5rem 1rem;
}

td.requestForm {
  padding-bottom: 1rem;
  text-align: left;
  /* text-indent: 1.5em; */
}

td.alignLeft select {
  margin-left: 1.5em;
}

td.requestForm span[name="requestDescription"] {
  display: block;
  padding-left: 1.5em;
}

td.requestForm span.note {
  display: block;
  width: 80%;
  float: right;
}

.requestForm input[type="text"],
.requestForm input[type="number"],
.requestForm input[type="email"],
.requestForm input[type="tel"],
.requestForm textarea,
.requestForm select {
  width: 97.5%;
}

td.note {
  padding-left: 2em;
}

.requestForm h1,
.requestForm h2 {
  background: none;
  font-family: var(--fontFamilySemiBold);
  font-size: 1.5rem;
  margin: 0;
  padding: 0;
}

.requestForm h2 {
  font-size: 1.25rem;
}

.requestForm.requestDescription p:first-of-type {
  margin-top: 1rem;
}

/* RULES FOR STYLING THE TOOLS PANEL SPECIFICALLY*/
div.requestForm table {
  width: 95%;
  margin-left: 2.5%;
}

div.requestForm table tr[name="byusername"] td, div.requestForm table tr[name="byorderid"] td {
  text-align: center;
}

div.requestTools span.buttonRow button {
  margin-left: -0.25em;
}

button.lookupSchedule.--nomargin {
  margin: 0;
}












/* ************************************************ */
/* ************************************************ */
/* PAYMENTS DISPLAY CONTAINER */
/* ************************************************ */
/* ************************************************ */
div[name="paymentDisplay"] {
  position: relative;
  margin: 0;
  padding: 0;
  width: 80%;
  left: 10%;
  box-shadow: 0 0 2px rgba(0, 0, 0, .2);
}

div[name="paymentDisplay"] div[name="header"] {
  width: 100%;
  font-size: 1em;
  margin: 0;
  padding: 0;
}

div[name="paymentDisplay"] div[name="header"] span {
  top: 0;
  height: 1em;
  display: block;
  text-align: right;
  padding-right: 3em;
}

div[name="paymentDisplay"] form[name="paymentHistory"] {
  font-size: .7em;
}

div[name="paymentDisplay"] form[name="paymentHistory"] table {
  position: relative;
  width: 60%;
  left: 19%;
  margin: 0;
  margin-top: 1em;
  padding: 0;
}

div[name="paymentDisplay"] form[name="paymentHistory"] td {
  padding-right: 1em;
  width: 50%;
  text-align: center;
  border-style: solid;
  border-width: 1px;
}

div[name="paymentDisplay"] div[name="footer"] {
  width: 100%;
  padding: .5em;
}

div[name="paymentDisplay"] div[name="footer"] button {
  margin: 0;
}

div[name="paymentDisplay"] div[name="footer"] button {
  position: relative;
  right: -77%;
}

div[name="paymentDisplay"] div[name="footer"] button:last-child {
  margin-right: 3em;
  position: relative;
  right: -77%;
}




.dialog.message.collageDistributeItems {
  height: 375px;
}


.dialog.message.collageDistributeItems.--first .--first,
.dialog.message.collageDistributeItems.--second .--second,
.dialog.message.collageDistributeItems.--last .--last {
  text-decoration: line-through;
  opacity: 0.5;
}











/* ************************************************ */
/* ************************************************ */
/* INFO AND ERROR MESSAGES */
/* ************************************************ */
/* ************************************************ */

.dialog div.title {
  font-size: 1rem;
  display: block;
  position: relative;
  text-align: center;
  font-family: var(--fontFamilySemiBold);
  left: 0;
  width: 100%;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-width: 3px;
}

.dialog div.title h2 {
  padding: 0.5em 0;
  margin: 0;
}



/* GENERAL MESSAGE STYLES */
.dialog.askitem,
.dialog.selectlist,
.dialog.message {
  width: 450px;
  height: 400px;
  border-radius: 2px;
  position: absolute;
  left: -1000px;
  z-index: 201;
}


.dialog.askitem {
  height: min-content;
  min-height: none;
}

.dialog.askitem.--multiline {
  height: 385px;
  min-height: none;
}

.dialog.askitem.--multiline div.body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content 1fr;
}

.dialog.askitem.--multiline textarea {
  height: calc(100% - 1rem);
  width: 100%;
}

.dialog.selectlist .body {
  overflow: hidden;
  padding-bottom: 1em;
}

.dialog.selectlist.--nofilter input.filter {
  display: none;
}

.dialog.selectlist.--nofilter .body .simpleList,
.dialog.selectlist.--nofilter .simpleList {
  height: 100%;
}

.dialog.simpleselect.selectlist .body {
  height: calc(100% - 2rem);
}

.dialog.selectlist input[type="text"] {
  width: 100%;
  margin-bottom: 0.5rem;
}

.dialog.selectlist .body .simpleList {
  padding: 0;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.2);
  border: solid 1px rgba(0, 0, 0, 0.5);
  margin-top: 0.5rem;
  height: calc(100% - 2.5rem);
}

.dialog.simplesortdialog {
  height: 75vh;
}


.dialog.simplesortdialog.--halfheight {
  height: 50vh;
}

.dialog.simplesortdialog .simpleList {
  height: 100%;
  padding-bottom: 1em;
}

.dialog.message {
  height: 300px;
}

.dialog.--dialogTall {
  height: 800px;
}

.dialog div.title p {
  margin: 0;
  padding: 0;
}


.dialog.width_small,
#selectlist.width_small {
  max-width: none;
  width: 25vw;
}

.dialog.width_medium,
#selectlist.width_medium {
  max-width: none;
  width: 50vw;
}

.dialog.width_large,
#selectlist.width_large {
  max-width: none;
  width: 70vw;
}

.dialog.width_extralarge,
#selectlist.width_extralarge {
  max-width: none;
  width: 90vw;
}



/* CUSTOM MESSAGE STYLES */
.dialog.selectlist div.simpleRow {
  font-size: 1em;
}


/*  STYLES FOR BIG, TEXT ONLY MESSAGE THAT APPEARS CENTERED IN SCREEN */
.largemessage {
  text-align: center;
}

.largemessage h1 {
  font-size: 5em;
}

.largemessage p {
  font-size: 2.2em;
}

.largemessage h1, .largemessage p {
  margin: 0;
  padding: 0;
}






























/* ************************************************ */
/* ************************************************ */
/* NO SCRIPT STYLES */
/* ************************************************ */
/* ************************************************ */
#noscript-background {
  background: url(/img/noscript-oops.jpg) top right no-repeat, url(/img/noscript-oops2.jpg) bottom left no-repeat;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2000;
}

#noscript-logo {
  position: absolute;
  left: 50px;
  top: var(--headerHeight);
  z-index: 2001;
}

#noscript-message {
  border-style: solid;
  border-width: 2px;
  width: 50%;
  position: absolute;
  left: 25%;
  top: 25%;
  padding: 2em;
  padding-top: 0;
  z-index: 2001;
  border-radius: 8px;
  box-shadow: 0 0 15px 10px rgba(0, 0, 0, .4);
}

#noscript-message h1, #noscript-message h2 {
  text-align: center;
}

















/* ************************************************ */
/* ************************************************ */
/* DROPMENU STYLES */
/* ************************************************ */
/* ************************************************ */


div.dropMenu {
  border-radius: 3px;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, .4);
  width: 23em;
  height: 30em;
  overflow: hidden;
  position: absolute;
}

div.dropMenu.--halfheight {
  height: 15em;
}

div.dropMenu.--widemenu {
  width: 40em;
}

div.dropMenu.closed {
  height: 0;
  opacity: 0;
}

div.dropMenuItem div.preview,
div.dropMenuItem div.tagContainer.meta,
div.dropMenuItem div.tagContainer {
  position: relative;
  text-align: center;
  padding-bottom: .5em;
  min-height: 1.5em;
  overflow: hidden;
}

div.dropMenuItem div.tagContainer,
div.dropMenuItem div.tagContainer.meta {
  padding-left: 1em;
  display: flex;
  flex-wrap: wrap;
}

div.dropMenuItem div.footer {
  position: relative;
  min-height: 1.75em;
  padding: .25em 1.5em 2em 0;
}

div.dropMenuItem div.footer button.smallest {
  font-size: .75em;
}

div.dropMenuItem div.description {
  margin-left: .4em;
  margin-top: 1em;
}

div.dropMenuItem div.price {
  margin-left: .4em;
}


div.dropMenuItem div.image_preview {
  display: inline-block;
  position: relative;
  box-sizing: content-box;
  height: 75px;
  margin-left: 5px;
  border-style: solid;
  border-width: 2px;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, .4);
  overflow: hidden;
}

div.dropMenuItem span.refreshIcon {
  position: absolute;
  right: .25em;
  top: 0;
  font-size: 1.1em;
  padding: .25em;
}

div.dropMenuItem span.refreshIcon:hover {
  cursor: pointer;
}

div.dropMenuItem div.mask {
  z-index: 100;
  opacity: .8;
}


div.dropMenuItem.disabled {
  pointer-events: none;
  opacity: .5;
}


div.dropMenuItem .centered {
  text-align: center;
}


div.dropMenuButton.marginLeft {
  margin-left: .5em;
}


div.dropMenuButton.marginRight {
  margin-right: .5em;
}

div.dropMenuItem.insetLeft span.itemText,
div.dropMenuItem.insetLeft p {
  padding-left: 1rem;
}


div.dropMenuItem.menuitem--icon div.span {
  padding-left: 1.5rem;
}

.--centered,
div.dropMenuItem.--centered,
.dropMenuItem__footer.--centered {
  text-align: center;
}





/* ADD ALBUM DROP MENU STYLES */
div.dropMenuItem div.addAlbumItem {
  font-size: 1em;
}

div.addAlbumItem input,
div.filterByName input {
  width: 90%;
  border-radius: 3px;
  opacity: .5;
  margin-left: .75em;
}

div.addAlbumItem input:focus,
div.filterByName input:focus {
  opacity: .8;
}


div.addAlbumItem div.left,
div.dropMenuItem div.left {
  padding-left: 1em;
  background: inherit;
  min-height: 3em;
}

div.addAlbumItem div.right,
div.dropMenuItem div.right {
  background: inherit;
  min-height: 3em;
}

div.dropMenuItem.--emptyAlbum {
  height: 31px;
  overflow: hidden;
}

div.dropMenuItem.--emptyAlbum div.ratings {
  display: none;
}


div.dropMenuItem div.ratings {
  padding-left: 40%;
  padding-bottom: 0.35rem;
  overflow: hidden;
}



/* ORDER MENU DROP MENU STYLES */
div.dropMenu.no_items div.dropMenuItem.requires_items {
  display: none;
}







div.dropMenu>div.header {
  float: left;
  top: 0;
  height: 2rem;
  width: 100%;
  z-index: 10;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  text-align: center;
}

div.dropMenu>div.body {
  float: left;
  width: 100%;
  height: calc(100% - 3rem);
  overflow: auto;
  overflow-y: scroll;
}

div.dropMenu>div.body.no_overflow {
  overflow: hidden;
  overflow-y: scroll;
}


div.dropMenu>div.footer {
  float: left;
  height: 1rem;
  width: 100%;
  top: 92.5%;
  z-index: 10;
  border-top-style: solid;
  border-top-width: 1px;
  text-align: center;
}

div.dropMenu>div.footer button {
  float: right;
  margin-right: .5em;
  margin-top: .25em;
}

div.dropMenu>div.dropMenuItem {
  height: 2em;
}

div.dropMenu div.dropMenuItem input,
div.dropMenu div.dropMenuItem select {
  width: 100%;
}


div.dropMenu div.dropMenuItem {
  /* font-size               : .8em; */
  position: relative;
  width: 100%;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  padding: 0 1em;
}

div.dropMenu div.dropMenuItem.addAlbumItem:hover {
  cursor: default;
}

div.dropMenu div.dropMenuItem div.left {
  display: inline-block;
  width: calc(73% - 1em);
  margin-right: 1rem;
}

div.dropMenu div.dropMenuItem div.right {
  display: inline-block;
  width: calc(25% - 1em);
}

div.dropMenu div.dropMenuItem .itemText {
  margin-left: 0;
  margin-right: 1em;
  padding-top: .25em;
  padding-bottom: .25em;
  display: inline-block;
  font-size: 1rem;
}

div.dropMenu div.dropMenuItem p.itemText {
  display: block;
  font-size: 0.9rem;
}

div.dropMenu span.headerMessage {
  display: inline-block;
  padding-top: 0.25rem;
}


div.dropMenu div.dropMenuItem p {
  display: block;
  font-size: 0.9em;
  font-weight: normal;
  margin-bottom: 1em;
  margin-top: 0;
  margin-right: 1em;
  font-family: var(--fontFamilySemiLight);
}

div.dropMenu div.dropMenuItem div.right button {
  margin-right: 1em;
  margin-top: .35em;
}

div.dropMenu div.dropMenuItem.breakItem {
  min-height: 1em;
}

div.dropMenu div.dropMenuItem.breakItem p {
  margin: 0;
  font-family: var(--fontFamilyBold);
  padding: 0.25em 0;
}


div.dropMenu div.dropMenuItem.breakItem:hover {
  cursor: default;
}


div.dropMenuItem.setRating div.ratingsControl {
  height: 2em;
  margin-left: 2em;
  width: calc(100% - 2em);
}


div.dropMenu.imagePackages [data-clickhandler="import"] {
  display: none;
}


div.dropMenu.imagePackages.--selected [data-clickhandler="import"] {
  display: unset;
}

/* **********************************************************************************************
					END OF DROPMENU STYLES
   ********************************************************************************************** */







.dialog.display_requests,
.dialog.rush_status_add,
.dialog.rush_status_remove {
  width: 500px;
}

.dialog .inset_control_group,
.dialog.display_requests div.body div.credit_list,
.dialog.display_payments div.body div.payment_list {
  height: 90%;
  border-radius: 2px;
}

.dialog.display_requests div.credit_list div.creditRow p {
  margin-bottom: 0;
}


.dialog.display_requests div.credit_list div.creditRow p:last-child {
  margin-bottom: .5em;
}


.dialog.setorderpaidstatus{
  width: 600px;
}

.dialog.display_payments {
  width: 550px;
  height: 350px;
}


.dialog.display_payments table {
  width: 100%;
}


.dialog.display_payments table button {
  font-size: .85em;
}

.dialog.display_payments [data-clickhandler="cancel"],
.dialog.display_payments .--merchantpayment.--completed [data-clickhandler="complete"],
.dialog.display_payments [data-clickhandler="delete"],
.dialog.display_payments [data-clickhandler="uncancel"],
.dialog.display_payments .paymentRow:not(.--merchantpayment):not(.--completed) [data-clickhandler="refund"] {
  display: none;
}


.dialog.display_payments .paymentRow:not(.--canceled):not(.--merchantpayment) [data-clickhandler="cancel"],
.dialog.display_payments .--merchantpayment.--completed [data-clickhandler="refund"],
.dialog.display_payments .--creditcard:not(.--canceled) [data-clickhandler="delete"],
.dialog.display_payments .--cash:not(.--canceled) [data-clickhandler="delete"],
.dialog.display_payments .--check:not(.--canceled) [data-clickhandler="delete"],
.dialog.display_payments .--online:not(.--canceled) [data-clickhandler="delete"],
.dialog.display_payments .--canceled:not(.--refunded) [data-clickhandler="uncancel"] {
  display: inline;
}


.dialog.display_payments td {
  text-align: left;
}

.dialog.display_payments td.payment_buttons {
  text-align: right;
  padding-top: .5em;
}

.dialog.display_payments .payment_details_check,
.dialog.display_payments .payment_details_creditcard {
  text-align: center;
}

.dialog.display_payments td.tender_type {
  text-align: center;
}


.dialog.display_payments td.tender_type {
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.dialog.display_payments .--canceled td.tender_type {
  background-color: rgba(64, 0, 0, .3);
}

.dialog.display_payments td.tender_type {
  background-color: rgba(100, 100, 100, .3);
  border-bottom-color: rgba(255, 255, 255, .1);
}

.dialog.display_payments .--canceled.--approved span.--approved,
.dialog.display_payments span.--approved,
.dialog.display_payments span.--completed,
.dialog.display_payments span.--canceled {
  display: none;
}

.dialog.display_payments .--approved span.--approved,
.dialog.display_payments .--completed span.--completed,
.dialog.display_payments .--canceled span.--canceled {
  display: inline;
}

.dialog.display_payments button.payment_refund,
.dialog.display_payments div.paymentRow:not(.--approved) button.payment_complete,
.dialog.display_payments.paid div.paymentRow button.payment_uncancel {
  display: none;
}

.dialog.display_payments div.paymentRow.--completed button.payment_refund,
.dialog.display_payments div.paymentRow.--approved button.payment_refund {
  display: unset;
}

.dialog.merge_order {
  width: 500px;
}


.dialog.merge_order div.merge_body {
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: rgba(255, 255, 255, .3);
  margin-top: .5em;
  padding-top: .5em;
  padding: 1em 2em;
}

.dialog.merge_order div.merge_body div {
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: rgba(255, 255, 255, .3);
  padding: 1em 0em;
}

.dialog.merge_order div.merge_body div:first-child {
  border: none;
  padding-top: 0;
}

.dialog.merge_order div.message p {
  display: none;
  text-align: center;
  margin: 0;
}

.dialog.merge_order.missing_order_submitted div.message p.missing_order_submitted,
.dialog.merge_order.missing_user_id div.message p.missing_user_id,
.dialog.merge_order.missing_source_order_id div.message p.missing_source_order_id,
.dialog.merge_order.invalid_user_id div.message p.invalid_user_id {
  display: block;
}

.dialog.display_requests span.request_fee {
  margin-right: 1em;
}

.dialog.display_requests {
  height: 650px;
}

.dialog.display_requests div.body {
  overflow: hidden;
}

.dialog.display_requests.assign_requests div.body div.credit_list {
  overflow: auto;
  height: 400px;
}

.dialog.display_requests div.body input.credit_filter {
  width: 97.5%;
}

.dialog.display_requests div.body div.credit_list div.simpleRow.filtered {
  display: none;
}



.dialog.notes_editor {
  height: 85vh;
  width: 60vw;
  max-height: none;
  max-width: none;
}

.dialog.notes_editor.horizontal {
  height: 7 5vh;
  width: 95vw;
  max-height: none;
  max-width: none;
}

.dialog.notes_editor div.simpleRow {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr min-content;
}

.dialog.notes_editor div.simpleRow div.note_preview {
  width: 100%;
  display: block;
}

.dialog.notes_editor div.simpleRow div.note_delete {
  width: 1rem;
  display: block;
}

.dialog.notes_editor div.simpleRow div.note_delete button {
  margin: 0;
}

.dialog.notes_editor.no_preview {
  width: 300px;
}

.dialog.notes_editor.no_preview div.left {
  display: none;
}

.dialog.notes_editor div.left div.reset {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  left: 0;
  top: 0;
}

.dialog.notes_editor div.notes_preview_item {
  overflow: hidden;
}


div.draw_box.box {
  border-width: 2px;
  border-style: solid;
}

.draw_box_container:hover {
  cursor: crosshair;
}

div.draw_box.box:hover {
  cursor: all-scroll;
}

.dialog.notes_editor div.left,
.dialog.notes_editor div.right {
  float: left;
  height: calc(100% - 6em);
}

.dialog.notes_editor div.left {
  width: calc(60% - .5em);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dialog.notes_editor div.right {
  width: calc(40% - .5em);
}


.dialog.notes_editor.horizontal div.left {
  width: calc(70% - .5em);
}

.dialog.notes_editor.horizontal div.right {
  width: calc(30% - .5em);
}


.dialog.notes_editor.no_preview {
  height: 600px;
}

.dialog.notes_editor.no_preview div.left {
  display: none;
}

.dialog.notes_editor.no_preview div.right {
  width: 100%;
  height: calc(100% - 9em);
}

.dialog.notes_editor.no_preview div.right {
  margin-left: 0;
}

.dialog.notes_editor.no_preview div.right textarea {
  height: 80%;
}


.dialog.notes_editor div.right {
  margin-left: 1em;
}

.dialog.notes_editor div.right div.note_list,
.dialog.notes_editor div.right div.note_controls {
  width: 100%;
}

.dialog.notes_editor div.right div.note_list {
  height: 27%;
}

.dialog.notes_editor div.right div.note_controls {
  clear: both;
  height: 69%;
}

.dialog.notes_editor div.right div.note_list,
.dialog.notes_editor div.right textarea {
  width: 95%;
  margin-left: 2.5%;
  overflow: auto;
}

.dialog.notes_editor.horizontal div.right div.note_list {
  margin-top: 0;
}

.dialog.notes_editor p.note_message {
  font-family: var(--fontFamilySemiBold);
  margin-left: 0;
  margin-bottom: 2em;
  text-align: center;
}

.dialog.notes_editor div.right textarea {
  font-size: 1em;
  opacity: 1;
}

.dialog.notes_editor div.right button {
  margin: 2.5%;
  margin-top: .5em;
  float: right;
}

.dialog.notes_editor div.right textarea {
  height: 97.5%;
}

.dialog.notes_editor.horizontal div.right textarea {
  height: 89%;
}

.dialog.notes_editor div.right div.note_list {
  border-width: 1px;
  border-style: solid;
}

.dialog.notes_editor button.delete {
  position: absolute;
  right: 2px;
  top: 2px;
  display: none;
}

.dialog.notes_editor div.draw_box.box:hover button.delete {
  display: block;
}

.dialog.list_manager {
  height: 550px;
}

.dialog.list_manager input.list_name {
  width: calc(90% - 4rem);
}

.dialog.list_manager button.add {
  margin-left: .5em;
  width: 3.5rem;
  padding: 0.5rem
}

.dialog.list_manager {
  padding: 0;
}

.dialog.list_manager div.body {
  width: 95%;
  text-align: center;
  overflow: hidden;
}

.dialog.list_manager div.list_manager {
  height: calc(100% - 2rem);
}


.dialog.list_manager .simpleRow button {
  margin: 0;
  margin: -0.125rem;
  display: inline;
  vertical-align: top;
}

.dialog.list_manager .simpleRow button[data-clickhandler="listitemedit"] {
  margin-right: 0.5rem;
}

.dialog.list_manager .simpleRow :is([data-clickhandler="listitemsave"], [data-clickhandler="listitemcancel"]),
.dialog.list_manager .simpleRow.--listedit :is([data-clickhandler="listitemedit"], [data-clickhandler="listitemsimport"], [data-clickhandler="deleterow"]) {
  display: none;
}

.dialog.list_manager .simpleRow.--listedit :is([data-clickhandler="listitemsave"], [data-clickhandler="listitemcancel"]) {
  display: inline;
}


.dialog.list_manager input.search {
  left: 5%;
  width: calc(90% - 2px);
}

.dialog.list_manager div.list_container {
  position: relative;
  width: 90%;
  height: calc(100% - 5em);
  left: 5%;
  margin-top: .5em;
  margin-bottom: .5em;
  text-align: left;
  overflow: auto;
}

.dialog.list_manager span.list_name {
  width: calc(100% - 6rem);
  display: inline-block;
}

.dialog.list_manager div.simpleRow {
  width: 100%;
}



.dialog.lookup_user_list {
  width: 550px;
  height: 650px;
}

.dialog.lookup_user_list.add {
  height: 50rem;
}

.dialog.lookup_user_list.add input.search {
  display: none;
}

.dialog.lookup_user_list.lookup input.add {
  display: none;
}


.dialog.lookup_user_list.add div.search_results {
  height: 31%;
}

.dialog.lookup_user_list div.body {
  overflow: hidden;
}

.dialog.lookup_user_list div.lookup_user_form {
  width: 100%;
  height: 100%;
}


.dialog.lookup_user_list input[type="text"] {
  width: 97.25%;
}

.dialog.lookup_user_list select {
  width: 98.25%;
}


.dialog.lookup_user_list input.first_name,
.dialog.lookup_user_list input.last_name {
  width: 46.75%;
  display: inline-block;
}

.dialog.lookup_user_list input.last_name {
  margin-left: 2%;
}

.dialog.lookup_user_list div.entry_fields {
  margin-bottom: 2em;
}

.dialog.lookup_user_list div.entry_fields button {
  float: right;
  margin: .25em;
}

.dialog.lookup_user_list div.search_results {
  position: relative;
  width: 100%;
  height: 63%;
  top: 1em;
  overflow: auto;
}

.dialog.lookup_user_list.lookup div.search_results {
  height: 75%;
}



.dialog.lookup_user_list div.search_results div.simpleRow {
  padding: .25em 0 0 0;
}

.dialog.lookup_user_list div.search_results div.simpleRow div.rowheader {
  padding-bottom: .25em;
}


.dialog.lookup_user_list div.search_results div.simpleRow table {
  width: 95%;
  margin-left: 2.5%;
}

.dialog.lookup_user_list div.search_results div.simpleRow div.rowbody td {
  vertical-align: top;
}

.dialog.lookup_user_list div.search_results div.simpleRow div.rowbody td table {
  width: 100%;
  margin: 0;
}

.dialog.lookup_user_list div.search_results div.simpleRow thead td {
  font-family: var(--fontFamilyBold);
  border-bottom-style: solid;
  border-bottom-width: 1px;
}


.dialog.lookup_user_list div.search_results div.simpleRow div.rowheader table td.display_name {
  width: 60%;
}

.dialog.lookup_user_list div.search_results div.simpleRow div.rowheader table td.user_name {
  width: 40%;
}


/* **********************************************************
                    STATUS DIALOG STYLES
************************************************************* */
.dialog.status {
  width: 400px;
}

.dialog.status div.body {
  height: 100%;
}

.dialog.status.--status_count_1 {
  height: 75px;
}

.dialog.status.--status_count_2 {
  height: 150px;
}

.dialog.status.--status_count_3 {
  height: 225px;
}

.dialog.status.--status_count_4 {
  height: 275px;
}

.dialog.status.--status_count_5 {
  height: 350px;
}


.dialog.status .progress_bar__label,
.dialog.status .progress_bar {
  margin: 0;
  width: 100%;
  height: auto;
}

.dialog.status .progress_bar__label {
  font-size: .85em;
}

.dialog.status .progress_bar__progresscontainer {
  margin-top: 0.5rem;
  height: 1em;
}

#item_switcher {
  height: 150px;
  width: 250px;
  font-size: .8em;
  min-height: unset;
  min-width: unset;
}

#item_switcher div.simpleList {
  padding-top: 0;
  margin-top: 1rem;
}

#item_switcher div.body {
  height: calc(100% - 2rem);
  overflow: auto;
}

#user_switcher {
  height: 35%;
  width: 265px;
  min-width: auto;
}

#user_switcher.closed {
  height: 2em;
}

#user_switcher div.body {
  width: calc(100% - 1rem);
  overflow: hidden;
}

#user_switcher.closed div.body,
#user_switcher.closed div.buttons {
  display: none !important;
}

#user_switcher div.user_switcher {
  height: 100%;
}

#user_switcher select {
  width: 82%;
}

#user_switcher div.user_list {
  position: relative;
  overflow: auto;
  top: 2%;
  width: 92%;
  height: 83%;
}

#user_switcher div.user_list,
.dialog.list_manager div.list_container,
.dialog.lookup_user_list div.search_results {
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
}


.dialog.collage_imagesource,
#request_editprice,
#package_editprice {
  min-width: auto;
  width: 350px;
}

#request_editprice input,
#package_editprice input {
  width: 50%;
  margin-left: 25%;
}

#package_additem {
  height: 525px;
}

#package_additem .body {
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  grid-gap: 1rem;
}

#package_additem .body .--books,
#package_additem .body .--collages,
#package_additem .body .--imagePackages,
#package_additem .body .--singlePrints {
  display: none;
}

#package_additem input,
#package_additem select {
  width: 100%;
}



#package_additem .body.--books .--books,
#package_additem .body.--collages .--collages,
#package_additem .body.--imagePackages .--imagePackages,
#package_additem .body.--singlePrints .--singlePrints,
#package_additem .body.--addons__books .--addons__books,
#package_additem .body.--addons__collages .--addons__collages,
#package_additem .body.--addons__imagePackages .--addons__imagePackages,
#package_additem .body.--addons__singlePrints .--addons__singlePrints {
  display: block;
}

#package_additem .--label {
  font-family: var(--fontFamilySemiBold);
}

#package_additem div.right input,
#package_additem div.right select {
  margin-bottom: 0.5rem;
}

#package_additem .--savings {
  margin-top: 1rem;
}

#package_additem div.right .staff_required {
  pointer-events: none;
  opacity: .5;
}

body.staff #package_additem div.right .staff_required {
  pointer-events: auto;
  opacity: 1;
}

#package_additem div.item_sku_list {
  height: calc(100% - 5em);
  overflow: auto;
}

#package_additem div.left,
#package_additem div.right {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#package_additem p,
#package_additem input {
  margin: 0;
}

#package_additem .ui-spinner {
  padding: .125em;
}

#package_additem .ui-spinner input {
  width: 95%;
  margin-left: 2.5%;
}

#package_additem p.description {
  margin-top: 1rem;
}

#package_additem p.--savings {
  font-size: 1.4rem;
}




/* SMALL, USUALLY VERTICAL POPUP OF STACKED BUTTONS */


.toolsPopup {
  position: fixed;
  right: 0;
  bottom: 3em;
  width: 125px;
  padding-top: 1em;
  padding-bottom: 1em;
  padding-left: 0.75em;
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, .4);
  border-radius: 2px;
  z-index: 100;
  transform: translateY(0);
  opacity: 1;
}

.toolsPopup.cullTools {
  padding-left: 1.55em;
}

.toolsPopup.cullTools .playbackrate {
  display: none;
}

.toolsPopup.cullTools.--outputasvideo .separator.playbackrate {
  display: block;
}

.toolsPopup.cullTools.--outputasvideo button.playbackrate {
  display: unset;
}

.toolsPopup [data-helpid] {
  position: absolute;
  top: -.25rem;
  left: -.25rem;
}

.toolsPopup.wide {
  width: 250px;
}

.toolsPopup.--closed {
  opacity: 0;
  transform: translateY(100%);
}

.toolsPopup .separator:first-child {
  margin-top: 0;
}

.toolsPopup .separator {
  text-align: center;
  margin-top: 1em;
  margin-bottom: 0.25em;
}

.toolsPopup button {
  margin: 0;
  margin-bottom: .125em;
  font-size: .8em;
  word-spacing: normal;
  display: block;
}

.toolsPopup.horizontal {
  position: fixed;
  width: 650px;
  height: 30px;
  padding-top: .5em;
  padding-bottom: 2em;
  text-align: center;

}

.toolsPopup.horizontal button {
  font-size: 0.65em;
  margin: 0;
  margin-bottom: 1em;
}

.toolsPopup button {
  width: 90%;
}

.toolsPopup button.half-width {
  width: 44%;
  display: inline-block;
}

.toolsPopup button.third-width {
  width: 29%;
  display: inline-block;
}

.toolsPopup button.quarter-width {
  width: 21%;
  display: inline-block;
}

.toolsPopup button.fifth-width {
  width: 16%;
  display: inline-block;
}

.toolsPopup .request-information {
  width: 98%;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: white;
}

.toolsPopup .request-information-row {
  text-align: left;
  font-size: 0.8rem;
}

.toolsPopup .request-information-row p {
  margin: 0;
}

.toolsPopup .request-information-row:last-child {
  margin-bottom: 1rem;
}


/* **********************************************************************************************
					END OF ORDER DISPLAY STYLES
   ********************************************************************************************** */



.mask,
.centered,
.elementMask {
  position: absolute;
}

.positionReset {
  position: relative;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%
}

div.contentContainer div.header div.positionReset > div {
  display: inline-block;
}

.centered {
  width: 75%;
  height: 50%;
  margin-left: 12.5%;
  margin-top: 15%;
  z-index: 1000;
}


.mask {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

#templatesContainer {
  display: none;
}

.--h100 {
  height: 100%;
}

.--w100 {
  width: 100%;
}

.--wh100 {
  width: 100% !important;
  height: 100% !important;
}

.--ofhidden {
  overflow: hidden;
}


.hidden,
.template,
.printOnly,
.viewImagesFilter,
.thumbRatingFilter,
.thumbStringFilter,
.thumbTagFilter,
.staffVisible,
.staffVisible-inline,
.--staffvisible,
.--staffvisible.--inline,
.package_groupname_filter,
.packageselector_packagerow_filter {
  display: none;
}

.faded {
  opacity: .5;
}

.alertMessage-inline,
.allIsWellMessage-inline {
  position: relative;
  text-align: center;
  font-family: var(--fontFamilySemiBold);
  display: block;
  width: 95%;
  margin-left: 2.5%;
  margin-top: .5em;
}

.largeImageWapper,
.loading {
  background-image: url(/resources/web/images/loading/loading-bargraph.gif);
  background-repeat: no-repeat;
  background-position: center;
}

.clickable {
  cursor: pointer;
  font-family: var(--fontFamilySemiBold);
}

.--alignvertical,
.--alignVertical,
.alignVertical {
  vertical-align: text-top;
}

.--alignmiddle,
.--alignMiddle,
.alignMiddle {
  vertical-align: middle;
}

.--alignleft,
.--alignLeft,
.alignLeft {
  text-align: left;
}

.--aligncenter,
.--alignCenter,
.alignCenter {
  text-align: center;
}

.--alignright,
.--alignRight,
.alignRight {
  text-align: right;
}

.noFloat {
  float: none;
}

.--nomargin {
  margin: 0;
}

.--floatright,
.--floatRight,
.floatRight {
  float: right;
}

.--floatLeft,
.floatLeft {
  float: left;
}

.indented {
  text-indent: 2em;
}

.superScript {
  vertical-align: .5em;
  font-size: .7em;
}

.note {
  opacity: .8;
  font-size: .8em;
}

.hintText {
  font-size: .7em;
  opacity: .3;
  margin: 0;
  padding: 0;
}

table {
  width: 95%;
  margin-right: 2.5%;
}

td {
  font-size: 1em;
  text-align: right;
}

td.request_positions {
  text-align: left;
  padding-left: 2.5%;
}


td.left {
  width: 33%;
}

div.alertMessage {
  width: 82.5%;
  margin: 0;
  padding: 0;
  margin-left: 5%;
  padding: 2em;
}

td p {
  margin: 1em;
  margin-right: 0;
}

td p.note {
  margin: 0;
  padding: 1em;
  width: 97.5%;
  margin-left: 2.5%;
  text-align: center;
}

fieldset {
  width: calc(100% - 1rem);
  padding: 0.5rem 0 1rem 0;
  overflow: hidden;
  margin: 0 0 1rem 1rem;
}

.width100 {
  width: 100%;
}

.width80 {
  width: 80%;
}

.width70 {
  width: 70%;
}

.width60 {
  width: 60%;
}

.width58 {
  width: 58%;
}

.width55 {
  width: 55%;
}

.width50 {
  width: 50%;
}

.width40 {
  width: 40%;
}

.width20 {
  width: 20%;
}




/*
	IMAGE PROCESSING "LOOK" STYLES
*/
.grayscale div,
.grayscale img {
  filter: grayscale(100%) contrast(125%);
}

.sepia div,
.sepia img {
  filter: grayscale(100%) sepia(50%);
}

.highContrastColor div,
.highContrastColor img {
  filter: contrast(145%);
}

.hueshiftblue div,
.hueshiftblue img {
  filter: sepia(100%) hue-rotate(-165deg) saturate(40%);
}

.circularMask {
  clip-path: url(/resources/web/html/svgResources.svg#clipping);
}


#orderInvoice {
  opacity: 0;
}





/* *************************************************************
                     SEARCH DIALOG
*************************************************************** */
.dialog.searchDialog span[data-datatype="orders"],
.dialog.searchDialog span[data-datatype="users"],
.dialog.searchDialog span[data-datatype="requests"],
.dialog.searchDialog span[data-datatype="imagestores"] {
  display: none;
}

.dialog.searchDialog.--imagestores span[data-datatype="imagestores"],
.dialog.searchDialog.--users span[data-datatype="users"],
.dialog.searchDialog.--requests span[data-datatype="requests"],
.dialog.searchDialog.--orders span[data-datatype="orders"] {
  display: inline;
}

.dialog.searchDialog [data-daterangetyperequired="custom"] {
  display: none;
}

.dialog.searchDialog [data-daterangetype="custom"] [data-daterangetyperequired="custom"] {
  display: table-row;
}



/* *************************************************************
                     STAFF SUMMARY STYLES
*************************************************************** */
#staffSummaryContainer div.header {
  height: 12%;
}

#staffSummaryContainer div.body {
  top: 12%;
  height: 83%;
}


div.staffSummary-line td.id {
  width: 10%;
}

div.staffSummary-line td.name {
  width: 40%;
}

div.staffSummary-line td.type {
  width: 10%;
}

div.staffSummary-line td.button_container {
  width: 40%;
  text-align: right;
}

#staff_editor {
  max-width: none;
  width: 1100px;
}

#staff_editor table {
  width: 100%;
}

#staff_editor div.body table.staff_info td {
  vertical-align: middle;
}


#staff_editor div.body>table td {
  vertical-align: top;
  padding-left: 1em;
}


div.summaryLine button.margin_left {
  margin-left: 0.5em;
}



h2.image_not_assigned,
h2.image_not_found {
  padding: 3rem 2rem;
  position: absolute;
  text-align: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}


/* IMAGE SELECT DIALOG */
.imagesselectfromlist {
  height: 70%;
  width: 40%;
}

.imagesselectfromlist div.top {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 30%;
}

.imagesselectfromlist div.bottom {
  position: relative;
  width: 100%;
  height: 100%;
}

.imagesselectfromlist.split_view div.top {
  display: block;
}


.imagesselectfromlist.split_view div.bottom {
  position: absolute;
  left: 0;
  top: 30%;
  height: 70%;
  overflow: hidden;
}

.imagesselectfromlist div.bottom div.images {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.imagesselectfromlist div.bottom div.images div.simpleRow {
  position: relative;
  width: 100%;
  height: 75%;
  margin: 0;
  padding: 1rem;
}

.imagesselectfromlist div.bottom div.images div.img_container {
  height: 100%;
  display: flex;
  align-content: center;
  justify-content: center;
}

.imagesselectfromlist div.img_container {
  position: absolute;
  overflow: hidden;
  opacity: 0;
  box-sizing: content-box;
}


.imagesselectfromlist div.bottom div.images img {
  position: relative;
  width: auto;
  height: 100%;
  box-sizing: content-box;
}




/* LOCAL CONFIG STYLES */
.localconfig-measuredialog .measure_container {
  height: 15rem;
  position: relative;
  border: solid 1px black;
  border-radius: 3px;
  box-shadow: inset 4px 4px 8px rgba(0, 0, 0, .5);
  background-color: rgba(0, 0, 0, 0.1);
  margin-bottom: 1rem;
  overflow: hidden;
}

.localconfig-measuredialog .measure_container:hover {
  cursor: crosshair;
}

.localconfig-measuredialog .measure_form {
  width: 50%;
  margin-left: 25%;
}

.localconfig-measuredialog h3 {
  text-align: center;
}


#measure_widget {
  position: absolute;
  height: 3rem;
  border-right: solid 2px rgba(255, 255, 255, 0.8);
  border-left: solid 2px rgba(255, 255, 255, 0.8);
}

#measure_widget .top {
  border-bottom: solid 2px rgba(255, 255, 255, 0.8);
  height: 1.5rem;
}

#measure_widget div.output {
  padding: -1em;
  text-align: center;
}



/* ******************************************** */
/*              PROGRESS BAR STYLES             */
/* ******************************************** */

.progress_bar {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
}

.progress_bar__label {
  font-family: var(--fontFamilyBold);
  text-align: center;
  width: 100%;
  margin: 0;
  padding: 0;
}

p.progress_bar__label {
  font-size: 1.5rem;
}

.progress_bar__progresscontainer {
  width: 100%;
  height: 2rem;
  margin: 0;
  margin-top: 1rem;
  position: relative;
}

.progress_bar__progress {
  display: inline-block;
  width: 0;
  height: 100%;
  position: absolute;
}







#displaySchedules {
  width: 90%;
  height: 80%;
  max-width: none;
  box-sizing: content-box;
}

#displaySchedules.--noCourtMap {
  width: 60%;
}

#displaySchedules.--noCourtMap .right {
  display: none;
}

#displaySchedules.--noCourtMap .left,
#displaySchedules.--noCourtMap .middle {
  width: 50%;
}

#displaySchedules.--noCourtMap .middle {
  left: 50%;
}


#importSchedules .left,
#importSchedules .right,
#displaySchedules .left,
#displaySchedules .middle,
#displaySchedules .right,
#displaySchedules .top,
#displaySchedules .bottom {
  display: block;
  position: absolute;
}

#displaySchedules .left,
#displaySchedules .middle {
  width: 25%;
}

#displaySchedules .right {
  width: 50%;
}


#displaySchedules .right .courtMap h1 {
  font-size: 1.25em;
}

#displaySchedules .courtMap .space .court_container {
  height: calc(100% - 1.75em);
}


#displaySchedules .right .courtMap {
  position: absolute;
  width: 98%;
  height: 98%;
  left: 1%;
  top: 1%;
}

#displaySchedules .left,
#displaySchedules .right,
#displaySchedules .middle {
  height: calc(100% - 2em);
}

#importSchedules .left,
#displaySchedules .left {
  left: 0;
}

#displaySchedules .middle {
  left: 25%;
}

#importSchedules .right,
#displaySchedules .right {
  left: 50%;
  height: 90%;
}

#displaySchedules .right {
  height: 97%;
}

#importSchedules {
  width: 450px;
  height: 500px;
}


#importSchedules .right,
#importSchedules .left {
  overflow: hidden;
  height: calc(100% - 1.5rem);
}

#importSchedules h3 {
  margin-left: 1rem;
}

#importSchedules.--hasSchedules {
  width: 900px
}

#importSchedules.--hasSchedules .left {
  border-right: solid 1px rgba(255, 255, 255, .4);
}


#importSchedules .left {
  width: 100%
}

#importSchedules .right {
  width: 0;
  opacity: 0;
}

#importSchedules div.title .loader {
  display: none;
}

#importSchedules.--loadingCache div.title .loader {
  display: inline;
}

#importSchedules.--hasSchedules .left,
#importSchedules.--hasSchedules .right {
  width: 50%;
  opacity: 1;
}

#importSchedules .filesMissingMessage {
  display: none;
}

#importSchedules.--filesMissing .filesMissingMessage {
  display: inline;
}

#importSchedules .left button,
#importSchedules .right button {
  float: right;
  margin-right: 1.5rem;
}

#importSchedules .right button.deleteFiles {
  float: left;
}

#importSchedules .right button {
  margin-right: 0.5rem;
}

#importSchedules .right button.importFiles {
  margin-right: 1.5rem;
}


#displaySchedules .top {
  width: 100%;
  height: 3rem;
}

#importSchedules .top {
  width: 100%;
  position: relative;
  height: 3rem;
}


#displaySchedules .bottom {
  width: 100%;
  top: calc(3rem + 1em);
  height: calc(100% - 3rem - 1em);
}

#displaySchedules .middle .bottom,
#displaySchedules .left .bottom {
  height: calc(100% - 3rem);
}





#importSchedules input[type="text"],
#importSchedules select,

#displaySchedules input,
#displaySchedules select {
  margin-left: 1rem;
  width: calc(100% - 3rem);
}


#displaySchedules .subjectList,
#displaySchedules .scheduleList {
  position: absolute;
  margin: 1rem;
  width: calc(100% - 2rem);
  height: calc(100% - 2rem);
  overflow: auto;
}

#importSchedules div.fileList,
#importSchedules div.urlList {
  margin-top: 1rem;
  width: calc(100% - 2.5rem);
  margin-left: 1rem;
  border-radius: 3px;
  height: 15rem;
  overflow: hidden;
  overflow-y: auto;
}

#importSchedules div.fileList .createdData {
  font-family: var(--fontFamilySemiBold);
  font-size: 0.8rem;
}

#importSchedules div.fileList .sizeLabel,
#importSchedules div.fileList .fileName,
#importSchedules div.fileList .fileSize {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#importSchedules div.fileList .fileName {
  width: 40%;
}


#importSchedules div.fileList .fileSize {
  width: 40%;
  text-align: right;
  margin-right: 0.5rem;
}


#importSchedules div.fileList {
  height: 17.025rem;
}

#displaySchedules .label {
  display: inline-block;
  width: 25%;
  padding: 0;
  margin: 0 0 0.25rem 0;
  font-size: 0.8rem;
}

#displaySchedules .value {
  display: inline-block;
  width: 73%;
  padding: 0;
  margin: 0 0 0.25rem 0;
}

#displaySchedules .value.location,
#displaySchedules .value.opponent {
  font-family: var(--fontFamilyBold);
}


#displaySchedules h3 {
  text-align: center;
  margin-top: 5rem;
  padding: 0 1rem;
  color: white;
}





#importSubjects {
  width: 80%;
  max-width: none;
  height: 55%;
}

#importSubjects .body {
  overflow: hidden;
}

#importSubjects h3 {
  text-align: center;
  padding: 0 1rem;
}


#importSubjects div.left,
#importSubjects div.middle,
#importSubjects div.right {
  display: block;
  width: 28%;
  position: absolute;
  left: 0;
}

#importSubjects input.filter {
  margin-left: 1rem;
  width: calc(100% - 3rem);
}




#importSubjects div.bottom>div {
  height: calc(100% - 3.5rem);
}

#importSubjects div.middle {
  left: 28%;
}

#importSubjects div.right {
  width: 44%;
  left: 56%;
}

#importSubjects div.top {
  width: 100%;
  height: 3rem;
}

#importSubjects .clubList,
#importSubjects .subjectList,
#importSubjects .tagContainer {
  position: absolute;
  margin: 1rem;
  width: calc(100% - 2rem);
  height: calc(100% - 2rem);
  overflow: auto;
}

#importSubjects .tagContainer select,
#importSubjects .tagContainer input {
  width: 85%;
}

#importSubjects .tagContainer {
  padding-top: 3rem;
}


#importSubjects td.left {
  width: 25%;
}

#importSubjects .controls {
  padding: 2rem;
  text-align: right;
}

#importSubjects .imported {
  opacity: 0.5;
}



#assignSchedules {
  width: 80%;
  max-width: none;
  height: 80%;
}

#assignSchedules .row_container h3 {
  padding-top: 0.5rem;
  padding-left: 1rem;
}

#assignSchedules .row_container h4 {
  padding-top: 0;
  padding-left: 1rem;
  margin: 0;
  margin-top: -1.25em;
  margin-bottom: 1em;
}


#assignSchedules div.bottom h1 {
  text-align: center;
  margin: 2rem;
}

#assignSchedules .body {
  height: calc(100% - 5.5rem);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 4rem 1fr;
}

#assignSchedules .bottom {
  overflow-y: auto;
}

#assignSchedules .half-width {
  display: inline-block;
  width: 49%;
  margin: 0;
  padding: 0;
}

#assignSchedules .half-width input,
#assignSchedules .half-width select {
  width: 45%;
}

#assignSchedules .half-width:nth-child(2) {
  text-align: right;
}


#assignSchedules .third-width {
  float: left;
  width: 32%;
  line-height: 1.8rem;
  padding: 1rem;
}

#assignSchedules .third-width .label {
  font-family: var(--fontFamilySemiLight);
  width: 25%;
  display: inline-block;
}

#assignSchedules .third-width .value {
  width: 75%;
  display: inline-block;
}


#assignSchedules .row_container {
  margin: 4rem 0;
  width: 98%;
}


#assignSchedules .row_container:first-child {
  margin-top: 0;
}

#assignSchedules .row_container:last-child {
  margin-bottom: 0;
}

.import_schedules,
.import_court_schedules {
  margin-left: 0.15rem;
}




/*   PRINT/DISPLAY STYLES FOR PRINTING COURT SCHEDULES */


.photographerCourts {
  font-size: .7em;
  font-family: var(--fontFamily);
  background-color: white;
  color: black;
  overflow: visible;
  cursor: pointer;
  line-height: .8em;
  margin: 0;
  width: 8in;
  height: 10.25in;
  margin-left: calc((100% - 8in) / 2);
}

.photographerCourts .header,
.photographerCourts .body,
.photographerCourts .sub-header {
  display: block;
  position: relative;
}

.photographerCourts .courtSchedule {
  width: calc(30% - (1rem / 3));
  display: inline-block;
  margin: 1rem 0 0 1rem;
  vertical-align: top;
}

.photographerCourts.courtMap {
  break-before: page;
  position: relative;
  left: 0;
  top: 0;
  width: 8in;
  height: 10in;
  display: block;
  margin-left: calc((100% - 8in) / 2);
}

.photographerCourts.courtMap .space .tools {
  display: none;
}

.photographerCourts.courtMap .space {
  background-color: white;
  box-shadow: none;
}

.photographerCourts.courtMap .space .court_container {
  position: relative;
  width: 100%;
  height: calc(100% - 2.75em);
  overflow: hidden;
}

.photographerCourts.courtMap h1 {
  text-align: center;
  margin-bottom: 1em;
}


.photographerCourts.courtMap .space h1 {
  margin: 0;
  padding: .25rem;
  position: relative;
  text-align: center;
}

.photographerCourts.courtMap .space.has_background.background_hidden .court.placeholder,
.photographerCourts.courtMap .court.placeholder {
  position: absolute;
  border: solid 1px black;
  text-align: center;
  background-color: white;
  background: none;
  box-shadow: none;
}

.photographerCourts.courtMap .court.placeholder p {
  color: black;
}

.photographerCourts.courtMap .space.has_background.background_hidden .court.assigned {
  background-color: rgba(128, 128, 128, 0.25);
}

.photographerCourts .header {
  margin: 0;
  text-align: center;
  font-size: 1em;
}

.photographerCourts .header h1 {
  padding-top: 1rem;
  margin-bottom: 1rem;
}

.photographerCourts .courtSchedule table {
  border: solid 1px black;
  width: 100%;
  padding: 0.5rem;
}

.photographerCourts .courtSchedule td {
  text-align: left;
  padding-bottom: 0.125rem;
}

.photographerCourts .courtSchedule td.time {
  padding-left: 0.5rem;
}

.photographerCourts .courtSchedule tr.match_start td {
  padding-top: 0.5rem;
}

.photographerCourts .courtSchedule tr.match_start:first-child td {
  padding-top: 0.25rem;
}

.photographerCourts .header,
.photographerCourts .courtSchedule thead td,
.photographerCourts .courtSchedule tr td.time {
  font-family: var(--fontFamilyBold);
}

.photographerCourts .sub-header {
  text-align: center;
  margin-bottom: 1rem;
}

.photographerCourts .courtSchedule thead td {
  text-align: center;
  background-color: rgba(0, 0, 0, .2);
  text-align: center;
  padding: 0.25rem;
}



.court_map_container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: #333;
}

input.date {
  position: relative;
}

/* **********************************************************************
                             TIME LIST PICKER UI 
************************************************************************ */
.dialog.timelist {
  width: 550px;
  height: 300px;
}

.timelist__select {
  height: 100%;
  width: 60%;
  float: left;
  border-right: solid 1px black;
}

.timelist__display {
  height: 100%;
  width: 39%;
  float: right;
}

.timelist__picker {
  font-size: 0.8em;
}

.timelist__picker .ui-timepicker-title {
  text-align: center;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

.timelist__picker td {
  padding: 0.25em;
}

.timelist__picker a {
  padding: 0.1em 0.25em;
}

.timelist__picker__buttons button {
  float: right;
  margin-right: 1.25em;
  margin-top: 0.5em;
}




/* **********************************************************************
                             CRUMB CONTAINER UI.
************************************************************************ */

div.crumbContainer {
  float: left;
  width: 65%;
  height: 100%;
  margin-left: 17.5%;
  text-align: center;
}

div.crumbContainer span.crumb {
  font-size: .65em;
  display: inline-block;
  margin: .1em;
  margin-top: 1em;
  padding: .1em;
  padding-top: .2em;
  padding-right: .5em;
  padding-left: .5em;
  border-style: solid;
  border-width: 1px;
  border-radius: 3px;
}

div.crumbContainer span.crumb:hover {
  cursor: pointer;
}

div.crumbContainer span.crumb.highlight:hover {
  cursor: default;
}


/* **********************************************************************
                             SLIDER UI COMPONENT.
************************************************************************ */
.slider {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
}

.slider.--slider_horizontal {
  height: 2em;
}

.slider__inner {
  position: relative;
  width: 100%;
  height: 80%;
}

.slider__output {
  position: relative;
  width: 100%;
  height: calc(20% - 1em);
  text-align: center;
  font-size: 0.8em;
  margin-top: 1em;
  font-family: var(--fontFamilyBold);
}


.--slider_horizontal .slider__inner {
  width: 80%;
  height: 100%;
  display: inline-block;
}

.--slider_horizontal .slider__output {
  width: calc(20% - 2em);
  height: 100%;
  display: inline-block;
  margin: 0;
  vertical-align: top;
  padding-top: 0.5em;
  margin-left: 0.5em;
}

.slider__track {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0;
  top: 0;
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: rgba(0, 0, 0, 0.25);
  z-index: 1;
}

.--slider_horizontal .slider__track {
  height: 50%;
  width: 100%;
  top: auto;
  bottom: 0;
  border: none;
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color: rgba(0, 0, 0, 0.25);
}

.slider__marker {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  height: 35px;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  z-index: 10;
  background-color: white;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  border-radius: 2px;
}

.slider.--slider_vertical .slider__marker:hover {
  cursor: ns-resize;
}

.slider.--slider_horizontal .slider__marker:hover {
  cursor: ew-resize;
}

.--slider_vertical .slider__marker {
  margin-left: 25%;
}

.--slider_horizontal .slider__marker {
  top: 25%;
}

.--sliderstep {
  position: absolute;
  width: 15%;
  height: 3px;
  border-style: solid;
  border-width: 2px;
  z-index: 2;
  border-color: black;
  border-radius: 50%;
  background-color: black;
}

.--slider_horizontal .--sliderstep {
  height: 15%;
  width: 3px;
}

.--slider_horizontal .--sliderstep {
  top: auto;
  bottom: 5px;
}

.--sliderstep:hover {
  cursor: pointer;
}

.slider__defaultposition {
  border-color: red;
  background-color: red;
}

.floating_slider {
  width: 50px;
  height: 200px;
  position: absolute;
  z-index: 100;
  border: solid 1px black;
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0.3);
  padding: 1.5em 0.5em 1.5em 0.5em;
}

.floating_slider .--slider_horizontal .slider__inner {
  width: 70%;
}


.floating_slider.--slider_horizontal {
  width: 225px;
  height: 50px;
  padding: 0;
  padding: 0.5em 1em;
}

.floating_slider .--close {
  position: absolute;
  right: -10px;
  top: -20px;
  font-size: 1.5em;
}

.floating_slider .--close:hover {
  cursor: pointer;
}


.floating_slider .--close i {
  color: white;
}


@media screen and (orientation: portrait) {

  .sideBar {
    width: 100%;
  }

  #thumbNailContainer {
    top: 0;
    width: 90%;
  }

  div.titleTab {
    display: none;
    top: 85px;
    z-index: 100;
    right: -100px;
    width: 200px;
  }

  #leftSideBar .closeButton {
    right: 0.25rem;
  }

  #mainmenu {
    margin-top: 3rem;
  }

  .mainmenu-headingItem .logo {
    width: 200px;
    height: 165px;
  }

  .mainmenu-headingItem {
    width: calc( 100% - 2rem );
  }
    
  
  
  #rightSideBar .closeButton {
    left: 2rem;
  }

  #portraitorientation-overlay {
    display: block;
    padding: 2rem;
    position: absolute;
    text-align: center;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1000000;
    background-color: black;
  }

  .staff #portraitorientation-overlay {
    display: none;
  }

  #mainPageBackgroundLeft {
    opacity: 0.01;
  }

}


/* 
	THIS LITTLE HACK FORCES FIREFOX TO ANTIALIAS THE FONTAWESOME ICONS, WHICH APPRARENTLY DON'T HAVE VERY GOOD TYPE HINTING  
	AND RENDER POORLY AT SIZES WHICH ARE NOT MULTIPLES OF 14 ...
*/
.far, .fas, .fal {
  transform: rotate(0.001deg);
}


/* **********************************************************************
                          #addTagValue RELATED STYLES
************************************************************************ */


#addTagValue {
  padding: 0;
  margin: 0;
  margin-left: 20%;
  width: 60%;
}

#addTagValue table td {
  text-align: right;
}

.sideBar .imageStore .addTagValue {
  box-shadow: none;
  border: none;
}

.sideBar #addTagValue {
  margin-top: 2em;
}

.collection_edit #addTagValue {
  border: none;
  box-shadow: none;
  font-size: .8em;
  margin: 0;
  padding: 0;
}

.collection_edit #addTagValue table {
  width: 100%;
  margin: 0;
  padding: 0;
}

.collection_edit #addTagValue button {
  display: none;
}

.sideBar div.addTagValue {
  position: relative;
  width: 100%;
}

.sideBar div.addTagValue span.lookAtMe {
  width: 100%;
  font-size: .8em;
  padding: .25em;
  text-align: center;
}

div.dialog.choose_date {
  width: 350px;
  min-width: none;
}


.simpleList.--scrollsnap {
  scroll-behavior: auto;
  scroll-snap-type: y mandatory;
}

.simpleList.--scrollsnap .simpleRow {
  scroll-snap-align: end;
}



/* **********************************************************************
                             ASK ITEM.
************************************************************************ */
.dialog.askitem p {
  margin-left: 0;
  font-family: var(--fontFamilySemiBold);
}

.dialog.askitem input {
  width: 100%;
}




/* **********************************************************************
                             CHECKED LIST
************************************************************************ */

ol.checkedList .checkedList__complete,
ol.checkedList li.--complete .checkedList__incomplete {
  display: none;
}

ol.checkedList .checkList__incomplete,
ol.checkedList li.--complete .checkedList__complete {
  display: inline-block;
}

.checkedList ol {
  padding-left: 2rem;
}

.checkedList li {
  margin: 1rem 0;
  list-style-type: none;
}

.checkedList li i {
  margin-left: -1.4rem;
  padding-right: 0.25rem;
}



/* **********************************************************************
                             OVERLAY MESSAGE
************************************************************************ */

.overlaymessage {
  align-items: center;
  background-color: rgba(255, 255, 255, 0.90);
  color: black;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  opacity: 0;
  padding: 0 4rem;
  position: absolute;
  text-align: center;
  transition: opacity 0.5s ease-in-out;
  width: 100%;
}

.overlaymessage button {
  margin-top: 2rem;
}



/* MESSAGES */

div.dialog.message.imagedownloadcomplete {
	width: 65%;
	height: 20rem;
}

div.dialog.message.imagedownloadcomplete div.body > div {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	grid-template-rows: 1fr;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

div.dialog.message.imagedownloadcomplete .col1 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

div.dialog.message.imagedownloadcomplete .downloadPreview {
  overflow: hidden;
}

div.dialog.message.imagedownloadcomplete .downloadPreview {
  border: solid 3px white;
  box-shadow: 0 0 6px rgba(0,0,0,0.4);
}



/* PRIVACY CLASSES FOR SCREEN-RECORDING */
/* .clubphotoorder__revieworder__contactshipping--left,
.clubphotoorder__revieworder__contactshipping--right,
[data-propertyname="item.athlete"],
.clubphotoorder__panel[data-panelname="contact"] input,
.clubphotoorder__panel[data-panelname="shipping"] input,
input.loginUserName,
input.createUserName,
input.password,
input.password1,
input.password2,
.userinfo td:not(.left),
.edit_contact .data,
.shipping.edit_panel .data,
.orderSummary-orderline span.name,
span.download_url,
.cardholder_name,
.card_number,
.card_exp,
div.imagepackage_pricedescription .downloadurl,
.download_url.value,
.sideBar.requestForm input.firstName,
.sideBar.requestForm input.lastName,
.sideBar.requestForm input[type="tel"],
.sideBar.requestForm input[type="email"] {
  filter: blur(8px)
} */


.singleprintoverlayimage {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}