env(safe-area-inset-top)
env(safe-area-inset-right)
env(safe-area-inset-bottom)
env(safe-area-inset-left)

.header {
	padding: 0 0 calc(constant(safe-area-inset-top) + 5px);
    padding: 0 0 calc(env(safe-area-inset-top) + 5px);
}
.footer {
    padding: 0 0 calc(constant(safe-area-inset-bottom));
    padding: 0 0 calc(env(safe-area-inset-bottom));
}

input:focus {
	outline: none !important;
	box-shadow: none !important;
}

body { -webkit-text-size-adjust:none; }

.lvFrameBox {
	display: inline-block;
	background-image: url("/img/tier/frame5.png");
	background-size: cover;
	background-position: center;
	width: 60px;
	height: 30px;
	line-height: 30px;
	margin-right: 6px;
	color: #7f5104;
}


.checkHideStyle:checked + label {
	border: 1px solid #000
}

.checkBlueStyle:checked + label {
	border: 1px solid rgb(37 99 235);
	background-color: rgb(37 99 235);
	color: #fff;
}

.checkRedStyle:checked + label {
	border: 1px solid rgb(220 38 38);
	background-color: rgb(220 38 38);
	color: #fff;
}

.checkGreenStyle:checked + label {
	border: 1px solid rgb(22 163 74);
	background-color: rgb(22 163 74);
	color: #fff;
}

.checkPurpleStyle:checked + label {
	border: 1px solid rgb(147 51 234);
	background-color: rgb(147 51 234);
	color: #fff;
}

.checkSkyStyle:checked + label {
	border: 1px solid rgb(56 189 248);
	background-color: rgb(56 189 248);
	color: #fff;
}

.checkSelectStyle:checked + label.checkBlueStyle {
	border: 1px solid rgb(37 99 235);
	background-color: rgb(37 99 235);
	color: #fff;
}

.checkSelectStyle:checked + label + span + label.checkBlueStyle {
	border: 1px solid rgb(37 99 235);
	background-color: rgb(37 99 235);
	color: #fff;
}

.checkSelectStyle:checked + label.checkRedStyle {
	border: 1px solid rgb(220 38 38);
	background-color: rgb(220 38 38);
	color: #fff;
}

.checkSelectStyle:checked + label + span + label.checkRedStyle {
	border: 1px solid rgb(220 38 38);
	background-color: rgb(220 38 38);
	color: #fff;
}

.layoutPickBox .swal2-content{
	padding: 0;
}

.no-arrow::-webkit-outer-spin-button,
.no-arrow::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.selectedView.on {
    background-color: #0c0546;
    color: #fff;
}

.selectedView2.on {
    background-color: #0c0546;
    color: #fff;
}

#input_box {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding-right: 50px;
	padding-left: 6px;
}

#input_button {
	position: absolute;
	top: 0px;
	right: 0;
	border: 0;
	color: #fff;
	height: 34px;
	line-height: 30px;
	padding: 0 8px;
}

.no-drag {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/*.on {
	background: #0c0546;
	color: #fff !important;
}*/

.statusBtn {
	background: #a1a1a1;
	color: #fff;
}

.statusBtn.on {
	background: #60a5fa;
}

.roomTimeBtn + label {
	border-radius: 6px;
	border: 1px solid gray;
	display: block;
    width: 80px;
    padding-top: 6px;
    padding-bottom: 6px;
    text-align: center;
	font-weight: bolder;
	cursor: pointer;
}

.roomTimeBtn + label span {
	font-size: 14px;
}

.roomTimeBtn:checked + label {
	border: 1px solid rgb(37 99 235);
	background-color: rgb(37 99 235);
	color: #fff;
}

.macro_box {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.2);
	z-index: 10000;
}

.macro_box .macro_content_box {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(100% - 40px);
	max-width: 500px;
	height: calc(100% - 40px);
	max-height: 500px;
	background: #fff;
	border-radius: 10px;
	transform: translate(-50%, -50%);
	overflow: hidden;
}

.rank_box {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.2);
	z-index: 10000;
}

.rank_box .rank_content_box {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(100% - 40px);
	max-width: 500px;
	height: calc(100% - 40px);
	max-height: 500px;
	background: #fff;
	border-radius: 10px;
	transform: translate(-50%, -50%);
	overflow: hidden;
}

.rolling_box {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.2);
	z-index: 1000;
}

.rolling_box .rolling_content_box {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(100% - 40px);
	max-width: 500px;
	height: calc(100% - 40px);
	max-height: 500px;
	background: #fff;
	border-radius: 10px;
	transform: translate(-50%, -50%);
	overflow: hidden;
}

.ticketPreview {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.2);
	z-index: 1000;
}

.ticketPreview .ticketPreview_content {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(100% - 40px);
	max-width: 500px;
	height: calc(100% - 40px);
	max-height: 500px;
	background: #fff;
	border-radius: 10px;
	transform: translate(-50%, -50%);
	overflow: hidden;
}

.block_box {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.2);
	z-index: 1000;
}

.block_box .block_content_box {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(100% - 40px);
	max-width: 500px;
	height: calc(100% - 40px);
	max-height: 500px;
	background: #fff;
	border-radius: 10px;
	transform: translate(-50%, -50%);
	overflow: hidden;
}

.send_box {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.2);
	z-index: 10000;
}

.send_box .send_content_box {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(100% - 40px);
	max-width: 500px;
	height: calc(100% - 40px);
	max-height: 300px;
	background: #fff;
	border-radius: 10px;
	transform: translate(-50%, -50%);
	overflow: hidden;
}

.no-draggable {
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none
}

.items {
  position: relative;
  width: 100%;
  /*background-color: skyblue;*/
}
.items::after {
  display: block;
  content: "";
  padding-bottom: 100%;
}
.itemsContent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.scroll {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.scroll::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}

/*연승 효과 */
.rainbow_two {animation: rainbow_two 2s infinite;}
.rainbow_three {animation: rainbow_three 3s infinite;}
.rainbow_four {animation: rainbow_four 4s infinite;}
.rainbow_five {animation: rainbow_five 5s infinite;}
.rainbow_six {animation: rainbow_six 6s infinite;}

#rank_num1 {animation: border_box 5s infinite;}

@keyframes border_box{
	0% { border: 3px solid #FF0000; }
    9% { border: 3px solid #FF5E00; }
	18% { border: 3px solid #FFBB00; }
	27% { border: 3px solid #FFE400; }
	36% { border: 3px solid #41FF3A; }
	45% { border: 3px solid #0054FF; }
	54% { border: 3px solid #5F00FF; }
	63% { border: 3px solid #0054FF; }
	72% { border: 3px solid #41FF3A; }
	81% { border: 3px solid #FFE400; }
	90% { border: 3px solid #FFBB00; }
	100% { border: 3px solid #FF5E00; }
}

@keyframes wins{
    0% { color: #FF5E00; }
    15% { color: #FF0000; }
	30% { color: #FF5E00; }
	45% { color: #FFBB00; }
	65% { color: #FF5E00; }
	80% { color: #FF0000; }
	100% { color: #FF5E00; }
}

@keyframes rainbow_two{
    0% { color: #FF0000; }
    33% { color: #FF5E00; }
	66% { color: #FFBB00; }
	100% { color: #FF5E00; }
}

@keyframes rainbow_three{
    0% { color: #FF0000; }
    20% { color: #FF5E00; }
	40% { color: #FFBB00; }
	60% { color: #FFE400; }
	80% { color: #FFBB00; }
	100% { color: #FF5E00; }
}

@keyframes rainbow_four{
    0% { color: #FF0000; }
    14% { color: #FF5E00; }
	28% { color: #FFBB00; }
	42% { color: #FFE400; }
	56% { color: #41FF3A; }
	70% { color: #FFE400; }
	84% { color: #FFBB00; }
	100% { color: #FF5E00; }
}

@keyframes rainbow_five{
    0% { color: #FF0000; }
    11% { color: #FF5E00; }
	22% { color: #FFBB00; }
	33% { color: #FFE400; }
	44% { color: #41FF3A; }
	55% { color: #0054FF; }
	66% { color: #41FF3A; }
	77% { color: #FFE400; }
	88% { color: #FFBB00; }
	100% { color: #FF5E00; }
}

@keyframes rainbow_six{
    0% { color: #FF0000; }
    9% { color: #FF5E00; }
	18% { color: #FFBB00; }
	27% { color: #FFE400; }
	36% { color: #41FF3A; }
	45% { color: #0054FF; }
	54% { color: #5F00FF; }
	63% { color: #0054FF; }
	72% { color: #41FF3A; }
	81% { color: #FFE400; }
	90% { color: #FFBB00; }
	100% { color: #FF5E00; }
}

@import url('https://cdn.jsdelivr.net/npm/galmuri@latest/dist/galmuri.css');

.marquee {
  display: flex;
  overflow: hidden;
  background-color: #fff;
}

.marquee.reverse {
  flex-direction: row-reverse;
}

.marquee .marquee-text {
  margin: 0;
  font-family: 'Galmuri14';
  font-size: 1em;
  font-weight: bold;
  white-space: nowrap;
  color: #0c0546;
/*   text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; 
  animation-name: glow;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;*/
}

@keyframes glow {
  from {text-shadow:0px 0px 5px #fff,0px 0px 5px #614ad3;}
  to {text-shadow:0px 0px 20px #fff,0px 0px 20px #614ad3;}
}

.layer_popup {width:100%; height:100%; background-color: rgba(53,53,53,0.5);position:fixed; top:50%; left:50%; transform: translate(-50%,-50%);  z-index:2000;}
.layer_popup .layer_box {position:fixed; top:50%; left:50%; transform: translate(-50%,-50%); text-align:center; background: #fff;     width: calc(100% - 40px); min-width: 320px; max-width: 400px; box-sizing: border-box; border: 3px solid #19191a; box-shadow: 3px 3px 3px 0;}
.layer_popup #layer_de {overflow-y: auto;}
.layer_popup .layer_box > .layer_header {background:#0c0546; display:block; width: 100%; height: 40px; line-height: 40px; font-size : 16px; font-weight: 700; color: #fff}
.layer_popup .layer_box > .layer_body {padding: 15px 20px; height: calc(100% - 120px); min-height: 200px;}
.layer_popup .layer_box > .layer_body div {margin-bottom: 10px; }
.layer_popup .layer_box > .layer_body div span {display: block; margin-bottom: 10px; color: #0c0546;}
.layer_popup .layer_box > .layer_body div label {font-size : 16px; font-weight: bolder; color: #0c0546; display: block; margin-bottom: 10px;}
.layer_popup .layer_box > .layer_body div select {height: 30px; width: 100%; border: 1px solid #19191a}
.layer_popup .layer_box textarea {border: 1px solid #19191a; width: 100%; line-height: 30px; margin-top: 9px; border-radius: 10px; padding-left: 10px; height: calc(100% - 114px); margin-bottom: 10px;}
.layer_popup .layer_box button {width: calc(50% - 3px); height: 40px; background: #0c0546; font-weight: 700; color: #fff; border: 1px solid #19191a; border-radius: 5px;}
.layer_popup .layer_box button.oneBtn {width: 100%;}
.layer_popup .layer_box .layer_body span {margin-bottom:10px; font-size : 16px; font-weight: bolder; color: #0c0546;}
.layer_popup .layer_box .layer_footer {padding: 8px 20px; display: flex; justify-content: space-between;}

.animate__animated.animate__delay-box {
    -webkit-animation-delay: 1500ms;
    animation-delay: 1500ms;
    -webkit-animation-delay: calc(var(--animate-delay)*1.5);
    animation-delay: calc(var(--animate-delay)*1.5)
}

.leftRankingUserBox img {
	width: 100% !important;
	height: 100% !important;
}

.status_btn {
	cursor:pointer;
	color: #fff;
	padding: 4px 8px;
	border: 1px solid #ff0000;
	background: #ff0000;
	border-radius: 6px;
}

.status_btn.on {
	border: 1px solid #008000;
	background: #008000;
}

.chipIcon.on {
	border: 4px solid #F0E402;
}

.layoutSize {
	height: 500px;
	overflow-y: auto;
}

#gameCollectionSelcet .on {
	background: #6b7280;
	color: #fff;
	
}

.dark .dark\:hidden {
	display:none;
}

.dark .dark\:block {
	display:block;
}

.tabActionBtn.on {
	color: #f97316;
}

.changeTicketBtn.on {
	background-color:#0c0546 !important;
	color: #fff;
}

.gameTypeSelectBox.on {
	background:#57779E;
	color: #fff;
}

div::-webkit-scrollbar {
width: 10px;
}
div::-webkit-scrollbar-thumb {
background-color: #ababab;
}
div::-webkit-scrollbar-track {
background-color: white;
}

ul::-webkit-scrollbar {
width: 10px;
}
ul::-webkit-scrollbar-thumb {
background-color: #ababab;
}
ul::-webkit-scrollbar-track {
background-color: white;
}

.dark div::-webkit-scrollbar {
width: 10px;
}
.dark div::-webkit-scrollbar-thumb {
background-color: #2f3542;
}
.dark div::-webkit-scrollbar-track {
background-color: grey;
}

.dark ul::-webkit-scrollbar {
width: 10px;
}
.dark ul::-webkit-scrollbar-thumb {
background-color: #2f3542;
}
.dark ul::-webkit-scrollbar-track {
background-color: grey;
}