/* The mobile view's webfont. An @import has to precede every rule in the
   file, so it leads the sheet rather than sitting with the block below. */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap");

.label,.glyphicon {
	margin-right:5px;
}

.pdr-no-items-message{
	margin-top: 20px !important;
}

.pdr-product-quantity {
	padding-left:0px;
}

.pdr-clear-bg {
	display:none;
}

.pdr-float-right {
	float: right;
}

.scrollable-menu {
	max-height: 400px;
	overflow: auto;
}

.dropdown {
	display: table-cell;
	padding-right:10px;
	padding-top:10px;
}

#pdr-number-field {
	width:100px;
}
#pdr-color-field {
	width:40px;
	padding:.7em .7em .7em .7em;
	height:16px;
}
#pdr-text-bg-field {
	width:40px;
	padding:.7em .7em .7em .7em;
	height:16px;
}

.pdr-shape-color{
	width:50px;
	padding:8px 8px;
}

.pdr-text-style-wrapper {
	display: unset !important;
}

button.pdr-text-style-fc, button.pdr-text-style-fbc {
	overflow: hidden;
	width: 2em;
	height: 2em;
	/* optional formatting below here */
	border-radius: 50%;
	box-shadow: 1px 1px 3px 0px grey;
	margin: 1em;
}

.ui[class*="right pointing"].label{
	z-index:0;
}

.pdr-content-section .menu {
	min-height: calc(110vh);
}

.canvas-container {
	margin: 0 auto;
}

.clipart-thumbnail-image:hover, .pdr-my-design-content img:hover {
	cursor: pointer;
	border: 4px solid #f00;
}

.pdr-tools {
	display:block ruby;
	margin-bottom:10px;
}
.pdr-text-tools {
	display: none;
}

.pdr-object-tools {
	display:none;
}

.pdr-paste-object-tools {
	display:none;
}

.pdr-shape-tools {
	display:none;
}

/*overrite css*/

.container-fluid {
	padding:0 !important;
	background:#4a4a4a;
}

.navbar{
	border: none !important;
	border-radius: 0px;
	margin-bottom: 0 !important;
	border-bottom: 1px solid #1c202733 !important;
}

.nav-header .navbar-brand{
	color: #000000 !important;
}

#pdr-nav-bar-content .navbar-nav li a.dropdown-toggle {
	color: #fff !important;
}

#pdr-nav-bar-content .navbar-nav li a.dropdown-toggle:focus,
#pdr-nav-bar-content .navbar-nav li a.dropdown-toggle:active{
	background: #fff !important;
	color: #000 !important;
	padding: 10px !important;
	border-radius: 5px;
	margin-top:5px;
}

#pdr-nav-bar-content .navbar-nav li a.pdr-cart-button {
	background: #fff !important;
	color: #000;
	padding: 10px !important;
	border-radius: 5px;
	margin-top:5px;
	margin-right: 15px;
	margin-left: 15px;
	border:1px solid #dadce0;
}

.navbar-right li a.pdr-cart-image {
	padding-bottom: 0px !important;
	padding-top: 10px !important;
	position: relative;
	text-align: center
}

.pdr-back-to-shop {
	color: #fff !important;
}

.pdr-back-to-shop:hover {
	text-shadow: 0 0 3px #000;
}

.navbar-right li a.pdr-cart-image small {
	position: absolute;
	color: #fff;
	left: 40px;
	top: 4px;
	background: #000;
	min-width:20px;
	min-height:20px;
	border-radius: 50%;

}

.pdr-sidebar-right {
	border-left: 1px solid #dadce0;
	background: #fff;
	margin-left:-1px;
}

.pdr-sidebar-left {
	height: 100%;
	padding: 0 !important;
	background:none !important;
	border-right: 1px solid #dadce0;
}

.btn-group {
	background:#3e3e3e !important;
	width:100%;
	padding: 10px;
}

.btn-group a {
	color: #fff !important;
}

.btn-group a.active{
	background: none !important;
	color: #fff !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	border-collapse: collapse;
}

.pdr-sidebar-left .tab-content {
	float: left;
	width: 100%;
	background: none;
	min-height:320px;
	max-height:720px;
	overflow-y: scroll;
}

.pdr-sidebar-left .tab-content .active {
	padding: 0px 10px;
}

.pdr-sidebar-left .tab-content h3 {
	color: #fff;
}

.pdr-product-quantity {
	margin-bottom: 15px;
	text-align: center;
}

.pdr-product-quantity input[type="text"] {
	text-align: center;
}

.pdr-content-section .menu {
	min-height: auto !important;
}

/* Clipart tab design */

.cliparts-container,
.pdr-custom-image-container,
.pdr-templates-container{
	float:left;
	width: 100%;
}

.cliparts-container .cliparts-thumbnail,
.pdr-my-design-content{
	float:left;
	width: 120px;
	height: 120px;
	margin-bottom:10px;
}

.pdr-custom-image-container {
	margin-bottom: 15px;
}

.cliparts-thumbnail img {
	float:left;
	width:80px;
	margin:10px;
}

/* Background Image tab design */

.pdr-background-images-container{
	float:left;
	width: 100%;
}

.pdr-background-images-container .background-image-thumbnail{
	float:left;
	width: 120px;
	height: 120px;
	margin-bottom:10px;
}

.background-image-thumbnail img {
	float:left;
	width:80px;
	margin:10px;
}

#pdr-clear-bg-image{
	display:none;
	text-align: right;
}

/*Shape tab design*/

.pdr-shapes-container {
	float:left;
	width:100%;
}

/* -----
SVG Icons - svgicons.sparkk.fr
----- */

.shape-thumbnail{
	float:left;
	width: 100px;
	height: 100px;
	margin-right: 10px;
	margin-top: 10px;
}

.shape-thumbnail svg{
	width:80px !important;
	height:80px !important;
}

.shape-thumbnail svg:hover,
.pdr-template img:hover{
	cursor: pointer;
	border: 4px solid #f00;
}

.pdr-template {
	float:left;
	width: 120px;
	height: 120px;
	margin-bottom: 10px;
	margin-right: 10px;
}

.pdr-template img {
	float:left;
	width:80px;
	margin:10px;
}

/*  footer design  */

.footer {
	position: relative;
	bottom: 0;
	width: 100%;
	height: 60px; /* Set the fixed height of the footer here */
	text-align:right;
	border-top: 1px solid #dadce0;
}
.footer-container {
	display: flex;
	float: right;
}

.footer .pdr-switch-btn {
	background: #fff !important;
	color: #000;
	padding: 10px !important;
	border-radius: 5px;
	margin: 10px 15px 0 15px;
	border: 1px solid #dadce0;
}

.footer .footer-container {
	background:#000;
	margin: 10px 15px 0 10px;
	border-radius: 5px;
}

.footer-container .pdr-zoom-out-btn,
.footer-container .pdr-zoom-in-btn {
	background: #000;
	color:#fff;
	border: none;
	padding: 7px 12px;
}

.footer-container .pdr-zoom-out-btn {
	border-right: 1px solid #ccc;
	border-bottom-left-radius: 5px;
	border-top-left-radius: 5px;
}

.footer-container .pdr-zoom-in-btn {
	border-left: 1px solid #ccc;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

.footer-container .pdr-zoom-range {
	margin: 10px;
}

.footer-container .pdr-zoom-value {
	margin: 10px 10px 0 0;
	color: #fff;
}

.pdr-switch-view-wrap {
	padding:15px 0;
}

/*Layer*/
.pdr_layers {
	max-height: 450px;
	overflow-y: scroll;
}
   
.pdr-layer-wrapper.active{
	background: #d4d4d5;
	padding: 5px 0;
	border-radius: 5px;
}

.pdr-layer-wrapper {
	display: flex;
	border-bottom: 1px solid #d4d4d5;
	padding: 7px 0;
}
   
.pdr-layer-wrapper .pdr-layer-image {
	width:10%; 
	
}
   
.pdr-layer-wrapper .pdr-layer-image img,
.pdr-layer-wrapper .pdr-layer-image i {
	width: 100%;
	height: auto;
	border:1px solid #d4d4d5;
	padding: 5px;
}
   
.pdr-layer-wrapper .pdr-layer-name-wrapper {
	width:58%; 
	padding-left: 10px;
}

.pdr-layer-wrapper .pdr-layer-object-name {
	font-size:10px; 
	font-style:italic;
}

/*
 * What the layer adds to the price, drawn only when it adds something. Neutral
 * rather than green, because the figure is a fact about the layer and not good
 * news, and tabular figures so it keeps its width as the digits change. The
 * markup carries no Semantic classes any more, so the shape is set here rather
 * than inherited from the stylesheet the theme happens to ship.
 */
.pdr-layer-wrapper .pdr-layer-price {
	display: inline-block;
	margin-left: 4px;
	padding: 1px 7px;
	border: 1px solid #e5e7eb;
	border-radius: 999px;
	background: #f3f4f6;
	color: #374151;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}
   
.pdr-layer-wrapper .pdr-layer-actions-wrapper {
	width:30%;
	padding-left: 10px; 
	text-align: right;
 }

.pdr-layer-wrapper .pdr-layer-actions-wrapper .hidden {
	display: none;
}
/*Layer*/

/* Images */
/* .pdr-user-image-lists {
	list-style: none;
	float:left;
	margin:10px;
	position:relative;
}

.pdr-image-list{
	width:100px;
	float:left;
	margin:10px;
} */
/* Images */

/* Responsive design */

@media only screen and (max-width: 768px) {
	.pdr-right-side-menu li {
		float:left;
	}

	.pdr-sidebar-left {
		height:auto;
	}

	.pdr-sidebar-right {
		float:left;
	}

	body.dimmable{
		min-width: auto !important;
	}
}

@media only screen and (min-width: 768px) {
	body:not(.pdr-designer-body) .pdr-label {
		display: none !important;
	}
	body:not(.pdr-designer-body) .ui.grid > .row > [class*="five wide"].column {
		width: 24.25% !important;
	}
	body:not(.pdr-designer-body) .eleven {
		width: 71.75%!important
	}
	body:not(.pdr-designer-body) .ui.grid>.row>[class*="seven wide"].column {
		width: 40.75% !important;
	}
	body:not(.pdr-designer-body) .ui.grid>.row>[class*="nine wide"].column {
		width: 58.25% !important;
	}
}

.pdr-user-images-container {
  max-height: 600px;
  overflow-y: auto;
  float: left;
}
	
.pdr-image-list-wrapper {
	width:100px;
	float:left;
	margin:5px;
	position: relative;
	list-style: none;
}

.pdr-image-list-wrapper .pdr-user-uploaded-image-list-delete {
  position: absolute;
  right: -3px;
  z-index: 100;
  background: #f00;
  border-radius: 50%;
  padding: 5px 5px;
  color: #fff;
  line-height: 10px;
  cursor: pointer;
}


.pdr-user-image-lists {
	display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
}

.pdr-image-list-wrapper img{
	width:100%;
	padding:2px;
}

.pdr-image-list-wrapper img:hover {
	border:2px solid grey;
	cursor: pointer;
}

#pdr-object-filters,
.pdr-object-filter-range-reset {
	cursor: pointer;
}

.pdr-object-filters-view {
	width:38% !important;
}

.pdr-object-filters-view img:not(.pdr-object-filter-selected) {
	cursor: pointer;
	border: 4px solid #fff;
}

.pdr-object-filters-view .pdr-object-filter-range-output {
	margin-left: 2px;
}

.pdr-object-filters-view img:hover,
.pdr-object-filter-selected {
	border: 4px solid #f00;
}

.pdr-object-filter-range {
	width:100% !important;
}

.pdr-object-filter-range-reset {
	font-size: 12px !important;
	margin: 0px 0px 0px -20px !important;
}

.pdr-warning-message{
	width: 50% !important;
	margin: 50px auto !important;
	padding: 40px !important;
	height: auto !important;
}


/* ==========================================================================
   Mobile view
   --------------------------------------------------------------------------
   Merged in from styles.css, which used to load as a sheet of its own when
   wp_is_mobile() picked the designer-mobile-body.php template.

   That template is still the only place this markup exists, so the rules that
   name it are left alone. The ones that do not - the reset, the base element
   rules, the height and bottom-navigation padding on the body - are confined
   to .pdr-designer-mobile, which pdr_get_designer_body_classes() puts on the
   body for that view only. Without that they would reach the desktop page,
   which has neither a bottom navigation nor a reason to be reset.
   ========================================================================== */

/*=============== GOOGLE FONTS ===============*/


/*=============== VARIABLES CSS ===============*/
.pdr-designer-mobile {
  --header-height: 3rem;

  /*========== Colors ==========*/
  --hue: 174;
  --sat: 63%;
  --first-color: hsl(var(--hue), var(--sat), 40%);
  --first-color-alt: hsl(var(--hue), var(--sat), 36%);
  --title-color: hsl(var(--hue), 12%, 15%);
  --text-color: hsl(var(--hue), 8%, 35%);
  --body-color: hsl(var(--hue), 100%, 99%);
  --container-color: #FFF;

  /*========== Font and typography ==========*/
  --body-font: 'Open Sans', sans-serif;
  --h1-font-size: 1.5rem;
  --normal-font-size: .938rem;
  --tiny-font-size: .625rem;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 99999;

  /*========== Bottom navigation ==========*/
  --nav-height: 4rem;
}

@media screen and (min-width: 968px) {
.pdr-designer-mobile {
	--h1-font-size: 2.25rem;
	--normal-font-size: 1rem;
  }
}

/*=============== BASE ===============*/
.pdr-designer-mobile * {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html:has(body.pdr-designer-mobile) {
  scroll-behavior: smooth;
}

/* Semantic UI pins html and body to `height: 100%`, which locks the document to a single
   viewport. Anything a section pushes past that is only reachable through the elastic
   overscroll, so it springs back as soon as the finger is lifted. Let the page grow instead.
   `:root` and the body class keep these ahead of the Semantic rules whatever the load order. */
:root,
body.pdr-designer-mobile {
  height: auto;
  min-height: 100vh;
}

/* Keep the last row of every section clear of the fixed bottom navigation, including the
   home indicator area on notched phones. */
body.pdr-designer-mobile {
  padding-bottom: calc(var(--nav-height) + 1rem);
  padding-bottom: calc(var(--nav-height) + 1rem + env(safe-area-inset-bottom, 0px));
}


.pdr-designer-mobile ul {
  list-style: none;
}

.pdr-designer-mobile a {
  text-decoration: none;
}

.pdr-designer-mobile img {
  max-width: 100%;
  height: auto;
}

/*=============== REUSABLE CSS CLASSES ===============*/
.section__title {
  font-size: var(--h1-font-size);
  color: var(--title-color);
  text-align: center;
  margin-bottom: 1.5rem;
}

/* A fixed height clipped long tabs (the product form with its attributes and the quantity).
   Fill the viewport when the content is short, grow with it otherwise. */
.section__height {
  height: auto;
  min-height: calc(100vh - var(--nav-height));
}

/*=============== LAYOUT ===============*/
.pdr-designer-mobile .container {
  max-width: 968px;
  margin-left: 1rem;
  margin-right: 1rem;
}

/*=============== HEADER ===============*/
.pdr_mobile_header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--container-color);
  z-index: var(--z-fixed);
  transition: .4s;
  display: contents;
}

/*=============== NAV ===============*/

.nav {
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__img {
  width: 32px;
  border-radius: 50%;
}

.nav__logo {
  color: var(--title-color);
  font-weight: 600;
}

.pdr-shape-tools {
	padding-top: 40px;
}

.nav__menu {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: var(--container-color);
  box-shadow: 0 -1px 12px hsla(var(--hue), var(--sat), 15%, 0.15);
  width: 100%;
  height: var(--nav-height);
  height: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: grid;
  align-content: center;
  border-radius: 1.25rem 1.25rem 0 0;
  transition: .4s;
  z-index: var(--z-fixed);
}



.nav__list,
.nav__link {
  display: flex;
}

.nav__link {
  flex-direction: column;
  align-items: center;
  row-gap: 4px;
  color: var(--title-color);
  font-weight: 600;
}

.nav__list {
  justify-content: space-around;
}

.nav__name {
  font-size: var(--tiny-font-size);
  /* display: none;*/
  /* Minimalist design, hidden labels */
}

.nav__icon {
  font-size: 1.5rem;
}

/*Active link*/
.active-link {
  position: relative;
  color: var(--first-color);
  transition: .3s;
}

/* Minimalist design, active link */
/* .active-link::before{
  content: '';
  position: absolute;
  bottom: -.5rem;
  width: 4px;
  height: 4px;
  background-color: var(--first-color);
  border-radius: 50%;
} */

/* Change background header */
.scroll-header {
  box-shadow: 0 1px 12px hsla(var(--hue), var(--sat), 15%, 0.15);
}

/*=============== MEDIA QUERIES ===============*/
/* For small devices */
/* Remove if you choose, the minimalist design */
@media screen and (max-width: 320px) {
.nav__name {
	display: none;
  }
}

/* For medium devices */
@media screen and (min-width: 576px) {
.nav__list {
	justify-content: center;
	column-gap: 3rem;
  }
}

body.pdr-designer-mobile {
  margin: 0;
}

/*nav {
	height: calc(var(--header-height) + 1.5rem);
  }*/
.nav__img {
  display: none;
}

.nav__icon {
  display: none;
}

.nav__name {
  font-size: var(--normal-font-size);
  /* display: block; */
  /* Minimalist design, visible labels */
}

.nav__link:hover {
  color: var(--first-color);
}

/* First design, remove if you choose the minimalist design */
.active-link::before {
  content: '';
  position: absolute;
  bottom: -.75rem;
  width: 4px;
  height: 4px;
  background-color: var(--first-color);
  border-radius: 50%;
}

.pdr-designer-mobile .ui.grid>.row>.column.pdr-text-tools {
  /*float: left;*/
  display: none;
}

.pdr-designer-mobile .ui.grid>.row>.column.pdr-object-tools {
  /*float:right;*/
  display: none;
}

/* Minimalist design */
/* .active-link::before{
	  bottom: -.75rem;
  } */

.pdr-designer-mobile i.sync.alternate.icon.pdr-object-filter-range-reset {
  display: contents;
}


/* ==========================================================================
   Template colours
   --------------------------------------------------------------------------
   Merged in from template-color.css, which used to load as a sheet of its own
   on every designer page.

   Read this before editing it: the ten schemes below are not scoped to
   anything, so each one overrides the one above it and only the last can ever
   apply. Nothing in the plugin carries a .navbar, .footer or .btn-group class
   either, so as it stands the block styles the active theme's markup, if that
   theme happens to use those names, and nothing of the designer's own.
   ========================================================================== */

/*Multiple color template select css */

/*style-1 (Dark Blue) */

.navbar,
.footer {
	background: #1b00d1;
} 
.btn-group a.active {
	border-bottom: 2px solid #1b00d1;
}

/*style-2 (Gossamer) */

.navbar,
.footer {
	background: #099d84;
} 
.btn-group a.active {
	border-bottom: 2px solid #099d84;
}

/*style-3 (Rio Grande) */

.navbar,
.footer {
	background: #c5d100;
} 
.btn-group a.active {
	border-bottom: 2px solid #c5d100;
}

/*style-4 (Green) */

.navbar,
.footer {
	background: #00d111;
} 
.btn-group a.active {
	border-bottom: 2px solid #00acd1;
}

/*style-5 (Purple) */

.navbar,
.footer {
	background: #69048f;
} 
.btn-group a.active {
	border-bottom: 2px solid #69048f;
}

/*style-6 (Cardinal Pink) */

.navbar,
.footer {
	background: #8f0470;
} 
.btn-group a.active {
	border-bottom: 2px solid #8f0470;
}

/*style-7 (Cherry Pie) */

.navbar,
.footer {
	background: #2f014b;
} 
.btn-group a.active {
	border-bottom: 2px solid #2f014b;
}

/*style-8 (Red) */

.navbar,
.footer {
	background: #ef0000;
} 
.btn-group a.active {
	border-bottom: 2px solid #ef0000;
}

/*style-9 (Corn) */

.navbar,
.footer {
	background: #d7b600;
} 
.btn-group a.active {
	border-bottom: 2px solid #d7b600;
}

/*style-10 (Paprika) */

.navbar,
.footer {
	background: #8f0430;
} 
.btn-group a.active {
	border-bottom: 2px solid #8f0430;
}