:root {
  --primary: #4a4a4a;
  --primarydark: #4a4a4a;
  --primarylight: #d1d1d1;
  --secondary: #349cd9;
  --secondarydark: #595959;
  --secondarylight: #d1d1d1;
  --search-bg: white;
  --search-hover: #848484;
}
h1 {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  color: var(--primary);
}
span,
a,
p,
input {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
}
nav#main-nav {
  height: 5rem;
  background: #d1d1d1;
  display: inline-block;
}
div#contentrow {
  transform: none !important;
  -webkit-transform: none !important;
  -moz-transform: none !important;
  -ms-transform: none !important;
  -o-transform: none !important;
}

/* == Top Navigation Bar == */
.navbar-top {
  background-color: #d1d1d1;
  color: #4a4a4a;
  font-weight: 600;
  font-size: 0.9rem !important;
  font-family: "Montserrat", sans-serif;
  padding: 3rem 12rem 1rem;
  margin-bottom: 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.navbar-top a {
  color: #4a4a4a;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}

.navbar-top a:hover {
  color: #349cd9;
}

.separator {
  margin: 0 0.5em;
}

.lower-nav {
  background-color: #d1d1d1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 12rem !important;
  flex-wrap: wrap;
}

.lower-nav img {
  height: 75px;
  max-width: 100%;
}

.lower-nav .icons {
  display: flex;
  align-items: center;
  gap: 1.8rem !important;
  margin-left: auto;
}

.lower-nav .icons a {
  background-color: #4a4a4a;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  transition: background-color 0.3s ease;
}

.lower-nav .icons a svg {
  fill: white;
  width: 17px;
  height: 17px;
}

.lower-nav .icons a:hover {
  background-color: #349cd9 !important;
}

.lower-nav .icons a:hover svg path {
  fill: white !important;
}

hr.nav-divider {
  height: 1px;
  background-color: #4a4a4a;
  border: none;
  margin: 0;
}

.search-bar-container {
  background-color: white !important;
  padding: 1rem 12rem;
  font-family: "Montserrat", sans-serif;
}

.search-box .searchbutton {
  background-color: #4a4a4a !important;
}
.search-bar-container input[type="text"],
.search-bar-container input[type="search"] {
  background-color: white;
}

.search-bar-container input[type="text"],
.search-bar-container input[type="search"] {
  font-size: 1rem;
  padding: 0.5rem;
  width: 100%;
  max-width: 500px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

@media screen and (max-width: 1024px) {
  .navbar-top,
  .lower-nav,
  .search-bar-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lower-nav {
    flex-direction: column;
    align-items: flex-start;
  }

  .lower-nav .icons {
    margin-top: 1rem;
    margin-left: 0;
  }
}
.container-special,
.catfish-container,
.container {
  padding-bottom: 10px;
}
.headermenu .lower-nav .icons a:nth-child(3) span {
  margin-left: 4px;
  position: absolute;
  background-color: #349cd9 !important;
  color: white;
  font-size: 0.95rem;
  padding: 3px 6px;
  border-radius: 999px;
  white-space: nowrap;
  text-align: center;
  line-height: 1;
  z-index: 10;
  transform: translate(-20px, -18px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

@import url("https://cdn01.devia.com/tenenz/site/css/override.css");

/*modal design selection bigger*/

@media screen and (min-width: 768px) {
  .modal-content,
  .modal-card {
    width: calc(100vw - 2.5em);
  }
}

/*MegaEdit Theme Selector
      */
.me-theme-dialog {
  min-width: 500px;
  width: calc(100vw - 2.5em);
  display: block;
}
.me-theme-ui-dropdown .meuiHtmlListMenu {
  margin-top: 10px;
}
.me-theme-ui-dropdown .meuiHtmlListMenuItem {
  outline: none;
  border: none;
  padding: 5px;
  border-radius: 4px;
}
.me-theme-ui-dropdown .meuiHtmlListMenuItem a {
  text-decoration: none;
}
.me-theme-ui-dropdown .meuiHtmlListMenuItem:hover {
  background: #dddddd;
}
.me-theme-ui-dropdown .meuiHtmlListLabel,
.me-theme-ui-dropdown .meuiHtmlListCurrentShortLabel,
.me-theme-ui-dropdown .meuiHtmlListCurrentValue {
  text-align: center;
  display: block;
  font-size: 18px;
  border-bottom: 1px solid #cfcfcf;
  height: 800px;
}
.me-theme-ui-dropdown span.description {
  text-align: center;
  display: block;
}
.me-theme-ui-dropdown span.thumbnail {
  margin-bottom: 10px;
}

/*thumbnail back selection window*/

.subtitle.is-6.button {
  font-weight: 700;
  color: gray;
}
h3.modal-title.modal-card-title.ng-binding {
  font-weight: 700;
  color: white;
}
.modal-header.modal-card-head.ng-scope {
  background-color: gray;
}
.catfish-button:hover,
.catfish-button.is-hovered,
.button:hover,
.button.is-hovered {
  border-color: #4a4a4a;
}

/*editor changes*/

.editorTop.pane .headerWrapper .currentCanvasSizeWrapper .current_prod_name {
  display: none;
}
.editorTop.pane {
  background-color: gray;
  color: white;
}

/*page list*/

.pageListContainer .pageSelectorContainer {
  background-color: none !important;
}
h5.pagelist_title.label.ng-scope {
  display: none;
}
.pageLabel.label.ng-binding {
  display: none;
}

/*back button on top*/

a.btn.btn-default.btn-me.backButton.catfish-button.has-text-hidden-mobile {
  margin-left: 1rem;
  background: none;
  border: solid 1px white;
  color: white;
}
a.btn.btn-default.btn-me.backButton.catfish-button.has-text-hidden-mobile:hover {
  background: rgb(138, 138, 138);
  border: solid 1px white;
  color: white;
}

/*menu button on top in admin*/

.dropdown > .dropdown-trigger > button.catfish-button {
  background: none;
  border: solid 1px white;
  color: white;
}
.dropdown > .dropdown-trigger > button.catfish-button:hover {
  background: rgb(138, 138, 138);
  border: solid 1px white;
  color: white;
}

/*preview button */

.viewControlButton.previewButton.catfish-button.has-text-hidden-mobile.btn.btn-primary.pageItemInline {
  background: none;
  border: solid 1px white;
  color: white;
  font-weight: 700;
}
.viewControlButton.previewButton.catfish-button.has-text-hidden-mobile.btn.btn-primary.pageItemInline:hover {
  background: rgb(138, 138, 138);
  border: solid 1px white;
  color: white;
  font-weight: 700;
}

/*pdf button*/

button.viewControlButton.pdfDownloadButton.catfish-button.has-text-hidden-mobile.btn.btn-primary.pageItemInline {
  background: none;
  border: solid 1px white;
  color: white;
  font-weight: 700;
}

button.viewControlButton.pdfDownloadButton.catfish-button.has-text-hidden-mobile.btn.btn-primary.pageItemInline:hover {
  background: rgb(138, 138, 138);
  border: solid 1px white;
  color: white;
  font-weight: 700;
}

/*add to cart button*/

button.nextStepButton.catfish-button.has-text-hidden-mobile.btn.btn-success.btn-lg.ng-scope {
  background: #209cee;
  color: white;
  font-weight: 700;
}

button.nextStepButton.catfish-button.has-text-hidden-mobile.btn.btn-success.btn-lg.ng-scope:hover {
  background: #2e629b;
  color: white;
  font-weight: 700;
}

/*button hover*/

.catfish-button.is-primary,
.catfish-button.is-primary,
.button.is-primary,
.button.is-primary {
  background-color: #209cee;
}
.catfish-button.is-primary:hover,
.catfish-button.is-primary.is-hovered,
.button.is-primary:hover,
.button.is-primary.is-hovered {
  background-color: #2e629b;
}

/*display field button*/

.field.has-addons .control:last-child .catfish-button {
  display: block;
  background-color: white;
  color: #4a4a4a;
  font-weight: 400;
}

/*hiding back button, undo, redo text*/

span.UR_button_title.ng-binding {
  display: none;
}

/* front and back of product buttons*/

span.catfish-button.btn.btn-primary.pagenrbtn.ng-binding.is-static::before {
  content: "Current View:";
  padding-right: 3px;
}
.memobilePageClass.buttons.ng-scope > button.catfish-button.btn.btn-me {
  background-color: #209cee;
  color: white;
  font-weight: 700;
}
.memobilePageClass.buttons.ng-scope > button.catfish-button.btn.btn-me:hover {
  background-color: #2e629b;
}
.memobilePageClass.buttons.ng-scope > .catfish-button[disabled],
.button[disabled] {
  background-color: #2e629b;
  color: white;
  font-weight: 700;
}
.memobilePageClass.buttons.ng-scope > .catfish-button.is-static,
.button.is-static {
  background-color: transparent;
  color: #4a4a4a;
  font-weight: 700;
}
.memobilePageClass.buttons.ng-scope
  > button.catfish-button.btn.btn-me
  > span.icon.is-small
  > .fa-angle-right:before,
.t-arrow-next:before {
  content: "Back";
  font-family: "Montserrat";
  font-weight: 700;
}
span.icon.is-small {
  padding-left: 14px;
  padding-right: 14px;
}
.memobilePageClass.buttons.ng-scope
  > button.catfish-button.btn.btn-me
  > span.icon.is-small
  > .fa-angle-left:before,
.t-arrow-prev:before {
  content: "Front";
  font-family: "Montserrat";
  font-weight: 700;
}
.memobilePageClass.buttons.ng-scope {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 10px;
}
.memobilePageClass {
  left: 0;
  transform: none;
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
}
.memobilePageClass.buttons.ng-scope
  > button.catfish-button.btn.btn-me
  > span.icon.is-small {
  padding-left: 57px;
  padding-right: 57px;
}

/*field container width*/

.pane.ui-layout-east.freeTargetContainer.ui-layout-pane.ui-layout-pane-east.is-open.is-opened {
  width: 30%;
}

/* thumbnail image background color */

.image.is-1by1 {
  background: #ebebeb;
}

/*mobile view*/

@media screen and (max-width: 929px) {
  .subtitle.is-6 {
    font-size: 0.8rem;
  }
  .columns.is-mobile.is-multiline.is-vcentered.is-variable.is-3 {
    width: 100%;
  }
  .subtitle.is-6.button {
    font-weight: 700;
    color: #4a4a4a;
    padding-left: 10px;
    padding-right: 10px;
    white-space: normal;
  }
  /*add to cart button*/
  .catfish-button.has-text-hidden-mobile .confirmextratxt,
  .button.has-text-hidden-mobile .confirmextratxt {
    display: block;
  }
  /*top buttons*/
  button.viewControlButton.pdfDownloadButton.catfish-button.has-text-hidden-mobile.btn.btn-primary.pageItemInline {
    background: #cbcbcb;
    border: none;
    color: #323232;
  }
  a.btn.btn-default.btn-me.backButton.catfish-button.has-text-hidden-mobile {
    background: #cbcbcb;
    border: none;
    color: #323232;
  }
  .memobilePageClass.buttons.ng-scope {
    width: 100%;
  }
  .buttons {
    display: flex;
    justify-content: center;
  }
  .viewControlButton.previewButton.catfish-button.has-text-hidden-mobile.btn.btn-primary.pageItemInline {
    display: visible;
    border: none;
    background-color: #ff3860;
  }
  button.viewControlButton.pdfDownloadButton.catfish-button.has-text-hidden-mobile.btn.btn-primary.pageItemInline {
    display: none;
  }
  span.extratxt.ng-scope {
    padding-left: 5px;
  }
  .catfish-button.has-text-hidden-mobile .UR_button_title,
  .catfish-button.has-text-hidden-mobile .extratxt,
  .catfish-button.has-text-hidden-mobile .alltxt,
  .button.has-text-hidden-mobile .UR_button_title,
  .button.has-text-hidden-mobile .extratxt,
  .button.has-text-hidden-mobile .alltxt {
    display: block;
  }
  .subtitle.is-6.button {
    display: block;
    width: 100%;
    padding-top: 5px;
  }
  .editorMain {
    width: 100% !important;
  }
  .editorMain.pane.ui-layout-center.ui-layout-pane.ui-layout-pane-center {
    inset: unset;
  }
  .pane.ui-layout-east.freeTargetContainer.ui-layout-pane.ui-layout-pane-east.is-open.is-opened {
    width: 100% !important;
  }
  .freeTargetContainer .customScriptUi-freeTarget {
    overflow-y: scroll;
  }
}

/*tab bg color for admin*/

.editorLeft #leftPaneTabs .ui-tabs-panel {
  background-color: rgb(152, 152, 152);
}

/*hiding menu and target fields but not on admin*/

.megaEditBodyClass-RegisteredUser
  .field.has-addons
  .control:last-child
  .catfish-button[class~="meuiButton"] {
  display: none;
}
/* The line above is hidding these buttons EVERYWHERE on ME, but we need these buttons to show for the alignment dropdown */
.megaEditBodyClass-RegisteredUser
  .ui-layout-east
  .field.has-addons
  .control:last-child
  .catfish-button[class~="meuiButton"] {
  display: block !important;
}
.megaEditBodyClass-RegisteredUser .me-global-menu {
  display: none;
}
.field.has-addons .control:first-child .catfish-button,
.field.has-addons .control:first-child .catfish-input,
.field.has-addons .control:first-child .catfish-select,
.field.has-addons .control:first-child .button,
.field.has-addons .control:first-child .input,
.field.has-addons .control:first-child .select select {
  border-radius: 4px;
}

.catfish-select {
  margin-bottom: 10px;
}

/*redo undo buttons hidden but not on admin*/

.megaEditBodyClass-RegisteredUser
  a.catfish-button.has-text-hidden-mobile.btn.btn-default.btn-me.viewControlButton {
  display: none;
}
.megaEditBodyClass-RegisteredUser
  a.catfish-button.has-text-hidden-mobile.btn.btn-default.btn-me.viewControlButton:hover {
  display: none;
}

/*zoom options hidden but not on admin*/

.megaEditBodyClass-RegisteredUser .zoom_options.buttons.ng-scope {
  display: none;
}

/*back button hidden but not on admin*/
.megaEditBodyClass-RegisteredUser
  a.btn.btn-default.btn-me.backButton.catfish-button.has-text-hidden-mobile {
  display: none;
}

/*select options 2 in a row not 3*/

.MEUIColumnLayout.ng-scope.ItemsList .columns.is-mobile > .column.is-4 {
  width: 50%;
}

/* Postcard Separator Line Styling */
.postcardSeparator {
  border-top-width: 2px !important;
}

/*editor title*/

.label.is-small {
  font-size: 1.25rem !important;
  width: 100%;
  font-weight: 500;
}
.label.is-small.EditorTitle {
  font-size: 1.728em !important;
  font-weight: 500;
  border-bottom: 0px;
}

/*new postcard transparent layout selector*/
.layoutimagestyling .modal-card-body .catfish-button.is-fullwidth {
  background: #ebebeb;
}
.layoutimagestyling .modal-card-body .subtitle.is-6.button {
  width: 100%;
  background: white;
  border-radius: 0px;
}
.layoutimagestyling img.layout-thumbnail {
  background: white;
  height: unset;
  object-fit: contain !important;
  filter: drop-shadow(0px 5px 10px #4a4a4a);
  -webkit-filter: drop-shadow(0px 5px 10px #4a4a4a);
  transform: translate(0px, 25%) scale(0.85);
  -webkit-transform: translate(0px, 25%) scale(0.85);
  -moz-transform: translate(0px, 25%) scale(0.85);
  -ms-transform: translate(0px, 25%) scale(0.85);
  -o-transform: translate(0px, 25%) scale(0.85);
}
/*character limit counter*/
.characterCounter {
  color: red;
  font-size: x-small;
  background: #e6f5fb;
  padding-left: 10px;
  transform: scale(1.02);
  padding-bottom: 10px;
}
.characterLimitReached {
  color: red;
}
/*changing desktop to 4 columns on back selection*/
.columns.is-mobile > .column.is-4 {
  width: 25%;
}
@media screen and (max-width: 1087px) {
  .columns.is-mobile > .column.is-4 {
    width: 33%;
  }
}
@media screen and (max-width: 800px) {
  .columns.is-mobile > .column.is-4 {
    width: 50%;
  }
}
@media screen and (max-width: 580px) {
  .columns.is-mobile > .column.is-4 {
    width: 100%;
  }
}

/* Adjustment for alignment button dropdown being off screen, does apply to app dropdowns */
.page-dynamicproduct-editor .ui-layout-east .dropdown-menu {
  min-width: unset;
}
.page-dynamicproduct-editor
  .ui-layout-east
  .dropdown-menu
  .dropdown-content
  .dropdown-item {
  padding-left: initial;
  padding-right: initial;
}

/*added for postcards*/
.meTagProduct .label.is-fullwidth.MEUIFormField-Label.ng-binding.ng-scope {
  background: #e6f5fb;
  margin-bottom: 0px;
  padding: 10px;
  margin-top: 10px;
}
.meTagProduct .meuiLabel {
  margin-top: 10px;
  margin-bottom: 0px;
  padding: 0px;
  background: transparent !important;
}
.megaEditLabel {
  margin-bottom: 0px;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 30px;
}
.megaEditDropDownItem {
  width: 100%;
  padding: 5px;
}
.meTagProduct .label.is-small.EditorTitle,
.megaEditTitle {
  margin-bottom: 10px;
  padding: 0px;
  margin-top: 0px;
  background: transparent;
  font-size: 1.728em !important;
  font-weight: 500;
}

.meTagProduct .field.MEUIFormField.ng-scope.has-addons {
  background: #e6f5fb;
  padding: 10px;
  padding-top: 0px;
}
.meTagProduct .column.ng-scope.ng-isolate-scope.meuiColumnLayout.is-12 {
  padding: 0px;
}
.meTagProduct .columns.is-mobile.is-multiline.is-vcentered.is-variable.is-3 {
  padding: 20px;
}
.meTagProduct .label.is-small.EditorTitle {
  margin-bottom: 10px;
}
.meTagProduct
  .columns.is-mobile.is-multiline.is-vcentered.is-variable.is-3
  .catfish-button {
  margin-bottom: 10px;
}
.meTagProduct .label.is-small {
  margin-bottom: 10px;
  font-weight: 700;
  margin-top: 20px;
}
.meTagProduct .field.MEUIFormField.ng-scope.uiFieldFormatting.has-addons {
  margin-left: 8px;
  margin-right: 8px;
  margin-bottom: 10px;
  flex-direction: column;
}
.meTagProduct .catfish-input,
.meTagProduct .catfish-textarea.is-fullwidth,
.meTagProduct .dropdown-trigger.is-fullwidth button,
.meTagProduct .FontSizeInput {
  border-color: #209cee !important;
  border-radius: 4px !important;
  -webkit-border-radius: 4px !important;
  -moz-border-radius: 4px !important;
  -ms-border-radius: 4px !important;
  -o-border-radius: 4px !important;
}
.layoutimagestyling .modal-card-body .subtitle.is-6.button {
  font-size: 12px;
  text-wrap: auto;
}
h3.modal-title.modal-card-title.ng-binding {
  display: flex;
  justify-content: space-between;
}
button#closeDialogButton {
  background: white;
  border: 0px;
  font-weight: 700;
  color: gray;
}
#mCSB_1_container
  .columns.is-mobile.is-multiline.is-vcentered.is-variable.is-3 {
  display: flex;
  gap: 15px;
}