@import url("../libs/bootstrap/datepicker/bootstrap-datepicker3.min.css");
@import url("../libs/bootstrap/5.2.1/bootstrap.min.css");
@import url("../libs/bootstrap-select/bootstrap-select.min.1.14.0.css");
@import url("../libs/font-awesome/all.min.css");

@import url("../libs/jquery-ui/jquery-ui.min.css");
@import url("../libs/jquery-ui/jquery-ui.structure.min.css");
@import url("../libs/jquery-ui/jquery-ui.theme.min.css");
@import url("../libs/comagno/ui/widget/data/table.new.css");

@import url("cms/editor.css");
@import url("fonts.css");
@import url("ci.css?v=1");
@import url("/web/css/view/login.css");
@import url("/web/css/view/search.css");
@import url("/web/css/view/register.css");

.flex-1 {
  flex: 1 !important;
}
.flex-2 {
  flex: 2 !important;
}
.flex-3 {
  flex: 3 !important;
}
.flex-4 {
  flex: 4 !important;
}
.flex-5 {
  flex: 5 !important;
}
.flex-6 {
  flex: 6 !important;
}
.flex-7 {
  flex: 7 !important;
}
.flex-8 {
  flex: 8 !important;
}
.flex-9 {
  flex: 9 !important;
}
.flex-10 {
  flex: 10 !important;
}
.flex-11 {
  flex: 11 !important;
}
.flex-12 {
  flex: 12 !important;
}

.border-radius-0 {
  border-radius: 0;
}

body.development {
  /* background-color: var(--shopatree-primary-gray); */
}

html,
body {
  height: 100%;
}
body {
  color: #666666;
  font-size: 16px;
  font-family: Arial;
  line-height: 24px;
}
body.flyout-menu-left-open,
body.flyout-menu-right-open {
  overflow: hidden;
}
body > .header {
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  position: fixed;
  transition: box-shadow 0.2s;
}
body > .header.scrolled {
	box-shadow: 0 0 6px #999;
	background-color: #fff;
}

body > .header .header-container {
	display: flex;
	padding: 12px;
	justify-content: space-between;
}
body > .header .header-container .left-menu
{
	display: flex;
	transition: 0.2s;
}
header.header.flyout-menu-left-open .header-container .left-menu
{
	z-index: 3;
	width: 350px;
	margin: -12px;
	padding: 12px;
}
header.header .header-container .left-menu::after {
	content: "";
	top: 0;
	width: 350px;
	bottom: 0;
	left: -350px;
	z-index: -1;
	transition: 0.2s;
	position: absolute;
	background-color: #fff;
	box-shadow: 0 5px 10px -10px #000;
}
header.header.flyout-menu-left-open .header-container .left-menu::after {
	left: 0;
}

body > .header .header-container .left-menu .flyout-menu-left-toggler {
	color: #fff;
	width: 45px;
    height: 45px;
	display: flex;
	font-size: 18px;
	cursor: pointer;
	transition: 0.2s;
	border-radius: 50%;
	text-align: center;
	margin-right: 12px;
	flex-direction: column;
	justify-content: center;
	background-color: #638c39;
}
body > .header.flyout-menu-left-open .header-container .left-menu .flyout-menu-left-toggler,
body > .header .header-container .left-menu .flyout-menu-left-toggler:hover
{
	color: var(--shopatree-gray-light);
	background-color: var(--shopatree-green);
}
header.header .right-menu
{
	display: flex;
	transition: 0.2s;
	justify-content: end;
}
@media (max-width: 991px)
{
	body > header.header .right-menu { width: 45px; }
}

body > .header .header-container .logo-wrapper {
  display: inline-flex;
}
body > .header .header-container img.logo { height: 45px; }
@media (max-width: 374px)
{
	body > .header .header-container img.logo:not(.logo-mobile) { display: none; }
}
@media (min-width: 375px)
{
	body > .header .header-container img.logo.logo-mobile { display: none; }
}

body > .header .flyout-menu-left-backdrop,
body > .header .flyout-menu-right-backdrop {
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 1;
  width: 100vw;
  height: 100vh;
  position: fixed;
  transition: 0.3s;
  pointer-events: initial;
  background-color: #00000021;
}
body > .header:not(.flyout-menu-left-open) .flyout-menu-left-backdrop,
body > .header:not(.flyout-menu-right-open) .flyout-menu-right-backdrop {
  opacity: 0;
  pointer-events: none;
}

body > .header .flyout-menu-left {
  left: -100vw;
  width: 350px;
  bottom: 0;
  position: fixed;
  transition: 0.2s;
  color: #000;
  background-color: #ffffffed;
  box-shadow: none;

  opacity: 0;
  display: flex;
  overflow: hidden;
  overflow-y: auto;
  flex-direction: column;
}

header.header.flyout-menu-left-open .flyout-menu-left {
  z-index: 2;
  opacity: 1;
  left: 0 !important;
  box-shadow: 10px 0 10px -10px #0000008a;
}
body > .header .flyout-menu-left .menu-item {
  color: #666;
  cursor: pointer;
  transition: 0.2s;
  user-select: none;
  padding: 12px 24px;
  text-decoration: none;
  border-bottom: 1px solid #ddd;
}
body > .header .flyout-menu-left .menu-item:hover,
body > .header .flyout-menu-left .menu-item.active {
  color: #fff;
  background-color: #679a36;
  border-bottom-color: #679a36 !important;
}

body > .header .flyout-menu-left .menu-section + .menu-section {
}

.admin-menu-section > .title
{
  color: #fff;
  padding: 6px;
  display: flex;
  font-size: 18px;
  font-weight: bold;
  justify-content: center;
  background-color: var(--shopatree-green);
}
.admin-tools {
  display: flex;
  flex-direction: column;
}
.admin-tools > .admin-tool {
  color: #000;
  display: flex;
  cursor: pointer;
  font-size: 18px;
  transition: 0.2s;
  padding: 5px 15px;
  user-select: none;
  text-decoration: none !important;
}
.admin-tools > .admin-tool:hover {
  color: #fff;
  background-color: #659933b8;
}
.admin-tools > .admin-tool + .admin-tool {
  border-top: 1px solid #ddd;
}

.projects {
  display: flex;
  flex-direction: column;
}
.projects > .project {
  color: #000;
  display: flex;
  cursor: pointer;
  font-size: 18px;
  transition: 0.2s;
  padding: 5px 15px;
  user-select: none;
  text-decoration: none !important;
}
.projects > .project:hover {
  color: #fff;
  background-color: #659933b8;
}
.projects > .project + .project {
  border-top: 1px solid #ddd;
}
body > .header .flyout-menu-left .menu-section .title {
  color: #fff;
  padding: 6px;
  display: flex;
  font-size: 18px;
  font-weight: bold;
  justify-content: center;
  background-color: var(--shopatree-green);
}
body > .header .flyout-menu-left .menu-section .project-items {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  margin: 0 -5px;
}
body > .header .flyout-menu-left .menu-section .project-items .project-item {
  padding: 0 5px;
}
body > .header .flyout-menu-left .menu-section .shop-category-wrapper {
  transition: 0.2s;
}
body > .header .flyout-menu-left .menu-section .shop-category-wrapper + .shop-category-wrapper {
  border-top: 1px solid #ddd;
}
body > .header .flyout-menu-left .menu-section .shop-category-wrapper + .shop-category-wrapper.expanded {
  border-top: 1px solid var(--shopatree-informational-green-light);
}
body > .header .flyout-menu-left .menu-section .shop-category-wrapper .shop-category-header {
  display: flex;
  padding: 5px 15px;
  cursor: pointer;
  transition: 0.2s;
  user-select: none;
}
body > .header .flyout-menu-left .menu-section .shop-category-wrapper a.shop-category-header.overview-link, 
body > .header .flyout-menu-left .menu-section .shop-category-wrapper a.shop-category-header.favorit-link
{
    color: #000;
    text-decoration: none;
}
body > .header .flyout-menu-left .menu-section .shop-category-wrapper a.shop-category-header.overview-link:hover, 
body > .header .flyout-menu-left .menu-section .shop-category-wrapper a.shop-category-header.favorit-link:hover {
    color: #fff;
}

body > .header .flyout-menu-left .menu-section .shop-category-wrapper:hover .shop-category-header {
  color: #fff;
  background-color: #659933b8;
}
body > .header .flyout-menu-left .menu-section .shop-category-wrapper.expanded .shop-category-header {
	color: #fff;
	background-color: #659933;
	box-shadow: 0 5px 10px -10px #000;
}

body
  > .header
  .flyout-menu-left
  .menu-section
  .shop-category-wrapper.expanded
  .category-expand-icon,
body
  > .header
  .flyout-menu-left
  .menu-section
  .shop-category-wrapper:not(.expanded)
  .category-collapse-icon {
  display: none;
}

body
  > .header
  .flyout-menu-left
  .menu-section
  .shop-category-wrapper
  .shop-category-header
  .shop-category-icon {
  width: 24px;
  text-align: center;
}

body
  > .header
  .flyout-menu-left
  .menu-section
  .shop-category-wrapper
  .shop-category-header
  .shop-category {
  font-size: 18px;
  padding: 0 6px;
  flex: 1 1 auto !important;
}

body
  > .header
  .flyout-menu-left
  .menu-section
  .shop-category-wrapper
  .shop-category-items {
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
  overflow: hidden;
  background-color: #fff;
}
body
  > .header
  .flyout-menu-left
  .menu-section
  .shop-category-wrapper:not(.expanded)
  .shop-category-items {
  height: 0;
  display: none;
}
body
  > .header
  .flyout-menu-left
  .menu-section
  .shop-category-wrapper
  .shop-category-items
  .shop {
  margin: 5px;
  padding: 10px;
  flex-grow: 1;
  display: flex;
  transition: 0.2s;
  justify-content: center;
  background-color: #fff;
  border: 1px solid var(--shopatree-neutral-light);
}
body
  > .header
  .flyout-menu-left
  .menu-section
  .shop-category-wrapper
  .shop-category-items
  .shop:hover {
  border: 1px solid var(--shopatree-indicating-green) !important;
}
body
  > .header
  .flyout-menu-left
  .menu-section
  .shop-category-wrapper
  .shop-category-items
  .shop.category-primary {
  width: 100%;
}
body
  > .header
  .flyout-menu-left
  .menu-section
  .shop-category-wrapper
  .shop-category-items
  .shop.category-secondary {
  max-width: calc(50% - 10px);
}
body
  > .header
  .flyout-menu-left
  .menu-section
  .shop-category-wrapper
  .shop-category-items
  .shop
  .shop-image {
  width: 100%;
  height: 64px;
  object-fit: contain;
}
body > .header .flyout-menu-left
  .menu-section
  .shop-category-wrapper
  .shop-category-items
  .additional-shops {
  width: 100%;
  text-align: center;
  user-select: none;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.width-1px {
  width: 1px;
}

.data-pages .page .add-facet,
.data-pages .page .facet-edit {
  position: fixed;
  color: #fff;
  z-index: 1000;
}
.data-pages .page.has-add-button .add-facet {
  top: 74px;
  left: calc(50% + 10px);
}
.data-pages .page.has-add-button .facet-edit {
  top: 74px;
  left: calc(50% - 66px);
}
.data-pages .page:not(.has-add-button) > .facet-edit {
  top: 74px;
  left: calc(50% - 28px);
}
@media (max-width: 1023px) {
  .data-pages .page.has-add-button .add-facet,
  .data-pages .page.has-add-button .facet-edit,
  .data-pages .page:not(.has-add-button) > .facet-edit {
    top: 22px;
  }
}
.floating-action-button {
  border-radius: 50%;
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2),
    0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  min-width: 3.5rem;
  min-height: 3.5rem;
  padding: 0;
  border: none;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  background-color: #0046ad;
  color: #ffffff;
  outline: none;
  transition: background-color 0.2s linear;
  will-change: background-color;
}

.floating-action-button:hover {
  background-color: rgba(0, 70, 173, 0.7);
}

.floating-action-button__icon {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1.5rem;
}

.breadcrumb-fixed {
  display: block !important;
  position: fixed;
  top: 50px;
  z-index: 999;
}
@media (min-width: 1024px) {
  .breadcrumb-fixed {
    top: 102px;
  }
}

.blogarticle-teaser {
  position: relative;
  margin-bottom: 50px;
}
.blogarticle-teaser > .facet-edit {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: unset !important;
  z-index: unset !important;
}

.icon {
  font-family: "Font Awesome 6 Pro" !important;
  height: 35px;
  width: 35px;
  line-height: 35px;
  text-align: center;
  font-size: 13px;
  position: relative;
  cursor: pointer;
  display: inline-block;
}
.section {
  padding: 40px;
}
.section--blue {
  background: #eef2f4;
}
.breadcrumb {
  width: 100%;
  display: block;
  border-radius: 0;
}

.section-gray {
  background-color: var(--shopatree-gray);
}
.section-white {
  background-color: #fff;
}

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select > select.mobile-device:focus + .dropdown-toggle {
  outline: none !important;
}

body:not(.has-header-bottom) .header__bottom.header__navigation-bottom {
  display: none;
}
.header__bottom.header__navigation-bottom {
  height: 32px;
  padding-left: 91px;
  border-top: 1px solid #d1d4d3;
}
.header__navigation-bottom > .header__secondary > a.header__item {
  height: 32px;
  line-height: 32px;
  padding: 0;
  font-size: 10px;
}
.header__navigation-bottom > .header__secondary > a.header__item.active {
  border-bottom: 2px solid #000;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

header.header .portal {
  display: flex;
}
header.header .portal > .portal-name {
  font-weight: bold;
  font-size: 18px;
  line-height: 72px;
  color: rgb(102, 102, 102);
  text-decoration: none;
}
header.header .portal > .portal-selector {
  position: relative;
  margin: 0 20px;
  width: 38px;
}
header.header .portal > .portal-selector > .portal-selector-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  cursor: pointer;
  color: var(--shopatree-blue-cta);
  transition: 0.2s !important;
}
header.header .portal > .portal-selector > .portal-selector-icon:hover,
header.header .portal > .portal-selector > .portal-selector-icon.active {
  background: var(--shopatree-neutral-light);
}
header.header .portal > .portal-selector > .portal-selector-icon > span {
  padding: 7px;
  user-select: none;
}
header.header .portal > .portal-selector > .portal-items {
  background-color: #fff;
  display: flex;
  position: absolute;
  z-index: 1;
  top: calc(50% + 26px);
  box-shadow: 0 0 10px -2px;
  border: 1px solid var(--shopatree-neutral-light);
  transform: translateX(-50%);
  left: 50%;
  padding: 15px;
  z-index: 101;
  flex-direction: column !important;
}
header.header .portal > .portal-selector > .portal-items:not(.active) {
  display: none;
}
header.header .portal > .portal-selector > .portal-items > .portal-item {
  padding: 10px;
  display: flex;
  flex-direction: row;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none !important;
  color: var(--shopatree-blue-cta);
  transition: 0.2s !important;
  align-items: center;
}
header.header .portal > .portal-selector > .portal-items > .portal-item.active,
header.header .portal > .portal-selector > .portal-items > .portal-item:hover {
  background-color: var(--shopatree-neutral-light-blue);
}
header.header
  .portal
  > .portal-selector
  > .portal-items
  > .portal-item
  > .portal-item-icon {
  font-size: 36px;
}
header.header
  .portal
  > .portal-selector
  > .portal-items
  > .portal-item
  > .portal-item-text {
  color: var(--shopatree-primary-gray);
  font-size: 14px;
  padding-left: 10px;
}
header.header .portal-navigation-spacer {
  width: 72px;
  margin-right: 27px;
}
header.header .portal-navigation-spacer svg > line {
  stroke: var(--shopatree-neutral-light);
}

footer .footer__pre {
  min-height: 100px;
}
footer .footer__copyright {
  text-transform: none;
}

.data-pages {
  display: flex;
  flex-direction: column;
}
.page {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.section:not(.section--blue) {
  flex: 1 1 auto !important;
  display: flex !important;
}

@media (max-width: 1200px) {
  .text-container {
    padding: 30px;
  }
}

.image-textlist-image {
  min-height: 280px;
}
.loading-position-relative {
  position: relative !important;
  overflow: hidden;
}
.loading-position-relative .loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  z-index: 2000;
  background-color: rgba(0, 0, 0, 0.2);
  transition: 0.2s;
}
.loading-position-relative .loader > * {
  font-size: 24px;
  color: var(--shopatree-informational-blue-1);
}

.loading-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--shopatree-informational-blue-4);
  overflow: hidden;
  display: none;
}
.loading-bar.loading {
  display: block;
}
.loading-bar div:before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  background: var(--shopatree-informational-blue-2);
  animation: loading-bar-before 2100ms cubic-bezier(0.65, 0.81, 0.73, 0.4)
    infinite;
}
.loading-bar div:after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  background: var(--shopatree-informational-blue-2);
  animation: loading-bar-after 2100ms cubic-bezier(0.16, 0.84, 0.44, 1) infinite;
  animation-delay: 1150ms;
}
.loading-bar-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #00000036;
}
@keyframes loading-bar-before {
  0% {
    left: -35%;
    right: 100%;
  }
  60%,
  100% {
    left: 100%;
    right: -90%;
  }
}
@keyframes loading-bar-after {
  0% {
    left: -200%;
    right: 100%;
  }
  60%,
  100% {
    left: 107%;
    right: -8%;
  }
}

.box-shadow-none {
  box-shadow: none !important;
}
.popover {
  max-width: inherit !important;
  border-radius: 2px;
  box-shadow: 2px 2px 10px 0px #aaa;
}

::-webkit-scrollbar {
  height: 10px;
  width: 10px;
  cursor: pointer;
}

::-webkit-scrollbar-button {
  display: none;
}
::-webkit-scrollbar-thumb {
  background-color: #35383e;
}
::-webkit-scrollbar-track {
  background-color: #ddd;
  border-radius: 0px;
}

.cursor-pointer {
  cursor: pointer;
}

.table-header-controls.data-table-sort-icons > * {
  vertical-align: middle;
}

.snacks {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  z-index: 1100;
}
.snacks .snack {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  border-top: 2px solid transparent;
  box-shadow: 0 3px 5px rgb(0 0 0 / 20%);
  transition: 0.5s cubic-bezier(0, 1.02, 0.58, 1);
}
.snacks .snack.status-ok {
  border-top: 2px solid var(--shopatree-indicating-green);
}
.snacks .snack.status-warning {
  border-top: 2px solid var(--shopatree-indicating-yellow);
}
.snacks .snack.status-error {
  border-top: 2px solid var(--shopatree-indicating-red);
}
.snacks .snack .snack-message {
  font-size: 15px;
  letter-spacing: 1px;
  line-height: 24px;
  color: var(--shopatree-blue);
}
.snacks .snack .snack-footer {
  display: flex;
  justify-content: end;
}
.snacks .snack .snack-footer .snack-footer-action {
  transition: 0.2s;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 1.5px;
  cursor: pointer;
  color: var(--shopatree-blue);
  text-transform: uppercase;
}
.snacks .snack .snack-footer .snack-closer {
  transition: 0.2s;
  cursor: pointer;
  color: var(--shopatree-blue);
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 24px;
  text-align: center;
}
.snacks .snack .snack-footer .snack-closer:hover,
.snacks .snack .snack-footer .snack-footer-action
{
  color: var(--shopatree-informational-blue-2);
}
.footer
{
	background-color: #69442a;
}
.footer-container
{
    margin: auto;
	max-width: 1275px;
    padding: 30px 40px;
}
.footer-row
{
    margin-left: 0;
    margin-right: 0;
    display: grid;
    gap: 20px;
    grid-template-areas: "social brand category shopatree";
}
.footer_logo {
	color: white;
	max-width: 200px;
	margin-bottom: 20px;
    filter: brightness(100);
}

.footer-col h5 {
	margin-bottom: 10px;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
}

.list-unstyled li a {
	color: #fff;
	font-weight: 400;
	font-size: 14px;
	margin-bottom: 5px;
	position: relative;
	transition: all 0.5s;
	opacity: 0.7;
	text-decoration: none;
}

.list-unstyled li a::before {
	transition: all 0.3s;
	border-bottom: 2px solid white;
	content: "";
	position: absolute;
	bottom: 0%;
	width: 0;
}

.list-unstyled li a:hover::before {
	width: 100%;
}

.footer-line {
	width: 100%;
	opacity: 0.8;
	margin: 10px 0;
	border-bottom: 0.025px solid white;
}

.footer-text
{
    color: white;
    opacity: 0.8;
    text-align: center;
    padding: 10px 0 15px 0;
}

.footer-social-links a:hover {
	color: #69442a;
}


.footer-social-links
{
	gap: 15px;
    display: flex;
	justify-content: center;
}
.footer-social-links > a
{
	display: flex;
}
.footer-social-links > a img.footer-social
{
    filter: brightness(100);
    width: 30px;
}
.footer-row .footer-col:first-child { grid-area: social; }
.footer-row .footer-col:nth-child(2) { grid-area: brand; }
.footer-row .footer-col:nth-child(3) { grid-area: category; }
.footer-row .footer-col:last-child { grid-area: shopatree; }

.footer-image {  text-align: center; }

@media (max-width: 991px)
{
	.footer-row
	{
		grid-template-areas:
		"social social social"
        "brand category shopatree";
	}
}

@media (max-width: 575px)
{
	.footer-row
	{
	    text-align: center;
	    justify-content: center;
		grid-template-areas:
	        "social"
	        "brand"
	        "category"
	        "shopatree";
	}
}

.data-model-control-message { display: none; }
.is-valid ~ .data-model-control-message,
.is-invalid ~ .data-model-control-message
{ display : block; }