._stealien_keybutton {
  border: 0px solid #f8fafb;
  display: inline-block;
  background-color: white;
  color: #542e89;
  font-family: "Nanum Gothic", sans-serif;
  text-align: center;
  padding: 0px;

  box-sizing: border-box;

  width: calc(100% / 11);
}

._stealien_keypad_input_wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* split이 true일 때 각 칸에 적용되는 스타일 */
._stealien_keypad_input {
  height: 30px;
  border: 1px solid #ddd;
  border-radius: 3px;
}

._stealien_keypad_input:read-only {
  pointer-events: visible !important;
  background-color: #fff !important;
  cursor: auto !important;
}

/* split이 false일 때 한 칸에 적용되는 스타일 */
._stealien_keypad_input:not(._stealien_keypad_span ._stealien_keypad_input) {
  	width: 100%;
	height: 42px;
	padding: 11px 14px;
	color: #000;
	font-size: 14px;
	font-weight: 400;
	vertical-align: middle;
	line-height: 20px;
	border: 1px solid #B5B5B5;
	border-radius: 4px;
	letter-spacing: -0.01em;
	outline: none;
	-webkit-appearance: none;
}

._stealien_keybutton_null {
  background-color: white;
}

._stealien_keybutton_wide_btn {
  /*
          useKorean 사용 시 숫자 배열 칸 외에 문자열 배열 칸 세로배열 (창 크기) 를 맞추기 위한 설정
          null_key, shift, back 키의 창 크기 조절에 사용
           */
  height: 30px;
  vertical-align: bottom;
}

._stealien_keybutton.active {
  background-color: #eaeaea;
  color: #4e1a95;
}

._stealien_keypad_border {
  position: absolute;
  text-align: left;
  z-index: 9;
  border: 1px solid #f8fafb;
}

._stealien_keypad_border_pin ._stealien_keybutton {
  width: calc(100% / 3);
}

._stealien_special_keybutton.active {
  background-color: #eaeaea;
  color: #4e1a95;
}

._stealien_special_keybutton {
  border: 0px solid #f8fafb;
  display: inline-block;
  background-color: #f4f4f4;
  color: #542e89;
  font-family: "Nanum Gothic", sans-serif;
  text-align: center;
}

._stealien_keybutton_back {
  width: calc(100% / 11 * 2);
}

._stealien_keybutton_tooltip {
  width: calc(100% / 11);
  min-height: 25px;
  transform: scale(1);
  border-radius: 10px;
  box-shadow: 0 5px 5px gray;
  background-color: white;
  padding-top: 5px;
  user-select: none;
  z-index:10;
  font-size: 20px;
  text-align: center;
}

/* 이미지가 삽입된 상태로 불러와 질경우, 이미지에 대한 세부 너비, 높이 값을 설정합니다. */
._stealien_keybutton > img {
  height: 3rem;
}

.keypad-container {
	width: 50%;
}

.keypad-container .validation {
	position: absolute !important;
}

.keypad-body {
  text-align: center;
}

._stealien_keypad_span {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-bottom: 10px;
}

@media screen and (max-width: 1024px) {
	._stealien_keypad_input:not(._stealien_keypad_span ._stealien_keypad_input) {
		height:50px;
	}
	
	._stealien_keybutton._stealien_keybutton_shuffle > img {
    	max-width: 100%;
	}
	
	._stealien_keybutton._stealien_keybutton_back > img {
    	max-width: 100%;
	}
}