.qlwapp, #outer_shopping_button{
    display: none !important;
}

body{
    --main-accent-color: #52ae32;
}

/*loading items animation*/
.loading-item-animation{
    position: relative !important;
    pointer-events: none !important;
    cursor: none !important;
}
    
.loading-item-animation::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 200% 100%;
    outline: solid 5px white;
    padding: 5px;
    animation: anim-item-loading-def 1.5s infinite ease-in-out;
    z-index: 5;
}
    
@keyframes anim-item-loading-def{
    0%{
        background-position: 100% 0
    }
    100%{
        background-position: -100% 0
    }
}


/*limit text to X lines*/
.limit-text{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: var(--lines, 1); /* number of lines to show */
           line-clamp: var(--lines, 1); 
    -webkit-box-orient: vertical;
}


/*buttons' design */
.wrappable-btn{
    display: flex;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center;
    padding: 0 !important;
    overflow: hidden;
    gap: 0 !important;
}
.wrappable-btn .wrappable-text{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    width: 0;
    white-space: nowrap;
    background-color: var(--main-accent-color);
    border-radius: 1em;
    overflow: hidden;
}
.wrappable-btn .wrappable-icon{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.5em;
    height: 2.5em;
    border-radius: 50%;
}

.wrappable-btn:hover .wrappable-text, .wrappable-btn:focus .wrappable-text{
    animation: unwrap-text-btn .5s ease forwards;
}

@keyframes unwrap-text-btn{
    100%{
        width: 100%;
        padding-left: 5px;
    }
}

/*toggle switch*/
.toggle {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    line-height: 1;
	--width-toggle: 30px;
	--height-toggle: 15px;
	--text-size: 10px;
	--color-accent-toggle: #47bd47;
	margin: 0;
	cursor: pointer;
	gap: 5px;
}
.toggle-switch {
	display: inline-block;
	position: relative;
	width: var(--width-toggle);
	height: var(--height-toggle);
	background: #ccc;
	border-radius: 100px;
	--margin-toggle: calc(var(--height-toggle) / 6);
	--total-margin-toggle: calc(var(--margin-toggle) * 2); /*both sides up and down*/
	--size-btn: calc(var(--height-toggle) - var(--total-margin-toggle));
	vertical-align: middle;
	transition: background 0.25s;
	&:before,
	&:after {
		content: "";
	}
	&:before {
		display: block;
		position: absolute;
		left: var(--margin-toggle);
		top: var(--margin-toggle);
		width: var(--size-btn);
		min-width: var(--size-btn);
		height: var(--size-btn);
		background: linear-gradient(to bottom, #fff 0%,#eee 100%);
		border-radius: 50%;
		box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
		transition: left 0.25s;
	}
	.toggle:hover &:before {
		background: linear-gradient(to bottom, #fff 0%,#fff 100%);
		box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
	}
	.toggle-checkbox:checked + & {
		background: var(--color-accent-toggle);
		&:before {
		    --end-track: calc(100% - var(--size-btn));
			left: calc( var(--end-track) - var(--margin-toggle) );
		}
	}
}
.toggle-checkbox {
	position: absolute;
	visibility: hidden;
}
.toggle-label {
	position: relative;
	font-size: var(--text-size);
	font-weight: inherit;
}


/* POPUP DESIGN*/
.popup-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    width: 100vw; 
    height: 100vh;
    top: 0;
    left: 0;
    background-color: #cdcdcd9e;
    padding: 15px;
    z-index: 100000;
}

.popup-wrapper .popup{
    max-width: 100%;
    max-height: 100%;
}

.popup-wrapper .button-container .button-popup{
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 40%;
    font-weight: 600;
    line-height: 1.2;
}

.button-container .btn1{
    color: #4d4d4d;
    background-color: lightgrey;
}

.button-container .btn2{
    color: white;
    background-color: #52ae32;
}

.text-lines-limit{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: var(--lines); /* number of lines to show */
            line-clamp: var(--lines);
    -webkit-box-orient: vertical;
}

/* loaders */

.custom-loader.bouncing-ball {
  height: 60px;
  max-width: 200px;
  --ball-color: #CF4647;
  --line-color: black;
  border-bottom: 3px solid #0000;
  background: 
    linear-gradient(90deg, var(--line-color) 50%,#0000 0)
    -25% 100%/50% 3px repeat-x border-box;
  position: relative;
  animation: bouncing-ball-anim-1 .75s linear infinite;
}
.custom-loader.bouncing-ball:before {
  content: "";
  position: absolute;
  inset: auto 42.5% 0;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ball-color);
  animation: bouncing-ball-anim-2 .75s cubic-bezier(0,900,1,900) infinite;
}
@keyframes bouncing-ball-anim-1 {
  to {background-position: -125% 100%}
}
@keyframes bouncing-ball-anim-2 {
  0%,2% {bottom: 0%}
  98%,to {bottom:.1%}
}


.custom-loader.four-square-loader {
    scale: 1.5;
    height: 5px;
    width: 5px;
    color: var(--loader-color, lightgreen);
    opacity: .8;
    box-shadow: -10px -10px 0 5px,
                -10px -10px 0 5px,
                -10px -10px 0 5px,
                -10px -10px 0 5px;
    animation: four-square-loader-anim 6s infinite;
}

@keyframes four-square-loader-anim {
    0% {
      box-shadow: -10px -10px 0 5px,
                  -10px -10px 0 5px,
                  -10px -10px 0 5px,
                  -10px -10px 0 5px;
    }
    8.33% {
      box-shadow: -10px -10px 0 5px,
                  10px -10px 0 5px,
                  10px -10px 0 5px,
                  10px -10px 0 5px;
    }
    16.66% {
      box-shadow: -10px -10px 0 5px,
                  10px -10px 0 5px,
                  10px 10px 0 5px,
                  10px 10px 0 5px;
    }
    24.99% {
      box-shadow: -10px -10px 0 5px,
                  10px -10px 0 5px,
                  10px 10px 0 5px,
                  -10px 10px 0 5px;
    }
    33.32% {
      box-shadow: -10px -10px 0 5px,
                  10px -10px 0 5px,
                  10px 10px 0 5px,
                  -10px -10px 0 5px;
    }
    41.65% {
      box-shadow: 10px -10px 0 5px,
                  10px -10px 0 5px,
                  10px 10px 0 5px,
                  10px -10px 0 5px;
    }
    49.98% {
      box-shadow: 10px 10px 0 5px,
                10px 10px 0 5px,
                10px 10px 0 5px,
                10px 10px 0 5px;
    }
    58.31% {
      box-shadow: -10px 10px 0 5px,
                  -10px 10px 0 5px,
                  10px 10px 0 5px,
                  -10px 10px 0 5px;
    }
    66.64% {
      box-shadow: -10px -10px 0 5px,
                  -10px -10px 0 5px,
                  10px 10px 0 5px,
                  -10px 10px 0 5px;
    }
    74.97% {
      box-shadow: -10px -10px 0 5px,
                  10px -10px 0 5px,
                  10px 10px 0 5px,
                  -10px 10px 0 5px;
    }
    83.3% {
      box-shadow: -10px -10px 0 5px,
                  10px 10px 0 5px,
                  10px 10px 0 5px,
                  -10px 10px 0 5px;
    }
    91.63% {
      box-shadow: -10px -10px 0 5px,
                  -10px 10px 0 5px,
                  -10px 10px 0 5px,
                  -10px 10px 0 5px;
    }
    100% {
      box-shadow: -10px -10px 0 5px,
                  -10px -10px 0 5px,
                  -10px -10px 0 5px,
                  -10px -10px 0 5px;
    }
}


.custom-loader.classic-rounded-spinner {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: 
    radial-gradient(farthest-side, var(--loader-color, lightgreen) 94%,#0000) top/8px 8px no-repeat,
    conic-gradient(#0000 30%, var(--loader-color, lightgreen));
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
  animation: classic-rounded-spinner-anim 1s infinite linear;
}
@keyframes classic-rounded-spinner-anim{ 
  100%{transform: rotate(1turn)}
}




.custom-loader.simple-two-sides-spinner {
  width: 50px;
  --b: 8px;
  --loader-color: #514b82;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--loader-color);
  -webkit-mask:
    repeating-conic-gradient(#0000 0deg,#000 1deg 70deg,#0000 71deg 90deg),
    radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
  -webkit-mask-composite: destination-in;
          mask-composite: intersect;
  animation: simple-two-sides-spinner-anim 1s infinite;
}
@keyframes simple-two-sides-spinner-anim {to{transform: rotate(.5turn)}}


.custom-loader.four-cells-square {
    width: 40px;
    height: 40px;
    --c:no-repeat linear-gradient(var(--loader-color) 0 0);
    background: var(--c),var(--c),var(--c),var(--c);
    background-size: 21px 21px;
    animation: four-cells-square-anim 1.5s infinite cubic-bezier(0.3,1,0,1);
}
@keyframes four-cells-square-anim {
   0%   {background-position: 0    0,100% 0   ,100% 100%,0 100%}
   33%  {background-position: 0    0,100% 0   ,100% 100%,0 100%;width:60px;height: 60px}
   66%  {background-position: 100% 0,100% 100%,0    100%,0 0   ;width:60px;height: 60px}
   100% {background-position: 100% 0,100% 100%,0    100%,0 0   }
}



/* Useful animations */

@keyframes appear-upwards{
    from{
        transform: scale(.5) translateY(25px);
        opacity: .2;
    }
    to{
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}




/* forms styles */

.form-popup{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    gap: 8px;
}

.form-popup h6, .form-popup h5, .form-popup h4, .form-popup h3, .form-popup h2, .form-popup h1{
    margin: 0;
}

.form-popup .subtitle{
    font-size: 1.2em;
    margin: 0;
}

.form-popup .form-data{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 60vh;
    padding: 0 10px;
    overflow: auto;
    gap: 10px;
}

.form-popup .form-section{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.form-popup .form-field{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 100%;
    flex-grow: 1;
}

.form-popup .form-field.centered-m{ /*main direction*/
    justify-content: center;
}
.form-popup .form-field.centered-s{ /*secondary direction*/
    align-items: center;
}
.form-popup .form-field.centered{ /*both directions*/
    justify-content: center;
    align-items: center;
}

.form-popup .form-field .field-value{
    display: block;
    width: 100%;
    flex-grow: 1;
}

.form-popup .form-field input, .form-popup .form-field select, .form-popup .form-field textarea{
    width: 100%;
    margin: 0;
} 

.form-popup .form-field textarea{
    height: 4em;
    min-width: 100%;
    min-height: 4em;
    max-width: 100%;
    max-height: 12em;
}

.form-popup .button-container{
    width: 100%;
}

.form-popup .button-container button{
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    padding: 5px;
    gap: 10px;
}

/* icon/name section */

.photo-name-section{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-grow: 1;
    max-width: 100%;
    background-color: #e5e5e56b;
    border-radius: 1em;
    padding: 10px;
    margin-bottom: 10px;
    gap: 15px;
}

.photo-name-section .icon-section{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 4.5em;
    height: 4.5em;
    min-width: 4.5em;
    min-height: 4.5em;
    background-color: lightgrey;
    border-radius: 1em;
    cursor: pointer;
}

.photo-name-section .icon-section::after{
    content: "\f302";
    position: absolute;
    font-family: "Font Awesome 6 Free";
    font-size: 1.3em;
    font-weight: 900;
}

.photo-name-section .icon-section .icon-photo-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.photo-name-section .icon-section .icon{
    width: 100%;
    height: 100%;
    border-radius: 1em;
    z-index: 1;
}

.photo-name-section .display-name-section{
    max-width: 100%;
    overflow: hidden;
}

.photo-name-section .name-wrapper{
    width: 100%;
    --lines: 2;
    text-align: initial;
}