* {
  box-sizing: border-box;
}
.target {
  outline: none;
  background-color: #efefef;
  border-radius: .5rem
}

.hidden {
  display: none
}
.dragging button {
  opacity: 0 !important;
}

html {
	overflow-y: scroll;
}

html, body {
	position: relative;
	width: 100%;
	height: 100%;
}

:root {
  --mainFont: "Nunito", sans-serif;
  --bodyFont: "Karla", sans-serif;
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
  --mainTxtColor: #445165;
  --bodyTxtColor: #3f4956;
  --primaryColor: #59cfeb;
  --bgColor: #F3F6FD;
  --elColor: #fff;
  --elHeader: #efefef;
  --iconStroke: #fff;
  --iconFill: #58cfeb;
  --menuHover: #f8f8f8;
  --sepColor: #d5e1e5;
  --sepHover: #444;
  --menuActive: #86e5f9;
  --meta: rgb(150, 150, 150);

  --discountDefault: #e8f7fb;

  --infoBg: #f5f5f5;
  --infoTitleBg: #e8e6e7;
  --infoBorder: #ccc;
  --geen: #85E888;

  --qtyBorder: #ddd;

  --btnPrimary: #87e5fa;
  --btnPrimaryHover: #a9ebfa;
  --btnPrimaryActive: #58cfeb;
  --btnSecondary: #ffb961;
  --btnSecondaryHover: #fec988;
  --btnSecondaryActive: #f6b86b;
  --btnGray: #e8e6e7;
  --btnGrayHover: #f1f1f1;
  --btnGrayActive: #e5e3e4;
  --btnText: #171a1b;

  --r1: #C4CCCC;
  --r2: #85E888;
  --r3: #58CFEB;
  --r4: #C270E8;
  --r5: ;
  --r6: ;
  --r7: ;
  --r8: ;
  --r9: ;
  --r10: ;
}

.dark:root {
  --mainTxtColor: #fff;
  --bodyTxtColor: #efefef;
  --primaryColor: #377bb3;
  --iconStroke: #fff;
  --iconFill: #377bb3;
  --bgColor: #111827;
  --elColor: #1F2937;
  --elHeader: #2e3c50;
  --menuHover: #2c3a4c;
  --sepColor: #2e3c50;
  --sepHover: #3d4f69;
  --menuActive: #2c718f;
  --meta: rgb(145, 179, 219);

  --discountDefault: #113740;

  --geen: #417843;

  --infoBg: #283444;
  --infoTitleBg: #111827;
  --infoBorder: #111827;

  --qtyBorder: #596889;

  --btnPrimary: #87e5fa;
  --btnPrimaryHover: #a9ebfa;
  --btnPrimaryActive: #58cfeb;
  --btnSecondary: #c78b43;
  --btnSecondaryHover: #fec988;
  --btnSecondaryActive: #f6b86b;
  --btnGray: #344358;
  --btnGrayHover: #344358;
  --btnGrayActive: #344358;
  --btnText: #171a1b;

  /* --r1: ;
  --r2: ;
  --r3: ;
  --r4: ;
  --r5: ;
  --r6: ;
  --r7: ;
  --r8: ;
  --r9: ;
  --r10: ; */
}

.animate__animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
body {
  margin: 0;
  font-family: var(--bodyFont);
  font-size: 16px;
  line-height: 1.5;
	color: var(--bodyTxtColor);
	background-color: var(--bgColor)
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 0.5em 0;
  font-weight: 400;
  line-height: 1.2;
  color: var(--mainTxtColor);
  font-family: var(--mainFont);
}

h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.2rem
}

a {
  color: inherit;
}

input,
textarea {
  font-size: 15px;
  font-family: var(--bodyFont);
}

a {
	color: rgb(0,100,200);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:visited {
	color: rgb(0,80,160);
}

label {
	display: block;
}

input, button, select, textarea {
  font-family: inherit;
  font-size: inherit;
  margin: 0 0 1rem 0;
  box-sizing: border-box;
  border: 1px solid var(--sepColor);
  border-radius: .5rem;
  padding: .75rem;
  width: 100%;
}

input:hover, textarea:hover {
    border-color: var(--sepHover);
}
input:focus {
    border-color: #58cfeb;
}

button {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* button:focus {
  outline: none;
  box-shadow: 0 0 0 2px #58cfeb;
} */
.quill-wrap {
    background: #fff;
    min-height: 147px;
    width: 100%;
    border-radius: 0.5rem;
  }
  .quill-wrap:hover .ql-container,.quill-wrap:hover .ql-toolbar {
    border-color: #444
  }
.quill-wrap:focus-within {
  box-shadow: 0 0 0 2px #58cfeb;
  border-color: #58cfeb;
}
.quill-wrap:focus-within .ql-toolbar.ql-snow, .quill-wrap:focus-within .ql-container.ql-snow {
  border-color: #58cfeb;
}
.ql-snow.ql-toolbar button:hover, .ql-snow .ql-toolbar button:hover, .ql-snow.ql-toolbar button:focus, .ql-snow .ql-toolbar button:focus, .ql-snow.ql-toolbar button.ql-active, .ql-snow .ql-toolbar button.ql-active, .ql-snow.ql-toolbar .ql-picker-label:hover, .ql-snow .ql-toolbar .ql-picker-label:hover, .ql-snow.ql-toolbar .ql-picker-label.ql-active, .ql-snow .ql-toolbar .ql-picker-label.ql-active, .ql-snow.ql-toolbar .ql-picker-item:hover, .ql-snow .ql-toolbar .ql-picker-item:hover, .ql-snow.ql-toolbar .ql-picker-item.ql-selected, .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
  color: #58cfeb !important
}
.ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow .ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button:focus .ql-stroke, .ql-snow .ql-toolbar button:focus .ql-stroke, .ql-snow.ql-toolbar button.ql-active .ql-stroke, .ql-snow .ql-toolbar button.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow.ql-toolbar button:hover .ql-stroke-miter, .ql-snow .ql-toolbar button:hover .ql-stroke-miter, .ql-snow.ql-toolbar button:focus .ql-stroke-miter, .ql-snow .ql-toolbar button:focus .ql-stroke-miter, .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter, .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
    stroke: #58cfeb !important;
}
input:focus {
  outline: none;
  box-shadow: 0 0 0 2px #58cfeb;
  border-color: #58cfeb;
}
.svelteContainer input {
  margin: 0;
}

.menu .menu-block a.active {
		background-color: var(--menuActive) !important;
  }
input:disabled {
	color: #ccc;
}
.text-left {
    text-align: left
  }
.sr-only {
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.shadow-sm {
	box-shadow: 0 1px 2px 0 rgb(60 64 67 / 30%), 0 1px 3px 1px rgb(60 64 67 / 15%);
}

.shadow-md {
	box-shadow: 0 3px 6px rgb(27 37 38 / 16%);
}

.item {
  box-shadow: 0 0 0 1px rgba(63,63,68,.05),0 1px 3px 0 rgba(63,63,68,.15);
  outline: .1rem solid transparent;
  border-radius: .5rem;
  background-color: #fff;
  padding: 1rem;
  position: relative;
  overflow: hidden
}
.listItem .item {
  border-radius: 0
}
.listContainer:hover {
  box-shadow: 0 0 0 1px #444 !important
}
.ql-toolbar.ql-snow {
  border-radius: .5rem .5rem 0 0;
}

.ql-container.ql-snow {
  border-radius: 0 0 .5rem .5rem;
  min-height: 238px;
  height: auto;
}
.ql-editor ul {
  padding-left: 0 !important;
}
.ql-editor {
  font-family: 'Karla';
  font-size: 1rem;
}
span.ql-formats button {
    margin: 0;
}
textarea {
  min-height: 180px;
}
textarea:focus {
  box-shadow: 0 0 0 2px #58cfeb;
  border-color: #58cfeb;
  outline: none;
}
/* Simplebar */

.scrolly {
  scroll-behavior: smooth;
  box-sizing: border-box;
  max-height: 500px;
}
.scrolly .simplebar-track.simplebar-vertical {
  top: .5rem;
  right: -8px;
}
.scrolly .simplebar-track {
  bottom: 0;
  background-color: #efefef;
  border-radius: 1rem;
}
.scrolly .simplebar-scrollbar:before {
  background: #58cfeb;
}
.scrolly .simplebar-scrollbar.simplebar-visible:before {
  opacity: 1;
}
.simplebar-scrollbar:before {
  opacity: 1 !important;
}
.simplebar-track.simplebar-horizontal {
  display: none;
}
.simplebar-content-wrapper {
  overscroll-behavior-y: contain;
}
.simplebar-content {
    margin-right: 14px;
    margin-left: 2px;
    padding-bottom: 1rem;
}
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.s-ripple-container {
  position: relative;
  overflow: hidden;
}
.icon-btn {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  border-radius: 999px;
  background-color: #fff;
  margin: 0;
  cursor: pointer;
  color: #444;
  border: 1px solid #c9cccf;
  transition: .3s ease
}
.icon-btn:hover {
  background-color: transparent
}

.tilt svg {
  transform: rotate(45deg)
}

/* Tooltip */
[data-tooltip] {
  position: relative;
  z-index: 2;
  display: inline-block;
}

[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s ease-out;
  transform: translate(-50%, 5px);
}
button svg, a svg {
    display: block;
}
input:invalid, textarea.error {
  background-color: rgb(246, 224, 224)
}
.item-title {
    padding-bottom: .75rem;
    border-bottom: 1px solid #58cfeb;
    margin-bottom: 1rem;
}

.item-title h2 {
    margin: 0;
    font-weight: bold;
}
.icon-modal button svg {
  transition: none
}
.icon-modal button:hover svg {
    transform: scale(3);
}

/* Color picker */
.color-picker.collapse .color-picker-controls {
  left: 45px !important;
}

.color-picker-wrap {
    margin-right: auto;
    position: relative;
    width: 115px;
    display: flex;
    align-items: center;
    align-self: stretch;
}
.color-picker .color-picker-handle {
    border-radius: 999px !important;
    border: 0 !important;
    box-shadow: rgb(255 255 255) 0px 0px 0px 7px;
        z-index: 999 !important;
    position: relative !important;
}
.color-picker-controls .matrix canvas {
  border: 0;
  border-radius: .45rem;
}

.color-picker.collapse .color-picker-controls {
    border: 0 !important;
    border-radius: .5rem !important;
}
.tab-bar .tab.active {
    border-bottom-width: 3px;
    border-color: #58cfeb
}
.color-picker-background {
  z-index: 10 !important;
}

/* Select vars */

.themed {
    position: relative;
    background: #fff;
    border-radius: 0.5rem;
    --height: 50px;
    --borderRadius: 0.5rem;
    --background: transparent;
    --borderFocusColor: #ffb961;
    --itemIsActiveColor: #222;
    --itemIsActiveBG: #89e4f9;
    --indicatorColor: transparent;
    --itemHoverBG: #caeef7;
    --listBorderRadius: 0.5rem;
    --inputFontSize: 14px;
    --border: 1px solid #ccc;
    --borderFocusColor: #58cfeb;
    --borderHoverColor: #444;
    --listShadow: 0 0 0 1px #ccc;
  }

  .no-hl {
  outline: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

  /* Boing */
/* 
  @-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  40% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  50% {
    -webkit-transform: scale3d(1.02, 0.95, 1);
    transform: scale3d(1.02, 0.95, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  40% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  50% {
    -webkit-transform: scale3d(1.02, 0.95, 1);
    transform: scale3d(1.02, 0.95, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
} */
@keyframes rubberBand {
  from {
    box-shadow: 0 0 0 0 #45acc4
  }

  50% {
    box-shadow: 0 0 0 4px #45acc4
  }

  to {
    box-shadow: 0 0 0 0 #45acc4
  }
}
.animate__rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
  animation-duration: .5s;
}
.rounded {
  border-radius: .25rem
}