* input::-webkit-outer-spin-button, * input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

* input[type=number] {
    -moz-appearance: textfield;
}

.options *:hover {
    transition: all 0.4s ease-in-out;
}

.tab::-webkit-scrollbar-track, .background-switcher::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
    border-radius: 5px;
}

.tab::-webkit-scrollbar-track {
    margin: 10px 0 10px 10px;
}

.background-switcher::-webkit-scrollbar-track {
    margin: 10px 0;
}

.tab::-webkit-scrollbar {
	width: 6px;
	background-color: #F5F5F5;
    border-radius: 5px;
}

.background-switcher::-webkit-scrollbar {
    height: 6px;
    background-color: #F5F5F5;
    border-radius: 5px;
}

.tab::-webkit-scrollbar-thumb, .background-switcher::-webkit-scrollbar-thumb {
	background-color: #2DB1B1;
    border-radius: 5px;
}


textarea {
    resize: none;
    border: 1px solid lightgrey;
    border-radius: 5px;
}

textarea:focus {
    border-color: #2DB1B1;
}

#product-customizer-app {
    margin-bottom: 50px;
}

.row-config, .row-preview {
    height: 600px;
}

.row-pricing, .row-backgrounds {
    height: 100px;
}

.row-backgrounds .tw-p-2:first-child {
    padding-left: 0px;
}

.row-backgrounds .tw-p-2:last-child {
    padding-right: 0px;
}

.row-backgrounds .bg img {
    border-radius: 10px;
    height: 50px;
    width: 75px;
}

.row-backgrounds {
    margin-right: 10px;
}

.row-config {
    background-color: #F0F0F0;
    border-radius: 10px 10px 0 0;
}

.row-pricing {
    border-radius: 0 0 10px 0;
}

.preview-lightbox, .preview-magnetic {
    border-radius: 10px;
}

.preview-lightbox {
    border-radius: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #3E3A39;
    max-height: 650px;
}

.options-main {
    border-radius: 10px !important;
}

.title-magnetic {
    font-size: 1.5em;
    padding: 20px 0;
}

.tabs {
    background-color: #E8E8E8;
    height: 100px;
    border-radius: 10px 10px 0 0;
}

.tabs .tab-button {
    background: none;
    font-size: 12px;
}

.tab-button {
    color: #37363B;
    font-weight: bold;
}

.tab-button .nummer {
    width: 100%;
    text-align: center;
    padding: 10px;
    margin-bottom: 0;
    display: block;
}

.tab-button .nummer p {
    border-radius: 50px;
    line-height: 0.75;
    border: 1px solid #37363B;
    width: 30px;
    height: 30px;
    padding: 10px;
    margin: auto;
}

.tab-button .button-label {
    font-size: 14px;
}

.tab-button:hover, .tab-button_active  {
    color: #FE736E;
}

.tab-button:hover .nummer p, .tab-button_active .nummer p {
    background-color: #FE736E;
    border-color: #FE736E;
    color: #FFF;
}

.summary-price {
    display: inline-flex;
    flex-direction: row;
    width: 100%;
    border-radius: 0 0 10px 10px;
}

.pricing, .cta-cart {
    height: 80px;
}

label {
    font-weight: bold;
}

.pricing {
    float: left;
    background-color: #DEDEDE;
    border-radius: 0 0 0 10px;
}

.pricing-total {
    font-size: 14px;
    padding-right: 30px;
}

.pricing-value {
    font-size: 24px;
    font-weight: bold;
    color: #2DB1B1;
}

.cta-cart {
    background-color: #2DB1B1;
    border-radius: 0 0 10px 0;
    float: left;
}

.cta-cart button, .cta-cart button:active {
    border: none;
    font-weight: normal;
    font-size: 16px;
    background-color: #2DB1B1;
}

.cta-cart button:hover {
    background-color: transparent;
    border: none;
}

.cta-cart button svg {
    stroke: #FFF;
    height: 30px;
    width: auto;
    padding-left: 10px;
}

.lightbox-none, .mg-hidden {
    display: none;
}

.tab-button:nth-child(3):after {
    display: none;
}

.tab-button:after {
    display: block;
    position: relative;
    color: lightgrey;
    letter-spacing: -2px;
}

@media only screen and (min-width: 768px) {
    .tab-button:after {
        content: "_____________";
        top: -70%;
        left: 60%;
    }
}

@media only screen and (max-width: 768px) {
    .tab-button:after {
        content: "";
    }
}

/*MAGNETIC*/
.mg-symbols {
    padding: 10px 0;
    line-height: 1.3em;
    font-weight: 300;
}

.mg-label {
    text-align: left;
    padding-bottom: 10px;
    display: block;
}

.mg-available {
    font-weight: 600;
    text-align: left;
}

.mg-characters {
    font-weight: 300;
}

.mg-options {
    display: inline-flex;
    height: 75px;
    width: 100%;
    align-items: center;
    justify-content: space-evenly;
    border-radius: 5px;
    padding-bottom: 20px;
}
@media (max-width: 767px){
    .mg-options {
        display: block !important;
        height: auto !important;
    }
    .mg-options .mg-option {
        margin: 1rem 0;
        padding: 1rem 0;
    }
}

.mg-options .mg-option {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin: 10px;
    border-radius: 5px;
    cursor: pointer;
    padding: 10px;
    transition: all 0.3s ease;
    border: 1px solid lightgrey;
}

@media only screen and (max-width: 768px) {
    .mg-options .mg-option {
        width: 90%;
    }
}

.mg-option:first-child {
      margin-left: 0px !important;
  }

.mg-option:last-child {
      margin-right: 0;
}

.mg-options .mg-option .dot{
    height: 20px;
    width: 20px;
    background: #d9d9d9;
    border-radius: 50%;
    position: relative;
}

.mg-options .mg-option .dot::before{
    position: absolute;
    content: "";
    top: 4px;
    left: 4px;
    width: 12px;
    height: 12px;
    background: #2EC1C1;
    border-radius: 50%;
    opacity: 0;
    transform: scale(1.5);
    transition: all 0.3s ease;
}

input[type="radio"]{
    display: none;
}

#lowercase:checked:checked ~ .lowercase,
#uppercase:checked:checked ~ .uppercase,
#alu:checked:checked ~ .alu,
#black:checked:checked ~ .black,
#small:checked:checked ~ .small,
#medium:checked:checked ~ .medium,
#large:checked:checked ~ .large,
#neon_dimmer:checked:checked ~ .neon_dimmer {
    border-color: #2EC1C1;
    background: #2EC1C1;
}

#lowercase:checked:checked ~ .lowercase .dot,
#uppercase:checked:checked ~ .uppercase .dot,
#alu:checked:checked ~ .alu .dot,
#black:checked:checked ~ .black .dot,
#small:checked:checked ~ .small .dot,
#medium:checked:checked ~ .medium .dot,
#large:checked:checked ~ .large .dot,
#neon_dimmer:checked:checked ~ .neon_dimmer .dot {
    background: #fff;
}

#lowercase:checked:checked ~ .lowercase .dot::before,
#uppercase:checked:checked ~ .uppercase .dot::before,
#alu:checked:checked ~ .alu .dot::before,
#black:checked:checked ~ .black .dot::before,
#small:checked:checked ~ .small .dot::before,
#medium:checked:checked ~ .medium .dot::before,
#large:checked:checked ~ .large .dot::before,
#neon_dimmer:checked:checked ~ .neon_dimmer .dot::before {
    opacity: 1;
    transform: scale(1);
}

.mg-options .mg-option span {
      font-weight: 300;
      color: #1A1A1A;
}

#lowercase:checked:checked ~ .lowercase span,
#uppercase:checked:checked ~ .uppercase span,
#alu:checked:checked ~ .alu span,
#black:checked:checked ~ .black span,
#small:checked:checked ~ .small span,
#medium:checked:checked ~ .medium span,
#large:checked:checked ~ .large span,
#neon_dimmer:checked:checked ~ .neon_dimmer span {
    color: #fff;
}

.lightbox-size_label {
    font-size: 12px;
}

.lightbox-size_label::after {
    content: ' cm';
    font-size: 12px;
}

.mg-text {
    position: relative;
    z-index: 2;
    font-size: 2.25em !important;
    font-family: 'Arial Rounded MT Pro Bold', sans-serif;
    color: rgb(255, 253, 207);
    text-shadow:
        rgb(255 253 207 / 50%) -0.2rem -0.2rem 1rem,
        rgb(225 255 255 / 50%) -0.2rem -0.2rem 1rem,
        rgb(255 253 207 / 50%) 0.2rem 0.2rem 1rem,
        rgb(225 255 255 / 50%) 0.2rem 0.2rem 1rem,
        rgb(255 253 207) 0px 0px 2rem,
        rgb(255 253 207) 0px 0px 4rem,
        rgb(255 253 207) 0px 0px 6rem,
        rgb(255 253 207) 0px 0px 8rem,
        rgb(255 253 207) 0px 0px 10rem;
}

.mg-text #smiley svg, .mg-text #star svg, .mg-icon-star, .mg-icon-smiley {
    color: rgb(255, 249, 124) !important;
    text-shadow:
        rgb(255 249 124 / 50%) -0.2rem -0.2rem 1rem,
        rgb(225 255 255 / 50%) -0.2rem -0.2rem 1rem,
        rgb(255 249 124 / 50%) 0.2rem 0.2rem 1rem,
        rgb(225 255 255 / 50%) 0.2rem 0.2rem 1rem,
        rgb(255 249 124) 0px 0px 2rem,
        rgb(255 249 124) 0px 0px 4rem,
        rgb(255 249 124) 0px 0px 6rem,
        rgb(255 249 124) 0px 0px 8rem,
        rgb(255 249 124) 0px 0px 10rem
}

.mg-text #heart svg, .mg-icon-heart {
    color: rgb(255, 144, 255) !important;
    text-shadow:
        rgb(255 144 255 / 50%) -0.2rem -0.2rem 1rem,
        rgb(225 255 255 / 50%) -0.2rem -0.2rem 1rem,
        rgb(255 144 255 / 50%) 0.2rem 0.2rem 1rem,
        rgb(225 255 255 / 50%) 0.2rem 0.2rem 1rem,
        rgb(255 144 255) 0px 0px 2rem,
        rgb(255 144 255) 0px 0px 4rem,
        rgb(255 144 255) 0px 0px 6rem,
        rgb(255 144 255) 0px 0px 8rem,
        rgb(255 144 255) 0px 0px 10rem
}

.toggle {
    align-items: center;
    border-radius: 100px;
    display: flex;
    font-weight: 700;
    margin-bottom: 16px;
}

.toggle:last-of-type {
    margin: 0;
}

.toggle__input {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.toggle__input:not([disabled]):active + .toggle-track, .toggle__input:not([disabled]):focus + .toggle-track {
    border: 1px solid transparent;
    box-shadow: 0px 0px 0px 2px #2EC1C1;
}

.toggle__input:disabled + .toggle-track {
    cursor: not-allowed;
    opacity: 0.7;
}

.toggle-track {
    background: transparent;
    border: 1px solid #2EC1C1;
    border-radius: 100px;
    cursor: pointer;
    display: flex;
    height: 30px;
    margin-right: 12px;
    position: relative;
    width: 60px;
}

.toggle-indicator {
    align-items: center;
    background: #2EC1C1;
    border-radius: 24px;
    bottom: 2px;
    display: flex;
    height: 24px;
    justify-content: center;
    left: 2px;
    outline: solid 2px transparent;
    position: absolute;
    transition: 0.25s;
    width: 24px;
}

.checkMark {
    fill: #fff;
    height: 20px;
    width: 20px;
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
}

.toggle__input:checked + .toggle-track .toggle-indicator {
    background: #2EC1C1;
    transform: translateX(30px);
}

.toggle__input:checked + .toggle-track .toggle-indicator .checkMark {
    opacity: 1;
    transition: opacity 0.25s ease-in-out;
}

@media screen and (-ms-high-contrast: active) {
    .toggle-track {
      border-radius: 0;
    }
}

#magnetic .magnetic-top-line,
#magnetic .magnetic-bottom-line{
    display: block;
    width: 90%;
    border-bottom: 3px solid #f4f4f4;
    position: relative;
    border-width: 3px !important;
    opacity: 0.8;
    z-index: 1;
    margin: auto;
}
#magnetic .magnetic-top-line { top: -65px; }
#magnetic .magnetic-bottom-line { bottom: 50px; }

li.neon_color.active div {
    border: 2px solid black;
    box-shadow: 0px 0px 10px grey;
}

.config-foooter, .dimmer-text {
    float: left;
}

.config-footer p, .dimmer-text {
    color: #A8A8A8;
    font-size: 14px;
    font-style: italic;
    padding: 25px 0;
}

.dimmer-text {
    padding: 5px 0;
}

.size-footer {
    color: #A8A8A8;
    font-size: 14px;
    font-style: italic;
}

.switch-setting {
    text-decoration: none;
    padding: 10px 20px;
    margin-top: 10px;
}

.switch-setting:first-child {
    margin-right: 10px;
}

.switch-setting svg {
    padding-right: 10px;
    fill: #FFF;
    height: 25px;
    stroke: 1px #FFF;
}

.tab {
    background-color: #F0F0F0 !important;
    height: 450px;
    overflow-y: auto;
    overflow-x: hidden;
}

.tab-magnetic {
    background-color: #F0F0F0 !important;
    height: 450px;
}

.extra_text_wrapper {
    /*display: block;*/
}

.upload-images {
    padding: 24px;
    border: 1px dashed #ccc;
    text-align: center;
    color: #aaa;
    margin-bottom: 16px;
    background: rgba(0,0,0,.02);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.lightbox-remove-image {
    color: #FE736E;
}

.upload-button {
    border: 2px solid #FE736E;
    color: #37363B;
    padding: 10px 40px;
    font-weight: bold;
    border-radius: 50px;
}

.upload-button:hover {
    background-color: #FE736E;
    color: #FFF;
}

.text-options label {
    padding-bottom: 10px;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    background: #CECECE;
    outline: none;
    border-radius: 50px;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #2EC1C1;
    cursor: pointer;
    border-radius: 50px;
    border: 2px solid #FFF;
}

.slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #2EC1C1;
    cursor: pointer;
    border-radius: 50px;
    border: 2px solid #FFF;
}

.align_active {
    color: #FE736E !important;
}

.lightbox_text-align, .neon_text-align {
    padding: 10px;
    border-radius: 5px;
    margin: 0 5px
}

.lightbox_text-align:first-child {
    margin-left: 0;
}

.lightbox_text-align:last-child {
    margin-right: 0;
}

.on-button, .off-button {
    border-radius: 50px;
    background-color: transparant;
    border: 2px solid #FE736E;
    color: #FE736E;
    padding: 10px 20px;
}

.on-button svg, .off-button svg {
    fill: #FE736E;
    stroke: #FE736E;
}

.on-button:hover, .off-button:hover,
.setting_active {
    background-color: #FE736E;
    color: #FFF;
    transition: all ease-in-out 0.4s;
}

.on-button:hover svg, .off-button:hover svg {
    fill: #FFF;
    stroke: #FFF;
}

div#magnetic-height {
    height: 100%;
    width: 2px;
    position: absolute;
    top: 0;
    color: wheat;
    text-align: center;
    font-size: 10px;
    left: -10px;
    border-right: 2px solid #ffffff40;
    display: none;

}
.magnetic-height--rotate {
    transform: rotate(-90deg);
    margin-bottom: 0px;
    margin-left: 30px;
    color: #f4f4f4;
    font-family: 'Visby CF', sans-serif;
}

div#magnetic-length {
    height: 2px;
    width: 100%;
    position: absolute;
    bottom: -10px;
    color: #f4f4f4;
    text-align: center;
    font-size: 10px;
    border-top: 2px solid #ffffff40;
    padding-top: 5px;
    display: none;
    font-family: 'Visby CF', sans-serif;
}

.tooltip {
    position: absolute;
    visibility: hidden;
    padding: 20px;
    border-radius: 10px;
    font-weight: normal;
}

.has-tooltip:hover .tooltip {
    z-index: 50;
    visibility: visible;
}

@media only screen and (min-width: 768px) {
    .color-button {
        width: 12.5%;
        align-items: center;
        align-content: center;
        margin: auto;
    }
}

@media only screen and (max-width: 768px) {
    .color-button {
        align-items: center;
        align-content: center;
        margin: auto;
    }
}

.neon-show-type {
    border: 1px solid lightgrey;
    border-radius: 50px;
    padding: 10px 15px;
    font-weight: bold;
    font-size: 14px;
}

@media only screen and (min-width: 768px) {
    .neon-show-type:first-child {
        margin-left: 0;
    }

    .neon-show-type:last-child {
        margin-right: 0;
    }

    .neon-show-type {
        border: 1px solid lightgrey;
        border-radius: 50px;
        padding: 10px 30px;
        font-weight: bold;
        font-size: 14px;
    }
}

.neon-show-type:hover, .neon-type-active {
    cursor: pointer;
    border: 1px solid #FE736E;
    background-color: #FE736E;
    color: #FFF;
}

.font-selection li {
    font-size: 13px;
    vertical-align: middle;
    margin: auto;
}

@media only screen and (min-width: 768px) {
        .font-selection li {
        font-size: 22px;
    }
}

.font-selection li:hover {
    cursor: pointer;
    color: #2DB1B1;
}

.font-selection .active-font {
    color: #2DB1B1;
    border: 1px solid #2DB1B1;
    border-radius: 10px;
    margin: auto;
    font-weight: 600;
}

.input-size {
    border: 1px solid lightgrey;
    border-radius: 10px;
    font-size: 14px;
    background-color: #FFF;
    font-family: 'Visby CF', sans-serif;
    color: #1A1A1A;
    padding: 10px 0;
}

.input-value {
    border: none !important;
    background-color: transparent;
    padding-right: 0;
}

.input-text {
    border-left: 1px solid lightgrey;
    padding: 10px 15px;
    margin: auto;
}

.selectize-control.single .selectize-input {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #CECECE;
    border-radius: 10px;
    opacity: 1;
    font-family: 'Visby CF', sans-serif;
}

@font-face {
	font-family: 'Segoe UI Emoji';
	src: url('SegoeUIEmoji.woff2') format('woff2'),
	url('SegoeUIEmoji.woff') format('woff'),
	url('SegoeUIEmoji.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}


/* Magnetic Smiley possible fix */
#magnetic .mg-icon-heart, #magnetic .mg-icon-smiley, #magnetic .mg-icon-star {
	font-family: "Segoe UI Emoji" !important;
	font-size: 46px;
}
#magnetic .mg-icon-smiley {
	font-size: 62px !important;
}

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 4 version
*/
@-webkit-keyframes flicker {
	from {
	}
	to {
		-webkit-text-shadow: none;
		text-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
	}
	/*19%, 21%, 23%, 25%, 54%, 56%, 100% {
	}
	20%, 25%, 45% {
		text-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
	}*/
}

@keyframes flicker {
	/*19%, 21%, 23%, 25%, 54%, 56%, 100% {
	}
	20%, 25%, 45% {
		text-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
	}*/
	from {
	}
	to {
		text-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
	}
}

@media only screen and (min-width: 1280px) {
	#neon .preview-text, #magnetic .preview-text, #magnetic .mg-icon-heart, #magnetic .mg-icon-smiley, #magnetic .mg-icon-star {
		webkit-perspective:inherit;
		webkit-backface-visibility:none;

		-webkit-animation:  flicker 1.5s infinite alternate; /* Safari 4+ */ /* Fx 5+ */
		animation: flicker 1.5s infinite alternate;

		-webkit-animation: flicker;
		-webkit-animation-duration: 1.5s;
		-webkit-animation-iteration-count: infinite;
	}
}
.lightbox-masking {
    position: absolute;
    height: 44%;
    width: 236px;
    overflow: hidden;
}

/* Mich Mich, hier kan je met de -25px spelen om de tekst naar omhoog te doen, hoe meer in de min hoe hoger naar boven */
#neon .previex-text-wrapper {
	transform: translate(0px, -50px);
}

/* Lightbox mobile fixes */
@media only screen and (max-width: 720px) {
	.preview-lightbox {
		background-size: cover !important;
	}
}
@media only screen and (max-width: 485px) {
	#lightbox .row-preview {
		zoom: .65;
	}
}

.input-mg {
    font-family: 'Visby CF', "Segoe UI Emoji", sans-serif;
}

@media only screen and (max-width: 750px) {
    #magnetic .row-config {
        height: 750px;
    }
}

span.pricing-value.loading:before {
	content: "Loading";
	position: absolute;
	background: #dedede;
	font-size: 24px;
	width: 100%;
	height: 100%;
}

span.pricing-value {
	position: relative;
}



.app-mode {
	overflow: hidden;
}
.app-mode #product-customizer-app {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	background: white;
	width: 100%;
	height: 100%;
}
.app-mode .row-config {
	position: relative;
}
@media (min-width: 1280px) {
	.app-mode .tab {
		height: 75vh;
	}

	.app-mode .preview-lightbox,
	.app-mode .row-preview {
		height: 100vh !important;
		max-height: inherit;
	}

	.app-mode .row-config {
		position: relative;
	}

	.app-mode .row-pricing {
		position: absolute;
		width: 100%;
	}
}
@media (max-width: 1280px) {
	.app-mode .options-main {
		height: 35vh;
		overflow: scroll;
		padding-top: 0px;
	}

	.app-mode .row-pricing {
		position: fixed;
		bottom: -20px;
		width: 100%;
		z-index: 111;
	}

	.app-mode .tabs {
		position: sticky;
		top: 0;
	}

	.app-mode .app-pricing {
		display: flex;
	}

	.app-mode .app-config {
		padding-bottom: 120px;
	}

	.app-mode .tab {
		overflow: unset;
	}
}