/*  controls component styles */

:root {
  --main-color: #004CAF;
  --back-color: #FFFDFF;
  --transparent-color: rgb(15 116 143 / 70%);
  --light-color: #777;
  --smallest-font: 1.2rem;
  --font-awesome: 'Font Awesome 6 Free';
  --select-color: rgb(13 110 253 / 80%);

  --backgroundColor: rgba(255, 255, 255);
  --squareColor: rgba(100, 100, 100, .5);
  --squareSize: 0.4em;

  --section-padding: 100px;
  --section-padding: 100px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --backgroundColor: rgb(0, 0, 0);
  }
}

.checkered {
  background-color: var(--backgroundColor);
  background-image: linear-gradient(45deg, var(--squareColor) 25%, transparent 25%), linear-gradient(135deg, var(--squareColor) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--squareColor) 75%), linear-gradient(135deg, transparent 75%, var(--squareColor) 75%);
  background-size: calc(2 * var(--squareSize)) calc(2 * var(--squareSize));
  background-position: 0 0, var(--squareSize) 0, var(--squareSize) calc(-1 * var(--squareSize)), 0 calc(-1 * var(--squareSize));
}


.component {
  /* position: relative;
  display: block; */
  outline: 2px dashed lightgray;
  /* width: 100%;
  height: auto; */

}



header-component {
  margin-bottom: 40px;
}

main-container {
  padding: 0;
  padding-top: calc(var(--section-padding) / 4);
  /* padding-bottom: calc(var(--section-padding) / 4);
  padding-left: calc(var(--section-padding) / 4);
  padding-right: calc(var(--section-padding) / 4); */
}

speaker-list .root.speakers {
  width: 100% !important;

}

.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}


.component.active-component {
  outline: 2px solid #007bff;
  z-index: 2;
}


.app-container, main-container, .root-container {
  height: 100%;
  min-height: 200vh !important;
}

badge-previewer-component .root {
  /* padding: 20px 10px; */
  /* padding-top: 20px; */
  display: flex;
  flex-flow: row wrap;
  justify-content: start;
  align-items: start !important;
  width: 100%;
  height: 100%;
}

image-upload {
  display: block;
  border-radius: 12px;
  border: 1px inset #ccc;
  padding: 1rem 0.7rem;
}

nav .website-navigation a {
  color: white;
}
/* nav .website-navigation a:hover {
  color: white;
} */


section-component>.root {
  /* padding-top: calc(var(--section-padding) / 2);
  padding-bottom: calc(var(--section-padding) / 2);
  padding-left: calc(var(--section-padding) / 4);
  padding-right: calc(var(--section-padding) / 4); */
  display: flex;
  flex-flow: row wrap;
  justify-content: start;
  align-items: start ;
  align-content: start !important;
  width: 100%;
  height: 100%;
}


slot {
  color: lightgray;
  font-style: italic;
  text-align: center;
  display: block;
}

main-container>.root-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: start;
  align-items: start;
  align-content: start !important;
  width: 100%;
  height: auto;
}



.select-control {
  padding: 1px 3px !important;
  font-size: 0.7rem !important;
  font-family: 'Roboto', sans-serif !important;
  position: absolute !important;
  width: auto !important;
  left: 0px !important;
  top: -20px !important;
  color: #0d6efd !important;
  background-color: white !important;
}

.edit-control {
  font-size: 0.1rem !important;
  font-family: 'Roboto', sans-serif !important;
  position: absolute !important;
  width: auto !important;
  left: 60px !important;
  top: -25px !important;
}

.edit-control .edit-control-btn {
  padding: 1px 4px;
}

header-component>.select-control,
main-container>.select-control {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.select-control i {
  font-size: 0.6rem;
  border-radius: 50%;
  border: 1px solid white;
}

controls-component {
  /* --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-primary-text-emphasis: #052c65;
  --bs-secondary-text-emphasis: #2b2f32;
  --bs-success-text-emphasis: #0a3622;
  --bs-info-text-emphasis: #055160;
  --bs-warning-text-emphasis: #664d03;
  --bs-danger-text-emphasis: #58151c;
  --bs-light-text-emphasis: #495057;
  --bs-dark-text-emphasis: #495057;
  --bs-primary-bg-subtle: #cfe2ff;
  --bs-secondary-bg-subtle: #e2e3e5;
  --bs-success-bg-subtle: #d1e7dd;
  --bs-info-bg-subtle: #cff4fc;
  --bs-warning-bg-subtle: #fff3cd;
  --bs-danger-bg-subtle: #f8d7da;
  --bs-light-bg-subtle: #fcfcfd;
  --bs-dark-bg-subtle: #ced4da;
  --bs-primary-border-subtle: #9ec5fe;
  --bs-secondary-border-subtle: #c4c8cb;
  --bs-success-border-subtle: #a3cfbb;
  --bs-info-border-subtle: #9eeaf9;
  --bs-warning-border-subtle: #ffe69c;
  --bs-danger-border-subtle: #f1aeb5;
  --bs-light-border-subtle: #e9ecef;
  --bs-dark-border-subtle: #adb5bd;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg: #fff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color: #000;
  --bs-emphasis-color-rgb: 0, 0, 0;
  --bs-secondary-color: rgba(33, 37, 41, 0.75);
  --bs-secondary-color-rgb: 33, 37, 41;
  --bs-secondary-bg: #e9ecef;
  --bs-secondary-bg-rgb: 233, 236, 239;
  --bs-tertiary-color: rgba(33, 37, 41, 0.5);
  --bs-tertiary-color-rgb: 33, 37, 41;
  --bs-tertiary-bg: #f8f9fa;
  --bs-tertiary-bg-rgb: 248, 249, 250;
  --bs-heading-color: inherit;
  --bs-link-color: #0d6efd;
  --bs-link-color-rgb: 13, 110, 253;
  --bs-link-decoration: underline;
  --bs-link-hover-color: #0a58ca;
  --bs-link-hover-color-rgb: 10, 88, 202;
  --bs-code-color: #d63384;
  --bs-highlight-color: #212529;
  --bs-highlight-bg: #fff3cd;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-xxl: 2rem;
  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
  --bs-border-radius-pill: 50rem;
  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  --bs-focus-ring-width: 0.25rem;
  --bs-focus-ring-opacity: 0.25;
  --bs-focus-ring-color: rgba(13, 110, 253, 0.25);
  --bs-form-valid-color: #198754;
  --bs-form-valid-border-color: #198754;
  --bs-form-invalid-color: #dc3545;
  --bs-form-invalid-border-color: #dc3545; */
}

.controls-component {
  position: relative;
  z-index: 1000;
  /* z-index: 1000;
  background-color: #fafafa;
  color: black;
  border-radius: 0.25rem;
  border: 1px solid #ccc;
  font-size: 0.7rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .08); */
}

.controls-component .control-button {
  /* font-size: 1rem; */
  font-size: 0.7rem;
  border-radius: 50%;
  border: 1px solid white
}


.controls-component .control-button:hover {
  border: 1px solid black;
  color: black;
}

.controls-component .hasvaluecontrol {
  position: absolute;
  font-size: 8px !important;
  left: 2px !important;
  top: 2px !important;
  color: orange !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .08);

}

/* end  controls component styles */



/* main-controls-component */
.select-time-element {
  display: block;
  position: absolute;
  width: auto;
  height: auto;
  z-index: 20;
  color: var(--select-color) !important;
  font-size: 20px !important;
}

.select-time-element i {
  display: block;
  margin: 0;
  padding: 0;
}


.resize-top-left-handle {
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
}

.resize-top-right-handle {
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}

.resize-bottom-left-handle {
  left: 0;
  bottom: 0;
  transform: translate(-50%, 50%);
}

.resize-bottom-right-handle {
  right: 0;
  bottom: 0;
  transform: translate(50%, 50%);
}


.move-handle {
  left: 50%;
  transform: translateX(-50%);
  top: -25px;
  cursor: move;
}


.sort-handle {
  left: 50%;
  transform: translateX(-50%);
  top: -25px;
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab;
}

.ghost {
  opacity: .5;
  background: #88d7fcb8;
}

.chosen {
  color: #fff;
  background-color: #ffec408c;
}

.drag-handle {
  display: none;
  left: 25%;
  transform: translateX(-50%);
  top: -25px;
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab;
}


.root .drag-handle {
  display: block;
}

.delete-handle {
  right: 10px;
  transform: translateX(-50%);
  top: -25px;
  color: red !important;
  font-size: 1.3rem !important;
  cursor: pointer;
}

/* end of control elements styles */


/* end of main-controls-component */






.section {}


.sidebar {
  width: 200px;
  background: #f8f9fa;
  border-right: 1px solid #dee2e6;
  padding: 10px;
}

.sidebar button {
  width: 100%;
  margin-bottom: 10px;
}


/*  start of count down timer */
/* ------------------------------------------------- */
.countdown .counter__box {
  text-align: center;
  background: blue;
  width: 89px;
  height: 103px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0.25rem;
  color: white;
}

.countdown .counter__time {
  font-size: 3rem;
  margin: 0;
  padding: 0;
  font-weight: bold;
}

.countdown .counter__duration {
  font-size: 0.8rem;
  text-transform: capitalize;
  margin: 0;
  padding: 0;
  color: #eee;
}

.countdown .dots {
  font-size: 52px;
  color: #002e46;
  margin: -0.75rem;
  padding: 0;
}

.countdown .black-white {
  background: linear-gradient(to top,
      #002e46 0%,
      #002e46 50%,
      #4d707f 50%,
      #4d707f 100%);
}

.countdown .sky-blue {
  background: linear-gradient(to top,
      #009edb 0%,
      #009edb 50%,
      rgba(127, 206, 236, 0.95) 50%,
      rgba(127, 206, 236, 0.95) 100%);
}

/* end of count down timer */



/* start of speakers */

speaker-form .modal {
  display: block;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

speaker-form .modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

speaker-form .close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

speaker-form .close:hover,
speaker-form .close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


.social-icon {
  font-size: 1rem;
}

.social-icon.facebook {
  color: #3b5998;
}

.social-icon.twitter {
  color: #1da1f2;
}

.social-icon.instagram {
  color: #e1306c;
}

.social-icon.linkedin {
  color: #0077b5;
}

.social-icon.youtube {
  color: #ff0000;
}

.social-icon.pinterest {
  color: #bd081c;
}

.social-icon.snapchat {
  color: #fffc00;
}

.social-icon.tiktok {
  color: #000000;
}

.social-icon.whatsapp {
  color: #25d366;
}

.social-icon.reddit {
  color: #ff4500;
}

.social-icon.tumblr {
  color: #35465c;
}

.social-icon.flickr {
  color: #ff0084;
}

.social-icon.dribbble {
  color: #ea4c89;
}

.social-icon.vimeo {
  color: #1ab7ea;
}

.social-icon.skype {
  color: #00aff0;
}

.social-icon.telegram {
  color: #0088cc;
}

.social-icon.discord {
  color: #7289da;
}

/* end of  speakers */



/* start of modal  */
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1050;
  display: none;
}

.modal-container.show {
  display: flex;
}

/* end of modal */

/* start of toast */
.toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1050;
}

/* end of toast */




/* start general boostrap form style */
/* .error {
  border-color: #dc3545;
}

.valid-feedback {
  display: none;
}

.error+.invalid-feedback {
  display: block;
}

.modal {
  display: block;
  background: rgba(0, 0, 0, 0.5);
} */

/* end general boostrap form style */

/* color picker code */

/* color-picker .color-square {
  width: 25px;
  height: 25px;
  display: inline-block;
  cursor: pointer;
  margin: 0px;
  border: 3px solid transparent;
  border-radius: 50%;
}

color-picker .color-square.active {
  border-color: blue;
} */

color-picker .color-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

color-picker .picker-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

color-picker .selected-color-label {
  font-weight: bold;
  min-width: 100px;
}

color-picker .color-squares {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

color-picker .color-square {
  width: 24px;
  height: 24px;
  cursor: pointer;
  border-radius: 4px;
}

color-picker .color-square.active {
  border: 2px solid #000;
}

color-picker .btn {
  margin-top: 8px;
}





/* end of color picker code */

/* start of image carousel  */

image-carousel-controls .uploader {
  margin-bottom: 20px;
}

image-carousel-controls .image-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

image-carousel-controls .image-list img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  cursor: pointer;
}

image-carousel-controls .controls {
  display: flex;
  gap: 5px;
  align-items: center;
}

image-carousel-controls .image-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}



component-agenda .agenda {
  display: grid;
  gap: 5px;
  justify-content: center;
}

component-agenda .agenda.horizontal {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

component-agenda .agenda.vertical {
  grid-template-rows: repeat(auto-fit, minmax(300px, auto));
  grid-template-columns: minmax(33.33%, auto);

}

agenda-item {
  width: 100%;
}


component-agenda .agenda-item {
  margin: 1rem;
}

component-agenda .agenda-item h4 {
  padding: 0.5rem;
}

component-agenda .list-group-item {
  position: relative;
  padding-left: 30px;
}

agenda-sub-item .list-group-item {
  text-align: center;
  display: flex;
  flex-flow: column;
  gap: 10px;
}

component-agenda .list-group-item::after {
  content: "";
  border-radius: 50%;
  width: 25px;
  height: 25px;
  left: -12px;
  top: -12px;
  background-color: black;
  position: absolute;
  display: block;
}

component-agenda .list-group-item::before {
  content: "";
  width: 5px;
  height: 100%;
  left: 0;
  top: 0;
  background-color: black;
  position: absolute;
  display: block;
}



border-control .border-style-dropdown {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 5px;
  border-width: 2px;
  border-style: solid;
}


border-style-controls .config-btn {
  display: inline-block;
  margin: 5px;
  cursor: pointer;
  padding: 5px;
  text-align: center;
  border: 1px solid transparent;
  font-size: .8rem;
}

border-style-controls .accordion-button {
  padding: 3px 20px;
}


border-style-controls .config-btn.active {
  outline: 2px solid blue;
}

border-style-controls .preview-div {
  width: 100px;
  height: 80px;
  min-width: 100px;
  min-height: 80px;
  margin: 20px auto;
  transition: all 0.3s;
}

border-style-controls .accordion-button {
  cursor: pointer;
}

border-style-controls .border-config-container {
  max-height: 399px;
  height: 399px;
  overflow-y: auto;

}


width-selector .width-selector {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

width-selector .width-option {
  display: flex;
  align-items: center;
  cursor: pointer;
}

width-selector .width-option input[type="radio"] {
  display: none;
}

width-selector .width-option label {
  display: block;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f8f9fa;
  font-size: 0.9em;
}

width-selector .width-option input[type="radio"]:checked+label {
  background-color: #007bff;
  color: white;
}

width-selector .custom-width {
  display: flex;
  align-items: center;
  gap: 10px;
}

width-selector .custom-width input[type="number"] {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 0.9em;
  width: 100px;
}

width-selector .custom-width select {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 0.9em;
}


height-selector .height-selector {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

height-selector .height-option {
  display: flex;
  align-items: center;
  cursor: pointer;
}

height-selector .height-option input[type="radio"] {
  display: none;
}

height-selector .height-option label {
  display: block;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f8f9fa;
  font-size: 0.9em;
}

height-selector .height-option input[type="radio"]:checked+label {
  background-color: #007bff;
  color: white;
}

height-selector .custom-height {
  display: flex;
  align-items: center;
  gap: 10px;
}

height-selector .custom-height input[type="number"] {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 0.9em;
  width: 100px;
}

height-selector .custom-height select {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 0.9em;
}


.choice-option {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.choice-option input[type="radio"] {
  display: none;
}

.choice-option label {
  display: block;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f8f9fa;
  font-size: 0.9em;
}

.choice-option input[type="radio"]:checked+label {
  background-color: #007bff;
  color: white;
}

z-carousel {
  --carousel-arrow-bg: rgb(26 26 26 / .25);
  --carousel-arrow-bg-hover: rgb(26 26 26 / .5);
  --carousel-arrow-shadow: 0 0 1rem rgb(255 255 255 / .25);
  --clr-accent: #6480c5;
}

@media (prefers-color-scheme: light) {
  z-carousel {
    --carousel-arrow-bg: rgb(255 255 255 / .3);
    --carousel-arrow-bg-hover: rgb(255 255 255 / .5);
    --carousel-arrow-shadow: 0 0 1rem rgb(0 0 0 / .25);
    --clr-accent: #3b4d7c;
  }
}

z-carousel.styled:not(:defined) {
  display: none;
}

z-carousel.styled {
  box-sizing: border-box;
  border-radius: 10px;
}

z-carousel.styled::part(content) {
  align-items: center;
  scroll-behavior: smooth;
}

z-carousel.styled::part(nav-btn) {
  position: absolute;
  top: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--carousel-arrow-bg);
  backdrop-filter: blur(5px);
  box-shadow: var(--carousel-arrow-shadow);
  transition-property: background-color, backdrop-filter;
  transition-duration: .3s;
}

z-carousel.styled::part(nav-btn):hover {
  background-color: var(--carousel-arrow-bg-hover);
  backdrop-filter: blur(5px);
}

z-carousel.styled::part(nav-btn):focus-visible {
  outline: .125rem auto var(--clr-accent);
}

z-carousel.styled::part(nav-btn nav-btn--disabled) {
  opacity: .5;
  pointer-events: none;
  box-shadow: none;
}

z-carousel.styled::part(nav-btn nav-btn--prev) {
  left: 10px;
  transform: translate(10px, -50%);
}

z-carousel.styled::part(nav-btn nav-btn--next) {
  right: 10px;
  transform: translate(-10px, -50%);
}

z-carousel.styled::part(pagination) {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 5px 10px;
  border-top-right-radius: 5px;
  backdrop-filter: blur(5px);
  background: var(--carousel-arrow-bg);
  pointer-events: none;
}

z-carousel.styled::part(dots) {
  z-index: 1;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 100px);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
  background: var(--carousel-arrow-bg);
  box-shadow: var(--carousel-arrow-shadow);
  backdrop-filter: blur(5px);
  border-radius: 9999px;
}

z-carousel.styled::part(dots-item) {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: .75rem .5rem;
  transition: color .3s;
  font-size: 0;
  line-height: 0;
}

z-carousel.styled::part(dots-item)::before {
  content: '';
  width: .25rem;
  height: .25rem;
  background-color: currentColor;
  border-radius: 50%;
}

z-carousel.styled::part(dots-item dots-item--active)::before {
  width: .75rem;
  height: .75rem;
  box-shadow: var(--carousel-arrow-shadow);
}

z-carousel.styled::part(dots-item dots-item--active):hover {
  color: var(--clr-accent);
}

z-carousel.styled::part(dots-item dots-item--active) {
  color: var(--clr-accent);
}

z-carousel.styled>img {
  object-fit: cover;
  height: 100%;
}

body::-webkit-scrollbar {
  width: .5rem;
}

body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}


.fa-icon-chooser-container fa-icon-chooser {
  width: 100%;
  max-height: 100%;
  height: auto;
}

.fa-icon-chooser-container fa-icon-chooser article {
  display: none;
}

.badge-spinner-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}