/* custom icons css start */
.i__Icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.i__Icon .svg__wrapper {
  position: relative;
  z-index: 2;
  height: 100%;
  width: 100%;
}
.i__Icon svg {
  height: 100%;
  width: 100%;
  fill: var(--iconColorSD);
}
.i__Icon.i__IconAnimated svg *[stroke] {
  stroke: var(--iconColorSD);
}
.i__Icon.i__IconAnimated svg *[fill] {
  fill: var(--iconColorSD);
}

.i__Icon.i__IconAnimated .svg__wrapper {
  --tw-scale-x: 1.2;
  --tw-scale-y: 1.2;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
/* custom icons css end */

/* Outline-family assets must not inherit legacy filled-glyph state colors. */
.i__Icon svg.smackdab-icon,
.i__Icon svg.smackdab-icon * {
  fill: none !important;
}

.button_SD:is(.primary__Btn, .danger__Btn, .success__Btn, .cyan__Btn, .orange__Btn):where(:not(.disable__Btn, .disable__outline__Btn)) .i__Icon svg.smackdab-icon {
  stroke: var(--bgWhiteSD);
}
/* small-loader */
.small__loader__sd {
    position: relative;
    height: 0px;
    width: 0px
}
@keyframes small__loader__sd {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}
.small__loader__sd {
    animation: small__loader__sd 1s linear infinite;
    border-radius: 9999px;
    border-width: 3px;
    border-color: var(--primaryBlackSD200);
    border-right-color: var(--primaryColorSD);
    padding: 7px
}
.small__loader__sd:is(.dark *) {
    border-color: var(--light-border)
}
.small__loader__sd.small__loader__sd__dark {
    border-color: var(--primaryBlackSD200);
    border-right-color: var(--primaryBlackSD)
}
.small__loader__sd.small__loader__sd__light {
    border-color: #ffffff60;
    border-right-color: var(--bgWhiteSD)
}
/* small-loader-end */
/* profile__avatar */
.avatar__Img {
  position: relative
}
.avatar__Img .online__status {
  position: absolute;
  bottom: 0px;
  right: 3px;
  z-index: 3;
  height: 16px;
  width: 16px;
  border-radius: 9999px;
  border-width: 2px;
  border-color: var(--bgWhiteSD);
  background-color: var(--successSD)
}
.avatar__Img > .inner__wrapper {
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: 5px
}
.img__element {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 100%
}
.img__element img {
  position: absolute;
  top: 0px;
  left: 0px;
  display: block;
  height: 100%;
  width: 100%
}
.noImg__icon {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding: 24%
}
.noImg__icon::before {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-color: var(--infoColorSD);
  opacity: 0.2;
  --tw-content: '';
  content: var(--tw-content)
}
.noImg__icon {
  /* @apply w-full h-full relative p-[24%] overflow-hidden before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:bg-bgSurface before:opacity-1; */
}
.noImg__icon .i__Icon {
  height: 100%;
  width: 100%
}
/* .noImg__icon svg {
  @apply fill-primaryColorSD;
}
.noImg__icon .i__IconAnimated svg *[stroke]{
  @apply stroke-primaryColorSD;
}
.noImg__icon .i__IconAnimated svg *[fill]{
  @apply fill-primaryColorSD;
} */
.img__loader__wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 100%
}
.img__loader__wrapper::before {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-color: var(--infoColorSD);
  opacity: 0.2;
  --tw-content: '';
  content: var(--tw-content)
}
.img__loader__wrapper .inner__wrapper {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 2;
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center
}
.img__loader__wrapper .small__loader__sd {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  border-right-color: var(--primaryColorSD)
}
.noName__letter {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--infoColorSD100);
  padding-top: 100%
}
.noName__letter::before {
  position: absolute;
  top: 0px;
  left: 0px;
  display: none;
  height: 100%;
  width: 100%;
  background-color: var(--infoColorSD);
  opacity: 0.2;
  --tw-content: "";
  content: var(--tw-content)
}
.noName__letter:hover {
  background-color: var(--infoColorSD)
}
.noName__letter .bgWrapper {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-color: var(--infoColorSD);
  opacity: 0.2
}
.noName__letter .noName__letter__text {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  --tw-translate-x: -50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  padding-top: 2px;
  font-family: Matter;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--infoColorSD);
  /* Positioned at left 50%, the text only gets half the circle's width; without nowrap an inherited
     word-break (e.g. break-all on a card) stacks two-letter initials ("D" above "D"). */
  white-space: nowrap
}
/* profile__avatar__end */