.kcGlobalLanguageShell {
  position: relative;

  display: inline-flex;

  flex: 0 0 auto;

  align-items: center;
}


.kcGlobalLanguageButton {
  width: 62px;

  min-width: 62px;

  flex-basis: 62px;

  gap: 4px;

  padding: 0 8px;
}


#kcGlobalLanguageCode {
  font-size: 11px;

  font-weight: 800;

  letter-spacing: .03em;
}


.kcGlobalLanguagePopover {
  position: absolute;

  top: calc(100% + 8px);

  right: 0;

  z-index: 20100;

  width: min(
    290px,
    calc(
      100vw
      - max(
        16px,
        env(safe-area-inset-left)
      )
      - max(
        16px,
        env(safe-area-inset-right)
      )
    )
  );

  max-height: calc(
    100dvh
    - max(
      12px,
      env(safe-area-inset-top)
    )
    - max(
      12px,
      env(safe-area-inset-bottom)
    )
    - 64px
  );

  overflow-y: auto;

  overscroll-behavior: contain;

  box-sizing: border-box;

  padding: 7px;

  border:
    1px
    solid
    var(
      --border,
      #d8dee8
    );

  border-radius: 13px;

  background:
    var(
      --card,
      #fff
    );

  color: inherit;

  box-shadow:
    0
    18px
    55px
    rgba(
      15,
      23,
      42,
      .18
    );
}


.kcGlobalLanguagePopover[hidden] {
  display: none !important;
}


.kcLanguageOption {
  width: 100%;

  display: grid;

  grid-template-columns:
    42px
    minmax(0, 1fr);

  align-items: center;

  gap: 8px;

  box-sizing: border-box;

  border: 0;

  border-radius: 9px;

  padding: 9px 10px;

  background: transparent;

  color: inherit;

  text-align: left;

  cursor: pointer;
}


.kcLanguageOption:hover,
.kcLanguageOption.is-active {
  background:
    rgba(
      37,
      99,
      235,
      .09
    );
}


.kcLanguageOption.is-active {
  font-weight: 700;
}


.kcLanguageOptionCode {
  font-size: 11px;

  font-weight: 800;

  color:
    var(
      --muted,
      #64748b
    );
}


/* =========================================================
   LOGIN
   ========================================================= */

.kcLoginLanguageChooser {
  position: fixed;

  top:
    max(
      10px,
      env(safe-area-inset-top)
    );

  right:
    max(
      10px,
      env(safe-area-inset-right)
    );

  z-index: 60;

  display: flex;

  align-items: center;

  gap: 7px;

  padding: 6px 8px;

  border:
    1px
    solid
    rgba(
      255,
      255,
      255,
      .35
    );

  border-radius: 12px;

  background:
    rgba(
      6,
      17,
      29,
      .66
    );

  color: #fff;

  backdrop-filter:
    blur(12px);

  box-shadow:
    0
    10px
    30px
    rgba(
      0,
      0,
      0,
      .16
    );
}


.kcLoginLanguageChooser label {
  font-size: 12px;

  font-weight: 700;
}


.kcLoginLanguageChooser select {
  min-height: 36px;

  max-width: 180px;

  box-sizing: border-box;

  border:
    1px
    solid
    rgba(
      255,
      255,
      255,
      .4
    );

  border-radius: 9px;

  padding: 5px 8px;

  background: #fff;

  color: #102033;
}


@media (max-width: 1280px) {

  .kcGlobalLanguagePopover {
    position: fixed;

    top: calc(
      max(
        8px,
        env(safe-area-inset-top)
      )
      + 52px
    );

    right:
      max(
        10px,
        env(safe-area-inset-right)
      );
  }
}


@media (max-width: 760px) {

  .kcGlobalLanguageButton {
    width: 58px;

    min-width: 58px;

    flex-basis: 58px;
  }


  .kcGlobalLanguagePopover {
    position: fixed;

    top: calc(
      max(
        6px,
        env(safe-area-inset-top)
      )
      + 50px
    );

    right:
      max(
        8px,
        env(safe-area-inset-right)
      );

    left:
      max(
        8px,
        env(safe-area-inset-left)
      );

    width: auto;
  }


  .kcLoginLanguageChooser {
    top:
      max(
        6px,
        env(safe-area-inset-top)
      );

    right:
      max(
        6px,
        env(safe-area-inset-right)
      );

    padding: 5px 7px;
  }


  .kcLoginLanguageChooser label {
    display: none;
  }


  .kcLoginLanguageChooser select {
    max-width: 150px;
  }
}


@media (max-height: 620px) {

  .kcGlobalLanguagePopover {
    max-height: calc(
      100dvh
      - max(
        8px,
        env(safe-area-inset-top)
      )
      - max(
        8px,
        env(safe-area-inset-bottom)
      )
      - 52px
    );
  }
}