.mainPanel {
  width: 800px;
  border: 1px solid #ddd;
  margin: 20px;
  padding: 20px;
}

.mainPanel h4 { /* title used above the design element*/
  display: none;
}

.controlsPanel {
  width: 350px;
  border: 1px solid #ddd;
  margin: 20px;
}

  .controlsPanel .instruction {
    text-align: center;
    padding: 10px;
    font-family: 'Arial';
  }

/***
*** Add to basket panel (by default this includes basket qty, and price info that needs to be hidden)
***/
  .add-to-basket-panel {
    
  }
    .add-to-basket-panel .basket-title,
    .add-to-basket-panel .price-label,
    .add-to-basket-panel .price-value,
    .add-to-basket-panel .qty-label, 
    .add-to-basket-panel .qty-value {
      display: none;
    }
    
    .add-to-basket-panel .add-to-basket-link {
      width: 100%;
      text-align: center;
      display: block;
      background: lightblue;
      padding: 20px 0;
      font-size: 25px;
      color: #fff;
    }


/***
*** IMAGE EDIT PANEL - used when the selected item is an editable image
***/
.uicImageEditPanel {
  background-color: red;
}
  .base-image-edit-panel { /* wrapper around the initial options (the parent options - edit, fit/fill, rotate, move/crop) */
    background-color: #efefef;
  }
    .base-image-edit-panel button {
      width: 110px;
      height: 110px;
      border: 1px solid #ddd;
    }
    
    .base-image-edit-panel button::before { /* icons used from fontawesome*/
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      font-size: 46px;
      margin-bottom: 20px;
    }
  
    .base-image-edit-panel .edit-btn::before      { content: "\f303"; }
    .base-image-edit-panel .fit-fill-btn::before  { content: "\f0b2"; }
    .base-image-edit-panel .rotate-btn::before    { content: "\f2f1"; }
    .base-image-edit-panel .crop-btn::before      { content: "\f125"; }


/***
*** IMAGE EDIT BUTTONS AFTER THE USER CLICKS EDIT
***/
  .image-edit-button-wrapper button,
  .image-edit-button-wrapper .title {
    width: 110px;
    height: 110px;
    border: 1px solid #ddd;
    display: inline-block;
    background-color: #efefef;
  }
    .image-edit-button-wrapper button::before,
    .image-edit-button-wrapper .title::before { /* icons used from fontawesome*/
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      font-size: 46px;
      margin-bottom: 20px;
    }
    
    .image-edit-button-wrapper .done-btn::before                { content: "\f058"; }
    .image-edit-button-wrapper .title::before                   { content: "\f303"; }
    .image-edit-button-wrapper .colour-correction-btn::before   { content: "\f1fb"; }
    .image-edit-button-wrapper .filters-btn::before             { content: "\f0b0"; }
    .image-edit-button-wrapper .brightness-contrast-btn::before { content: "\f042"; }
    .image-edit-button-wrapper .reset-image-btn::before         { content: "\f2ea"; }

/***
*** COLOUR CORRECTION BUTTONS  
***/
  .image-colour-correction-button-wrapper {
    
  }
  
  .image-colour-correction-button-wrapper .done-btn,
  .image-colour-correction-button-wrapper .title,
  .image-colour-correction-button-wrapper .uicAdjustmentsPanel .saturation-down-btn,
  .image-colour-correction-button-wrapper .uicAdjustmentsPanel .saturation-up-btn {
    width: 110px;
    height: 110px;
    border: 1px solid #ddd;
    display: inline-block;
    background-color: #efefef;
  }
  
    .image-colour-correction-button-wrapper button::before,
    .image-colour-correction-button-wrapper .title::before,
    .image-colour-correction-button-wrapper .uicAdjustmentsPanel .saturation-down-btn::before,
    .image-colour-correction-button-wrapper .uicAdjustmentsPanel .saturation-up-btn::before { /* icons used from fontawesome*/
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      font-size: 46px;
      margin-bottom: 20px;
    }
    
    .image-colour-correction-button-wrapper .done-btn::before                 { content: "\f058"; }
    .image-colour-correction-button-wrapper .colour-correction-title::before  { content: "\f1fb"; }
    .image-colour-correction-button-wrapper .saturation-down-btn::before      { content: "\f056"; }
    .image-colour-correction-button-wrapper .saturation-up-btn::before        { content: "\f055"; }
  
    .image-colour-correction-button-wrapper .uicAdjustmentsPanel  .current-saturation-value {
      color: cyan;
    }


/***
*** IMAGE FILTER BUTTONS  
***/
  .uicFilterPanel {
    
  }
  
  .uicFilterPanel .done-btn,
  .uicFilterPanel .title,
  .uicFilterPanel button {
    width: 110px;
    height: 110px;
    border: 1px solid #ddd;
    display: inline-block;
    background-color: #efefef;
  }
    .uicFilterPanel button::before,
    .uicFilterPanel .title::before {
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      font-size: 46px;
      margin-bottom: 20px;
    }
    
    .uicFilterPanel .done-btn::before                 { content: "\f058"; }
    .uicFilterPanel .title::before                    { content: "\f0b0"; }
    .uicFilterPanel .filter-greyscale-btn::before     { content: "\f042"; }
    .uicFilterPanel .filter-sepia-btn::before         { content: "\f492"; }
    .uicFilterPanel .filter-vintage-btn::before       { content: "\f28d"; }
    .uicFilterPanel .filter-sharpen-btn::before       { content: "\f5cb"; }
    
    .selected-filter { /* turn selected tiles green */
      background-color: #2ca647 !important;
    }
    
    .uicFilterPanel .filter-blur-btn,
    .uicFilterPanel .filter-emboss-btn,
    .uicFilterPanel .filter-pixelate-btn {
      /* temporarily hidden - phil might want some of them back */
      display: none !important;
    }

/***
*** IMAGE BRIGHTNESS AND CONTRAST
***/
  .image-brightness-contrast-button-wrapper {
    
  }
  
  .image-brightness-contrast-button-wrapper .done-btn,
  .image-brightness-contrast-button-wrapper .title, 
  .image-brightness-contrast-button-wrapper button {
    width: 110px;
    height: 110px;
    border: 1px solid #ddd;
    display: inline-block;
    background-color: #efefef;
  }
    
    .image-brightness-contrast-button-wrapper button::before,
    .image-brightness-contrast-button-wrapper .title::before {
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      font-size: 46px;
      margin-bottom: 20px;
    }
    
    .image-brightness-contrast-button-wrapper .done-btn::before             { content: "\f058"; }
    .image-brightness-contrast-button-wrapper .title::before                { content: "\f042"; }
    .image-brightness-contrast-button-wrapper .brightness-down-btn::before  { content: "\f056"; }
    .image-brightness-contrast-button-wrapper .brightness-up-btn::before    { content: "\f055"; }
    .image-brightness-contrast-button-wrapper .contrast-down-btn::before    { content: "\f056"; }
    .image-brightness-contrast-button-wrapper .contrast-up-btn::before      { content: "\f055"; }

    .image-brightness-contrast-button-wrapper .uicAdjustmentsPanel  .current-brightness-value,
    .image-brightness-contrast-button-wrapper .uicAdjustmentsPanel  .current-contrast-value {
      color: cyan;
    }
    
/***
*** IMAGE BRIGHTNESS AND CONTRAST
***/
    .image-fit-fill-button-wrapper {
      
    }
    
    .image-fit-fill-button-wrapper .done-btn,
    .image-fit-fill-button-wrapper .title, 
    .image-fit-fill-button-wrapper button {
      width: 110px;
      height: 110px;
      border: 1px solid #ddd;
      display: inline-block;
      background-color: #efefef;
    }
    
    .image-fit-fill-button-wrapper .title::before, 
    .image-fit-fill-button-wrapper button::before {
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      font-size: 46px;
      margin-bottom: 20px;
    }
    
    .image-fit-fill-button-wrapper .done-btn::before            { content: "\f058"; }
    .image-fit-fill-button-wrapper .title::before               { content: "\f0b2"; }
    
    .image-fit-fill-button-wrapper .fill-btn::before            { content: "\f0b2"; }
    .image-fit-fill-button-wrapper .fill-btn-selected::before   { content: "\f0b2"; }
    .image-fit-fill-button-wrapper .fit-btn::before             { content: "\f422"; }
    .image-fit-fill-button-wrapper .fit-btn-selected::before    { content: "\f422"; }
    .image-fit-fill-button-wrapper .apply-to-all-btn::before    { content: "\f302"; }
    
    
    .image-fit-fill-button-wrapper .fit-btn-selected,
    .image-fit-fill-button-wrapper .fill-btn-selected { 
      background-color: #2ca647 !important;
    }
    
    
/***
*** IMAGE ROTATE PANEL
***/
    .image-rotate-button-wrapper {
      
    }
    
    .image-rotate-button-wrapper .done-btn,
    .image-rotate-button-wrapper .title, 
    .image-rotate-button-wrapper button {
      width: 110px;
      height: 110px;
      border: 1px solid #ddd;
      display: inline-block;
      background-color: #efefef;
    }
    
    .image-rotate-button-wrapper .title::before, 
    .image-rotate-button-wrapper button::before {
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      font-size: 46px;
      margin-bottom: 20px;
    }
    
    .image-rotate-button-wrapper .done-btn::before            { content: "\f058"; }
    .image-rotate-button-wrapper .title::before               { content: "\f2f1"; }
    .image-rotate-button-wrapper .left-5-btn:before           { content: "\f0e2"; }
    .image-rotate-button-wrapper .left-90-btn:before          { content: "\f0e2"; }
    .image-rotate-button-wrapper .right-5-btn::before         { content: "\f01e"; }
    .image-rotate-button-wrapper .right-90-btn::before        { content: "\f01e"; }

/***
*** IMAGE POSITION (MOVE/CROP)
***/
  .image-position-button-wrapper {
    
  }
  
  .image-position-button-wrapper .done-btn,
  .image-position-button-wrapper .title, 
  .image-position-button-wrapper button {
      width: 110px;
      height: 110px;
      border: 1px solid #ddd;
      display: inline-block;
      background-color: #efefef;
    }
    
    .image-position-button-wrapper .title::before, 
    .image-position-button-wrapper button::before {
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      font-size: 46px;
      margin-bottom: 20px;
    }
    
    .image-position-button-wrapper .done-btn::before        { content: "\f058"; }
    .image-position-button-wrapper .title::before           { content: "\f125"; }
    .image-position-button-wrapper .left-btn::before        { content: "\f060"; }
    .image-position-button-wrapper .right-btn::before       { content: "\f061"; }
    .image-position-button-wrapper .up-btn::before          { content: "\f062"; }
    .image-position-button-wrapper .down-btn::before        { content: "\f063"; }
    .image-position-button-wrapper .zoom-in-btn::before     { content: "\f00e"; }
    .image-position-button-wrapper .zoom-out-btn::before    { content: "\f010"; }
    .image-position-button-wrapper .landscape-btn::before   { content: "\f302"; }
    .image-position-button-wrapper .portrait-btn            { background: url("/assets/image/portrait.svg") no-repeat 62px 20px; }

/***
*** EDIT TEXT MAIN PANEL (shown when the user has selected a text item)
***/
  .uicEditText {
    
  }
  
    .uicEditText .edit-text-title,
    .uicEditText button {
      width: 110px;
      height: 110px;
      border: 1px solid #ddd;
      display: inline-block;
      background-color: #efefef;
    }
    
    .uicEditText .title::before, 
    .uicEditText button::before {
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      font-size: 46px;
      margin-bottom: 20px;
    }
    
    .uicEditText .edit-text-title {
      background: url(/assets/image/font.svg) 30px 33px no-repeat;
      background-color: #ddd;
    }
    
    .uicEditText .font-family-btn::before { content: "\f031"; }
    .uicEditText .font-color-btn::before  { content: "\f53f"; }
    .uicEditText .font-size-btn::before   { content: "\f034"; }
    .uicEditText .font-text-btn::before   { content: "\f11c"; }

/***
*** CHANGE FONT PANEL
***/
  .uicFontFamilPanel {
    
  }
  
  .uicFontFamilPanel button,
  .uicFontFamilPanel .title {
    width: 110px;
    height: 110px;
    border: 1px solid #ddd;
    display: inline-block;
    background-color: #efefef;
  }
  
    .uicFontFamilPanel .title::before, 
    .uicFontFamilPanel button::before {
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      font-size: 46px;
      margin-bottom: 20px;
    }
    
    .uicFontFamilPanel .done-btn::before      { content: "\f058"; }
    .uicFontFamilPanel .title::before         { content: "\f031"; }
    
    .uicFontFamilPanel .font-family-list { /*wrapper div around the ul */
      height: 200px;
      overflow-y: scroll;
      width: 300px;
      background-color: #efefef;
    }

      .uicFontFamilPanel .font-family-list ul { 
        list-style: none;
        padding: 0;
        margin: 0;
        width: 285px;
      }
      
        .uicFontFamilPanel .font-family-list ul li { 
          padding: 0;
          margin: 0;
          width: 100%;
          text-align:center;
        }
        
        .uicFontFamilPanel .font-family-list ul li span { 
          font-size: 20px;
          line-height: 35px;
        }
        .uicFontFamilPanel .font-family-list ul li span:nth-child(2),
        .uicFontFamilPanel .font-family-list ul li span:nth-child(3),
        .uicFontFamilPanel .font-family-list ul li span:nth-child(4) { 
          display: none;
        }
        
/***
*** TEXT COLOUR PANEL
***/       
  .uicColourPanel {
    
  }
  
  .uicColourPanel button,
  .uicColourPanel .title {
    width: 110px;
    height: 110px;
    border: 1px solid #ddd;
    display: inline-block;
    background-color: #efefef;
  }
  
  .uicColourPanel .title::before, 
  .uicColourPanel button::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 46px;
    margin-bottom: 20px;
  }
  
  .uicColourPanel .done-btn::before      { content: "\f058"; }
  .uicColourPanel .title::before         { content: "\f53f"; }
  
  .uicColourPanel .font-colour-list { /*wrapper div around the ul */
      height: 200px;
      overflow-y: scroll;
      width: 300px;
      background-color: #efefef;
    }

      .uicColourPanel .font-colour-list ul { 
        list-style: none;
        padding: 0;
        margin: 0;
        width: 285px;
      }
      
        .uicColourPanel .font-colour-list ul li { 
          padding: 0;
          margin: 0;
          width: 100%;
          height: 35px;
          text-align:center;
        }
   
/***
*** FONT SIZE PANEL
***/     
  .uicFontSizePanel {
    
  }
  
    .uicFontSizePanel button,
    .uicFontSizePanel .title {
      width: 110px;
      height: 110px;
      border: 1px solid #ddd;
      display: inline-block;
      background-color: #efefef;
    }
    
    .uicFontSizePanel .title::before, 
    .uicFontSizePanel button::before {
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      font-size: 46px;
      margin-bottom: 20px;
    }
    
    .uicFontSizePanel div { /* internal wrapper around the smaller and larger buttons */ 
      display: inline;
    }
    
    .uicFontSizePanel .done-btn::before               { content: "\f058"; }
    .uicFontSizePanel .title::before                  { content: "\f034"; }
    .uicFontSizePanel .decrease-font-size-btn::before { content: "\f056"; }
    .uicFontSizePanel .increase-font-size-btn::before { content: "\f055"; }


/***
*** USER TEXT PANEL (editing the text input value)
***/
  .uicTextPanel {
    
  }
  
    .uicTextPanel button,
    .uicTextPanel .title {
      width: 110px;
      height: 110px;
      border: 1px solid #ddd;
      display: inline-block;
      background-color: #efefef;
    }
    
    .uicTextPanel .title::before, 
    .uicTextPanel button::before {
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      font-size: 46px;
      margin-bottom: 20px;
    }
    
    .uicTextPanel .done-btn::before               { content: "\f058"; }
    .uicTextPanel .title::before                  { content: "\f11c"; }

    .uicTextPanel input[type="full"] {
      padding: 10px;
    }

/***
*** PRINTS SPECIFIC CONTROLS (GRID VIEW)
***/
.grid-view {
  width: 100%;
  max-width: 100%;
  overflow-y: hidden;
  overflow-x: hidden;
}

.grid-view > div > div > div {
  margin-right: 10px;
}

.grid-view-tile {
  border: var(--default-border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.selected-tile {
  background-color: #e5e5e5;
  border: solid 4px var(--primary);
}

.grid-view-tile .thumbnail-index {
  width: 48px;
  height: 48px;
  text-align: center;
  position: absolute;
  top: -1px;
  left: -1px;
  z-index: 10;
  line-height: 30px;
  color: #fff;
  background-color: var(--primary);
  font-size: 22px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-view-tile .btn-toolbar {
  width: 100%;
  max-width: 480px;
  display: flex;
  padding-bottom: 10px;
  flex-wrap: nowrap;
  flex-direction: row;
  margin: 10px 0 auto;
  align-items: center;
}

.grid-view .dataTableContainer {
  border: 0;
}
.grid-view .dataTableContainer > div > div > div > div {
  border: 0;
}

.grid-view-tile .btn-toolbar .name-size-div {
  text-overflow: ellipsis;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 20px;
  width: 100%;
}

.grid-view-tile .btn-toolbar .name-size-div .item-name {
  width: 85%;
}

.grid-view-tile .btn-toolbar .name-size-div .item-size {
  font-weight: bold;
}

.grid-view-tile .btn-toolbar .print-qty-div {
  display: flex;
}

.grid-view-tile .btn-toolbar .selected-icon,
.grid-view-tile .btn-toolbar .not-selected-icon {
  margin: 0 15px;
}

.selected-icon {
  background: url("/assets/image/grey-green-check.svg") no-repeat center;
  height: 40px;
  width: 80px;
}

.not-selected-icon {
  background: url("/assets/image/grey-empty-check.svg") no-repeat center;
  height: 40px;
  width: 80px;
}

.grid-view-tile .canvas-container {
  margin: 0 auto;
}

.grid-view-tile .btn-toolbar .item-qty {
  width: 45px;
  font-size: 20px;
  font-weight: 600;
  border: 4px solid #cacaca;
  text-align: center;
}

/***
*** PRINTS SPECIFIC CONTROLS (GALLERY VIEW)
***/
.prints-designer-wrapper > div {
  overflow-y: hidden !important;
}

.gallery-view {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.main-gallery-div {
  position: relative;
  flex: 6;
  margin: auto auto;
  box-sizing: content-box;
  width: 100%;
}

.main-gallery-div .btn-toolbar .item-qty {
  width: 75px;
  font-size: 30px;
  font-weight: 600;
  height: 100%;
  border: 4px solid #cacaca;
  text-align: center;
}

.main-gallery-div .btn-toolbar .name-size-div {
  color: #333;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 22px;
}

.item-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  width: 440px;
}

.main-gallery-div .btn-toolbar .name-size-div > span:nth-child(2) {
  font-weight: bolder;
}

.priSlider {
  display: flex;
  flex: 3;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

.priScrollImages {
  display: flex;
  flex-direction: row;
  width: 75vw !important;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.gallery-view .main-gallery-div .canvas-container {
  /* width: 1100px !important; */
  margin: 0 auto;
}

.gallery-view {
}

.thumbnail-tile {
  display: flex !important;
  height: 100% !important;
  position: relative !important;
  float: left !important;
  width: 350px !important;
  width: 280px !important;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 1px;
  margin-right: 50px !important;
}

.preview-wrapper {
  border: solid 1px #cacaca;
  height: 60%;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.preview-wrapper div div {
  width: 100%;
  height: 100%;
  text-align: center;
}

.preview-wrapper div div img {
  margin-top:23px;
}

.preview-wrapper-selected {
  height: 60%;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  border: 2px solid var(--primary);
  position: relative;
}

.preview-wrapper .thumbnail-index,
.preview-wrapper-selected .thumbnail-index {
  position: absolute;
  z-index: 2;
  top: -1px;
  left: -1px;
  width: 45px;
  height: 45px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
}

.preview-wrapper .thumbnail-index {
  background-color: var(--disabled-dark);
}

.preview-wrapper-selected .thumbnail-index {
  background-color: var(--primary);
}

.thumbnail-header {
  color: #333;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 15%;
  margin: 15px 0 5px;
}

.print-size {
  display: flex;
  flex: 1;
  align-items: center;
  font-size: 20px;
}

.print-name {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 20px;
}

#productDesignerContent .preview-wrapper > div,
#productDesignerContent .preview-wrapper-selected > div {
  /*background-color: red;*/
  height: 190px !important;
  width: 100%;
}

#productDesignerContent .preview-wrapper > div .uicInactiveCanvas,
#productDesignerContent .preview-wrapper-selected > div .uicInactiveCanvas {
  display: flex;
  justify-content: center;
  height: 100%;
  align-items: center;
}

#productDesignerContent
  .preview-wrapper
  > div
  .uicInactiveCanvas
  .canvas-container,
#productDesignerContent
  .preview-wrapper-selected
  > div
  .uicInactiveCanvas
  .canvas-container {
  /*background-color: green;*/
}

.print-size {
  font-weight: 700;
  justify-content: flex-end;
}

.thumbnail-tile .btn-toolbar {
  display: flex;
  width: 100% !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  margin-bottom: 15px;
}

.thumbnail-tile .btn-toolbar .item-qty {
  border: 2px solid grey;
  text-align: center;
  width: 40px;
  font-size: 26px;
  font-weight: 800;
  height: 40px;
  margin: 5px;
}

.thumbnail-tile .btn-toolbar .decrease-qty-btn::before,
.thumbnail-tile .btn-toolbar .increase-qty-btn::before {
  font-size: 32px;
}

.thumbnail-tile .btn-toolbar .decrease-qty-btn::before {
  color: var(--disabled-dark);
}

.thumbnail-tile .btn-toolbar .increase-qty-btn::before {
  color: var(--primary);
}

.item-index-box {
  width: 48px;
  height: 48px;
  display: flex;
  color: #fff;
  background-color: var(--primary);
  position: absolute;
  top: -4px;
  left: -4px;
  z-index: 1;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
}

.main-gallery-div .btn-toolbar {
  width: 100%;
  display: flex;
  background-color: white;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  padding: 4px;
  box-sizing: border-box;
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

.prev-image-btn-disabled,
.next-image-btn-disabled {
  width: 150px;
  background-color: var(--disabled);
  border-radius: 5px;
  border: none;
  padding: 10px !important;
  font-size: 40px;
}

.prev-image-btn::before,
.prev-image-btn-disabled:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 40px;
  content: "\f137";
  color: #fff;
}

.prev-image-btn,
.next-image-btn {
  width: 150px;
  background-color: var(--primary);
  border-radius: 5px;
  border: none;
  padding: 10px !important;
  font-size: 40px;
}

.next-image-btn:active,
.prev-image-btn:active {
  background-color: #8dc9ed;
}

.next-image-btn::before,
.next-image-btn-disabled::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 40px;
  content: "\f138";
  color: #fff;
}

.print-qty-div {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.increase-qty-btn,
.decrease-qty-btn {
  background: none;
  border: none;
  display: inline;
}

.increase-qty-btn:active,
.decrease-qty-btn:active {
  transform: scale(1.1);
}

.decrease-qty-btn::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 40px;
  content: "\f056";
  color: #666666;
  color: var(--disabled-dark);
}

.increase-qty-btn::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 40px;
  content: "\f055";
  color: var(--primary-dark);
}


/**
** PRINTS (controls panel)
***/
.print-grid-view .duplicate-btn::before     { content: "\f0c5"; }
.print-grid-view .size-btn::before          { content: "\f545"; }
.print-grid-view .print-gallery-btn::before { content: "\f3e0"; }
.print-grid-view .print-grid-btn::before    { content: "\f00a"; }

  .uicImageEditPanel button,
  .uicImageEditPanel .title {
    width: 110px;
    height: 110px;
    border: 1px solid #ddd;
    display: inline-block;
    background-color: #efefef;
    color: #000;
  }
  
  .uicImageEditPanel button::before,
  .uicImageEditPanel .title::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 40px;
    color: #000;
  }
  
  .uicImageEditPanel .done-btn::before          { content: "\f058"; }
  .uicImageEditPanel .size-title::before        { content: "\f545"; }
  .uicImageEditPanel .size-9x7-btn::before      { content: "\f03e"; }
  .uicImageEditPanel .size-4x6-btn::before      { content: "\f03e"; }
  .uicImageEditPanel .size-6x4-btn::before      { content: "\f03e"; }
  .uicImageEditPanel .size-5x7-btn::before      { content: "\f03e"; }
  .uicImageEditPanel .size-6x8-btn::before      { content: "\f03e"; }
  .uicImageEditPanel .size-6x4-btn::before      { content: "\f03e"; }
  .uicImageEditPanel .size-6x4BD-btn::before    { content: "\f03e"; }
  .uicImageEditPanel .size-7x5-btn::before      { content: "\f03e"; }
  .uicImageEditPanel .size-7x5BD-btn::before    { content: "\f03e";}
  .uicImageEditPanel .size-8x6-btn::before      { content: "\f03e"; }
  .uicImageEditPanel .size-8x6BD-btn::before    { content: "\f03e"; }
  .uicImageEditPanel .size-10x8-btn::before     { content: "\f03e"; }
  .uicImageEditPanel .size-10x10-btn::before    { content: "\f0c8"; }
  .uicImageEditPanel .size-12x10-btn::before    { content: "\f03e"; }
  .uicImageEditPanel .size-14x11-btn::before    { content: "\f03e"; }
  .uicImageEditPanel .size-12x12-btn::before    { content: "\f0c8"; }
  .uicImageEditPanel .size-16x12-btn::before    { content: "\f03e"; }
  .uicImageEditPanel .size-16x16-btn::before    { content: "\f0c8"; }
  .uicImageEditPanel .size-18x12-btn::before    { content: "\f03e"; }
  .uicImageEditPanel .size-20x8-btn::before     { content: "\f03e"; }
  .uicImageEditPanel .size-A4-btn::before       { content: "\f03e"; }
  .uicImageEditPanel .size-A3-btn::before       { content: "\f03e"; }
  .uicImageEditPanel .size-A2-btn::before       { content: "\f03e"; }
  .uicImageEditPanel .size-20x10-btn::before    { content: "\f03e"; }
  .uicImageEditPanel .size-20x16-btn::before    { content: "\f03e"; }
  .uicImageEditPanel .size-20x20-btn::before    { content: "\f0c8"; }
  .uicImageEditPanel .size-20x30-btn::before    { content: "\f03e"; }
  .uicImageEditPanel .size-30x10-btn::before    { content: "\f03e"; }
  .uicImageEditPanel .size-12x8-btn::before     { content: "\f03e"; }
  .uicImageEditPanel .size-4x4-btn::before      { content: "\f0c8"; }
  .uicImageEditPanel .size-5x5-btn::before      { content: "\f0c8"; }
  .uicImageEditPanel .size-6x6-btn::before      { content: "\f0c8"; }
  .uicImageEditPanel .size-8x8-btn::before      { content: "\f0c8"; }
  .uicImageEditPanel .apply-to-all-btn::before  { content: "\f302"; }
  .uicImageEditPanel .increase-prints-qty-btn:before { content: "\f067"; }
  .uicImageEditPanel .decrease-prints-qty-btn::before { content: "\f068"; }
  
  button.current-size {
    background-color: green !important;
  }
/***
*** USER IMAGES PANEL START
***/
.add-more-images-btn {
  display: none !important; /*NOT USED ON THE WEBSITE (another web specfic image upload section is used)*/
}
  
#other-images-panel { /*wrapper around the whole images div*/
  text-align: center;
  width: 350px;
}
  #other-images-panel .title { /*span used as an instruction to the user */
    
  }
  
  #other-images-panel .userImageListWrapper-div { /*wrapper div which contains any user images and the add images button*/
    border: 1px solid #ddd;
    background-color: #efefef;
    text-align: left;
  }
  
    #other-images-panel .addImage-div {
      width: 110px;
      height: 110px;
      border: 1px solid #ddd;
    }
    #other-images-panel .addImage-div::before { /* div used as an add button for user to upload more images */
      content: "+";
    }
    
    #other-images-panel .userImage-div { /*wrapper around each user uploaded image*/
      width: 110px;
      height: 110px;
      border: 1px solid #ddd;
      position: relative;
    }
      #other-images-panel .userImage-thumbnail {
        width: 110px;
        height: 110px;
      }
      #other-images-panel .deleteImage-span {
        width: 20px;
        height: 20px;
        background-color: red;
        color: #fff;
        position: absolute;
        z-index: 100;
        top: 0;
        right: 0;
        text-align: center;
      }
      
      #other-images-panel .deleteImage-span::before {
        content: "x";
      }
      
      
/***
*** IMAGE LIST USED ON SEPARATE IMAGE UPLOAD SCREEN TO ADD IMAGES (e.g. before getting to prints)
***/      
  #imageListContent {
    
  }
  
  #imageListContent .userImageListWrapper-div { /*wrapper arounnd the add button and the list of uploaded image tiles */
    
  }
    
    #imageListContent .userImageListWrapper-div .addImage-div { /*the add button */
      width: 110px;
      height: 110px;
      border: 1px solid #ddd;
    }
    
    #imageListContent .userImageListWrapper-div .addImage-div::before { /* div used as an add button for user to upload more images */
      content: "+";
    }
    
    #imageListContent .userImageListWrapper-div .userImageList-div { /*wrapper around the uploaded image tiles */
      
    }
    
      #imageListContent .userImageListWrapper-div .userImageList-div .userImage-div { /*each image tile*/
        width: 110px;
        height: 110px;
        border: 1px solid #ddd;
        position: relative;
      }
      
        #imageListContent .userImageListWrapper-div .userImageList-div .userImage-div img.userImage-thumbnail {
          width: 110px;
          height: 110px;
        }
        
        #imageListContent .userImageListWrapper-div .userImageList-div .userImage-div .deleteImage-span {
          width: 20px;
          height: 20px;
          background-color: red;
          color: #fff;
          position: absolute;
          z-index: 100;
          top: 0;
          right: 0;
          text-align: center;
        }
        
        #imageListContent .userImageListWrapper-div .userImageList-div .userImage-div .deleteImage-span::before {
          content: "x";
        }
    
      
 
/***
*** ADJUST BORDER PANEL
***/
.uicBorderPanel {
  
}
.uicBorderPanel .border-title {
  all: unset;
  width: 110px;
  height: 110px;
  border: 1px solid #ddd;
  display: inline-block;
  background-color: #efefef;
}
.uicBorderPanel button {
  display:inline-block;
  width: 110px;
  height: 110px;
  border: 1px solid #ddd;
}
.uicBorderPanel button::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 46px;
  margin-bottom: 20px;
}
.uicBorderPanel .done-btn::before           { content: "\f058"; }
.coloured-border-btn::before,
.coloured-border-btn-selected::before       { content: "\f53f"; }
.stretched-border-btn::before,
.stretched-border-btn-selected::before      { content: "\f31e"; }
.mirrored-border-btn::before,
.mirrored-border-btn-selected::before       { content: "\f24d"; }
.image-wrap-border-btn::before, 
.image-wrap-border-btn-selected::before     { content: "\f35d"; }

.image-wrap-border-btn-selected,
.mirrored-border-btn-selected,
.stretched-border-btn-selected,
.coloured-border-btn-selected {
  background-color: #2ca647 !important;
}

/***
*** ADJUST BORDER COLOUR PANEL
***/
.uicBorderColourPanel {
  
}
.uicBorderColourPanel .title {
  all: unset;
  width: 110px;
  height: 110px;
  border: 1px solid #ddd;
  display: inline-block;
  background-color: #efefef;
}
.uicBorderColourPanel button {
  display:inline-block;
  width: 110px;
  height: 110px;
  border: 1px solid #ddd;
}
.uicBorderColourPanel .done-btn::before {
    content: "\f058";
}
.uicBorderColourPanel button::before, .uicBorderColourPanel .title::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 46px;
    margin-bottom: 20px;
}
  .uicBorderColourPanel .border-colour-list { /*wrapper div around the ul */
      height: 200px;
      overflow-y: scroll;
      width: 300px;
      background-color: #efefef;
    }

      .uicBorderColourPanel .border-colour-list ul { 
        list-style: none;
        padding: 0;
        margin: 0;
        width: 285px;
      }
      
        .uicBorderColourPanel .border-colour-list ul li { 
          padding: 0;
          margin: 0;
          width: 100%;
          height: 35px;
          text-align:center;
        }
      
/***
*** PRODUCT TYPE SPECIFIC STYLING
***/
   
/* MUG SELECTOR */
.mug-settings-hidden,
.mug-designer-hidden { 
  display: none;
}
.mug-settings {
  overflow-y: scroll;
  overflow-x: hidden;
  
  /* align items horizontally so they don't show off page */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 50px;
}
.mug-type {
  
}
  .mug-type.selected { /* add grene border to selected item */
    border: 4px solid green;
  }
.mug-type img {
  width: 100%;
}
.mug-settings > button:nth-child(1) { /* back button */
  border:0;
  outline:none;
}


/* PHOTO IDS */
.photo-id-designer {
  
}
.photoid-designer .guide-html-panel {
  width: 200px;
}
.photoid-designer .guide-html-panel h2 {
  margin:0;
}
.photoid-email-panel {
  
}
  .photoid-email-panel h4 {
    display:block; /*show title*/
  }
  .photoid-email-panel .photoid-email-details {
    
  }
  .photoid-email-panel .photoid-email-details span input {
    display:block;
    padding:5px;
  }
  
/* CRYSTAL NOTES PANEL */
.crystal-notes-panel {
}
.crystal-notes-panel > label {
}
.crystal-notes-panel > span {
  width: 100%;
}
.crystal-notes-panel > span > textarea {
  width: 100%;
}

/*  COASTER, CARD, TSHIRT, PHOTOBOOKS, CUSTOM TYPE, CANVAS */
.coaster-designer,
.card-designer,
.photobook-designer,
.tshirt-designer,
.custom-type-designer,
.canvas-designer {
  
}
.coaster-designer h4,
.card-designer h4,
.photobook-designer h4,
.tshirt-designer h4,
.custom-type-designer h4,
.canvas-designer h4 {
  text-align: center;
}

/***
*** PAGE SELECTOR BUTTONS (PREV/NEXT & CURRENT PAGE NAME) -
    FOR ALL PAGE SELECTORS
***/
.pageSelector {
  
}
.pageSelector .aspect-name, 
.pageSelector span { /* adds small margin between buttons */
  margin:0 10px;
}
.pageSelector .next-arrow, 
.pageSelector .next-btn {
  padding: 5px 25px 5px 5px;
  display: inline-block;
  background: url("/assets/image/right-chevron-white.svg") right 5px center no-repeat lightblue;
  background-size:15px;
  margin: 0 5px;
  cursor:pointer;
}
.pageSelector .prev-arrow, 
.pageSelector .prev-btn {
  padding: 5px 5px 5px 25px;
  display: inline-block;
  background: url("/assets/image/left-chevron-white.svg") left 5px center no-repeat lightblue;
  background-size:15px;
  margin: 0 5px;
  cursor:pointer;
}
  .pageSelector .next-arrow-disabled, 
  .pageSelector .next-btn-disabled {
    padding: 5px 25px 5px 5px;
    display: inline-block;
    background: url("/assets/image/right-chevron-white.svg") right 5px center no-repeat #efefee;
    background-size:15px;
    margin: 0 5px;
    color:#808080;
  }
  .pageSelector .prev-arrow-disabled, 
  .pageSelector .prev-btn-disabled {
    padding: 5px 5px 5px 25px;
    display: inline-block;
    background: url("/assets/image/left-chevron-white.svg") left 5px center no-repeat #efefee;
    background-size:15px;
    margin: 0 5px;
    color:#808080;
  }

/***
*** ALL OPTION SELECTORS - E.G FOR TSHIRT SIZE SELECTION, PRINT ORIENTATION ETC
***/
.optionSelector {

}
.optionSelector > select {
  padding: 2px;
  margin:2px;
}
.orientationSelector {
  
}
.orientationSelector > select {
  padding:2px;
  margin:2px;
}