/*@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Open+Sans:300,400,700|Source+Sans+Pro:300,400,700|Material+Icons&subset=latin-ext");
 */
:root{
    --primary-color : #CAE7EB;
    --ultra-light-gray : #fafafa;
    --light-gray: #d8d8d8;
    --active-gray: #484848;
    --hover-black: #414141;
    --big-font: 1.3rem;
    --normal-text: 0.875rem;
    --stnd-black: #111111;
    --stnd-black-2: #484848;
    --stnd-hover-gray: #f5f5f5;
    --stnd-natural-gray: #f5f5f5;
    --stnd-hover-border-gray: #929292;
    --stnd-border-gray :#e3e3e3;
    --border-radius: 8px;
}

/* Media query for smaller screens */
@media (max-width: 992px) {
       :root {
        --big-font: 1.2rem; /* Smaller font size for mobile */
       }
}


html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body{
   overflow: hidden;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}


.main-content {
   padding-left: 0 !important;
   padding-right: 0 !important;
   max-width: 100vw !important;
}

#div_block-232-7 {
   display: none;
}

#bottom-header {
   margin-bottom: 0;
   display: none;
}


p{
    font-size:var(--normal-text);
}

a {
    background-color: transparent
}

a.category-read-more {
    color: #000;
    font-weight: 500;
    letter-spacing:1px;
}

a:active,
a:hover {
    outline: 0
}

abbr[title] {
    border-bottom: 1px dotted
}

b,
strong {
    font-weight: bold
}

dfn {
    font-style: italic
}

.width-full{
   width: 100%;
}

h1 {
    font-size: 2em;
    margin: 0.67em 0
}

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -0.5em
}

sub {
    bottom: -0.25em
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 1em 40px
}

hr {
    box-sizing: content-box;
    height: 0
}

pre {
    overflow: auto
}

.active-block{
    display:grid !important;
}

.grid-horizontal-uni{
   display: grid;
   grid-auto-rows: 1fr;
   gap: 16px;
}

.flex-between-row{
    display: flex;
    justify-content: space-between;
    flex-direction:row;
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

#toolwrap input:focus, #toolwrap select:focus{
   outline: 0;
   background-color: #fff;
   color: #666;
   border-color: #1e87f0;
}

button {
    overflow: visible
}

button,
select {
    text-transform: none
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled],
html input[disabled] {
    cursor: default
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0
}

.button-white-effect:hover{
  background-color: #eee; 
}

.button-white-effect:active{
  background-color: #ddd; 
}

.button-dark-effect:hover{
  background-color: var(--stnd-black-2); 
}

.button-dark-effect:active{
  background-color: var(--hover-black); 
}

.stnd-combined-buttons {
    display: flex;
    border: 1px solid var(--light-gray);
    border-radius: var(--border-radius);
    overflow: hidden;
   font-size: 0.875rem;
}

.stnd-combined-buttons button {
    border-radius: 0;
    box-shadow: none;
    border-right: 1px solid var(--light-gray);
}

.stnd-combined-buttons button:last-child {
   border-right: 0px;
}

.sgnm-s-distance{
   margin-bottom: 8px;
}


select{
    background: #fefefe;
    position: relative;
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    margin: 0.3rem 0;
    padding: 0.5em 1em;
    cursor: pointer;
    white-space: nowrap;
    width: 100%;
    border: 1px solid var(--light-gray);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url(https://www.svgrepo.com/show/80156/down-arrow.svg);
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-position: calc(100% - 16px);
}


.toolbar .select2-container--default .select2-selection.select2-selection--single {
    padding: 0.5em 1em;
    height: fit-content;
}

.toolbar .select2-container--default .select2-selection--single .select2-selection__arrow b{
   margin-left: -16px;
   margin-top: 8px;
}

input {
    line-height: normal
}


/*inputs */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0
}

.tool input[type=radio]:checked {
    background: #292929 !important;
    box-shadow: none !important;
    border: 1px solid #292929;
}
input[type="number"]{
    border-radius: var(--border-radius);
    border: 1px solid var(--light-gray);
    padding: 0.25rem;
    height: 34px;
    padding-left: 6px;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="search"] {
   -webkit-appearance: textfield;
   box-sizing: content-box
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
   -webkit-appearance: none
}


/* increment wrap */
.stdn-sign-amount-wrp {
   display: flex;
   width: fit-content;
   outline: 1px solid var(--light-gray);
   border-radius: var(--border-radius);
   padding: 0.2rem;
   overflow: hidden;
   align-items: center;
}

.stdn-incrament-btn{
   display: flex;
   align-items: center;
   justify-content: center;
   border: none;
   background: none;
   cursor: pointer;
   width: 40px;
   height: 40px;
   border-radius: 0.4rem;
}

.stdn-incrament-btn:hover{
   background: #eee;
}

.stdn-incrament-btn:active{
   background: #ddd;
}

.stdn-amount-input{
   width: 3ch;
   text-align: center;
   min-width: 1.2rem;
   font-size: 16px;
   line-height: 1.5;
   width: fit-content;
   max-width: 5ch;
   padding: 0 .25rem;
   outline: none;
   border: none !important;
   -moz-appearance: textfield;
}

.stdn-amount-input::-webkit-outer-spin-button,
.stdn-amount-input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}


fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em
}

legend {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: bold
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

td,
th {
    padding: 0
}

.dont-display{
    display:none !important;
}

.chevron::before {
    border-style: solid;
    border-width: 0.25em 0.25em 0 0;
    content: '';
    display: inline-block;
    height: 0.5em;
    left: 0.15em;
    position: relative;
    top: 0.15em;
    transform: rotate(-45deg);
    vertical-align: top;
    width: 0.5em
}

.chevron.right:before {
    top: 0.25em;
    left: 0;
    transform: rotate(45deg)
}

.chevron.top:before {
    top: 0.65em
}

.chevron.bottom:before {
    top: 0.25em;
    transform: rotate(135deg)
}

.chevron.left:before {
    left: 0.25em;
    transform: rotate(-135deg)
}

#content-holder{
    position: relative;
    height:100%;
}
div#inner_content-23-7{
    height:100%;
}
section#section-2-13{
    height:100%;
}

.width-full{
    width:100%;
}

.flex-gap-m{
    gap:0.5rem;
}

body,
html {
    font-size: 12pt;
    font-family: 'Roboto', sans-serif
}

a {
    text-decoration: none
}

a:hover {
    text-decoration: underline
}

.pagewidth {
    width: 80rem;
    margin: auto;
    box-sizing: border-box
}

.pagewidth.margin-bottom {
    margin-bottom: 2rem
}

.contentwidth {
    width: 100%;
    margin: auto;
    box-sizing: border-box
}


.contentwidth.center {
    text-align: center
}

.contentwidth.narrow_text {
    font-weight: 300;
    color: #1d1d1d
}

.everything {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: left 0.2s ease-in-out;
    -moz-transition: left 0.2s ease-in-out;
    transition: left 0.2s ease-in-out
}

.water {
    position: absolute;
    width: 100%;
    height: 5rem;
    background-color: #232323
}

.water.waves::before {
    content: '';
    display: block;
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    height: 17rem;
    background: url("assets/waves.svg") center bottom;
    background-size: cover
}

.water.big {
    height: 32rem
}

.water.medium {
    height: 12rem
}

.splash {
    width: 100%;
    height: 338px;
    background: #eee;
    background-size: cover;
    background-position: center center;
    position: relative;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -js-flex;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -ms-flex-align: center
}


.bigassshadow {
    display: none
}

.adding-to-cart-splash {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 1rem;
    z-index: 11;
    border-radius: 2rem;
    padding: 35px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: rgb(255 255 255 / 45%);
    border: 1px solid rgba(255, 255, 255, .25);
    box-shadow: 0 0 10px 1px rgb(0 0 0 / 25%);
    backdrop-filter: blur(15px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.cart-splash-icons {
    display: grid;
    grid-auto-flow: column;
    gap: 2rem;
    margin-bottom: 3rem;
}

.cart-splash-icons i {
    color: black;
    font-size: 2rem;
    /*animation: blink 3s infinite */;
}



.cart-splash-text {
    font-size: 1.5rem;
    font-family: 'Noto Sans';
    font-weight: 600;
    color: #000;
    letter-spacing: 0.5rem;
    border-right: 2px solid black;
    display:flex;
    height: 2.2rem;
}
.cart-splash-text span {
    white-space: pre;
    overflow:hidden;
}

/*Message area and messages*/
#toast-message-area{
   top: 0;
   left: 0;
   right: 0;
   width: 100%;
   max-width: 600px;
   margin-left: auto;
   margin-right: auto;
}

.stdn-form-event-info-wrap {
  margin: 10px 0;
}

.stdn-form-message {
  padding: 12px 16px;
  margin: 10px 0;
  border-radius: 8px;
  font-weight: 500;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 300ms ease, transform 300ms ease;
  cursor: pointer;
}

.stdn-form-message.stdn-show {
  opacity: 1;
  transform: translateY(0);
}

.stdn-form-message-icon {
  margin-right: 12px;
  display: flex;
}

.stdn-form-message-text {
  flex: 1;
}

.stdn-form-message-loading {
  background-color: #f0f7ff;
  border-left: 4px solid #2196f3;
  color: #0d47a1;
}

.stdn-form-message-error {
  background-color: #ffebee;
  border-left: 4px solid #f44336;
  color: #b71c1c;
}

.stdn-form-message-success {
  background-color: #e8f5e9;
  border-left: 4px solid #4caf50;
  color: #1b5e20;
}

.stdn-form-message-info {
  background-color: #f5f5f5;
  border-left: 4px solid #9e9e9e;
  color: #212121;
}

.stdn-loading-spinner {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(33, 150, 243, 0.3);
  border-radius: 50%;
  border-top-color: #2196f3;
  animation: stdn-spin 1s linear infinite;
}

@keyframes stdn-spin {
  to { transform: rotate(360deg); }
}

/* Shake animation for error messages */
@keyframes stdn-shake {
  10%, 90% {
    transform: translateX(-1px);
  }
  20%, 80% {
    transform: translateX(2px);
  }
  30%, 50%, 70% {
    transform: translateX(-4px);
  }
  40%, 60% {
    transform: translateX(4px);
  }
}

.stdn-shake {
  animation: stdn-shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}



ul.gallery {
    list-style-type: none;
    margin: 1rem 0;
    padding: 0
}

ul.gallery li {
    display: inline-block;
    color: #0A55A3;
    box-sizing: border-box;
    border-radius: 3px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    margin-right: 1rem
}

ul.gallery li img {
    margin: 1rem 1rem 0 1rem
}

ul.gallery li .measurements {
    font-size: 0.8em;
    text-align: center;
    margin-bottom: 0.5rem
}

ul.gallery li .actions {
    background: #f5f5f5;
    padding: 0.5rem;
    text-align: right
}

ul.gallery li .actions button {
    display: inline-block
}

button.discreet {
    background: transparent;
    border: 0;
    font-size: 0.7em;
    font-weight: bold;
    text-transform: uppercase
}

button.discreet .material-icons {
    vertical-align: middle;
    font-size: 1.2em
}

h2 {
    font-color: #2d3e6e;
    font-weight: 300;
    font-size: 1.5em
}

h3 {
    text-transform: uppercase;
    font-color: #2d3e6e;
    font-weight: 700;
    font-size: 1.3em
}

a.depth,
button.depth {
    background: transparent;
    color: #fff;
    border: 0;
    border-radius: 0.25em;
    padding: 0.5em 1.5em;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid #fff;
    text-decoration: none
}

a.depth.primary,
button.depth.primary {
    background: #fefefe;
    color: #004175
}

.flat,
a.flat,
button.flat {
   text-decoration: none;
   display: inline-block;
   background: #fff;
   color: #000;
   border: 0;
   height: 100%;
   width: 100%;
   border-radius: 0.5em;
   padding: 1rem 1rem;
   font-size: 14px;
   cursor: pointer;
   line-height: 1.2;
   font-weight: normal;
   -webkit-transition: 0.3s;
   -moz-transition: 0.3s;
   transition: 0.3s;
   text-align: center;
}

.material-wrapper button.flat{
    padding: 16px 20px;
}


.flat:hover,
a.flat:hover,
button.flat:hover {
    background: #7bbebd24;
    border-radius: var(--border-radius);
}

.flat.active,
a.flat.active,
button.flat.active {
    background: var(--primary-color);
}

a.flat.primary,
button.flat.primary {
    background: var(--primary-color);
    color: #fff !important
}


a.flat.primary.active,
button.flat.primary.active {
    background: var(--primary-color);
    box-shadow: 0 0 1px #CFD8DC
}

.primary-button-color,
.button-border.active{
    background: var(--primary-color);
    color: #141414!important;
    text-decoration: none;
    align-items: center;
    display: flex;
    justify-content: center;
    border: 0;
    border-radius: 0.25em;
    padding: 0.5em 1em;
    font-size: 14px;
    cursor: pointer;
    line-height: 1.2;
    font-weight: 400;
    transition: all 0.3s ease 0s;
    -webkit-transition: -webkit-transform .06s ease-in-out,box-shadow .1s ease-in-out,background .2s ease-in-out,border .2s ease-in-out;
    -moz-transition: -moz-transform .06s ease-in-out,box-shadow .1s ease-in-out,background .2s ease-in-out,border .2s ease-in-out;
    transition: transform .06s ease-in-out,box-shadow .1s ease-in-out,background .2s ease-in-out,border .2s ease-in-out;
}

.button-border{
    background: #fff;
    color: var(--text-color) !important;
    text-decoration: none;
    align-items: center;
    display: flex;
    justify-content: center;
    border: 0;
    border-radius: var(--button-radius);
    padding: 1rem 1rem;
    font-size: 14px;
    cursor: pointer;
    line-height: 1.2;
    font-weight: 400;
    transition: all 0.3s ease 0s;
    -webkit-transition: -webkit-transform .06s ease-in-out,box-shadow .1s ease-in-out,background .2s ease-in-out,border .2s ease-in-out;
    -moz-transition: -moz-transform .06s ease-in-out,box-shadow .1s ease-in-out,background .2s ease-in-out,border .2s ease-in-out;
    transition: transform .06s ease-in-out,box-shadow .1s ease-in-out,background .2s ease-in-out,border .2s ease-in-out;
}


.text-obj-btn,.shape-obj-btn  {
    outline: 1px solid var(--light-gray);
    height: 2.5rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.obj-btn {
    position: relative;
    justify-content: flex-start;
}

.obj-btn-text{
    width: calc(100% - 50px);
    text-align: left;
    margin-left: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-x: scroll;
}

.lock-toggle {
    height: 100%;
    aspect-ratio: 1 / 0.8;
    position: absolute;
    right: 0;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: 1px solid #EAEAEA;
}

.lock-toggle.active {
    height: 100%;
    aspect-ratio: 1 / 0.8;
    position: absolute;
    right: 0;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}
.lock-toggle.active path {
    fill: #fff;
}

.text-obj-btn div{
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    letter-spacing: 0.06rem;
}


.button-border:hover, .toggle-fullscreen:hover {
    box-shadow: 0px 5px 8px rgb(174 174 174 / 40%);
    outline: 1px solid var(--light-gray);
    font-weight:500;
    transform: translateY(-1px);
  }

.button-border:active, .toggle-fullscreen:active {
box-shadow: none;
outline: 1px solid var(--light-gray);
transform: translateY(0);
}

.primary-button-color:hover {
    box-shadow: 0px 5px 8px rgb(174 174 174 / 40%);
    transform: translateY(-1px);
}
.primary-button-color:active{
    box-shadow: none;
    transform: translateY(0);
}
.primary-button-color p, .button-border p{
    margin: 0;
}
.primary-button-color i, .button-border i{
    margin:0 !important;
    margin-right:0.5rem !important;
}

.btn-newshape {
    width: 100% !important;
    max-height: none !important;
    text-align:center;
}

.button-row {
    display: flex;
}


.btn-newshape span {
    width: 100%;
}

.btn-newshape img {
    width: 100% !important;
    height: 100%  !important;
    max-height: none  !important;
    margin-bottom: 0.25rem;
    aspect-ratio:1;
}

.copy-link-btn:not(.copied) .copy-done{
    display: none;
}

.copy-link-btn.copied .copy-not-done{
    display:none;
}

.woocommerce #respond input#submit.primary:hover,
.woocommerce a.button.primary:hover,
.woocommerce button.button.primary:hover,
.woocommerce input.button.primary:hover,
.flat.primary:hover,
a.flat.primary:hover,
button.flat.primary:hover {
    background: #68a5a4
}

.woocommerce #respond input#submit.disabled,
.woocommerce a.button.disabled,
.woocommerce button.button.disabled,
.woocommerce input.button.disabled,
.flat.disabled,
a.flat.disabled,
button.flat.disabled {
    color: #ddd;
    background: #F5F5F5;
    cursor: default
}

.woocommerce #respond input#submit.disabled i,
.woocommerce a.button.disabled i,
.woocommerce button.button.disabled i,
.woocommerce input.button.disabled i,
.flat.disabled i,
a.flat.disabled i,
button.flat.disabled i {
    color: #ddd
}

.woocommerce #respond input#submit.disabled.primary,
.woocommerce a.button.disabled.primary,
.woocommerce button.button.disabled.primary,
.woocommerce input.button.disabled.primary,
.flat.disabled.primary,
a.flat.disabled.primary,
button.flat.disabled.primary {
    color: #fff;
    background: #d5edf3
}


.flat.disabled.primary i,
a.flat.disabled.primary i,
button.flat.disabled.primary i {
    color: #fff
}

.flat.hidden,
a.flat.hidden,
button.flat.hidden {
    display: none
}

.flat.big,
a.flat.big,
button.flat.big {
    font-size: 1.4em;
    padding: 0.6em 3em
}



.flat.big i.material-icons,
a.flat.big i.material-icons,
button.flat.big i.material-icons {
    font-size: 1.2em
}


.flat i,
a.flat i,
button.flat i {
    vertical-align: middle
}

/*TEXT STANDARDS*/

.stdn-text-discrete{
    font-size: 0.8em;
    color: #888;
    display: block;
}

.stdn-text-disabled{
   color: #a9a9a9;
}

.signbuilder {
    position: relative;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -js-flex;
    display: flex;
    flex-direction:row;
    grid-template-columns: auto 1fr;
    height: calc(100vh - 80px);
}

.canvas-container{
    width:100% !important;
    height:100% !important;
    perspective: 500px;
    transform-style: preserve-3d;
    transition: transform 1s;
    transform-origin: center center;
}

.canvas-container.overlay-canvases {
    position: absolute !important;
    pointer-events: none;
    top: 0;
    left: 0;
}

#signbuilder-left-menu {
    height: inherit;
}

.signbuilder .design-area {
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    flex-grow: 1;
    -ms-flex-positive: 1;
    background: #F5F5F7;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -js-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    box-direction: normal;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    flex-direction: column;
    -ms-flex-direction: column;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    -ms-flex-pack: justify;
    position: relative;
}

.signbuilder-right-content {
    height: inherit;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.top-bar-mobile {
    display: none;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    border-top: 1px solid #C7C7C7;
    border-bottom: 1px solid #C7C7C7;
    height: 40px;
    padding: 0 20px;
    order:1;
}

.top-bar-mobile-2 {
    display: none;
    order: 2;
    justify-content: space-between;
    border-bottom: 1px solid #C7C7C7;
    height: 40px;
    justify-content: space-between;
    align-items: center;
}
.top-bar-mobile-left {
    display: flex;
    align-items: center;
    height: 40px;
}

.top-bar-mobile-left .stdn-name {
    font-weight: 700;
}

.canvas-wrap {
    margin: 10px;
    outline: none;
    position: relative;
    background: #F5F5F7;
    height: 100%;
}

.canvas-wrap #playground {
    display: block;
    outline: none;
    box-sizing: border-box;
    -webkit-filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.5));
}

.canvas-wrap .information-overlay {
    position: absolute;
    top: 0;
    left: 0
}

.canvas-wrap .information-overlay .info-size {
    position: absolute;
    left: 0;
    right: 0;
    color: #444
}
.canvas-wrap .object-controls{
    position: absolute;
    left: 0;
    top: 0;
    background: #fff;
    color: #000;
    border-radius: 0.5rem;
    display:flex;
    box-shadow: 0px 0px 8px rgba(174, 174, 174, 0.4);
    padding: 0.5rem 1rem;
    z-index:1;
    min-width:max-content;
}

.edit-control {
    display: flex;
    margin-right: 1rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius);
    cursor:pointer;
}
.edit-control i {
    margin-right: 0.25rem;
}

.other-control {
    border-left: 1px solid var(--light-gray);
    border-right: 1px solid var(--light-gray);
    padding: 0 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1rem;
    margin-right: 1rem;
}



.other-control img {
    width: 24px;
    max-width: none;
}

i.magnet-snapping.active{
   /* outline: 1px solid var(--primary-color); */
   background: var(--primary-color);
}
.tax-type-toggle{
   cursor: pointer;
}
.tax-type-toggle:hover{
   text-decoration: underline;
}
.tax-type-toggle.active {
    font-weight: 600;
    color: #000;
}

.other-control i {
    padding: 0.25rem 0.5rem;
    cursor:pointer;
    border-radius: var(--border-radius);
    align-items: center;
    display: flex;
}

.remove-control{
    width: 100%;
    display: flex;
    padding: 0.25rem 0.5rem;
    cursor:pointer;
    border-radius: var(--border-radius);
}

.remove-control:hover, .other-control i:hover, .edit-control:hover{
    box-shadow: 0px 5px 8px rgb(174 174 174 / 40%);
    outline: 0.5px solid var(--light-gray);
    transform: translateY(-0.5px);
}

.canvas-wrap .information-overlay .info-size .inner {
    border-bottom: 1px solid #bbb;
    text-align: center;
    justify-content: center;
    display: flex;
    position: relative;
}

.canvas-wrap .information-overlay .info-size .inner span {
    position: relative;
    white-space: nowrap;
    background: #F5F5F5;
    padding: 0 0.5em;
    -webkit-transform: translateY(0.7em);
    -moz-transform: translateY(0.7em);
    -ms-transform: translateY(0.7em);
    -o-transform: translateY(0.7em);
    transform: translateY(0.7em);
    display: inline-block;
    font-size: 0.8rem;
}

.peg-hor {
    position: absolute;
    display: block;
    height: 10px;
    width: 1px;
    background: #bbb;
    bottom: -5px;
}

.peg-hor.left{
    left: 0;
}
.peg-hor.right{
    right: 0;
}

.canvas-wrap .information-overlay .info-size.info-height .inner {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%
}

.sign-info {
    padding: 1rem;
    background-color: #fff;
    border-top: 1px solid #C7C7C7;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -js-flex;
    display: flex;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    -ms-flex-pack: justify;
    align-items: center;
    height:70px;
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
}

.sign-info .actions{
    display: flex;
    gap: 20px;
}
.skyltstdn-add-to-cart, .skyltstdn-kop, .filled-btn-black-stdn{
padding: 10px 30px;
border-radius: 0.5rem;
border:none;
font-weight: 600;
letter-spacing: 0.06rem;
}

button, input{
    letter-spacing: 0.06rem;
}
.skyltstdn-add-to-cart, .skyltstdn-add-favorite{
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 2px rgb(0 0 0 / 15%);
    border-radius: 0.5rem;
    color:#000;
}

.icon-favorite:hover{
   color: #ee4b6a;
}

.skyltstdn-add-favorite{
height: 50px;
width: 50px;
display: flex;
justify-content: center;
align-items: center;
}

button.skyltstdn-add-favorite i {
    font-size: 2rem;
}

.skyltstdn-kop, .filled-btn-black-stdn{
    background: #000000;
    box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.15);
    color:#fff;
}

.filled-btn-black-stdn:hover{
    background: var(--hover-black);
}

#skyltstdn-favorite-list{
    position: absolute;
    background: #fff;
    bottom: 80px;
    padding:2rem;
    border-radius:0.5rem;
    box-shadow: 0px 0px 4px 2px rgb(0 0 0 / 15%);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

#skyltstdn-favorite-list button:hover{
    text-decoration:underline;
}

.sign-info .price {
    color: #000000;
    letter-spacing: 0.08rem;
    display: flex;
    gap:1rem;
}

.name-and-info-wrp{
   border-right: 1px solid #ddd;
   padding-right: 1rem;
}

.name-and-info-wrp .stdn-name{
    display: flex;
    font-size: var(--big-font);
    font-weight: bold;
    line-height: 0.9em;
 }

.sign-info .price .large {
    font-weight: bold;
    line-height: 0.9em;
    gap: 1rem;
    align-items: baseline;
    font-size: var(--big-font);
   white-space: nowrap;
}

.stdn-price-container span{
   display: none;
}

.stdn-price-container[data-showing='piece'] .piece{
   display:flex;
}

.stdn-price-container[data-showing='total'] .total{
   display:flex;
}

.price-displays-top{
   display: flex;
   gap:0.5rem;
}


span.discount-badge {
   background: #d8ffd4;
   color: #084a23;
   font-family: 'Noto Sans';
   padding: 2px 12px;
   font-size: 12px;
   font-weight: 500;
   border-radius: 0.25rem;
   cursor: help;
   white-space: nowrap;
}


.stdn-pop-up-hover-wrp{
   position: relative;
}

.stdn-pop-up {
  display: none;
  position: absolute;
  background: #fff;
  top: -4rem;
  left: 0;
  width: max-content;
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius);
  border: 1px solid #ddd;
  z-index: 9;
}

.stdn-pop-trigger:hover + .stdn-pop-up {
  display: block;
}

/*
.sign-info .price .large span:nth-child(2){
   font-size: 0.6rem;
    color: #646464;
    font-weight: 500;
}
*/

.name-and-price-wrp-stdn {
    display: flex;
    font-size: var(--big-font);
    font-weight: bold;
    line-height: 0.9em;
    gap: 0.5rem;
}

tr.floating-cart-load.stdn {
    background: #00000017;
}

.outside-sign-warning {
    background: #d67070;
    position: absolute;
    left: 0;
    right: 0;
    color: #fff;
    padding: 0.5rem;
    z-index: 10;
    display: none;
}

.tools {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -js-flex;
    display: flex;
    z-index: 1;
    height: 100%;
    justify-content: center;
    position:relative;
    width:7rem;
}

.tools ul.tabs {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background: #000000;
    border-radius: 0 5px 5px 0;
    display: flex;
    flex-direction: column;
    height: inherit;
    overflow-y: scroll;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.stdn-rows-wrp {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stdn-icon-btn {
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: fit-content;
}

#signbuilder-left-menu {
    height: inherit;
    background: #000;
    height: inherit;
    width: 7rem;
    padding: 3rem 0;
    position: relative;
    display: flex;
    justify-content: center;
}

.tabs-wrap {
    height: inherit;
}

.minitool{
/*    margin: 1rem 0;
 */
}

.tools ul.tabs::-webkit-scrollbar {
    display: none;
  }

.top-tool-bar-tur, .top-tool-bar-ps {
    display: flex;
    padding: 0 25px 0 25px;
    gap:25px;
    
}
.top-tool-bar-tur{
    border-right: 1px solid #C7C7C7;
}

.skyltsdn-restart, .skyltsdn-undo, .skyltsdn-redo, .skyltsdn-preview, .skyltsdn-share {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.skyltsdn-restart img{
    width: 25px;
    height: 25px;
}

.top-tool-bar-left {
    display: flex;
}
.top-tool-bar-sizes{
    display: flex;
    gap:25px;
}

.top-tool-bar-sizes p {
    font-weight: 600;
    color: #000;
    margin:0;
}

.top-tool-bar-width, .top-tool-bar-height{
    display: flex;
    align-items: center;
    gap: 10px;
}

.top-tool-bar {
    position: relative;
    width: 100%;
    height: 50px;
    border-top: 1px solid #C7C7C7;
    border-bottom: 1px solid #C7C7C7;
    padding: 0 25px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/*Sliders start */ 
.zoom-slider {
    width: 100%;
    max-width: 200px;
    display: flex;
    align-items: center;
}

div#zoom-per {
    margin-right: 1rem;
}

.zoom-slider .ui-slider-horizontal .ui-slider-handle,
.radius-slider .ui-slider-horizontal .ui-slider-handle,
#zoomrange-full .ui-state-default,
#opacity-range .ui-state-default{
    width: 6px;
    height: 20px;
    background-color: black;
    text-decoration: none;
    text-align: center;
    position: absolute;
    top: -6px;
    border-radius: 4px;
    cursor:pointer;
}

#zoomrange-full .ui-state-default{
    width: 20px;
    height: 6px;
    margin-left: -0.4rem;
    top: auto;
}

.ui-slider-range-min{
    height:100%;
    background-color: #000;
    border-radius: 5px 0 0 5px
}

#zoomrange-full .ui-slider-range-min{
    display:none;
}

#zoomrange, #radius-range, #shape-radius-range, .custom-slider, #zoomrange-full,#opacity-range {
    -webkit-appearance: none;
    width: 100%;
    height: 5px;
    background: var(--stnd-border-gray);
    outline: none;
    opacity: 1;
    -webkit-transition: .2s;
    transition: opacity .2s;
    border-radius:5px;
    position: relative;
  }

  #zoomrange-full{
    width: 5px;
    flex-grow: 1;
    margin-left: 1rem;
  }
  
  #zoomrange:hover {
    opacity: 0.7;
  }

#zoom-per-full {
    margin-top: 0.5rem;
}
  
.size-options.custom-radius-option.only-rect-rounded {
    flex-direction: column;
}
.radius-slider, .opacity-slider {
    display: flex;
    width: 100%;
    align-items: center;
    margin: 0 0 0.5rem 0;
}
div#radius-range, #opacity-range {
    flex-grow: 1;
}
input.sign-option.radius-input, .shape-radius-input, .shape-border-input,.opacity-input {
    margin: 0 !important;
    margin-left: 1rem !important;
}

.tools ul.tabs li {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0 0.5rem;
    margin-bottom: 0.5rem;
    text-align: center;
    z-index: 12;
    color: #fff;
    white-space: nowrap;
    padding-bottom: 0.5rem;
    -webkit-transition: background 0.2s;
    -moz-transition: background 0.2s;
    transition: background 0.2s;
    cursor: pointer;
}

.tools ul.tabs li span.symbol {
    height: 3rem;
    width: auto;
    aspect-ratio: 1;
    border-radius: 10px;
    text-align: center;
    vertical-align: top;
    background: #fff;
    color: #000;
    display: flex;
    justify-content: center;
    align-self: center;
    align-items: center;
}

.tools ul.tabs li span.symbol i {
    -webkit-transition: font-size 0.2s ease-in-out;
    -moz-transition: font-size 0.2s ease-in-out;
    transition: font-size 0.2s ease-in-out;
    font-size: var(--big-font);
    line-height: 3rem;
    vertical-align: middle
}

.tools ul.tabs li span.symbol img {
    height: 1.5rem;
    vertical-align:unset;
}


.tools ul.tabs li .label{
    font-size: 0.75rem;
    letter-spacing: 0.06rem;
    margin: 0;
    padding-top: 0.25rem;
}

.tools ul.tabs li span.label {
    font-size: 0.75rem;
    letter-spacing: 0.06rem;
}

.tools ul.tabs li:hover span.symbol {
    background: #ccc
}

.tools ul.tabs li.active span.symbol {
    background: var(--primary-color);
}

.tools h4 {
    text-transform: uppercase;
    font-size: 0.9rem;
    margin: 0;
    padding-top: 1rem;
    position: sticky;
    top:0;
    background-color: #fff;
    margin-bottom: 0.6rem;
    padding-bottom: 0.6rem;
    color: #000;
    z-index: 2;
    letter-spacing: 0.06rem;
}
.has-file-top h4 {
    position: static;
}
.has-file-top .closebtn{
    position: absolute;
    right: 0;
    top: 0.5rem;
}
.tools .toolbar h4:after {
    height: 2px;
    margin-top: 5px;
    display: block;
    width: 100%;
    background-color: var(--primary-color);
    content: '';
}

.tools h5 {
    font-size: 0.9rem;
    text-transform: uppercase;
    margin: 0.4rem 0;
}

.tools #toolwrap {
    width: 20rem;
    z-index: 18;
    position: absolute;
    top: 8px;
    left: 7rem;
    bottom: 1.6rem;
    background: #fff;
    border-radius: 0 10px 10px 0;
    box-shadow: 0px 0px 4px 2px rgb(0 0 0 / 15%);
}

.tools ul.tool-menu {
    display: none;
}

.tools .toolbar {
    margin: auto;
    max-height: 100%;
    overflow-y: auto;
    height: calc(100% - 50px);
    padding-bottom:2rem;
}


.tools .toolbar::-webkit-scrollbar {
    display: none;
  }
  
  /* Hide scrollbar for IE, Edge and Firefox */
.tools .toolbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.tools .toolbar::after {
    content: "";
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
    height: 150px;  /* Adjust the height to control the extent of the fade effect */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));  /* Adjust colors to match your design */
    transition: opacity 0.3s;  /* Adjust the duration of the transition as needed */
    opacity: 1;
    pointer-events: none;
}

.tools .toolbar.scrolled-to-bottom::after {
    display: none;
    opacity: 0;
}

.toggle-tools-menu {
    display: grid;
    grid-template-columns: auto 1fr;    
    height: 50px;
    width:100%;
    position:absolute;
    justify-content: center;
    align-items: center;
    background-color: #000;
    color: #fff;
    border-radius: 0 0 10px 0;
    font-weight: 600;
    cursor:pointer;
    z-index:20;
    padding:0px;
    bottom:0;
}

.toggle-tools-menu.sgn-btn-black:active{
    background-color: #000 !important; 
}

.toggle-inside-menu:active{
    background-color: var(--active-gray);
}
.toggle-close-menu-wrp:active{
    background-color: var(--active-gray);
}


.toggle-inside-menu {
    height: 100%;
    width: 0; 
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-wrap:wrap;
    transition: width 0.3s ease 0s;
    -webkit-transition:  width 0.3s ease 0s;
    -moz-transition:  width 0.3s ease 0s;
  }

.toggle-inside-menu div{
    height: 60%;
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    border-right: 1px solid #fff;
}

  .toggle-inside-menu.active{
    width: 50px;
  }

  .toggle-inside-menu i {
    transform: rotate(180deg);
  }

  .toggle-close-menu-wrp {
    display: flex;
    width: 100%;
    height:100%;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 10px 0;
  }

.tools .toolbar.hidden {
    display: none
}

.tools .toolbar .tool {
    box-sizing: border-box;
    padding: 0 1rem
}

.tools .toolbar .tool .size-options {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -js-flex;
    display: flex;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    -ms-flex-pack: justify
}

.tools .toolbar .tool .size-options input {
    max-width: 5rem
}

.size-opt-ctn {
    display: grid;
    grid-template-columns: 1fr;
}

.size-opt-ctn input{
    width:100%;
}

.size-opt-ctn input[type=radio] {
    margin-right: 5px;
}

.tools .toolbar .tool .buttonlist button {
    display: block;
    width: 100%;
    font-size: 0.85rem;
    background: #2196F3;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 0.2rem;
    border: 0;
    text-align: left;
    line-height: 2em
}

.color-opt-wrp {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(1.6rem, 1fr) );
    gap: 0.5rem;
}
.active-colors {
    padding: 0 0 1rem;
}

.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner{
    border-radius: 0.25rem;
}
.custom-color{
    padding: 0 !important;
}


.bg-transparent-img{
   background-image: url('/wp-content/plugins/skyltvaruhuset/assets/studio-elements/transparent-pattern.svg');
}
.sp-button-container.sp-cf > * {
    min-width: 60px;
    margin-left: 0.5rem;
}
.sp-alpha-inner {
    border-radius: 0;
}
.sp-container{
    background-color: #FFF !important;
    border: none !important;
    padding: 0.5rem !important;
    border-radius: 5px !important;
    box-shadow: 0px 0px 4px 2px rgb(0 0 0 / 15%) !important;
}
.sp-replacer{
    padding:0 !important;
}
.sp-preview{
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1/1;
    background-image: none !important;
    border:none !important;
}
.sp-dd{
    display: none !important;
}
.sp-preview-inner{
    border: 1px solid #f4f4f4;
    background: conic-gradient(red, orange, yellow, green, blue, indigo, violet, red);
}

.active-colors-title {
    margin: 0.5rem 0;
}

.tool-color button {
    outline: 1px solid #f4f4f4;
    border: none;
    display: inline-block;
    font-size: 0;
    margin: 0;
    border-radius: var(--border-radius);
    width: 100%;
    aspect-ratio: 1/1;
    height: auto;
    text-align:center;
}
.color-picker {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    outline: 1px solid #f4f4f4;
    border-radius: 0.25rem;
    cursor: pointer;
}

.tool-color button:hover{
    outline: 1px solid gray;
    box-shadow: 0px 5px 8px rgb(174 174 174 / 40%);
}

.color-picker:hover, .sp-preview-inner:hover {
    box-shadow: 0px 5px 8px rgb(174 174 174 / 40%);
    transform: translateY(-1px);
}

.tool-color button.active{
    border: 2px solid white !important;
    outline: 2px solid #7bbebd;
}
.tools .toolbar .tool input {
    margin-bottom: 0.5rem
}

.tools .toolbar .tool i {
    vertical-align: middle
}

.tools .toolbar .tool label {
    display: block;
    font-size: 0.8rem;
    color: #555;
    padding: 0.2rem;
    letter-spacing: 0.06rem;
}

button.sign-option.gravyr-colors {
    font-size: 1.5rem !important;
    height: 2.5rem !important;
    width: 2.5rem !important;
    margin-bottom: 5px !important;
    font-weight: 700;
}

.tools .toolbar .tool .option-font-preview {
    background: #fefefe;
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    margin: 0.3rem 0;
    padding: 0.5em 1em;
    cursor: pointer;
    white-space: nowrap;
}

.tools .toolbar .tool .option-font-preview .right {
    float: right
}

.tools .toolbar .tool .option-font-preview .font-name {
    white-space: nowrap;
    overflow: hidden;
    max-width: 4.4rem;
    font-size: 0.75rem;
    display: inline-block;
    line-height: 1rem;
    text-overflow: ellipsis;
    vertical-align: middle
}

.tools .toolbar .tool .option-font-preview i {
    color: #004175
}

.tools .toolbar .tool .font-dropdown-wrap {
    display: block;
    position:relative;
}


.tools .toolbar .tool .font-dropdown-wrap.hidden .material-icons.right {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg)
}

.tools .toolbar .tool .font-dropdown-wrap .option-font {
    font-size: 0.9rem;
    position: absolute;
    background: #fff;
    z-index: 300;
    width:100%;
    border-radius: var(--border-radius);
    padding: 0.5rem 1rem;
    margin-top:3px;
    box-shadow: 0px 0px 4px 0px #8c8c8c;
    overflow-y: scroll;
    height: 200px;
    border: 1px solid #c6c6c6;
    display:none;
}

.tools .toolbar .tool .font-dropdown-wrap .option-font ul {
    list-style-type: none;
    margin: 0;
    padding: 0
}

.tools .toolbar .tool .font-dropdown-wrap .option-font ul li {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -js-flex;
    display: flex
}

.tools .toolbar .tool .font-dropdown-wrap .option-font ul li .name {
    width: 7rem;
    padding: 0.3rem;
    font-size: 0.8rem
}

.tools .toolbar .tool .font-dropdown-wrap .option-font ul li .preview {
    text-align: right;
    width: 7rem;
    padding: 0.3rem
}

.tools .toolbar .tool .font-dropdown-wrap .option-font ul li:hover {
    background: #2196F3;
    cursor: pointer;
    color: #fff
}

.tools .toolbar .tool .button-with-border {
    border: 2px solid #fff
}

.tools .toolbar .tool .button-with-border.active {
    color: #000;
    background: var(--primary-color);
}

.tools .toolbar .tool .button-with-border.material {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -js-flex;
    display: flex;
    flex-direction: column;
}

.tools .toolbar .tool .button-with-border.material .icon {
    -webkit-flex-basis: 3rem;
    -moz-flex-basis: 3rem;
    flex-basis: 3rem;
    -ms-flex-preferred-size: 3rem;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    flex-shrink: 0;
    -ms-flex-negative: 0;
}

.prod-img-and-text {
    display: flex;
    gap: 1rem;
    width:100%;
}

.tools .toolbar .material{
   background: var(--ultra-light-gray);
   width: 100%;
}

.tools .toolbar .material:hover{
   background: #7bbebd24;
   transform: scale(1.02);
}

.tools .toolbar .tool .button-with-border.material .description {
    text-align: left;
    font-size: 0.8rem;
    overflow:hidden;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.tools .toolbar .tool .button-with-border.material .description p{
    margin: 0;
    max-height: 4.8rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius);
    width: 100%;
    overflow-wrap: break-word;
    font-weight: 300;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.tools .toolbar .tool .button-with-border.material .label {
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    letter-spacing: 0.1rem;
}

.tools .toolbar .tool-sections .closebtn {
    color: #555;
    float: right;
    cursor: pointer;
}

.tools .toolbar .tool-sections .closebtn .material-icons {
    font-size: 2rem
}

.tools .toolbar .tool-sections .grid {
    -webkit-flex-grow: 2;
    -moz-flex-grow: 2;
    flex-grow: 2;
    -ms-flex-positive: 2;
    overflow: auto;
    width:100%;
}

.obj-position-wrp{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 3rem auto 4rem;
}
.obj-position-holder{
    background-color: white;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    width: 100%;
}

.obj-position-holder.center {
    border: 3px solid;
    aspect-ratio: 1;
    box-shadow: 0px 0px 9px 3px #00000017;
}

.position-values{
    height: fit-content;
    width: 70%;
}

.upload-search {
    width: 100%;
    display: flex;
    margin: 1rem 0;
    border-bottom: 1px solid #ccc;
}

.rename-form{
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    padding: 0.5rem;
    background: rgb(255 255 255 / 79%); 
    border-radius: 0.5rem 0.5rem 0 0;
    border-bottom: 1px solid #dedede;
    transform: translateY(100%); 
    transition: transform 0.3s ease;
}

.rename-form input{
    width:100%;
    border: none;
    background:none;
    border-bottom: 1px solid #bcbcbc;
}

.rename-form input:focus{
    border: none;
    outline:none;
    background:none;
    border-bottom: 2px solid #bcbcbc;
}

.rename-form button[type=submit]{
    padding: 0.25rem 1rem;
    background: #000;
    border-radius: 0.25rem;
    color: #fff;
    font-size: 0.8rem;
}

.upload-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    background: #ffffff85;
    justify-content: center;
    font-weight: 300;
    font-size: 0.75rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    white-space: nowrap;
}

.grid.upload-grid li:hover .upload-name{
    transform: translateY(0);
} 

input#upload-search-input {
    margin: 0;
    border: none;
    flex-grow: 1;
}

input#upload-search-input:focus {
    margin: 0;
    border: none;
    outline: none;
}

.grid ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    grid-template-columns: 1fr 1fr;
    display: grid !important;
    gap: 1rem;
}

.grid .new-symbol-grid {
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding: 0.5rem 1rem;
    display: grid !important;
    gap: 15px;
    grid-template-columns: 1fr 1fr 1fr;
}

.grid.upload-grid ul {
    padding: 0px;
}

.grid.upload-grid{
    overflow-y: none;
}

.grid.upload-grid img{
    width:100%;
    height:100%;
    object-fit: contain;
}

.grid.upload-grid ul{
    grid-template-columns: 1fr 1fr;
    display: grid !important;
    gap: 1rem;
}

.grid.upload-grid li{
    cursor:pointer;
    transition: all 0.3s ease 0s;
    -webkit-transition:  all 0.3s ease 0s;
    -moz-transition:  all 0.3s ease 0s;
}

.grid.upload-grid li:hover{
    cursor:pointer;
    transform: translateY(-2px);
    box-shadow: 0px 5px 8px rgb(174 174 174 / 40%);
}

.tools .toolbar .tool-sections .grid ul li {
    display: inline-block;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    -webkit-transition: padding 0.2s ease;
    -moz-transition: padding 0.2s ease;
    transition: padding 0.2s ease;
}

.tools .toolbar .tool-sections .grid ul li img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: contain;
    -webkit-transition: -webkit-transform .2s ease;
    -moz-transition: -moz-transform .2s ease;
    transition: transform .2s ease;
    
}

.tools .toolbar .tool-sections .grid ul li:hover {
    cursor: pointer
}

/*
.tools .toolbar .tool-sections .grid ul li:hover img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1)
}
*/

.image-upload-form .del, .upload-grid .del {
    border: 0;
    justify-content: center;
    display: flex;
    background: var(--primary-color);
    color: #fff;
    border-radius: 50%;
    width: 1.1rem;
    height: 1.1rem;
    padding: 0;
}

.image-upload-form .del i.material-icons, .upload-grid .del i.material-icons {
    font-size: 1rem;
    line-height: 1rem;
}

.image-upload-form .del i.material-icons {
    font-size: 1rem;
    line-height: 1rem
}

.image-upload-form, .new-shape-form{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 50px;
    box-sizing: border-box;
    z-index: 20;
    background: #fff;
    overflow: scroll;
    border-radius: 10px;
    padding: 0 1rem;
}

.tools .toolbar .tool-sections .image-upload-form.hidden {
    display: none
}
.has-file-top {
    position: relative;
}
.tools .toolbar .tool-sections .image-upload-form .closebtn {
    position: absolute;
    bottom: 0.5rem;
    right: 0;
    z-index: 3;
}

.image-upload-form .content {
    height: 100%
}

.upload-mini.info {
    text-align: center;
    margin: auto;
    font-size: 1.2rem;
    color: #444
}

.fine {
    margin-top: 1.6em;
    font-size: 0.7em;
    color: #888
}

.image-upload-form .grid {
    margin-top: 1rem;
    overflow-y: auto;
    display: none
}

.grid.upload-grid li {
    width: 100%;
    aspect-ratio: 1/1;
    background: #fafafa;
    align-items: center;
    display: flex;
    position:relative;
    overflow: hidden;
}


.grid.upload-grid li .actions, .upload-grid li .actions {
    position: absolute;
    top: 5px;
    right: 5px;
    left: 5px;
    justify-content: space-between;
    display: flex;
}

.grid.upload-grid li .preview {
    background: transparent center center no-repeat;
}

.preview.no-bs img {
    width: 100%;
    object-fit: contain;
}

.fullscreen-tool-toggle {
    position: absolute;
    left: 0;
    height: 6rem;
    width: 3rem;
    top: 50%;
    border-radius: 0 0.5rem 0.5rem 0;
    background-color: black;
    transform: translateY(-50%);
    vertical-align: middle;
    color: #fff;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    cursor:pointer;
    z-index: 2;
}

.fullscreen-zoom {
    position: absolute;
    width: 65px;
    height: 300px;
    padding: 1rem;
    right: 0;
    display:none;
    border-radius: 1rem 0 0 1rem;
    z-index: 2;
    color: #000;
    background: #fff;
    box-shadow: 0px 2px 3px 1px #e1e1e1;
    top: calc(50% - 150px);
}

.zoom-slider-full {
    display: flex;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
    height: 100%;
}

.text-objects-container, .shape-objects-container {
    margin-top: 1rem;
    display: grid;
    gap: 0.5rem;
}

.upload-mini.info {
    font-size: 1rem;
    outline: 1px solid #ccc;
    padding: 1rem;
    border-radius: var(--border-radius);
}



.image-upload-form.has-files .grid {
    display: block
}

.hover .upload-mini.info {
    background: #ccc;
    outline: 2px solid var(--primary-color);
}

.image-upload-form .loader {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.9)
}

.image-upload-form .loader .spinner {
    display: block;
    margin: 5rem auto
}

.loader.hidden {
    display: none
}

.tools .toolbar .tool-sections .symbol-gallery {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    z-index: 20;
    background-color: #fff;
    border-radius: 10px;
}

.templates-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 1rem;
}

.stdn-template-item {
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
 }

.stdn-template-item:hover{
   outline: 4px solid var(--primary-color);
}

.stdn-template-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.tool-sections.expandable {
    overflow: scroll;
}

.tool-sections.expandable > div {
    padding: 0 1rem;
    overflow: auto;
    padding-bottom: 80px;
}



.tools .toolbar .tool-sections .symbol-gallery, .tool-sections.expandable {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    z-index: 20;
    background-color: #fff;
    border-radius: var(--button-radius);
}


.symbol-right, .symbol-left {
    display: flex;
    flex-direction: column;
}

.symbol-left{
    background-color: #000;
    border-radius: 0 10px 10px 0;
}
.symbol-right {
    width:100%;
    height: calc(100% - 50px);
}

.symbol-header {
    height: 3rem;
    padding: 10px;
}

.symbol-left .symbol-header {
    padding: 1rem 1.5rem;
}

.symbol-header input {
    max-width: 9rem;
    padding: 4px 8px;
}

.symbol-2-columns {
    display: flex;
    height:100%;
}

.hidden {
    display: none
}

.tools .toolbar .tool-sections .symbol-gallery .header {
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap
}

.tools .toolbar .tool-sections .symbol-gallery .header input {
    border: 1px solid #E0E0E0;
    margin: 0.5rem;
    padding: 0.5rem;
    color: #555
} 

#size-options-container{
    display: grid;
    grid-template-columns: 50%;
    grid-auto-flow: column;
    gap: 0.5rem;
}


#size-options-container input[type="number"]{
    max-width: none;
    width: 100%;
}  

/*Cutstom slide button checkbox*/
.custom-toggle-checkbox{
    width: 140px;
    height: 40px;
}

.custom-toggle-checkbox input {
display: none;
}
.custom-toggle-checkbox input + label {
height: 100%;
width: 100%;
}
.custom-toggle-checkbox input + label > .status-switch {
cursor: pointer;
width: 100%;
height: 100%;
position: relative;
background-color: grey;
color: white;
transition: all 0.5s ease;
padding: 3px;
border-radius: 50px;
}
.custom-toggle-checkbox input + label > .status-switch:before, .custom-toggle-checkbox input + label > .status-switch:after {
border-radius: 50px;
height: calc(100% - 6px);
width: calc(50% - 3px);
display: flex;
align-items: center;
position: absolute;
justify-content: center;
transition: all 0.3s ease;
}
.custom-toggle-checkbox input + label > .status-switch:before {
background-color: white;
color: black;
box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.2);
left: 3px;
z-index: 10;
content: attr(data-unchecked);
}
.custom-toggle-checkbox input + label > .status-switch:after {
right: 0;
content: attr(data-checked);
}
.custom-toggle-checkbox input:checked + label > .status-switch {
background-color: #7bbebd;
}
.custom-toggle-checkbox input:checked + label > .status-switch:after {
left: 0;
content: attr(data-unchecked);
}
.custom-toggle-checkbox input:checked + label > .status-switch:before {
color: #7bbebd;
left: 50%;
content: attr(data-checked);
}

.tools .toolbar .tool-sections .symbol-gallery .content {
    background: #fff;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -js-flex;
    display: flex;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    -ms-flex-pack: justify;
    -webkit-transition: -webkit-transform .1s ease-in-out;
    -moz-transition: -moz-transform .1s ease-in-out;
    transition: transform .1s ease-in-out;
    max-height: calc(100% - 3.5rem);
    margin: 0;
    width: 100%;
    box-sizing: border-box
}


.tools .toolbar .tool-sections .symbol-gallery .categories {
    overflow: auto;
    max-height: 100%;
    min-width: 20%;
    padding: 1rem;
    padding-left: 1.5rem;
    color: #fff;
}

.symbol-gallery .categories ul {
    list-style-type: none;
    margin: 0;
    padding: 0
}

.symbol-gallery .categories li{
    cursor:pointer;
    margin-bottom: 0.5rem;
}

.tools .toolbar .tool-sections .symbol-gallery .content .categories ul li {
    display: block;
    color: #fff;
    line-height: 2;
    padding: 0 2rem 0 1rem;
    font-size: 0.85rem
}

.tools .toolbar .tool-sections .symbol-gallery .content .categories ul li:hover {
    background-image: -webkit-linear-gradient(-469deg, #247cf3 0%, #490da2 100%);
    background-image: linear-gradient(199deg, #247cf3 0%, #490da2 100%);
    cursor: pointer
}

.tools .toolbar .tool-sections .button-row {
    white-space: nowrap;
    margin: 0.2rem 0;
    display: inline-block
}

.tools .toolbar .tool-sections .button-row .flat {
    margin: 0;
    border-radius: 0;
    border-left: 1px solid #f0f0f0
}

.tools .toolbar .tool-sections .button-row .flat:first-of-type {
    border-radius: 0.25em 0 0 0.25em;
    border-left: 0
}

.tools .toolbar .tool-sections .button-row .flat:last-of-type {
    border-radius: 0 0.25em 0.25em 0
}

.tools .toolbar.deactive .only-active {
    color: #ddd
}

.tools .toolbar.deactive .only-active h4 {
    border-bottom: 2px solid #ddd;
    color: #ddd
}

.tools .toolbar.deactive .only-active button.flat,
.tools .toolbar.deactive .only-active .option-font-preview {
    color: #ddd;
    background: #fafafa;
    cursor: default
}

.tools .toolbar.deactive .only-active button.flat i,
.tools .toolbar.deactive .only-active .option-font-preview i {
    color: #ddd
}

.tools .toolbar.deactive .only-active .tool-color button {
    cursor: default;
    background: #F5F5F5 !important
}

.toggle-fullscreen {
    position: absolute;
    top: 8px;
    height: 3rem;
    display: flex;
    right: 8px;
    background: #fff;
    justify-content: center;
    align-items: center;
    z-index: 2;
    cursor: pointer;
    border-radius: var(--border-radius);
    outline: 1px solid #c3c3c3;
    padding: 0 1rem;
}

.toggle-fullscreen i {
    font-size: 2rem;
    color: #000;
}

.toggle-fullscreen i:last-child{
    display:none;
}

.toggle-fullscreen.active i:first-child{
    display:none;
}
.toggle-fullscreen.active i:last-child{
    display:block;
}
.toggle-fullscreen.active + .fullscreen-zoom{
    display:block;
}

.layers {
    position: absolute;
    top: 4rem;
    right: 1rem;
    background: #fff;
    padding: 0.5rem;
    z-index: 10;
    display: none
}

.empty-cart {
    color: #bbb;
    text-align: center;
    font-size: 1.2rem;
    padding: 1rem 0
}


.preview-window {
    width: 800px;
    height: 800px;
    text-align: center
}

.preview-window .preview-image {
    background: transparent center center no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%
}

.preview-window .preview-image.door {
    background-image: url("../preview/door-loading.jpg");
}

.preview-window .preview-image img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.preview-window .loading {
    height: 8rem;
    position: absolute;
    top: 50%;
    margin-top: -4rem;
    left: 0;
    right: 0;
    color: #fff
}

.preview-window .loading .spinner {
    display: block;
    margin: 2rem auto;
    background-color: #fff
}

.shareWindowWrp .featherlight-content {
    overflow: hidden !important;
    box-sizing: border-box;
    border-radius: var(--border-radius);
}

.shareWindowWrp .featherlight-close-icon {
    width: initial !important;
    color: #000 !important;
    font-size: var(--big-font);
    top: 1rem !important;
    right: 1rem !important;
}
.previewWindowWrp .featherlight-content{
    background: transparent !important;
}

#fancybox-dynamic-content.studio-full{
   width: 90%;
   height: 90%;
}

#fancybox-dynamic-content #stdn-preview-container{
   display: flex ;
   justify-content: center;
   align-items: center;
   height: 100%;
   width: 100%;
}

#fancybox-dynamic-content.studio-full img{
   height: 100%;
   width: 100%;
   object-fit: contain;
}


.previewWindowWrp .featherlight-close-icon{
    top: 0.5rem !important;
    right: 1rem !important;
}

[data-tooltip] {
    position: relative;
    z-index: 2;
    cursor: pointer;
    box-sizing: border-box
}

[data-tooltip]:before,
[data-tooltip]:after {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    box-sizing: border-box;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out
}

[data-tooltip]:before {
    position: absolute;
    bottom: 110%;
    left: 50%;
    margin-bottom: 5px;
    margin-left: -80px;
    padding: 7px;
    width: 160px;
    border-radius: 3px;
    background-color: #000;
    background-color: rgba(51, 51, 51, 0.9);
    color: #fff;
    content: attr(data-tooltip);
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.4
}

[data-tooltip]:after {
    position: absolute;
    bottom: 110%;
    left: 50%;
    margin-left: -5px;
    width: 0;
    border-top: 5px solid #000;
    border-top: 5px solid rgba(51, 51, 51, 0.9);
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    content: " ";
    font-size: 0;
    line-height: 0
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    visibility: visible;
    opacity: 1
}

.spinner {
    width: 3rem;
    height: 3rem;
    background-color: #333;
    border-radius: 100%;
    -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
    animation: sk-scaleout 1.0s infinite ease-in-out
}

.material-details-wrapper {
    position: absolute;
    display: none;
    top: 1rem;
    background: #fff;
    left: 100%;
    width: 20rem;
    margin-left: 1rem;
    filter: drop-shadow(0 10px 4px rgba(0, 0, 0, 0.5));
    box-sizing: border-box;
    border-radius: 10px;
}

.material-details-wrapper .material-details {
    overflow: auto;
    max-height: 100%;
    min-height: 100%;
    padding: 1rem;
    box-sizing: border-box;
    font-size: 0.8rem;
}

.material-details-wrapper button {
    background: var(--primary-color);
    color: #fff;
    width: 100%;
    text-transform: uppercase;
    font-weight: bold;
    padding: 0.5rem;
    border: 0;
    border-radius:0 0 10px 10px;
}

.material-details-wrapper:after {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(238, 238, 238, 0);
    border-right-color: #fff;
    border-width: 14px;
    margin-top: -14px
}

.flex-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row: auto auto;
    grid-column-gap: 0.25rem;
    grid-row-gap: 0.25rem
}

.flex-buttons-c3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-row: auto auto;
    grid-column-gap: 0.25rem;
    grid-row-gap: 0.25rem
}

.flex-buttons button {
    text-align: center;
    margin: 0
}

.flex-buttons button img,
.flex-buttons button span.symbol {
    display: block;
    margin: auto;
    margin-bottom: 0.25rem;
    max-height: 2rem;
    height: 2rem;
    text-align: center
}

.flex-buttons button i.material-icons {
    display: inline-block;
    margin: auto;
    width: 1.5rem;
    font-size: 1.75rem;
    color: #000
}

.custom-color {
    background: #fff;
    border-radius: 0.25rem;
    display: inline-block;
    padding: 0.2rem;
    font-size: 0.6rem;
}

.custom-color .sp-replacer {
    border: 0;
    background: transparent;
    width:100%;
}

.dropdown-button {
    position: relative
}

.dropdown-button .toggle-dropdown {
    background: #fff;
    border-radius: var(--border-radius);
    padding: 0.5em 1em;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -js-flex;
    display: flex;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    -ms-flex-pack: justify;
    cursor: pointer
}

.dropdown-button .dropdown-content {
    background: #fff;
    position: absolute;
    border-radius: var(--border-radius);
    text-align: left;
    padding: 6px;
    gap:4px;
    left: 0;
    right: 0;
    z-index: 4;
    display: none;
    white-space: nowrap;
    box-shadow: 0px 0px 4px 0px #8c8c8c;
    margin-top:3px;
}

.dropdown-button .dropdown-content i.material-icons {
    display: inline-block;
    margin: 0;
    line-height: 1.3
}

.dropdown-button .dropdown-content button {
    background: transparent;
    border: 0;
    display: block;
    width: 100%;
    text-align: left;
    font-size: 0.9rem
}

.dropdown-button .dropdown-content button:hover {
    background: #eee
}

.deactive .only-active .dropdown-button .toggle-dropdown {
    background: #fafafa
}

.deactive .only-active .dropdown-button:hover .dropdown-content {
    display: none
}

.toggle-dropdown, .option-font-preview{
    border: 1px solid var(--light-gray);
}

.symbol-size-ui {
    width: 30rem;
    font-size: 0.8rem;
    position: absolute;
    margin-top: 2rem;
    z-index: 10;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.symbol-size-ui span {
    font-weight: bold;
    text-transform: uppercase;
    color: #666
}

.symbol-size-ui input {
    width: 3rem
}

.symbol-size-ui .dim {
    margin-left: 1rem
}

.symbol-size-ui button {
    background: transparent;
    border: 0;
    padding: 0;
    margin-left: 1rem;
    vertical-align: top;
    color: #666
}

.button-rows-wrap {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -js-flex;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    -ms-flex-pack: justify
}

.font-size-option {
    font-size: 0.8rem;
    white-space: nowrap;
    display: inline-block
}

.font-size-option input {
    width: 3rem;
    display: inline-block;
    margin-bottom: 0
}

ul.payment_methods img {
    max-width: 2rem
}

.woocommerce-checkout #payment ul div.payment_box .form-row {
    margin: 0
}

.woocommerce-checkout #payment ul div.form-row {
    padding: 0
}

.share-window {
    background: #fff;
    padding: 2rem;
    width: 40rem;
    max-width:100%;
}

.share-window input {
    width: 100%
}



.enlarge-content-menu-studio{
    width: 28rem !important;
}

.category-wrapper {
    width: 70rem;
    margin: auto
}

.category-wrapper .row {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -js-flex;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}


.category-wrapper .column {
    -webkit-flex-basis: 20%;
    -moz-flex-basis: 20%;
    flex-basis: 20%;
    -ms-flex-preferred-size: 20%;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    flex-grow: 0;
    -ms-flex-positive: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    flex-shrink: 0;
    -ms-flex-negative: 0
}


.category-wrapper ul {
    list-style-type: none;
    padding: 0 2rem 0 0
}


.category-wrapper a {
    color: #363636;
    text-decoration: none
}

.category-wrapper h3 {
    font-weight: 700;
    color: #000;
    font-size: 15px;
    line-height: 18px;
    text-transform: none
}

.category-wrapper h3 a {
    color: #1d1d1d
}

.category-wrapper li {
    font-size: 14px;
    font-weight: 300;
    line-height: 18px
}

.expand-parent-category {
    background: transparent;
    border: 0;
    color: #AFD8D7;
    cursor: pointer
}

.sub-menu-categories {
    display: none;
    left: 0;
    right: 0;
    padding-bottom: 2rem
}

/*Skyltstudion css material*/
.material-parent {
    width: 100%;
}



.materials-lv1 {
    display: none;
}

.materials-lv2 {
    display: none;   
}
.multiple-material-container{
    display: none;
}

.product-details{
    display: none;
}

.material-lvl-active{
    display:grid;		 
    grid-auto-rows: 1fr;
    gap: 16px;
}
.details-image img {
    max-height: 100px;
}
.product-details {
    display: flex;
    padding-top: 2rem;
    flex-direction: column;
}
.product-details h4{
    font-size: var(--big-font);
    margin-bottom:0;
    letter-spacing: 3px;
}

p.product-details-text {
    letter-spacing: 1px;
    font-weight: 300;
}

.details-image {
    display: flex;
    justify-content: center;
}
.back-btn-materials > svg {
    width: 20px !important;
    height: 20px !important;
    color: black;
}

.back-btn-materials {
    margin-right: 1.345rem;
    cursor:pointer;
}

.materials-lv2-top {
    padding: 1rem 0 1rem;
    display: flex;
    align-items: center;
}
.product-examples {
    margin-top: 1rem
}

.product-examples ul {
    list-style-type: none;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -js-flex;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.product-examples li.product {
    margin: 0 1rem 1rem 1rem;
    -webkit-flex-basis: 28.3%;
    -moz-flex-basis: 28.3%;
    flex-basis: 28.3%;
    -ms-flex-preferred-size: 28.3%;
    position: relative
}


.product-examples li.product a {
    color: #333
}

.product-examples li.product h5 {
    margin: 0;
    font-weight: 400;
    font-size: 1rem
}

.product-examples li.product .price {
    color: #742A2A;
    font-size: 1.2em;
    text-align: right;
    font-weight: 600
}

.product-examples li.product .details {
    color: #888;
    font-size: 0.86rem;
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    transition: opacity 0.2s;
    line-height: 2;
    display: block;
    padding: 0.5rem;
    border-top: 1px solid #eee
}

.product-examples li.product a.pick-design {
    background: #0A55A3;
    color: #fff;
    padding: 0.5rem;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.84rem;
    display: block;
    text-align: center
}

.product-examples li.product .info {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -js-flex;
    display: flex;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    -ms-flex-pack: justify;
    padding: 0.5rem
}

.product-examples li.product .thumb {
    height: 10rem;
    text-align: center;
    padding: 1rem 0.5rem
}

.product-examples li.product .thumb .align-help {
    display: inline-block;
    height: 100%;
    vertical-align: middle
}

.product-examples li.product .thumb img {
    max-height: 10rem;
    width: auto;
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    height: auto
}

.product-examples li.product .reflective {
    position: absolute;
    width: 2rem;
    height: 2rem;
    right: 0;
    top: 0;
    z-index: 2
}

.product-examples li.product .reflective .notch {
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    height: 0;
    border-top: 3rem solid #0A55A3;
    border-left: 3rem solid transparent
}

.product-examples li.product .reflective svg {
    height: 1.5rem;
    width: auto;
    position: absolute;
    top: 0.2rem;
    right: 0.2rem
}

.product-examples li.product:hover .details {
    opacity: 1
}

.main-nav .menu>ul {
    list-style-type: none
}


.main-nav {
    width: 100%
}

.main-nav .menu {
    width: 100%
}


.main-nav .menu>ul {
    list-style-type: none;
    margin: 0;
    padding: 0
}

.main-nav .menu>ul>li {
    display: inline-block
}


.main-nav .menu>ul>li.current-menu-item>a {
    font-weight: bold
}

.main-nav .menu>ul>li>a {
    display: inline-block;
    color: #000;
    font-size: 13px;
    text-decoration: none;
    line-height: 3rem;
    padding: 0.5em 1em;
    -webkit-transition: border 0.1s ease-in-out, color 0.1s ease-in-out;
    -moz-transition: border 0.1s ease-in-out, color 0.1s ease-in-out;
    transition: border 0.1s ease-in-out, color 0.1s ease-in-out
}

.main-nav .menu>ul>li>a:hover {
    color: rgba(0, 0, 0, 0.6)
}

.main-nav .menu>ul>li i.material-icons {
    vertical-align: middle
}

.main-nav .menu>ul>li>ul.sub-menu {
    display: none;
    background: #fff;
    position: absolute;
    width: 16rem;
    color: #222;
    box-sizing: border-box;
    list-style-type: none;
    margin: 0;
    padding: 0;
    left: 0;
    right: 0;
    margin-top: 0rem;
    box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.2);
    font-weight: bold
}

.main-nav .menu>ul>li>ul.sub-menu a {
    color: #444;
    text-decoration: none
}

.main-nav .menu>ul>li>ul.sub-menu a:hover {
    background: #0A55A3;
    color: #fff
}

.main-nav .menu>ul>li>ul.sub-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-weight: normal;
    font-size: 0.9em
}

.main-nav .menu>ul>li>ul.sub-menu ul li.current-menu-item a {
    background: #0A55A3;
    color: #fff
}

.main-nav .menu>ul>li>ul.sub-menu>li.current-menu-item>a {
    background: #0A55A3;
    color: #fff
}

.main-nav .menu>ul>li>ul.sub-menu>li a {
    padding: 0.5rem 0.5rem 0.5rem 1.5rem;
    display: block
}

.main-nav .menu>ul>li>ul.sub-menu>li>a {
    background: #eee;
    padding: 1rem
}




.burger {
    position: absolute;
    top: 0.8rem;
    left: 1rem;
    width: 1.5rem;
    height: 1.5rem;
    z-index: 6010;
    border-radius: 4px;
    cursor: pointer;
    -webkit-transition: top 0.2s;
    -moz-transition: top 0.2s;
    transition: top 0.2s
}

.burger .ham {
    height: .345rem;
    border-bottom: 2px solid var(--primary-color);
    display: block;
    margin: 0 .15rem;
    -webkit-transition: -webkit-transform .2s;
    -moz-transition: -moz-transform .2s;
    transition: transform .2s
}

.main-header.design .burger {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
    top: 0.4rem;
    right: 1rem
}

.main-nav-open .everything {
    right: -18rem
}

.main-nav-open .main-nav .menu {
    left: 0
}

.main-nav-open .burger .ham:first-child {
    -webkit-transform: rotate(45deg) translateY(0.27rem) translateX(0.3rem);
    -moz-transform: rotate(45deg) translateY(0.27rem) translateX(0.3rem);
    -ms-transform: rotate(45deg) translateY(0.27rem) translateX(0.3rem);
    -o-transform: rotate(45deg) translateY(0.27rem) translateX(0.3rem);
    transform: rotate(45deg) translateY(0.27rem) translateX(0.3rem)
}

.main-nav-open .burger .ham:nth-child(2) {
    opacity: 0
}

.main-nav-open .burger .ham:last-child {
    -webkit-transform: rotate(-45deg) translateY(-0.47rem) translateX(0.15rem);
    -moz-transform: rotate(-45deg) translateY(-0.47rem) translateX(0.15rem);
    -ms-transform: rotate(-45deg) translateY(-0.47rem) translateX(0.15rem);
    -o-transform: rotate(-45deg) translateY(-0.47rem) translateX(0.15rem);
    transform: rotate(-45deg) translateY(-0.47rem) translateX(0.15rem)
}


.special-splash {
    background: #f00;
    height: 40rem
}

.special-splash.stroller {
    background: #f1f1f1 url("assets/barnvagn-skog.jpg") center center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    box-sizing: border-box;
    padding-top: 14rem
}

.special-splash .introduction {
    width: 80rem;
    margin: auto;
    box-sizing: border-box
}

.special-splash .introduction h1 {
    color: #fff;
    text-transform: uppercase;
    margin: 0;
    line-height: 0.7;
    font-size: 3.9em
}


.special-splash .introduction .copy {
    background: #fff;
    padding: 1em 2em;
    max-width: 60%;
    color: #2d2d2d;
    font-size: 0.94em
}

div#stdn-slide-outbtns {
   position: absolute;
   flex-direction: column;
   display: flex;
   gap: 0.5rem;
   top: 150px;
   flex-wrap: wrap;
   z-index: 3;
   right: 0;
   margin-left: auto;
   margin-right: auto;
   width: fit-content;
}

.stdn-line-btn {
   padding: 0.5rem 1rem;
    z-index: 10;
    cursor: pointer;
    border-radius: 4px 0 0 4px;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    background: #fff;
    gap: 0.5rem;
    filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.3));
}

/*.stdn-line-btn:hover p{
   display: block !important;
}*/


#quick-edit-settings{
    top: 8rem;
}


.admin-sett-top {
    border-bottom: 1px solid lightgray;
    padding-bottom: 0.5rem;
}


div#quick-sett-all {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

div#quick-sett-all::-webkit-scrollbar {
  display: none;
}

.quick-sett-order-wrp {
    display: flex;
    gap: 1rem;
}

.quick-sett-item {
    width: 100%;
    padding: 0.5rem 0.5rem;
    border: 1px solid;
    border-radius: 0.25rem;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.quick-sett-order {
    width: 1.5rem;
    aspect-ratio: 1;
    border: 1px solid;
    display: flex;
    justify-content: center;
    border-radius: 0.25rem;
}

div#right-side-menu {
    background: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    right: -20rem;
    width: 20rem;
    z-index: 10;
    height: 100%;
    border-radius: 0.5rem 0 0 0.5rem;
    overflow: hidden;
    filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.3));
}

.right-menu-cont{
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 3rem;

}



.admin-sett-top {
    display: flex;
    justify-content: space-between;
}

div#admin-sett {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    height: 100%;
}

.stdn-user-sign {
    width: 100%;
}

.stdn-user-sign h3{
    font-size:14px;
}

.stdn-user-sign a {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap:0.5rem;
}

.stdn-user-sign-left {
    width: 30%;
}

.stdn-user-sign-left img{
    width: 100%;
    object-fit: contain;
    border: 1px solid;
    height: auto;
}

#admin-sett-wrp, #quick-sett-wrp, .stdn-right-menu-wrp{
    padding: 1rem 2rem;
    margin-top: 1rem;
    z-index: 10;
    display: flex;
    flex-direction: column;
    background: #fff;
    gap: 1rem;
    height:100%;
}

div#quick-sett {
    display: grid;
    gap: 1rem;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

div#quick-sett{
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
div#quick-sett::-webkit-scrollbar {
  display: none;
}

.quick-edit-tool-wrp {
    display: flex;
    flex-direction: column;
}
.quick-edit-tool-wrp #quick-text-align-edit{
    display:flex;
    width:100%;
    padding:0;
    list-style:none;
    border: 1px solid;
    border-radius: 0.25rem;
}

.quick-edit-tool-wrp #quick-text-align-edit li {
    width: 100%;
    display: flex;
    justify-content: center;
    cursor:pointer;
}

.quick-edit-tool-wrp #quick-text-align-edit label{
    padding:0.5rem;
    width: 100%;
    height: 100%;
    display: flex;
    cursor:pointer;
    justify-content: center;
    align-items: center;
}

.quick-edit-tool-wrp #quick-text-align-edit input[type="radio"]:checked + label {
    background: black;
    color: white;
}

.quick-edit-tool-wrp #quick-text-align-edit li input {
    display: none;
}


#admin-sett-wrp h4, #quick-sett-wrp h4{
    font-size: 1rem;
    font-weight: 500;
}

#quick-edit-check-wrp {
    display: flex;
    justify-content: space-between;
}


input[type="checkbox"] {
    width: 1.5rem;
}

input[type="checkbox"]:checked {
    background-color: black;
}

.double-sided-options.side-design-area {
    display: flex;
    width: fit-content;
}

div#left-bottom-canvas {
    position: absolute;
    bottom: 1rem;
    right: 2rem;
    display: flex;
    z-index: 2;
    flex-direction: column;
    gap: 1rem;
    align-items: end;
}

.double-sided-options.side-design-area > div:first-child{
    border-radius: 0.25rem 0 0 0.25rem;
} 

.double-sided-options.side-design-area > div:last-child{
    border-radius: 0 0.25rem 0.25rem 0;
} 
.double-sided-btn-stdn {
    padding: 0.6rem 1rem;
    cursor: pointer;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
}
.double-sided-options.side-design-area > div.active {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.07) inset;
    background: #cae7eb40;
}

/*1400px and below */
@media screen and (max-width: 1400px) {

}

@media screen and (max-width: 1200px) {
    :root{
        --big-font: 1.2rem;
    }

    .name-and-price-wrp-stdn {
        flex-direction: column;
    }
    .name-price-seperator{
        display:none;
    }


    .pagewidth {
        width: initial;
        max-width: calc(100% - 1rem);
        padding: 0
    }

    .pagewidth.mobile-margin-top {
        margin-top: 5rem
    }

    .pagewidth.mobile-padding {
        margin: 6rem 0.5rem 0 0.5rem;
        position: relative
    }

    .contentwidth {
        width: 100%;
        padding: 0 1rem
    }

    .splash {
        margin-top: 0;
        height: initial;
        min-height: 34rem
    }

    .bigassshadow {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1500
    }

    .bigassshadow.hidden {
        display: none
    }

    a.flat.big,
    button.flat.big {
        padding: 0.6em 1em
    }

    .signbuilder {
        height: calc(100vh - 80px);
    }

    .sign-info {
        position: relative;
        left: 0;
        right: 0;
        bottom: 0;
        font-size: 0.6rem;
        padding: 0.5rem 1rem;
        white-space: nowrap;
        height:80px;
        box-sizing: border-box;
        gap:1rem;
    }

    .sign-info .flat {
        margin: 0
    }

     .tools ul.tabs li {
        padding: 0 0 0.5rem 0
    }
    .tools .toolbar .tool .sign-option.material {
        width: 100%;
        padding: 1rem
    }
    .tools .toolbar .tool .font-dropdown-wrap .option-font {
        position: fixed
    }

    .upload-mini.info {
        width: auto;
        margin-top: 3rem
    }
    .tools .toolbar .tool-sections .symbol-gallery .content {
        height: inherit;
        top: 3.4rem
    }
    .hide-mobile {
        display: none;
    }
}

@media screen and (max-width: 900px){
    .skyltstdn-add-to-cart, .skyltstdn-kop, .filled-btn-black-stdn {
        padding: 10px 15px;
    }
}

@media screen and (max-width: 767px) {
    body{
       /*
        position:absolute !important;
        top:0;
        bottom:0;
        left:0;
        right:0;
        height: calc(var(--vh, 1vh) * 100);
        height: 100dvh; */
    }
    .signbuilder,  #content-holder{
       padding: 0;
    }

    .dont-display-studio-mobile{
        display:none !important;
    }

    #playground{
        touch-action: manipulation !important;
    }  

    .height-studio-mobile{
        height:60px !important;
    }

    .signbuilder-right-content{
        flex-grow:1;
        height:calc(100% - 120px);
    }

    .fullscreen-tool-toggle {
        bottom: 0;
        height: 3rem;
        width: 6rem;
        left: 20px;
        transform: none;
        top: auto;
        border-radius: 0.5rem 0.5rem 0 0;
        transform:none;
        z-index: 2;
    }

    .tools ul.tabs{
       border-radius: 0;
    }

    .ct-section-inner-wrap{
        height: inherit;
    }
    .signbuilder{
        flex-direction: column-reverse;
    }
    #signbuilder-left-menu{
        height:100px;
        width:100%;
        padding: 0px;
    }
    .tools #toolwrap{
        top: auto !important;
        bottom: 100px !important;
        height: 40vh !important;
        left: 0 !important;
        width: 100% !important;
        border-bottom: 1px solid #fff;
        border-radius:0;
    }

     .tools ul.tabs{
        width: 100% !important;
        margin: 0;
        padding: 1rem 25px;
        position: relative;
        overflow-x: scroll;
        background: #000000;
        overflow-x: scroll;
        overflow-y: hidden;
        background: #000000;
        display: grid;
        grid-auto-flow: column;
        gap: 1.25rem;
    }

    .tools #toolwrap{
        top: auto;
        bottom: 50px;
        height: 40vh;
        left: 0;
        width: auto;
    }
    
    .canvas-wrap .object-controls{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    .other-control{
        grid-row: 1;
        grid-column: 1 / 3;
        padding:0;
        margin-right:0;
        border:none;
    }

    .other-control i.magnet-snapping {
        justify-content: flex-end;
    }

    .other-control i:nth-child(2), .other-control i:nth-child(3){
        justify-content: center; 
    }

    .remove-control{
        justify-content: flex-end;
    }

    .sign-info{
        display: none !important;
    }
    .tools{
        overflow:hidden;
    }

    .tabs-wrap{
        width:100%;
    }

    .signbuilder .design-area{
        margin:0;
        width: 100%;
    }
    .top-tool-bar {
      display: none !important;
    }
    .tools{
        width:100%;
    }

    .material{
        width:100%;
    }

    .top-bar-mobile {
        display: flex;
        height:50px;
    }
    .top-bar-mobile-2 {
        display: flex;
        height:50px;
    }
    .signbuilder .design-area{
        order:3;
        margin-top:0;
    }
    .tools{
        order:4;
        margin:0;
        position: unset;
    }

    ul.tabs li {
        height: 70px !important;
    }
    .tools ul.tabs li{
       width:5rem;
       padding: 0;
       margin: 0;
    }

    .top-tool-bar-tur{
        gap:0px;
    }
    .top-tool-bar-tur > div {
        margin-right:20px;
    }
    .top-tool-bar-tur > div:last-child{
        margin-right:0px;
    }

    .top-tool-bar-ps{
        gap:0px;
    }
    .top-tool-bar-ps > div:first-child{
        margin-right:20px;
    }
    .top-tool-bar-tur img {
        width: 20px;
    }
    .top-tool-bar-ps img {
        width: 20px;
    }
    .top-tool-bar-right .price{
        display: flex;
    }
    .top-tool-bar-right .price .large{
        font-weight: 800;
    }
    .top-tool-bar-right .price span{
        font-weight: 400;
    }
    .top-tool-bar-right .skyltstdn-add-to-cart {
        background-color: var(--primary-color);
        color: #fff;
        padding: 2px 15px;
        margin-right: 10px;
        box-shadow: none;
    }
    .symbol-size-ui{
        display:none !important;
    }
    .symbol-gallery .content{
        display: none !important;
    }
    .enlarge-content-menu-studio{
        width:100% !important;
    }

    ul.new-symbol-grid{
        grid-template-columns: 1fr 1fr !important;
    }
    .toggle-tools-menu{
        position: sticky;
        bottom: 0;
    }

    .toggle-fullscreen{
        top:0.5rem;
        right:0.5rem;
    }

    .fullscreen-zoom{
        display:none !important;
    }

    .size-options.custom-size-option-vals{
        display: flex;
    }
    .size-opt-ctn{
        width: 100%;
    }

    canvas#render-canvas {
        display: none;
    }
}

@media screen and (max-width: 700px) {
    .tools .toolbar .tool-sections .symbol-gallery .header input {
        max-width: 10rem
    }
    .introduction .cta--buttons a {
        display: block;
        margin: 0;
        text-align: center;
        margin-top: 0.5rem
    }
}



//between 1200 and 1400
@media screen and (min-width: 1200px) and (max-width: 1400px) {

}
//1200 and up
@media screen and (min-width: 1200px) {

    
}

//1400px and up 
@media screen and (min-width: 1400px) {

}


//1200px and below



//key frames

@-webkit-keyframes displaySigns {
    from {
        -webkit-transform: rotate(-40deg);
        opacity: 0
    }

    to {
        -webkit-transform: rotate(0);
        opacity: 1
    }
}

@-moz-keyframes displaySigns {
    from {
        -moz-transform: rotate(-40deg);
        opacity: 0
    }

    to {
        -moz-transform: rotate(0);
        opacity: 1
    }
}

@keyframes displaySigns {
    from {
        -webkit-transform: rotate(-40deg);
        -moz-transform: rotate(-40deg);
        -ms-transform: rotate(-40deg);
        -o-transform: rotate(-40deg);
        transform: rotate(-40deg);
        opacity: 0
    }

    to {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
}

@keyframes blink {
    50% {
      opacity: 0.6;
    }
}

@keyframes rotate-sale-sign {
    0% {
        transform: rotate(140deg)
    }

    80% {
        transform: rotate(-40deg)
    }

    100% {
        transform: rotate(0deg)
    }
}

@-webkit-keyframes sk-scaleout {
    0% {
        -webkit-transform: scale(0)
    }

    100% {
        -webkit-transform: scale(1);
        opacity: 0
    }
}

@keyframes sk-scaleout {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }
}

/*
.lds-ring {
    display: flex;
    position: relative;
    justify-content: center;
    align-items:center;
    width: 100%;
    height: 100%;
  }
  .lds-ring div {
      box-sizing: border-box;
      display: block;
      position: absolute;
      width: 1.8rem;
      height: 1.8rem;
      margin: 4px;
      border: 4px solid #fff;
      border-radius: 50%;
      animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
      border-color: #fff transparent transparent transparent;
  }
  .lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
  }
  .lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
  }
  .lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
  }
  
  .lds-ring.black div{
    border: 4px solid #000;
    border-color: #000 transparent transparent transparent;
  }
  
  @keyframes lds-ring {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  */

.lds-ring,
.lds-ring div {
  box-sizing: border-box;
}
.lds-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.lds-ring div {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border: 8px solid currentColor;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: currentColor transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}