/* ============================================================================ 
   global settings for POT layout
                                                                               */
@font-face {
  font-family: 'Bungee';
  src: url('/assets/font/Bungee/Bungee-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
	color-scheme: light dark;
  	--accent-color: #298533;                  /* --green      */
  	--accent-color-k1: #25692B;								/* --kreen-k1; slightly darker tone, used on clickable elements on mousover */ 
  	--accent-color-w1: #5A9D5A;								/* --green-w1; slightly lighter tone, used on clickable elements on mousover */ 
  	--accent-color-600-25: #35AC4240;         /* --green-600 with 25% opacity; very light green, used for a halo on focused elements */
  	--accent-color-600-25: #35AC4240;         /* --green-600 with 25% opacity; very light green, used for a halo on focused elements */
  	--text-color-light: #0C0B0A;						  /* --paper-k16  */
  	--text-color-dark: #F4F2EC ;              /* --paper-w4 ; used on dark accent-color tint */
  	--background-color: #F4F2EC;              /* --paper-w4   */
  	--text-color: var(--text-color-light);    /* --paper-k16  */
  	--selection-color: var(--accent-color);
  	--title-color: var(--accent-color);
		--menu-background-color: #C85749;         /* --red-500    */
		--menu-text: var(--text-color-dark);
		--focus-highlight-color: var(--accent-color);
		--tooltip-background-color: #604F9D; 			/* --blue-w1 lilac */

		--bs-green: #298533;

}
@media (prefers-color-scheme: dark) { 
	:root {
		--background-color: #1d1c19;              /* --paper-k15g */
		--text-color: var(--text-color-dark);     /* --paper-w4   */
		--menu-background-color: #AA4135;         /* --red-600    */ 
		--menu-text: var(--text-color-dark);
		--focus-highlight-color: white;
		--tooltip-background-color: #8978B6; 			/* --blue-w2 lilac */
	}
}

::selection {
	background: var(--selection-color); /* WebKit/Blink Browsers */
}
::-moz-selection {
	background: var(--selection-color); /* Gecko Browsers */
}

.btn-primary { background-color: var(--accent-color); border-color: var(--accent-color); }
.btn-primary:hover { background-color: var(--accent-color-k1); border-color: var(--accent-color-k1); }
.btn-check:active+.btn-primary, .btn-check:checked+.btn-primary, .btn-primary.active, .btn-primary:active, .show > .btn-primary.dropdown-toggle { background-color: var(--accent-color-k1); border-color: var(--accent-color-k1); }
.btn-check:focus+.btn-primary, .btn-primary:focus { background-color: var(--accent-color-k1); border-color: var(--accent-color-k1); box-shadow: 0 0 0 .25rem var(--accent-color-600-25); }
.btn-check:focus-visible+.btn-primary, .btn-primary:focus-visible { outline: #C1ECC6; }

.btn-close:hover { opacity: 1; }
.toast { background-color: rgba(255,255,255,.95); color: var(--text-color-light); } /* might better be same as tooltip color? */

html.hide-fonts-until-loaded * {
	/* add font names and sizes to wait for in index init_body() */
	color: transparent !important; 
	visibility: hidden;
}
body {
  margin: 0; 
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Bungee', sans-serif;
  background: var(--background-color); 
  /*background: linear-gradient(var(--accent-color) 8%, var(--background-color) 15%);*/
  color: var(--text-color);

  overflow: hidden;  /* only articles will scroll, other elements are positioned at viewport edges */
 
  /* Variable fonts: make ; */
  font-variation-settings: "wdth" 84;
  letter-spacing: 0.018em;

  /* hyphenation settings */
  -epub-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
	hyphens: auto;
	/* https://css-tricks.com/almanac/properties/h/hyphenate-limit-chars/#:~:text=As%20their%20names%20imply%2C%20%2Dwebkit,of%20characters%20after%20the%20hyphen. */
	-webkit-hyphenate-limit-before: 4;  /* For Safari */
	-webkit-hyphenate-limit-after: 5;   /* For Safari */
	-ms-hyphenate-limit-chars: 10 3 4;
	hyphenate-limit-chars: 10 3 4;
	-webkit-hyphenate-limit-lines: 3;   /* For Safari */
}
button, input, optgroup, select, textarea {
  font-variation-settings: "wdth" 84;
  letter-spacing: 0.018em;
}
button, .btn {
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}
@keyframes rotate {
	0%   { transform: rotate(0);      }
  100% { transform: rotate(360deg); }
}
.rotate {
	animation: rotate 3s linear infinite;
}
#mainmenu {
	width: max(38.2vw , 16.2em);
	background-color: var(--menu-background-color);
  padding-top: 1em;
  font-size: 1.2em;
  font-weight: bold;
	background-color: 39F5A4E;
  padding-top: 1rem;	

  &.show { visibility: visible; } 

  ul ul { padding-left: 1rem; }

  flex-direction: column !important;  /* bootstrap flex-column */
  overflow: scroll;

  button.btn-close {
  	align-self: flex-end;
  	margin-right: 1rem; 
  	margin-bottom: -1rem;
  }
  
  li {
  	display: block;
    padding: .5rem 1rem;
    color: var(--menu-text);
    white-space: nowrap;
    text-decoration: none;
    transition: 
    	color .15s ease-in-out, 
    	background-color .15s ease-in-out, 
    	border-color .15s ease-in-out;

    a,
    a[href],
    a:link,
    a:visited { 
  		color: var(--menu-text);
	    text-decoration: none;
		} 
	}
}
header.navbar-ghost {
    /*content: "bar";*/
    color: transparent;
    display: block;
    position: fixed;
    z-index: 1;
    background-color: var(--accent-color);
    width: 100%;
    margin: 0;
    height: 0.5rem;
    padding-top: 0;
    box-shadow: 0rem -3.6rem 0.9rem 4rem #00000066;
}
main > header.navbar {
	/* attributes of the inserted navbar copy on .navbar-gost mouseover */ 
    z-index: 2;
    transform: translateY(-3.5rem);
    transition: transform 0.2s ease-in;
		position: fixed;
    width: 100%;
    margin: 0;
    box-shadow: 0rem -3.6rem 0.6rem 4rem #00000066;

    &:hover {
    	transform: translateY(0rem) !important;
    }
}
main > header.navbar div.top {
	/* inserted div to scrollTop */ 
  color: white;
  position: absolute;
  font-size: 2em;
  margin-left: 1.6em;
  padding: 0;
}

main {
	perspective: 300rem;
	perspective-origin: 2vh 6vh;

	h1, h2, h3, h4, h5, h6 { 
		margin-top: 1.25em; 
		color: var(--title-color); 
	}
	h1 {
		font-family: 'Bungee', system-ui, sans-serif; 
		font-size: 1.5rem; 
		letter-spacing: 0.1em;
	}
	img{
		/* image of medium height, centered (at least on small screens) */
		max-width: 100%;
    display: block;
    margin: auto;
  }
  a, a:link, a:visited { color: var(--accent-color) }

  article {
		/* bootstrap container */ 
	  width: 100%;
	  padding-right: var(--bs-gutter-x, .75rem);
	  padding-left: var(--bs-gutter-x, .75rem);
	  margin-right: auto;
	  margin-left: auto;

	  position: absolute;
	  height: 100vh;
	  overflow: scroll;
	  padding-bottom:	4em;

	  /*min-height: 100vh;*/
	  background-color: var(--background-color);
	  opacity: 1;

			/*transform: rotate3d(0, 1, 0, -67deg);*/
			/*filter: blur(1px);*/
				/*transform-origin: center left;
				transition: transform 0.1s, filter 0.1s, blur 0.05s, opacity 0.1s ease-out;*/
			/*transition: transform 3s, filter 3s, blur 3s, opacity 2.5s ease-out;*/		   

			/*&.wipe-left	{
				z-index: 1;
				transform: rotate3d(0, 1, 0, -67deg) translate3d(0px, 0px, 30px);
				filter: blur(3px);
				opacity: 0;
			}
			&.swoosh-left {
				z-index: 1;
				transform: rotate3d(0, 1, 0, 18.3deg) translate3d(-80vw, 0px, 10em);
				filter: blur(6px) brightness(.3);
				opacity: 0;
			}*/

		/* sometimes, new detail screens come from the right, and the current has to disapear to the left 
		   however: the transition .swipe-out-left and .swipe-out-right have to be prepared */

		transform: translateX(0vw);
		z-index: 1;
		transition: transform 0.2s ease-out, opacity 0.2s ease-out;


		&.swipe-out-left {
			transform: translateX(-100vw);
			opacity: 0;
		}
		&.swipe-out-right {
			transform: translateX(-100vw);
			opacity: 0;
		}

		& > header + section p:first-child {
		    margin-top: 2em;
		}
		p {
			margin-top: 1rem;
			margin-bottom: 0;
		}
	}

	header {
		/* bootstrap navbar */
	  position: relative;
	  z-index: 1;     /* show header in front of the navbar ghost */ 
	  display: flex;
	  flex-wrap: wrap;
	  align-items: center;
	  justify-content: space-between;
	  padding-top: .5rem;
	  padding-bottom: .5rem;

	  /* use full width; compensate bootstras container definitions of main article ... */
	  margin-left: calc( -1 * var(--bs-gutter-x, .75rem)); 
	  margin-right: calc( -1 * var(--bs-gutter-x, .75rem));

	  /* POT adaptations */
	  background-color: var(--accent-color);
	  color: var(--text-color-dark);
	  height: 3.5rem;

	  nav {
	    width: 2.4rem;
	    font-size: 2rem;
	    margin-left: -0.5rem;
	    cursor: pointer;
			margin: -0.3rem 0rem -0.3rem -0.2rem;
	  }
	  nav > i:first-of-type:before {
    /*content: "\f283";*/
	    transform: rotate(-90deg) translateX(0.25em) translateY(0em);
	    height: 0.5em;
	    overflow: hidden;
	  }
	  h1 {
			margin: 0em;
			/* margin-right: 1.5rem; /* center optical / balance brand icon weight */
			flex-grow: 1; /* left align title */
			color: var(--text-color-dark);
			transition: outline 2s, color 2s, text-shadow 2s;

			&:focus-visible {
		    outline: 0px solid transparent;
		    color: white;
		    text-shadow: 0 0 6px #ffffff66, 0 0 2px #ffffffCC;
			}

	  }
  &.mainmenu {

  	nav {
			width: 3rem;
			height: 3rem;
		  background-image: url(/assets/img/icon_white_1000px.svg);
		  background-repeat: no-repeat;
		  background-size: 2.6rem;
		  background-position: center center;
			margin-right: 0.6em;

		  i { display: none; }
  	}
  	h1 {
  		flex-grow: unset;
  	}
  }
  button.btn {
    font-size: 1.5rem;
    color: var(--text-color-dark);
    margin: -0.6rem;
    margin-left: -1.5em;

    width: 2em;
    margin-right: 0;
    padding-right: 1em;

    a, a:link, a:visited { 
    	color: var(--text-color-dark); 
    	display: none;

    	:is(body.offline) &.client_offline { display: inline-block; }
    	:is(body.online:not(.online-busy)) &.client_online { display: inline-block; }

    	/*:is(body.offline) &.client_offline { display: inline-block; }*/
    }
    i:not(.idle) { display: none; }
    &:hover {
    	color: var(--text-color-dark);
    	i.idle { display: none; }
    	i.hover { display: inline-block; }
    }

    .client_busy {
    	color: var(--text-color-dark); 
    	display: none;
			i:before {
				width: 1em;
				animation: rotate 3s linear infinite;
			}
		}
		:is(body.online-busy) & .client_busy { 
			display: inline-block; 
		}


	}
	&.offcanvas {
		position: absolute;
		width: 100%;
		top: 0;
	}
	}

	#dashboard {
		.three_coupons {
	    --scrollbar-width: 0.5em;
	    width: calc(100% + var(--scrollbar-width));
	    padding-right: var(--scrollbar-width);
	    max-height: 8.3em;
	    overflow-y: scroll;
	    overflow-x: hidden;
		}
	}


/* =============== cart list styles =================== */
table.products  {
	
    --col-width-einheit: 6.2em;      /* sum width of span.quantity and span.unit */
    --col-width-lieferant: 0em;    /* mobile-first: suppressed */
    --col-width-tags: 4em;         /* space for two icons. aditional may overflow into name */
    --col-width-price: 4em;        /* mobile-first */
    --col_width_swipes: 1px;
    /* calc a mobile-first remainder */ 
    --col-width-name: calc(100vw - (2 * var(--bs-gutter-x, .75rem)) - var(--col-width-tags) - var(--col-width-lieferant) - var(--col-width-einheit) + 2 * var(--col_width_swipes) - var(--col-width-price) + 0.8em);

		margin-top: 0.5em;

		--row-height: 2.5em;
		white-space: nowrap;

		th, 
		td {
			height: var(--row-height); 
			overflow: hidden;
			text-overflow: ellipsis;
		}

		/* use as much width for name as possible: full width minus outer padding and width of columns einheit and price */ 
		[data-col="srpc_category"], 
		[data-col="srpc_number"], 
		[data-col="sku"], 
		[data-col="id"], 
		[data-col="_gebinde"],
		[data-col="_produzent"] { display: none; }
		[data-col="name"] { max-width: var(--col-width-name); }
		[data-col="_lieferant"] { display: none; max-width: var(--col-width-lieferant); }
		[data-col="tags"] { max-width: var(--col-width-tags); }
		[data-col="_einheit"] {
		  max-width: var(--col-width-einheit);          
		  span:first-of-type { 
		    width: 3em;
		    display: inline-block;
		    text-align: right;
		    padding-right: 0.2em;
		  }
		}
		th[data-col="_einheit"] { padding-left: 1em; }
		th.right, 
		td.right, 
		[data-col="price"],
		[data-col="tags"] { 
		  text-align: right; 
		  padding-left: 0em; 
		  padding-right: var(--hgap); 
		}
		/*[data-col="price"] { max-width: var(--col-width-price); }*/
		[data-col="tags"] { 
			span { 
				display: inline-block; 
				width: 1.25em;
				margin-left: 0.2em; 
				overflow: hidden; 
				color: transparent; }
		}
}

	/* =========================== collapsibles ====================== */
	/* hidecontent if collapsed, except for the .collapsible-actor*/
	.collapsible.collapsed  *:not(.collapsible-actor) {
		display: none;
	}
	/* styling of .collepsible-actor */
	h3.collapsible-actor,
	h4.collapsible-actor {
	  font-size: 1.15em;
	  font-weight: bold;
	}
	/* styling of .collapsible-type-chevron */
	.collapsible-actor.collapsible-type-chevron:after {
	  content: "\F285";
	  font-family: 'bootstrap-icons';
		font-size: 1.5em;
		line-height: 2rem;
		text-shadow: 0px 0px 2px;
	  font-weight: 700;
	  color: var(--accent-color);
	  display: inline-block;
	  position: absolute;
	  right: 0.65rem;
	  height: 1em;
	  width: 1em;
	  background-image: var(--icon-chevron);
	  background-repeat: no-repeat;
	  background-size: var(--icon-size);
	  transform: rotate(-90deg);
	  transition: transform 0.3s;
	}
	.collapsed .collapsible-actor.collapsible-type-chevron:after {
		transform: rotate(90deg);
	}         


	/* after a login, the username is cached and restored in body[data-login] 
	   this attribute triggers some features hidden otherwise                 */ 
	body[data-login] {
		/* after login, the main menu icon appears on the dashboard instead of #about */
		#account header .brand {

		}

	}


	margin-top: 0em; 

	@media (min-width: 768px) { 
		main article, 
		.container, 
		.container-md, 
		.container-sm { 
			max-width: calc(100vw - 8em); 
		} 
	}
}

body.no-login article#account section:not(#login),
body:not(.no-login) article#account section#login { 
	display: none; 
}
#login_form button, .btn {
	padding-left: 2.5em;
	padding-right: 3em;
	/* geschmäcklerisch */
	font-family: 'Bungee', system-ui, sans-serif;	
}
#login_form #failed_login { display: none; }
#login_form.failed-attempt {
	div.idle { display: none; }
	#failed_login { display: block; }
}
#login-spinner {
    position: absolute;
    height: 1em;
    width: 1em;
    min-height: 0.9em;
    margin-left: 10.2em;
    margin-top: 0.65em;
    display: none;
 }
#login_form.busy #login-spinner { display: inline-block; }

.more-link {
		/* links on the right edge of section titles */
    position: absolute;
    right: 1rem;
    line-height: 2em;
    a, a:link, a:visited {
    	text-decoration: none;
			padding-left: 0.5em;
      cursor: pointer;
		}
}
  /* =========================== forms ====================== */
  form {
    /* label and input are wrapped in a plain div 
       position and size of the label within the div changes if input is empty or not 
       but div and label are steady. 
       since label takes the place of the placeholder, the placeholder color is transparent.
       however, the attribute input[placeholder] is required to filter en ampty nput element in css
       <div>
         <label>
         <input>
       </div> 
    */
    --focus-highlight-color: var(--accent-color);
    @media (prefers-color-scheme: dark) { --focus-highlight-color: white; }

    > div {
      min-height: 3em;
    }

    /* checkmark for valid inputs */ 
    div:has(input):after {
      content: "\F633";             /* check */ 
      position: absolute;
      display: inline-block;
      font-family: 'bootstrap-icons';
      color: var(--accent-color);
      margin-left: -1em;
      margin-top: 0.8em;
      width: 1em;
      height: 1.3em;
      background-color: var(--background-color);
      z-index: -1;        /* behind eventual info icons; will revert if visible */
    	opacity: 0;
      transform-origin: bottom center;
      transition: transform 0.2s 0.1s ease-in;
    }
    div:has(input[type="text"][data-valid="true"]):after {
      z-index: 3;
      opacity: 1;
      transform: scale(0.8); 
    }
    div:has(input[type="text"][data-valid="false"]):after,
    div:has(input[type="password"][data-valid="false"]):after {
    	content: "\F332";     /* exclamation-circle-fill */
	    color: var(--bs-danger);
      z-index: 3;
      opacity: 1;
      /*transform: scale(0.8); */
    }

    /* show/hide password button */
    input#password {
	    width: 17.75em;
	  }
	  i#show_password ,
	  i#hide_password {
	    transform: translateY(0.55em);
	    font-size: 1.1em;
	    line-height: 1.4em;
	    padding: 0.1em 0.35em;
		}
		div:has(input#password[type="password"]) i#hide_password,
		div:has(input#password[type="text"])  i#show_password {
			display: none;
		}
/*    div:has(input#password):after {
			content: "\F341";
			position: absolute;
			display: inline-block;
			font-family: 'bootstrap-icons';
			text-align: center;
			line-height: 1.5em;
			color: var(--text-color-dark);
			background-color: var(--accent-color);
			margin-left: 0.25em;;
			margin-top: 0.9em;
			width: 1.5em;
			height: 1.5em;
			border-radius: 0.2em;
	    z-index: 3;
	    opacity: 1;
	  }*/
	  /*div:has(input#password):after {
	    	background-color: var(--accent-color-k1);
	    }
    }
    div:has(input#password[type="text"]):after {
    	content: "\F340";
    }*/


    label {
      position: absolute;           /* prevent movement of the input element below */
      /*--label-offset: 25px; /* preliminary; to be tested and adapted for other font-sizes and devices */ 
      /*display: block;*/
      /*margin-top: 0.75rem;*/
      font-size: 0.7em;             /* bei ausgefüllten Feldern erscheint das Label klein oberhalb */
      line-height: 1em;             /* Position vom label zwischen den Eingabefeldern ausbalancieren */
      margin-left: 0.05em;          /* optical border alignment */
      /*line-height: 0.75rem;*/
      color: grey;
      /*min-height: 2.6rem;*/

      /* for focus */
      /*border-left: 1em solid transparent;*/
      /*margin-left: -1.3em;*/
      /*padding-left: 0.5em;*/

      transition: font-size 0.2s ease-in, margin 0.2s ease-in, transform 0.2s ease-in, color 0.2s ease-in;

      &:focus-inside {
        border-left-color: var(--text-color);
      }
    } /* end label */
    input[type="checkbox"] {
	    width: 1.3em;
	    height: 1.5em;
	    /* the default checkbox is invisible, but label:before shows an icon instead */ 
	    opacity: 0;
		}
    div:has(input[required]) label:after { content: "\2009*"; }
    div:has(input:placeholder-shown:not(:focus)) label, 
    div:has(input[type="checkbox"]) label {
      /* in empty form fields, the label takes the place of the placeholder, triggering the label transition  */ 
      font-size: 1em ;
      margin-left: 0em;
      transform: translateY(calc(1.1em + 1px));
    }
    div:has(input[type="checkbox"]) label {
    	margin-left: 2em;
    	opacity: 1;
    }
    div:has(input[type="checkbox"]) label:before {
    	/* the original checkbox of the input5type="checkbox"6 element is hiden */ 
	    content: "\F584";       /* \F584 empty box, \F26D box-check, \F26C check square fill  */
	    position: absolute;
	    display: inline-block;
	    font-family: 'bootstrap-icons';
	    font-size: 1.3em;
	    margin-left: -1.5em;
	    width: 1em;
	    visibility: visible;
	  }
	  div:has(input[type="checkbox"]:checked) label:before {
    	content: "\F26C";      /* \F584 empty box, \F26D box-check, \F26C check square fill*/
    	color: var(--bs-green);
      width: 1em;
      background-color: white;
	  }
	  div:has(input[type="checkbox"]):hover label:before,
	  div:has(input[type="checkbox"]:checked:focus) label:before {
    	color: var(--text-color);
	  }
	  div:has(input[type="checkbox"]:checked):hover label:before,
	  div:has(input[type="checkbox"]:checked:focus) label:before {
    	background-color: var(--bs-green);
	  }

    div:has(input[type="text"]:not(:placeholder-shown)) label {
      /* dim the label, if the input element has content added (same might apply to the input border) */ 
      opacity: 0.5;
    }
    div:has(> input:focus) label { 
      /* hilight the label, if the cursor is in the input field (same applies to the input border) */ 
      color: var(--focus-highlight-color); 
      opacity: 1;  /* use the original opacity on focus, even if there's content added */ 
    }

    div:has(input[type][data-valid="false"]) label {
    	color: var(--bs-danger);
    	opacity: 1;
    }

    .tipp {
      position: absolute;
      z-index: 1;
      transform: translateY(0.4em);
      display: block;
      width: 1.25em;
      margin-left: 18.75em;
      font-family: 'bootstrap-icons';

      &:before {
        content:  "\F434";               /* \F434: without circle, \F431 with circle, \F430 circle-fill */
        border-bottom: 2px solid transparent;  /* cover input elements bottom line, even if focused */
        font-size: 1.5em;
        color: var(--tooltip-background-color);
      }

      &[aria-describedby]:before {
        content:  "\F430";               /* \F434: without circle, \F431 with circle, \F430 circle-fill */
        background-color: var(--background-color);
        border-bottom-color: var(--background-color);
      }
      + input { padding-right: 1em; }
    }

    input {
      transform: translateY(0.8em);     /* save room above for the shrinked label */ 
      background-color: transparent;
      border: 0px solid transparent;
      border-bottom: 1px solid;
      width: 20em;
      padding: 0;
      color: var(--text-color);
      font-size: 1rem;
      line-height: 1.3em;
      border-bottom-color: grey;       /* form template objects are grey */
      transition: border 0.2s ease-in, box-shadow 0.2s ease-in;
    
      &:focus { outline: none; border-bottom-color: var(--focus-highlight-color); box-shadow: 0px 2px 0.3px -0.3px var(--focus-highlight-color); }
      &::placeholder { color: transparent; transition: color 0.4s 0.2s; }
      &:focus::placeholder { color: grey; }
      &[data-valid="false"]:invalid:not(:focus),
      &.dirty:invalid:not(:focus) { 
      	border-bottom-color: red; 
      	box-shadow: 0px 2px 0.3px -0.3px red;
      }	
    }
    div#failed_login {
	    margin-top: 1em;
	    color: var(--bs-danger);
	  }
  } /* end form */ 
  .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--tooltip-background-color); }
  .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--tooltip-background-color); }
  .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .bs-tooltip-start .tooltip-arrow::before {border-left-color: var(--tooltip-background-color); }
  .tooltip-inner { background-color: var(--tooltip-background-color); }

} /* End Main */