:root {

  --heightdefaulttime: 1s;
  --heightquartertime: calc(var(--heightdefaulttime) / 4);
  --heighthalftime: calc(var(--heightdefaulttime) / 2);
  --heighteigthtime: calc(var(--heightdefaulttime) / 8);

  --leftdefaulttime: 1s;
  --leftquartertime: calc(var(--leftdefaulttime) / 4);
  --lefteigthtime: calc(var(--leftdefaulttime) / 8);
  --lefthalftime: calc(var(--leftdefaulttime) / 2);

  /*
  --defaulteasing: ease-in-out;
  */
  --bounceinouteasing: cubic-bezier(.29, .59, .94, 1.25);
  --slideineasing: cubic-bezier(.44, .43, .06, 1);
  --defaulteasing: var(--slideineasing);
  --heighttransition: height var(--heightdefaulttime);
  --heighttransitionhalf: height var(--heighthalftime);
  --heighttransitionquarter: height var(--heightquartertime);
  --heighthalfbounceinout: height var(--heighthalftime) var(--bounceinouteasing);
  --heightquarterbounceinout: height var(--heightquartertime) var(--bounceinouteasing);
  --heightquarterslideinout: height var(--heighthalftime) var(--slideineasing);

  --productionopacitytiming: 0.25s;
  --productionwidthtiming: 0.5s;
  --productionheighttiming: 0.25s;
  --productioncolortiming: 0.125s;

  --productionwidthtransition: width var(--productionwidthtiming) var(--defaulteasing);
  --productionopacitytransition: opacity var(--productionopacitytiming) var(--defaulteasing);

  --productionwidthandopacitytransition:
    width var(--productionwidthtiming),
    opacity var(--productionopacitytiming);

  --productiondelayedtransitionout:
    width var(--productionwidthtiming),
    opacity var(--productionopacitytiming) var(--defaulteasing) 0.75s;

  --colortransition: color var(--productionwidthtiming), ;
  --hoveropacitytransition: opacity 0.25s;

}


#bigmessage,
.--fadein,
.--fadeout,
.largemessage,
.fadeIn,
.fadeOut,
.sideBarMask {
  transition: opacity .5s var(--defaulteasing);
}

#big_message_mask,
.background-mask,
#background-mask {
  transition: opacity .125s var(--defaulteasing);
}

.dialog.compile_images {
  transition: var(--heightquarterbounceinout);
}

.dialog.compile_images>div.body>div.middle {
  transition:
    var(--heightquarterbounceinout),
    top 0.3s var(--slideineasing);
}

.dialog.compile_images div.body div.top {
  transition: var(--heightquarterbounceinout);
}

.dialog.compile_images div.body div.bottom {
  transition:
    height 0.3s var(--slideineasing),
    top 0.3s var(--slideineasing);
}

div.imageTagContainer {
  transition:
    opacity 0.5s,
    transform 0.5s var(--slideineasing) .125s;
}

.--warningInit {
  transition: background-color 0.5s;
}

div.imageTagContainer:hover>div {
  transition: opacity 0.5s var(--defaulteasing);
}

div.sideBar {
  transition: transform 0.5s cubic-bezier(.44, .43, .06, 1), opacity 0.25s;
}

div.documentSummary.with_transitions {
  transition: transform 0.5s var(--slideineasing);
}

div.order_display.--orderdialog-withpayment-transition {
  transition: 
    transform var(--lefthalftime) var(--defaulteasing),
    width var(--lefthalftime) var(--defaulteasing);
}

#orderSummaryContainer.--productionTransition {
  transition:
    width var(--productionwidthtiming) var(--slideineasing),
    left 0.5s var(--slideineasing);
}

div.documentSummary div.summaryLine {
  transition: background-color 0.5s var(--defaulteasing);
}

.orderSummary-orderlinefooter>div,
.orderSummary-orderlineheader>div,
.orderSummary-orderline>div:not(.production_row) {
  transition:
    width var(--productionwidthtiming),
    opacity var(--productionopacitytiming),
    height var(--heightquartertime) var(--defaulteasing),
    margin-bottom var(--heightquartertime) var(--defaulteasing),
    padding-bottom var(--heightquartertime) var(--defaulteasing);
}

 div.order_display div.order_item {
   transition: background-color 0.25s;
 }

 div.order_display div.order_item.alert,
 div.order_display div.order_item.cannot_submit,
 div.order_display div.packages div.order_item.package_item.cannot_submit,
 div.order_display div.packages div.order_item.package_item:not(.originating_item).cannot_submit,
 .dialog.merge_order div.message p {
   transition: background-color 2s;
  }
  
  div.order_display button {
    transition: opacity 0.5s var(--defaulteasing);
  }
  
  div.order_display div.cannot_submit_controls {
    transition: 
      opacity 0.5s var(--defaulteasing),
      background-color 2s;
 }


#orderSummaryRows,
#orderSummaryContainer .header .rightContent,
#orderSummaryContainer .header .leftContent,
#orderSummaryContainer .header .simpleSearch,
#orderSummaryContainer .header select,
#orderSummaryContainer .header #simpleSearch {
  transition: var(--productionwidthandopacitytransition);
}

div.collage_navigation_controls {
  transition: transform 0.3s var(--slideineasing);
}

.requestAssignmentSummaryLine .rowbody {
  transition: var(--heightquarterbounceinout);
}

div.documentSummary.courtMap {
  transition: transform 0.3s var(--slideineasing), opacity 0.2s ease-in;
}

.courtMap .court {
  transition:
    background-color 0.3s ease-in,
    background-image 0.3s ease-in,
    opacity 0.3s ease-in;
}

.courtMap .court p {
  transition: color 0.3s ease-in;
}

.--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 .--large_preview__transitionout .orderSummary-orderlinefooter>div.collection_name,
.--large_preview__transitionout .orderSummary-orderlineheader>div.collection_name,
.--large_preview__transitionout .orderSummary-orderline>div.collection_name {
  transition: var(--productiondelayedtransitionout);
}

#thumbNailContainer.tag_overlay .thumbNail div.tag_overlay,
.thumbNail div.tag_overlay {
  transition: var(--heightquartertime) var(--defaulteasing);
}

.exifPane,
.thumbNail.selected div.body,
.thumbNail.lastViewed div.body {
  transition: background-color 0.25s var(--defaulteasing);
}

/* #thumbNailContainer {
  transition: opacity 0.25s ease-in-out, transform 0.5s ease-in-out;
} */

.thumbNail {
  transition: opacity 0.25s ease-in-out;
}

.thumbNail .body .thumbNailWrapper {
  transition: opacity 0.5s ease-in-out;
}

div.thumbNail div.icon_container {
  transition: var(--productionopacitytransition);
}

.accordion__panel {
  transition: all var(--heighthalftime) var(--defaulteasing);
}

#collageEditor .accordion__panel>div {
  transition: all calc(var(--heighthalftime) * 0.9) var(--defaulteasing);
}

#viewImages div.viewImagesSubjectRow div.subjectTotals,
#viewImages div.viewImagesSubjectRow div.subjectTotals-none,
#viewImages div.viewImagesSubjectRow div.subjectTotals-qualified {
  transition: var(--heighttransition) var(--defaulteasing);
}

#viewImages div.viewImagesSubjectRow div.subjectTotals.accordion_panel,
#viewImages div.viewImagesSubjectRow div.subjectTotals-none.accordion_panel,
#viewImages div.viewImagesSubjectRow div.subjectTotals-qualified.accordion_panel {
  transition: var(--heighttransition) var(--defaulteasing);
}

h1.viewImages {
  transition: box-shadow 0.25s ease-in-out 0.25s;
}

#priceGrid {
  transition:
    width .2s cubic-bezier(0.29, 0.59, 0.78, 1.24),
    margin .2s cubic-bezier(0.29, 0.59, 0.78, 1.24),
    opacity .25s var(--defaulteasing);
}

#pricesOverlay {
  transition: opacity .25s var(--defaulteasing);
}

div.dropMenu.do_transition {
  transition: height 0.25s, opacity 0.25s;
}

div.order_display div.order_item.collages div.reset,
div.order_display div.order_item.singlePrints div.reset,
div.order_display div.order_item.imagePackages div.reset {
  transition: var(--heighttransitionhalf) var(--defaulteasing);
}


div.order_display div.order_item div.edit_row {
  transition:
    var(--heighttransitionhalf) var(--defaulteasing),
    padding .5s;
}

div.order_display div.order_item.edit div.edit_row {
  transition: var(--heighttransitionhalf) var(--defaulteasing);
}

div.order_display div.order_item.item_notes button.item_notes,
div.order_display div.order_item.edit button.edit {
  transition: background-color .5s;
}

div.order_display div.order_item div.status_row,
div.order_display div.order_item .item_id,
body.staff div.order_display div.order_item button.refresh_sku_information,
body.staff div.order_display div.order_item.package_item button.refresh_sku_information,
body.staff div.order_display div.order_item.originating_item button.refresh_sku_information {
  transition: var(--hoveropacitytransition);
}

div.order_display div.order_item button.save_crop,
div.order_display div.order_item button.cancel_crop,
div.order_display div.order_item button.rotate_crop {
  transition: opacity 0.125s ease-in-out;
}

.dialog.add_payment tr.message td {
  transition: var(--heighttransitionhalf) var(--defaulteasing);
}

.dialog.add_payment.invalid_payment tr.message td {
  transition: height 1s;
}

.toolsPopup {
  transition:
    transform 0.75s var(--slideineasing),
    opacity 0.25s ease-in-out 0.125s;
}

#importSchedules {
  transition: width 0.25s;
}

#importSchedules .left {
  transition: width 0.25s 0.25s;
}

#importSchedules .right {
  transition: width 0.25s 0.5s;
}

.composemessage .toggle_preview {
  transition: background-color 0.5s ease-in;
}

#orderSummaryContainer.production .orderSummary-orderline {
  transition:
    var(--productionopacitytransition),
    background-color 0.5s var(--defaulteasing),
    padding 0.25s var(--defaulteasing);
}

#orderSummaryContainer.production .orderSummary-orderline>div>span {
  transition: color 0.25s;
}

#orderSummaryContainer .header .middleContent {
  transition: var(--productionwidthandopacitytransition);
}

#orderSummaryContainer.production .header .rightContent {
  transition:
    var(--productionwidthtransition),
    var(--productionopacitytransition),
    left 0.5s;
}

#orderSummaryRows h1.title,
div.production_row {
  transition: margin 0.125s ease-in-out;
}

div.production_row__header {
  transition:
    width var(--productionwidthtiming),
    opacity var(--productionopacitytiming),
    var(--heighttransitionquarter) var(--defaulteasing) 0.125s;
}

div.production_row__item {
  transition:
    background-color 0.5s ease-in-out,
    border-bottom 0.125s var(--defaulteasing);
}

div.production_row__item.selected {
  transition:
    background-color 0.125s ease-in-out,
    border-bottom 0.125s var(--defaulteasing);
}


.production_report_mode div.production_row__item:last-child {
  border-bottom: solid 2px black;
}

div.production_row__header>span,
div.production_row__item>span {
  transition: var(--productionwidthandopacitytransition);
}

.--large_preview__transitionout div.production_row__header>span,
.--large_preview__transitionout div.production_row__item>span {
  transition: var(--productiondelayedtransitionout);
}

div.imageResourceSelectRow img,
.dialog.productionpanel div.body,
.dialog.productionpanel .productionpanel__preview,
img.productionpanel__proof,
div.productionpanel__previewimage {
  transition: var(--productionopacitytransition);
}

div.productionpanel {
  transition: width var(--productionwidthtiming) var(--slideineasing);
}

div.contentContainer {
  transition: transform 0.5s ease-in-out, opacity 0.35s;
}

div.contentContainer.--showing {
  transform: none;
  opacity: 1;
}



/* ******************************************** */
/*          COMMUNICATIONS DIALOGS              */
/* ******************************************** */

.composemessage .composemessage__source div.simpleRow {
  transition: border-color 0.5s ease-in-out, background-color 0.5s ease-in-out;
}

.composemessage__proof {
  transition: opacity var(--productionopacitytiming) ease-in-out;
}



/* ******************************************** */
/*          SUBJECT TOTALS
/* ******************************************** */

.subjecttotals .subjecttotals__watermarkimagegravitymarker {
  transition:
    top 0.125s ease-in-out,
    right 0.125s ease-in-out,
    bottom 0.125s ease-in-out,
    left 0.125s ease-in-out,
    margin 0.125s ease-in-out,
    opacity 0.125s ease-in-out;
}

.gallery_image_overlay img,
.gallery_image_overlay {
  transition: opacity 0.25s ease-in-out;
}

div.orderImageControls {
  transition: border-color 0.5s ease-in-out, background-color 0.5s ease-in-out;
}

.accordion {
  transition: box-shadow 0.25s ease-in-out 0.25s;
}







.note {
  transition: background-color 0.25s ease-in-out;
}